539943419/miaoBlog
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加了几个图标

Browse Source
This commit is contained in:
539943419 committed 2025-01-13 12:44:53 +08:00
1 parent 50def8fc50
commit e2079c5388
12 files changed
+124 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.gitignore
+2
View File
@@ -22,3 +22,5 @@ logs
.env
.env.*
!.env.example
userData
components/icons/chevronDown.vue
+6
View File
@@ -0,0 +1,6 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
d="M112 184l144 144 144-144" />
</svg>
</template>
components/icons/link.vue
+6
View File
@@ -0,0 +1,6 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path d="M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42" fill="none"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" />
</svg>
</template>
components/icons/tag.vue
+8
View File
@@ -0,0 +1,8 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path
d="M435.25 48h-122.9a14.46 14.46 0 00-10.2 4.2L56.45 297.9a28.85 28.85 0 000 40.7l117 117a28.85 28.85 0 0040.7 0L459.75 210a14.46 14.46 0 004.2-10.2v-123a28.66 28.66 0 00-28.7-28.8z"
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
<path d="M384 160a32 32 0 1132-32 32 32 0 01-32 32z" />
</svg>
</template>
components/icons/time.vue
+8
View File
@@ -0,0 +1,8 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z" fill="none"
stroke="currentColor" stroke-miterlimit="10" stroke-width="32" />
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
d="M256 128v144h96" />
</svg>
</template>
components/miaoDivider-left.vue
+2
View File
@@ -25,10 +25,12 @@
.left-line {
flex: 1;
min-width: 25px;
}
.right-line {
flex: 32;
min-width: 25px;
}
.miao-divider-text {
package.json
-1
View File
@@ -11,7 +11,6 @@
},
"dependencies": {
"@pinia/nuxt": "^0.9.0",
"@vicons/ionicons5": "^0.13.0",
"dayjs": "^1.11.13",
"markdown-it": "^14.1.0",
"node-fetch": "^3.3.2",
pages/index.vue
+45 -13
View File
@@ -14,14 +14,14 @@
<ChevronDown />
</div>
</div>
</miao-divider-left >
</miao-divider-left>
</div>
<div :class="['content-items-wrap', item.show ? '' : 'content-items-wrap-hide']">
<div v-for="(cItem) in item.content" :key="cItem.name" class="content-item">
<div class="content-item-name">{{ cItem.name }}</div>
<div class="content-item-description">{{ cItem.description }}</div>
<div class="content-item-link-wrap">
<div>link:</div>
<div class="content-item-link-wrap-icon"> <link-icon /></div>
<a v-for="link in (cItem.links ?? [])" :href="link.url" target="_blank">{{ link.name }}</a>
<NuxtLink v-for="link in (cItem.nuxtLinks ?? [])" :to="link.to">{{ link.name }}</NuxtLink>
</div>
@@ -36,7 +36,8 @@
import { reactive } from 'vue';
import miaoDividerLeft from '~/components/miaoDivider-left.vue';
// @ts-ignore
import ChevronDown from "@vicons/ionicons5/ChevronDown"
import ChevronDown from "~/components/icons/ChevronDown.vue";
import linkIcon from '~/components/icons/link.vue';
type PageContent = {
subTitle: string,
@@ -62,7 +63,7 @@ const PageContent = reactive<PageContent[]>([
show: true,
content: [
{
name: 'miaoDirectory',
name: 'MiaoDirectory',
description: '有个插件功能的单文件文件托管服务',
links: [
{
@@ -76,7 +77,7 @@ const PageContent = reactive<PageContent[]>([
]
},
{
name: 'miaoShare',
name: 'MiaoShare',
description: '多了个加密环节的文件分享平台',
links: [
{
@@ -86,7 +87,7 @@ const PageContent = reactive<PageContent[]>([
]
},
{
name: 'miaoBlog',
name: 'MiaoBlog',
description: '施工中，不过不要抱有太大期待',
links: [
{
@@ -101,7 +102,7 @@ const PageContent = reactive<PageContent[]>([
show: true,
content: [
{
name: 'genshin-gacha',
name: 'Genshin-Gacha',
description: '通过模拟来计算抽卡成功率的小工具',
nuxtLinks: [
{
@@ -111,7 +112,7 @@ const PageContent = reactive<PageContent[]>([
]
},
{
name: 'miaoTracker',
name: 'MiaoTracker',
description: '仅仅是个接口而已，用来查询开发者的位置记录',
nuxtLinks: [
{
@@ -135,6 +136,26 @@ const PageContent = reactive<PageContent[]>([
}
]
},
{
name: 'Nuxt',
description: 'Nuxt官方文档',
links: [
{
name: 'Nuxt',
url: 'https://nuxt.com/'
}
]
},
{
name: 'Element-plus',
description: 'element-plus官方文档',
links: [
{
name: 'element-plus',
url: 'https://element-plus.org/zh-CN/guide/design.html'
}
]
}
]
},
])
@@ -252,14 +273,15 @@ const switchItemShow = (item: PageContent) => {
}
.content-item-name {
box-sizing: border-box;
width: 100%;
font-size: 20px;
padding-bottom: 5px;
background-color: #15aa87ce;
color: #fff;
margin-bottom: 10px;
padding-left: 10px;
padding: 3px 10px 5px;
letter-spacing: 0px;
margin-bottom: 10px;
// font-family: PT Serif, Serif;
// font-weight: 600;
}
@@ -281,10 +303,14 @@ const switchItemShow = (item: PageContent) => {
user-select: none;
padding-right: 10px;
&>div {
font-size: 14px;
font-weight: 300;
&-icon {
// font-size: 14px;
// font-weight: 300;
margin-right: 10px;
height: 16px;
aspect-ratio: 1;
transform: translateY(0px) rotate(-45deg);
opacity: .7;
}
&>a {
@@ -321,4 +347,10 @@ const switchItemShow = (item: PageContent) => {
}
}
}
@media screen and (max-width: 999px) {
.main .content-wrap .content .content-items-wrap {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
</style>
pages/posts/index.vue
+31 -6
View File
@@ -6,15 +6,21 @@
</header>
<p class="post-summary">{{ post.summary }}...</p>
<footer class="post-footer">
<div class="post-date">{{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}</div>
<div class="post-date">
<time-icon class="post-date-icon" />
<span>
{{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
</span>
</div>
<div class="post-tags">
<bookmark class="post-tags-icon" />
<div v-for="tag in post.tags">{{ tag }}</div>
</div>
</footer>
</article>
<div class="posts-skeleton" v-if="!isInit">
<div class="posts-skeleton-item" v-for="_ in range(5)">
<el-skeleton :rows="5" />
<el-skeleton :rows="3" />
</div>
</div>
</div>
@@ -22,6 +28,8 @@
<script setup lang="ts">
import useDefaultStore from '~/hooks/pinia/useDefaultStore';
import timeIcon from '~/components/icons/time.vue'
import bookmark from '~/components/icons/tag.vue'
import type { postItem } from '~/types/post';
const store = useDefaultStore()
@@ -43,7 +51,11 @@ onMounted(async () => {
// router.push('/posts/temp')
// await sleep(1000)
postsData.value = await getData()
isInit.value = true
isInit.value = true;
(async () => {
const res = await $fetch('/api/test/testDir')
console.log(res)
})()
// console.log(postsData.value)
})
@@ -52,12 +64,13 @@ onMounted(async () => {
<style lang="scss" scoped>
.posts-wrapper {
// height: 50vh;
box-sizing: border-box;
width: 100%;
padding-top: 10px;
padding: 10px 20px;
// background-color: #15aa87;
.posts-item {
margin: 10px 20px;
margin: 10px 0px;
padding-bottom: 20px;
&:not(:last-child) {
@@ -97,18 +110,29 @@ onMounted(async () => {
font-weight: 200;
.post-date {
display: flex;
font-size: 12px;
&-icon {
height: 16px;
margin-right: 5px;
}
}
.post-tags {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
gap: 6px;
font-size: 12px;
color: rgba(0, 0, 0, .54);
font-weight: 200;
&-icon {
height: 10px;
transform: rotate(-90deg) translate(-1px, -1px);
// margin-right: -3px;
}
&>div {
cursor: pointer;
transition: color .2s linear;
@@ -124,6 +148,7 @@ onMounted(async () => {
.posts-skeleton {
&-item {
padding: 10px 20px;
// border-bottom: 1px solid #e8e8e8;
}
}
}
pages/posts/post-[id].vue
+8 -1
View File
@@ -2,7 +2,7 @@
<div class="md-wrapper">
<div class="md" v-if="isInit">
<div class="md-title">{{ title }}</div>
<n-divider />
<div class="md-divider"></div>
<div v-html="renderedData"></div>
</div>
<div v-else class="md-skeleton-item">
@@ -88,4 +88,11 @@ onMounted(async () => {
font-size: 42px;
margin-bottom: -10px;
}
.md-divider {
width: 100%;
height: 1px;
background-color: #e8e8e8;
margin: 30px 0;
}
</style>
pnpm-lock.yaml
Generated
-8
View File
@@ -11,9 +11,6 @@ importers:
'@pinia/nuxt':
specifier: ^0.9.0
version: 0.9.0(magicast@0.3.5)(pinia@2.3.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))(rollup@4.30.1)
'@vicons/ionicons5':
specifier: ^0.13.0
version: 0.13.0
dayjs:
specifier: ^1.11.13
version: 1.11.13
@@ -983,9 +980,6 @@ packages:
engines: {node: '>=16'}
hasBin: true
'@vicons/ionicons5@0.13.0':
resolution: {integrity: sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==}
'@vitejs/plugin-vue-jsx@4.1.1':
resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
engines: {node: ^18.0.0 || >=20.0.0}
@@ -4296,8 +4290,6 @@ snapshots:
- rollup
- supports-color
'@vicons/ionicons5@0.13.0': {}
'@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
dependencies:
'@babel/core': 7.26.0
server/api/test/testDir.ts
+8
View File
@@ -0,0 +1,8 @@
import fs from 'fs';
export default defineEventHandler((event) => {
const res = fs.readdirSync('./')
return {
res
}
})