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

fix: 修正了一些拼写错误，略微完成了一些文章部分的开发

Browse Source
This commit is contained in:
539943419 committed 2025-01-12 21:19:45 +08:00
1 parent 2955e0fe47
commit 6be2c9a0d7
15 files changed
+284 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app.vue
+18 -5
View File
@@ -1,16 +1,17 @@
<template>
<div class="main-warpper">
<div class="main-wrapper">
<miao-header></miao-header>
<miao-content-warpper>
<miao-content-wrapper>
<NuxtPage />
</miao-content-warpper>
</miao-content-wrapper>
</div>
</template>
<script lang="ts" setup>
import miaoHeader from './components/miaoHeader.vue';
import miaoContentWarpper from './components/miaoContentWarpper.vue';
import miaoContentWrapper from './components/miaoContentWrapper.vue';
// @ts-ignore
useHead({
title: '杪 Blog',
meta: [
@@ -21,7 +22,7 @@ useHead({
</script>
<style lang="scss" scoped>
.main-warpper {
.main-wrapper {
width: 100vw;
height: 100vh;
display: flex;
@@ -32,3 +33,15 @@ useHead({
<style lang="scss">
@use '/style/default.scss';
</style>
<style>
.page-enter-active,
.page-leave-active {
transition: all 0.15s ease;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>
components/miaoContentWarpper.vue → components/miaoContentWrapper.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<main id="miao-main">
<n-scrollbar>
<div class="miao-main-slot-warpper">
<div class="miao-main-slot-wrapper">
<slot></slot>
</div>
</n-scrollbar>
@@ -20,7 +20,7 @@
padding: 0;
box-sizing: border-box;
.miao-main-slot-warpper {
.miao-main-slot-wrapper {
position: relative;
min-height: calc(100vh - 60px);
}
components/miaoHeader.vue
+7 -6
View File
@@ -1,11 +1,11 @@
<template>
<section id="miao-header-warpper">
<section id="miao-header-wrapper">
<header id="miao-header">
<div class="miao-header-title">
<a href="https://nj.miaospring.top:3001/" target="_blank" title="喵"><span
style="color: #15aa87; margin-right: 1px;">杪</span>Blog</a>
</div>
<div class="header-right-warp">
<div class="header-right-wrap">
<ul class="miao-header-nav">
<li v-for="(item) in navList" :key="item.path"
:class="['miao-header-nav-item', isActive(item) ? 'miao-header-nav-item-active' : '']">
@@ -57,8 +57,9 @@ const isActive = (navItem: NavItem) => {
return false
}
onMounted(() => {
// console.log(route)
onMounted(async () => {
// const data = await $fetch('/api/test')
// console.log(data)
})
</script>
@@ -66,7 +67,7 @@ onMounted(() => {
// @use '/style/miaoStyle.scss';
#miao-header-warpper {
#miao-header-wrapper {
position: relative;
background-color: #fff;
user-select: none;
@@ -102,7 +103,7 @@ onMounted(() => {
}
}
.header-right-warp {
.header-right-wrap {
flex: 1;
height: 100%;
margin-left: auto;
nuxt.config.ts
+13 -2
View File
@@ -5,10 +5,16 @@ import Components from "unplugin-vue-components/vite";
// https://nuxt.com/docs/api/configuration/nuxt-config
// @ts-ignore
export default defineNuxtConfig({
devtools: { enabled: true },
devtools: { enabled: false },
alias: {
"@": "/"
},
app: {
pageTransition: {
name: 'page',
mode: 'out-in'
}
},
vite: {
server: {},
plugins: [
@@ -25,5 +31,10 @@ export default defineNuxtConfig({
]
},
modules: ["nuxtjs-naive-ui", "@pinia/nuxt"],
compatibilityDate: "2025-01-12"
compatibilityDate: "2025-01-12",
build: {
// 开启打包分析
analyze: true,
},
experimental: { appManifest: false },
});
pages/index.vue
+34 -24
View File
@@ -3,22 +3,24 @@
<div class="title">
<span>导航</span>
</div>
<div class="content-warp">
<div class="content-wrap">
<div v-for="(item) in PageContent" :key="item.subTitle" class="content">
<div class="sub-title">
<n-divider title-placement="left">
<div class="sub-title-wrapper">
<div class="sub-title-text">{{ item.subTitle }}</div>
<div :class="['sub-title-chevron', item.show ? '' : 'sub-title-chevron-hide']"
@click="switchItemShow(item)">
<ChevronDown />
</div>
</div>
</n-divider>
</div>
<div :class="['content-items-warp', item.show ? '' : 'content-items-warp-hide']">
<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-warp">
<div class="content-item-link-wrap">
<div>link:</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>
@@ -93,6 +95,21 @@ const PageContent = reactive<PageContent[]>([
]
}
]
}, {
subTitle: '小工具',
show: true,
content: [
{
name: 'genshin-gacha',
description: '通过模拟来计算抽卡成功率的小工具',
nuxtLinks: [
{
name: 'demo',
to: 'tool/genshin-gacha'
}
]
},
]
}, {
subTitle: '学习资料',
show: true,
@@ -109,22 +126,7 @@ const PageContent = reactive<PageContent[]>([
]
},
]
}, {
subTitle: '小工具',
show: true,
content: [
{
name: 'genshin-gacha',
description: '通过模拟来计算抽卡成功率的小工具',
nuxtLinks: [
{
name: 'demo',
to: 'tool/genshin-gacha'
}
]
},
]
}
])
const switchItemShow = (item: PageContent) => {
@@ -140,14 +142,13 @@ const switchItemShow = (item: PageContent) => {
<style lang="scss" scoped>
.main {
box-sizing: border-box;
// min-height: calc(100vh - 60px);
height: 100%;
display: flex;
flex-direction: column;
padding: 20px 10px;
background: rgba(21, 170, 135, .02);
.content-warp {
.content-wrap {
box-sizing: border-box;
width: 100%;
padding: 0 15px;
@@ -156,10 +157,17 @@ const switchItemShow = (item: PageContent) => {
.sub-title {
display: flex;
height: 80px;
margin-bottom: 10px;
letter-spacing: 2px;
user-select: none;
.sub-title-wrapper {
height: 80px;
display: flex;
align-items: center;
}
.sub-title-text {
font-size: 20px;
// font-weight: 500;
@@ -193,14 +201,14 @@ const switchItemShow = (item: PageContent) => {
}
}
.content-items-warp {
max-height: 200vh;
.content-items-wrap {
max-height: 400vh;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
justify-content: center;
gap: 20px;
// overflow: hidden;
transition: max-height 0.25s ease, opacity 0.3s ease;
transition: max-height 0.25s ease, opacity 0.25s ease;
opacity: 1;
// margin: 0 -20px;
@@ -248,9 +256,10 @@ const switchItemShow = (item: PageContent) => {
font-size: 14px;
font-weight: 300;
padding: 0 10px;
min-height: 40px;
}
.content-item-link-warp {
.content-item-link-wrap {
flex: 1;
width: 100%;
box-sizing: border-box;
@@ -291,6 +300,7 @@ const switchItemShow = (item: PageContent) => {
width: 100%;
display: flex;
justify-content: center;
user-select: none;
// margin-bottom: 10px;
&>span {
pages/posts.vue
+7 -6
View File
@@ -1,6 +1,6 @@
<template>
<div class="temp">
其实<br>一篇文章都还没写
<div class="post-wrapper">
<NuxtPage />
</div>
</template>
@@ -9,12 +9,13 @@
</script>
<style lang="scss" scoped>
.temp {
height: calc(100vh - 60px);
.post-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 35px;
font-family: PT Serif, Serif;
margin: 0 auto;
max-width: 800px;
padding: 0;
}
</style>
pages/posts/index.vue
+119
View File
@@ -0,0 +1,119 @@
<template>
<div class="posts-wrapper">
<article class="posts-item" v-for="post in postsData" :key="post.id">
<header class="post-title">
<a href="">{{ post.title }}</a>
</header>
<p class="post-summary">{{ post.summary }}...</p>
<footer class="post-footer">
<div class="post-date">{{ post.date }}</div>
<div class="post-tags">
<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)">
<n-skeleton text style="height: 40px; width: 60%" />
<n-skeleton text :repeat="2" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { postItem } from '~/types/post';
// const router = useRouter()
const isInit = ref(false)
const postsData = ref<postItem[]>([])
onMounted(async () => {
// router.push('/posts/temp')
await sleep(1000)
postsData.value = await $fetch('/api/posts/getPosts')
isInit.value = true
console.log(postsData.value)
})
</script>
<style lang="scss" scoped>
.posts-wrapper {
// height: 50vh;
width: 100%;
padding-top: 10px;
// background-color: #15aa87;
.posts-item {
margin: 10px 20px;
padding-bottom: 20px;
&:not(:last-child) {
border-bottom: 1px solid #e8e8e8;
}
.post-title {
font-family: PT Serif, Serif;
font-size: 28px;
border-bottom: 0;
&>a {
cursor: pointer;
color: #000;
transition: all .2s;
text-decoration: none;
&:hover {
color: #15aa87;
}
}
}
.post-summary {
font-size: 14px;
color: rgba(0, 0, 0, .54);
font-weight: 200;
}
.post-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
font-size: 12px;
color: rgba(0, 0, 0, .54);
font-weight: 200;
.post-date {
font-size: 12px;
}
.post-tags {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 12px;
color: rgba(0, 0, 0, .54);
font-weight: 200;
&>div {
cursor: pointer;
transition: color .2s linear;
&:hover {
color: #15aa87;
}
}
}
}
}
.posts-skeleton {
&-item {
padding: 10px 20px;
}
}
}
</style>
pages/posts/temp.vue
+21
View File
@@ -0,0 +1,21 @@
<template>
<div class="temp">
其实<br>一篇文章都还没写
<NuxtPage />
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
.temp {
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
font-size: 35px;
font-family: PT Serif, Serif;
}
</style>
pages/tool/genshin-gacha.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<div class="iframe-warpper">
<div class="iframe-wrapper">
<iframe src="/iframe-source/genshin-gacha/index.html" frameborder="0"></iframe>
</div>
</template>
@@ -9,7 +9,7 @@
</script>
<style scoped>
.iframe-warpper {
.iframe-wrapper {
width: 100%;
min-height: inherit;
padding: 0;
server/api/posts/getPosts.ts
+22
View File
@@ -0,0 +1,22 @@
import type { postItem } from "~/types/post";
function generateFakeData(length: number) {
const data: postItem[] = [];
for (let i = 0; i < length; i++) {
data.push({
id: i,
title: `测试标题`,
summary: `测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要测试摘要`,
type: 'markdown',
tags: ['test', 'test1'],
url: '',
date: parseInt(new Date().getTime().toFixed()),
});
}
return data;
}
export default defineEventHandler((event) => {
const data = generateFakeData(50)
return data
})
server/api/test.ts
+5
View File
@@ -0,0 +1,5 @@
export default defineEventHandler((event) => {
return {
hello: 'world'
}
})
tsconfig.json
+9 -4
View File
@@ -1,9 +1,14 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"exclude": [
".output",
"node_modules",
".nuxt",
"include": [
"pages/**/*",
"hooks/**/*",
"components/**/*",
"server/**/*",
"style/**/*",
"utils/**/*",
".nuxt/**/*",
"types/**/*"
]
}
types/post.ts
+9
View File
@@ -0,0 +1,9 @@
export type postItem = {
id: number;
title: string;
date: number;
summary: string;
tags: string[];
type: 'markdown';
url: string;
};
utils/range.ts
+11
View File
@@ -0,0 +1,11 @@
export default function range(start: number, end?: number) {
if (end === undefined) {
end = start;
start = 0;
}
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
utils/sleep.ts
+5
View File
@@ -0,0 +1,5 @@
export default function sleep(time: number) {
return new Promise((resolve) => {
setTimeout(resolve, time)
})
}