feat: 添加vueuse，面包屑导航抽出

2025-02-26 18:11:00 +08:00 · 2025-02-26 18:11:00 +08:00 · 9f6f58cad6
parent 5a1c158dde
commit 9f6f58cad6
7 changed files with 129 additions and 36 deletions
--- a/.gitignore
+++ b/.gitignore
@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+__debug_bin*.exe
--- a/web/components/layout/default/breadcrumbs.vue
+++ b/web/components/layout/default/breadcrumbs.vue
@ -0,0 +1,22 @@
+<template>
+  <div class="breadcrumbs text-sm">
+    <ul>
+      <li>
+        <a>
+          <Icon
+            name="material-symbols:home-outline-rounded"
+            class="w-4 h-4"
+          />首页</a
+        >
+      </li>
+      <li>
+        <a>
+          <Icon
+            name="material-symbols:file-copy-rounded"
+            class="w-4 h-4"
+          />文件</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
--- a/web/layouts/default.vue
+++ b/web/layouts/default.vue
@ -7,11 +7,10 @@ const handleMenuChange = () => {

 const route = useRoute();

-console.log(route);
 </script>

 <template>
-  <header class="flex-[0_0_auto] h-10 flex items-center">
+  <header class="flex-[0_0_auto] h-10 flex items-center bg-base-200">
    <div class="w-56 h-10 flex items-center justify-center max-md:hidden">
      <div class="avatar">
        <div class="mask mask-squircle w-8">
@ -25,31 +24,11 @@ console.log(route);
      class="btn btn-circle w-8 h-8 min-h-8 p-2 ml-2 swap swap-rotate md:hidden"
    >
      <input type="checkbox" :checked="menuOpen" />
-      <svg
-        class="swap-off fill-current w-6 h-6"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 512 512"
-      >
-        <path
-          d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"
-        />
-      </svg>
-      <svg
-        class="swap-on fill-current w-6 h-6"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 512 512"
-      >
-        <polygon
-          points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
-        />
-      </svg>
+      <Icon name="material-symbols:menu-rounded" class="swap-off w-6 h-6" />
+      <Icon name="material-symbols:close-rounded" class="swap-on w-6 h-6" />
    </label>
    <div class="dropdown dropdown-end ml-auto mr-2">
-      <div
-        tabindex="0"
-        role="button"
-        class="avatar online placeholder sm-auto"
-      >
+      <div tabindex="0" role="button" class="avatar online placeholder sm-auto">
        <div class="bg-neutral text-neutral-content w-8 rounded-full">
          <span class="text-sm">AI</span>
        </div>
@ -76,7 +55,7 @@ console.log(route);
        aria-label="close sidebar"
        class="drawer-overlay"
      ></label>
-      <ul class="menu bg-base-200 text-base-content min-h-full w-56 p-2">
+      <ul class="menu bg-base-300 text-base-content min-h-full w-56 p-2">
        <li>
          <a href="/" :class="route.path === '/' ? 'active' : ''"
            ><Icon name="material-symbols:home-outline-rounded" />首页</a
@ -95,11 +74,14 @@ console.log(route);
        <li><a>Sidebar Item 2</a></li>
      </ul>
    </nav>
-    <main class="drawer-content flex-auto relative overflow-auto">
-      <slot />
-      <footer class="w-full h-4 my-2 text-center text-xs">
-        &copy;powered by maptile
-      </footer>
+    <main class="drawer-content flex-auto overflow-x-hidden overflow-y-auto bg-base-100">
+      <section class="min-h-full relative p-4 pb-8">
+        <Breadcrumbs />
+        <slot />
+        <footer class="absolute bottom-0 w-full h-4 my-2 text-center text-xs">
+          &copy;powered by maptile
+        </footer>
+      </section>
    </main>
  </section>
 </template>
--- a/web/nuxt.config.ts
+++ b/web/nuxt.config.ts
@ -5,6 +5,11 @@ export default defineNuxtConfig({
  devServer: {
    port: 8888,
  },
+  nitro: {
+    routeRules:{
+      "/api/v1": {proxy: 'http://localhost:8080'}
+    }
+  },
  app: {
    head: {
      title: "Nuxt.js TypeScript TailwindCSS",
@ -13,6 +18,10 @@ export default defineNuxtConfig({
      class: 'main',
    }
  },
+  components: [{
+    path: '~/components',
+    pathPrefix: false
+  }],
  css: ["@/assets/css/main.css"],
-  modules: ['@nuxtjs/tailwindcss', "@nuxt/icon"],
+  modules: ['@nuxtjs/tailwindcss', "@nuxt/icon", "@vueuse/nuxt"],
 });
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -7,6 +7,7 @@
      "name": "nuxt-app",
      "hasInstallScript": true,
      "dependencies": {
+        "@vueuse/nuxt": "^12.7.0",
        "nuxt": "^3.15.4",
        "vue": "latest",
        "vue-router": "latest"
@ -2787,6 +2788,12 @@
      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
      "license": "MIT"
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
    "node_modules/@unhead/dom": {
      "version": "1.11.19",
      "resolved": "https://registry.npmmirror.com/@unhead/dom/-/dom-1.11.19.tgz",
@ -3174,6 +3181,77 @@
      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
      "license": "MIT"
    },
+    "node_modules/@vueuse/core": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-12.7.0.tgz",
+      "integrity": "sha512-jtK5B7YjZXmkGNHjviyGO4s3ZtEhbzSgrbX+s5o+Lr8i2nYqNyHuPVOeTdM1/hZ5Tkxg/KktAuAVDDiHMraMVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "12.7.0",
+        "@vueuse/shared": "12.7.0",
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-12.7.0.tgz",
+      "integrity": "sha512-4VvTH9mrjXqFN5LYa5YfqHVRI6j7R00Vy4995Rw7PQxyCL3z0Lli86iN4UemWqixxEvYfRjG+hF9wL8oLOn+3g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/nuxt": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/nuxt/-/nuxt-12.7.0.tgz",
+      "integrity": "sha512-JG1yjJifcIZkFr+X1VmfNsdNZyHia/wXcpUHqVI2gwax5+bgmUlybqh9nStNGbX9NLUuPvPNNq043es5DlSJKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.15.4",
+        "@vueuse/core": "12.7.0",
+        "@vueuse/metadata": "12.7.0",
+        "local-pkg": "^1.0.0",
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.0.0"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/local-pkg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-1.0.0.tgz",
+      "integrity": "sha512-bbgPw/wmroJsil/GgL4qjDzs5YLTBMQ99weRsok1XCDccQeehbHA/I1oRvk2NPtr7KGZgT/Y5tPRnAtMqeG2Kg==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-12.7.0.tgz",
+      "integrity": "sha512-coLlUw2HHKsm7rPN6WqHJQr18WymN4wkA/3ThFaJ4v4gWGWAQQGK+MJxLuJTBs4mojQiazlVWAKNJNpUWGRkNw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
    "node_modules/abbrev": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-3.0.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -10,6 +10,7 @@
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
+    "@vueuse/nuxt": "^12.7.0",
    "nuxt": "^3.15.4",
    "vue": "latest",
    "vue-router": "latest"
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -1,4 +1,4 @@
-import daisyui from 'daisyui'
+import daisyui from "daisyui";

 /** @type {import('tailwindcss').Config} */
 export default {
@ -14,5 +14,4 @@ export default {
    extend: {},
  },
  plugins: [daisyui],
-}
-
+};