From 6f701720484c7e2e0742352497f2d83b813c14bd Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 21 Jul 2025 15:37:03 +0800
Subject: [PATCH] refactor: view preview

---
 .../src/assets/svg/icon_chart_preview.svg     |  3 +
 .../views/dashboard/canvas/ComponentBar.vue   | 55 +++++++++++++++----
 2 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/assets/svg/icon_chart_preview.svg

diff --git a/frontend/src/assets/svg/icon_chart_preview.svg b/frontend/src/assets/svg/icon_chart_preview.svg
new file mode 100644
index 00000000..c571fb8b
--- /dev/null
+++ b/frontend/src/assets/svg/icon_chart_preview.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.99992 1.3335H4.99992C5.18401 1.3335 5.33325 1.48273 5.33325 1.66683V2.3335C5.33325 2.51759 5.18401 2.66683 4.99992 2.66683H2.66659V5.00016C2.66659 5.18426 2.51735 5.3335 2.33325 5.3335H1.66659C1.48249 5.3335 1.33325 5.18426 1.33325 5.00016V2.00016C1.33325 1.63197 1.63173 1.3335 1.99992 1.3335ZM13.9999 14.6668H10.9999C10.8158 14.6668 10.6666 14.5176 10.6666 14.3335V13.6668C10.6666 13.4827 10.8158 13.3335 10.9999 13.3335H13.3333V11.0002C13.3333 10.8161 13.4825 10.6668 13.6666 10.6668H14.3333C14.5173 10.6668 14.6666 10.8161 14.6666 11.0002V14.0002C14.6666 14.3684 14.3681 14.6668 13.9999 14.6668ZM1.33325 14.0002V11.0002C1.33325 10.8161 1.48249 10.6668 1.66659 10.6668H2.33325C2.51735 10.6668 2.66659 10.8161 2.66659 11.0002V13.3335H4.99992C5.18401 13.3335 5.33325 13.4827 5.33325 13.6668V14.3335C5.33325 14.5176 5.18401 14.6668 4.99992 14.6668H1.99992C1.63173 14.6668 1.33325 14.3684 1.33325 14.0002ZM14.6666 2.00016V5.00016C14.6666 5.18426 14.5173 5.3335 14.3333 5.3335H13.6666C13.4825 5.3335 13.3333 5.18426 13.3333 5.00016V2.66683H10.9999C10.8158 2.66683 10.6666 2.51759 10.6666 2.3335V1.66683C10.6666 1.48273 10.8158 1.3335 10.9999 1.3335H13.9999C14.3681 1.3335 14.6666 1.63197 14.6666 2.00016Z"/>
+</svg>
diff --git a/frontend/src/views/dashboard/canvas/ComponentBar.vue b/frontend/src/views/dashboard/canvas/ComponentBar.vue
index 683abd99..0c7b1df3 100644
--- a/frontend/src/views/dashboard/canvas/ComponentBar.vue
+++ b/frontend/src/views/dashboard/canvas/ComponentBar.vue
@@ -3,6 +3,10 @@ import { toRefs } from 'vue'
 import icon_delete from '@/assets/svg/icon_delete.svg'
 import { Icon } from '@/components/icon-custom'
 import { useEmitt } from '@/utils/useEmitt.ts'
+import { useI18n } from 'vue-i18n'
+import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
+import icon_chart_preview from '@/assets/svg/icon_chart_preview.svg'
+const { t } = useI18n()
 
 const props = defineProps({
   active: {
@@ -26,6 +30,10 @@ const props = defineProps({
 
 const { configItem } = toRefs(props)
 
+const doPreview = () => {
+  // do preview
+}
+
 const doDeleteComponent = (e: MouseEvent) => {
   e.stopPropagation()
   e.preventDefault()
@@ -36,11 +44,23 @@ const doDeleteComponent = (e: MouseEvent) => {
 <template>
   <div class="component-bar-main" :class="{ 'bar-hidden': !active }">
     <div>
-      <el-icon class="handle-icon" @click="doDeleteComponent">
-        <Icon>
-          <icon_delete class="svg-icon"></icon_delete>
-        </Icon>
-      </el-icon>
+      <el-dropdown ref="curDropdown" trigger="click" placement="bottom-end">
+        <el-icon class="bar-more">
+          <el-tooltip :content="t('dashboard.more')" placement="bottom">
+            <icon name="icon_more_outlined"><icon_more_outlined class="svg-icon" /></icon>
+          </el-tooltip>
+        </el-icon>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item :icon="icon_chart_preview" @click="doPreview">{{
+              t('dashboard.preview')
+            }}</el-dropdown-item>
+            <el-dropdown-item divided :icon="icon_delete" @click="doDeleteComponent">{{
+              t('dashboard.delete')
+            }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
   </div>
 </template>
@@ -54,16 +74,27 @@ const doDeleteComponent = (e: MouseEvent) => {
   display: flex;
   z-index: 5;
   cursor: pointer !important;
-  .handle-icon {
-    color: #646a73;
-  }
-  &:hover {
-    background-color: #e8f0fe;
-    color: var(--el-color-primary);
-  }
 }
 
 .bar-hidden {
   display: none;
 }
+
+.bar-more {
+  width: 24px;
+  height: 24px;
+  color: rgba(31, 35, 41, 1);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(217, 220, 223, 1);
+  padding: 8px;
+
+  &:hover {
+    background-color: rgba(245, 246, 247, 1);
+  }
+
+  &:active {
+    background-color: rgba(245, 246, 247, 0.5);
+  }
+}
 </style>