From 59df06676d7cda94bcda2d7a1bbfb30d03d86eb5 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Sat, 11 May 2024 19:34:23 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=20help=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Apps/AccountCreateUpdateForm/const.js          |  3 +--
 src/components/Form/AutoDataForm/utils.js          | 11 ++++-------
 .../components/render-form-item.vue                | 14 ++++++++++----
 src/components/Form/DataForm/index.vue             |  1 +
 src/components/Table/CardTable.vue                 |  6 ++++++
 src/layout/components/NavHeader/ViewSwitcher.vue   |  4 ++--
 src/layout/components/NavLeft/SidebarItem.vue      |  6 +++---
 src/styles/default-theme.scss                      |  1 +
 src/styles/index.scss                              | 10 +++++++++-
 src/styles/menu.scss                               |  5 ++---
 src/views/accounts/AccountTemplate/const.js        |  3 +--
 .../SyncInstanceTaskCreateUpdate.vue               |  3 +--
 src/views/assets/Platform/const.js                 |  1 -
 src/views/ops/File/index.vue                       | 10 +++++-----
 src/views/ops/Job/JobUpdateCreate.vue              |  3 +--
 src/views/settings/Auth/Ldap/SyncSettingDialog.vue |  3 +--
 src/views/settings/Task/Clean.vue                  |  3 +--
 17 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/components/Apps/AccountCreateUpdateForm/const.js b/src/components/Apps/AccountCreateUpdateForm/const.js
index 3734a204f..3b8c42772 100644
--- a/src/components/Apps/AccountCreateUpdateForm/const.js
+++ b/src/components/Apps/AccountCreateUpdateForm/const.js
@@ -37,8 +37,7 @@ export const accountFieldsMeta = (vm) => {
     on_invalid: {
       rules: [Required],
       label: vm.$t('AccountPolicy'),
-      helpText: vm.$t('AccountPolicyHelpText'),
-      helpTextAsTip: true,
+      helpTip: vm.$t('AccountPolicyHelpText'),
       hidden: () => {
         return vm.platform || vm.asset
       }
diff --git a/src/components/Form/AutoDataForm/utils.js b/src/components/Form/AutoDataForm/utils.js
index 03e7e8ba0..8e0f74c56 100644
--- a/src/components/Form/AutoDataForm/utils.js
+++ b/src/components/Form/AutoDataForm/utils.js
@@ -162,12 +162,9 @@ export class FormFieldGenerator {
 
   afterGenerateField(field) {
     field.label = toSentenceCase(field.label)
-    if (field.helpText) {
-      field.helpText = toSentenceCase(field.helpText)
-    }
-    if ((!field.helpTip && field.helpText && field.helpTextAsTip) || field.component === Switcher) {
-      field.helpTip = field.helpText
-      field.helpText = ''
+    if (!field.helpText && field.helpTip && field.helpTipAsText) {
+      field.helpText = field.helpTip
+      field.helpTip = ''
     }
     return field
   }
@@ -177,7 +174,7 @@ export class FormFieldGenerator {
     const remoteFieldMeta = remoteFieldsMeta[name] || {}
     const fieldMeta = fieldsMeta[name] || {}
     field.label = remoteFieldMeta.label
-    field.helpText = toSentenceCase(remoteFieldMeta['help_text'])
+    field.helpTip = toSentenceCase(remoteFieldMeta['help_text'])
     field = this.generateFieldByType(remoteFieldMeta.type, field, fieldMeta, remoteFieldMeta)
     field = this.generateFieldByName(name, field)
     field = this.generateFieldByOther(field, fieldMeta, remoteFieldMeta)
diff --git a/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue b/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
index da96abb22..750594fa8 100755
--- a/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
+++ b/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
@@ -8,11 +8,11 @@
     v-bind="data.attrs"
   >
     <template v-if="data.label" #label>
-      <el-tooltip v-if="data.helpTip" effect="dark" placement="top" popper-class="help-tips">
-        <div slot="content" v-html="data.helpTip" />
-        <i class="el-icon-warning-outline help-tip-icon" />
-      </el-tooltip>
       <span>{{ data.label }}</span>
+      <el-tooltip v-if="data.helpTip" effect="dark" placement="right" popper-class="help-tips">
+        <div slot="content" v-html="data.helpTip" />
+        <i class="fa fa-question-circle-o help-tip-icon" />
+      </el-tooltip>
     </template>
     <template v-if="readonly && hasReadonlyContent">
       <div
@@ -283,6 +283,12 @@ export default {
 }
 </script>
 <style lang='scss'>
+.help-tips {
+  opacity: 0.8;
+  line-height: 2;
+  width: 300px;
+
+}
 .help-tip-icon {
   &:hover {
     cursor: pointer;
diff --git a/src/components/Form/DataForm/index.vue b/src/components/Form/DataForm/index.vue
index 371cdffb2..335ae252c 100644
--- a/src/components/Form/DataForm/index.vue
+++ b/src/components/Form/DataForm/index.vue
@@ -157,6 +157,7 @@ export default {
 <style lang="less" scoped>
 .el-form {
   margin-right: 80px;
+  margin-bottom: 30px;
 
   ::v-deep .el-input-group__prepend {
     border-radius: 0;
diff --git a/src/components/Table/CardTable.vue b/src/components/Table/CardTable.vue
index dcf39fac6..0e0743b3f 100644
--- a/src/components/Table/CardTable.vue
+++ b/src/components/Table/CardTable.vue
@@ -55,6 +55,7 @@
     <Pagination
       v-if="pagination"
       ref="pagination"
+      class="pagination"
       v-bind="$data"
       @currentSizeChange="handleCurrentChange"
       @sizeChange="handleSizeChange"
@@ -310,4 +311,9 @@ export default {
   text-align: left;
   height: 100%;
 }
+
+.pagination {
+  padding-top: 10px;
+  border-top: 1px solid #e7eaec;
+}
 </style>
diff --git a/src/layout/components/NavHeader/ViewSwitcher.vue b/src/layout/components/NavHeader/ViewSwitcher.vue
index 37e7c32a7..e0bf5e6f0 100644
--- a/src/layout/components/NavHeader/ViewSwitcher.vue
+++ b/src/layout/components/NavHeader/ViewSwitcher.vue
@@ -142,8 +142,8 @@ export default {
   }
 
   .el-menu-item {
-    height: 36px;
-    line-height: 26px;
+    height: 40px;
+    line-height: 36px;
     padding: 4px 24px;
 
     &:hover {
diff --git a/src/layout/components/NavLeft/SidebarItem.vue b/src/layout/components/NavLeft/SidebarItem.vue
index 84fa4289c..286444643 100644
--- a/src/layout/components/NavLeft/SidebarItem.vue
+++ b/src/layout/components/NavLeft/SidebarItem.vue
@@ -7,9 +7,9 @@
     >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item
-          :class="{'submenu-title-noDropdown':!isNest}"
+          :class="{'submenu-title-noDropdown':!isNest, 'level0': !isNest}"
           :index="resolvePath(onlyOneChild.path)"
-          class="submenu-item"
+          class="submenu-item level1-item"
         >
           <item
             :children="item.children"
@@ -24,7 +24,7 @@
       v-else
       ref="subMenu"
       :index="resolvePath(item.path)"
-      class="el-submenu-sidebar submenu-item"
+      class="el-submenu-sidebar submenu-item level0"
       popper-append-to-body
     >
       <template slot="title">
diff --git a/src/styles/default-theme.scss b/src/styles/default-theme.scss
index 7f4c606ba..9337b9218 100644
--- a/src/styles/default-theme.scss
+++ b/src/styles/default-theme.scss
@@ -7,6 +7,7 @@
   --color-link: #1c84c6;
   --color-text-primary: #292827;
   --color-icon-primary: #605e5c;
+  --color-border: #e9ecef;
   --color-input-border: #BBBFC4;
   --color-disabled-background: #e9ecef;
   --color-help-text: #8F959E;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e2b0b0a57..357f9b4f6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -147,7 +147,11 @@ button, input, optgroup, select, textarea {
   background-color: #ebeef5 !important;
 }
 
-.el-tooltip__popper.is-light.help-tips div span {
+.el-tooltip__popper div {
+  line-height: 1.5;
+}
+
+.el-tooltip__popper.help-tips div span {
   padding: 50px;
 }
 
@@ -513,3 +517,7 @@ $tooltip-arrow-color: #c2d1e1;
     color: #1c84c6;
   }
 }
+
+.el-upload--text {
+  font-size: 0.9em;
+}
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index cc86410e2..d2e4d5f3f 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -11,7 +11,6 @@
 
   .el-submenu, .el-menu-item.submenu-title-noDropdown {
     background-color: $menuBg;
-    border-top: solid 1px $menuBg;
 
     .el-submenu__title {
       color: $menuText;
@@ -43,7 +42,7 @@
 
     &.is-active {
       color: $subMenuActiveText;
-      font-weight: 400;
+      font-weight: 500;
       list-style-type: disc;
     }
 
@@ -102,7 +101,7 @@
   }
 
   .submenu-item.el-submenu.is-opened {
-    border-top: solid 1px #efefef;
+    border-top: dotted 1px #ecedf2;
   }
 
   .nest-menu li.is-active {
diff --git a/src/views/accounts/AccountTemplate/const.js b/src/views/accounts/AccountTemplate/const.js
index 7499b960a..15ce2fba2 100644
--- a/src/views/accounts/AccountTemplate/const.js
+++ b/src/views/accounts/AccountTemplate/const.js
@@ -53,8 +53,7 @@ export const templateFieldsMeta = (vm) => {
     secret_strategy: {
       hidden: (formValue) => {
         return !canRandomSecretTypes.includes(formValue.secret_type)
-      },
-      helpTextAsTip: true
+      }
     },
     secret: {
       label: vm.$t('Password'),
diff --git a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue
index dbed88fb2..30c643c9b 100644
--- a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue
+++ b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue
@@ -94,8 +94,7 @@ export default {
           hidden: (formValue) => {
             return formValue.is_periodic === false
           },
-          helpText: this.$t('CrontabOfCreateUpdatePage'),
-          helpTextAsTip: true
+          helpTip: this.$t('CrontabOfCreateUpdatePage')
         },
         interval: {
           hidden: (formValue) => {
diff --git a/src/views/assets/Platform/const.js b/src/views/assets/Platform/const.js
index 992e862ad..9933173a9 100644
--- a/src/views/assets/Platform/const.js
+++ b/src/views/assets/Platform/const.js
@@ -129,7 +129,6 @@ export const setAutomations = (vm) => {
     _.set(autoFieldsMeta, `${itemMethodKey}.hidden`, (formValue) => {
       return !formValue[itemEnabledKey] || !formValue['ansible_enabled']
     })
-    _.set(autoFieldsMeta, `${itemMethodKey}.helpTextAsTip`, true)
     _.set(autoFieldsMeta, `${itemEnabledKey}.attrs.class`, 'item-enable')
     // 设置 enableMethod className
     _.set(autoFieldsMeta, `${itemMethodKey}.attrs.class`, 'item-method')
diff --git a/src/views/ops/File/index.vue b/src/views/ops/File/index.vue
index 4f34d62c4..46b77e521 100644
--- a/src/views/ops/File/index.vue
+++ b/src/views/ops/File/index.vue
@@ -488,7 +488,7 @@ export default {
   border: 1px solid #eee;
 }
 
-.upload_input > > > .el-input-group__prepend {
+.upload_input >>> .el-input-group__prepend {
   padding: 0 10px;
 }
 
@@ -521,7 +521,7 @@ export default {
     display: flex;
   }
 
-  > > > .el-upload {
+  >>> .el-upload {
     width: 400px;
 
     flex-direction: column;
@@ -534,12 +534,12 @@ export default {
   .empty-file-tip {
     position: relative;
     bottom: 100px;
-    left: 58%;
+    left: 52%;
     font-size: 18px;
     color: #c5c9cc;
   }
 
-  > > > .el-upload-list {
+  >>> .el-upload-list {
     margin-left: 20px;
     padding: 0 10px 0 10px;
     list-style: none;
@@ -555,7 +555,7 @@ export default {
   background: white;
 }
 
-.output > > > #terminal {
+.output >>> #terminal {
   border: dashed 1px #d9d9d9;
   margin: 0 20px 20px;
 }
diff --git a/src/views/ops/Job/JobUpdateCreate.vue b/src/views/ops/Job/JobUpdateCreate.vue
index 8497b725d..ece26490f 100644
--- a/src/views/ops/Job/JobUpdateCreate.vue
+++ b/src/views/ops/Job/JobUpdateCreate.vue
@@ -157,8 +157,7 @@ export default {
           hidden: (formValue) => {
             return formValue.is_periodic === false
           },
-          helpText: i18n.t('CrontabOfCreateUpdatePage'),
-          helpTextAsTip: true
+          helpTip: i18n.t('CrontabOfCreateUpdatePage')
         }
       },
       createSuccessNextRoute: { name: 'JobManagement' },
diff --git a/src/views/settings/Auth/Ldap/SyncSettingDialog.vue b/src/views/settings/Auth/Ldap/SyncSettingDialog.vue
index bb9d97937..cf2d12503 100644
--- a/src/views/settings/Auth/Ldap/SyncSettingDialog.vue
+++ b/src/views/settings/Auth/Ldap/SyncSettingDialog.vue
@@ -58,8 +58,7 @@ export default {
           },
           AUTH_LDAP_SYNC_CRONTAB: {
             component: CronTab,
-            helpText: this.$t('CrontabOfCreateUpdatePage'),
-            helpTextAsTip: true
+            helpTip: this.$t('CrontabOfCreateUpdatePage')
           },
           AUTH_LDAP_SYNC_INTERVAL: {
             rules: [Required],
diff --git a/src/views/settings/Task/Clean.vue b/src/views/settings/Task/Clean.vue
index 00c2c6e4f..9bebb3351 100644
--- a/src/views/settings/Task/Clean.vue
+++ b/src/views/settings/Task/Clean.vue
@@ -40,8 +40,7 @@ export default {
         AUTH_LDAP_SYNC_CRONTAB: {
           component: CronTab,
           label: this.$t('Crontab'),
-          helpText: this.$t('CrontabOfCreateUpdatePage'),
-          helpTextAsTip: true
+          helpText: this.$t('CrontabOfCreateUpdatePage')
         }
       },
       submitMethod() {