refactor(图表): 图片组组件改造

core/core-frontend/src/components/dashboard/DbToolbar.vue

@@ -531,7 +531,7 @@ const initOpenHandler = newWindow => {
             is-label
             themes="light"
             placement="bottom"
-            :base-width="315"
+            :base-width="328"
             :icon-name="dvMedia"
             title="媒体"
           >

core/core-frontend/src/custom-component/common/CommonAttr.vue

@@ -143,7 +143,7 @@ const stopEvent = e => {
       <el-collapse-item :effect="themes" title="位置" name="position" v-if="positionComponentShow">
         <component-position :themes="themes" />
       </el-collapse-item>
-
+      <slot name="dataset" />
       <el-collapse-item
         :effect="themes"
         title="背景"

core/core-frontend/src/custom-component/component-group/MediaGroup.vue

@@ -2,6 +2,7 @@
 import iconVideo from '@/assets/svg/icon-video.svg'
 import dvPictureShow from '@/assets/svg/dv-picture-show.svg'
 import iconStream from '@/assets/svg/icon-stream.svg'
+import pictureGroupOrigin from '@/assets/svg/picture-group-origin.svg'
 import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
@@ -31,8 +32,8 @@ const props = defineProps({
 })
 
 const { dvModel } = toRefs(props)
-const newComponent = params => {
-  eventBus.emit('handleNew', { componentName: params, innerType: params })
+const newComponent = (componentName, innerType) => {
+  eventBus.emit('handleNew', { componentName: componentName, innerType: innerType })
 }
 
 const handleDragStart = e => {
@@ -47,25 +48,36 @@ const handleDragEnd = e => {
 <template>
   <div class="group" @dragstart="handleDragStart" @dragend="handleDragEnd">
     <drag-component
+      class="media-component"
       :themes="themes"
       :icon="dvPictureShow"
       label="图片"
       drag-info="Picture&Picture"
-      v-on:click="newComponent('Picture')"
+      v-on:click="newComponent('Picture', 'Picture')"
     ></drag-component>
     <drag-component
+      class="media-component"
       :themes="themes"
       :icon="iconVideo"
       label="视频"
       drag-info="DeVideo&DeVideo"
-      v-on:click="newComponent('DeVideo')"
+      v-on:click="newComponent('DeVideo', 'DeVideo')"
     ></drag-component>
     <drag-component
+      class="media-component"
       :themes="themes"
       :icon="iconStream"
       label="流媒体"
       drag-info="DeStreamMedia&DeStreamMedia"
-      v-on:click="newComponent('DeStreamMedia')"
+      v-on:click="newComponent('DeStreamMedia', 'DeStreamMedia')"
+    ></drag-component>
+    <drag-component
+      class="media-component"
+      :themes="themes"
+      :icon="pictureGroupOrigin"
+      label="图片组"
+      drag-info="UserView&picture-group"
+      v-on:click="newComponent('UserView', 'picture-group')"
     ></drag-component>
   </div>
 </template>
@@ -73,6 +85,9 @@ const handleDragEnd = e => {
 <style lang="less" scoped>
 .group {
   padding: 12px 8px;
-  display: inline-flex;
+}
+.media-component {
+  float: left;
+  margin: 0 6px !important;
 }
 </style>

core/core-frontend/src/custom-component/picture-group/Attr.vue

@@ -1,200 +1,47 @@
 <script setup lang="ts">
+import CommonAttr from '@/custom-component/common/CommonAttr.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 
 import { storeToRefs } from 'pinia'
-import { ElIcon, ElMessage } from 'element-plus-secondary'
-import { ref, onMounted, onBeforeUnmount, watch, PropType, computed } from 'vue'
-import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
-import { imgUrlTrans } from '@/utils/imgUtils'
-import eventBus from '@/utils/eventBus'
-import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
-import { useI18n } from '@/hooks/web/useI18n'
-import { toRefs } from 'vue'
-const { t } = useI18n()
+import { PropType, toRefs } from 'vue'
+import PictureGroupUploadAttr from '@/custom-component/picture-group/PictureGroupUploadAttr.vue'
+import { BASE_VIEW_CONFIG } from '@/views/chart/components/editor/util/chart'
 
 const props = defineProps({
   themes: {
     type: String as PropType<EditorTheme>,
     default: 'dark'
   },
-  element: {
-    type: Object,
+  view: {
+    type: Object as PropType<ChartObj>,
+    required: false,
     default() {
-      return {
-        propValue: {
-          urlList: []
-        }
-      }
+      return { ...BASE_VIEW_CONFIG }
     }
   }
 })
 
+const { view } = toRefs(props)
+
 const dvMainStore = dvMainStoreWithOut()
-const snapshotStore = snapshotStoreWithOut()
-const { element } = toRefs(props)
 
 const { curComponent } = storeToRefs(dvMainStore)
-
-const fileList = ref([])
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
-const uploadDisabled = ref(false)
-const files = ref(null)
-const maxImageSize = 15000000
-
-const handlePictureCardPreview = file => {
-  dialogImageUrl.value = file.url
-  dialogVisible.value = true
-}
-
-const handleRemove = (_, fileList) => {
-  uploadDisabled.value = false
-  element.value.propValue['urlList'] = []
-  fileList.value = []
-  snapshotStore.recordSnapshotCache()
-}
-async function upload(file) {
-  uploadFileResult(file.file, fileUrl => {
-    snapshotStore.recordSnapshotCache()
-    element.value.propValue.urlList.push({ name: file.file.name, url: fileUrl })
-  })
-}
-
-const onStyleChange = () => {
-  snapshotStore.recordSnapshotCache()
-}
-
-const goFile = () => {
-  files.value.click()
-}
-
-const reUpload = e => {
-  const file = e.target.files[0]
-  if (file.size > maxImageSize) {
-    sizeMessage()
-    return
-  }
-  uploadFileResult(file, fileUrl => {
-    snapshotStore.recordSnapshotCache()
-    element.value.propValue.url = fileUrl
-    fileList.value = [{ name: file.name, url: imgUrlTrans(element.value.propValue.url) }]
-  })
-}
-
-const sizeMessage = () => {
-  ElMessage.success('图片大小不符合')
-}
-
-const fileListInit = () => {
-  fileList.value = []
-  if (element.value.propValue.urlList && element.value.propValue.urlList.length > 0) {
-    element.value.propValue.urlList.forEach(urlInfo => {
-      fileList.value.push({ name: urlInfo.name, url: imgUrlTrans(urlInfo.url) })
-    })
-  }
-}
-const init = () => {
-  fileListInit()
-}
-
-const toolTip = computed(() => {
-  return props.themes === 'dark' ? 'ndark' : 'dark'
-})
-
-watch(
-  () => element.value.propValue.url,
-  () => {
-    init()
-  }
-)
-
-onMounted(() => {
-  init()
-  eventBus.on('uploadImg', goFile)
-})
-onBeforeUnmount(() => {
-  eventBus.off('uploadImg', goFile)
-})
 </script>
 
 <template>
-  <el-collapse-item :effect="themes" title="图片组" name="picture">
-    <input
-      id="input"
-      ref="files"
-      type="file"
-      accept=".jpeg,.jpg,.png,.gif,.svg"
-      hidden
-      @click="
-        e => {
-          e.target.value = ''
-        }
-      "
-      @change="reUpload"
-    />
-    <el-row class="img-area" :class="`img-area_${themes}`">
-      <el-col style="width: 130px !important">
-        <el-upload
-          :themes="themes"
-          limit="10"
-          action=""
-          accept=".jpeg,.jpg,.png,.gif,.svg"
-          class="avatar-uploader"
-          list-type="picture-card"
-          :class="{ disabled: uploadDisabled }"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleRemove"
-          :before-upload="beforeUploadCheck"
-          :http-request="upload"
-          :file-list="fileList"
-        >
-          <el-icon><Plus /></el-icon>
-        </el-upload>
-        <img-view-dialog v-model="dialogVisible" :image-url="dialogImageUrl"></img-view-dialog>
-      </el-col>
-    </el-row>
-    <el-row>
-      <span
-        style="margin-top: 2px"
-        v-if="!curComponent.propValue.url"
-        class="image-hint"
-        :class="`image-hint_${themes}`"
-      >
-        支持JPG、PNG、GIF、SVG
-      </span>
-
-      <el-button
-        size="small"
-        style="margin: 8px 0 0 -4px"
-        v-if="curComponent.propValue.url"
-        text
-        @click="goFile"
-      >
-        重新上传
-      </el-button>
-    </el-row>
-    <el-row class="pic-adaptor">
-      <el-form-item
-        v-if="curComponent.style.adaptation"
-        class="form-item form-item-custom"
-        label="图片适应方式"
-        size="small"
-        :effect="themes"
-      >
-        <el-radio-group
-          size="small"
-          v-model="curComponent.style.adaptation"
-          @change="onStyleChange"
-          :effect="themes"
-        >
-          <el-radio label="adaptation" :effect="themes">适应组件</el-radio>
-          <el-radio label="original" :effect="themes">原始尺寸</el-radio>
-          <el-radio label="equiratio" :effect="themes">等比适应</el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-row>
-  </el-collapse-item>
+  <div class="attr-list de-collapse-style">
+    <CommonAttr
+      :themes="themes"
+      :element="curComponent"
+      :background-color-picker-width="197"
+      :background-border-select-width="197"
+    >
+      <picture-group-upload-attr
+        :themes="themes"
+        :element="curComponent"
+      ></picture-group-upload-attr>
+    </CommonAttr>
+  </div>
 </template>
 
 <style lang="less" scoped>
@@ -254,6 +101,8 @@ onBeforeUnmount(() => {
   }
 }
 .img-area {
+  height: 80px;
+  width: 80px;
   margin-top: 10px;
   overflow: hidden;
 
@@ -308,9 +157,9 @@ onBeforeUnmount(() => {
   }
 }
 
-.form-item-custom {
+.form-item-dark {
   .ed-radio {
-    margin-right: 2px !important;
+    margin-right: 4px !important;
   }
 }
 

core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+
+import { storeToRefs } from 'pinia'
+import { ElIcon, ElMessage } from 'element-plus-secondary'
+import { ref, onMounted, onBeforeUnmount, watch, PropType, computed } from 'vue'
+import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
+import { imgUrlTrans } from '@/utils/imgUtils'
+import eventBus from '@/utils/eventBus'
+import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { toRefs } from 'vue'
+const { t } = useI18n()
+
+const props = defineProps({
+  themes: {
+    type: String as PropType<EditorTheme>,
+    default: 'dark'
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: {
+          urlList: []
+        }
+      }
+    }
+  }
+})
+
+const dvMainStore = dvMainStoreWithOut()
+const snapshotStore = snapshotStoreWithOut()
+const { element } = toRefs(props)
+
+const { curComponent } = storeToRefs(dvMainStore)
+
+const fileList = ref([])
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const uploadDisabled = ref(false)
+const files = ref(null)
+const maxImageSize = 15000000
+
+const handlePictureCardPreview = file => {
+  dialogImageUrl.value = file.url
+  dialogVisible.value = true
+}
+
+const handleRemove = (_, fileList) => {
+  uploadDisabled.value = false
+  element.value.propValue['urlList'] = []
+  fileList.value = []
+  snapshotStore.recordSnapshotCache()
+}
+async function upload(file) {
+  uploadFileResult(file.file, fileUrl => {
+    snapshotStore.recordSnapshotCache()
+    element.value.propValue.urlList.push({ name: file.file.name, url: fileUrl })
+  })
+}
+
+const onStyleChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
+const goFile = () => {
+  files.value.click()
+}
+
+const reUpload = e => {
+  const file = e.target.files[0]
+  if (file.size > maxImageSize) {
+    sizeMessage()
+    return
+  }
+  uploadFileResult(file, fileUrl => {
+    snapshotStore.recordSnapshotCache()
+    element.value.propValue.url = fileUrl
+    fileList.value = [{ name: file.name, url: imgUrlTrans(element.value.propValue.url) }]
+  })
+}
+
+const sizeMessage = () => {
+  ElMessage.success('图片大小不符合')
+}
+
+const fileListInit = () => {
+  fileList.value = []
+  if (element.value.propValue.urlList && element.value.propValue.urlList.length > 0) {
+    element.value.propValue.urlList.forEach(urlInfo => {
+      fileList.value.push({ name: urlInfo.name, url: imgUrlTrans(urlInfo.url) })
+    })
+  }
+}
+const init = () => {
+  fileListInit()
+}
+
+const toolTip = computed(() => {
+  return props.themes === 'dark' ? 'ndark' : 'dark'
+})
+
+watch(
+  () => element.value.propValue.url,
+  () => {
+    init()
+  }
+)
+
+onMounted(() => {
+  init()
+  eventBus.on('uploadImg', goFile)
+})
+onBeforeUnmount(() => {
+  eventBus.off('uploadImg', goFile)
+})
+</script>
+
+<template>
+  <el-collapse-item :effect="themes" title="图片组" name="picture">
+    <input
+      id="input"
+      ref="files"
+      type="file"
+      accept=".jpeg,.jpg,.png,.gif,.svg"
+      hidden
+      @click="
+        e => {
+          e.target.value = ''
+        }
+      "
+      @change="reUpload"
+    />
+    <el-row class="img-area" :class="`img-area_${themes}`">
+      <el-col style="width: 130px !important">
+        <el-upload
+          :themes="themes"
+          limit="10"
+          action=""
+          accept=".jpeg,.jpg,.png,.gif,.svg"
+          class="avatar-uploader"
+          list-type="picture-card"
+          :class="{ disabled: uploadDisabled }"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :before-upload="beforeUploadCheck"
+          :http-request="upload"
+          :file-list="fileList"
+        >
+          <el-icon><Plus /></el-icon>
+        </el-upload>
+        <img-view-dialog v-model="dialogVisible" :image-url="dialogImageUrl"></img-view-dialog>
+      </el-col>
+    </el-row>
+    <el-row>
+      <span
+        style="margin-top: 2px"
+        v-if="!curComponent.propValue.url"
+        class="image-hint"
+        :class="`image-hint_${themes}`"
+      >
+        支持JPG、PNG、GIF、SVG
+      </span>
+
+      <el-button
+        size="small"
+        style="margin: 8px 0 0 -4px"
+        v-if="curComponent.propValue.url"
+        text
+        @click="goFile"
+      >
+        重新上传
+      </el-button>
+    </el-row>
+    <el-row class="pic-adaptor">
+      <el-form-item
+        v-if="curComponent.style.adaptation"
+        class="form-item form-item-custom"
+        label="图片适应方式"
+        size="small"
+        :effect="themes"
+      >
+        <el-radio-group
+          size="small"
+          v-model="curComponent.style.adaptation"
+          @change="onStyleChange"
+          :effect="themes"
+        >
+          <el-radio label="adaptation" :effect="themes">适应组件</el-radio>
+          <el-radio label="original" :effect="themes">原始尺寸</el-radio>
+          <el-radio label="equiratio" :effect="themes">等比适应</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-row>
+  </el-collapse-item>
+</template>
+
+<style lang="less" scoped>
+.de-collapse-style {
+  :deep(.ed-collapse-item__header) {
+    height: 36px !important;
+    line-height: 36px !important;
+    font-size: 12px !important;
+    padding: 0 !important;
+    font-weight: 500 !important;
+
+    .ed-collapse-item__arrow {
+      margin: 0 6px 0 8px;
+    }
+  }
+
+  :deep(.ed-collapse-item__content) {
+    padding: 16px 8px 0;
+  }
+  :deep(.ed-form-item) {
+    display: block;
+    margin-bottom: 8px;
+  }
+  :deep(.ed-form-item__label) {
+    justify-content: flex-start;
+  }
+}
+
+.disabled :deep(.el-upload--picture-card) {
+  display: none;
+}
+
+.avatar-uploader :deep(.ed-upload) {
+  width: 80px;
+  height: 80px;
+  line-height: 90px;
+}
+
+.avatar-uploader :deep(.ed-upload-list li) {
+  width: 80px !important;
+  height: 80px !important;
+}
+
+:deep(.ed-upload--picture-card) {
+  background: #eff0f1;
+  border: 1px dashed #dee0e3;
+  border-radius: 4px;
+
+  .ed-icon {
+    color: #1f2329;
+  }
+
+  &:hover {
+    .ed-icon {
+      color: var(--ed-color-primary);
+    }
+  }
+}
+.img-area {
+  margin-top: 10px;
+  overflow: hidden;
+
+  &.img-area_dark {
+    :deep(.ed-upload-list__item).is-success {
+      border-color: #434343;
+    }
+    :deep(.ed-upload--picture-card) {
+      background: #373737;
+      border-color: #434343;
+      .ed-icon {
+        color: #ebebeb;
+      }
+      &:hover {
+        .ed-icon {
+          color: var(--ed-color-primary);
+        }
+      }
+    }
+  }
+
+  &.img-area_light {
+    :deep(.ed-upload-list__item).is-success {
+      border-color: #dee0e3;
+    }
+  }
+}
+
+.image-hint {
+  color: #8f959e;
+  size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+  margin-top: 2px;
+  &.image-hint_dark {
+    color: #757575;
+  }
+}
+
+.re-update-span {
+  cursor: pointer;
+  color: var(--ed-color-primary);
+  size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
+.pic-adaptor {
+  margin: 8px 0 16px 0;
+  :deep(.ed-form-item__content) {
+    margin-top: 8px !important;
+  }
+}
+
+.form-item-custom {
+  .ed-radio {
+    margin-right: 2px !important;
+  }
+}
+
+.drag-data {
+  padding-top: 8px;
+  padding-bottom: 16px;
+
+  .tree-btn {
+    width: 100%;
+    margin-top: 8px;
+    background: #fff;
+    height: 32px;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+    display: flex;
+    color: #cccccc;
+    align-items: center;
+    cursor: pointer;
+    justify-content: center;
+    font-size: 12px;
+    &.tree-btn--dark {
+      background: rgba(235, 235, 235, 0.05);
+      border-color: #5f5f5f;
+    }
+
+    &.active {
+      color: #3370ff;
+      border-color: #3370ff;
+    }
+  }
+
+  &.no-top-border {
+    border-top: none !important;
+  }
+  &.no-top-padding {
+    padding-top: 0 !important;
+  }
+  &:nth-child(n + 2) {
+    border-top: 1px solid @side-outline-border-color;
+  }
+  &:first-child {
+    border-top: none !important;
+  }
+}
+</style>

core/core-frontend/src/utils/components.ts

@@ -85,8 +85,8 @@ export default function findComponent(key) {
 
 export function findComponentAttr(component) {
   const key =
-    component.component === 'UserView' && component.innerType === 'Picture'
-      ? 'PictureAttr'
+    component.component === 'UserView' && component.innerType === 'picture-group'
+      ? 'PictureGroupAttr'
       : component.component + 'Attr'
   return componentsMap[key]
 }

core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue

@@ -28,7 +28,7 @@ import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/co
 import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue'
 import CommonEvent from '@/custom-component/common/CommonEvent.vue'
 import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
-import PictureGroupAttr from '@/custom-component/picture-group/Attr.vue'
+import PictureGroupUploadAttr from '@/custom-component/picture-group/PictureGroupUploadAttr.vue'
 
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo, batchOptStatus, curComponent } = storeToRefs(dvMainStore)
@@ -609,11 +609,11 @@ watch(
               @onChangeYAxisExtForm="onChangeYAxisExtForm"
             />
           </collapse-switch-item>
-          <PictureGroupAttr
+          <PictureGroupUploadAttr
             v-if="pictureGroupShow"
             :themes="themes"
             :element="curComponent"
-          ></PictureGroupAttr>
+          ></PictureGroupUploadAttr>
         </el-collapse>
       </el-row>
     </div>

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1494,7 +1494,7 @@ export const CHART_TYPE_CONFIGS = [
   },
   {
     category: 'other',
-    title: '富文本',
+    title: '其他',
     display: 'hidden',
     details: [
       {
@@ -1503,6 +1503,13 @@ export const CHART_TYPE_CONFIGS = [
         value: 'rich-text',
         title: '富文本',
         icon: 'rich-text'
+      },
+      {
+        render: 'custom',
+        category: 'quota',
+        value: 'picture-group',
+        title: '图片组',
+        icon: 'picture-group'
       }
     ]
   }

core/core-frontend/src/views/dashboard/index.vue

@@ -80,7 +80,7 @@ const otherEditorShow = computed(() => {
     curComponent.value &&
       (!['UserView', 'VQuery'].includes(curComponent.value?.component) ||
         (curComponent.value?.component === 'UserView' &&
-          curComponent.value?.innerType === 'Picture')) &&
+          curComponent.value?.innerType === 'picture-group')) &&
       !batchOptStatus.value
   )
 })
@@ -93,7 +93,7 @@ const viewEditorShow = computed(() => {
   return Boolean(
     curComponent.value &&
       ['UserView', 'VQuery'].includes(curComponent.value.component) &&
-      curComponent.value.innerType !== 'Picture' &&
+      curComponent.value.innerType !== 'picture-group' &&
       !batchOptStatus.value
   )
 })