From 1fd19daced58a959aae7f9a84d5cdcfc5f179b74 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 26 Mar 2024 10:03:42 +0800
Subject: [PATCH 1/2] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=85=AC=E5=85=B1=E6=A0=B7=E5=BC=8F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/common/CommonAttr.vue    |   2 +-
 .../common/CommonStyleSet.vue                 | 247 +++++++++++++-----
 2 files changed, 181 insertions(+), 68 deletions(-)

diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 5aaf95972e..c12579e11e 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -143,7 +143,7 @@ const stopEvent = e => {
         name="style"
         class="common-style-area"
       >
-        <common-style-set :element="element"></common-style-set>
+        <common-style-set :themes="themes" :element="element"></common-style-set>
       </el-collapse-item>
     </el-collapse>
   </div>
diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
index dc1c7146ec..d11c8e59db 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -2,68 +2,128 @@
   <el-row class="custom-row">
     <el-row class="custom-row-inner">
       <el-space wrap>
-        <el-form-item
-          v-if="styleForm.color"
-          class="form-item no-margin-bottom"
-          :class="'form-item-' + themes"
-        >
-          <el-color-picker
-            :title="t('chart.text_color')"
-            v-model="styleForm.color"
-            class="color-picker-style"
-            is-custom
-            :predefine="state.predefineColors"
-            @change="changeStyle"
-          />
-        </el-form-item>
-
-        <el-form-item
-          v-if="styleForm.fontSize"
-          class="form-item no-margin-bottom"
-          :class="'form-item-' + themes"
-        >
-          <el-select
-            style="width: 56px"
+        <el-tooltip v-if="styleForm.color" effect="dark" placement="bottom">
+          <template #content> {{ t('chart.text_color') }} </template>
+          <el-form-item
             :effect="themes"
-            :title="t('chart.text_fontsize')"
-            v-model="styleMounted.fontSize"
-            :placeholder="'大小'"
-            size="small"
-            @change="sizeChange('fontSize')"
+            class="form-item no-margin-bottom"
+            :class="'form-item-' + themes"
           >
-            <el-option
-              v-for="option in fontSizeList"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
+            <el-color-picker
+              :title="t('chart.text_color')"
+              v-model="styleForm.color"
+              class="color-picker-style"
+              is-custom
+              :predefine="state.predefineColors"
+              @change="changeStyle"
             />
-          </el-select>
-        </el-form-item>
+          </el-form-item>
+        </el-tooltip>
 
-        <el-form-item
-          v-if="styleForm.opacity"
-          class="form-item no-margin-bottom"
-          :class="'form-item-' + themes"
-        >
-          <el-select
-            style="width: 56px"
+        <el-tooltip v-if="styleForm.headFontColor" effect="dark" placement="bottom">
+          <template #content> 头部字体颜色 </template>
+          <el-form-item
             :effect="themes"
-            title="透明度"
-            v-model="styleForm.opacity"
-            placeholder="透明度"
-            size="small"
-            @change="sizeChange"
+            class="form-item no-margin-bottom"
+            :class="'form-item-' + themes"
           >
-            <el-option
-              v-for="option in opacitySizeList"
-              :key="option"
-              :label="option"
-              :value="option"
+            <el-color-picker
+              title="头部字体颜色"
+              v-model="styleForm.headFontColor"
+              class="color-picker-style"
+              is-custom
+              :predefine="state.predefineColors"
+              @change="changeStyle"
             />
-          </el-select>
-        </el-form-item>
-
-        <el-tooltip v-if="styleForm.fontWeight !== undefined" effect="dark" placement="top">
+          </el-form-item>
+        </el-tooltip>
+        <el-tooltip v-if="styleForm.headFontActiveColor" effect="dark" placement="bottom">
+          <template #content> 头部激活字体颜色 </template>
+          <el-form-item
+            :effect="themes"
+            class="form-item no-margin-bottom"
+            :class="'form-item-' + themes"
+          >
+            <el-color-picker
+              v-model="styleForm.headFontActiveColor"
+              class="color-picker-style"
+              is-custom
+              :predefine="state.predefineColors"
+              @change="changeStyle"
+            />
+          </el-form-item>
+        </el-tooltip>
+        <el-tooltip v-if="styleForm.fontSize" effect="dark" placement="bottom">
+          <template #content> {{ t('chart.text_fontsize') }} </template>
+          <el-form-item
+            :effect="themes"
+            class="form-item no-margin-bottom"
+            :class="'form-item-' + themes"
+          >
+            <el-select
+              style="width: 50px"
+              :effect="themes"
+              :title="t('chart.text_fontsize')"
+              v-model="styleMounted.fontSize"
+              :placeholder="'大小'"
+              size="small"
+              @change="sizeChange('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSizeList"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-tooltip>
+        <el-tooltip v-if="styleForm.activeFontSize" effect="dark" placement="bottom">
+          <template #content> 激活字体大小 </template>
+          <el-form-item
+            class="form-item no-margin-bottom"
+            :effect="themes"
+            :class="'form-item-' + themes"
+          >
+            <el-select
+              style="width: 50px"
+              :effect="themes"
+              title="激活字体大小"
+              v-model="styleMounted.activeFontSize"
+              :placeholder="'大小'"
+              size="small"
+              @change="sizeChange('activeFontSize')"
+            >
+              <el-option
+                v-for="option in fontSizeList"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-tooltip>
+        <el-tooltip v-if="styleForm.opacity" effect="dark" placement="bottom">
+          <template #content> 透明度 </template>
+          <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+            <el-select
+              style="width: 50px"
+              :effect="themes"
+              v-model="styleForm.opacity"
+              placeholder="透明度"
+              size="small"
+              @change="sizeChange"
+            >
+              <el-option
+                v-for="option in opacitySizeList"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+          </el-form-item>
+        </el-tooltip>
+        <el-tooltip v-if="styleForm.fontWeight !== undefined" effect="dark" placement="bottom">
           <template #content>
             {{ t('chart.bolder') }}
           </template>
@@ -78,7 +138,7 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip v-if="styleForm.fontStyle !== undefined" effect="dark" placement="top">
+        <el-tooltip v-if="styleForm.fontStyle !== undefined" effect="dark" placement="bottom">
           <template #content>
             {{ t('chart.italic') }}
           </template>
@@ -92,46 +152,98 @@
             </el-icon>
           </div>
         </el-tooltip>
-
-        <div class="m-divider"></div>
-
         <template v-if="styleForm.textAlign">
-          <el-tooltip effect="dark" placement="top">
+          <div class="m-divider"></div>
+          <el-tooltip effect="dark" placement="bottom">
             <template #content>
               {{ t('chart.text_pos_left') }}
             </template>
             <div
               class="icon-btn"
               :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'left' }"
-              @click="setPosition('left')"
+              @click="setPosition('textAlign', 'left')"
             >
               <el-icon>
                 <Icon name="icon_left-alignment_outlined" />
               </el-icon>
             </div>
           </el-tooltip>
-          <el-tooltip effect="dark" placement="top">
+          <el-tooltip effect="dark" placement="bottom">
             <template #content>
               {{ t('chart.text_pos_center') }}
             </template>
             <div
               class="icon-btn"
               :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'center' }"
-              @click="setPosition('center')"
+              @click="setPosition('textAlign', 'center')"
             >
               <el-icon>
                 <Icon name="icon_center-alignment_outlined" />
               </el-icon>
             </div>
           </el-tooltip>
-          <el-tooltip effect="dark" placement="top">
+          <el-tooltip effect="dark" placement="bottom">
             <template #content>
               {{ t('chart.text_pos_right') }}
             </template>
             <div
               class="icon-btn"
               :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'right' }"
-              @click="setPosition('right')"
+              @click="setPosition('textAlign', 'right')"
+            >
+              <el-icon>
+                <Icon name="icon_right-alignment_outlined" />
+              </el-icon>
+            </div>
+          </el-tooltip>
+        </template>
+        <template v-if="styleForm.headHorizontalPosition">
+          <div class="m-divider"></div>
+          <el-tooltip effect="dark" placement="bottom">
+            <template #content>
+              {{ t('chart.text_pos_left') }}
+            </template>
+            <div
+              class="icon-btn"
+              :class="{
+                dark: themes === 'dark',
+                active: styleForm.headHorizontalPosition === 'left'
+              }"
+              @click="setPosition('headHorizontalPosition', 'left')"
+            >
+              <el-icon>
+                <Icon name="icon_left-alignment_outlined" />
+              </el-icon>
+            </div>
+          </el-tooltip>
+          <el-tooltip effect="dark" placement="bottom">
+            <template #content>
+              {{ t('chart.text_pos_center') }}
+            </template>
+            <div
+              class="icon-btn"
+              :class="{
+                dark: themes === 'dark',
+                active: styleForm.headHorizontalPosition === 'center'
+              }"
+              @click="setPosition('headHorizontalPosition', 'center')"
+            >
+              <el-icon>
+                <Icon name="icon_center-alignment_outlined" />
+              </el-icon>
+            </div>
+          </el-tooltip>
+          <el-tooltip effect="dark" placement="bottom">
+            <template #content>
+              {{ t('chart.text_pos_right') }}
+            </template>
+            <div
+              class="icon-btn"
+              :class="{
+                dark: themes === 'dark',
+                active: styleForm.headHorizontalPosition === 'right'
+              }"
+              @click="setPosition('headHorizontalPosition', 'right')"
             >
               <el-icon>
                 <Icon name="icon_right-alignment_outlined" />
@@ -173,6 +285,7 @@ const emits = defineEmits(['onTextChange'])
 const styleMounted = ref({
   opacity: 1,
   fontSize: 22,
+  activeFontSize: 22,
   fontWeight: 'normal',
   fontStyle: 'normal',
   textAlign: 'center',
@@ -237,8 +350,8 @@ const checkItalic = () => {
   changeStyle()
 }
 
-function setPosition(p: 'left' | 'center' | 'right') {
-  styleForm.value.textAlign = p
+function setPosition(key, p: 'left' | 'center' | 'right') {
+  styleForm.value[key] = p
   changeStyle()
 }
 

From b9b10f79f66185867b07f9a0297bd4515f604ea0 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 26 Mar 2024 10:21:02 +0800
Subject: [PATCH 2/2] =?UTF-8?q?style(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=8C=BA=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/custom-component/common/CommonStyleSet.vue     | 10 +++++++++-
 .../src/custom-component/de-time-clock/TimeDefault.vue |  5 ++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
index d11c8e59db..89460beb24 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -153,7 +153,7 @@
           </div>
         </el-tooltip>
         <template v-if="styleForm.textAlign">
-          <div class="m-divider"></div>
+          <div class="m-divider" :class="'custom-divider-' + themes"></div>
           <el-tooltip effect="dark" placement="bottom">
             <template #content>
               {{ t('chart.text_pos_left') }}
@@ -466,6 +466,14 @@ watch(
   height: 18px;
   background: rgba(31, 35, 41, 0.15);
 }
+
+.custom-divider-light {
+  background-color: rgba(31, 35, 41, 0.15);
+}
+
+.custom-divider-dark {
+  background-color: #757575;
+}
 .form-item {
   &.no-margin-bottom {
     margin-bottom: 0 !important;
diff --git a/core/core-frontend/src/custom-component/de-time-clock/TimeDefault.vue b/core/core-frontend/src/custom-component/de-time-clock/TimeDefault.vue
index 2643e1835e..6d78612df6 100644
--- a/core/core-frontend/src/custom-component/de-time-clock/TimeDefault.vue
+++ b/core/core-frontend/src/custom-component/de-time-clock/TimeDefault.vue
@@ -1,5 +1,8 @@
 <template>
-  <div style="width: 100%; height: 100%; display: flex; align-items: center">
+  <div
+    style="width: 100%; height: 100%; display: flex; align-items: center"
+    :style="{ 'justify-content': element.style.textAlign }"
+  >
     <p>{{ state.nowDate }}</p>
   </div>
 </template>