"实现导航菜单与天气组件，完善路由功能"

README.md

@@ -3,7 +3,7 @@
 
 ## 主要功能 -- 全部重构
 
-### × 1.登录注册功能
+### √ 1.登录注册功能
 ### × 2.首页展示导航快捷入口
 ### × 3.画廊页面展示共享图片
 ### × 4.文章详情页展示文章内容

package.json

@@ -12,6 +12,7 @@
     "axios": "^1.8.4",
     "less": "^4.3.0",
     "pinia": "^3.0.1",
+    "qweather-icons": "^1.6.0",
     "tdesign-vue-next": "^1.11.5",
     "unplugin-auto-import": "^19.1.2",
     "unplugin-vue-components": "^28.4.1",

src/components/menu.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="flex justify-between items-center h-[50px]">
+    <t-head-menu v-model="menuValue" theme="light">
+      <template #logo>
+        <div class="logo flex items-center" @click="toHome">
+          <img v-if="menuValue == 'home'" class="rounded-full mr-2" src="@/assets/logo/柚子娘.png" width="35" alt="">
+          <img v-else class="rounded-full mr-2" src="@/assets/logo/柚子娘-绿.png" width="28" alt="">
+          <img v-if="menuValue == 'home'" src="@/assets/logo/红色字体.png" width="130" alt="">
+          <img v-else src="@/assets/logo/绿色字体.png" width="135" alt="">
+        </div>
+      </template>
+      <t-menu-item value="home" to="home"> 首页 </t-menu-item>
+      <t-menu-item value="gallery" to="gallery"> 画廊 </t-menu-item>
+      <t-menu-item value="widget" to="widget"> 工具 </t-menu-item>
+      <t-menu-item value="appshare" to="appshare"> 软件分享 </t-menu-item>
+      <t-menu-item value="plink" to="plink"> 友链 </t-menu-item>
+      <template #operations>
+        <div class="wea">
+          <wea />
+        </div>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="search" /></template>
+        </t-button>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="mail" /></template>
+        </t-button>
+
+        <t-avatar v-if="ui" size="small" :image="ui.avaUrl" />
+        <t-button @click="loginClick" v-else theme="danger" size="small">登录</t-button>
+
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="ellipsis" /></template>
+        </t-button>
+      </template>
+    </t-head-menu>
+  </div>
+</template>
+
+<script setup>
+//mark import
+import wea from '@/components/wea.vue'
+
+//mark data
+const route = useRoute()
+const router = useRouter()
+const menuValue = ref('home')
+const ui = ref({
+  avaUrl: '#'
+})
+
+//mark method
+
+function toHome() {
+  router.push('/home')
+}
+function loginClick() {
+  router.push('/login')
+}
+
+
+// 监听路由变化
+watchEffect(() => {
+  menuValue.value = route.path.split('/')[1]
+})
+
+//mark 周期、内置函数等
+onMounted(() => {
+  // 判断cookie里面有没有userinfo
+  // console.log($cookies.get('userinfo'));
+  ui.value = $cookies.get('userinfo')
+}
+)
+
+</script>
+
+<style scoped lang="less">
+:deep(.t-is-active) {
+  background-color: unset !important;
+  color: theme('colors.pp.500') !important;
+}
+
+:deep(.t-menu__item) {
+  font-size: 20px;
+  color: theme('colors.suc.800');
+
+  div {
+    display: none !important;
+  }
+}
+
+:deep(.t-menu__item):hover {
+  background-color: unset !important;
+  color: theme('colors.pp.500');
+
+  div {
+    display: none !important;
+  }
+}
+
+:deep(.t-menu__item):focus {
+  background-color: unset !important;
+}
+</style>

src/components/wea.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="info mr-24" @click="gotoWea">
+    <div class="loc flex items-center">
+      <t-icon class="mr-2 text-pp-500" size="large" name="location" />
+      {{ addr }}
+    </div>
+    <div class="wea">
+      <i class="text-pp-500" :class="'qiIcon qi-' + now.icon + '-fill'"></i>
+      <div class="tem">{{ now.text }} {{ now.temp }} ℃</div>
+    </div>
+  </div>
+</template>
+<script setup>
+const city = ref("合肥市");
+const addr = ref("安徽省合肥市");
+let now = ref({});
+const fLink = ref('')
+
+function gotoWea(){
+  window.open(fLink.value,"_blank")
+}
+
+onMounted(async () => { 
+  const ress = await $http.addr.getAddressByIP();
+  // console.log("111", ress);
+  const reg = ress.data.split("|")
+  // console.log("***********",reg);
+  const res = {
+    country:reg[0],
+    province:reg[2],
+    city:reg[3]
+  }
+  city.value = res.city;
+  addr.value = ['上海','重庆','北京','天津'].includes(res.province) ? res.country + res.city : res.province + res.city;
+  const r = await $http.wea.getWeather({ city: city.value });
+  fLink.value = r.fxLink
+  now.value = r.now;
+});
+</script>
+
+<style lang="less" scoped>
+.info {
+  display: flex;
+  // justify-content: space-between;
+  align-items: center;
+
+  .loc {
+    margin-right: 15px;
+
+    :deep(n-icon) {
+      padding-top: 5px;
+    }
+  }
+
+  .wea {
+    display: flex;
+    // justify-content: space-between;
+    align-items: center;
+
+    .qiIcon {
+      font-size: 26px;
+    }
+
+    .tem {
+      margin-left: 15px;
+    }
+  }
+}</style>

src/config/http.js

@@ -3,7 +3,7 @@ const files = import.meta.glob('@/api/*/index.js', {
 })
 
 const http = {}
-console.log(files);
+// console.log(files);
 for (const i in files) {
   const t = i.split("/")
   const name = t[t.length - 2]

src/main.js

@@ -2,15 +2,16 @@
 
 import { useConfig } from '@/config';
 import { createPinia } from 'pinia';
+import "qweather-icons/font/qweather-icons.css";
 import TDesign from 'tdesign-vue-next';
 import 'tdesign-vue-next/es/style/index.css';
 import { createApp } from 'vue';
 import App from './App.vue';
 import './assets/main.less';
+import menu from './components/menu.vue';
 import icon from './icon/index.js';
 import router from "./router/guard.js";
 
-
 const app = createApp(App)
 
 app.use(createPinia())
@@ -23,6 +24,6 @@ for (const key in icon) {
   // console.log(key, icon[key]);
   app.component('icon-'+key, icon[key]);
 }
-
+app.component('home-menu', menu)
 
 app.mount('#app')

src/util/router.js

@@ -2,7 +2,7 @@ import home from '@/views/home/index.vue'
 
 export default {
   path: '/',
-  redirect:'/login',
+  redirect:'/home',
   children:[
     {
       path:'home',
@@ -17,6 +17,34 @@ export default {
       meta:{
         title:'登录'
       }
+    },
+    {
+      path:"gallery",
+      component:()=>import('@/views/gallery/index.vue'),
+      meta:{
+        title:'画廊'
+      }
+    },
+    {
+      path:"widget",
+      component:()=>import('@/views/widget/index.vue'),
+      meta:{
+        title:'工具'
+      }
+    },
+    {
+      path:"appshare",
+      component:()=>import('@/views/appshare/index.vue'),
+      meta:{
+        title:'软件分享'
+      }
+    },
+    {
+      path:"plink",
+      component:()=>import('@/views/plink/index.vue'),
+      meta:{
+        title:'友链'
+      }
     }
   ]
 }

src/views/appshare/index.vue

@@ -0,0 +1,22 @@
+<template>
+   <home-menu></home-menu>
+  <div>
+    这是软件分享页
+  </div>
+</template>
+
+<script setup>
+//mark import
+
+//mark data
+
+//mark method
+
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/gallery/index.vue

@@ -0,0 +1,22 @@
+<template>
+   <home-menu></home-menu>
+  <div>
+    这是画廊页
+  </div>
+</template>
+
+<script setup>
+//mark import
+
+//mark data
+
+//mark method
+
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/home/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <home-menu></home-menu>
   <div>
     这里是主页
   </div>

src/views/login/index.vue

@@ -124,7 +124,7 @@ async function loginSubmit({ validateResult, firstError }) {
     const res = await $http.user.login(loginData)
     if (res.code == 1) {
       $cookies.set('token', res.token, 60 * 60 * 24 * 7)
-      $cookies.set('userInfo', res.data, 60 * 60 * 24 * 7)
+      $cookies.set('userinfo', res.data, 60 * 60 * 24 * 7)
       $msg.success(res.msg)
       router.push('/')
       return

src/views/plink/index.vue

@@ -0,0 +1,22 @@
+<template>
+   <home-menu></home-menu>
+  <div>
+    这是友链页
+  </div>
+</template>
+
+<script setup>
+//mark import
+
+//mark data
+
+//mark method
+
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/widget/index.vue

@@ -0,0 +1,22 @@
+<template>
+   <home-menu></home-menu>
+  <div>
+    这是工具页
+  </div>
+</template>
+
+<script setup>
+//mark import
+
+//mark data
+
+//mark method
+
+//mark 周期、内置函数等
+
+
+</script>
+
+<style scoped lang="less">
+
+</style>

yarn.lock

@@ -1552,6 +1552,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+qweather-icons@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/qweather-icons/-/qweather-icons-1.6.0.tgz#097676b8bbbe34e3e7c18371de8c6631d37c1e49"
+  integrity sha512-uINrSOteHHarEeHRpP37aBnuuwYnWc1eyZ2gbnujoEqOVabIPDiEseF7a9eIOnBn7GZBlo5nYj29eOEfLH/bEA==
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"