侧边栏1
This commit is contained in:
parent
dd177a36ec
commit
79e92352a7
137
package-lock.json
generated
137
package-lock.json
generated
@ -817,49 +817,49 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/compiler-core": {
|
"node_modules/@vue/compiler-core": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.11.tgz",
|
||||||
"integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
|
"integrity": "sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/parser": "^7.23.6",
|
"@babel/parser": "^7.23.5",
|
||||||
"@vue/shared": "3.4.15",
|
"@vue/shared": "3.3.11",
|
||||||
"entities": "^4.5.0",
|
|
||||||
"estree-walker": "^2.0.2",
|
"estree-walker": "^2.0.2",
|
||||||
"source-map-js": "^1.0.2"
|
"source-map-js": "^1.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/compiler-dom": {
|
"node_modules/@vue/compiler-dom": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz",
|
||||||
"integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
|
"integrity": "sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/compiler-core": "3.4.15",
|
"@vue/compiler-core": "3.3.11",
|
||||||
"@vue/shared": "3.4.15"
|
"@vue/shared": "3.3.11"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/compiler-sfc": {
|
"node_modules/@vue/compiler-sfc": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz",
|
||||||
"integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
|
"integrity": "sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/parser": "^7.23.6",
|
"@babel/parser": "^7.23.5",
|
||||||
"@vue/compiler-core": "3.4.15",
|
"@vue/compiler-core": "3.3.11",
|
||||||
"@vue/compiler-dom": "3.4.15",
|
"@vue/compiler-dom": "3.3.11",
|
||||||
"@vue/compiler-ssr": "3.4.15",
|
"@vue/compiler-ssr": "3.3.11",
|
||||||
"@vue/shared": "3.4.15",
|
"@vue/reactivity-transform": "3.3.11",
|
||||||
|
"@vue/shared": "3.3.11",
|
||||||
"estree-walker": "^2.0.2",
|
"estree-walker": "^2.0.2",
|
||||||
"magic-string": "^0.30.5",
|
"magic-string": "^0.30.5",
|
||||||
"postcss": "^8.4.33",
|
"postcss": "^8.4.32",
|
||||||
"source-map-js": "^1.0.2"
|
"source-map-js": "^1.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/compiler-ssr": {
|
"node_modules/@vue/compiler-ssr": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz",
|
||||||
"integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
|
"integrity": "sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/compiler-dom": "3.4.15",
|
"@vue/compiler-dom": "3.3.11",
|
||||||
"@vue/shared": "3.4.15"
|
"@vue/shared": "3.3.11"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/devtools-api": {
|
"node_modules/@vue/devtools-api": {
|
||||||
@ -868,48 +868,60 @@
|
|||||||
"integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
|
"integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
|
||||||
},
|
},
|
||||||
"node_modules/@vue/reactivity": {
|
"node_modules/@vue/reactivity": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/reactivity/-/reactivity-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.11.tgz",
|
||||||
"integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
|
"integrity": "sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/shared": "3.4.15"
|
"@vue/shared": "3.3.11"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@vue/reactivity-transform": {
|
||||||
|
"version": "3.3.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz",
|
||||||
|
"integrity": "sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/parser": "^7.23.5",
|
||||||
|
"@vue/compiler-core": "3.3.11",
|
||||||
|
"@vue/shared": "3.3.11",
|
||||||
|
"estree-walker": "^2.0.2",
|
||||||
|
"magic-string": "^0.30.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/runtime-core": {
|
"node_modules/@vue/runtime-core": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.11.tgz",
|
||||||
"integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
|
"integrity": "sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/reactivity": "3.4.15",
|
"@vue/reactivity": "3.3.11",
|
||||||
"@vue/shared": "3.4.15"
|
"@vue/shared": "3.3.11"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/runtime-dom": {
|
"node_modules/@vue/runtime-dom": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz",
|
||||||
"integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
|
"integrity": "sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/runtime-core": "3.4.15",
|
"@vue/runtime-core": "3.3.11",
|
||||||
"@vue/shared": "3.4.15",
|
"@vue/shared": "3.3.11",
|
||||||
"csstype": "^3.1.3"
|
"csstype": "^3.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/server-renderer": {
|
"node_modules/@vue/server-renderer": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.11.tgz",
|
||||||
"integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
|
"integrity": "sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/compiler-ssr": "3.4.15",
|
"@vue/compiler-ssr": "3.3.11",
|
||||||
"@vue/shared": "3.4.15"
|
"@vue/shared": "3.3.11"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"vue": "3.4.15"
|
"vue": "3.3.11"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@vue/shared": {
|
"node_modules/@vue/shared": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.11.tgz",
|
||||||
"integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
|
"integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw=="
|
||||||
},
|
},
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "8.11.3",
|
"version": "8.11.3",
|
||||||
@ -1351,17 +1363,6 @@
|
|||||||
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
|
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/entities": {
|
|
||||||
"version": "4.5.0",
|
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/entities/-/entities-4.5.0.tgz",
|
|
||||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.12"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/esbuild": {
|
"node_modules/esbuild": {
|
||||||
"version": "0.19.12",
|
"version": "0.19.12",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/esbuild/-/esbuild-0.19.12.tgz",
|
"resolved": "https://mirrors.cloud.tencent.com/npm/esbuild/-/esbuild-0.19.12.tgz",
|
||||||
@ -2699,15 +2700,15 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vue": {
|
"node_modules/vue": {
|
||||||
"version": "3.4.15",
|
"version": "3.3.11",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/vue/-/vue-3.4.15.tgz",
|
"resolved": "https://registry.npmjs.org/vue/-/vue-3.3.11.tgz",
|
||||||
"integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
|
"integrity": "sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vue/compiler-dom": "3.4.15",
|
"@vue/compiler-dom": "3.3.11",
|
||||||
"@vue/compiler-sfc": "3.4.15",
|
"@vue/compiler-sfc": "3.3.11",
|
||||||
"@vue/runtime-dom": "3.4.15",
|
"@vue/runtime-dom": "3.3.11",
|
||||||
"@vue/server-renderer": "3.4.15",
|
"@vue/server-renderer": "3.3.11",
|
||||||
"@vue/shared": "3.4.15"
|
"@vue/shared": "3.3.11"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"typescript": "*"
|
"typescript": "*"
|
||||||
|
|||||||
@ -12,13 +12,61 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">
|
<div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">
|
||||||
<a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">
|
|
||||||
|
<div v-if="isLoggedIn" class="flex items-center space-x-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="text-gray-900 mr-6 ">{{ username }}</span>
|
||||||
|
<img :src="avatar" alt="User Avatar" class="w-10 h-10 rounded-full " @click="showDrawer">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<a-drawer
|
||||||
|
v-model:open="open"
|
||||||
|
class="custom-class"
|
||||||
|
root-class-name="root-class-name"
|
||||||
|
:root-style="{ color: 'blue' }"
|
||||||
|
style="color: black"
|
||||||
|
placement="right"
|
||||||
|
@after-open-change="afterOpenChange"
|
||||||
|
>
|
||||||
|
<template #extra>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<img :src="avatar" alt="User Avatar" class="w-10 h-10 rounded-full">
|
||||||
|
<span class="text-gray-900">{{ username }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="flex flex-col space-y-4 mb-4 ">
|
||||||
|
<span class="lg:hover:text-blue-700">我的项目</span>
|
||||||
|
<span class="lg:hover:text-blue-700" >消息</span>
|
||||||
|
<span class="lg:hover:text-blue-700">日报</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col space-y-4">
|
||||||
|
<hr class="mb-2">
|
||||||
|
<span class="lg:hover:text-blue-700">我管理的</span>
|
||||||
|
<hr>
|
||||||
|
<span class=" lg:hover:text-blue-700">个人信息管理</span>
|
||||||
|
|
||||||
|
<div v-if="role === true" class="flex flex-col space-y-4">
|
||||||
|
<hr>
|
||||||
|
<span class=" lg:hover:text-blue-700" >我负责的</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a-drawer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
<a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">
|
||||||
登录 |
|
登录 |
|
||||||
</a>
|
</a>
|
||||||
<a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center" href="/register">
|
<a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center" href="/register">
|
||||||
注册
|
注册
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id="navbar-dropdown" class="w-full md:block md:w-auto">
|
<div id="navbar-dropdown" class="w-full md:block md:w-auto">
|
||||||
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
|
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
|
||||||
<li>
|
<li>
|
||||||
@ -63,23 +111,50 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
import {onMounted, reactive, ref} from "vue";
|
||||||
data() {
|
|
||||||
return {
|
const isDropdownOpen = ref(false);
|
||||||
isDropdownOpen: false,
|
const textColor = ref("black");
|
||||||
textColor: 'black',
|
const isLoggedIn = ref(false);
|
||||||
};
|
const username =ref('') ;
|
||||||
},
|
const avatar =ref('')
|
||||||
methods: {
|
const token = window.localStorage.getItem('token')
|
||||||
toggleDropdown() {
|
const states = reactive({
|
||||||
this.isDropdownOpen = !this.isDropdownOpen;
|
data:[],
|
||||||
},
|
|
||||||
changeColor() {
|
})
|
||||||
// 当按钮被点击时，将文字颜色改为蓝色
|
const role =ref(false)
|
||||||
this.textColor = 'blue';
|
function toggleDropdown(){
|
||||||
},
|
isDropdownOpen.value = !isDropdownOpen.value;
|
||||||
},
|
|
||||||
|
}
|
||||||
|
function changeColor() {
|
||||||
|
// 当按钮被点击时，将文字颜色改为蓝色
|
||||||
|
textColor.value = 'blue';
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
// 假设在登录成功后，从服务器获取用户信息
|
||||||
|
// 然后更新data中的相关数据
|
||||||
|
isLoggedIn.value = false;
|
||||||
|
username.value = 'John Doe';
|
||||||
|
avatar.value = 'https://img1.baidu.com/it/u=2005056479,139681251&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710176400&t=4f32b862465c709f79c8fb80d3c0444b';
|
||||||
|
})
|
||||||
|
|
||||||
|
// 侧边栏
|
||||||
|
const open = ref(false);
|
||||||
|
const afterOpenChange = bool => {
|
||||||
|
console.log('open', bool);
|
||||||
};
|
};
|
||||||
|
const showDrawer = () => {
|
||||||
|
open.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
export default function getCurrentTimestamp() {
|
export default function getCurrentTimestamp() {
|
||||||
const timestamp = new Date().getTime();
|
return new Date().getTime();
|
||||||
return timestamp;
|
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user