init

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "unplugin"
+    ]
+}

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="main-warpper">
+    <miao-header></miao-header>
+    <miao-content-warpper>
+      <NuxtPage />
+    </miao-content-warpper>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import miaoHeader from './components/miaoHeader.vue';
+import miaoContentWarpper from './components/miaoContentWarpper.vue';
+
+</script>
+
+<style lang="scss" scoped>
+.main-warpper {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+</style>
+
+<style lang="scss">
+@use '/style/default.scss';
+</style>

components/miaoContentWarpper.vue

@@ -0,0 +1,24 @@
+<template>
+    <main id="miao-main">
+        <n-scrollbar>
+            <slot></slot>
+        </n-scrollbar>
+    </main>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+#miao-main {
+    position: relative;
+    height: calc(100vh - 60px);
+    max-height: calc(100vh - 60px);
+    width: 100%;
+    max-width: 1200px;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+</style>

components/miaoHeader.vue

@@ -0,0 +1,156 @@
+<template>
+    <section id="miao-header-warpper">
+        <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">
+                <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' : '']">
+                        <NuxtLink :to="item.path">{{
+                            item.title }}</NuxtLink>
+                    </li>
+                </ul>
+            </div>
+        </header>
+    </section>
+</template>
+
+<script setup lang="ts">
+
+const route = useRoute()
+
+type NavItem = {
+    title: string,
+    path: string,
+    otherPath?: string[]
+}
+
+
+const navList: NavItem[] = [
+    {
+        title: '首页',
+        path: '/'
+    },
+    {
+        title: '文章',
+        path: '/posts',
+        otherPath: ['/post']
+    },
+    // {
+    //     title: '测试',
+    //     path: '/test',
+    //     otherPath: ['/testRouter']
+    // },
+]
+
+const isActive = (navItem: NavItem) => {
+    const currentFirstPath = `/${route.path.split('/')[1]}`
+    if (currentFirstPath === navItem.path) {
+        return true
+    }
+    if (navItem.otherPath && navItem.otherPath.length > 0) {
+        return navItem.otherPath.includes(currentFirstPath)
+    }
+    return false
+}
+
+onMounted(() => {
+    // console.log(route)
+})
+</script>
+
+<style lang="scss" scoped>
+// @use '/style/miaoStyle.scss';
+
+
+#miao-header-warpper {
+    position: relative;
+    background-color: #fff;
+    user-select: none;
+
+    #miao-header {
+        box-sizing: border-box;
+        height: 60px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, .03), 0 6px 6px rgba(0, 0, 0, .05);
+        transition: box-shadow .3s linear;
+        padding: 10px 32px;
+
+        &:hover {
+            box-shadow: 0 5px 20px rgba(0, 0, 0, .08), 0 6px 6px rgba(0, 0, 0, .1);
+        }
+
+        .miao-header-title {
+            font-size: 30px;
+            margin: 0;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+
+            &>a {
+                color: #000;
+                // font-weight: 600;
+                letter-spacing: 4px;
+                text-decoration: none;
+                font-family: PT Serif, Serif;
+            }
+        }
+
+        .header-right-warp {
+            flex: 1;
+            height: 100%;
+            margin-left: auto;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-end;
+
+            .miao-header-nav {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                list-style: none;
+                padding: 0;
+                margin: 0;
+
+                &-item {
+                    &:not(:first-child) {
+                        margin-left: 20px;
+                    }
+
+                    &>a {
+                        font-size: 20px;
+                        font-family: PT Serif, Serif;
+                        text-decoration: none;
+                        color: #000;
+                        transition: color .15s linear;
+                    }
+                }
+
+                &-item-active {
+                    &>a {
+                        color: #15aa87;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
+
+<!-- <style lang="scss">
+.miao-header-nav {
+    &-item {
+        &>a {
+            .router-link-active {
+                color: #cf1111;
+            }
+        }
+    }
+}
+</style> -->

hooks/useDefaultStore.ts

@@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+
+export const useDefaultStore = defineStore("default", () => {
+	const _return = {};
+	const appendReturn = (obj: { [key: string]: any }) => {
+		Object.assign(_return, obj);
+	};
+	const count = ref(0);
+	appendReturn({ count });
+	return _return;
+});

nuxt.config.ts

@@ -0,0 +1,29 @@
+import AutoImport from "unplugin-auto-import/vite";
+import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
+import Components from "unplugin-vue-components/vite";
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+// @ts-ignore
+export default defineNuxtConfig({
+	devtools: { enabled: true },
+	alias: {
+		"@": "/"
+	},
+	vite: {
+		server: {},
+		plugins: [
+			AutoImport({
+				imports: [
+					{
+						"naive-ui": ["useDialog", "useMessage", "useNotification", "useLoadingBar"]
+					}
+				]
+			}),
+			Components({
+				resolvers: [NaiveUiResolver()]
+			})
+		]
+	},
+	modules: ["nuxtjs-naive-ui", "@pinia/nuxt"],
+	compatibilityDate: "2025-01-12"
+});

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@pinia/nuxt": "^0.9.0",
+    "naive-ui": "^2.41.0",
+    "node-fetch": "^3.3.2",
+    "nuxt": "^3.10.3",
+    "nuxtjs-naive-ui": "^1.0.2",
+    "pinia": "^2.3.0",
+    "unplugin-auto-import": "^19.0.0",
+    "unplugin-vue-components": "^28.0.0",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "sass": "^1.83.1"
+  }
+}

pages/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="main">
+    <div class="title">
+      <span>导航</span>
+    </div>
+    <div class="content-warp">
+      <div v-for="(item) in PageContent" :key="item.subTitle" class="content">
+        <div class="sub-title">
+          <span>{{ item.subTitle }}</span>
+        </div>
+        <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>link:</div>
+            <a v-for="link in cItem.links" :href="link.url" target="_blank">{{ link.name }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const PageContent = [
+  {
+    subTitle: '个人项目',
+    content: [
+      {
+        name: 'miaoDirectory',
+        description: '有个插件功能的单文件文件托管服务',
+        links: [
+          {
+            name: 'github',
+            url: "https://github.com/Zioywishing/miao-directory",
+          },
+          {
+            name: 'gitea',
+            url: 'https://nj.miaospring.top:3001/539943419/miaoDirectory',
+          }
+        ]
+      },
+      {
+        name: 'miaoShare',
+        description: '多了个加密环节的文件分享平台',
+        links: [
+          {
+            name: "gitea",
+            url: "https://nj.miaospring.top:3001/539943419/miaoShare"
+          }
+        ]
+      }
+    ]
+  }
+]
+
+</script>
+
+<style lang="scss" scoped>
+.main {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 10px;
+
+  .content-warp {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 15px;
+
+    .content {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
+      gap: 20px;
+      /* 可选，设置子元素之间的间距 */
+
+      .sub-title {
+        font-size: 20px;
+        margin-bottom: 10px;
+        letter-spacing: 2px;
+        grid-row: 1 / span 1;
+        grid-column: 1 / -1;
+      }
+
+      .content-item {
+        border: 1px solid #000;
+        display: flex;
+        flex-direction: column;
+        align-items: baseline;
+        // margin-bottom: 10px;
+        padding: 5px 10px 10px 10px;
+        border-radius: 10px;
+
+        .content-item-name {
+          font-size: 20px;
+          padding-bottom: 5px;
+        }
+
+        .content-item-description {
+          font-size: 14px;
+          font-weight: 300;
+        }
+
+        .content-item-link-warp {
+          width: 100%;
+          display: flex;
+          justify-content: flex-end;
+          margin-top: 10px;
+          user-select: none;
+
+          &>div {
+            font-size: 14px;
+            font-weight: 300;
+            margin-right: 10px;
+          }
+
+          &>a {
+            &:not(:last-child) {
+              margin-right: 10px;
+            }
+
+            color: #000;
+            font-size: 14px;
+            font-weight: 300;
+            text-decoration: none;
+            transition: color .15s linear;
+
+            &:hover {
+              color: #15aa87;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .title {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+
+    &>span {
+      font-size: 30px;
+      letter-spacing: 10px;
+    }
+  }
+}
+</style>

pages/posts.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

pages/test.vue

@@ -0,0 +1,14 @@
+<template>
+    <div style="height: 9999px;">
+        this is a long long page
+        <nuxt-link to="/testRouter/1">test</nuxt-link>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

pages/testRouter/1.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        111
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

style/default.scss

@@ -0,0 +1,13 @@
+body,html {
+    padding: 0;
+    margin: 0
+}
+
+body {
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 16px;
+    color: #2c3e50;
+    background-color: #fff
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}