perf: 优化 page help, tab help

public/theme/element-extra.css

@@ -324,11 +324,6 @@ td .el-button.el-button--mini {
   padding: 10px;
 }
 
-.el-tooltip__popper.is-light .popper__arrow {
-  border-bottom-color: #c2d1e1 !important;
-  border-top-color: #c2d1e1 !important;
-}
-
 .el-dialog__headerbtn .el-dialog__close {
   color: #000;
   opacity: .2;

src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue

@@ -284,8 +284,6 @@ export default {
 </script>
 <style lang='scss'>
 .help-tip-icon {
-  font-weight: bold;
-
   &:hover {
     cursor: pointer;
   }

src/layout/components/Page/index.vue

@@ -1,18 +1,25 @@
 <template>
   <div class="page">
-    <PageHeading v-if="iTitle || helpMessage" class="disabled-when-print">
+    <PageHeading v-if="iTitle || helpMessage" :help-msg="helpMessage" class="disabled-when-print">
       <el-button :disabled="gobackDisabled" class="go-back" icon="el-icon-back" @click="handleGoBack" />
       <slot name="title">
-        <span style="padding-left: 10px">{{ iTitle }}</span>
+        <span style="padding-left: 10px">
+          {{ iTitle }}
+          <el-tooltip v-if="helpMessage" effect="light" placement="right" popper-class="help-tips">
+            <div slot="content" class="page-help-content" v-html="helpMessage" />
+            <span>
+              <el-button class="help-message">
+                <i class="el-icon-info" />
+              </el-button>
+            </span>
+          </el-tooltip>
+        </span>
       </slot>
       <template #rightSide>
         <slot name="headingRightSide" />
       </template>
     </PageHeading>
     <PageContent class="page-content">
-      <el-alert v-if="helpMessage" type="success">
-        <span class="announcement-main" v-html="helpMessage" />
-      </el-alert>
       <slot />
     </PageContent>
     <UserConfirmDialog />
@@ -100,6 +107,12 @@ export default {
   font-weight: 600;
 }
 
+.el-button.el-button--default.help-message {
+  padding: 5px;
+  color: #1c84c6;
+  border: none;
+}
+
 @media print {
   .disabled-when-print {
     display: none;

src/layout/components/TabPage/index.vue

@@ -23,15 +23,20 @@
               <i v-if="item.icon" :class="item.icon" class="fa " />
               {{ toSentenceCase(item.title) }}
               <slot :tab="item.name" name="badge" />
+              <el-tooltip v-if="item.helpMessage" effect="light" placement="bottom" popper-class="help-tips">
+                <div slot="content" class="page-help-content" v-html="item.helpMessage" />
+                <span>
+                  <el-button class="help-msg-btn">
+                    <i class="el-icon-info" />
+                  </el-button>
+                </span>
+              </el-tooltip>
             </span>
           </el-tab-pane>
         </template>
       </el-tabs>
 
       <div class="tab-page-content">
-        <el-alert v-if="helpMessage" type="success">
-          <span class="announcement-main" v-html="helpMessage" />
-        </el-alert>
         <transition v-if="loading" appear mode="out-in" name="fade-transform">
           <slot>
             <keep-alive>
@@ -64,10 +69,6 @@ export default {
     activeMenu: {
       type: String,
       required: true
-    },
-    helpMessage: {
-      type: String,
-      default: ''
     }
   },
   data() {
@@ -209,4 +210,13 @@ export default {
 .fa {
   margin-right: 2px;
 }
+
+.el-button.el-button--default.help-msg-btn {
+  padding: 5px;
+  border: none;
+  color: var(--color-info);
+  i {
+    opacity: 1;
+  }
+}
 </style>

src/styles/index.scss

@@ -421,3 +421,28 @@ button, input, optgroup, select, textarea {
 button .el-icon--right {
   margin-left: 3px;
 }
+
+// 定义颜色变量
+$tooltip-arrow-color: #c2d1e1;
+
+// 使用 SCSS 的嵌套和变量来简化代码
+.el-tooltip__popper.is-light {
+  &[x-placement^=right] .popper__arrow {
+    border-right-color: $tooltip-arrow-color !important;
+  }
+  &[x-placement^=left] .popper__arrow {
+    border-left-color: $tooltip-arrow-color !important;
+  }
+  &[x-placement^=top] .popper__arrow {
+    border-top-color: $tooltip-arrow-color !important;
+  }
+  &[x-placement^=bottom] .popper__arrow {
+    border-bottom-color: $tooltip-arrow-color !important;
+  }
+}
+
+.page-help-content {
+  padding: 8px;
+  font-weight: 500;
+  font-size: 13px;
+}

src/views/accounts/Account/index.vue

@@ -23,7 +23,8 @@ export default {
           {
             title: this.$t('VirtualAccounts'),
             name: 'VirtualAccountList',
-            component: () => import('@/views/accounts/VirtualAccount/VirtualList.vue')
+            component: () => import('@/views/accounts/VirtualAccount/VirtualList.vue'),
+            helpMessage: this.$t('VirtualAccountHelpMsg')
           }
         ]
       }

src/views/accounts/VirtualAccount/VirtualList.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <el-alert type="success">{{ $t("VirtualAccountHelpMsg") }}</el-alert>
     <ListTable v-bind="config" />
   </div>
 </template>