perf: 修改 help text

2026-01-15 14:24:39 +00:00 · 2024-05-11 19:34:23 +08:00
parent b63df1eee3
commit 59df06676d
17 changed files with 49 additions and 38 deletions
--- 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
      }
--- 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)
--- 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;
--- 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;
--- 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>
--- 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 {
--- 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">
--- 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;
--- 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;
+}
--- 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 {
--- 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'),
--- 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) => {
--- 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')
--- 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;
 }
--- 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' },
--- 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],
--- 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() {