From 5f9b124a7ba777a120a8f73d4c6b3705d3773f79 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Sun, 7 Apr 2024 16:53:03 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20page=20help,=20tab?=
 =?UTF-8?q?=20help?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/theme/element-extra.css                |  5 ----
 .../components/render-form-item.vue           |  2 --
 src/layout/components/Page/index.vue          | 23 +++++++++++++----
 src/layout/components/TabPage/index.vue       | 24 ++++++++++++------
 src/styles/index.scss                         | 25 +++++++++++++++++++
 src/views/accounts/Account/index.vue          |  3 ++-
 .../accounts/VirtualAccount/VirtualList.vue   |  1 -
 7 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/public/theme/element-extra.css b/public/theme/element-extra.css
index 4bf139be9..13d365a93 100644
--- a/public/theme/element-extra.css
+++ b/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;
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 d36fd1ddc..7e74a485f 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
@@ -284,8 +284,6 @@ export default {
 </script>
 <style lang='scss'>
 .help-tip-icon {
-  font-weight: bold;
-
   &:hover {
     cursor: pointer;
   }
diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue
index 9776cefc8..cff32ca38 100644
--- a/src/layout/components/Page/index.vue
+++ b/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;
diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index a54cd5dcb..3b9414d6e 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/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>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4ae39541e..0c0addaa3 100644
--- a/src/styles/index.scss
+++ b/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;
+}
diff --git a/src/views/accounts/Account/index.vue b/src/views/accounts/Account/index.vue
index ada6d97f7..fb281896f 100644
--- a/src/views/accounts/Account/index.vue
+++ b/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')
           }
         ]
       }
diff --git a/src/views/accounts/VirtualAccount/VirtualList.vue b/src/views/accounts/VirtualAccount/VirtualList.vue
index 14c238ac4..da5d57db5 100644
--- a/src/views/accounts/VirtualAccount/VirtualList.vue
+++ b/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>