Merge pull request #10253 from dataease/pr@dev-v2_st

Pr@dev v2 st
2024-06-13 16:12:05 +08:00 · 2024-06-13 16:12:05 +08:00 · dae4267009
commit dae4267009
parent 7f04568fb8 40c26e6d52
10 changed files with 401 additions and 215 deletions
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@ -27,7 +27,7 @@
    "axios": "^1.3.3",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.9",
-    "element-plus-secondary": "^0.5.9",
+    "element-plus-secondary": "^0.5.11",
    "element-resize-detector": "^1.2.4",
    "file-saver": "^2.0.5",
    "flv.js": "^1.6.2",
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@ -69,15 +69,46 @@ const defaultStyle = {
  titleShow: false,
  titleColor: '',
  textColorShow: false,
-  labelColor: '',
  bgColorShow: false,
  borderShow: false,
-  labelColorShow: false,
-  title: ''
+  labelShow: true,
+  title: '',
+  labelColor: '#1f2329',
+  fontSize: '14',
+  fontWeight: '',
+  fontStyle: '',
+  fontSizeBtn: '14',
+  fontWeightBtn: '',
+  fontStyleBtn: '',
+  queryConditionWidth: 227,
+  nameboxSpacing: 8,
+  queryConditionSpacing: 16,
+  btnColor: '#3370ff',
+  labelColorBtn: '#ffffff'
 }
 const customStyle = reactive({ ...defaultStyle })
 const snapshotStore = snapshotStoreWithOut()

+const btnStyle = computed(() => {
+  const style = {
+    backgroundColor: customStyle.btnColor,
+    borderColor: customStyle.btnColor,
+    color: customStyle.labelColorBtn
+  } as CSSProperties
+  if (customStyle.fontSizeBtn) {
+    style.fontSize = customStyle.fontSizeBtn + 'px'
+  }
+
+  if (customStyle.fontWeightBtn) {
+    style.fontWeight = customStyle.fontWeightBtn
+  }
+
+  if (customStyle.fontStyleBtn) {
+    style.fontStyle = customStyle.fontStyleBtn
+  }
+
+  return style
+})
 const curComponentView = computed(() => {
  return (canvasViewInfo.value[element.value.id] || {}).customStyle
 })
@ -92,14 +123,25 @@ const setCustomStyle = val => {
    btnList,
    titleLayout,
    labelColor,
-    labelColorShow,
    text,
    bgColor,
    layout,
    titleShow,
    titleColor,
    textColorShow,
-    title
+    title,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    fontSizeBtn,
+    fontWeightBtn,
+    fontStyleBtn,
+    queryConditionWidth,
+    nameboxSpacing,
+    queryConditionSpacing,
+    labelColorBtn,
+    btnColor,
+    labelShow
  } = val
  customStyle.background = bgColorShow ? bgColor || '' : ''
  customStyle.border = borderShow ? borderColor || '' : ''
@ -107,10 +149,22 @@ const setCustomStyle = val => {
  customStyle.layout = layout
  customStyle.titleShow = titleShow
  customStyle.titleColor = titleColor
-  customStyle.labelColor = labelColorShow ? labelColor || '' : ''
+  customStyle.labelColor = labelShow ? labelColor || '' : ''
+  customStyle.fontSize = labelShow ? fontSize || '14' : '14'
+  customStyle.fontWeight = labelShow ? fontWeight || '' : ''
+  customStyle.fontStyle = labelShow ? fontStyle || '' : ''
  customStyle.title = title
  customStyle.text = textColorShow ? text || '' : ''
  customStyle.titleLayout = titleLayout
+  customStyle.fontSizeBtn = fontSizeBtn || '14'
+  customStyle.fontWeightBtn = fontWeightBtn
+  customStyle.fontStyleBtn = fontStyleBtn
+  customStyle.queryConditionWidth = queryConditionWidth ?? 227
+  customStyle.nameboxSpacing = nameboxSpacing ?? 8
+  customStyle.queryConditionSpacing = queryConditionSpacing ?? 16
+  customStyle.labelColorBtn = labelColorBtn || '#ffffff'
+  customStyle.labelShow = labelShow ?? true
+  customStyle.btnColor = btnColor || '#3370ff'
 }

 watch(
@ -196,10 +250,14 @@ const queryDataForId = id => {
    emitter.emit(`query-data-${ele}`)
  })
 }
-
+const getQueryConditionWidth = () => {
+  return customStyle.queryConditionWidth
+}
 provide('unmount-select', unMountSelect)
 provide('release-unmount-select', releaseSelect)
 provide('query-data-for-id', queryDataForId)
+provide('com-width', getQueryConditionWidth)
+
 onBeforeUnmount(() => {
  emitter.off(`addQueryCriteria${element.value.id}`)
  emitter.off(`editQueryCriteria${element.value.id}`)
@ -384,9 +442,21 @@ const titleStyle = computed(() => {
 })

 const labelStyle = computed(() => {
-  return {
-    color: customStyle.labelColor || '#1f2329'
+  const style = {
+    fontSize: customStyle.fontSize + 'px'
  } as CSSProperties
+  if (customStyle.fontWeight) {
+    style.fontWeight = customStyle.fontWeight
+  }
+
+  if (customStyle.fontStyle) {
+    style.fontStyle = customStyle.fontStyle
+  }
+
+  if (customStyle.labelColor) {
+    style.color = customStyle.labelColor
+  }
+  return style
 })
 const autoStyle = computed(() => {
  return {
@ -428,10 +498,15 @@ const autoStyle = computed(() => {
        </div>
      </div>
      <div class="query-fields-container">
-        <div class="query-item" :key="ele.id" v-for="(ele, index) in listVisible">
+        <div
+          class="query-item"
+          :style="{ marginRight: `${customStyle.queryConditionSpacing}px` }"
+          :key="ele.id"
+          v-for="(ele, index) in listVisible"
+        >
          <div class="query-field">
-            <div class="label">
-              <div class="label-wrapper">
+            <div class="label" :style="{ marginRight: `${customStyle.nameboxSpacing}px` }">
+              <div class="label-wrapper" v-show="customStyle.labelShow">
                <div class="label-wrapper-text" :style="labelStyle">
                  <el-tooltip effect="dark" :content="ele.name" placement="top">
                    {{ ele.name }}
@ -470,6 +545,7 @@ const autoStyle = computed(() => {
          <el-button
            @click.stop="queryData"
            style="margin-right: 7px"
+            :style="btnStyle"
            v-if="customStyle.btnList.includes('sure')"
            type="primary"
          >
@ -614,15 +690,10 @@ const autoStyle = computed(() => {
        position: relative;

        :deep(.ed-date-editor) {
-          width: 227px;
          .ed-input__wrapper {
            width: 100%;
          }
        }
-
-        :deep(.ed-select-v2) {
-          min-width: 170px;
-        }
      }
    }
  }
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@ -69,6 +69,8 @@ const options = shallowRef([])
 const unMountSelect: Ref = inject('unmount-select')
 const releaseSelect = inject('release-unmount-select', Function, true)
 const queryDataForId = inject('query-data-for-id', Function, true)
+const queryConditionWidth = inject('com-width', Function, true)
+
 const setDefaultMapValue = arr => {
  const { displayId, field } = config.value
  if (!displayId) {
@ -444,7 +446,7 @@ const init = () => {
 }

 const selectStyle = computed(() => {
-  return props.isConfig ? {} : { width: '227px' }
+  return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
 })

 const mult = ref()
--- a/core/core-frontend/src/custom-component/v-query/TextSearch.vue
+++ b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { toRefs, onBeforeMount, type PropType, inject, type CSSProperties } from 'vue'
+import { toRefs, onBeforeMount, type PropType, inject, computed } from 'vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
 interface SelectConfig {
  conditionValueOperatorF: string
  conditionValueF: string
@ -22,7 +24,8 @@ const operators = [
    value: 'like'
  }
 ]
-
+const dvMainStore = dvMainStoreWithOut()
+const { dvInfo } = storeToRefs(dvMainStore)
 const props = defineProps({
  config: {
    type: Object as PropType<SelectConfig>,
@ -57,7 +60,15 @@ const setParams = () => {
 onBeforeMount(() => {
  setParams()
 })
+const queryConditionWidth = inject('com-width', Function, true)
 const customStyle = inject<{ background: string }>('$custom-style-filter')
+const selectStyle = computed(() => {
+  return { width: queryConditionWidth() + 'px' }
+})
+
+const lineWidth = computed(() => {
+  return { width: queryConditionWidth() - 15 + 'px' }
+})
 </script>

 <template>
@ -65,27 +76,37 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
    <div class="condition-type">
      <el-select
        class="condition-value-select"
+        :effect="dvInfo.type === 'dataV' ? 'dark' : ''"
        popper-class="condition-value-select-popper"
        v-model="config.conditionValueOperatorF"
      >
        <el-option v-for="ele in operators" :key="ele.value" :label="ele.label" :value="ele.value">
        </el-option>
      </el-select>
-      <el-input class="condition-value-input" v-model="config.conditionValueF" />
-      <div class="bottom-line"></div>
+      <el-input
+        :style="selectStyle"
+        class="condition-value-input"
+        v-model="config.conditionValueF"
+      />
+      <div :style="lineWidth" class="bottom-line"></div>
    </div>
    <div class="condition-type" v-if="[1, 2].includes(config.conditionType)">
      <sapn class="condition-type-tip">{{ config.conditionType === 1 ? '与' : '或' }}</sapn>
      <el-select
        class="condition-value-select"
+        :effect="dvInfo.type === 'dataV' ? 'dark' : ''"
        popper-class="condition-value-select-popper"
        v-model="config.conditionValueOperatorS"
      >
        <el-option v-for="ele in operators" :key="ele.value" :label="ele.label" :value="ele.value">
        </el-option>
      </el-select>
-      <el-input class="condition-value-input" v-model="config.conditionValueS" />
-      <div class="bottom-line next-line"></div>
+      <el-input
+        :style="selectStyle"
+        class="condition-value-input"
+        v-model="config.conditionValueS"
+      />
+      <div :style="lineWidth" class="bottom-line next-line"></div>
    </div>
  </div>
 </template>
@ -145,12 +166,7 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
      position: absolute;
      right: 5px;
      bottom: 3px;
-      width: 195px;
      z-index: 10;
-
-      &.next-line {
-        width: 195px;
-      }
    }
  }
 }
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed } from 'vue'
+import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed, inject } from 'vue'
 import { type DatePickType } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import type { ManipulateType } from 'dayjs'
@ -81,101 +81,6 @@ watch(
    })
  }
 )
-const isInRange = (ele, startWindowTime, timeStamp) => {
-  const {
-    intervalType,
-    regularOrTrends,
-    regularOrTrendsValue,
-    relativeToCurrent,
-    timeNum,
-    relativeToCurrentType,
-    around,
-    dynamicWindow,
-    maximumSingleQuery,
-    timeNumRange,
-    relativeToCurrentTypeRange,
-    aroundRange
-  } = ele.timeRange || {}
-  let isDynamicWindowTime = false
-  const noTime = ele.timeGranularityMultiple.split('time').join('').split('range')[0]
-  const queryTimeType = noTime === 'date' ? 'day' : (noTime as ManipulateType)
-  if (startWindowTime && dynamicWindow) {
-    isDynamicWindowTime =
-      dayjs(startWindowTime)
-        .add(maximumSingleQuery, queryTimeType)
-        .startOf(queryTimeType)
-        .valueOf() -
-        1000 <
-      timeStamp
-  }
-
-  if (intervalType === 'none') {
-    if (dynamicWindow) return isDynamicWindowTime
-    return false
-  }
-  let startTime
-  if (relativeToCurrent === 'custom') {
-    startTime = getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-  } else {
-    switch (relativeToCurrent) {
-      case 'thisYear':
-        startTime = getThisStart('year')
-        break
-      case 'lastYear':
-        startTime = getLastStart('year')
-        break
-      case 'thisMonth':
-        startTime = getThisStart('month')
-        break
-      case 'lastMonth':
-        startTime = getLastStart('month')
-        break
-      case 'today':
-        startTime = getThisStart('day')
-        break
-      case 'yesterday':
-        startTime = getLastStart('day')
-        break
-      case 'monthBeginning':
-        startTime = getThisStart('month')
-        break
-      case 'yearBeginning':
-        startTime = getThisStart('year')
-        break
-
-      default:
-        break
-    }
-  }
-  const startValue = regularOrTrends === 'fixed' ? regularOrTrendsValue : startTime
-  if (intervalType === 'start') {
-    return startWindowTime < +new Date(startValue) || isDynamicWindowTime
-  }
-
-  if (intervalType === 'end') {
-    return timeStamp > +new Date(startValue) || isDynamicWindowTime
-  }
-
-  if (intervalType === 'timeInterval') {
-    const startTime =
-      regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[0]
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-    const endTime =
-      regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[1]
-        : getAround(
-            relativeToCurrentTypeRange,
-            aroundRange === 'f' ? 'subtract' : 'add',
-            timeNumRange
-          )
-    return (
-      startWindowTime < +new Date(startTime) - 1000 ||
-      timeStamp > +new Date(endTime) ||
-      isDynamicWindowTime
-    )
-  }
-}
 const callback = param => {
  startWindowTime.value = param[0]
  const disabled = param.some(ele => {
@ -243,8 +148,14 @@ const init = () => {
  multiple.value = config.value.displayType === '7'
 }

+const queryConditionWidth = inject('com-width', Function, true)
 const selectStyle = computed(() => {
-  return props.isConfig ? {} : { width: multiple.value ? '470px' : '227px' }
+  return props.isConfig
+    ? {}
+    : {
+        width:
+          (multiple.value ? queryConditionWidth() * 2 : queryConditionWidth()) + 'px !important'
+      }
 })

 const columnsType = computed(() => {
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@ -409,7 +409,6 @@ export const dvMainStore = defineStore('dataVisualization', {
              borderShow: false,
              text,
              textColorShow: false,
-              labelColorShow: false,
              labelColor,
              borderColor,
              title: '',
@ -419,7 +418,19 @@ export const dvMainStore = defineStore('dataVisualization', {
              titleColor,
              titleLayout,
              layout,
-              btnList: ['sure']
+              btnList: ['sure'],
+              fontSize: '14',
+              labelShow: true,
+              fontWeight: '',
+              fontStyle: '',
+              fontSizeBtn: '14',
+              fontWeightBtn: '',
+              fontStyleBtn: '',
+              queryConditionWidth: 227,
+              nameboxSpacing: 8,
+              queryConditionSpacing: 16,
+              labelColorBtn: '#ffffff',
+              btnColor: '#3370ff'
            }
          }
        }
--- a/core/core-frontend/src/utils/canvasStyle.ts
+++ b/core/core-frontend/src/utils/canvasStyle.ts
@ -475,7 +475,7 @@ interface CanvasViewInfo {
 }

 const colors = ['labelColor', 'borderColor', 'text', 'bgColor']
-const colorsSwitch = ['labelColorShow', 'borderShow', 'textColorShow', 'bgColorShow']
+const colorsSwitch = ['borderShow', 'textColorShow', 'bgColorShow']

 export function adaptCurThemeFilterStyleAllKeyComponent(component) {
  if (isFilterComponent(component.type)) {
--- 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
@ -1,11 +1,12 @@
 <script lang="tsx" setup>
 import { useI18n } from '@/hooks/web/useI18n'
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, computed } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
-const { t } = useI18n()
+import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'

+const { t } = useI18n()
 const state = {
-  styleActiveNames: ['component']
+  styleActiveNames: ['basicStyle']
 }

 const props = defineProps({
@ -26,16 +27,52 @@ const props = defineProps({
    default: 'dark'
  }
 })
+const toolTip = computed(() => {
+  return props.themes === 'dark' ? 'ndark' : 'dark'
+})
 const predefineColors = COLOR_PANEL
+const fontSizeList = []
+for (let i = 10; i <= 60; i = i + 2) {
+  fontSizeList.push({
+    name: i + '',
+    value: i + ''
+  })
+}

-const { element, chart, commonBackgroundPop } = toRefs(props)
+const checkBold = type => {
+  if (!chart.value.customStyle.component.labelShow) return
+  chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'bold'
+}
+
+const checkItalic = type => {
+  if (!chart.value.customStyle.component.labelShow) return
+  chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'italic'
+}
+const { chart, commonBackgroundPop } = toRefs(props)
+if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
+  chart.value.customStyle.component = {
+    ...chart.value.customStyle.component,
+    labelShow: true,
+    fontWeight: '',
+    fontStyle: '',
+    fontSize: '14',
+    fontSizeBtn: '14',
+    fontWeightBtn: '',
+    fontStyleBtn: '',
+    queryConditionWidth: 227,
+    nameboxSpacing: 8,
+    queryConditionSpacing: 16,
+    labelColorBtn: '#ffffff',
+    btnColor: '#3370ff'
+  }
+}
 </script>

 <template>
  <div class="attr-style">
    <el-row class="de-collapse-style">
      <el-collapse v-model="state.styleActiveNames" class="style-collapse">
-        <el-collapse-item :effect="themes" name="component" :title="t('visualization.module')">
+        <el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
          <el-form label-position="top">
            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
              <el-checkbox
@ -95,29 +132,10 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                :predefine="predefineColors"
              />
            </el-form-item>
-            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
-              <el-checkbox
-                :effect="themes"
-                size="small"
-                v-model="chart.customStyle.component.labelColorShow"
-              >
-                标签颜色
-              </el-checkbox>
-            </el-form-item>
-            <el-form-item
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <el-color-picker
-                :effect="themes"
-                :trigger-width="108"
-                is-custom
-                v-model="chart.customStyle.component.labelColor"
-                :disabled="!chart.customStyle.component.labelColorShow"
-                :predefine="predefineColors"
-              />
-            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <el-collapse-item :effect="themes" name="addition" title="查询条件">
+          <el-form label-position="top">
            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
              <el-checkbox
                :effect="themes"
@ -187,8 +205,134 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                :predefine="predefineColors"
              />
            </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="查询条件宽度"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.queryConditionWidth"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="查询条件间距"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.queryConditionSpacing"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <collapse-switch-item
+          :themes="themes"
+          v-model="chart.customStyle.component.labelShow"
+          name="legend"
+          title="查询条件名称"
+        >
+          <el-form
+            :class="!chart.customStyle.component.labelShow && 'is-disabled'"
+            :disabled="!chart.customStyle.component.labelShow"
+            label-position="top"
+          >
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              :label="t('visualization.position_adjust')"
+              :class="'form-item-' + themes"
+            >
+              <el-radio-group :effect="themes" v-model="chart.customStyle.component.layout">
+                <el-radio label="vertical"> 上侧 </el-radio>
+                <el-radio label="horizontal"> 左侧 </el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              :label="t('chart.textColor')"
+              class="form-item margin-bottom-8"
+              :class="'form-item-' + themes"
+            >
+              <el-color-picker
+                :effect="themes"
+                is-custom
+                v-model="chart.customStyle.component.labelColor"
+                :predefine="predefineColors"
+              /><el-tooltip content="字号" :effect="toolTip" placement="top">
+                <el-select
+                  style="width: 80px; margin: 0 8px"
+                  :effect="themes"
+                  v-model="chart.customStyle.component.fontSize"
+                  :placeholder="t('chart.text_fontsize')"
+                  size="small"
+                >
+                  <el-option
+                    v-for="option in fontSizeList"
+                    :key="option.value"
+                    :label="option.name"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-tooltip>
+              <el-tooltip effect="dark" placement="bottom">
+                <template #content>
+                  {{ t('chart.bolder') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: chart.customStyle.component.fontWeight === 'bold'
+                  }"
+                  style="margin-right: 8px"
+                  @click="checkBold('fontWeight')"
+                >
+                  <el-icon>
+                    <Icon name="icon_bold_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>

-            <el-divider :effect="themes" class="m-divider" />
+              <el-tooltip effect="dark" placement="bottom">
+                <template #content>
+                  {{ t('chart.italic') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: chart.customStyle.component.fontStyle === 'italic'
+                  }"
+                  @click="checkItalic('fontStyle')"
+                >
+                  <el-icon>
+                    <Icon name="icon_italic_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="名称与选框间距"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.nameboxSpacing"
+                :min="0"
+                :max="50"
+                controls-position="right"
+              />
+            </el-form-item>
+          </el-form>
+        </collapse-switch-item>
+        <el-collapse-item :effect="themes" name="button" :title="t('commons.button')">
+          <el-form label-position="top">
            <el-form-item
              :effect="themes"
              class="form-item"
@ -207,55 +351,77 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
+            <el-form-item class="form-item" label="按钮颜色" :class="'form-item-' + themes">
+              <el-color-picker
+                :effect="themes"
+                :trigger-width="108"
+                is-custom
+                v-model="chart.customStyle.component.btnColor"
+                :predefine="predefineColors"
+              />
+            </el-form-item>
            <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('chart.label_position')"
+              label="按钮文字"
+              class="form-item margin-bottom-8"
              :class="'form-item-' + themes"
            >
-              <el-radio-group
+              <el-color-picker
                :effect="themes"
-                class="icon-radio-group"
-                v-model="chart.customStyle.component.layout"
-              >
-                <el-radio :effect="themes" label="vertical">
-                  <el-tooltip effect="dark" placement="top">
-                    <template #content>
-                      {{ t('chart.text_pos_top') }}
-                    </template>
-                    <div
-                      class="icon-btn"
-                      :class="{
-                        dark: themes === 'dark',
-                        active: chart.customStyle.component.layout === 'vertical'
-                      }"
-                    >
-                      <el-icon>
-                        <Icon name="icon_title-top-align_outlined" />
-                      </el-icon>
-                    </div>
-                  </el-tooltip>
-                </el-radio>
+                is-custom
+                v-model="chart.customStyle.component.labelColorBtn"
+                :predefine="predefineColors"
+              /><el-tooltip content="字号" :effect="toolTip" placement="top">
+                <el-select
+                  style="width: 80px; margin: 0 8px"
+                  :effect="themes"
+                  v-model="chart.customStyle.component.fontSizeBtn"
+                  :placeholder="t('chart.text_fontsize')"
+                  size="small"
+                >
+                  <el-option
+                    v-for="option in fontSizeList"
+                    :key="option.value"
+                    :label="option.name"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-tooltip>
+              <el-tooltip effect="dark" placement="bottom">
+                <template #content>
+                  {{ t('chart.bolder') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: chart.customStyle.component.fontWeightBtn === 'bold'
+                  }"
+                  style="margin-right: 8px"
+                  @click="checkBold('fontWeightBtn')"
+                >
+                  <el-icon>
+                    <Icon name="icon_bold_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>

-                <el-radio label="horizontal">
-                  <el-tooltip effect="dark" placement="top">
-                    <template #content>
-                      {{ t('chart.text_pos_left') }}
-                    </template>
-                    <div
-                      class="icon-btn"
-                      :class="{
-                        dark: themes === 'dark',
-                        active: chart.customStyle.component.layout === 'horizontal'
-                      }"
-                    >
-                      <el-icon>
-                        <Icon name="icon_title-left-align_outlined" />
-                      </el-icon>
-                    </div>
-                  </el-tooltip>
-                </el-radio>
-              </el-radio-group>
+              <el-tooltip effect="dark" placement="bottom">
+                <template #content>
+                  {{ t('chart.italic') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: chart.customStyle.component.fontStyleBtn === 'italic'
+                  }"
+                  @click="checkItalic('fontStyleBtn')"
+                >
+                  <el-icon>
+                    <Icon name="icon_italic_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
            </el-form-item>
          </el-form>
        </el-collapse-item>
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@ -200,8 +200,8 @@ const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => {

 const initScroll = () => {
  // 首先回到最顶部，然后计算行高*行数作为top，最后判断：如果top<数据量*行高，继续滚动，否则回到顶部
-  const customAttr = actualChart.customAttr
-  const senior = actualChart.senior
+  const customAttr = actualChart?.customAttr
+  const senior = actualChart?.senior
  if (
    senior?.scrollCfg?.open &&
    chartData.value.tableRow?.length &&
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
@ -167,9 +167,13 @@ const showApiData = () => {
      const data = Base64.encode(JSON.stringify(apiItem))
      loading.value = true
      cancelMap['/datasource/checkApiDatasource']?.()
-      checkApiItem({ data: data, type: 'apiStructure' }).then(response => {
-        originFieldItem.jsonFields = response.data.jsonFields
-      })
+      checkApiItem({ data: data, type: 'apiStructure' })
+        .then(response => {
+          originFieldItem.jsonFields = response.data.jsonFields
+        })
+        .catch(error => {
+          console.log(error?.message)
+        })
      loading.value = false
    } else {
      return false
@ -232,13 +236,18 @@ const next = () => {
        }
      }
      cancelMap['/datasource/checkApiDatasource']?.()
-      checkApiItem({ data: Base64.encode(JSON.stringify(apiItem)) }).then(response => {
-        apiItem.jsonFields = response.data.jsonFields
-        apiItem.fields = []
-        handleFiledChange(apiItem)
-        previewData()
-        active.value += 1
-      })
+
+      checkApiItem({ data: Base64.encode(JSON.stringify(apiItem)) })
+        .then(response => {
+          apiItem.jsonFields = response.data.jsonFields
+          apiItem.fields = []
+          handleFiledChange(apiItem)
+          previewData()
+          active.value += 1
+        })
+        .catch(error => {
+          console.log(error?.message)
+        })
    }
  })
 }