添加登录组件，优化导航逻辑，更新路由类型声明，调整样式和结构

components.d.ts

@@ -12,11 +12,15 @@ declare module 'vue' {
     DAside: typeof import('vue-devui/layout/index.es.js')['Aside']
     DAvatar: typeof import('vue-devui/avatar/index.es.js')['Avatar']
     DButton: typeof import('vue-devui/button/index.es.js')['Button']
+    DButtonGroup: typeof import('vue-devui/button-group/index.es.js')['ButtonGroup']
     DCard: typeof import('vue-devui/card/index.es.js')['Card']
     DContent: typeof import('vue-devui/layout/index.es.js')['Content']
+    DDropdown: typeof import('vue-devui/dropdown/index.es.js')['Dropdown']
+    DDropdownItem: typeof import('vue-devui/dropdown-item/index.es.js')['DropdownItem']
     DFooter: typeof import('vue-devui/layout/index.es.js')['Footer']
     DForm: typeof import('vue-devui/form/index.es.js')['Form']
     DFormItem: typeof import('vue-devui/form/index.es.js')['FormItem']
+    DHeader: typeof import('vue-devui/layout/index.es.js')['Header']
     DIcon: typeof import('vue-devui/icon/index.es.js')['Icon']
     DInput: typeof import('vue-devui/input/index.es.js')['Input']
     DLayout: typeof import('vue-devui/layout/index.es.js')['Layout']
@@ -29,9 +33,8 @@ declare module 'vue' {
     DTab: typeof import('vue-devui/tabs/index.es.js')['Tab']
     DTabs: typeof import('vue-devui/tabs/index.es.js')['Tabs']
     DTag: typeof import('vue-devui/tag/index.es.js')['Tag']
-    DTagGroup: typeof import('vue-devui/tag-group/index.es.js')['TagGroup']
-    DTags: typeof import('vue-devui/tags/index.es.js')['Tags']
     HomeSide: typeof import('./src/components/homeSide.vue')['default']
+    Login: typeof import('./src/components/Login.vue')['default']
     MenuH: typeof import('./src/components/menuH.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/App.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
     <PerfectScrollbar>
-      <!-- <login v-if="route.path == '/login'"></login> -->
-      <!-- <router-view></router-view> -->
        <lay-index></lay-index>
-       
     </PerfectScrollbar>
   </div>
 

src/Index.vue

@@ -1,8 +1,8 @@
 <template>
   <d-layout>
-    <!-- <d-header class="dheader-1"> -->
+    <d-header class="dheader-1">
       <menu-h />
-    <!-- </d-header> -->
+    </d-header>
     <d-content class="dcontent-1">
       <router-view />
     </d-content>
@@ -10,23 +10,13 @@
       <div class="beian" ref="footer">
         <a class="text-primary" href="https://beian.miit.gov.cn" target="_blank">皖ICP备2021017362号-1</a>
         <a class="swag text-primary" target="_blank" href="https://www.hxyouzi.com/swag">api文档</a>
-        <!-- <div class="flex text-[#409eff] text-[12px] ml-[20px]">
-          <div>今日访问：{{ ips?.todayIp }}</div>
-          <div class="ml-2">总访问：{{ ips?.allIp }}</div>
-        </div> -->
       </div>
     </d-footer>
   </d-layout>
 </template>
 
 <script setup lang="ts">
-// 空白项目入口
-// definePage({
-//   path:"/",
-// })
 const route = useRoute()
-
-
 </script>
 
 <style scoped>

src/components/Login.vue

@@ -1,50 +1,44 @@
 <template>
-  <div class="login-page w-[100vw] h-[100vh] relative">
+  <d-card class="mt-10 bg-[#ffffff60] rounded-[10px]" shadow="never">
-    <d-card class="w-120 !absolute top-[12%] right-8 bg-[#ffffff60] rounded-[10px]">
+    <d-tabs v-model="tid" type="pills">
-      <d-tabs v-model="tid" type="pills">
+      <d-tab id="tab1" title="登录">
-        <d-tab id="tab1" title="登录">
+        <d-form ref="formLogin" layout="vertical" :data="loginData" :rules="rules">
-          <d-form ref="formLogin" layout="vertical" :data="loginData" :rules="rules">
+          <d-form-item field="username">
-            <d-form-item field="username" >
+            <d-input v-model="loginData.username" placeholder="请输入用户名" />
-              <d-input v-model="loginData.username" placeholder="请输入用户名" />
+          </d-form-item>
-            </d-form-item>
+          <d-form-item field="password">
-            <d-form-item field="password" >
+            <d-input v-model="loginData.password" show-password placeholder="请输入密码" />
-              <d-input v-model="loginData.password" show-password placeholder="请输入密码" />
+          </d-form-item>
-            </d-form-item>
+          <d-form-item class="form-operation-wrap">
-            <d-form-item class="form-operation-wrap">
+            <d-button class="w-full" variant="solid" @click="login">登 录</d-button>
-              <d-button class="w-full" variant="solid" @click="login">登 录</d-button>
+          </d-form-item>
-            </d-form-item>
+        </d-form>
-          </d-form>
+      </d-tab>
-        </d-tab>
+      <d-tab id="tab2" title="注册">
-        <d-tab id="tab2" title="注册">
+        <d-form ref="formReg" layout="vertical" :data="regData" :rules="rrules">
-          <d-form ref="formReg" layout="vertical" :data="regData" :rules="rrules">
+          <d-form-item field="username">
-            <d-form-item field="username" >
+            <d-input v-model="regData.username" placeholder="请输入用户名" />
-              <d-input v-model="regData.username" placeholder="请输入用户名" />
+          </d-form-item>
-            </d-form-item>
+          <d-form-item field="password">
-            <d-form-item field="password" >
+            <d-input v-model="regData.password" show-password placeholder="请输入用密码" />
-              <d-input v-model="regData.password" show-password placeholder="请输入用密码" />
+          </d-form-item>
-            </d-form-item>
+          <d-form-item field="nickname">
-            <d-form-item field="nickname" >
+            <d-input v-model="regData.nickname" placeholder="请输入昵称" />
-              <d-input v-model="regData.nickname" placeholder="请输入昵称" />
+          </d-form-item>
-            </d-form-item>
+          <d-form-item class="form-operation-wrap">
-            <d-form-item class="form-operation-wrap">
+            <d-button class="w-full" variant="solid" @click="register">注册</d-button>
-              <d-button class="w-full" variant="solid" @click="register">注册</d-button>
+          </d-form-item>
-            </d-form-item>
+        </d-form>
-          </d-form>
+      </d-tab>
-        </d-tab>
+    </d-tabs>
-      </d-tabs>
+  </d-card>
-    </d-card>
-  </div>
 </template>
 
 <script setup lang="ts">
-definePage({
-  name:'login',
-  meta: {
-    title: '登录',
-  }
-})
-
 const router = useRouter()
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
 // 登录注册逻辑
 const tid = ref("tab1");
 const formLogin: any = ref(null);
@@ -83,7 +77,7 @@ const rrules: any = reactive({
 })
 function login() {
   console.log('>>> --> login --> formLogin.value:', usrLog.isLogin)
-    formLogin.value.validate(async (is: boolean,b: any) => {
+  formLogin.value.validate(async (is: boolean, b: any) => {
     if (!is) {
       $msg.error('信息填写不正确，请检查后再提交')
     } else {
@@ -96,13 +90,14 @@ function login() {
       $cookies.set('userinfo', res.data.userinfo, '1d')
       $msg.success(res.msg)
       usrLog.setIsLogin(true)
-      router.push({ path: "/" })
+      // router.push({ path: "/" })
+      emit("update:visible",false)
     }
   })
 
 }
 function register() {
-  formReg.value.validate(async (is: boolean,b: any) => {
+  formReg.value.validate(async (is: boolean, b: any) => {
     if (!is) {
       $msg.error('信息填写不正确，请检查后再提交')
     } else {
@@ -131,12 +126,6 @@ function validatePassword(rule: any, value: string, callback: Function) {
 </script>
 
 <style scoped lang="less">
-/* 登录页面样式 */
-.login-page {
-  background: transparent url("@/assets/images/05.jpeg") 0 0/cover no-repeat;
-
-}
-
 :deep(.devui-tabs__nav) {
   display: flex;
   justify-content: center;

src/components/menuH.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="nav" v-show="whiteList.includes(route.name)" class="main-nav flex justify-between bg-white">
+  <div ref="nav" class="main-nav flex justify-between bg-white">
     <!-- 网站Logo -->
     <div class="px-5 flex items-center" slot="brand" @click="goHome">
       <img :src="logo" alt="柚子的网站" class="h-9 align-middle" />
@@ -44,11 +44,35 @@
     </div>
 
     <div class="flex items-center mr-8">
-      <d-avatar v-if="userinfo" :img-src="userinfo.ava_url" @contextmenu="logout" class="cursor-pointer" alt="用户的头" />
+      <d-dropdown class="cursor-pointer w-[100px]" v-if="userinfo" trigger="hover">
-      <d-avatar v-else class="cursor-pointer" @click="toLogin"></d-avatar>
+        <div class="flex items-center">
-      <div class="cursor-pointer ml-2 text-gray text-sm" v-if="userinfo">{{ userinfo.nickname }}</div>
+          <d-avatar :img-src="userinfo.ava_url" class="cursor-pointer" alt="用户的头" />
-      <div class="cursor-pointer ml-2 text-gray text-sm" v-else @click="toLogin">登录</div>
+          <div class="cursor-pointer ml-2 text-gray text-sm">{{ userinfo.nickname }}</div>
+        </div>
+        <template #menu>
+          <ul class="list-menu">
+            <!-- hover为淡粉色 -->
+            <li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="logout">
+              登出
+            </li>
+            <li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="">
+              控制台
+            </li>
+            <li class="w-full p-2 text-center hover:text-primary hover:bg-[#f5f0f0] cursor-pointer" @click="">
+              设置
+            </li>
+          </ul>
+        </template>
+      </d-dropdown>
+      <div v-else class="flex items-center">
+        <d-avatar class="cursor-pointer" @click="toLogin"></d-avatar>
+        <div class="cursor-pointer ml-2 text-gray text-sm" @click="toLogin">登录</div>
+      </div>
     </div>
+    <!-- 登录弹窗 -->
+    <d-modal class="!w-120" v-model="visible">
+      <login-modal v-model:visible="visible"></login-modal>
+    </d-modal>
   </div>
 
 </template>
@@ -62,6 +86,7 @@ import homeSvg from '@/icon/menu/home.svg';
 import linkSvg from '@/icon/menu/link.svg';
 import picSvg from '@/icon/menu/pic.svg';
 import settingSvg from '@/icon/menu/setting.svg';
+import loginModal from '@/components/Login.vue'
 
 
 import { onMounted, ref, watch } from 'vue';
@@ -69,7 +94,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 
 const route = useRoute();
-
+const visible = ref(false);
 const router = useRouter();
 const key = ref("home");
 const locationInfo = ref("获取位置中...");
@@ -83,8 +108,6 @@ const userinfo: any = ref(null)
 const nav: any = useTemplateRef('nav')
 const navx = $store.nav.useNavStore()
 const usrLog = $store.log.useLogStore()
-// 白名单 
-const whiteList = ['home', 'appshare', 'plink', 'widget', 'gallery', 'article'];
 console.log('>>> --> route:', route)
 // 获取地理位置
 const getLocation = () => {
@@ -173,7 +196,7 @@ function toLogin() {
   console.log('>>> --> toLogin --> toLogin:', 'toLogin')
 
   if ($cookies.get('token')) return
-  router.push('/login');
+  visible.value = true
 }
 
 function logout() {
@@ -182,22 +205,6 @@ function logout() {
   $cookies.remove('userinfo');
   usrLog.setIsLogin(false)
   userinfo.value = null;
-  $modal({
-    title: "退出登录",
-    content: "返回首页吗？",
-    submitText: "去登录",
-    cancelText: "返回首页",
-    handdleSubmit: () => {
-      router.push('/login');
-    },
-    handdleCancel: () => {
-      if (route.name == 'home') return
-      router.push('/home');
-    }
-  })
-
-
-  // 
 }
 
 function gotoHf() {
@@ -214,7 +221,7 @@ onMounted(() => {
   getLocation(); // 组件挂载时获取位置
 
   const h: number = nav.value.clientHeight
-  if(h>0) navx.setNavH(h)
+  if (h > 0) navx.setNavH(h)
 
 
 
@@ -225,7 +232,7 @@ onBeforeUpdate(() => {
   const h: number = nav.value.clientHeight
   // console.log('******>>> --> nav.value:', nav.value)
   // console.log('()()()()()>>> --> h:', h)
-  if(h>0) navx.setNavH(h)
+  if (h > 0) navx.setNavH(h)
 })
 
 </script>

src/views/Home.vue

@@ -13,13 +13,13 @@
           </d-input>
         </div>
         <!-- 标签组 -->
-        <div v-if="navlist.length" class="flex gap-6 px-12 my-6 overflow-x-auto">
+        <div v-if="navlist.length" class="flex gap-6 px-12 mt-6 mb-3 overflow-x-auto">
           <d-tag hideBeyondTags v-for="tag in tagList" :checked="tag.checked" :color="tag.color"
             @click="handdleTagClick(tag)">{{ tag.name }}</d-tag>
         </div>
         <!-- 图片网格展示区域 -->
         <PerfectScrollbar class="" :style="navStyle">
-          <div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pb-6 px-12">
+          <div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pt-3 pb-6 px-12">
             <d-card class="bg-[#ffffff80] h-24" v-for="(item, index) in navlist" :key="index"
               @click="goExtra(item.menu_link)">
               <template #content>
@@ -27,7 +27,7 @@
                   <div :style="{ background: item.color }"
                     class="w-8 h-8 rounded-full text-white flex items-center justify-center" v-if="item.icon_error">
                     {{ item.first }}</div>
-                  <img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index)" />
+                  <img class="grid-image w-8 h-8 rounded-full" v-else :src="item.menu_icon" @error="imgErr(index as number)" />
                   <div class="mt-2 w-full text-center text-lg truncate">{{ item.menu_name || "" }}</div>
                   <em class="absolute rounded-md top-0 left-0 px-2  text-white text-center text-sm" :style="{ background: getItemColor(item) }">{{ item.tag }}</em>
                 </div>
@@ -53,14 +53,16 @@
     <!-- 新增导航弹窗 -->
     <d-modal class="!w-120" v-model="visible" title="新增导航">
       <d-form ref="formNav" layout="vertical" :data="navData">
-        <d-form-item field="username">
+        <d-form-item class="h-8" field="username">
           <d-input @blur="getIcon" v-model="navData.menu_link" placeholder="请输入单行链接(必填)" />
-
         </d-form-item>
-        <d-form-item field="password">
+        <d-form-item class="h-8" field="password">
           <d-input v-model="navData.menu_name" placeholder="请输入导航名称(必填)" />
         </d-form-item>
-        <d-form-item class="form-operation-wrap">
+        <d-form-item class="h-8" field="tag">
+          <d-input v-model="navData.tag" placeholder="请自定义一个标签(必填，只取前四字)" />
+        </d-form-item>
+        <d-form-item class="h-8 form-operation-wrap">
           <div class="flex">
             <d-input v-model="navData.menu_icon" placeholder="请输入图标链接" />
             <img class="ml-5" v-if="navData.menu_icon" width="30" height="30" :src="navData.menu_icon" alt="">
@@ -68,7 +70,7 @@
           </div>
         </d-form-item>
       </d-form>
-      <div class="mt-10 w-full flex justify-between">
+      <div class="mt-14 w-full flex justify-between">
         <d-button @click="navCancel" variant="text" class="w-[49%] hover:bg-[#8a6684] hover:!text-white">取消</d-button>
         <span class="text-[20px]"> | </span>
         <d-button @click="navSubmit" variant="text" class="w-[49%] hover:bg-[#5c866a] hover:!text-white"
@@ -98,6 +100,7 @@ const visible: any = ref(false)
 const navData: any = reactive({
   menu_link: '',
   menu_name: '',
+  tag: '',
   menu_icon: ''
 })
 const formNav: any = ref(null)
@@ -268,10 +271,11 @@ function navCancel() {
 
 async function navSubmit() {
   console.log('>>> --> navSubmit --> navData:', navData)
-  if (!navData.menu_link || !navData.menu_name) {
+  if (!navData.menu_link || !navData.menu_name || !navData.tag) {
-    $msg.error('请输入链接和名称')
+    $msg.error('请输入链接、标签和名称')
     return
   }
+  navData.tag = navData.tag.slice(0, 4)
   const res = await $http.nav.addNav(navData)
   console.log('>>> --> navSubmit --> res:', res)
 
@@ -281,9 +285,6 @@ async function navSubmit() {
     formNav.value.resetFields()
     getNavList()
   }
-
-
-
 }
 // 监听store的登录状态
 watch(() => usrLog.isLogin, (newVal) => {

typed-router.d.ts

@@ -23,7 +23,6 @@ declare module 'vue-router/auto-routes' {
     '/console/home': RouteRecordInfo<'/console/home', '/console/home', Record<never, never>, Record<never, never>>,
     'gallery': RouteRecordInfo<'gallery', '/Gallery', Record<never, never>, Record<never, never>>,
     'home': RouteRecordInfo<'home', '/Home', Record<never, never>, Record<never, never>>,
-    'login': RouteRecordInfo<'login', '/Login', Record<never, never>, Record<never, never>>,
     '404': RouteRecordInfo<'404', '/NotFound', Record<never, never>, Record<never, never>>,
     'plink': RouteRecordInfo<'plink', '/Plink', Record<never, never>, Record<never, never>>,
     'widget': RouteRecordInfo<'widget', '/Widget', Record<never, never>, Record<never, never>>,
@@ -60,10 +59,6 @@ declare module 'vue-router/auto-routes' {
       routes: 'home'
       views: never
     }
-    'src/views/Login.vue': {
-      routes: 'login'
-      views: never
-    }
     'src/views/NotFound.vue': {
       routes: '404'
       views: never