From 1f1635c434deca705fdf1393fcffec57c9fe729f Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 25 Mar 2024 12:27:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E6=97=B6=E9=97=B4=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=8C=BA=E5=9F=9F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/common/CommonAttr.vue    | 118 +---------
 .../common/CommonStyleSet.vue                 | 217 ++++++++++++------
 .../src/custom-component/component-list.ts    |   3 +-
 3 files changed, 156 insertions(+), 182 deletions(-)

diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index b13295ff64..5aaf95972e 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -8,6 +8,7 @@ import BackgroundOverallCommon from '@/components/visualization/component-backgr
 import { useI18n } from '@/hooks/web/useI18n'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import CommonStyleSet from '@/custom-component/common/CommonStyleSet.vue'
 const snapshotStore = snapshotStoreWithOut()
 
 const { t } = useI18n()
@@ -136,126 +137,13 @@ const stopEvent = e => {
       </el-collapse-item>
       <slot></slot>
       <el-collapse-item
-        v-if="showStyle"
+        v-if="element && element.style"
         :effect="themes"
         title="样式"
         name="style"
         class="common-style-area"
       >
-        <el-form label-position="top">
-          <el-row :gutter="8">
-            <el-col
-              :span="colSpan"
-              v-for="({ key, label, min, max, step }, index) in styleKeys"
-              :key="index"
-            >
-              <el-form-item class="form-item" :class="'form-item-' + themes" :label="label">
-                <el-color-picker
-                  v-if="isIncludesColor(key)"
-                  v-model="element.style[key]"
-                  :trigger-width="colorPickerWidth"
-                  :themes="themes"
-                  size="small"
-                  show-alpha
-                  is-custom
-                  @change="onStyleAttrChange($event, key)"
-                />
-                <el-radio-group
-                  :effect="themes"
-                  style="width: 100%"
-                  class="icon-radio-group"
-                  v-else-if="horizontalPosition.includes(key)"
-                  v-model="element.style[key]"
-                  @change="onStyleAttrChange($event, key)"
-                >
-                  <el-radio :effect="themes" label="left">
-                    <el-tooltip effect="dark" placement="top">
-                      <template #content>
-                        {{ t('chart.text_pos_left') }}
-                      </template>
-                      <div
-                        class="icon-btn"
-                        :class="{
-                          dark: themes === 'dark',
-                          active: element.style[key] === 'left'
-                        }"
-                      >
-                        <el-icon>
-                          <Icon name="filter-h-left" />
-                        </el-icon>
-                      </div>
-                    </el-tooltip>
-                  </el-radio>
-                  <el-radio :effect="themes" label="center">
-                    <el-tooltip effect="dark" placement="top">
-                      <template #content>
-                        {{ t('chart.text_pos_center') }}
-                      </template>
-                      <div
-                        class="icon-btn"
-                        :class="{
-                          dark: themes === 'dark',
-                          active: element.style[key] === 'center'
-                        }"
-                      >
-                        <el-icon>
-                          <Icon name="filter-h-center" />
-                        </el-icon>
-                      </div>
-                    </el-tooltip>
-                  </el-radio>
-                  <el-radio :effect="themes" label="right">
-                    <el-tooltip effect="dark" placement="top">
-                      <template #content>
-                        {{ t('chart.text_pos_right') }}
-                      </template>
-                      <div
-                        class="icon-btn"
-                        :class="{
-                          dark: themes === 'dark',
-                          active: element.style[key] === 'right'
-                        }"
-                      >
-                        <el-icon>
-                          <Icon name="filter-h-right" />
-                        </el-icon>
-                      </div>
-                    </el-tooltip>
-                  </el-radio>
-                </el-radio-group>
-                <el-select
-                  v-else-if="selectKey.includes(key)"
-                  style="width: 100%"
-                  size="small"
-                  :effect="themes"
-                  v-model="element.style[key]"
-                  @change="onStyleAttrChange($event, key)"
-                >
-                  <el-option
-                    v-for="item in optionMap[key]"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-                <el-input-number
-                  @keydown="stopEvent"
-                  @keyup="stopEvent"
-                  v-else
-                  size="middle"
-                  style="width: 100%"
-                  controls-position="right"
-                  :min="min"
-                  :max="max"
-                  :step="step"
-                  :effect="themes"
-                  v-model="element.style[key]"
-                  @change="onStyleAttrChange($event, key)"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
+        <common-style-set :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 6daca77f0e..ceae762187 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -1,27 +1,35 @@
 <template>
   <el-row class="custom-row">
-    <el-row style="margin-top: 8px">
+    <el-row style="margin: 8px 0px 24px 0px">
       <el-space wrap>
-        <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+        <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="titleForm.color"
+            v-model="styleForm.color"
             class="color-picker-style"
             is-custom
             :predefine="state.predefineColors"
-            @change="changeTitleStyle('color')"
+            @change="changeStyle"
           />
         </el-form-item>
 
-        <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+        <el-form-item
+          v-if="styleForm.fontSize"
+          class="form-item no-margin-bottom"
+          :class="'form-item-' + themes"
+        >
           <el-select
             style="width: 56px"
             :effect="themes"
             :title="t('chart.text_fontsize')"
-            v-model="titleForm.fontSize"
+            v-model="styleMounted.fontSize"
             :placeholder="'大小'"
             size="small"
-            @change="changeTitleStyle('fontSize')"
+            @change="sizeChange('fontSize')"
           >
             <el-option
               v-for="option in fontSizeList"
@@ -32,13 +40,36 @@
           </el-select>
         </el-form-item>
 
-        <el-tooltip effect="dark" placement="top">
+        <el-form-item
+          v-if="styleForm.opacity"
+          class="form-item no-margin-bottom"
+          :class="'form-item-' + themes"
+        >
+          <el-select
+            style="width: 56px"
+            :effect="themes"
+            title="透明度"
+            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 v-if="styleForm.fontWeight !== undefined" effect="dark" placement="top">
           <template #content>
             {{ t('chart.bolder') }}
           </template>
           <div
             class="icon-btn"
-            :class="{ dark: themes === 'dark', active: titleForm.isBolder }"
+            :class="{ dark: themes === 'dark', active: styleForm.fontWeight === 'bold' }"
             @click="checkBold"
           >
             <el-icon>
@@ -47,13 +78,13 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip effect="dark" placement="top">
+        <el-tooltip v-if="styleForm.fontStyle !== undefined" effect="dark" placement="top">
           <template #content>
             {{ t('chart.italic') }}
           </template>
           <div
             class="icon-btn"
-            :class="{ dark: themes === 'dark', active: titleForm.isItalic }"
+            :class="{ dark: themes === 'dark', active: styleForm.fontStyle === 'italic' }"
             @click="checkItalic"
           >
             <el-icon>
@@ -64,61 +95,69 @@
 
         <div class="m-divider"></div>
 
-        <el-tooltip effect="dark" placement="top">
-          <template #content>
-            {{ t('chart.text_pos_left') }}
-          </template>
-          <div
-            class="icon-btn"
-            :class="{ dark: themes === 'dark', active: titleForm.hPosition === 'left' }"
-            @click="setPosition('left')"
-          >
-            <el-icon>
-              <Icon name="icon_left-alignment_outlined" />
-            </el-icon>
-          </div>
-        </el-tooltip>
-        <el-tooltip effect="dark" placement="top">
-          <template #content>
-            {{ t('chart.text_pos_center') }}
-          </template>
-          <div
-            class="icon-btn"
-            :class="{ dark: themes === 'dark', active: titleForm.hPosition === 'center' }"
-            @click="setPosition('center')"
-          >
-            <el-icon>
-              <Icon name="icon_center-alignment_outlined" />
-            </el-icon>
-          </div>
-        </el-tooltip>
-        <el-tooltip effect="dark" placement="top">
-          <template #content>
-            {{ t('chart.text_pos_right') }}
-          </template>
-          <div
-            class="icon-btn"
-            :class="{ dark: themes === 'dark', active: titleForm.hPosition === 'right' }"
-            @click="setPosition('right')"
-          >
-            <el-icon>
-              <Icon name="icon_right-alignment_outlined" />
-            </el-icon>
-          </div>
-        </el-tooltip>
+        <template v-if="styleForm.textAlign">
+          <el-tooltip effect="dark" placement="top">
+            <template #content>
+              {{ t('chart.text_pos_left') }}
+            </template>
+            <div
+              class="icon-btn"
+              :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'left' }"
+              @click="setPosition('left')"
+            >
+              <el-icon>
+                <Icon name="icon_left-alignment_outlined" />
+              </el-icon>
+            </div>
+          </el-tooltip>
+          <el-tooltip effect="dark" placement="top">
+            <template #content>
+              {{ t('chart.text_pos_center') }}
+            </template>
+            <div
+              class="icon-btn"
+              :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'center' }"
+              @click="setPosition('center')"
+            >
+              <el-icon>
+                <Icon name="icon_center-alignment_outlined" />
+              </el-icon>
+            </div>
+          </el-tooltip>
+          <el-tooltip effect="dark" placement="top">
+            <template #content>
+              {{ t('chart.text_pos_right') }}
+            </template>
+            <div
+              class="icon-btn"
+              :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'right' }"
+              @click="setPosition('right')"
+            >
+              <el-icon>
+                <Icon name="icon_right-alignment_outlined" />
+              </el-icon>
+            </div>
+          </el-tooltip>
+        </template>
       </el-space>
     </el-row>
   </el-row>
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, toRefs } from 'vue'
+import { computed, reactive, ref, toRefs, watch } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useI18n } from '@/hooks/web/useI18n'
 import Icon from '@/components/icon-custom/src/Icon.vue'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { storeToRefs } from 'pinia'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
+const snapshotStore = snapshotStoreWithOut()
+
+const { curComponent, canvasStyleData } = storeToRefs(dvMainStore)
+
 const props = withDefaults(
   defineProps<{
     themes?: EditorTheme
@@ -131,8 +170,18 @@ const props = withDefaults(
 
 const { themes, element } = toRefs(props)
 const emits = defineEmits(['onTextChange'])
+const styleMounted = ref({
+  opacity: 1,
+  fontSize: 22,
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  textAlign: 'center',
+  color: '#000000'
+})
 
-const titleForm = computed<any>(() => dvMainStore.canvasStyleData.component.chartTitle)
+const opacitySizeList = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+
+const styleForm = computed<any>(() => element.value.style)
 const state = reactive({
   fontSize: [],
   isSetting: false,
@@ -149,24 +198,60 @@ const fontSizeList = computed(() => {
   return arr
 })
 
-const changeTitleStyle = modifyName => {
-  titleForm.value['modifyName'] = modifyName
-  emits('onTextChange', titleForm.value)
+const styleInit = () => {
+  if (curComponent.value) {
+    Object.keys(styleMounted.value).forEach(key => {
+      styleMounted.value[key] = Math.round(
+        (curComponent.value.style[key] * 100) / canvasStyleData.value.scale
+      )
+    })
+  }
 }
 
-function checkBold() {
-  titleForm.value.isBolder = !titleForm.value.isBolder
-  changeTitleStyle('isBolder')
+const sizeChange = key => {
+  curComponent.value.style[key] = Math.round(
+    (styleMounted.value[key] * canvasStyleData.value.scale) / 100
+  )
+  changeStyle()
 }
-function checkItalic() {
-  titleForm.value.isItalic = !titleForm.value.isItalic
-  changeTitleStyle('isItalic')
+
+const changeStyle = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
+const checkBold = () => {
+  if (styleForm.value.fontWeight === 'normal') {
+    styleForm.value.fontWeight = 'bold'
+  } else {
+    styleForm.value.fontWeight = 'normal'
+  }
+  changeStyle()
+}
+
+const checkItalic = () => {
+  if (styleForm.value.fontStyle === 'normal') {
+    styleForm.value.fontStyle = 'italic'
+  } else {
+    styleForm.value.fontStyle = 'normal'
+  }
+  changeStyle()
 }
 
 function setPosition(p: 'left' | 'center' | 'right') {
-  titleForm.value.hPosition = p
-  changeTitleStyle('hPosition')
+  styleForm.value.textAlign = p
+  changeStyle()
 }
+
+watch(
+  () => curComponent.value,
+  () => {
+    styleInit()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
 </script>
 
 <style scoped lang="less">
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index efa0b16a69..d380b4b1bd 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -149,7 +149,8 @@ const list = [
       width: 300,
       height: 100,
       fontSize: 22,
-      fontWeight: 400,
+      fontWeight: 'normal',
+      fontStyle: 'normal',
       textAlign: 'center',
       color: '#000000'
     },