refactor: dashboard canvas update

Author: ziyujiahao

frontend/src/assets/svg/dv-tab.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",

frontend/src/assets/svg/dv-text.svg

@@ -34,6 +34,7 @@
     "password_reset_successful": "重置密码成功"
   },
   "dashboard": {
+    "add_view": "添加图表",
     "delete_dashboard_warn": "是否删除仪表板：{0}",
     "rename_dashboard": "重命名仪表板",
     "dashboard_name": "仪表板名称",

frontend/src/assets/svg/dv-view.svg

@@ -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 = {

frontend/src/assets/svg/icon_arrow-left_outlined.svg

@@ -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 {

frontend/src/i18n/en.json

@@ -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;

frontend/src/i18n/zh-CN.json

@@ -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>