From 77346a4199f310ebb16bc6d451e4f465b3f8bd30 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 9 Apr 2024 14:50:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E7=BD=91=E9=A1=B5=E7=BB=84=E4=BB=B6=E9=85=8D=E7=BD=AE=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dashboard/DbToolbar.vue    |  12 +-
 .../src/custom-component/component-list.ts    |  27 +++--
 .../src/custom-component/de-frame/Attr.vue    |  20 ++-
 .../de-frame/ComponentFrame.vue               |   2 -
 .../de-frame}/FrameLinks.vue                  | 114 ++++++++++--------
 core/core-frontend/src/locales/zh-CN.ts       |   2 +-
 6 files changed, 104 insertions(+), 73 deletions(-)
 rename core/core-frontend/src/{components/visualization => custom-component/de-frame}/FrameLinks.vue (52%)

diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index 5f63e50f83..36a4f0ca48 100644
--- 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"
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 5969a2ec7e..823b5647c2 100644
--- 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: {}
   },
   {
diff --git a/core/core-frontend/src/custom-component/de-frame/Attr.vue b/core/core-frontend/src/custom-component/de-frame/Attr.vue
index 50031ca63e..1d27c6f265 100644
--- 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>
diff --git a/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue b/core/core-frontend/src/custom-component/de-frame/ComponentFrame.vue
index 20d0ec93d8..5b9d69fe4d 100644
--- 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>
diff --git a/core/core-frontend/src/components/visualization/FrameLinks.vue b/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
similarity index 52%
rename from core/core-frontend/src/components/visualization/FrameLinks.vue
rename to core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
index c8e25eb3b1..a7838f85af 100644
--- a/core/core-frontend/src/components/visualization/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>
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 59e8c88890..e3d179adcb 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -2091,7 +2091,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',