测试

src/components/dataAnalysis/DropDownSelection.vue

@@ -26,7 +26,7 @@ const changeSelect = (val: any) => {
 </script>
 
 <template>
-  <div style="width: 150px; margin-right: 30px">
+  <div style="width: 150px">
     <el-select
       style="width: 100%"
       @change="changeSelect"

src/views/AppManage/BaseInfoView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

src/views/AppManage/EventManageView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>

src/views/Home/HomeView.vue

@@ -11,6 +11,7 @@ import { initLoadResouce } from '@/utils/resource'
 
 const { selectInfo } = useCommonStore()
 const isCollapse = ref(false)
+const navBarSelect = ref<string>('appAnalyse')
 const menuList = [
   {
     title: '数据总览',
@@ -52,6 +53,73 @@ const menuList = [
   }
 ]
 
+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
 }
@@ -75,6 +143,7 @@ const gameSelectInfo = reactive<DropDownInfo>({
   optionsList: []
 })
 
+// 游戏信息是否加载成功
 const gameinfoLoad = ref(false)
 
 /**
@@ -86,6 +155,10 @@ const changeGame = (gid: any) => {
   selectInfo.gid = gid
 }
 
+const changeNavBar = (val: string) => {
+  navBarSelect.value = val
+}
+
 getAllGameInfo().then((data) => {
   if (data) {
     data.map((item) => {
@@ -117,25 +190,11 @@ onMounted(() => {
 
 <template>
   <div class="body">
-    <div class="sideBarBox">
-      <el-menu :router="true" :default-active="$route.name" class="sideBar" :collapse="isCollapse">
-        <el-menu-item index="/" class="logoBox">
-          <el-image :fit="'fill'" class="logoImg" :src="blobUrlInfo.logo"></el-image>
-          <template #title><span class="logoText">淳皓科技</span></template>
-        </el-menu-item>
-        <el-sub-menu v-for="item in menuList" :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>
-        <div class="sideBarFold" @click="changeCollapse">
-          <el-icon :size="25"><Fold /></el-icon>
-        </div>
-      </el-menu>
-    </div>
     <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>
@@ -148,6 +207,18 @@ onMounted(() => {
           @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>
@@ -162,6 +233,28 @@ onMounted(() => {
         </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> -->
@@ -191,32 +284,13 @@ onMounted(() => {
   height: 100vh;
 }
 
-.gameSelect {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  /* width: 10%; */
-  height: 80%;
-  display: flex;
-  align-items: center;
-  right: 10%;
-  display: flex;
-  align-items: center;
-
-  /* background-color: lightblue; */
-}
-.gameIcon {
-  /* box-sizing: border-box; */
-  /* padding-right: 12px; */
-  margin-right: 12px;
-}
-
 /* 设置宽度后，content无法适应宽度，只能去间接的调整内部元素的宽度 */
 .sideBarBox {
   position: relative;
   /* width: 12%; */
-  z-index: 2;
-  height: 100vh;
+  z-index: 1;
+  margin-top: 7vh;
+  height: 93vh;
   top: 0;
 }
 
@@ -234,13 +308,6 @@ onMounted(() => {
   /* color: red; */
 }
 
-/* 调整LOGO */
-.logoBox {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .logoImg {
   display: flex;
   align-items: center;
@@ -274,8 +341,10 @@ onMounted(() => {
 
 .navBarBox {
   position: fixed;
+  display: flex;
+  align-items: center;
   width: 100vw;
-  z-index: 1;
+  z-index: 2;
   height: 7vh;
   top: 0;
   background-color: white;
@@ -283,6 +352,40 @@ onMounted(() => {
   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%;

src/views/Login/LoginView.vue

@@ -97,6 +97,7 @@ const resourceInfo: Record<string, string> = {
 const blobUrlInfo = reactive<Record<string, string>>({})
 
 onMounted(() => {
+  console.log('tt')
   // 去加载所有需要的资源
   initLoadResouce(resourceInfo).then((data) => {
     Object.assign(blobUrlInfo, data)

vite.config.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 14:06:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-02 16:27:01
+ * @LastEditTime: 2024-09-02 16:34:08
  * @FilePath: \Game-Backstage-Management-System\vite.config.ts
  * @Description:
  *
@@ -88,59 +88,64 @@ const DEFAULT_OPTIONS = {
   cacheLocation: undefined
 }
 
-export default defineConfig({
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          echarts: ['echarts']
-        },
-        chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
-        entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
-        assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
+export default defineConfig(({ mode }) => {
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            echarts: ['echarts']
+          },
+          chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
+          entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
+          assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
+        }
+      },
+      terserOptions: {
+        compress: {
+          drop_console: true,
+          drop_debugger: true
+        }
+      },
+      esbuild: {
+        drop: mode === 'production' ? ['console', 'debugger'] : []
       }
     },
-    terserOptions: {
-      compress: {
-        drop_console: true,
-        drop_debugger: true
-      }
-    }
-  },
 
-  esbuild: {
-    drop: ['console', 'debugger']
-  },
-  plugins: [
-    vue(),
-    ViteImageOptimizer(DEFAULT_OPTIONS),
-    viteCompression({
-      verbose: true, // 默认即可
-      disable: false, // 开启压缩(不禁用)，默认即可
-      deleteOriginFile: false, // 删除源文件
-      threshold: 5120, // 压缩前最小文件大小
-      algorithm: 'gzip', // 压缩算法
-      ext: '.gz' // 文件类型
-    }),
-    visualizer({ open: true }),
-    AutoImport({
-      resolvers: [ElementPlusResolver()]
-    }),
-    Components({
-      resolvers: [
-        ElementPlusResolver(),
-        IconsResolver({
-          prefix: 'icon'
-        })
-      ]
-    }),
-    Icons({
-      autoInstall: true
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+    esbuild: {
+      drop: ['console', 'debugger']
+    },
+    plugins: [
+      vue(),
+      ViteImageOptimizer(DEFAULT_OPTIONS),
+      viteCompression({
+        verbose: true, // 默认即可
+        disable: false, // 开启压缩(不禁用)，默认即可
+        deleteOriginFile: false, // 删除源文件
+        threshold: 5120, // 压缩前最小文件大小
+        algorithm: 'gzip', // 压缩算法
+        ext: '.gz' // 文件类型
+      }),
+      visualizer({ open: true }),
+      AutoImport({
+        resolvers: [ElementPlusResolver()]
+      }),
+      Components({
+        resolvers: [
+          ElementPlusResolver(),
+          IconsResolver({
+            prefix: 'icon'
+          })
+        ]
+      }),
+      Icons({
+        autoInstall: true
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
     }
   }
 })