update

src/App.vue

@@ -47,6 +47,8 @@ export default defineComponent({
 .content,
 .layout {
   height: 100%;
+  min-width: 950px;
+  overflow-x: hidden;
 }
 
 .content {

src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACol: typeof import('ant-design-vue/es')['Col']

src/locales/lang/zh/antdLocale/DatePicker.ts

@@ -0,0 +1,19 @@
+export default {
+  lang: {
+    shortWeekDays: ['一', '二', '三', '四', '五', '六', '日'],
+    shortMonths: [
+      '1月',
+      '2月',
+      '3月',
+      '4月',
+      '5月',
+      '6月',
+      '7月',
+      '8月',
+      '9月',
+      '10月',
+      '11月',
+      '12月',
+    ],
+  },
+};

src/locales/useLocale.ts

@@ -32,6 +32,7 @@ export function useLocale() {
   // const getShowLocalePicker = computed(() => localeStore.getShowPicker);
 
   const getAntdLocale = computed((): any => {
+    //@ts-ignore
     return i18n.global.getLocaleMessage(unref(getLocale))?.antdLocale ?? {};
   });
 

src/views/room/edit-room/index.vue

@@ -129,7 +129,7 @@
               :should-auto-focus="true"
               :is-input-num="true"
               :conditionalClass="['one', 'two', 'three', 'four']"
-              :placeholder="['*', '*', '*', '*']"
+              :placeholder="['-', '-', '-', '-']"
             />
           </a-form-item>
           <a-form-item

src/views/statistic/index.vue

@@ -48,7 +48,6 @@ const activeKey = ref('1')
 <style lang="less">
 .statistic-container {
   margin-top: 30px;
-
   // width: ;
 }
 .status-tabs {

src/views/statistic/tab/tab1.vue

@@ -57,7 +57,7 @@
       </a-col>
       <a-col :span="6">
         <div class="status-item">
-          <span class="label">访问总次数</span>
+          <span class="label">分享总次数</span>
           <vue3-autocounter
             ref="counter"
             class="number"
@@ -72,11 +72,54 @@
         </div>
       </a-col>
     </a-row>
+    <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>
+        </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
+      >
+    </a-row>
 
     <a-row>
-      <div class="container">
-        <div id="chart-1" class="chart"></div>
-      </div>
+      <a-col :span="24">
+        <a-card title="各时间段在线人数">
+          <div id="chart-1" class="chart"></div>
+        </a-card>
+      </a-col>
     </a-row>
   </div>
 </template>

src/views/statistic/tab/tab3.vue

@@ -2,7 +2,28 @@
   <div>
     <a-row>
       <div class="container search-container">
-        
+        <a-form
+          layout="inline"
+          :model="formState"
+          @finish="handleFinish"
+          @finishFailed="handleFinishFailed"
+        >
+          <a-form-item label="房间名称" name="username">
+            <a-input v-model:value="formState.user" placeholder="Username">
+            </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-form-item>
+          <a-form-item>
+            <a-button type="primary" html-type="submit"> 确定 </a-button>
+          </a-form-item>
+        </a-form>
       </div>
     </a-row>
     <a-row>
@@ -20,8 +41,17 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, UnwrapRef, reactive } from 'vue'
 import { TableColumnProps } from 'ant-design-vue'
+
+interface FormState {
+  user: string
+  password: string
+}
+const formState: UnwrapRef<FormState> = reactive({
+  user: '',
+  password: ''
+})
 const columns: TableColumnProps[] = [
   // {
   //   title: '房间id',
@@ -108,6 +138,9 @@ const data = [
     messageContents: 'dddjjdjd'
   }
 ]
+
+const handleFinish = () => {}
+const handleFinishFailed = () => {}
 </script>
 <style lang="less">
 .container {