refactor(路由、主页、登录页): 与其余改动同步更新

.env

@@ -1,7 +1,7 @@
 # 开发
 #VITE_API_URL_DEV="http://192.168.1.139:8000"
-#VITE_API_URL_DEV='http://server.ichunhao.cn'
-VITE_API_URL_DEV="http://service.ichunhao.cn"
+VITE_API_URL_DEV='http://server.ichunhao.cn'
+#VITE_API_URL_DEV="http://service.ichunhao.cn"
 # 测试服和本地开发
 #VITE_API_URL_TEST='http://server.ichunhao.cn'
 #VITE_API_URL_TEST="http://192.168.1.139:8000"

src/hooks/useRequest.ts

@@ -21,6 +21,7 @@ export function useRequest() {
   const baseURL = BASE_URL
 
   const AllApi = {
+    getGidList: `/user/gidList`, // 获取游戏列表-专用于顶部导航栏的游戏选择框
     getGameTable: `/user/getGidConfig`, // 获取游戏列表
     getUserTable: `/user/userList`, // 获取用户列表
     addGame: `/user/addGidConfig`, // 添加/修改 游戏配置

src/router/home.ts

@@ -25,34 +25,34 @@ export default [
           needKeepAlive: true
         }
       },
-      {
-        path: 'infoManage',
-        cnName: '信息管理',
-        icon: 'Histogram',
-        showChild: true,
-        children: [
-          {
-            path: 'gameManageView',
-            name: 'GameManageView',
-            cnName: '游戏管理',
-            component: () => import('@/views/Home/InfoManage/GameManageView.vue'),
-            meta: {
-              activeMenu: 'gameManageView',
-              needKeepAlive: true
-            }
-          },
-          {
-            path: 'playerManageView',
-            name: 'PlayerManageView',
-            cnName: '玩家管理',
-            component: () => import('@/views/Home/InfoManage/PlayerManageView.vue'),
-            meta: {
-              activeMenu: 'playerManageView',
-              needKeepAlive: true
-            }
-          }
-        ]
-      },
+      // {
+      //   path: 'infoManage',
+      //   cnName: '信息管理',
+      //   icon: 'Histogram',
+      //   showChild: true,
+      //   children: [
+      //     {
+      //       path: 'gameManageView',
+      //       name: 'GameManageView',
+      //       cnName: '游戏管理',
+      //       component: () => import('@/views/Home/InfoManage/GameManageView.vue'),
+      //       meta: {
+      //         activeMenu: 'gameManageView',
+      //         needKeepAlive: true
+      //       }
+      //     },
+      //     {
+      //       path: 'playerManageView',
+      //       name: 'PlayerManageView',
+      //       cnName: '玩家管理',
+      //       component: () => import('@/views/Home/InfoManage/PlayerManageView.vue'),
+      //       meta: {
+      //         activeMenu: 'playerManageView',
+      //         needKeepAlive: true
+      //       }
+      //     }
+      //   ]
+      // },
       {
         path: 'dataAnalysis',
         cnName: '数据分析',

src/stores/useUser.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+interface UserInfo {
+  isSuper: boolean
+}
+
+export const useUser = defineStore('userInfo', () => {
+  const userInfo = ref<UserInfo>({
+    isSuper: false
+  })
+
+  const setUserInfo = (info: UserInfo) => {
+    userInfo.value = info
+    console.log(userInfo.value)
+  }
+
+  const getUserInfo = () => userInfo.value
+
+  return { setUserInfo, getUserInfo }
+})

src/views/IndexView.vue

@@ -7,7 +7,10 @@
  * 
 -->
 <script setup lang="ts">
+import { useRequest } from '@/hooks/useRequest.ts'
 import type { DropDownInfo } from '@/types/dataAnalysis'
+import type { ResponseInfo } from '@/types/res.ts'
+import AxiosInstance from '@/utils/axios/axiosInstance.ts'
 
 import { zhCn } from 'element-plus/es/locales.mjs'
 import { type RouteRecordRaw, RouterView, useRoute } from 'vue-router'
@@ -21,10 +24,17 @@ import { setLoginState } from '@/utils/localStorage/localStorage'
 import { removeAllToken } from '@/utils/token/token'
 
 import router from '@/router'
-import DropDownSelection from '@/components/dataAnalysis/DropDownSelection.vue'
+
+interface GameSelectItemInfo {
+  id: number
+  pid: string
+  gid: string
+  gameName: string
+}
 
 const route = useRoute()
 const { selectInfo, allGameInfo, saveSelectInfo } = useCommonStore()
+const { AllApi } = useRequest()
 
 const isCollapse = ref(false)
 const navBarSelect = ref<string>('Home')
@@ -122,6 +132,15 @@ const blobUrlInfo = reactive<Record<string, string>>({})
 // 侧边栏跳转路由的基本路由
 const basePath = ref<string | undefined>()
 
+// 是否过滤不活跃的游戏
+const isFilterNotActiveGame = ref<boolean>(false)
+
+// 游戏选择框的选中值
+const gameSelectVal = ref<string>('')
+
+// 游戏选择框的加载状态
+const gameSelectLoading = ref<boolean>(false)
+
 /**
  * 创建侧边栏菜单
  */
@@ -186,27 +205,18 @@ watch(
 /**
  * 获取所有游戏列表
  */
-const getGameInfo = () => {
+const updateGameInfo = () => {
   getAllGameInfo()
     .then((data) => {
       if (data) {
         allGameInfo.splice(0, allGameInfo.length)
-        gameSelectInfo.optionsList.splice(0, gameSelectInfo.optionsList.length)
+
         data.map((item) => {
           allGameInfo.push({
             gid: item.gid,
             gameName: item.gameName
           })
-          gameSelectInfo.optionsList.push({
-            value: item.gid,
-            label: item.gameName
-          })
         })
-        gameSelectInfo.defaultSelect = data[0].gid
-        // 去找本地的gid，如果有，就赋值，否则用请求回来的第一个gid
-
-        changeGame(selectInfo.gid)
-        gameSelectInfo.defaultSelect = selectInfo.gid
 
         loadingState.value = true
       } else {
@@ -219,6 +229,49 @@ const getGameInfo = () => {
 }
 
 /**
+ * 设置导航栏的游戏选择框数据
+ */
+const setNavbarGameSelect = (optionsList: Array<GameSelectItemInfo>) => {
+  gameSelectInfo.optionsList.splice(0, gameSelectInfo.optionsList.length)
+  if (!optionsList || optionsList.length === 0) return
+  optionsList.forEach((item) => {
+    gameSelectInfo.optionsList.push({
+      value: item.gid,
+      label: item.gameName
+    })
+  })
+
+  gameSelectInfo.defaultSelect = optionsList[0].gid
+  changeGame(optionsList[0].gid)
+  // 去找本地的gid，如果有，就赋值，否则用请求回来的第一个gid
+}
+
+/**
+ * 获取导航栏游戏选择框的数据
+ */
+const updateNavbarGameSelect = async (query: string) => {
+  try {
+    gameSelectLoading.value = true
+    console.log(gameSelectInfo.defaultSelect)
+    const res = (await AxiosInstance.post(AllApi.getGidList, {
+      active: isFilterNotActiveGame.value,
+      search: query
+    })) as ResponseInfo
+    if (res.code !== 0) {
+      setNavbarGameSelect([])
+      return false
+    }
+    setNavbarGameSelect(res.data)
+  } catch (err) {
+    setNavbarGameSelect([])
+    console.error(err)
+    ElMessage.error('游戏列表获取失败')
+  } finally {
+    gameSelectLoading.value = false
+  }
+}
+
+/**
  * 监听游戏列表的变化
  *
  * 此处只是声明，在后续加载完成后，会被赋值唯一一个监听器
@@ -258,7 +311,8 @@ const watchLoadingState = watch(
   }
 )
 
-getGameInfo()
+updateGameInfo()
+updateNavbarGameSelect('')
 onMounted(() => {
   // 去加载所有需要的资源
   initLoadResource(resourceInfo).then((data) => {
@@ -282,13 +336,44 @@ onMounted(() => {
             <icon-icon-park-game-three></icon-icon-park-game-three>
             <!--            <icon-icon-park-solid-ad></icon-icon-park-solid-ad>-->
           </el-icon>
-          <DropDownSelection
-            :default-select="gameSelectInfo.defaultSelect"
-            :title="gameSelectInfo.title"
-            :options-list="gameSelectInfo.optionsList"
-            :size="'default'"
-            @change-select="changeGame"
-          ></DropDownSelection>
+          <div style="width: 150px">
+            <el-select
+              style="width: 100%"
+              @change="changeGame"
+              v-model="gameSelectInfo.defaultSelect"
+              :placeholder="gameSelectInfo.title"
+              filterable
+              remote
+              :loading="gameSelectLoading"
+              :remote-method="updateNavbarGameSelect"
+              v-bind="$attrs"
+            >
+              <template #header>
+                <el-checkbox v-model="isFilterNotActiveGame" @change="updateNavbarGameSelect('')"
+                  >是否过滤不活跃游戏
+                </el-checkbox>
+              </template>
+              <el-option
+                v-for="item in gameSelectInfo.optionsList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          <!--          <DropDownSelection-->
+          <!--            :default-select="gameSelectInfo.defaultSelect"-->
+          <!--            :title="gameSelectInfo.title"-->
+          <!--            :options-list="gameSelectInfo.optionsList"-->
+          <!--            :size="'default'"-->
+          <!--            @change-select="changeGame"-->
+          <!--          >-->
+          <!--            <template #header>-->
+          <!--              <el-checkbox v-model="isFilterNotActiveGame" @change="updateGameInfo"-->
+          <!--                >是否过滤不活跃游戏</el-checkbox-->
+          <!--              >-->
+          <!--            </template>-->
+          <!--          </DropDownSelection>-->
         </div>
         <!-- 顶部导航栏 -->
 
@@ -333,7 +418,8 @@ onMounted(() => {
               :key="item.name"
             >
               <template #title>
-                <el-icon><component :is="item.icon"></component></el-icon>
+                <!--                <el-icon><component :is="item.icon"></component></el-icon>-->
+                <DynamicIcon :icon="item.icon" />
                 <span>{{ item.cnName }}</span>
               </template>
               <router-link
@@ -353,7 +439,8 @@ onMounted(() => {
               :key="index"
             >
               <el-menu-item :index="item.path">
-                <el-icon><component :is="item.icon" /></el-icon>
+                <!--                <el-icon><component :is="item.icon" /></el-icon>-->
+                <DynamicIcon :icon="item.icon" />
                 <template #title>
                   <span class="menuTitle">{{ item.cnName }}</span>
                 </template>

src/views/Login/LoginView.vue

@@ -7,6 +7,7 @@
  * 
 -->
 <script setup lang="ts">
+import { useUser } from '@/stores/useUser.ts'
 import type { RuleInfo } from '@/types/input'
 
 import { onMounted, reactive, ref } from 'vue'
@@ -21,6 +22,7 @@ import MyButton from '@/components/form/MyButton.vue'
 import MyInput from '@/components/form/MyInput.vue'
 
 const { AllApi, analysisResCode } = useRequest()
+const { setUserInfo } = useUser()
 
 interface LoginInfoType {
   userName: string
@@ -110,6 +112,8 @@ const userLogin = async () => {
       setToken(result.token)
       setRefreshToken(result.refreshToken)
       setLoginState(true)
+      // TODO 保存和验证用户信息
+      setUserInfo(result.isSuper)
       axiosInstance.defaults.headers['Authorization'] = result.token // 需要在这里设置，不然又会触发拦截器
       void router.push('/')
     } catch (err) {