feat: 添加vueuse，面包屑导航抽出
This commit is contained in:
parent
5a1c158dde
commit
9f6f58cad6
|
|
@ -22,3 +22,5 @@ logs
|
|||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
__debug_bin*.exe
|
||||
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
<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="w-full h-4 my-2 text-center text-xs">
|
||||
<footer class="absolute bottom-0 w-full h-4 my-2 text-center text-xs">
|
||||
©powered by maptile
|
||||
</footer>
|
||||
</section>
|
||||
</main>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
});
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/nuxt": "^12.7.0",
|
||||
"nuxt": "^3.15.4",
|
||||
"vue": "latest",
|
||||
"vue-router": "latest"
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue