From 63e8e842f08a8dfda3082b8cd54e12176655bdd1 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sun, 3 Nov 2024 13:35:18 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=8C=87=E6=A0=87=E5=8D=A1=E3=80=81=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=AD=89=E5=9C=A8=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/data-visualization/snapshot.ts    |   3 +-
 .../editor/editor-style/ChartStyle.vue        |   8 +-
 .../editor/editor-style/VQueryChartStyle.vue  |  18 +-
 .../editor-style/components/MiscSelector.vue  | 388 +++++++++---------
 .../src/views/mobile/panel/index.vue          |   2 +-
 5 files changed, 222 insertions(+), 197 deletions(-)

diff --git a/core/core-frontend/src/store/modules/data-visualization/snapshot.ts b/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
index 9e45e520dd..16f0d85bec 100644
--- a/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
@@ -164,7 +164,8 @@ export const snapshotStore = defineStore('snapshot', {
 
     recordSnapshot() {
       this.styleChangeTimes = ++this.styleChangeTimes
-      if (dataPrepareState.value) {
+      // 移动端设计时暂不保存镜像
+      if (dataPrepareState.value && !mobileInPc) {
         const snapshotComponentData = deepCopy(componentData.value)
         dvMainStore.removeGroupArea(snapshotComponentData)
         // 添加新的快照
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index 748e597fe1..3d4aa62abf 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -409,6 +409,7 @@ watch(
               class="attr-selector"
               :chart="chart"
               :quota-fields="props.quotaData"
+              :mobile-in-pc="mobileInPc"
               @onMiscChange="onMiscChange"
             />
           </el-collapse-item>
@@ -445,9 +446,12 @@ watch(
               @onLabelChange="onLabelChange"
             />
           </collapse-switch-item>
-          <!-- tooltip 为鼠标悬停 移动端看不到效果 不再单独配置 -->
+          <!-- tooltip 为鼠标悬停 移动端table看不到效果 不再单独配置 -->
           <collapse-switch-item
-            v-if="showProperties('tooltip-selector') && !mobileInPc"
+            v-if="
+              showProperties('tooltip-selector') &&
+              (!mobileInPc || (mobileInPc && chart.type.indexOf('table') === -1))
+            "
             v-model="chart.customAttr.tooltip.show"
             :themes="themes"
             :change-model="chart.customAttr.tooltip"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index 78dc812123..cb43a43d29 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -126,6 +126,7 @@ const handleCurrentPlaceholder = val => {
     obj.placeholder = ''
   }
   currentSearch.value = obj
+  snapshotStore.recordSnapshotCacheToMobile('propValue')
 }
 
 const init = () => {
@@ -182,8 +183,20 @@ const checkBold = type => {
   chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'bold'
 }
 
+const handleCurrentPlaceholderCustomChange = () => {
+  if (mobileInPc.value) {
+    //移动端设计
+    useEmitt().emitter.emit('onMobileStatusChange', {
+      type: 'componentStyleChange',
+      value: { type: 'renderChart', component: JSON.parse(JSON.stringify(chart.value)) }
+    })
+  } else {
+    snapshotStore.recordSnapshotCache()
+  }
+}
+
 const handleCurrentPlaceholderChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCacheToMobile('propValue')
 }
 
 const checkItalic = type => {
@@ -409,6 +422,7 @@ initParams()
               <el-checkbox
                 :effect="themes"
                 size="small"
+                @change="handleCurrentPlaceholderCustomChange"
                 v-model="chart.customStyle.component.placeholderShow"
               >
                 提示词
@@ -427,10 +441,12 @@ initParams()
                   is-custom
                   v-model="chart.customStyle.component.text"
                   :disabled="!chart.customStyle.component.placeholderShow"
+                  @change="handleCurrentPlaceholderCustomChange"
                   :predefine="predefineColors"
                 />
                 <el-input-number
                   v-model="chart.customStyle.component.placeholderSize"
+                  @change="handleCurrentPlaceholderCustomChange"
                   :min="10"
                   :max="20"
                   style="margin-left: 8px"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
index 560d86bd43..7d80ad3f03 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
@@ -17,8 +17,9 @@ const props = withDefaults(
     themes?: EditorTheme
     quotaFields: Array<any>
     propertyInner?: Array<string>
+    mobileInPc?: boolean
   }>(),
-  { themes: 'dark' }
+  { themes: 'dark', mobileInPc: false }
 )
 
 useEmitt({
@@ -391,202 +392,205 @@ onMounted(() => {
     </el-row>
 
     <!--gauge-begin-->
-    <el-form-item
-      v-show="showProperty('gaugeMinType')"
-      class="form-item margin-bottom-8"
-      :label="t('chart.min')"
-      :class="'form-item-' + themes"
-    >
-      <el-radio-group
-        :effect="themes"
-        v-model="state.miscForm.gaugeMinType"
-        size="small"
-        @change="changeQuotaField('min')"
+    <template v-if="!mobileInPc">
+      <el-form-item
+        v-show="showProperty('gaugeMinType')"
+        class="form-item margin-bottom-8"
+        :label="t('chart.min')"
+        :class="'form-item-' + themes"
       >
-        <el-radio :effect="themes" label="fix">{{ t('chart.fix') }}</el-radio>
-        <el-radio :effect="themes" label="dynamic">{{ t('chart.dynamic') }}</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item
-      v-if="showProperty('gaugeMin') && state.miscForm.gaugeMinType === 'fix'"
-      class="form-item"
-      :class="'form-item-' + themes"
-    >
-      <el-input-number
-        :effect="themes"
-        v-model="state.miscForm.gaugeMin"
-        size="small"
-        controls-position="right"
-        @change="changeMisc('gaugeMin')"
-      />
-    </el-form-item>
-    <el-row
-      :gutter="8"
-      v-if="showProperty('gaugeMinField') && state.miscForm.gaugeMinType === 'dynamic'"
-    >
-      <el-col :span="12">
-        <el-form-item class="form-item" :class="'form-item-' + themes">
-          <el-select
-            :effect="themes"
-            :placeholder="t('chart.field')"
-            :class="{ 'invalid-field': !validMinField }"
-            v-model="state.miscForm.gaugeMinField.id"
-            @change="changeQuotaField('min', true)"
-          >
-            <el-option
-              class="series-select-option"
-              v-for="item in state.quotaData"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
+        <el-radio-group
+          :effect="themes"
+          v-model="state.miscForm.gaugeMinType"
+          size="small"
+          @change="changeQuotaField('min')"
+        >
+          <el-radio :effect="themes" label="fix">{{ t('chart.fix') }}</el-radio>
+          <el-radio :effect="themes" label="dynamic">{{ t('chart.dynamic') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        v-if="showProperty('gaugeMin') && state.miscForm.gaugeMinType === 'fix'"
+        class="form-item"
+        :class="'form-item-' + themes"
+      >
+        <el-input-number
+          :effect="themes"
+          v-model="state.miscForm.gaugeMin"
+          size="small"
+          controls-position="right"
+          @change="changeMisc('gaugeMin')"
+        />
+      </el-form-item>
+      <el-row
+        :gutter="8"
+        v-if="showProperty('gaugeMinField') && state.miscForm.gaugeMinType === 'dynamic'"
+      >
+        <el-col :span="12">
+          <el-form-item class="form-item" :class="'form-item-' + themes">
+            <el-select
+              :effect="themes"
+              :placeholder="t('chart.field')"
+              :class="{ 'invalid-field': !validMinField }"
+              v-model="state.miscForm.gaugeMinField.id"
+              @change="changeQuotaField('min', true)"
             >
-              <el-icon style="margin-right: 8px">
-                <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                  ><component
-                    class="svg-icon"
-                    :class="`field-icon-${fieldType[item.deType]}`"
-                    :is="iconFieldMap[fieldType[item.deType]]"
-                  ></component
-                ></Icon>
-              </el-icon>
-              {{ item.name }}
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item class="form-item" :class="'form-item-' + themes">
-          <el-select
-            :effect="themes"
-            :placeholder="t('chart.summary')"
-            v-model="state.miscForm.gaugeMinField.summary"
-            @change="changeQuotaField('min')"
-          >
-            <el-option v-if="validMinField" key="sum" value="sum" :label="t('chart.sum')" />
-            <el-option v-if="validMinField" key="avg" value="avg" :label="t('chart.avg')" />
-            <el-option v-if="validMinField" key="max" value="max" :label="t('chart.max')" />
-            <el-option v-if="validMinField" key="min" value="min" :label="t('chart.min')" />
-            <el-option
-              v-if="validMinField"
-              key="stddev_pop"
-              value="stddev_pop"
-              :label="t('chart.stddev_pop')"
-            />
-            <el-option
-              v-if="validMinField"
-              key="var_pop"
-              value="var_pop"
-              :label="t('chart.var_pop')"
-            />
-            <el-option key="count" value="count" :label="t('chart.count')" />
-            <el-option
-              v-if="state.minField.id !== '-1'"
-              key="count_distinct"
-              value="count_distinct"
-              :label="t('chart.count_distinct')"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
+              <el-option
+                class="series-select-option"
+                v-for="item in state.quotaData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+                <el-icon style="margin-right: 8px">
+                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component
+                      class="svg-icon"
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
+                  ></Icon>
+                </el-icon>
+                {{ item.name }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item class="form-item" :class="'form-item-' + themes">
+            <el-select
+              :effect="themes"
+              :placeholder="t('chart.summary')"
+              v-model="state.miscForm.gaugeMinField.summary"
+              @change="changeQuotaField('min')"
+            >
+              <el-option v-if="validMinField" key="sum" value="sum" :label="t('chart.sum')" />
+              <el-option v-if="validMinField" key="avg" value="avg" :label="t('chart.avg')" />
+              <el-option v-if="validMinField" key="max" value="max" :label="t('chart.max')" />
+              <el-option v-if="validMinField" key="min" value="min" :label="t('chart.min')" />
+              <el-option
+                v-if="validMinField"
+                key="stddev_pop"
+                value="stddev_pop"
+                :label="t('chart.stddev_pop')"
+              />
+              <el-option
+                v-if="validMinField"
+                key="var_pop"
+                value="var_pop"
+                :label="t('chart.var_pop')"
+              />
+              <el-option key="count" value="count" :label="t('chart.count')" />
+              <el-option
+                v-if="state.minField.id !== '-1'"
+                key="count_distinct"
+                value="count_distinct"
+                :label="t('chart.count_distinct')"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
-    <el-form-item
-      v-show="showProperty('gaugeMaxType')"
-      class="form-item margin-bottom-8"
-      :label="t('chart.max')"
-      :class="'form-item-' + themes"
-    >
-      <el-radio-group
-        v-model="state.miscForm.gaugeMaxType"
-        size="small"
-        @change="changeQuotaField('max')"
+      <el-form-item
+        v-show="showProperty('gaugeMaxType')"
+        class="form-item margin-bottom-8"
+        :label="t('chart.max')"
+        :class="'form-item-' + themes"
       >
-        <el-radio :effect="themes" label="fix">{{ t('chart.fix') }}</el-radio>
-        <el-radio :effect="themes" label="dynamic">{{ t('chart.dynamic') }}</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item
-      v-if="showProperty('gaugeMax') && state.miscForm.gaugeMaxType === 'fix'"
-      class="form-item"
-      :class="'form-item-' + themes"
-    >
-      <el-input-number
-        :effect="themes"
-        v-model="state.miscForm.gaugeMax"
-        size="small"
-        controls-position="right"
-        @blur="changeMaxValidate('gaugeMax')"
-      />
-    </el-form-item>
-    <el-row
-      :gutter="8"
-      v-if="showProperty('gaugeMaxField') && state.miscForm.gaugeMaxType === 'dynamic'"
-    >
-      <el-col :span="12">
-        <el-form-item class="form-item" :class="'form-item-' + themes">
-          <el-select
-            :effect="themes"
-            :placeholder="t('chart.field')"
-            :class="{ 'invalid-field': !validMaxField }"
-            v-model="state.miscForm.gaugeMaxField.id"
-            @change="changeQuotaField('max', true)"
-          >
-            <el-option
-              class="series-select-option"
-              v-for="item in state.quotaData"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
+        <el-radio-group
+          v-model="state.miscForm.gaugeMaxType"
+          size="small"
+          @change="changeQuotaField('max')"
+        >
+          <el-radio :effect="themes" label="fix">{{ t('chart.fix') }}</el-radio>
+          <el-radio :effect="themes" label="dynamic">{{ t('chart.dynamic') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        v-if="showProperty('gaugeMax') && state.miscForm.gaugeMaxType === 'fix'"
+        class="form-item"
+        :class="'form-item-' + themes"
+      >
+        <el-input-number
+          :effect="themes"
+          v-model="state.miscForm.gaugeMax"
+          size="small"
+          controls-position="right"
+          @blur="changeMaxValidate('gaugeMax')"
+        />
+      </el-form-item>
+      <el-row
+        :gutter="8"
+        v-if="showProperty('gaugeMaxField') && state.miscForm.gaugeMaxType === 'dynamic'"
+      >
+        <el-col :span="12">
+          <el-form-item class="form-item" :class="'form-item-' + themes">
+            <el-select
+              :effect="themes"
+              :placeholder="t('chart.field')"
+              :class="{ 'invalid-field': !validMaxField }"
+              v-model="state.miscForm.gaugeMaxField.id"
+              @change="changeQuotaField('max', true)"
             >
-              <el-icon style="margin-right: 8px">
-                <Icon :className="`field-icon-${fieldType[item.deType]}`"
-                  ><component
-                    :class="`field-icon-${fieldType[item.deType]}`"
-                    class="svg-icon"
-                    :is="iconFieldMap[fieldType[item.deType]]"
-                  ></component
-                ></Icon>
-              </el-icon>
-              {{ item.name }}
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item class="form-item" :class="'form-item-' + themes">
-          <el-select
-            :effect="themes"
-            v-model="state.miscForm.gaugeMaxField.summary"
-            :placeholder="t('chart.summary')"
-            @change="changeQuotaField('max')"
-          >
-            <el-option v-if="validMaxField" key="sum" value="sum" :label="t('chart.sum')" />
-            <el-option v-if="validMaxField" key="avg" value="avg" :label="t('chart.avg')" />
-            <el-option v-if="validMaxField" key="max" value="max" :label="t('chart.max')" />
-            <el-option v-if="validMaxField" key="min" value="min" :label="t('chart.min')" />
-            <el-option
-              v-if="validMaxField"
-              key="stddev_pop"
-              value="stddev_pop"
-              :label="t('chart.stddev_pop')"
-            />
-            <el-option
-              v-if="validMaxField"
-              key="var_pop"
-              value="var_pop"
-              :label="t('chart.var_pop')"
-            />
-            <el-option key="count" value="count" :label="t('chart.count')" />
-            <el-option
-              v-if="state.maxField.id !== '-1'"
-              key="count_distinct"
-              value="count_distinct"
-              :label="t('chart.count_distinct')"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
+              <el-option
+                class="series-select-option"
+                v-for="item in state.quotaData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+                <el-icon style="margin-right: 8px">
+                  <Icon :className="`field-icon-${fieldType[item.deType]}`"
+                    ><component
+                      :class="`field-icon-${fieldType[item.deType]}`"
+                      class="svg-icon"
+                      :is="iconFieldMap[fieldType[item.deType]]"
+                    ></component
+                  ></Icon>
+                </el-icon>
+                {{ item.name }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item class="form-item" :class="'form-item-' + themes">
+            <el-select
+              :effect="themes"
+              v-model="state.miscForm.gaugeMaxField.summary"
+              :placeholder="t('chart.summary')"
+              @change="changeQuotaField('max')"
+            >
+              <el-option v-if="validMaxField" key="sum" value="sum" :label="t('chart.sum')" />
+              <el-option v-if="validMaxField" key="avg" value="avg" :label="t('chart.avg')" />
+              <el-option v-if="validMaxField" key="max" value="max" :label="t('chart.max')" />
+              <el-option v-if="validMaxField" key="min" value="min" :label="t('chart.min')" />
+              <el-option
+                v-if="validMaxField"
+                key="stddev_pop"
+                value="stddev_pop"
+                :label="t('chart.stddev_pop')"
+              />
+              <el-option
+                v-if="validMaxField"
+                key="var_pop"
+                value="var_pop"
+                :label="t('chart.var_pop')"
+              />
+              <el-option key="count" value="count" :label="t('chart.count')" />
+              <el-option
+                v-if="state.maxField.id !== '-1'"
+                key="count_distinct"
+                value="count_distinct"
+                :label="t('chart.count_distinct')"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
     <!--gauge-end-->
 
     <!--liquid-begin-->
diff --git a/core/core-frontend/src/views/mobile/panel/index.vue b/core/core-frontend/src/views/mobile/panel/index.vue
index af4f333e06..b114f4c735 100644
--- a/core/core-frontend/src/views/mobile/panel/index.vue
+++ b/core/core-frontend/src/views/mobile/panel/index.vue
@@ -83,7 +83,7 @@ const hanedleMessage = event => {
     } else if (type === 'updateTitle') {
       mobileViewStyleSwitch(component)
       useEmitt().emitter.emit('updateTitle-' + component.id)
-    } else if (['style', 'commonBackground', 'events'].includes(type)) {
+    } else if (['style', 'commonBackground', 'events', 'propValue'].includes(type)) {
       const mobileComponent = findComponentById(component.id)
       mobileComponent[type] = component[type]
     }