更新顶部导航栏布局，更新侧边导航栏生成逻辑，更新侧边导航栏导航方式

src/App.vue

@@ -2,20 +2,466 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 14:06:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-08-29 09:43:18
+ * @LastEditTime: 2024-09-03 18:22:47
  * @FilePath: \Game-Backstage-Management-System\src\App.vue
  * @Description: 
  * 
 -->
 <script setup lang="ts">
 import { zhCn } from 'element-plus/es/locales.mjs'
+import { RouterView } from 'vue-router'
+import { onMounted, reactive, ref, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getAllGameInfo } from '@/utils/table/table'
+import router from '@/router'
+import type { DropDownInfo } from '@/types/dataAnalysis'
+import DropDownSelection from '@/components/dataAnalysis/DropDownSelection.vue'
+import { useCommonStore } from '@/stores/useCommon'
+import { initLoadResouce } from '@/utils/resource'
+
+const { selectInfo } = useCommonStore()
+const isCollapse = ref(false)
+const navBarSelect = ref<string>('Home')
+const siderBarOpened = ref<Array<string>>(['数据总览'])
+const siderBar = ref()
+const menuList = reactive<Array<any>>([])
+const defaultActive = ref<string>('0')
+const navBarMenuList = [
+  {
+    name: 'Home',
+    title: '应用分析'
+  },
+
+  {
+    name: 'AppManage',
+    title: '应用管理'
+  }
+]
+
+/**
+ * @description: 侧边栏折叠改变
+ * @return {*}
+ */
+const changeCollapse = () => {
+  isCollapse.value = !isCollapse.value
+}
+
+// 登出
+const logOut = () => {
+  ElMessage({
+    type: 'success',
+    message: '退出成功',
+    duration: 1000
+  })
+  localStorage.removeItem('token')
+  localStorage.removeItem('refreshToken')
+  router.push('/login')
+}
+
+// 游戏下拉选择框需要的数据
+const gameSelectInfo = reactive<DropDownInfo>({
+  defaultSelect: '1001',
+  title: '请选择游戏',
+  optionsList: []
+})
+
+// 游戏信息是否加载成功
+const gameinfoLoad = ref(false)
+
+/**
+ * @description: 更新整个页面的游戏选择
+ * @param {*} gid 游戏id
+ * @return {*}
+ */
+const changeGame = (gid: any) => {
+  selectInfo.gid = gid
+}
+
+/**
+ * @description: 头部导航栏改变
+ * @param {*} val 对应的name
+ * @return {*}
+ */
+const changeNavBar = (val: string) => {
+  navBarSelect.value = val
+
+  router.push(`/${val}`)
+  createdMenuList()
+
+  let title = navBarMenuList.find((item) => item.name === val)?.title
+  if (title) {
+    siderBarOpened.value.splice(0, 1, title)
+  }
+}
+
+/**
+ * @description: 获取所有游戏列表
+ * @return {*}
+ */
+getAllGameInfo().then((data) => {
+  if (data) {
+    data.map((item) => {
+      gameSelectInfo.optionsList.push({
+        value: item.gid,
+        label: item.gameName
+      })
+    })
+  }
+  gameinfoLoad.value = true
+})
+
+// 资源的加载路径
+const resourceInfo: Record<string, string> = {
+  logo: `/img/logo.svg`,
+  defaultHead: `/img/default/defaultHead.png`
+}
+
+// 使用blob的资源路径信息
+const blobUrlInfo = reactive<Record<string, string>>({})
+
+const basePath = ref<string | undefined>()
+
+/**
+ * @description: 创建侧边栏menu
+ * @param {*} let
+ * @return {*}
+ */
+const createdMenuList = () => {
+  let routes = router.options.routes
+  let activeMenu = routes.find((item) => {
+    return item.name === navBarSelect.value
+  })
+  basePath.value = activeMenu?.path
+  menuList.splice(0, menuList.length, ...(activeMenu?.children as Array<any>))
+  defaultActive.value = '0' // 仍有问题
+}
+
+onMounted(() => {
+  // 去加载所有需要的资源
+  initLoadResouce(resourceInfo).then((data) => {
+    Object.assign(blobUrlInfo, data)
+  })
+
+  createdMenuList()
+})
 </script>
 
 <template>
-  <div>测试</div>
   <el-config-provider :locale="zhCn">
-    <RouterView />
+    <div class="body">
+      <div class="navBarBox">
+        <div class="logoBox">
+          <el-image :fit="'fill'" class="logoImg" :src="blobUrlInfo.logo"></el-image>
+          <span>淳皓科技</span>
+        </div>
+        <div class="gameSelect">
+          <el-icon class="gameIcon" :size="20">
+            <icon-icon-park-game-three></icon-icon-park-game-three>
+          </el-icon>
+          <DropDownSelection
+            :default-select="gameSelectInfo.defaultSelect"
+            :title="gameSelectInfo.title"
+            :options-list="gameSelectInfo.optionsList"
+            :size="'default'"
+            @change-select="changeGame"
+          ></DropDownSelection>
+        </div>
+        <div class="navBarMenu">
+          <el-menu
+            :default-active="navBarSelect"
+            class="el-menu-demo"
+            mode="horizontal"
+            @select="changeNavBar"
+          >
+            <el-menu-item
+              v-for="item in navBarMenuList"
+              class="navBarMenuItem"
+              :index="item.name"
+              >{{ item.title }}</el-menu-item
+            >
+          </el-menu>
+        </div>
+        <div class="headPortraitBox">
+          <el-popover popper-class="headPopper" placement="bottom-end" trigger="click">
+            <template #reference>
+              <el-image class="headPortrait" :src="blobUrlInfo.defaultHead"></el-image>
+            </template>
+            <div class="userTools">
+              <span class="userToolsItem" @click="logOut">
+                <icon-material-symbols-light-logout></icon-material-symbols-light-logout>
+                <span> 退出登录</span>
+              </span>
+            </div>
+          </el-popover>
+        </div>
+      </div>
+
+      <div class="sideBarBox">
+        <el-menu
+          :default-active="defaultActive"
+          class="sideBar"
+          :collapse="isCollapse"
+          ref="siderBar"
+        >
+          <template v-for="(item, index) in menuList">
+            <el-sub-menu :index="`${index}`" v-if="item.children && item.showChild">
+              <template #title>
+                <el-icon><component :is="item.icon"></component></el-icon>
+                <span>{{ item.cnName }}</span>
+              </template>
+              <!-- :to="{ name: val.name }" -->
+              <router-link
+                style="text-decoration: none"
+                v-for="(val, subIndex) in item.children"
+                :to="{ path: basePath + '/' + item.path + '/' + val.path }"
+                :key="index"
+              >
+                <el-menu-item :index="index + '-' + subIndex">{{ val.cnName }}</el-menu-item>
+              </router-link>
+            </el-sub-menu>
+
+            <router-link
+              style="text-decoration: none"
+              v-else
+              :to="{ path: basePath + '/' + item.path }"
+              :key="index"
+            >
+              <el-menu-item :index="`${index}`">
+                <template #title>
+                  <el-icon><component :is="item.icon" /></el-icon>
+                  <span class="menuTitle">{{ item.cnName }}</span>
+                </template>
+              </el-menu-item>
+            </router-link>
+          </template>
+          <div class="sideBarFold" @click="changeCollapse">
+            <el-icon :size="25"><Fold /></el-icon>
+          </div>
+        </el-menu>
+      </div>
+
+      <!-- <div class="sideBarBox">
+        <el-menu
+          :router="true"
+          :default-active="$route.name"
+          class="sideBar"
+          :collapse="isCollapse"
+          ref="siderBar"
+        >
+          <template v-for="item in menuInfo[navBarSelect]">
+            <el-sub-menu v-if="item.children" :index="item.title">
+              <template #title>
+                <el-icon><component :is="item.icon" /></el-icon>
+                <span class="menuTitle">{{ item.title }}</span>
+              </template>
+              <el-menu-item v-for="v in item.children" :index="v.pathName">{{
+                v.title
+              }}</el-menu-item>
+            </el-sub-menu>
+            <el-menu-item v-else :index="item.pathName">
+              <template #title>
+                <el-icon><component :is="item.icon" /></el-icon>
+                <span class="menuTitle">{{ item.title }}</span>
+              </template>
+            </el-menu-item>
+          </template>
+          <div class="sideBarFold" @click="changeCollapse">
+            <el-icon :size="25"><Fold /></el-icon>
+          </div>
+        </el-menu>
+      </div> -->
+      <div class="content">
+        <router-view v-slot="{ Component, route }">
+          <keep-alive>
+            <component
+              :is="Component"
+              :key="route.path"
+              v-if="route.meta.needKeepAlive == true"
+            ></component>
+          </keep-alive>
+          <component
+            :is="Component"
+            :key="route.path"
+            v-if="route.meta.needKeepAlive == false"
+          ></component>
+        </router-view>
+      </div>
+    </div>
   </el-config-provider>
 </template>
 
-<style scoped></style>
+<style scoped>
+.body {
+  width: 100%;
+  display: flex;
+  height: 100vh;
+}
+
+/* 设置宽度后，content无法适应宽度，只能去间接的调整内部元素的宽度 */
+.sideBarBox {
+  position: relative;
+  /* width: 12%; */
+  z-index: 1;
+  height: 93vh;
+  margin-top: 7vh;
+  top: 0;
+}
+
+.sideBar {
+  /* width: 12vw; */
+  height: 93vh;
+  position: relative;
+  overflow: scroll;
+}
+
+/* 设置弹出层的样式 */
+.el-popper > .logoText {
+  width: 100px;
+  font-size: 16px;
+  /* color: red; */
+}
+
+.logoImg {
+  display: flex;
+  align-items: center;
+  width: 33px;
+  /* margin-right: 20px; */
+  /* height: 50px; */
+}
+
+.logoText {
+  width: 80%;
+  height: 100%;
+  margin-left: 15%;
+  display: flex;
+  font-size: 18px;
+  align-items: center;
+  /* background-color: lightcoral; */
+}
+
+/* 主要用来调整整个menu的宽度 */
+.menuTitle {
+  margin-right: 40px;
+}
+
+.sideBarFold {
+  width: 5%;
+  height: 3%;
+  position: absolute;
+  right: 40px;
+  bottom: 20px;
+}
+
+.navBarBox {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  z-index: 2;
+  height: 7vh;
+  top: 0;
+  background-color: white;
+  right: 0;
+  border-bottom: 1px solid gainsboro;
+}
+
+/* 调整LOGO */
+.logoBox {
+  box-sizing: border-box;
+  left: 30px;
+  position: relative;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gameSelect {
+  position: relative;
+
+  height: 80%;
+  display: flex;
+  align-items: center;
+  left: 5%;
+  display: flex;
+  align-items: center;
+}
+
+.gameIcon {
+  /* box-sizing: border-box; */
+  /* padding-right: 12px; */
+  margin-right: 12px;
+}
+
+.navBarMenu {
+  width: 60%;
+  position: relative;
+  left: 6%;
+}
+
+.headPortraitBox {
+  position: absolute;
+  right: 3%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.userTools {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.userToolsItem {
+  cursor: pointer;
+  width: 100%;
+  height: 4vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* padding: 10px; */
+  margin: 2%;
+}
+
+.userToolsItem > span {
+  margin-left: 10%;
+}
+
+.userToolsItem:hover {
+  background-color: #f2f3f5;
+}
+
+.headPortrait {
+  cursor: pointer;
+  width: 50px;
+}
+
+.content {
+  /* flex-grow: 1; */
+  /* position: absolute; */
+
+  width: 100%;
+  /* height: 93%; */
+  margin-top: 7vh;
+  overflow: scroll;
+  background-color: #f2f3f5;
+  right: 0vw;
+  top: 0vh;
+}
+</style>
+
+<!-- 为了让popper-class生效，需要的单独写一份 -->
+<style>
+.headPopper {
+  padding: 0px !important;
+  border: 1px solid #e5e6eb;
+
+  background-color: white;
+}
+.el-menu--horizontal.el-menu {
+  border-bottom: none;
+}
+</style>

src/components/Table.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 18:16:18
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-02 15:57:42
+ * @LastEditTime: 2024-09-03 14:11:01
  * @FilePath: \Game-Backstage-Management-System\src\components\Table.vue
  * @Description: 
  * 
@@ -53,8 +53,7 @@ const paginationConfig2 = reactive<TablePaginationSetting>({
   currentPage: 0,
   limit: 0,
   total: 0,
-  pagesizeList: [],
-  hasLodingData: 0
+  pagesizeList: []
 })
 
 // 请求配置

src/components/dataAnalysis/HeaderCard.vue

@@ -11,7 +11,10 @@ import DropDownSelection from './DropDownSelection.vue'
 import type { DropDownInfo, HeaderCardProps } from '@/types/dataAnalysis'
 import { onMounted, ref } from 'vue'
 
-const props = defineProps<HeaderCardProps>()
+const props = withDefaults(defineProps<HeaderCardProps>(), {
+  openDateSelect: false,
+  defaultPf: 'web'
+})
 
 const emits = defineEmits(['changePf', 'changeDate'])
 

src/components/echarts/TimeLineChart.vue

@@ -164,7 +164,6 @@ const changeLoading = (state: boolean) => {
 watch(
   () => [props.legendData, props.seriesData, props.xAxisData],
   () => {
-    console.log(props.seriesData)
     initOptions()
   },
   { deep: true }

src/hooks/useRequest.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 17:24:06
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-02 15:38:34
+ * @LastEditTime: 2024-09-03 14:09:03
  * @FilePath: \Game-Backstage-Management-System\src\hooks\useRequest.ts
  * @Description:
  *
@@ -21,7 +21,7 @@ export function useRequest() {
 
   const AllApi = {
     // mock: `http://127.0.0.1:8003/mock`,
-    // mockKeep: `http://127.0.0.1:8003/mockKeep`,
+    mockEvent: `http://127.0.0.1:8003/mockEvent`,
 
     getGameTable: `${baseIp}/user/getGidConfig`, // 获取游戏列表
     getUserTable: `${baseIp}/user/userList`, // 获取用户列表

src/router/appManage.ts

@@ -0,0 +1,53 @@
+/*
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-08-20 14:24:58
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-09-03 18:13:36
+ * @FilePath: \Game-Backstage-Management-System\src\router\appManage.ts
+ * @Description:
+ *
+ */
+
+export default [
+  {
+    path: '/appManage',
+    redirect: '/appManage/gameBaseInfo',
+    name: 'AppManage',
+    children: [
+      {
+        path: 'gameBaseInfo',
+        name: 'GameBaseInfo',
+        icon: 'Memo',
+        cnName: '基本信息',
+        component: () => import('@/views/AppManage/BaseInfoView.vue'),
+        meta: {
+          needKeepAlive: true
+        }
+      },
+      {
+        path: 'eventManage',
+        name: 'EventManage',
+        icon: 'Management',
+        cnName: '事件管理',
+        showChild: false,
+        component: () => import('@/views/AppManage/EventManageView.vue'),
+        redirect: '/appManage/eventManage/eventTable',
+        meta: {
+          needKeepAlive: false
+        },
+        children: [
+          {
+            path: 'eventDetail/:eventID?', // 注意：这里没有使用动态参数，而是使用查询参数
+            name: 'EventDetail',
+            component: () => import('@/views/AppManage/EventDetailsView.vue')
+          },
+          {
+            path: 'eventTable',
+            name: 'EventTable',
+            component: () => import('@/views/AppManage/EventMangeTable.vue')
+          }
+        ]
+      }
+    ]
+  }
+]

src/router/home.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 14:24:58
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-08-31 09:49:26
+ * @LastEditTime: 2024-09-03 18:11:37
  * @FilePath: \Game-Backstage-Management-System\src\router\home.ts
  * @Description:
  *
@@ -11,51 +11,70 @@
 export default [
   {
     path: '/home',
-    component: () => import('@/views/Home/HomeView.vue'),
+    redirect: '/home/overView',
+    name: 'Home',
     children: [
       {
-        path: '',
-        redirect: 'overView'
-      },
-      {
         path: 'overView',
         name: 'OverView',
+        icon: 'PieChart',
+        cnName: '数据总览',
         component: () => import('@/views/Home/Overview/OverView.vue'),
         meta: {
           needKeepAlive: true
         }
       },
       {
-        path: 'playerManageView',
-        name: 'PlayerManageView',
-        component: () => import('@/views/Home/InfoManage/PlayerManageView.vue'),
-        meta: {
-          needKeepAlive: true
-        }
-      },
-      {
-        path: 'gameManageView',
-        name: 'GameManageView',
-        component: () => import('@/views/Home/InfoManage/GameManageView.vue'),
-        meta: {
-          needKeepAlive: true
-        }
-      },
-      {
-        path: 'keepView',
-        name: 'KeepView',
-        component: () => import('@/views/Home/Analysis/KeepView.vue'),
-        meta: {
-          needKeepAlive: true
-        }
+        path: 'infoManage',
+        cnName: '信息管理',
+        icon: 'Histogram',
+        showChild: true,
+        children: [
+          {
+            path: 'gameManageView',
+            name: 'GameManageView',
+            cnName: '游戏管理',
+            component: () => import('@/views/Home/InfoManage/GameManageView.vue'),
+            meta: {
+              needKeepAlive: true
+            }
+          },
+          {
+            path: 'playerManageView',
+            name: 'PlayerManageView',
+            cnName: '玩家管理',
+            component: () => import('@/views/Home/InfoManage/PlayerManageView.vue'),
+            meta: {
+              needKeepAlive: true
+            }
+          }
+        ]
       },
       {
-        path: 'userTrendView',
-        name: 'UserTrendView',
-        component: () => import('@/views/Home/Analysis/UserTrendView.vue'),
-        meta: {
-          needKeepAlive: true
-        }
+        path: 'infoManage',
+        cnName: '数据分析',
+        icon: 'DataAnalysis',
+        showChild: true,
+        children: [
+          {
+            path: 'keepView',
+            name: 'KeepView',
+            cnName: '留存分析',
+            component: () => import('@/views/Home/Analysis/KeepView.vue'),
+            meta: {
+              needKeepAlive: true
+            }
+          },
+          {
+            path: 'userTrendView',
+            name: 'UserTrendView',
+            cnName: '用户趋势',
+            component: () => import('@/views/Home/Analysis/UserTrendView.vue'),
+            meta: {
+              needKeepAlive: true
+            }
+          }
+        ]
       }
     ]
   }

src/router/index.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 14:06:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-08-31 15:55:29
+ * @LastEditTime: 2024-09-03 16:29:30
  * @FilePath: \Game-Backstage-Management-System\src\router\index.ts
  * @Description:
  *
@@ -13,17 +13,15 @@ import { authToken } from '@/utils/axios/auth'
 
 import HomeRoutes from './home'
 import LoginRoutes from './login'
+import AppManage from './appManage'
 
 const routes = [
   ...HomeRoutes,
   ...LoginRoutes,
+  ...AppManage,
   {
     path: '/',
     redirect: '/home/overView'
-  },
-  {
-    path: '/:pathMach(.*)',
-    redirect: '/'
   }
 ]
 

src/types/dataAnalysis.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-23 14:58:29
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-02 15:23:17
+ * @LastEditTime: 2024-09-03 11:27:57
  * @FilePath: \Game-Backstage-Management-System\src\types\dataAnalysis.ts
  * @Description:用于dataAnalysis相关组件的type
  *
@@ -106,7 +106,7 @@ export interface TemporalTrendProps {
 export interface HeaderCardProps {
   title: string // title信息
   defaultPf?: string // 默认选择的pf
-  openDateSelect: boolean // 是否开启时间选择
+  openDateSelect?: boolean // 是否开启时间选择
 }
 
 // 趋势图组件需要的信息

src/types/table.ts

@@ -1,3 +1,12 @@
+/*
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-08-20 17:56:13
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-09-03 14:11:05
+ * @FilePath: \Game-Backstage-Management-System\src\types\table.ts
+ * @Description:
+ *
+ */
 import type { ReqConfig } from './dataAnalysis'
 // 颜色类型
 export enum ColorType {
@@ -23,7 +32,6 @@ export interface TablePaginationSetting {
   currentPage: number // 当前页码
   total: number // 数据总数
   pagesizeList: Array<number> // 页数大小列表
-  hasLodingData: number // 已经加载的数据
 }
 
 // 表格信息过滤时，需要用到的过滤类型

src/utils/common/index.ts

@@ -2,11 +2,14 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-26 15:46:42
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-08-30 15:45:41
+ * @LastEditTime: 2024-09-03 12:31:19
  * @FilePath: \Game-Backstage-Management-System\src\utils\common\index.ts
  * @Description:
  *
  */
+
+import { ElMessage } from 'element-plus'
+
 // 防抖
 export function debounceFunc<T extends (...args: any[]) => any>(
   func: T,
@@ -81,3 +84,30 @@ export function resetTimeToMidnight(dateTime: Date): string {
 export const getAssetsImageUrl = (url: string) => {
   return new URL(`../../assets/${url}`, import.meta.url).href
 }
+
+/**
+ * @description: 复制文字到剪贴板
+ * @param {string} text
+ * @return {*}
+ */
+export const copyText = (text: string) => {
+  return new Promise((reslove, reject) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        ElMessage({
+          type: 'success',
+          message: '复制成功'
+        })
+        reslove(true)
+      })
+      .catch((err) => {
+        ElMessage({
+          type: 'error',
+          message: '复制失败'
+        })
+        reject(err)
+        throw new Error(err)
+      })
+  })
+}

src/views/AppManage/BaseInfoView.vue

@@ -1,7 +1,161 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import HeaderCard from '@/components/dataAnalysis/HeaderCard.vue'
+import { reactive, onMounted, ref } from 'vue'
+import { initLoadResouce } from '@/utils/resource'
+import { copyText } from '@/utils/common'
+
+interface AppInfo {
+  name: string
+  pf: string
+  appType: string
+  createDate: string
+  AppletsID: string
+  AppID: string
+  img: string
+}
+
+// 返回的APP信息
+const appInfo = reactive<AppInfo>({
+  img: '/img/default/defaultGameImg.svg',
+  name: '消消乐',
+  pf: '微信',
+  appType: '游戏娱乐',
+  createDate: '2024-1-1',
+  AppletsID: 'ASJDFJAHSJDF',
+  AppID: 'A12312312412JAHSJDF'
+})
+
+// 信息对应的字段
+const fieldsInfo = {
+  name: '应用名称',
+  pf: '应用平台',
+  appType: '游戏平台',
+  createDate: '创建日期',
+  AppletsID: '小程序ID',
+  AppID: 'App ID'
+}
+
+// 资源的加载路径
+const resourceInfo: Record<string, string> = {
+  defaultHead: `/img/default/defaultHead.png`
+}
+
+// 使用blob的资源路径信息
+const blobUrlInfo = reactive<Record<string, string>>({})
+
+const AppID = ref<Array<HTMLSpanElement> | null>(null)
+
+const copyAppID = () => {
+  copyText(appInfo.AppID).then(() => {
+    if (AppID.value) {
+      const range = document.createRange()
+      range.selectNodeContents(AppID.value[0])
+
+      const selection = window.getSelection()
+      if (selection) {
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  // 去加载所有需要的资源
+  initLoadResouce(resourceInfo).then((data) => {
+    Object.assign(blobUrlInfo, data)
+  })
+})
+</script>
 
 <template>
-  <div></div>
+  <div class="baseInfo">
+    <HeaderCard :title="'基本信息'"></HeaderCard>
+    <div class="body">
+      <div class="info">
+        <div class="infoItem" v-for="[key, val] in Object.entries(fieldsInfo)">
+          <span class="itmeTitle">{{ val }}</span>
+          <span class="text" :ref="key">{{ appInfo[key as keyof AppInfo] }}</span>
+          <span class="copy" v-if="key === 'AppID'" @click="copyAppID">复制</span>
+        </div>
+      </div>
+      <div class="photo">
+        <el-image :src="appInfo.img">
+          <template #error>
+            <el-image class="headPortrait" :src="blobUrlInfo.defaultHead"></el-image>
+          </template>
+        </el-image>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.baseInfo {
+  width: 98%;
+  margin: 1% auto;
+
+  box-sizing: border-box;
+}
+
+.body {
+  box-sizing: border-box;
+  margin-top: 15px;
+  /* padding: 0 24px; */
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+.info {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 40px 40px 40px 144px;
+  background: #fff;
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.02),
+    0 1px 3px 0 rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+  position: relative;
+}
+
+.photo {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  border-radius: 16px;
+  width: 64px;
+  height: 64px;
+}
+
+.infoItem {
+  margin-bottom: 15px;
+}
+
+.itmeTitle {
+  display: inline-block;
+  width: 80px;
+  text-align: left;
+  padding-right: 0;
+  font-size: 14px;
+  color: #808695;
+  line-height: 2px;
+}
+
+.text {
+  font-weight: 600;
+  color: #1c2438;
+  font-size: 14px;
+  margin-left: 106px;
+  line-height: 20px;
+}
+
+.copy {
+  margin-left: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #2285f0;
+  cursor: pointer;
+}
+</style>

src/views/AppManage/EventDetailsView.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import HeaderCard from '@/components/dataAnalysis/HeaderCard.vue'
+import { reactive, onMounted, ref } from 'vue'
+import { initLoadResouce } from '@/utils/resource'
+import { copyText } from '@/utils/common'
+import { useRoute } from 'vue-router'
+
+onMounted(() => {
+  const route = useRoute()
+  let query = route.query
+  console.log(query)
+})
+</script>
+
+<template>
+  <div class="eventDetail">okok</div>
+</template>
+
+<style scoped>
+.eventDetail {
+  width: 98%;
+  margin: 1% auto;
+
+  box-sizing: border-box;
+}
+</style>

src/views/AppManage/EventManageView.vue

@@ -1,7 +1,167 @@
-<script setup lang="ts"></script>
+<!--
+ * @Author: fxs bjnsfxs@163.com
+ * @Date: 2024-09-02 17:57:15
+ * @LastEditors: fxs bjnsfxs@163.com
+ * @LastEditTime: 2024-09-03 15:53:46
+ * @FilePath: \Game-Backstage-Management-System\src\views\AppManage\EventManageView.vue
+ * @Description: 
+ * 
+-->
+<script setup lang="ts">
+import HeaderCard from '@/components/dataAnalysis/HeaderCard.vue'
+import Table from '@/components/Table.vue'
+import { useRequest } from '@/hooks/useRequest'
+
+import type { TablePaginationSetting, TableFieldInfo } from '@/types/table'
+import type { ReqConfig } from '@/types/dataAnalysis'
+
+import { reactive, onMounted, ref, computed } from 'vue'
+import { initLoadResouce } from '@/utils/resource'
+import { copyText } from '@/utils/common'
+import router from '@/router'
+import { useRoute } from 'vue-router'
+
+const { AllApi } = useRequest()
+
+// 表格分页设置
+const pagingConfig = reactive<TablePaginationSetting>({
+  limit: 15,
+  currentPage: 1,
+  total: 0,
+  pagesizeList: [15, 30]
+})
+
+// 表格字段信息
+const tableFieldsInfo = reactive<Array<TableFieldInfo>>([
+  {
+    name: 'eventID',
+    cnName: '事件ID',
+    isShow: true
+  },
+  {
+    name: 'eventDisplayName',
+    cnName: '事件显示名',
+    isShow: true
+  },
+  {
+    name: 'displayStatus',
+    cnName: '显示状态',
+    isShow: true
+  },
+  {
+    name: 'useStatus',
+    cnName: '使用状态',
+    isShow: true
+  },
+  {
+    name: 'usageStatus',
+    cnName: '用量状态',
+    isShow: true
+  },
+  {
+    name: 'platform',
+    cnName: '平台',
+    isShow: true
+  },
+  {
+    name: 'creationTime',
+    cnName: '创建时间',
+    isShow: true
+  }
+])
+
+// 表格请求配置
+const requestConfig = reactive<ReqConfig>({
+  url: AllApi.mockEvent,
+  otherOptions: {}
+})
+
+const breadcrumbList = reactive<Array<string>>([])
+
+// 是否可点击
+const breadcrumbCanClick = computed(() => breadcrumbList.length > 0)
+
+// 返回总览
+const goBack = () => {
+  router.push('/appManage/EventManage')
+}
+
+const viewDetails = (row: any) => {
+  router.push({
+    name: 'EventDetail',
+    query: {
+      eventID: row.eventID
+    }
+  })
+}
+
+onMounted(() => {})
+</script>
 
 <template>
-  <div></div>
+  <div class="enventManage">
+    <div class="breadcrumbBox">
+      <span
+        :class="['breadcrumbItem', breadcrumbCanClick ? 'noActived' : 'actived']"
+        @click="goBack"
+      >
+        事件管理
+      </span>
+      <span class="breadcrumbItem itemActived" v-for="item in breadcrumbList">
+        <span class="separator">/</span> {{ item }}
+      </span>
+    </div>
+    <div class="eventTableBox">
+      <router-view></router-view>
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.enventManage {
+  width: 98%;
+  margin: 1% auto;
+
+  box-sizing: border-box;
+}
+
+.breadcrumbBox {
+  height: 64px;
+  font-size: 16px;
+  color: #17233d;
+  font-weight: 600;
+  line-height: 64px;
+  padding: 0 24px;
+}
+
+.separator {
+  color: rgba(23, 35, 61, 0.55);
+}
+
+.itemActived {
+  font-size: 16px;
+  color: rgb(23, 35, 61);
+  font-weight: 500;
+}
+
+.actived {
+  font-size: 16px;
+  color: #17233d !important;
+  font-weight: 600;
+  line-height: 64px;
+  cursor: auto;
+}
+
+.noActived {
+  line-height: 64px;
+  font-size: 16px;
+  color: rgba(23, 35, 61, 0.55);
+  cursor: pointer;
+}
+
+.breadcrumbItem {
+  line-height: 64px;
+  font-size: 16px;
+  color: rgba(23, 35, 61, 0.55);
+}
+</style>

src/views/AppManage/EventMangeTable.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import Table from '@/components/Table.vue'
+import { useRequest } from '@/hooks/useRequest'
+
+import type { TablePaginationSetting, TableFieldInfo } from '@/types/table'
+import type { ReqConfig } from '@/types/dataAnalysis'
+
+import { reactive, onMounted } from 'vue'
+
+import router from '@/router'
+
+const { AllApi } = useRequest()
+
+// 表格分页设置
+const pagingConfig = reactive<TablePaginationSetting>({
+  limit: 15,
+  currentPage: 1,
+  total: 0,
+  pagesizeList: [15, 30]
+})
+
+// 表格字段信息
+const tableFieldsInfo = reactive<Array<TableFieldInfo>>([
+  {
+    name: 'eventID',
+    cnName: '事件ID',
+    isShow: true
+  },
+  {
+    name: 'eventDisplayName',
+    cnName: '事件显示名',
+    isShow: true
+  },
+  {
+    name: 'displayStatus',
+    cnName: '显示状态',
+    isShow: true
+  },
+  {
+    name: 'useStatus',
+    cnName: '使用状态',
+    isShow: true
+  },
+  {
+    name: 'usageStatus',
+    cnName: '用量状态',
+    isShow: true
+  },
+  {
+    name: 'platform',
+    cnName: '平台',
+    isShow: true
+  },
+  {
+    name: 'creationTime',
+    cnName: '创建时间',
+    isShow: true
+  }
+])
+
+// 表格请求配置
+const requestConfig = reactive<ReqConfig>({
+  url: AllApi.mockEvent,
+  otherOptions: {}
+})
+
+const viewDetails = (row: any) => {
+  router.push({
+    name: 'EventDetail',
+    query: {
+      eventID: row.eventID
+    }
+  })
+}
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div>
+    <Table
+      :need-rowindex="false"
+      :request-config="requestConfig"
+      :pagination-config="pagingConfig"
+      :table-fields-info="tableFieldsInfo"
+    >
+      <template #tableOperation>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              size="small"
+              type="primary"
+              @click="viewDetails(scope.row)"
+              class="operationBtn"
+            >
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </Table>
+  </div>
+</template>
+
+<style scoped></style>

src/views/Home/HomeView.vue

@@ -1,452 +0,0 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-import { onMounted, reactive, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { getAllGameInfo } from '@/utils/table/table'
-import router from '@/router'
-import type { DropDownInfo } from '@/types/dataAnalysis'
-import DropDownSelection from '@/components/dataAnalysis/DropDownSelection.vue'
-import { useCommonStore } from '@/stores/useCommon'
-import { initLoadResouce } from '@/utils/resource'
-
-const { selectInfo } = useCommonStore()
-const isCollapse = ref(false)
-const navBarSelect = ref<string>('appAnalyse')
-const menuList = [
-  {
-    title: '数据总览',
-    icon: 'PieChart',
-    children: [
-      {
-        pathName: 'OverView',
-        title: '工作台'
-      }
-    ]
-  },
-  {
-    title: '信息管理',
-    icon: 'Histogram',
-    children: [
-      {
-        pathName: 'GameManageView',
-        title: '游戏管理'
-      },
-      {
-        pathName: 'PlayerManageView',
-        title: '玩家管理'
-      }
-    ]
-  },
-  {
-    title: '数据分析',
-    icon: 'DataAnalysis',
-    children: [
-      {
-        pathName: 'KeepView',
-        title: '留存分析'
-      },
-      {
-        pathName: 'UserTrendView',
-        title: '用户趋势'
-      }
-    ]
-  }
-]
-
-const menuInfo: Record<string, Array<any>> = {
-  appAnalyse: [
-    {
-      title: '数据总览',
-      icon: 'PieChart',
-      children: [
-        {
-          pathName: 'OverView',
-          title: '工作台'
-        }
-      ]
-    },
-    {
-      title: '信息管理',
-      icon: 'Histogram',
-      children: [
-        {
-          pathName: 'GameManageView',
-          title: '游戏管理'
-        },
-        {
-          pathName: 'PlayerManageView',
-          title: '玩家管理'
-        }
-      ]
-    },
-    {
-      title: '数据分析',
-      icon: 'DataAnalysis',
-      children: [
-        {
-          pathName: 'KeepView',
-          title: '留存分析'
-        },
-        {
-          pathName: 'UserTrendView',
-          title: '用户趋势'
-        }
-      ]
-    }
-  ],
-  appManage: [
-    {
-      title: '基本信息',
-      icon: 'PieChart',
-      pathName: 'GameBaseInfo'
-    },
-    {
-      title: '事件管理',
-      icon: 'PieChart',
-      pathName: 'EventManage'
-    }
-  ]
-}
-
-const navBarMenuList = [
-  {
-    name: 'appAnalyse',
-    title: '应用分析'
-  },
-
-  {
-    name: 'appManage',
-    title: '应用管理'
-  }
-]
-
-const changeCollapse = () => {
-  isCollapse.value = !isCollapse.value
-}
-
-// 登出
-const logOut = () => {
-  ElMessage({
-    type: 'success',
-    message: '退出成功',
-    duration: 1000
-  })
-  localStorage.removeItem('token')
-  localStorage.removeItem('refreshToken')
-  router.push('/login')
-}
-
-// 游戏下拉选择框需要的数据
-const gameSelectInfo = reactive<DropDownInfo>({
-  defaultSelect: '1001',
-  title: '请选择游戏',
-  optionsList: []
-})
-
-// 游戏信息是否加载成功
-const gameinfoLoad = ref(false)
-
-/**
- * @description: 更新整个页面的游戏选择
- * @param {*} gid 游戏id
- * @return {*}
- */
-const changeGame = (gid: any) => {
-  selectInfo.gid = gid
-}
-
-const changeNavBar = (val: string) => {
-  navBarSelect.value = val
-}
-
-getAllGameInfo().then((data) => {
-  if (data) {
-    data.map((item) => {
-      gameSelectInfo.optionsList.push({
-        value: item.gid,
-        label: item.gameName
-      })
-    })
-  }
-  gameinfoLoad.value = true
-})
-
-// 资源的加载路径
-const resourceInfo: Record<string, string> = {
-  logo: `/img/logo.svg`,
-  defaultHead: `/img/default/defaultHead.png`
-}
-
-// 使用blob的资源路径信息
-const blobUrlInfo = reactive<Record<string, string>>({})
-
-onMounted(() => {
-  // 去加载所有需要的资源
-  initLoadResouce(resourceInfo).then((data) => {
-    Object.assign(blobUrlInfo, data)
-  })
-})
-</script>
-
-<template>
-  <div class="body">
-    <div class="navBarBox">
-      <div class="logoBox">
-        <el-image :fit="'fill'" class="logoImg" :src="blobUrlInfo.logo"></el-image>
-        <span>淳皓科技</span>
-      </div>
-      <div class="gameSelect">
-        <el-icon class="gameIcon" :size="20">
-          <icon-icon-park-game-three></icon-icon-park-game-three>
-        </el-icon>
-        <DropDownSelection
-          :default-select="gameSelectInfo.defaultSelect"
-          :title="gameSelectInfo.title"
-          :options-list="gameSelectInfo.optionsList"
-          :size="'default'"
-          @change-select="changeGame"
-        ></DropDownSelection>
-      </div>
-      <div class="navBarMenu">
-        <el-menu
-          :default-active="navBarSelect"
-          class="el-menu-demo"
-          mode="horizontal"
-          @select="changeNavBar"
-        >
-          <el-menu-item v-for="item in navBarMenuList" class="navBarMenuItem" :index="item.name">{{
-            item.title
-          }}</el-menu-item>
-        </el-menu>
-      </div>
-      <div class="headPortraitBox">
-        <el-popover popper-class="headPopper" placement="bottom-end" trigger="click">
-          <template #reference>
-            <el-image class="headPortrait" :src="blobUrlInfo.defaultHead"></el-image>
-          </template>
-          <div class="userTools">
-            <span class="userToolsItem" @click="logOut">
-              <icon-material-symbols-light-logout></icon-material-symbols-light-logout>
-              <span> 退出登录</span>
-            </span>
-          </div>
-        </el-popover>
-      </div>
-    </div>
-
-    <div class="sideBarBox">
-      <el-menu :router="true" :default-active="$route.name" class="sideBar" :collapse="isCollapse">
-        <el-sub-menu v-for="item in menuInfo[navBarSelect]" :index="item.title">
-          <template #title>
-            <el-icon><component :is="item.icon" /></el-icon>
-            <span class="menuTitle">{{ item.title }}</span>
-          </template>
-          <span v-if="item.children">
-            <el-menu-item v-for="v in item.children" :index="v.pathName">{{
-              v.title
-            }}</el-menu-item>
-          </span>
-          <span v-else>
-            <el-menu-item :index="item.pathName">{{ item.title }}</el-menu-item>
-          </span>
-        </el-sub-menu>
-        <div class="sideBarFold" @click="changeCollapse">
-          <el-icon :size="25"><Fold /></el-icon>
-        </div>
-      </el-menu>
-    </div>
-
-    <!-- <div class="content">
-      <RouterView v-if="gameinfoLoad" />
-    </div> -->
-    <div class="content">
-      <router-view v-slot="{ Component, route }">
-        <keep-alive>
-          <component
-            :is="Component"
-            :key="route.path"
-            v-if="route.meta.needKeepAlive == true"
-          ></component>
-        </keep-alive>
-        <component
-          :is="Component"
-          :key="route.path"
-          v-if="route.meta.needKeepAlive == false"
-        ></component>
-      </router-view>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.body {
-  width: 100%;
-  display: flex;
-  height: 100vh;
-}
-
-/* 设置宽度后，content无法适应宽度，只能去间接的调整内部元素的宽度 */
-.sideBarBox {
-  position: relative;
-  /* width: 12%; */
-  z-index: 1;
-  margin-top: 7vh;
-  height: 93vh;
-  top: 0;
-}
-
-.sideBar {
-  /* width: 12vw; */
-  height: 100vh;
-  position: relative;
-  overflow: scroll;
-}
-
-/* 设置弹出层的样式 */
-.el-popper > .logoText {
-  width: 100px;
-  font-size: 16px;
-  /* color: red; */
-}
-
-.logoImg {
-  display: flex;
-  align-items: center;
-  width: 33px;
-  /* margin-right: 20px; */
-  /* height: 50px; */
-}
-
-.logoText {
-  width: 80%;
-  height: 100%;
-  margin-left: 15%;
-  display: flex;
-  font-size: 18px;
-  align-items: center;
-  /* background-color: lightcoral; */
-}
-
-/* 主要用来调整整个menu的宽度 */
-.menuTitle {
-  margin-right: 40px;
-}
-
-.sideBarFold {
-  width: 5%;
-  height: 3%;
-  position: absolute;
-  right: 40px;
-  bottom: 20px;
-}
-
-.navBarBox {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  width: 100vw;
-  z-index: 2;
-  height: 7vh;
-  top: 0;
-  background-color: white;
-  right: 0;
-  border-bottom: 1px solid gainsboro;
-}
-
-/* 调整LOGO */
-.logoBox {
-  box-sizing: border-box;
-  left: 30px;
-  position: relative;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.gameSelect {
-  position: relative;
-
-  height: 80%;
-  display: flex;
-  align-items: center;
-  left: 5%;
-  display: flex;
-  align-items: center;
-}
-
-.gameIcon {
-  /* box-sizing: border-box; */
-  /* padding-right: 12px; */
-  margin-right: 12px;
-}
-
-.navBarMenu {
-  width: 60%;
-  position: relative;
-  left: 6%;
-}
-
-.headPortraitBox {
-  position: absolute;
-  right: 3%;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.userTools {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.userToolsItem {
-  cursor: pointer;
-  width: 100%;
-  height: 4vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* padding: 10px; */
-  margin: 2%;
-}
-
-.userToolsItem > span {
-  margin-left: 10%;
-}
-
-.userToolsItem:hover {
-  background-color: #f2f3f5;
-}
-
-.headPortrait {
-  cursor: pointer;
-  width: 50px;
-}
-
-.content {
-  /* flex-grow: 1; */
-  /* position: absolute; */
-
-  width: 100%;
-  /* height: 93%; */
-  margin-top: 7vh;
-  overflow: scroll;
-  background-color: #f2f3f5;
-  right: 0vw;
-  top: 0vh;
-}
-</style>
-
-<!-- 为了让popper-class生效，需要的单独写一份 -->
-<style>
-.headPopper {
-  padding: 0px !important;
-  border: 1px solid #e5e6eb;
-
-  background-color: white;
-}
-</style>

src/views/Home/InfoManage/GameManageView.vue

@@ -40,9 +40,7 @@ const paginationConfig: TablePaginationSetting = {
   limit: 15, // 每页展示个数
   currentPage: 1, // 当前页码
   total: 0, // 数据总数
-  pagesizeList: [15, 30], // 页数大小列表
-
-  hasLodingData: 0 // 已经加载的数据
+  pagesizeList: [15, 30] // 页数大小列表
 }
 
 // 字段信息

src/views/Home/InfoManage/PlayerManageView.vue

@@ -48,9 +48,7 @@ const paginationConfig: TablePaginationSetting = {
   limit: 15, // 每页展示个数
   currentPage: 1, // 当前页码
   total: 0, // 数据总数
-  pagesizeList: [15, 30], // 页数大小列表
-
-  hasLodingData: 0 // 已经加载的数据
+  pagesizeList: [15, 30] // 页数大小列表
 }
 
 // 配置请求参数