feat: ✨侧边栏开发

ZRMYDYCG · Mar 4, 2025 · 781a45a · 781a45a
1 parent 6ed201b
commit 781a45a
Show file tree

Hide file tree

Showing 16 changed files with 202 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>llm-mini-chat</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.9",
+    "@vueuse/core": "^12.7.0",
     "axios": "^1.8.1",
     "element-plus": "^2.9.5",
     "lodash-es": "^4.17.21",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/assets/default_avatar.png b/src/assets/default_avatar.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/Column/index.vue b/src/components/Column/index.vue
@@ -37,7 +37,7 @@ withDefaults(
     scrollbar: boolean
   }>(),
   {
-    scrollbar: true,
+    scrollbar: false,
   },
 )
 

diff --git a/src/layout/themes/default/components/aside/index.vue b/src/layout/themes/default/components/aside/index.vue
@@ -2,6 +2,7 @@
 import GcColumn from '@/components/Column/index.vue'
 import GcLogo from '../logo/index.vue'
 import GcMenu from '../menu/index.vue'
+import GcUser from '../user/index.vue'
 </script>
 
 <template>
@@ -10,10 +11,17 @@ import GcMenu from '../menu/index.vue'
       <template #header>
         <GcLogo></GcLogo>
       </template>
-
-      <GcMenu />
-
-      <template #footer> sfsd</template>
+      <template #default>
+        <GcMenu />
+      </template>
+      <template #footer>
+        <GcUser />
+        <img
+          src="https://raw.githubusercontent.com/mayhemantt/mayhemantt/Update/svg/Bottom.svg"
+          class="absolute -bottom-[4px]"
+          alt="#"
+        />
+      </template>
     </GcColumn>
   </div>
 </template>
@@ -31,7 +39,6 @@ import GcMenu from '../menu/index.vue'
   display: flex;
   align-items: center;
   height: 95px;
-  padding-left: 30px;
   border-top: 1px solid #e2e8f0;
 }
 </style>
diff --git a/src/layout/themes/default/components/logo/index.vue b/src/layout/themes/default/components/logo/index.vue
@@ -1,5 +1,42 @@
 <script setup lang="ts"></script>
 
-<template>logo</template>
+<template>
+  <div class="gc-logo group flex cursor-pointer items-center justify-start gap-3">
+    <div class="relative transition-all duration-300 group-hover:rotate-[15deg] hover:!rotate-0">
+      <img class="w-[50px] animate-[pulse_6s_ease-in-out_infinite]" src="/logo.svg" alt="lightChat" />
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent opacity-40 mix-blend-soft-light"
+      ></div>
+    </div>
+    <h2
+      class="cursor-default bg-gradient-to-r from-blue-500 via-purple-400 to-indigo-600 bg-clip-text text-xl font-bold text-transparent"
+    >
+      lightChat
+    </h2>
+  </div>
+</template>
 
-<style scoped></style>
+<style scoped>
+@keyframes pulse {
+  0%,
+  100% {
+    transform: translateY(0px) scale(1);
+  }
+  50% {
+    transform: translateY(-2px) scale(1.02);
+  }
+}
+
+.gc-logo:hover {
+  gap: 15px;
+}
+
+@media (max-width: 768px) {
+  .gc-logo img {
+    width: 40px;
+  }
+  .gc-logo h2 {
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/layout/themes/default/components/menu/index.vue b/src/layout/themes/default/components/menu/index.vue
@@ -1,5 +1,63 @@
-<script setup lang="ts"></script>
+<template>
+  <div class="gc-navigator-menu">
+    <div class="menu-list">
+      <router-link v-for="menu in menus" :key="menu.path" :to="menu.path" active-class="active" class="menu-item">
+        <i v-if="route.path !== menu.path" :class="menu.meta.icon"></i>
+        <i v-else :class="menu.meta.activeIcon"></i>
+        <span>{{ menu.meta.title }}</span>
+      </router-link>
+    </div>
+  </div>
+</template>
 
-<template>Menu</template>
+<script setup lang="ts">
+import { rootRoute } from '@/router/routes/basic'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 
-<style scoped></style>
+const route = useRoute()
+
+const menus = computed(() => {
+  if (!rootRoute.children) return []
+  return rootRoute.children.flatMap((child) => {
+    if (!child.children) {
+      return child
+    } else {
+      return child.children
+    }
+  })
+})
+</script>
+
+<style scoped>
+.gc-navigator-menu {
+  height: calc(100vh - 200px);
+  padding-left: 30px;
+  padding-top: 40px;
+  .menu-list {
+    .menu-item {
+      display: block;
+      width: 160px;
+      height: 40px;
+      line-height: 40px;
+      color: #38393e;
+      padding: 0 20px;
+      margin-bottom: 10px;
+      border-radius: 10px;
+      transition: all 0.3s ease;
+
+      i {
+        font-size: 22px;
+        margin-right: 15px;
+      }
+
+      &.active,
+      &:hover {
+        background-color: #fff;
+        box-shadow: 0 6px 6px 1px #eceff4;
+        color: $theme-color;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/layout/themes/default/components/user/index.vue b/src/layout/themes/default/components/user/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="gc-user flex w-full items-center justify-center">
+    <img v-if="userInfo?.avatar" class="rounder-full h-[40px] w-[40px]" :src="userInfo.avatar" alt="用户头像" />
+    <img v-else class="rounder-full h-[40px] w-[40px]" src="@/assets/default_avatar.png" alt="用户头像" />
+    <h3 class="ml-[10px] cursor-default text-sm text-nowrap text-gray-600">{{ nickname ? nickname : '未登录' }}</h3>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useUserStore from '@/store/modules/user'
+import { computed } from 'vue'
+
+const userStore = useUserStore()
+const userInfo = computed(() => userStore.userInfo)
+const nickname = computed(() => userInfo.value?.nickname || userInfo.value?.account)
+</script>
+
+<style scoped></style>
diff --git a/src/main.ts b/src/main.ts
@@ -1,14 +1,19 @@
 import App from '@/App.vue'
+import { registerPlugins } from '@/plugins'
 import { registerRouter } from '@/router'
 import { registerStore } from '@/store'
 import { createApp } from 'vue'
 import './css/app.css'
 import './css/main.css'
+import mock from './mock'
+
+mock(true)
 
 function bootstrap() {
   const app = createApp(App)
   registerStore(app)
   registerRouter(app)
+  registerPlugins(app)
 
   app.mount('#app')
 }

diff --git a/src/router/routes/basic.ts b/src/router/routes/basic.ts
@@ -28,7 +28,7 @@ export const loginRoutes = {
 }
 
 // 注册页路由
-export const registRoutes = {
+export const registerRoutes = {
   path: '/register',
   name: 'Register',
   component: () => import('@/view/register/index.vue'),
@@ -48,6 +48,6 @@ export const notFoundRoutes = [
   },
 ]
 
-const basicRoutes = [rootRoute, loginRoutes, registRoutes, ...notFoundRoutes]
+const basicRoutes = [rootRoute, loginRoutes, registerRoutes, ...notFoundRoutes]
 
 export default basicRoutes
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
@@ -3,9 +3,32 @@ import { ref } from 'vue'
 
 const useUserStore = defineStore('userStore', () => {
   const token = ref('has-token')
+  const userInfo = ref<{
+    nickname: string
+    avatar: string
+    account: string
+  }>()
+
+  const updateUserInfo = (user) => {
+    userInfo.value = user
+    localStorage.setItem('user', JSON.stringify(user))
+  }
+
+  const updateToken = (token) => {
+    token.value = token
+    localStorage.setItem('token', JSON.stringify(token))
+  }
+
+  const loginAction = () => {
+    return new Promise(() => {})
+  }
 
   return {
     token,
+    userInfo,
+    updateUserInfo,
+    updateToken,
+    loginAction,
   }
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ withDefaults( @@
         scrollbar: boolean
       }>(),
       {
-        scrollbar: true,
+        scrollbar: false,
       },
     )
@@ Expand Down @@