Merge pull request #9010 from dataease/pr@dev-v2@refactor_frame

refactor(仪表板): 网页组件配置优化
2024-04-09 14:52:27 +08:00 · 2024-04-09 14:52:27 +08:00 · 51900c7a6a
commit 51900c7a6a
parent 3085ce2cc4 77346a4199
6 changed files with 104 additions and 73 deletions
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@ -26,6 +26,7 @@ import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
 import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
 import OuterParamsSet from '@/components/visualization/OuterParamsSet.vue'
 import { XpackComponent } from '@/components/plugin'
+import DbMoreComGroup from '@/custom-component/component-group/DbMoreComGroup.vue'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
@ -445,15 +446,18 @@ const initOpenHandler = newWindow => {
          >
            <media-group themes="light" :dv-model="dvModel"></media-group>
          </component-group>
+          <component-group themes="light" is-label :base-width="115" icon-name="dv-tab" title="Tab">
+            <tabs-group themes="light" :dv-model="dvModel"></tabs-group>
+          </component-group>
          <component-group
-            show-split-line
            themes="light"
+            show-split-line
            is-label
            :base-width="115"
-            icon-name="dv-tab"
-            title="Tab"
+            icon-name="dv-more-com"
+            title="更多"
          >
-            <tabs-group themes="light" :dv-model="dvModel"></tabs-group>
+            <db-more-com-group themes="light" :dv-model="dvModel"></db-more-com-group>
          </component-group>
          <component-button-label
            icon-name="icon_copy_filled"
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@ -73,7 +73,7 @@ export const commonAttr = {
  maintainRadio: false, // 布局时保持宽高比例
  aspectRatio: 1, // 锁定时的宽高比例
  isShow: true, // 是否显示组件
-  collapseName: ['position', 'background', 'style', 'picture'], // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
+  collapseName: ['position', 'background', 'style', 'picture', 'frameLinks'], // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
  linkage: {
    duration: 0, // 过渡持续时间
    data: [
@ -145,22 +145,23 @@ const list = [
    matrixStyle: {}
  },
  {
-    id: '30002',
-    component: 'de-frame',
-    type: 'de-frame',
-    label: '',
-    icon: 'iconfont icon-iframe',
-    defaultClass: 'text-filter',
+    component: 'DeFrame',
+    name: '网页',
+    label: '网页',
+    innerType: 'DeFrame',
+    editing: false,
+    canvasActive: false,
+    icon: 'db-more-web',
    hyperlinks: HYPERLINKS,
-    style: {
-      width: 400,
-      height: 200
-    },
    frameLinks: FRAMELINKS,
    x: 1,
    y: 1,
-    sizeX: 10,
-    sizeY: 5,
+    sizeX: 18,
+    sizeY: 7,
+    style: {
+      width: 600,
+      height: 300
+    },
    matrixStyle: {}
  },
  {
--- a/core/core-frontend/src/custom-component/de-frame/Attr.vue
+++ b/core/core-frontend/src/custom-component/de-frame/Attr.vue
@ -1,6 +1,15 @@
 <template>
  <div class="attr-list de-collapse-style">
-    <CommonAttr :element="curComponent"></CommonAttr>
+    <CommonAttr :themes="themes" :element="curComponent">
+      <el-collapse-item
+        :effect="themes"
+        title="链接信息"
+        name="frameLinks"
+        v-if="curComponent && curComponent.frameLinks"
+      >
+        <frame-links :frame-links="curComponent.frameLinks" :themes="themes"></frame-links>
+      </el-collapse-item>
+    </CommonAttr>
  </div>
 </template>

@ -8,6 +17,15 @@
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import CommonAttr from '@/custom-component/common/CommonAttr.vue'
 import { storeToRefs } from 'pinia'
+import FrameLinks from '@/custom-component/de-frame/FrameLinks.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent } = storeToRefs(dvMainStore)
+const props = withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+  }>(),
+  {
+    themes: 'dark'
+  }
+)
 </script>
--- a/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue
+++ b/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue
@ -24,8 +24,6 @@
    </div>
    <div v-else class="info-class">
      <span>{{ t('visualization.link_add_tips_pre') }}</span>
-      <el-icon><Link /></el-icon>
-      <span>{{ t('visualization.web_add_tips_suf') }}</span>
    </div>
  </el-row>
 </template>
--- a/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
+++ b/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
@ -1,38 +1,38 @@
 <template>
-  <el-popover ref="popover" width="400" trigger="click">
-    <el-row>
-      <el-form ref="form" size="mini" label-width="70px">
-        <el-form-item :label="'Tips:'">
-          <span style="color: #909399; font-size: 8px; margin-left: 3px">
-            {{ t('visualization.web_set_tips') }}
+  <el-row>
+    <el-form ref="form" size="small" style="width: 100%">
+      <el-form-item>
+        <template #label>
+          <span class="data-area-label">
+            <span style="margin-right: 4px">
+              {{ t('visualization.web_url') }}
+            </span>
+            <el-tooltip class="item" :effect="toolTip" placement="bottom">
+              <template #content>
+                <div>
+                  {{ t('visualization.web_set_tips') }}
+                </div>
+              </template>
+              <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+                <Icon name="icon_info_outlined" />
+              </el-icon>
+            </el-tooltip>
          </span>
-        </el-form-item>
-        <el-form-item :label="t('visualization.web_url')">
-          <el-input v-model="state.linkInfoTemp.src" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit">{{ t('visualization.confirm') }}</el-button>
-          <el-button @click="onClose">{{ t('visualization.cancel') }}</el-button>
-        </el-form-item>
-      </el-form>
-    </el-row>
-    <template #reference>
-      <span>
-        ICON
-        <i class="icon iconfont icon-chaolianjie" />
-      </span>
-    </template>
-  </el-popover>
+        </template>
+        <el-input v-model="state.linkInfoTemp.src" @blur="onBlur" />
+      </el-form-item>
+    </el-form>
+  </el-row>
 </template>

 <script setup lang="ts">
-import { reactive, ref, toRefs, watch } from 'vue'
+import { reactive, ref, toRefs, watch, computed } from 'vue'
 import { dvMainStoreWithOut } from '../../store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia/dist/pinia'
 import { checkAddHttp, deepCopy } from '../../utils/utils'
 import { snapshotStoreWithOut } from '../../store/modules/data-visualization/snapshot'
-import eventBus from '../../utils/eventBus'
 import { useI18n } from '../../hooks/web/useI18n'
+import { useEmitt } from '@/hooks/web/useEmitt'
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, curActiveTabInner } = storeToRefs(dvMainStore)
 const snapshotStore = snapshotStoreWithOut()
@ -41,19 +41,26 @@ const popover = ref(null)
 const { t } = useI18n()

 const props = defineProps({
-  linkInfo: {
+  canvasId: {
+    type: String,
+    require: true
+  },
+  frameLinks: {
    type: Object,
    required: true
  },
-  // 属性所属组件位置
-  attrPosition: {
+  themes: {
    type: String,
-    required: false,
-    default: 'panel'
+    required: true,
+    default: 'dark'
  }
 })

-const { linkInfo, attrPosition } = toRefs(props)
+const { frameLinks } = toRefs(props)
+
+const toolTip = computed(() => {
+  return props.themes === 'dark' ? 'ndark' : 'dark'
+})

 const state = reactive({
  linkInfoTemp: null,
@ -63,30 +70,17 @@ const state = reactive({
 })

 const init = () => {
-  state.linkInfoTemp = deepCopy(linkInfo.value)
+  state.linkInfoTemp = deepCopy(frameLinks.value)
 }
-const onSubmit = () => {
+const onBlur = () => {
  state.linkInfoTemp.src = checkAddHttp(state.linkInfoTemp.src)
-  if (attrPosition.value === 'panel') {
-    curComponent.value.frameLinks = state.linkInfoTemp
-  } else {
-    curActiveTabInner.value.frameLinks = state.linkInfoTemp
-  }
+  curComponent.value.frameLinks.src = state.linkInfoTemp.src
  snapshotStore.recordSnapshotCache()
-  eventBus.emit('frameLinksChange-' + curComponent.value.id)
-  popoverClose()
+  useEmitt().emitter.emit('frameLinksChange-' + curComponent.value.id)
 }
-const onClose = () => {
-  emits('close')
-  popoverClose()
-}
-const popoverClose = () => {
-  popover.value.showPopper = false
-}
-
 init()
 watch(
-  linkInfo,
+  frameLinks.value,
  () => {
    init()
  },
@ -130,8 +124,24 @@ watch(
  border-radius: 3px;
 }

-:deep(.ed-popover) {
-  height: 200px;
-  overflow: auto;
+.tips-class {
+  color: #909399;
+  font-size: 8px;
+  margin-left: 3px;
+}
+
+.hint-icon {
+  cursor: pointer;
+  font-size: 14px;
+  color: #646a73;
+
+  &.hint-icon--dark {
+    color: #a6a6a6;
+  }
+}
+.data-area-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 </style>
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@ -2092,7 +2092,7 @@ export default {
    video_links: '视频链接',
    web_url: '网页地址',
    video_add_tips: '添加视频信息...',
-    link_add_tips_pre: '请点击上方',
+    link_add_tips_pre: '请在右侧配置网页信息..',
    web_add_tips_suf: '添加网页信息...',
    panel_view_result_show: '图表结果',
    panel_view_result_tips: '选择仪表板会覆盖图表的结果展示数量，取值范围1~10000',