perf: 优化显示校验

.env.production

@@ -1,3 +1,3 @@
 VITE_NODE_ENV= production
-VITE_API_BASE_URL= 'http://192.168.31.29:5000/'
-VITE_API_DOWN_URL= 'http://192.168.31.29:5000/'
+VITE_API_BASE_URL= 'http://192.168.1.214:5000/'
+VITE_API_DOWN_URL= 'http://192.168.1.214:5000/'

src/api/user.ts

@@ -51,7 +51,7 @@ export interface UserData {
     name?: string;
     password?: string;
     desc?: string;
-    privilege?: number;
+    privilege?: number | null;
   };
   success: boolean;
   message: string;

src/components/navbar/index.vue

@@ -80,7 +80,7 @@
           </a-button>
         </a-tooltip>
       </li>
-      <li>
+      <!-- <li>
         <a-tooltip :content="$t('settings.navbar.alerts')">
           <div class="message-box-trigger">
             <a-badge :count="9" dot>
@@ -106,7 +106,7 @@
             <message-box />
           </template>
         </a-popover>
-      </li>
+      </li> -->
       <li>
         <a-tooltip
           :content="

src/locale/en-US.ts

@@ -11,6 +11,7 @@ import localeUserSetting from '@/views/user/setting/locale/en-US';
 import localeManageSetting from '@/views/user/manage/locale/en-US';
 
 import localeSettings from './en-US/settings';
+import localeComponent from './en-US/component';
 
 export default {
   'menu.dashboard': 'Dashboard',
@@ -41,4 +42,5 @@ export default {
   ...locale500,
   ...localeUserSetting,
   ...localeManageSetting,
+  ...localeComponent,
 };

src/locale/en-US/component.ts

@@ -0,0 +1,4 @@
+export default {
+  'form.rules.required': 'This field is required',
+  'form.rules.email': 'Please enter a valid email address',
+};

src/locale/zh-CN.ts

@@ -11,6 +11,7 @@ import localeUserSetting from '@/views/user/setting/locale/zh-CN';
 import localeManageSetting from '@/views/user/manage/locale/zh-CN';
 
 import localeSettings from './zh-CN/settings';
+import localeComponent from './zh-CN/component';
 
 export default {
   'menu.dashboard': '仪表盘',
@@ -40,4 +41,5 @@ export default {
   ...locale500,
   ...localeUserSetting,
   ...localeManageSetting,
+  ...localeComponent,
 };

src/locale/zh-CN/component.ts

@@ -0,0 +1,4 @@
+export default {
+  'form.rules.required': '不能为空',
+  'form.rules.email': '请输入正确的邮箱地址',
+};

src/router/routes/modules/user.ts

@@ -20,6 +20,7 @@ const USER: AppRouteRecordRaw = {
         locale: 'menu.user.setting',
         requiresAuth: true,
         roles: ['*'],
+        hideInMenu: true,
       },
     },
     {

src/utils/const.ts

@@ -11,3 +11,24 @@ export const privilegeList = [
   { value: 1, label: '管理员' },
   { value: 2, label: '普通用户' },
 ];
+// 将 rules 改为函数，接收 t 函数作为参数
+export const getRules = (t: (key: string) => string) => ({
+  email: [
+    {
+      required: true,
+      message: '请输入邮箱地址',
+      trigger: 'blur',
+    },
+    {
+      type: 'email',
+      message: '请输入正确的邮箱地址',
+      trigger: ['blur', 'change'],
+    },
+  ],
+  required: [
+    {
+      required: true,
+      message: t('form.rules.required'),
+    },
+  ],
+});

src/views/dashboard/workplace/conf.ts

@@ -3,13 +3,13 @@ export interface DeviceInfo {
   value: string;
 }
 export const entityTypeList = [
-  { value: 1, label: '摄像头' },
-  { value: 2, label: '服务器' },
-  { value: 3, label: '温度传感器' },
+  { value: 1, label: 'Camera' },
+  { value: 2, label: 'Server' },
+  { value: 3, label: 'Temperature sensor' },
 ];
 export const statusTypeList = [
-  { value: -1, label: '离线', color: 'gray' },
-  { value: 0, label: '正常', color: 'green' },
-  { value: 1, label: '警告', color: 'orange' },
-  { value: 2, label: '报警', color: 'red' },
+  { value: -1, label: 'Offline', color: 'gray' },
+  { value: 0, label: 'Normal', color: 'green' },
+  { value: 1, label: 'Warning', color: 'orange' },
+  { value: 2, label: 'Alarm', color: 'red' },
 ];

src/views/dashboard/workplace/index.vue

@@ -46,6 +46,7 @@
                     v-model="formModel.entityType"
                     :placeholder="t('dashboard.form.entityType')"
                     allow-clear
+                    @clear="formModel.entityType = null"
                   >
                     <a-option
                       v-for="item of entityTypeList"
@@ -65,6 +66,7 @@
                     v-model="formModel.status"
                     :placeholder="t('dashboard.form.status')"
                     allow-clear
+                    @clear="formModel.status = null"
                   >
                     <a-option
                       v-for="item of statusTypeList"
@@ -186,13 +188,12 @@ import { useI18n } from 'vue-i18n';
 import { entityTypeList, statusTypeList, DeviceInfo } from './conf';
 import dayjs from 'dayjs';
 import { downLoadFun } from '@/utils/const';
+import { useIntervalFn } from '@vueuse/core';
 
 const { t } = useI18n();
 
 const { loading, setLoading } = useLoading(true);
 const cloneColumns = computed(() => [
-  // ])
-  // const cloneColumns = ref<TableColumnData[]>([
   {
     title: t('searchTable.table.number'),
     dataIndex: 'index',
@@ -202,33 +203,34 @@ const cloneColumns = computed(() => [
     width: 60,
   },
   {
-    title: t('dashboard.form.entityType'),
-    dataIndex: 'entityType',
-    slotName: 'entityType',
+    title: t('dashboard.table.time'),
+    dataIndex: 'time',
+    slotName: 'time',
+    ellipsis: true,
+  },
+  {
+    title: t('dashboard.form.status'),
+    dataIndex: 'status',
+    slotName: 'status',
+    width: 120,
   },
   {
     title: t('dashboard.form.name'),
     dataIndex: 'name',
     slotName: 'name',
   },
+  {
+    title: t('dashboard.form.entityType'),
+    dataIndex: 'entityType',
+    slotName: 'entityType',
+  },
+
   {
     title: t('dashboard.form.address'),
     dataIndex: 'address',
     ellipsis: true,
     tooltip: true,
   },
-  {
-    title: t('dashboard.form.status'),
-    dataIndex: 'status',
-    slotName: 'status',
-    width: 120,
-  },
-  {
-    title: t('dashboard.table.time'),
-    dataIndex: 'time',
-    slotName: 'time',
-    ellipsis: true,
-  },
 ]);
 
 const basePagination: Pagination = {
@@ -258,13 +260,14 @@ const visible = shallowRef<boolean>(false);
 const this_ = getCurrentInstance()?.appContext.config.globalProperties;
 const deviceInfo = ref<DeviceInfo[]>([] as DeviceInfo[]);
 function searchTable() {
-  setLoading(true);
-  const [startTime, endTime] = formModel.value.time;
+  // setLoading(true);
+  const [startTime, endTime] = formModel.value.time
+    ? formModel.value.time
+    : ['', ''];
   formModel.value.startTime = startTime ? startTime : null;
   formModel.value.endTime = endTime ? endTime : null;
   queryDashboardList(formModel.value)
     .then(res => {
-      console.log('res', res);
       pagination.current = formModel.value.pageIndex;
       pagination.pageSize = pagination.pageSize;
       pagination.total = res.totalCount;
@@ -275,6 +278,11 @@ function searchTable() {
     });
 }
 searchTable();
+const { pause, resume, isActive } = useIntervalFn(() => {
+  /* your function */
+  formModel.value.pageIndex = 1;
+  searchTable();
+}, 1000);
 const search = () => {
   searchTable();
 };
@@ -300,6 +308,11 @@ const downloadExcel = () => {
 };
 const onPageChange = (current: number) => {
   formModel.value.pageIndex = current;
+  if (current === 1) {
+    resume();
+  } else {
+    pause();
+  }
   searchTable();
 };
 

src/views/dashboard/workplace/locale/en-US.ts

@@ -1,5 +1,5 @@
 export default {
-  'menu.dashboard.workplace': 'DeviceInfo',
+  'menu.dashboard.workplace': 'System Status',
   'workplace.welcome': 'Welcome!',
   'dashboard.dialog.title': 'Device Information',
   'dashboard.form.address': 'Address',

src/views/dashboard/workplace/locale/zh-CN.ts

@@ -1,5 +1,5 @@
 export default {
-  'menu.dashboard.workplace': '设备信息',
+  'menu.dashboard.workplace': '设备状态',
   'workplace.welcome': '欢迎回来！',
   'dashboard.dialog.title': '设备信息',
   'dashboard.form.address': 'IP地址',

src/views/user/manage/components/edit.vue

@@ -7,15 +7,23 @@
       @cancel="() => handleCancel()"
       @before-ok="handleBeforeOk"
     >
-      <a-form :model="form">
+      <a-form :model="form" ref="formRef">
         <a-row :gutter="8">
           <a-col :span="12">
-            <a-form-item field="name" :label="t('manage.form.name')">
+            <a-form-item
+              field="name"
+              :label="t('manage.form.name')"
+              :rules="getRules(t).required"
+            >
               <a-input v-model="form.name" />
             </a-form-item>
           </a-col>
           <a-col :span="12">
-            <a-form-item field="password" :label="t('manage.form.password')">
+            <a-form-item
+              field="password"
+              :label="t('manage.form.password')"
+              :rules="getRules(t).required"
+            >
               <a-input v-model="form.password" />
             </a-form-item>
           </a-col>
@@ -25,8 +33,16 @@
             </a-form-item>
           </a-col>
           <a-col :span="12">
-            <a-form-item field="privilege" :label="t('manage.form.permission')">
-              <a-select v-model="form.privilege" allow-clear>
+            <a-form-item
+              field="privilege"
+              :label="t('manage.form.permission')"
+              :rules="getRules(t).required"
+            >
+              <a-select
+                v-model="form.privilege"
+                allow-clear
+                @clear="form.privilege = null"
+              >
                 <a-option
                   v-for="item of privilegeList"
                   :value="item.value"
@@ -46,7 +62,8 @@ import { fetchSaveUser, getUserInfo } from '@/api/user';
 import type { UserData } from '@/api/user';
 import { privilegeList } from '@/utils/const';
 import { useI18n } from 'vue-i18n';
-
+import { getRules } from '@/utils/const';
+const formRef = ref();
 const { t } = useI18n();
 
 const this_ = getCurrentInstance()?.appContext.config.globalProperties;
@@ -87,15 +104,21 @@ const formModel = () => {
 const form = ref<UserData['data']>(formModel());
 
 const handleBeforeOk = (done: (closed: boolean) => void) => {
-  fetchSaveUser(form.value)
-    .then(res => {
-      this_?.$message.success('操作成功');
-      done(true); // 关闭模态框
-      handleCancel();
-    })
-    .catch(() => {
+  formRef.value.validate().then((data: UserData['data']) => {
+    if (!data) {
+      fetchSaveUser(form.value)
+        .then(res => {
+          this_?.$message.success('操作成功');
+          done(true); // 关闭模态框
+          handleCancel();
+        })
+        .catch(() => {
+          done(false); // 不关闭模态框（例如提交失败时）
+        });
+    } else {
       done(false); // 不关闭模态框（例如提交失败时）
-    });
+    }
+  });
 };
 const handleCancel = () => {
   form.value = formModel();