feat:更新依赖

auto-imports.d.ts

@@ -15,6 +15,7 @@ declare global {
   const effectScope: typeof import('vue')['effectScope']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getUserInfo: typeof import('./src/api/userApi')['getUserInfo']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']
   const isNewUser: typeof import('./src/api/userApi')['isNewUser']

src/api/userApi.ts

@@ -1,10 +1,17 @@
 import http from "@/utils/request";
 
-//demo
+//是否第一次注册
 export const isNewUser = () => {
+  return http({
+    url: "/api/UserInfo/IsNewUser",
+    method: "GET",
+  });
+};
+
+// 获取用户信息
+export const getUserInfo = () => {
     return http({
-        url:'/api/UserInfo/IsNewUser',
+        url:'/api/UserInfo/My',
         method:'GET'
     })
-}
+};
-

src/components/Ls-UI/LsEmpty.vue

@@ -1,3 +1,4 @@
+<!-- 空状态组件:<ls-empty></ls-empty> -->
 <template>
     <div class="empty-state" :class="[`empty-state--${type}`]">
         <div class="empty-state__icon" :class="`empty-state__icon--${type}`">
@@ -21,7 +22,7 @@
 <script lang="ts">
 type EmptyStateType = 'no-data' | 'no-permission' | 'not-opened'
 export default defineComponent({
-    name: 'ElzEmpty',
+    name: 'LsEmpty',
     label: '空状态',
     props: {
         type: {

src/components/Ls-UI/LsLogo.vue

@@ -0,0 +1,50 @@
+<!-- LOGO样式公共组件，展未完善，使用：<ls-logo /> -->
+<template>
+    <div class="header-icon">
+        <img src="/logo.jpg">
+        <div class="header-icon__text">
+            <p class="cn">零枢</p>
+            <p class="en">ZeroNode</p>
+        </div>
+    </div>
+</template>
+
+<script lang='ts'>
+export default defineComponent({
+    name: 'LsLogo',
+    label: '零枢LOGO',
+})
+</script>
+<style scoped lang='scss'>
+.header-icon {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    gap: 12px;
+
+    img {
+        height: 45px;
+        width: 45px;
+        border-radius: 4px;
+    }
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 45px;
+
+        .cn {
+            font-size: 20px;
+            font-weight: bold;
+        }
+
+        .en {
+            color: $primaryColor;
+            font-size: 12px;
+            font-weight: 600;
+        }
+    }
+}
+</style>

src/router/index.ts

@@ -8,6 +8,9 @@ import CallBack from "@/views/login/OauthCallBack.vue"; //反馈页面
 import Home from "@/views/home/index.vue"; //家
 import Auth from "@/views/role/pages/Auth.vue"; //权限管理
 import Menu from '@/views/system/menu/index.vue'; //动态权限菜单
+import Register from '@/views/login/Register.vue'; //用户注册
+import Dict from '@/views/system/dict/index.vue'; //用户字典
+import GlobalSys from '@/views/system/globalSys/index.vue'; //全局参数
 import { getToken } from "@/utils/auth";
 
 const whiteList = ["/callback"];
@@ -23,6 +26,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "CallBack",
     component: CallBack,
   },
+  {
+    path:'/register',
+    name:'register',
+    component:Register
+  },
   {
     path: "/layout",
     name: "Layout",
@@ -44,6 +52,16 @@ const routes: Array<RouteRecordRaw> = [
         name: "menu",
         component: Menu,
       },
+      {
+        path:'dict',
+        name:'dict',
+        component:Dict
+      },
+      {
+        path:'globalSys',
+        name:'globalSys',
+        component:GlobalSys
+      }
     ],
   },
 ];

src/utils/request.ts

@@ -38,12 +38,12 @@ instance.interceptors.response.use(
 
     // 401 未授权，跳转首页
     if (code === 401) {
-      // 这里调用退出登录的逻辑
+      // // 这里调用退出登录的逻辑
-      console.log("未授权，跳转首页");
+      // console.log("未授权，跳转首页");
-      // 清除用户信息
+      // // 清除用户信息
-      removeToken();
+      // removeToken();
-      // 跳转首页
+      // // 跳转首页
-      window.location.href = "/"; //后续用发布订阅模式修改
+      // window.location.href = "/"; //后续用发布订阅模式修改
       return Promise.reject(new Error(msg || "未授权"));
     }
 

src/views/layout/components/LayoutHeader.vue

@@ -1,12 +1,6 @@
 <template>
     <n-layout-header bordered>
-        <div class="header-icon">
+        <ls-logo/>
-            <img src="/logo.jpg">
-            <div class="header-icon__text">
-                <p class="cn">零枢</p>
-                <p class="en">ZeroNode</p>
-            </div>
-        </div>
         <div class="header-avatar">
             <div class="header-avatar__info">
                 <n-avatar src="@/assets/images/luolan_avatar.jpg" round :size="45"
@@ -77,38 +71,6 @@ const handleSelect = (key: string | number) => {
     align-items: center;
     justify-content: space-between;
 
-    .header-icon {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        gap: 12px;
-
-        img {
-            height: 45px;
-            width: 45px;
-            border-radius: 4px;
-        }
-
-        &__text {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 45px;
-
-            .cn {
-                font-size: 20px;
-                font-weight: bold;
-            }
-
-            .en {
-                color: $primaryColor;
-                font-size: 12px;
-                font-weight: 600;
-            }
-        }
-    }
-
     // 右侧
     .header-avatar {
         &__info {

src/views/layout/components/LayoutNav.vue

@@ -31,6 +31,7 @@ const expandIcon = () => {
 function renderIcon(iconClass: string) {
     return () => h(SvgIcon, { iconClass, width: '16', height: '16' })
 }
+// 后面改成动态的
 const menuOptions: MenuOption[] = [
     {
         label: () =>
@@ -75,7 +76,7 @@ const menuOptions: MenuOption[] = [
     {
         label: '系统配置',
         key: 'system',
-        icon:renderIcon('mainproject'),
+        icon: renderIcon('mainproject'),
         children: [
             {
                 label: () => h(
@@ -90,7 +91,39 @@ const menuOptions: MenuOption[] = [
                     },
                     { default: () => '菜单管理' }
                 ),
-                key: 'system',
+                key: 'system-menu',
+                icon: renderIcon('mainproject')
+            },
+            {
+                label: () => h(
+                    RouterLink,
+                    {
+                        to: {
+                            name: 'dict',
+                            params: {
+                                lang: 'zh-CN'
+                            }
+                        }
+                    },
+                    { default: () => '字典配置' }
+                ),
+                key: 'system-dict',
+                icon: renderIcon('mainproject')
+            },
+            {
+                label: () => h(
+                    RouterLink,
+                    {
+                        to: {
+                            name: 'globalSys',
+                            params: {
+                                lang: 'zh-CN'
+                            }
+                        }
+                    },
+                    { default: () => '全局参数' }
+                ),
+                key: 'system-globalSys',
                 icon: renderIcon('mainproject')
             }
         ]

src/views/login/OauthCallBack.vue

@@ -8,8 +8,7 @@
 import { setToken } from '@/utils/auth';
 import { useAuth0 } from '@auth0/auth0-vue';
 import { useMessage } from 'naive-ui';
-import { isNewUser } from '@/api/userApi';
+import { isNewUser,getUserInfo } from '@/api/userApi';
-
 const { getAccessTokenSilently } = useAuth0();
 const router = useRouter();
 const message = useMessage();
@@ -17,8 +16,11 @@ const oSomethingWithToken = async () => {
   try {
     const token = await getAccessTokenSilently();
     setToken(token);
-    const res = await isNewUser();
+    const isCompleteInfo = await isNewUser(); //表示是否完成信息登记 true表示完成
-    console.log(res,'res');
+    if(!isCompleteInfo) return router.push('/register');
+    const result = await getUserInfo();
+    console.log(result,'result'); //后面userInfo要存到store里面
+    //TODO
     message.success('登录成功！');
     router.push('/layout');
   } catch (error) {
@@ -27,6 +29,7 @@ const oSomethingWithToken = async () => {
   }
 
 }
+
 onMounted(() => {
   oSomethingWithToken();
 })

src/views/login/Register.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="register-page">
+        <div class="register-page__header">
+            <ls-logo></ls-logo>
+            <p @click="pathToHome">首页 ></p>
+        </div>
+        <div class="register-page__main">
+            <n-form ref="formRef" :model="form" class="formRef">
+                <p class="title">零枢信息完善</p>
+                <n-form-item path="nickName" label="用户昵称">
+                    <n-input v-model:value="form.nickName" @keydown.enter.prevent />
+                </n-form-item>
+                <n-form-item path="sex" label="用户性别">
+                    <n-radio-group v-model:value="form.sex" name="top-size">
+                        <n-radio-button value="female">
+                            女
+                        </n-radio-button>
+                        <n-radio-button value="male">
+                            男
+                        </n-radio-button>
+                        <n-radio-button value="unknown">
+                            未知
+                        </n-radio-button>
+                    </n-radio-group>
+                </n-form-item>
+                <n-form-item path="birthday" label="用户生日">
+                    <n-date-picker v-model:value="form.birthday" type="date" />
+                </n-form-item>
+                <n-form-item path="description" label="用户签名">
+                    <n-input v-model:value="form.description" type="textarea" placeholder="请输入用户签名" maxlength="100"
+                        show-count />
+                </n-form-item>
+                <n-button type="primary" style="width:100%" @click="saveInfo">
+                    保存信息
+                </n-button>
+            </n-form>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { useMessage } from 'naive-ui';
+import { getUserInfo } from '@/api/userApi';
+type SexDict = 'famale' | 'male' | 'unknown';
+interface ReqisterForm {
+    nickName: string
+    sex: SexDict
+    birthday: number
+    description: string
+}
+
+const router = useRouter();
+const message = useMessage();
+
+const form = reactive<ReqisterForm>({
+    nickName: '',
+    sex: 'unknown',
+    birthday: new Date().getTime(),
+    description: ''
+});
+
+const saveInfo = () => {
+    message.error('尚未开发！请直接进入首页！');
+}
+const pathToHome = () => {
+    router.push('/layout');
+};
+// 初始化获取UserInfo
+const init = async () => {
+    try {
+        const user = await getUserInfo();
+        console.log(user, 'user');
+    } catch (error) {
+        // message.error(error.message);
+        message.error('获取用户信息，后端还没写。请稍等');
+    }
+};
+init();
+// 初始化结束
+</script>
+<style scoped lang='scss'>
+.register-page {
+    background: #E7E7E7;
+    min-height: 100vh;
+
+    &__header {
+        height: 60px;
+        background: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        p {
+            color: #666;
+            font-size: 14px;
+            font-weight: bold;
+            padding: 0 1rem;
+            cursor: pointer;
+
+            &:hover {
+                color: $primaryColor;
+            }
+        }
+    }
+
+    &__main {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: calc(100vh - 60px);
+
+        .formRef {
+            width: 600px;
+            padding: 30px;
+            background: #fff;
+            border-radius: 8px;
+
+            .title {
+                text-align: center;
+                margin: 16px 0;
+                font-weight: bold;
+                font-size: 24px;
+                color: $primaryColor;
+            }
+        }
+    }
+}
+</style>

src/views/system/dict/index.vue

@@ -0,0 +1,19 @@
+<!-- 用户字典 -->
+<template>
+  <div class="main__container white-bg table">
+    <header class="dict-header">
+        <!-- 写一写查询条件 -->
+    </header>
+    <main class="dict-main">
+        <!-- 写一写操作按钮，新增字典等 -->
+         <div class="dict-main__buttonList"></div>
+         <!-- 字典表格 -->
+         <n-table></n-table>
+    </main>
+  </div>
+</template>
+
+<script setup lang='ts'>
+</script>
+<style scoped lang='scss'>
+</style>

src/views/system/globalSys/index.vue

@@ -0,0 +1,20 @@
+<!-- 用户字典 -->
+<template>
+  <div class="main__container white-bg table">
+    <header class="dict-header">
+        <!-- 写一写查询条件 ，参数名-->
+    </header>
+    <main class="dict-main">
+        <!-- 写一写操作按钮，新增按钮 -->
+         <div class="dict-main__buttonList"></div>
+         <!-- 全局参数表格 包括字段 ，参数英文、参数描述、参数值 、操作（删除 编辑） -->
+         <n-table></n-table>
+         <!-- 要求有分页，先用假数据模拟 -->
+    </main>
+  </div>
+</template>
+
+<script setup lang='ts'>
+</script>
+<style scoped lang='scss'>
+</style>