分包拆开

package.json

@@ -26,6 +26,7 @@
     "ant-design-vue": "3.3.0-beta.3",
     "axios": "^0.27.2",
     "dayjs": "^1.11.6",
+    "echarts": "^5.4.1",
     "less": "^4.1.3",
     "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
@@ -34,7 +35,8 @@
     "sass": "^1.54.9",
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.2",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vue3-autocounter": "^1.0.6"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",
@@ -55,6 +57,7 @@
     "unplugin-vue-components": "^0.22.7",
     "unplugin-vue-define-options": "^0.11.2",
     "vite": "^3.1.0",
+    "vite-plugin-chunk-split": "^0.4.7",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^0.40.4"
   }

pnpm-lock.yaml

@@ -11,6 +11,7 @@ specifiers:
   axios: ^0.27.2
   chalk: ^5.0.1
   dayjs: ^1.11.6
+  echarts: ^5.4.1
   eslint: ^8.23.1
   eslint-config-prettier: ^8.5.0
   eslint-plugin-prettier: ^4.2.1
@@ -30,11 +31,13 @@ specifiers:
   unplugin-vue-components: ^0.22.7
   unplugin-vue-define-options: ^0.11.2
   vite: ^3.1.0
+  vite-plugin-chunk-split: ^0.4.7
   vue: ^3.2.37
   vue-eslint-parser: ^9.1.0
   vue-i18n: ^9.2.2
   vue-router: '4'
   vue-tsc: ^0.40.4
+  vue3-autocounter: ^1.0.6
 
 dependencies:
   '@ant-design/icons-vue': 6.1.0_vue@3.2.41
@@ -42,6 +45,7 @@ dependencies:
   ant-design-vue: 3.3.0-beta.3_vue@3.2.41
   axios: 0.27.2
   dayjs: 1.11.6
+  echarts: 5.4.1
   less: 4.1.3
   lodash-es: 4.17.21
   normalize.css: 8.0.1
@@ -51,6 +55,7 @@ dependencies:
   vue: 3.2.41
   vue-i18n: 9.2.2_vue@3.2.41
   vue-router: 4.1.6_vue@3.2.41
+  vue3-autocounter: 1.0.6_vue@3.2.41
 
 devDependencies:
   '@types/lodash-es': 4.17.6
@@ -71,6 +76,7 @@ devDependencies:
   unplugin-vue-components: 0.22.9_vue@3.2.41
   unplugin-vue-define-options: 0.11.2
   vite: 3.1.8_less@4.1.3+sass@1.55.0
+  vite-plugin-chunk-split: 0.4.7_vite@3.1.8
   vue-eslint-parser: 9.1.0_eslint@8.26.0
   vue-tsc: 0.40.13_typescript@4.8.4
 
@@ -929,6 +935,13 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
+  /echarts/5.4.1:
+    resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.4.1
+    dev: false
+
   /emoji-regex/8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -945,6 +958,10 @@ packages:
       prr: 1.0.1
     optional: true
 
+  /es-module-lexer/1.2.0:
+    resolution: {integrity: sha512-2BMfqBDeVCcOlLaL1ZAfp+D868SczNpKArrTM3dhpd7dK/OVlogzY15qpUngt+LMTq5UC/csb9vVQAgupucSbA==}
+    dev: true
+
   /esbuild-android-64/0.15.12:
     resolution: {integrity: sha512-MJKXwvPY9g0rGps0+U65HlTsM1wUs9lbjt5CU19RESqycGFDRijMDQsh68MtbzkqWSRdEtiKS1mtPzKneaAI0Q==}
     engines: {node: '>=12'}
@@ -2403,6 +2420,10 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
+  /tslib/2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
 
@@ -2540,6 +2561,16 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /vite-plugin-chunk-split/0.4.7_vite@3.1.8:
+    resolution: {integrity: sha512-BGPMTxlC6Z+VNY1t/51F1ablkt4UQqdEPvAmCKRBsEPIpKAlW3sioQwK4klS14ievsGNaeALAKdko7n3oPJ8BQ==}
+    peerDependencies:
+      vite: ^3.1.0
+    dependencies:
+      es-module-lexer: 1.2.0
+      magic-string: 0.26.7
+      vite: 3.1.8_less@4.1.3+sass@1.55.0
+    dev: true
+
   /vite/3.1.8_less@4.1.3+sass@1.55.0:
     resolution: {integrity: sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2654,6 +2685,15 @@ packages:
       '@vue/server-renderer': 3.2.41_vue@3.2.41
       '@vue/shared': 3.2.41
 
+  /vue3-autocounter/1.0.6_vue@3.2.41:
+    resolution: {integrity: sha512-jOgCD2WaOjt/tOAAGKDm2DTyQRdKyfqJv5ElUz/vR0ZJgUd4yDd6UX6+2YU3LQpY4qoFNZkzLloAfALAqK041g==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: ^3.0.5
+    dependencies:
+      vue: 3.2.41
+    dev: false
+
   /warning/4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
     dependencies:
@@ -2722,3 +2762,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+  /zrender/5.4.1:
+    resolution: {integrity: sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false

src/components.d.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACol: typeof import('ant-design-vue/es')['Col']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -23,14 +24,20 @@ declare module '@vue/runtime-core' {
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APopover: typeof import('ant-design-vue/es')['Popover']
+    AppstoreOutlined: typeof import('@ant-design/icons-vue')['AppstoreOutlined']
+    ARow: typeof import('ant-design-vue/es')['Row']
     ATable: typeof import('ant-design-vue/es')['Table']
+    ATabPane: typeof import('ant-design-vue/es')['TabPane']
+    ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    BarChartOutlined: typeof import('@ant-design/icons-vue')['BarChartOutlined']
     CloseOutlined: typeof import('@ant-design/icons-vue')['CloseOutlined']
     DataList: typeof import('./components/data-list/index.vue')['default']
     DownOutlined: typeof import('@ant-design/icons-vue')['DownOutlined']
     EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined']
     Loading: typeof import('./components/loading/index.vue')['default']
     LocalePicker: typeof import('./components/localePicker/index.vue')['default']
+    PieChartOutlined: typeof import('@ant-design/icons-vue')['PieChartOutlined']
     PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/layout/header.vue

@@ -1,9 +1,20 @@
 <template>
   <a-layout-header class="header-layout">
     <div class="content-layout">
-      <h2>
-        <a :href="mainURL"><img :src="logoPng" /></a>
-      </h2>
+      <div class="content-layout-left">
+        <h2>
+          <a :href="mainURL"><img :src="logoPng" /></a>
+        </h2>
+        <div class="main_menu">
+          <router-link to="/" v-slot="{ isActive }">
+            <span :class="{ active: isActive }">我的房间</span>
+          </router-link>
+          <router-link to="/statistic" v-slot="{ isActive }">
+            <span :class="{ active: isActive }">数据看板</span>
+          </router-link>
+        </div>
+      </div>
+
       <div class="right_menu_container">
         <a-dropdown placement="bottomRight">
           <template #overlay>
@@ -183,7 +194,16 @@ onMounted(() => {
   padding: 0;
 
   h2 {
+    padding: 0;
     margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
     img {
       width: 130px;
     }
@@ -208,4 +228,32 @@ onMounted(() => {
     margin-left: 8px;
   }
 }
+.content-layout-left {
+  display: flex;
+  flex-direction: row;
+  // justify-content: center;
+  align-items: center;
+}
+.main_menu {
+  margin-left: 20px;
+  a {
+    text-decoration: none;
+    color: #323233;
+    margin: 0 25px;
+  }
+  span.active {
+    color: #0076f6;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 4px;
+      background: #0076f6;
+      top: 120%;
+      // left: 25px;
+      transform: translateX(100%);
+    }
+  }
+}
 </style>

src/router/config.ts

@@ -6,5 +6,10 @@ export const routes = [
     path: routesPaths[RoutesName.rooms],
     name: RoutesName.rooms,
     component: () => import('@/views/room/list.vue')
+  },
+  {
+    path: '/statistic',
+    name:'statistic',
+    component: () => import('@/views/statistic/index.vue')
   }
 ]

src/store/modules/room.ts

@@ -66,10 +66,10 @@ export const useRoomStore = defineStore('room', {
       search.set('m', `${param.num}`)
       search.set('role', `${param.role || 'leader'}`)
       param.name && search.set('name', `${param.name}`)
-      search.set('roomId', `roomId_${param.roomId}`)
+      search.set('roomId', `${param.roomId}`)
       param.avatar && search.set('avatar', param.avatar)
       param.lang && search.set('lang', param.lang)
-      param.userId && search.set('vruserId', `user_${param.userId}`)
+      param.userId && search.set('vruserId', `${param.userId}`)
       param.isTour && search.set('isTour', `${param.isTour}`)
       if (Number(import.meta.env.VITE_SHOW_CONSOLE) == 1) {
         search.set('vlog', import.meta.env.VITE_SHOW_CONSOLE)

src/views/statistic/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="statistic-container">
+    <a-tabs
+      class="status-tabs"
+      v-model:activeKey="activeKey"
+      tab-position="left"
+      animated
+    >
+      <a-tab-pane key="1">
+        <template #tab>
+          <span class="tab-title">
+            <AppstoreOutlined />
+            整体概况
+          </span>
+        </template>
+        <tab1 />
+      </a-tab-pane>
+      <a-tab-pane key="2">
+        <template #tab>
+          <span class="tab-title">
+            <PieChartOutlined />
+
+            房间数据
+          </span>
+        </template>
+        <tab2 />
+      </a-tab-pane>
+      <a-tab-pane key="3">
+        <template #tab>
+          <span class="tab-title">
+            <BarChartOutlined />
+            房间留言
+          </span>
+        </template>
+
+        <tab3 />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<script lang="ts" setup>
+import tab1 from './tab/tab1.vue'
+import tab2 from './tab/tab2.vue'
+import tab3 from './tab/tab3.vue'
+import { ref } from 'vue'
+const activeKey = ref('1')
+</script>
+<style lang="less">
+.statistic-container {
+  margin-top: 30px;
+
+  // width: ;
+}
+.status-tabs {
+  .ant-tabs-nav-list {
+    background: #fff;
+    padding: 10px;
+  }
+  .ant-tabs-tab .anticon {
+    margin-right: 5px;
+  }
+  .ant-tabs-content-holder {
+    // background: #fff;
+    margin-left: 15px;
+    // padding: 15px;
+    padding-top: 0px;
+  }
+}
+</style>

src/views/statistic/tab/tab1.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <a-row
+      class="container status-number"
+      type="flex"
+      justify="center"
+      align="middle"
+    >
+      <a-col :span="6">
+        <div class="status-item">
+          <span class="label">带看房间</span>
+          <!-- <span class="number">80</span> -->
+          <vue3-autocounter
+            ref="counter"
+            class="number"
+            :startAmount="0"
+            :endAmount="2021"
+            :duration="2"
+            separator=","
+            decimalSeparator="."
+            :decimals="0"
+            :autoinit="true"
+          />
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="status-item">
+          <span class="label">访问总人数</span>
+          <vue3-autocounter
+            ref="counter"
+            class="number"
+            :startAmount="0"
+            :endAmount="11122"
+            :duration="2"
+            separator=","
+            decimalSeparator="."
+            :decimals="0"
+            :autoinit="true"
+          />
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="status-item">
+          <span class="label">访问总次数</span>
+          <vue3-autocounter
+            ref="counter"
+            class="number"
+            :startAmount="0"
+            :endAmount="222225"
+            :duration="2"
+            separator=","
+            decimalSeparator="."
+            :decimals="0"
+            :autoinit="true"
+          />
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="status-item">
+          <span class="label">访问总次数</span>
+          <vue3-autocounter
+            ref="counter"
+            class="number"
+            :startAmount="0"
+            :endAmount="222225"
+            :duration="2"
+            separator=","
+            decimalSeparator="."
+            :decimals="0"
+            :autoinit="true"
+          />
+        </div>
+      </a-col>
+    </a-row>
+
+    <a-row>
+      <div class="container">
+        <div id="chart-1" class="chart"></div>
+      </div>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue'
+import Vue3Autocounter from 'vue3-autocounter'
+import * as echarts from 'echarts'
+import type { ECharts } from 'echarts'
+onMounted(() => {
+  const chart1 = document.getElementById('chart-1')
+  let myChart: ECharts
+  if (chart1) {
+    myChart = echarts.init(chart1)
+    // 绘制图表
+    myChart.setOption({
+      title: { text: '总用户量' },
+      tooltip: {},
+      xAxis: {
+        data: ['12-3', '12-4', '12-5', '12-6', '12-7', '12-8']
+      },
+      yAxis: {},
+      series: [
+        {
+          name: '用户量',
+          type: 'line',
+          data: [5, 20, 36, 10, 10, 20]
+        }
+      ]
+    })
+  }
+
+  window.onresize = function () {
+    //自适应大小
+    myChart.resize()
+  }
+})
+</script>
+<style lang="less">
+.status-number {
+  .status-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #969799;
+      line-height: 16px;
+    }
+    .number {
+      font-size: 24px;
+      font-weight: bold;
+      color: #323233;
+      line-height: 28px;
+    }
+  }
+}
+.container {
+  background-color: #fff;
+  padding: 25px;
+  width: 100%;
+  margin-bottom: 25px;
+}
+.chart {
+  width: 100%;
+  min-height: 500px;
+}
+</style>

src/views/statistic/tab/tab2.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <a-row>
+      <div class="container">
+        <a-table :columns="columns" :data-source="data" bordered>
+          <template #name="{ text }">
+            <a>{{ text }}</a>
+          </template>
+          <template #title>Header</template>
+          <template #footer>Footer</template>
+        </a-table>
+      </div>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue'
+import { TableColumnProps } from 'ant-design-vue'
+const columns: TableColumnProps[] = [
+  // {
+  //   title: '房间id',
+  //   dataIndex: 'roomId'
+  // },
+  {
+    title: '房间名称',
+    dataIndex: 'roomTitle'
+  },
+  {
+    title: '相关场景',
+    // className: 'column-money',
+    dataIndex: 'sceneNames'
+  },
+  {
+    title: '时长/分',
+    dataIndex: 'totalViewTime'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime'
+  },
+  {
+    title: '状态',
+    dataIndex: 'status'
+  },
+  {
+    title: '观看',
+    dataIndex: 'viewPersonNums'
+  },
+  {
+    title: '分享',
+    dataIndex: 'shareNums'
+  }
+]
+
+const data = [
+  {
+    key: '1',
+    roomTitle: '测试房间',
+    sceneNames: ['11', '22'],
+    totalViewTime: 1212121212,
+    createTime: 1212121212,
+    status: 0,
+    viewPersonNums: 100,
+    shareNums: 29292
+  },
+  {
+    key: '2',
+    roomTitle: '测试房间',
+    sceneNames: ['11', '22'],
+    totalViewTime: 1212121212,
+    createTime: 1212121212,
+    status: 0,
+    viewPersonNums: 100,
+    shareNums: 29292
+  },
+  {
+    key: '3',
+    roomTitle: '测试房间',
+    sceneNames: ['11', '22'],
+    totalViewTime: 1212121212,
+    createTime: 1212121212,
+    status: 0,
+    viewPersonNums: 100,
+    shareNums: 29292
+  },
+  {
+    key: '4',
+    roomTitle: '测试房间',
+    sceneNames: ['11', '22'],
+    totalViewTime: 1212121212,
+    createTime: 1212121212,
+    status: 0,
+    viewPersonNums: 100,
+    shareNums: 29292
+  },
+]
+</script>
+<style lang="less">
+.container {
+  background-color: #fff;
+  padding: 25px;
+  width: 100%;
+  margin-bottom: 25px;
+}
+</style>

src/views/statistic/tab/tab3.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <a-row>
+      <div class="container">
+        <a-table :columns="columns" :data-source="data" bordered>
+          <template #name="{ text }">
+            <a>{{ text }}</a>
+          </template>
+          <!-- <template #title>Header</template>
+          <template #footer>Footer</template> -->
+        </a-table>
+      </div>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue'
+import { TableColumnProps } from 'ant-design-vue'
+const columns: TableColumnProps[] = [
+  // {
+  //   title: '房间id',
+  //   dataIndex: 'roomId'
+  // },
+  {
+    title: '昵称',
+    dataIndex: 'nickName'
+  },
+  {
+    title: '手机号',
+    // className: 'column-money',
+    dataIndex: 'phone'
+  },
+  {
+    title: '房间名称',
+    dataIndex: 'roomTitle'
+  },
+  {
+    title: '时长/分',
+    dataIndex: 'onlineDuration'
+  },
+  {
+    title: '初次进入房间',
+    dataIndex: 'firstEnterRoomTime'
+  },
+  {
+    title: '最后离开房间',
+    dataIndex: 'lastLeaveRoomTime'
+  },
+  {
+    title: '数量',
+    dataIndex: 'messageCount'
+  },
+  {
+    title: '留言内容',
+    dataIndex: 'messageContents'
+  }
+]
+
+const data = [
+  {
+    key: '1',
+    nickName: '测试房间',
+    phone:'1388888522',
+    roomTitle: "测试房间",
+    onlineDuration: 1212121212,
+    firstEnterRoomTime:'2023-02-14 23:20',
+    lastLeaveRoomTime:'2023-02-14 23:20',
+    messageCount: 1010,
+    messageContents: "dddjjdjd"
+  },
+  {
+    key: '2',
+    nickName: '测试房间',
+    phone:'1388888522',
+    roomTitle: "测试房间",
+    onlineDuration: 1212121212,
+    firstEnterRoomTime:'2023-02-14 23:20',
+    lastLeaveRoomTime:'2023-02-14 23:20',
+    messageCount: 1010,
+    messageContents: "dddjjdjd"
+  },
+  {
+    key: '3',
+    nickName: '测试房间',
+    phone:'1388888522',
+    roomTitle: "测试房间",
+    onlineDuration: 1212121212,
+    firstEnterRoomTime:'2023-02-14 23:20',
+    lastLeaveRoomTime:'2023-02-14 23:20',
+    messageCount: 1010,
+    messageContents: "dddjjdjd"
+  },
+  {
+    key: '4',
+    nickName: '测试房间',
+    phone:'1388888522',
+    roomTitle: "测试房间",
+    onlineDuration: 1212121212,
+    firstEnterRoomTime:'2023-02-14 23:20',
+    lastLeaveRoomTime:'2023-02-14 23:20',
+    messageCount: 1010,
+    messageContents: "dddjjdjd"
+  },
+]
+</script>
+<style lang="less">
+.container {
+  background-color: #fff;
+  padding: 25px;
+  width: 100%;
+  margin-bottom: 25px;
+}
+</style>

vite.config.ts

@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 import ViteComponents from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 import DefineOptions from 'unplugin-vue-define-options/vite'
+import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
 
 import { resolve } from 'path'
 
@@ -26,6 +27,16 @@ export default ({ mode }) =>
           AntDesignVueResolver({ resolveIcons: true, importStyle: 'less' })
         ],
         dts: 'src/components.d.ts'
+      }),
+      chunkSplitPlugin({
+        strategy: 'default',
+        customSplitting: {
+          // `react` and `react-dom` 会被打包到一个名为`render-vendor`的 chunk 里面(包括它们的一些依赖，如 object-assign)
+          'vue-vendor': ['vue','pinia','vue-i18n','vue-router'],
+          'dept-vendor': ['ant-design-vue', '@ant-design/icons-vue'],
+          // 源码中 utils 目录的代码都会打包进 `utils` 这个 chunk 中
+          'utils': ['echarts', 'lodash-es','vue3-autocounter']
+        }
       })
     ],
     css: {
@@ -67,5 +78,7 @@ export default ({ mode }) =>
           rewrite: path => path.replace(/^\/api/, '')
         }
       }
-    }
+    },
+
+
   })