refactor: dashboard canvas update

2026-11-08 01:06:59 +08:00 · 2025-07-18 12:22:42 +08:00
parent bf5c0af9d0
commit ae0b2e13b2
10 changed files with 74 additions and 47 deletions
@@ -1,3 +1,5 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.833984 2.49935C0.833984 2.03911 1.20708 1.66602 1.66732 1.66602H4.16732V6.66602H19.1673V17.4993C19.1673 17.9596 18.7942 18.3327 18.334 18.3327H1.66732C1.20708 18.3327 0.833984 17.9596 0.833984 17.4993V2.49935ZM19.1673 4.99935V2.49935C19.1673 2.03911 18.7942 1.66602 18.334 1.66602H13.334V4.99935H19.1673ZM11.6673 1.66602H5.83398V4.99935H11.6673V1.66602Z"/>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.33325 4.99984H18.8333C19.2935 4.99984 19.6666 5.37293 19.6666 5.83317V17.4998C19.6666 17.9601 19.2935 18.3332 18.8333 18.3332H2.16659C1.70635 18.3332 1.33325 17.9601 1.33325 17.4998V2.49984C1.33325 2.0396 1.70635 1.6665 2.16659 1.6665H6.33325V4.99984ZM2.99992 16.6665H17.9999V6.6665H4.66658V3.33317H2.99992V16.6665Z" fill="#1F2329"/>
+<path d="M12.9999 3.33317H7.99992V1.6665H12.9999V3.33317Z" fill="#1F2329"/>
+<path d="M18.8333 1.6665C19.2935 1.6665 19.6666 2.0396 19.6666 2.49984V3.33317H14.6666V1.6665H18.8333Z" fill="#1F2329"/>
 </svg>
@@ -1,3 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0893 1.91058C17.933 1.7543 17.721 1.6665 17.5 1.6665H2.50002C2.27901 1.6665 2.06705 1.7543 1.91076 1.91058C1.75448 2.06686 1.66669 2.27882 1.66669 2.49984V17.4998C1.66669 17.7209 1.75448 17.9328 1.91076 18.0891C2.06705 18.2454 2.27901 18.3332 2.50002 18.3332H17.5C17.721 18.3332 17.933 18.2454 18.0893 18.0891C18.2456 17.9328 18.3334 17.7209 18.3334 17.4998V2.49984C18.3334 2.27882 18.2456 2.06686 18.0893 1.91058ZM10.8334 5.83323H13.75C13.8605 5.83323 13.9665 5.87713 14.0446 5.95527C14.1228 6.03341 14.1667 6.13939 14.1667 6.2499V7.08323C14.1667 7.19374 14.1228 7.29972 14.0446 7.37786C13.9665 7.456 13.8605 7.4999 13.75 7.4999H10.8334V13.7499C10.8334 13.8046 10.8226 13.8588 10.8016 13.9094C10.7807 13.9599 10.75 14.0058 10.7113 14.0445C10.6726 14.0832 10.6267 14.1139 10.5761 14.1348C10.5256 14.1558 10.4714 14.1666 10.4167 14.1666H9.58335C9.52864 14.1666 9.47446 14.1558 9.4239 14.1348C9.37335 14.1139 9.32742 14.0832 9.28873 14.0445C9.25004 14.0058 9.21934 13.9599 9.1984 13.9094C9.17747 13.8588 9.16669 13.8046 9.16669 13.7499V7.4999H6.25002C6.13951 7.4999 6.03353 7.456 5.95539 7.37786C5.87725 7.29972 5.83335 7.19374 5.83335 7.08323V6.2499C5.83335 6.13939 5.87725 6.03341 5.95539 5.95527C6.03353 5.87713 6.13951 5.83323 6.25002 5.83323H9.16669C9.16669 5.83323 10.8334 5.85657 10.8334 5.83323Z"/>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3334 5.83317H14.2501C14.4802 5.83317 14.6667 6.01972 14.6667 6.24984V7.08317C14.6667 7.31329 14.4802 7.49984 14.2501 7.49984H11.3334V13.7498C11.3334 13.98 11.1469 14.1665 10.9167 14.1665H10.0834C9.8533 14.1665 9.66675 13.98 9.66675 13.7498V7.49984H6.75008C6.51996 7.49984 6.33342 7.31329 6.33342 7.08317V6.24984C6.33342 6.01972 6.51996 5.83317 6.75008 5.83317H9.66675C9.66675 5.83317 11.3334 5.85678 11.3334 5.83317Z" fill="#1F2329"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.16675 2.49984C2.16675 2.0396 2.53984 1.6665 3.00008 1.6665H18.0001C18.4603 1.6665 18.8334 2.0396 18.8334 2.49984V17.4998C18.8334 17.9601 18.4603 18.3332 18.0001 18.3332H3.00008C2.53984 18.3332 2.16675 17.9601 2.16675 17.4998V2.49984ZM3.83341 16.6665V3.33317H17.1667V16.6665H3.83341Z" fill="#1F2329"/>
 </svg>
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.71952 18.0526C13.8471 18.0526 17.2237 14.8374 17.4815 10.7749C17.499 10.4994 17.2734 10.2748 16.9973 10.2748C14.5714 10.2748 12.1454 10.2748 9.71952 10.2748C9.71952 7.40872 9.71952 4.98267 9.71952 2.99669C9.71952 2.72055 9.49501 2.4954 9.21942 2.51289C5.15692 2.77069 1.94174 6.1473 1.94174 10.2748C1.94174 14.5704 5.42397 18.0526 9.71952 18.0526Z" fill="#3370FF"/>
-<path d="M12.1306 8.60807C11.7192 8.60807 11.3857 8.2746 11.3857 7.86325V2.49351C11.3857 2.19784 11.6417 1.96535 11.9329 2.01629C15.011 2.55462 17.4392 4.9828 17.9775 8.0609C18.0285 8.35215 17.796 8.60807 17.5003 8.60807H12.1306Z" fill="#00D6B9"/>
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4999 17.7779C14.7955 17.7779 18.2777 14.2956 18.2777 10.0001C15.6851 10.0001 13.0925 10.0001 10.4999 10.0001C10.4999 6.88897 10.4999 4.29638 10.4999 2.2223C6.2044 2.2223 2.72217 5.70453 2.72217 10.0001C2.72217 14.2956 6.2044 17.7779 10.4999 17.7779ZM8.97217 10.639C8.97217 11.1299 9.37014 11.5279 9.86106 11.5279H16.6111C15.9219 14.2055 13.3927 16.1112 10.4999 16.1112C7.0713 16.1112 4.38883 13.3301 4.38883 9.9015C4.38883 7.00877 6.29457 4.57814 8.97217 3.88897V10.639Z" fill="#1F2329"/>
+<path d="M12.9114 8.33342C12.5001 8.33342 12.1666 7.99995 12.1666 7.58859V1.66675C15.6855 2.01612 18.4839 4.81454 18.8333 8.33342H12.9114ZM13.8333 3.88897V6.66675H16.6111C16.1007 5.40633 15.0937 4.39929 13.8333 3.88897Z" fill="#1F2329"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14578 2.76511L9.73504 3.35436C9.89776 3.51708 9.89776 3.7809 9.73504 3.94362L4.51184 9.1664L18.7501 9.16676C18.9802 9.16676 19.1667 9.3533 19.1667 9.58342V10.4168C19.1667 10.6469 18.9802 10.8334 18.7501 10.8334L4.51143 10.8331L9.73504 16.0566C9.88524 16.2068 9.8968 16.4431 9.7697 16.6066L9.73504 16.6458L9.14578 17.2351C8.99558 17.3853 8.75924 17.3968 8.59578 17.2697L8.55653 17.2351L1.65805 10.3366C1.56598 10.2445 1.526 10.1201 1.53813 9.9999C1.52606 9.87991 1.56605 9.75559 1.65805 9.66358L8.55653 2.76511C8.71925 2.60239 8.98307 2.60239 9.14578 2.76511Z" fill="#646A73"/>
+</svg>
@@ -32,6 +32,7 @@
    "password_reset_successful": "Password reset successful"
  },
  "dashboard": {
+    "add_view": "Add Chart",
    "delete_dashboard_warn": "Delete This Dashboard: {0}",
    "rename_dashboard": "Rename Dashboard",
    "dashboard_name": "Dashboard Name",
@@ -34,6 +34,7 @@
    "password_reset_successful": "重置密码成功"
  },
  "dashboard": {
+    "add_view": "添加图表",
    "delete_dashboard_warn": "是否删除仪表板：{0}",
    "rename_dashboard": "重命名仪表板",
    "dashboard_name": "仪表板名称",
@@ -124,9 +124,11 @@ const propsTree = {
  isLeaf: (node) => !node.children?.length,
 }

-const showPid = computed(() => {
-  return state.opt && ['newLeaf'].includes(state.opt) && state.parentSelect
-})
+// const showPid = computed(() => {
+//   return state.opt && ['newLeaf'].includes(state.opt) && state.parentSelect
+// })
+
+const showPid = false

 const saveResource = () => {
  const params = {
@@ -26,42 +26,42 @@ const emits = defineEmits(['customClick'])
 </template>
 <style lang="less" scoped>
 .flex-align-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
  & + & {
-    margin-left: 4px;
+    margin-left: 12px;
  }
 }

 .group_inner {
-  padding: 8px;
+  padding: 4px;
  display: flex;
  cursor: pointer;
-  flex-direction: column;
+  justify-content: center;
  align-items: center;
  border-radius: 4px;
-  color: #a6a6a6;
+  color: #1f2329;

  span {
    float: left;
-    font-size: 12px;
-    margin-top: 8px;
-    line-height: 12px;
+    font-size: 14px;
+    margin-left: 4px;
  }

  &:hover {
-    background: rgba(235, 235, 235, 0.1);
-    color: #fff;
+    background: rgba(31, 35, 41, 0.1);
  }

  &:active {
-    color: #fff;
-    background: rgba(235, 235, 235, 0.2);
+    background: rgba(31, 35, 41, 0.1);
  }
 }

 .group-right-border {
-  border-color: rgba(255, 255, 255, 0.15);
-  margin: 0 2px 0 6px;
-  height: 40px;
+  border-color: rgba(31, 35, 41, 0.15);
+  margin: 0 4px 0 16px;
+  height: 14px;
 }

 .inner-active {
@@ -11,7 +11,7 @@ import { useI18n } from 'vue-i18n'
 import { snapshotStoreWithOut } from '@/stores/dashboard/snapshot.ts'
 import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
 import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
-import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import icon_arrow_left_outlined from '@/assets/svg/icon_arrow-left_outlined.svg'
 import { saveDashboardResource } from '@/views/dashboard/utils/canvasUtils.ts'
 import ChatChartSelection from '@/views/dashboard/editor/ChatChartSelection.vue'

@@ -142,7 +142,7 @@ const addChatChart = (views: any) => {
  <div class="toolbar-main">
    <el-icon class="custom-el-icon back-icon" @click="backToMain()">
      <Icon name="icon_left_outlined">
-        <icon_left_outlined class="toolbar-hover-icon toolbar-icon" />
+        <icon_arrow_left_outlined class="toolbar-hover-icon toolbar-icon" />
      </Icon>
    </el-icon>
    <div class="left-area">
@@ -181,9 +181,10 @@ const addChatChart = (views: any) => {
    <div class="core-toolbar">
      <component-button-label
        :icon-name="dvView"
-        :title="t('dashboard.view')"
+        :title="t('dashboard.add_view')"
        themes="light"
        is-label
+        show-split-line
        @custom-click="openViewDialog"
      ></component-button-label>
      <component-button-label
@@ -234,12 +235,12 @@ const addChatChart = (views: any) => {
  height: 56px;
  display: flex;
  align-items: center;
-  background: #d1ddf6;
-  padding-left: 8px;
+  background: #fff;
+  padding-left: 24px;
+  border-bottom: 1px solid rgba(31, 35, 41, 0.15);

  .left-area {
-    margin-top: 8px;
-    margin-left: 14px;
+    margin-left: 12px;
    width: 300px;
    display: flex;
    flex-direction: column;
@@ -252,18 +253,18 @@ const addChatChart = (views: any) => {
      width: 300px;
      overflow: hidden;
      cursor: pointer;
-      color: #fff;
+      color: #1f2329;

      input {
        position: absolute;
        left: 0;
        width: 100%;
-        color: #fff;
-        background-color: #d1ddf6;
+        background-color: #f5f6f7;
        outline: none;
-        border: 1px solid #295acc;
+        font-size: 16px;
+        border: 1px solid #1cba90;
        border-radius: 4px;
-        padding: 0 4px;
+        padding-left: 4px;
        height: 100%;
      }
    }
@@ -300,6 +301,10 @@ const addChatChart = (views: any) => {
  color: #fff;
 }

+.back-icon {
+  margin-top: 8px;
+}
+
 .toolbar-hover-icon {
  cursor: pointer;
  font-size: 18px !important;
@@ -75,23 +75,35 @@ const baseParams = computed(() => {
 </script>

 <template>
-  <div class="editor-main">
-    <Toolbar :base-params="baseParams" @add-component="addComponent"></Toolbar>
-    <DashboardEditor
-      v-if="dataInitState"
-      ref="dashboardEditorInnerRef"
-      :canvas-component-data="componentData"
-      :canvas-view-info="canvasViewInfo"
-    >
-    </DashboardEditor>
+  <div class="editor-content">
+    <div class="editor-main">
+      <Toolbar :base-params="baseParams" @add-component="addComponent"></Toolbar>
+      <DashboardEditor
+        v-if="dataInitState"
+        ref="dashboardEditorInnerRef"
+        :canvas-component-data="componentData"
+        :canvas-view-info="canvasViewInfo"
+      >
+      </DashboardEditor>
+    </div>
  </div>
 </template>

 <style scoped lang="less">
-.editor-main {
-  position: relative;
+.editor-content {
+  padding: 12px;
  width: 100vw;
  height: 100vh;
+  background: #fff;
+  overflow: hidden;
+}
+.editor-main {
+  border-radius: 12px;
+  position: relative;
  background: #f5f6f7;
+  box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 </style>