From 18de1a2a3a8aa47b9587d327270f57fcc3a134e4 Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Thu, 26 Oct 2023 17:12:17 +0800
Subject: [PATCH] review code.

---
 orion-ops-ui/src/api/system/dict-value.ts     |  2 +-
 orion-ops-ui/src/assets/style/global.less     | 22 +++++++++++++++++++
 orion-ops-ui/src/assets/style/layout.less     | 17 --------------
 orion-ops-ui/src/hooks/copy.ts                |  2 --
 orion-ops-ui/src/store/index.ts               |  2 ++
 orion-ops-ui/src/store/modules/dict/index.ts  |  0
 orion-ops-ui/src/store/modules/dict/types.ts  |  0
 .../components/host-identity-card-list.vue    |  6 ++---
 .../asset/host/components/host-card-list.vue  |  6 ++---
 .../components/dict-key-form-modal.vue        | 16 +++++++-------
 .../dict-key/components/dict-key-table.vue    |  2 +-
 .../components/dict-key-view-modal.vue        |  2 +-
 .../src/views/system/dict-key/types/const.ts  | 13 ++++++++++-
 .../views/system/dict-key/types/form.rules.ts |  4 ++--
 .../components/dict-value-form-modal.vue      | 19 +++++++++++-----
 .../components/dict-value-table.vue           | 10 +++++++--
 .../system/dict-value/types/table.columns.ts  |  5 +++--
 .../src/views/user/user/types/form.rules.ts   |  4 ++--
 18 files changed, 81 insertions(+), 51 deletions(-)
 create mode 100644 orion-ops-ui/src/store/modules/dict/index.ts
 create mode 100644 orion-ops-ui/src/store/modules/dict/types.ts

diff --git a/orion-ops-ui/src/api/system/dict-value.ts b/orion-ops-ui/src/api/system/dict-value.ts
index 46018d51..6f8a71f6 100644
--- a/orion-ops-ui/src/api/system/dict-value.ts
+++ b/orion-ops-ui/src/api/system/dict-value.ts
@@ -8,7 +8,6 @@ import qs from 'query-string';
  */
 export interface DictValueCreateRequest {
   keyId?: number;
-  keyName?: string;
   name?: string;
   value?: string;
   label?: string;
@@ -53,6 +52,7 @@ export interface DictValueQueryResponse extends TableData {
   id?: number;
   keyId?: number;
   keyName?: string;
+  keyDescription?: string;
   name?: string;
   value?: string;
   label?: string;
diff --git a/orion-ops-ui/src/assets/style/global.less b/orion-ops-ui/src/assets/style/global.less
index 3359bd23..6cc1b2c3 100644
--- a/orion-ops-ui/src/assets/style/global.less
+++ b/orion-ops-ui/src/assets/style/global.less
@@ -120,6 +120,28 @@ body {
   }
 }
 
+.click-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-text-2);
+  background: var(--color-fill-2);
+  border-radius: 2px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+}
+
+.click-icon-wrapper:hover {
+  background: var(--color-fill-3);
+}
+
+.copy-left {
+  color: rgb(var(--arcoblue-6));
+  cursor: pointer;
+  margin-right: 4px;
+}
+
 .span-blue {
   color: rgb(var(--arcoblue-6));
 }
diff --git a/orion-ops-ui/src/assets/style/layout.less b/orion-ops-ui/src/assets/style/layout.less
index 3b3782cd..ea105d78 100644
--- a/orion-ops-ui/src/assets/style/layout.less
+++ b/orion-ops-ui/src/assets/style/layout.less
@@ -46,7 +46,6 @@
       }
     }
   }
-
 }
 
 .table-wrapper {
@@ -110,22 +109,6 @@
   padding: 18px 24px 14px 24px;
 }
 
-.click-icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--color-text-2);
-  background: var(--color-fill-2);
-  border-radius: 2px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
-}
-
-.click-icon-wrapper:hover {
-  background: var(--color-fill-3);
-}
-
 .arco-table-td-content {
   color: rgba(var(--gray-9), .95);
   font-size: 13px;
diff --git a/orion-ops-ui/src/hooks/copy.ts b/orion-ops-ui/src/hooks/copy.ts
index d8572c8f..f1b3b801 100644
--- a/orion-ops-ui/src/hooks/copy.ts
+++ b/orion-ops-ui/src/hooks/copy.ts
@@ -20,5 +20,3 @@ export default function useCopy() {
     copied
   };
 }
-
-
diff --git a/orion-ops-ui/src/store/index.ts b/orion-ops-ui/src/store/index.ts
index 5cf17868..f20f0842 100644
--- a/orion-ops-ui/src/store/index.ts
+++ b/orion-ops-ui/src/store/index.ts
@@ -5,6 +5,7 @@ import useUserStore from './modules/user';
 import useTabBarStore from './modules/tab-bar';
 import useCacheStore from './modules/cache';
 import useTipsStore from './modules/tips';
+// import useDictStore from './modules/dict';
 
 const pinia = createPinia();
 
@@ -15,6 +16,7 @@ export {
   useTabBarStore,
   useCacheStore,
   useTipsStore,
+  // useDictStore,
 };
 
 export default pinia;
diff --git a/orion-ops-ui/src/store/modules/dict/index.ts b/orion-ops-ui/src/store/modules/dict/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/orion-ops-ui/src/store/modules/dict/types.ts b/orion-ops-ui/src/store/modules/dict/types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
index 6fdb9f16..182dbf31 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
@@ -20,9 +20,9 @@
     <!-- 用户名 -->
     <template #username="{ record }">
       <a-tooltip content="点击复制">
-          <span class="pointer span-blue" @click="copy(record.username)">
-            <icon-copy /> {{ record.username }}
-          </span>
+        <span class="pointer span-blue" @click="copy(record.username)">
+          <icon-copy /> {{ record.username }}
+        </span>
       </a-tooltip>
     </template>
     <!-- 秘钥名称 -->
diff --git a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
index bd15fef6..f039ab05 100644
--- a/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-card-list.vue
@@ -24,9 +24,9 @@
     <!-- 地址 -->
     <template #address="{ record }">
       <a-tooltip content="点击复制">
-          <span class="host-address" @click="copy(record.address)">
-            <icon-copy /> {{ record.address }}
-          </span>
+        <span class="host-address" @click="copy(record.address)">
+          <icon-copy /> {{ record.address }}
+        </span>
       </a-tooltip>
     </template>
     <!-- 标签 -->
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
index 191609c9..d74a6d7c 100644
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
@@ -67,15 +67,15 @@
           <a-tag v-for="definedExtraKey in definedExtraKeys"
                  color="arcoblue"
                  :title="`添加参数 ${definedExtraKey}`"
-                 @click="addExtraParam(definedExtraKey)"
+                 @click="addExtraParam(definedExtraKey.name, definedExtraKey.type)"
                  checkable
                  checked>
-            {{ definedExtraKey }}
+            {{ definedExtraKey.name }}
           </a-tag>
           <!-- 添加参数 -->
           <a-button title="添加参数"
                     style="width: 180px;"
-                    @click="addExtraParam(undefined)"
+                    @click="addExtraParam(undefined,undefined)"
                     long>
             <icon-plus />
           </a-button>
@@ -114,7 +114,7 @@
     return {
       id: undefined,
       keyName: undefined,
-      valueType: ValueTypeEnum.STRING.value,
+      valueType: ValueTypeEnum.INTEGER.value,
       extraSchema: undefined,
       description: undefined,
     };
@@ -155,13 +155,13 @@
   defineExpose({ openAdd, openUpdate });
 
   // 添加额外参数
-  const addExtraParam = (name: string | undefined) => {
+  const addExtraParam = (name: string | undefined, type: any) => {
     if (name && extraSchemaArr.value.findIndex(v => v.name === name) != -1) {
       return;
     }
     extraSchemaArr.value.push({
       name: name,
-      type: ValueTypeEnum.STRING.value
+      type: type || ValueTypeEnum.STRING.value
     });
   };
 
@@ -194,11 +194,11 @@
             return false;
           }
           // 不合法
-          if (!new RegExp(/^[a-zA-Z0-9]{2,32}$/).test(extraSchema.name as string)) {
+          if (!new RegExp(/^[a-zA-Z0-9_]{2,32}$/).test(extraSchema.name as string)) {
             formRef.value.setFields({
               [`extra${i + 1}`]: {
                 status: 'error',
-                message: '配置项需要为 2-32 位的数字以及字母'
+                message: '配置项需要为 2-32 位的数字,字母或下滑线'
               }
             });
             return false;
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
index dfd96501..93cd64c9 100644
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
@@ -56,7 +56,7 @@
       <!-- 配置项 -->
       <template #keyName="{ record }">
         <span class="pointer" @click="copy(record.keyName)">
-          <icon-copy class="span-blue" /> {{ record.keyName }}
+          <icon-copy /> {{ record.keyName }}
         </span>
       </template>
       <!-- 配置值类型 -->
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue
index 1e8f9c1c..526ccf99 100644
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-view-modal.vue
@@ -2,7 +2,7 @@
   <a-modal v-model:visible="visible"
            title-align="start"
            width="60%"
-           :body-style="{padding: '16px 4px'}"
+           :body-style="{padding: '16px 8px'}"
            :top="80"
            :title="title"
            :align-center="false"
diff --git a/orion-ops-ui/src/views/system/dict-key/types/const.ts b/orion-ops-ui/src/views/system/dict-key/types/const.ts
index 033a4b5d..a74f86a1 100644
--- a/orion-ops-ui/src/views/system/dict-key/types/const.ts
+++ b/orion-ops-ui/src/views/system/dict-key/types/const.ts
@@ -1,7 +1,18 @@
+import { ValueTypeEnum } from './enum.types';
+
 /**
  * 快捷定义字段
  */
-export const definedExtraKeys = ['status', 'type', 'color'];
+export const definedExtraKeys = [{
+  name: 'status',
+  type: ValueTypeEnum.STRING.value
+}, {
+  name: 'type',
+  type: ValueTypeEnum.STRING.value
+}, {
+  name: 'color',
+  type: ValueTypeEnum.COLOR.value
+}];
 
 /**
  * 内置字段
diff --git a/orion-ops-ui/src/views/system/dict-key/types/form.rules.ts b/orion-ops-ui/src/views/system/dict-key/types/form.rules.ts
index 32c96022..019e954a 100644
--- a/orion-ops-ui/src/views/system/dict-key/types/form.rules.ts
+++ b/orion-ops-ui/src/views/system/dict-key/types/form.rules.ts
@@ -4,8 +4,8 @@ export const keyName = [{
   required: true,
   message: '请输入配置项'
 }, {
-  match: /^[a-zA-Z0-9]{2,32}$/,
-  message: '配置项需要为 2-32 位的数字以及字母'
+  match: /^[a-zA-Z0-9_]{2,32}$/,
+  message: '配置项需要为 2-32 位的数字,字母或下滑线'
 }] as FieldRule[];
 
 export const valueType = [{
diff --git a/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue b/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
index f463ebd4..c89f184c 100644
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
+++ b/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
@@ -27,6 +27,11 @@
         <!-- 配置名称 -->
         <a-form-item field="name" label="配置名称">
           <a-input v-model="formModel.name" placeholder="请输入配置名称" allow-clear />
+          <span class="item-extra-block pointer"
+                title="同步到值"
+                @click="() => formModel.value = formModel.name">
+            <icon-caret-down style="font-size: 16px" />
+          </span>
         </a-form-item>
         <!-- 配置值 -->
         <a-form-item field="value" label="配置值">
@@ -68,10 +73,9 @@
           <template v-else-if="ValueTypeEnum.COLOR.value === type">
             <a-input v-model="extraValue[name]"
                      :placeholder="`请输入 ${name}`"
-                     default-value="#"
                      allow-clear
                      hide-button />
-            <span class="color-block" :style="{
+            <span class="item-extra-block" :style="{
               background: extraValue[name] === '#' ? undefined : (extraValue[name] || undefined)
             }" />
           </template>
@@ -132,7 +136,7 @@
   const openAdd = () => {
     title.value = '添加字典配置值';
     isAddHandle.value = true;
-    renderForm({ ...defaultForm() });
+    renderForm({ ...defaultForm(), keyId: formModel.value.keyId });
     setVisible(true);
   };
 
@@ -224,11 +228,14 @@
 </script>
 
 <style lang="less" scoped>
-  .color-block {
-    width: 36px;
-    height: 30px;
+  .item-extra-block {
+    width: 38px;
+    height: 32px;
     margin-left: 8px;
     border-radius: 4px;
     background: var(--color-fill-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 </style>
diff --git a/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue b/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
index 717f93d2..8cf32ed3 100644
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
+++ b/orion-ops-ui/src/views/system/dict-value/components/dict-value-table.vue
@@ -83,13 +83,19 @@
       <!-- 名称 -->
       <template #name="{ record }">
         <span class="pointer" @click="copy(record.name)">
-          <icon-copy class="span-blue" /> {{ record.name }}
+          <icon-copy class="copy-left" />
+          <a-tooltip :content="record.name">
+            <span>{{ record.name }}</span>
+          </a-tooltip>
         </span>
       </template>
       <!-- 值 -->
       <template #value="{ record }">
         <span class="pointer" @click="copy(record.value)">
-          <icon-copy class="span-blue" /> {{ record.value }}
+          <icon-copy class="copy-left" />
+          <a-tooltip :content="record.value">
+            <span>{{ record.value }}</span>
+          </a-tooltip>
         </span>
       </template>
       <!-- 操作 -->
diff --git a/orion-ops-ui/src/views/system/dict-value/types/table.columns.ts b/orion-ops-ui/src/views/system/dict-value/types/table.columns.ts
index 6fe73e21..70fd166f 100644
--- a/orion-ops-ui/src/views/system/dict-value/types/table.columns.ts
+++ b/orion-ops-ui/src/views/system/dict-value/types/table.columns.ts
@@ -16,20 +16,21 @@ const columns = [
     align: 'left',
     ellipsis: true,
     tooltip: true,
+    render: ({ record }) => {
+      return `${record.keyName} - ${record.keyDescription}`;
+    },
   }, {
     title: '配置名称',
     dataIndex: 'name',
     slotName: 'name',
     align: 'left',
     ellipsis: true,
-    tooltip: true,
   }, {
     title: '配置值',
     dataIndex: 'value',
     slotName: 'value',
     align: 'left',
     ellipsis: true,
-    tooltip: true,
   }, {
     title: '配置描述',
     dataIndex: 'label',
diff --git a/orion-ops-ui/src/views/user/user/types/form.rules.ts b/orion-ops-ui/src/views/user/user/types/form.rules.ts
index 06d94ab6..d0227da8 100644
--- a/orion-ops-ui/src/views/user/user/types/form.rules.ts
+++ b/orion-ops-ui/src/views/user/user/types/form.rules.ts
@@ -7,8 +7,8 @@ export const username = [{
   maxLength: 32,
   message: '用户名长度不能大于32位'
 }, {
-  match: /^[a-zA-Z0-9]{4,32}$/,
-  message: '用户名需要为 4-32 位的数字以及字母'
+  match: /^[a-zA-Z0-9_]{4,32}$/,
+  message: '用户名需要为 4-32 位的数字,字母或下滑线'
 }] as FieldRule[];
 
 export const password = [{