update

src/App.vue

@@ -5,9 +5,9 @@
       <div ref="contentRef" class="content">
         <div class="content-layout">
           <RouterView v-slot="{ Component }">
-            <KeepAlive>
+            <!-- <KeepAlive> -->
               <component :is="Component" />
-            </KeepAlive>
+            <!-- </KeepAlive> -->
           </RouterView>
         </div>
       </div>

src/locales/useLocale.ts

@@ -19,7 +19,7 @@ function setI18nLanguage(locale: LocaleType) {
   if (i18n.mode === 'legacy') {
     i18n.global.locale = locale
   } else {
-    ;(i18n.global.locale as any).value = locale
+    ; (i18n.global.locale as any).value = locale
   }
   localeStore.setLocaleInfo({ locale })
   // localeStore.setSingleLocale(locale)
@@ -33,7 +33,33 @@ export function useLocale() {
 
   const getAntdLocale = computed((): any => {
     //@ts-ignore
-    return i18n.global.getLocaleMessage(unref(getLocale))?.antdLocale ?? {};
+    const AntdLocale = i18n.global.getLocaleMessage(unref(getLocale))?.antdLocale ?? {}
+    if ( ('locale' in unref(AntdLocale)) && unref(AntdLocale).locale === 'zh-cn') {
+      AntdLocale.DatePicker.lang.shortWeekDays = [
+        '一',
+        '二',
+        '三',
+        '四',
+        '五',
+        '六',
+        '日'
+      ]
+      AntdLocale.DatePicker.lang.shortMonths = [
+        '1月',
+        '2月',
+        '3月',
+        '4月',
+        '5月',
+        '6月',
+        '7月',
+        '8月',
+        '9月',
+        '10月',
+        '11月',
+        '12月'
+      ]
+    }
+    return AntdLocale;
   });
 
   // Switching the language will change the locale of useI18n

src/views/statistic/index.vue

@@ -1,53 +1,59 @@
 <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 />
+    <a-config-provider :locale="getAntdLocale">
+      <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>
+              房间数据
+            </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>
+          <tab3 />
+        </a-tab-pane>
+      </a-tabs>
+    </a-config-provider>
   </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'
+import { ref, unref } from 'vue'
+import { useLocale } from '@/locales/useLocale'
 const activeKey = ref('1')
+const { getAntdLocale } = useLocale()
+
 </script>
 <style lang="less">
 .statistic-container {
   margin-top: 30px;
+
   // width: ;
 }
 .status-tabs {

src/views/statistic/tab/tab1.vue

@@ -75,43 +75,26 @@
     <a-row :gutter="20" style="margin-bottom: 30px">
       <a-col :span="12">
         <a-card title="带看次数排行（前5）" :bordered="false">
-          <a-badge-ribbon text="1" color="red">
-            <p>Card content</p>
-          </a-badge-ribbon>
-
-          <a-badge-ribbon text="2" color="orange">
-            <p>Card content</p>
-          </a-badge-ribbon>
-          <a-badge-ribbon text="3" color="yellow">
-            <p>Card content</p>
-          </a-badge-ribbon>
-          <a-badge-ribbon text="4" color="#eee">
-            <p>Card content</p>
-          </a-badge-ribbon>
-          <a-badge-ribbon text="5" color="#eee">
-            <p>Card content</p>
-          </a-badge-ribbon>
+          <ul class="topic-list">
+            <li>Coffee</li>
+            <li>Tea</li>
+            <li>Milk</li>
+            <li>Milk</li>
+            <li>Milk</li>
+          </ul>
         </a-card>
       </a-col>
       <a-col :span="12">
         <a-card title="留言数排行（前5）" :bordered="false">
-          <a-badge-ribbon text="1" color="red">
-            <p>Card content</p>
-          </a-badge-ribbon>
-          <a-badge-ribbon text="2" color="orange">
-            <p>Card content</p>
-          </a-badge-ribbon>
-          <a-badge-ribbon text="3" color="yellow">
-            <p>Card content</p>
-          </a-badge-ribbon>
-          <a-badge-ribbon text="4" color="#eee">
-            <p>Card content</p>
-          </a-badge-ribbon>
-          <a-badge-ribbon text="5" color="#eee">
-            <p>Card content</p>
-          </a-badge-ribbon>
-        </a-card></a-col
-      >
+          <ul class="topic-list">
+            <li>Coffee</li>
+            <li>Tea</li>
+            <li>Milk</li>
+            <li>Milk</li>
+            <li>Milk</li>
+          </ul>
+        </a-card>
+      </a-col>
     </a-row>
 
     <a-row>
@@ -190,4 +173,39 @@ onMounted(() => {
   width: 100%;
   min-height: 500px;
 }
+.topic-list {
+  list-style: none;
+  padding: 0;
+  li {
+    counter-increment: li-counter;
+    line-height: 20px;
+    margin: 15px 0;
+    &::before {
+      content: '' counter(li-counter) '';
+      display: inline-block;
+      background: red;
+      text-align: center;
+      width: 20px;
+      color: white;
+      height: 20px;
+      line-height: 20px;
+      border-radius: 6px;
+      margin-right: 8px;
+    }
+    &:nth-child(2)::before {
+      background: #fe6600;
+    }
+    &:nth-child(3)::before {
+      background: #f2a841;
+    }
+    &:nth-child(4)::before {
+      background: #ebedf0;
+      color: #323233;
+    }
+    &:nth-child(5)::before {
+      background: #ebedf0;
+      color: #323233;
+    }
+  }
+}
 </style>

src/views/statistic/tab/tab3.vue

@@ -8,17 +8,17 @@
           @finish="handleFinish"
           @finishFailed="handleFinishFailed"
         >
-          <a-form-item label="房间名称" name="username">
-            <a-input v-model:value="formState.user" placeholder="Username">
+          <a-form-item label="房间名称" name="roomTitle">
+            <a-input v-model:value="formState.roomTitle" placeholder="房间名称">
             </a-input>
           </a-form-item>
           <a-form-item label="使用时间" name="username">
-            <a-input
-              v-model:value="formState.password"
-              type="password"
-              placeholder="Password"
-            >
-            </a-input>
+            <a-range-picker
+              :show-time="{ format: 'HH:mm' }"
+              format="YYYY-MM-DD HH:mm"
+              style="width: 80%"
+              v-model:value="formState.userTime"
+            />
           </a-form-item>
           <a-form-item>
             <a-button type="primary" html-type="submit"> 确定 </a-button>
@@ -45,12 +45,12 @@ import { computed, onMounted, UnwrapRef, reactive } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
 
 interface FormState {
-  user: string
-  password: string
+  roomTitle: string
+  userTime: string[]
 }
 const formState: UnwrapRef<FormState> = reactive({
-  user: '',
-  password: ''
+  roomTitle: '',
+  userTime: []
 })
 const columns: TableColumnProps[] = [
   // {