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

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+__debug_bin*.exe

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>

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
+      <Icon name="material-symbols:menu-rounded" class="swap-off w-6 h-6" />
-        class="swap-off fill-current w-6 h-6"
+      <Icon name="material-symbols:close-rounded" class="swap-on 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>
     </label>
     <div class="dropdown dropdown-end ml-auto mr-2">
-      <div
+      <div tabindex="0" role="button" class="avatar online placeholder sm-auto">
-        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">
+    <main class="drawer-content flex-auto overflow-x-hidden overflow-y-auto bg-base-100">
-      <slot />
+      <section class="min-h-full relative p-4 pb-8">
-      <footer class="w-full h-4 my-2 text-center text-xs">
+        <Breadcrumbs />
-        &copy;powered by maptile
+        <slot />
-      </footer>
+        <footer class="absolute bottom-0 w-full h-4 my-2 text-center text-xs">
+          &copy;powered by maptile
+        </footer>
+      </section>
     </main>
   </section>
 </template>

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"],
 });

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",

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"

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],
-}
+};
-