From 22973e9313af427c0f4b33a8d7afaeef0fdbf7dc Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 18 Jul 2025 10:46:23 +0800
Subject: [PATCH] refactor: dashboard layout update

---
 frontend/src/assets/img/none-dashboard.png    | Bin 0 -> 8765 bytes
 frontend/src/assets/img/none.png              | Bin 1683 -> 1646 bytes
 frontend/src/assets/svg/dv-sort-asc.svg       |   6 +
 frontend/src/assets/svg/dv-sort-desc.svg      |   6 +
 frontend/src/assets/svg/icon_dashboard.svg    |   6 +-
 frontend/src/i18n/en.json                     |  12 +-
 frontend/src/i18n/zh-CN.json                  |  10 ++
 frontend/src/router/index.ts                  |   5 +-
 .../dashboard/common/EmptyBackground.vue      |   4 +-
 .../dashboard/common/ResourceGroupOpt.vue     |   4 +-
 .../views/dashboard/common/ResourceTree.vue   | 134 ++++++++++++------
 .../views/dashboard/preview/SQPreviewHead.vue |  16 ---
 .../views/dashboard/preview/SQPreviewShow.vue |  15 +-
 13 files changed, 143 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/assets/img/none-dashboard.png
 create mode 100644 frontend/src/assets/svg/dv-sort-asc.svg
 create mode 100644 frontend/src/assets/svg/dv-sort-desc.svg

diff --git a/frontend/src/assets/img/none-dashboard.png b/frontend/src/assets/img/none-dashboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c3dc6ca8676d560dbcf8205c64647ac54f4c8ff
GIT binary patch
literal 8765
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
XCCq=MkMy701M0W9yjYdUAOHUYTMuwh

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/img/none.png b/frontend/src/assets/img/none.png
index 358dfdd8f32720b2de573b1c174daa4caba425c9..124f68048670c75fd9cc4ffa50263c0c895797cd 100644
GIT binary patch
delta 1614
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

literal 1683
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
O5CHO|7renODDf|gUOR~Z

diff --git a/frontend/src/assets/svg/dv-sort-asc.svg b/frontend/src/assets/svg/dv-sort-asc.svg
new file mode 100644
index 00000000..253a3ce5
--- /dev/null
+++ b/frontend/src/assets/svg/dv-sort-asc.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.25 3.55664C6.11193 3.55664 6 3.66857 6 3.80664V4.63997C6 4.77805 6.11193 4.88997 6.25 4.88997H11.0833C11.2214 4.88997 11.3333 4.77805 11.3333 4.63997V3.80664C11.3333 3.66857 11.2214 3.55664 11.0833 3.55664H6.25Z" />
+<path d="M6 8.02878C6 7.89071 6.11193 7.77878 6.25 7.77878H13.0833C13.2214 7.77878 13.3333 7.89071 13.3333 8.02878V8.86211C13.3333 9.00018 13.2214 9.11211 13.0833 9.11211H6.25C6.11193 9.11211 6 9.00018 6 8.86211V8.02878Z" />
+<path d="M6.25 12.0009C6.11193 12.0009 6 12.1128 6 12.2509V13.0842C6 13.2223 6.11193 13.3342 6.25 13.3342H15.0833C15.2214 13.3342 15.3333 13.2223 15.3333 13.0842V12.2509C15.3333 12.1128 15.2214 12.0009 15.0833 12.0009H6.25Z" />
+<path d="M5.03981 14.5684C4.9773 14.6309 4.89251 14.666 4.80411 14.666H4.19677C4.153 14.666 4.10965 14.6574 4.06921 14.6406C4.02877 14.6239 3.99202 14.5993 3.96107 14.5684C3.93012 14.5374 3.90557 14.5007 3.88881 14.4602C3.87206 14.4198 3.86344 14.3765 3.86344 14.3327L3.86344 3.83902L2.39244 5.37235C2.33134 5.43523 2.24792 5.47151 2.16026 5.47332C2.0726 5.47513 1.98775 5.44232 1.92411 5.38202L1.43711 4.92068C1.40532 4.89057 1.37977 4.85449 1.36193 4.8145C1.34409 4.77452 1.3343 4.73141 1.33313 4.68764C1.33195 4.64387 1.33941 4.6003 1.35508 4.55941C1.37075 4.51852 1.39432 4.48112 1.42444 4.44935L3.98677 1.70768C4.40144 1.27001 5.13744 1.56335 5.13744 2.16602L5.13744 14.3327C5.13744 14.4211 5.10232 14.5059 5.03981 14.5684Z" />
+</svg>
diff --git a/frontend/src/assets/svg/dv-sort-desc.svg b/frontend/src/assets/svg/dv-sort-desc.svg
new file mode 100644
index 00000000..4b666610
--- /dev/null
+++ b/frontend/src/assets/svg/dv-sort-desc.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.25 11.1222C6.11193 11.1222 6 11.2341 6 11.3722V12.2055C6 12.3436 6.11193 12.4555 6.25 12.4555H11.0833C11.2214 12.4555 11.3333 12.3436 11.3333 12.2055V11.3722C11.3333 11.2341 11.2214 11.1222 11.0833 11.1222H6.25Z" />
+<path d="M6 7.1478C6 7.00973 6.11193 6.8978 6.25 6.8978H13.0833C13.2214 6.8978 13.3333 7.00973 13.3333 7.1478V7.98113C13.3333 8.1192 13.2214 8.23113 13.0833 8.23113H6.25C6.11193 8.23113 6 8.1192 6 7.98113V7.1478Z" />
+<path d="M6.25 2.67773C6.11193 2.67773 6 2.78966 6 2.92773V3.76107C6 3.89914 6.11193 4.01107 6.25 4.01107H15.0833C15.2214 4.01107 15.3333 3.89914 15.3333 3.76107V2.92773C15.3333 2.78966 15.2214 2.67773 15.0833 2.67773H6.25Z" />
+<path d="M3.98898 14.4564C4.40365 14.8941 5.13965 14.6007 5.13965 13.9981L5.13965 1.83139C5.13965 1.74298 5.10453 1.6582 5.04202 1.59569C4.9795 1.53317 4.89472 1.49806 4.80632 1.49806H4.13965C4.05124 1.49806 3.96646 1.53317 3.90395 1.59569C3.84143 1.6582 3.80632 1.74298 3.80632 1.83139L3.80632 12.3247L2.39432 10.7977C2.36423 10.7659 2.32816 10.7403 2.28819 10.7225C2.24822 10.7046 2.20511 10.6948 2.16134 10.6936C2.11757 10.6924 2.07399 10.6998 2.03309 10.7154C1.9922 10.7311 1.95478 10.7546 1.92298 10.7847L1.43932 11.2434C1.4075 11.2735 1.38193 11.3095 1.36406 11.3495C1.34619 11.3895 1.33637 11.4326 1.33517 11.4764C1.33396 11.5201 1.34139 11.5637 1.35703 11.6046C1.37267 11.6455 1.39621 11.6829 1.42631 11.7147L3.98898 14.4564Z" />
+</svg>
diff --git a/frontend/src/assets/svg/icon_dashboard.svg b/frontend/src/assets/svg/icon_dashboard.svg
index 1da45d61..7fd632b9 100644
--- a/frontend/src/assets/svg/icon_dashboard.svg
+++ b/frontend/src/assets/svg/icon_dashboard.svg
@@ -1,4 +1,6 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 3C0 1.34315 1.59845 0 3.57025 0H14.4298C16.4015 0 18 1.34315 18 3V15C18 16.6569 16.4015 18 14.4298 18H3.57025C1.59845 18 0 16.6569 0 15V3Z" fill="#3370FF"/>
-<path d="M4.25 13V8.77273C4.25 8.48403 4.48985 8.25 4.78571 8.25H7V4.52632C7 4.23564 7.25584 4 7.57143 4H10.4286C10.7442 4 11 4.23564 11 4.52632V7H13.2143C13.5102 7 13.75 7.22386 13.75 7.5V13H14C14.1381 13 14.25 13.1119 14.25 13.25V13.75C14.25 13.8881 14.1381 14 14 14H4C3.86193 14 3.75 13.8881 3.75 13.75V13.25C3.75 13.1119 3.86193 13 4 13H4.25ZM12.75 13V8H11V13H12.75ZM10 13V5H8V13H10ZM7 13V9.25H5.25V13H7Z" fill="white"/>
+<path d="M1.5 15.375C1.5 15.1679 1.66789 15 1.875 15H16.125C16.3321 15 16.5 15.1679 16.5 15.375V16.125C16.5 16.3321 16.3321 16.5 16.125 16.5H1.875C1.66789 16.5 1.5 16.3321 1.5 16.125V15.375Z" fill="#1CBA90"/>
+<path d="M2.25 8.625C2.25 8.41789 2.41789 8.25 2.625 8.25H4.875C5.08211 8.25 5.25 8.41789 5.25 8.625V13.125C5.25 13.3321 5.08211 13.5 4.875 13.5H2.625C2.41789 13.5 2.25 13.3321 2.25 13.125V8.625Z" fill="#1CBA90"/>
+<path d="M7.5 2.625C7.5 2.41789 7.66789 2.25 7.875 2.25H10.125C10.3321 2.25 10.5 2.41789 10.5 2.625V13.125C10.5 13.3321 10.3321 13.5 10.125 13.5H7.875C7.66789 13.5 7.5 13.3321 7.5 13.125V2.625Z" fill="#1CBA90"/>
+<path d="M12.75 6.375C12.75 6.16789 12.9179 6 13.125 6H15.375C15.5821 6 15.75 6.16789 15.75 6.375V13.125C15.75 13.3321 15.5821 13.5 15.375 13.5H13.125C12.9179 13.5 12.75 13.3321 12.75 13.125V6.375Z" fill="#1CBA90"/>
 </svg>
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index a267e7d4..6ec465da 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -31,6 +31,16 @@
     "password_reset_successful": "Password reset successful"
   },
   "dashboard": {
+    "rename_dashboard": "Rename Dashboard",
+    "dashboard_name": "Dashboard Name",
+    "select_dashboard_tips": "Please select a dashboard on the left",
+    "no_dashboard": "No Dashboards",
+    "no_dashboard_info": "No content yet, click the button below to add",
+    "search": "Search",
+    "time_asc": "Sort by Time (Ascending)",
+    "time_desc": "Sort by Time (Descending)",
+    "name_asc": "Sort by Name (Ascending)",
+    "name_desc": "Sort by Name (Descending)",
     "select_dashboard": "Please Select Dashboard",
     "view": "View",
     "text": "Text",
@@ -336,4 +346,4 @@
     "back_community": "Restore to Community Edition",
     "confirm_tips": "Are you sure to restore to Community Edition?"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index 66bb2feb..86fe0fbb 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -33,6 +33,16 @@
     "password_reset_successful": "重置密码成功"
   },
   "dashboard": {
+    "rename_dashboard": "重命名仪表板",
+    "dashboard_name": "仪表板名称",
+    "select_dashboard_tips": "请在左侧选择仪表板",
+    "no_dashboard": "暂无仪表板",
+    "no_dashboard_info": "暂无内容，点击下列按钮进行添加",
+    "search": "搜索",
+    "time_asc": "按时间升序",
+    "time_desc": "按时间降序",
+    "name_asc": "按名称升序",
+    "name_desc": "按名称降序",
     "select_dashboard": "请选择仪表板",
     "name": "名称",
     "view": "图表",
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 2df029b4..5607be38 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-
+// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 import Layout from '@/components/layout/index.vue'
 import LayoutDsl from '@/components/layout/LayoutDsl.vue'
 import SinglePage from '@/components/layout/SinglePage.vue'
@@ -11,7 +11,6 @@ import DashboardPreview from '@//views/dashboard/preview/SQPreviewSingle.vue'
 import Dashboard from '@/views/dashboard/index.vue'
 import Model from '@/views/system/model/Model.vue'
 import assistant from '@/views/embedded/assistant.vue'
-// import User from "@/views/system/user/index.vue";
 import User from '@/views/system/user/User.vue'
 import Workspace from '@/views/system/workspace/index.vue'
 import { watchRouter } from './watch'
@@ -63,7 +62,7 @@ const router = createRouter({
     },
     {
       path: '/dashboard',
-      component: Layout,
+      component: LayoutDsl,
       redirect: '/dashboard/index',
       children: [
         {
diff --git a/frontend/src/views/dashboard/common/EmptyBackground.vue b/frontend/src/views/dashboard/common/EmptyBackground.vue
index f87aa97d..e6f894fd 100644
--- a/frontend/src/views/dashboard/common/EmptyBackground.vue
+++ b/frontend/src/views/dashboard/common/EmptyBackground.vue
@@ -3,6 +3,7 @@ import { type PropType } from 'vue'
 import nothingInput from '@/assets/img/nothing-input.png'
 import nothingSelect from '@/assets/img/nothing-select.png'
 import nothingTable from '@/assets/img/nothing-table.png'
+import nothingSelectDashoard from '@/assets/img/none-dashboard.png'
 import none from '@/assets/img/none.png'
 import error from '@/assets/img/error.png'
 import nothingTree from '@/assets/img/nothing-tree.png'
@@ -10,7 +11,7 @@ import nothingNone from '@/assets/img/nothing-none.png'
 defineProps({
   imgType: {
     type: String as PropType<
-      'input' | 'select' | 'table' | 'none' | 'noneWhite' | 'tree' | 'error'
+      'input' | 'select' | 'table' | 'none' | 'noneWhite' | 'tree' | 'error' | 'selectDashboard'
     >,
     default: 'table',
   },
@@ -29,6 +30,7 @@ const getAssetsFile = {
   table: nothingTable,
   noneWhite: nothingNone,
   tree: nothingTree,
+  selectDashboard: nothingSelectDashoard,
   error,
   none,
 }
diff --git a/frontend/src/views/dashboard/common/ResourceGroupOpt.vue b/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
index 91e971a9..ac988a1d 100644
--- a/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
+++ b/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
@@ -14,7 +14,7 @@ const state = reactive({
   placeholder: '',
   nodeType: 'folder',
   parentSelect: false,
-  resourceFormNameLabel: t('dashboard.name'),
+  resourceFormNameLabel: t('dashboard.dashboard_name'),
   dialogTitle: '',
   tData: [],
   tDataSource: [],
@@ -30,7 +30,7 @@ const getTitle = (opt: string) => {
     case 'newFolder':
       return t('dashboard.new_folder')
     case 'rename':
-      return t('dashboard.rename')
+      return t('dashboard.rename_dashboard')
     default:
       return
   }
diff --git a/frontend/src/views/dashboard/common/ResourceTree.vue b/frontend/src/views/dashboard/common/ResourceTree.vue
index 61d6b849..6a4c7c4e 100644
--- a/frontend/src/views/dashboard/common/ResourceTree.vue
+++ b/frontend/src/views/dashboard/common/ResourceTree.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { treeDraggableChart } from '@/views/dashboard/utils/treeDraggableChart'
-import newFolder from '@/assets/svg/new-folder.svg'
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import icon_folder from '@/assets/svg/icon_folder.svg'
-import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'
+import ope_add from '@/assets/svg/operate/ope-add.svg'
 import icon_dashboard from '@/assets/svg/icon_dashboard.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_rename from '@/assets/svg/icon_rename.svg'
 import icon_delete from '@/assets/svg/icon_delete.svg'
 import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
+import dv_sort_asc from '@/assets/svg/dv-sort-asc.svg'
+import dv_sort_desc from '@/assets/svg/dv-sort-desc.svg'
 import { onMounted, reactive, ref, watch, nextTick, computed } from 'vue'
 import { ElIcon, ElScrollbar } from 'element-plus-secondary'
 import { Icon } from '@/components/icon-custom'
@@ -21,6 +22,9 @@ import ResourceGroupOpt from '@/views/dashboard/common/ResourceGroupOpt.vue'
 import { dashboardApi } from '@/api/dashboard.ts'
 import HandleMore from '@/views/dashboard/common/HandleMore.vue'
 import { useI18n } from 'vue-i18n'
+import treeSort from '@/views/dashboard/utils/treeSortUtils.ts'
+import { useCache } from '@/utils/useCache.ts'
+const { wsCache } = useCache()
 
 const { t } = useI18n()
 const dashboardStore = dashboardStoreWithOut()
@@ -58,7 +62,12 @@ const state = reactive({
   originResourceTree: [] as SQTreeNode[],
   sortType: [],
   templateCreatePid: 0,
-  folderMenuList: [
+  menuList: [
+    {
+      label: t('dashboard.edit'),
+      command: 'edit',
+      svgName: icon_edit_outlined,
+    },
     {
       label: t('dashboard.rename'),
       command: 'rename',
@@ -128,22 +137,8 @@ const getTree = async () => {
     afterTreeInit()
   })
 }
-// @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
-const flattedTree = computed<SQTreeNode[]>(() => {
-  return _.filter(flatTree(state.resourceTree), (node) => node.leaf)
-})
 
-const hasData = computed<boolean>(() => flattedTree.value.length > 0)
-
-function flatTree(tree: SQTreeNode[]) {
-  let result = _.cloneDeep(tree)
-  _.forEach(tree, (node) => {
-    if (node.children && node.children.length > 0) {
-      result = _.union(result, flatTree(node.children))
-    }
-  })
-  return result
-}
+const hasData = computed<boolean>(() => state.resourceTree.length > 0)
 
 const afterTreeInit = () => {
   mounted.value = true
@@ -165,7 +160,9 @@ const afterTreeInit = () => {
 const copyLoading = ref(false)
 const emit = defineEmits(['nodeClick'])
 
-function createNewObject() {}
+function createNewObject() {
+  addOperation({ opt: 'newLeaf' })
+}
 
 // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 const resourceEdit = (resourceId) => {
@@ -240,6 +237,8 @@ const operation = (opt: string, data: SQTreeNode) => {
   } else if (opt === 'rename') {
     // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     resourceGroupOptRef.value?.optInit({ opt: 'rename', id: data.id, name: data.name })
+  } else if (opt === 'edit') {
+    resourceEdit(data.id)
   }
 }
 
@@ -247,6 +246,42 @@ const baseInfoChangeFinish = () => {
   getTree()
 }
 
+const handleSortTypeChange = (sortType: string) => {
+  state.resourceTree = treeSort(state.originResourceTree, sortType)
+  state.curSortType = sortType
+  wsCache.set('TreeSort-dashboard', state.curSortType)
+}
+
+// const sortTypeChange = (sortType: string) => {
+//   state.resourceTree = treeSort(state.originResourceTree, sortType)
+//   state.curSortType = sortType
+// }
+
+const sortList = [
+  {
+    name: t('dashboard.time_asc'),
+    value: 'time_asc',
+  },
+  {
+    name: t('dashboard.time_desc'),
+    value: 'time_desc',
+    divided: true,
+  },
+  {
+    name: t('dashboard.name_asc'),
+    value: 'name_asc',
+  },
+  {
+    name: t('dashboard.name_desc'),
+    value: 'name_desc',
+  },
+]
+
+const sortTypeTip = computed(() => {
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  return sortList.find((ele) => ele.value === state.curSortType).name
+})
+
 defineExpose({
   hasData,
   createNewObject,
@@ -260,17 +295,6 @@ defineExpose({
       <div class="icon-methods">
         <span class="title">{{ t('dashboard.dashboard') }} </span>
         <div class="flex-align-center">
-          <el-tooltip :content="t('dashboard.new_folder')" placement="top" effect="dark">
-            <el-icon
-              class="custom-icon btn"
-              style="margin-right: 10px"
-              @click="addOperation({ opt: 'newFolder', type: 'folder', pid: 'root' })"
-            >
-              <Icon name="dv-new-folder">
-                <newFolder class="svg-icon" />
-              </Icon>
-            </el-icon>
-          </el-tooltip>
           <el-tooltip :content="t('dashboard.new_dashboard')" placement="top" effect="dark">
             <el-icon
               class="custom-icon btn"
@@ -278,13 +302,18 @@ defineExpose({
               @click="addOperation({ opt: 'newLeaf', type: 'dashboard' })"
             >
               <Icon name="dv-new-folder">
-                <icon_fileAdd_outlined class="svg-icon" />
+                <ope_add class="svg-icon" />
               </Icon>
             </el-icon>
           </el-tooltip>
         </div>
       </div>
-      <el-input v-model="filterText" :placeholder="t('common.search')" clearable class="search-bar">
+      <el-input
+        v-model="filterText"
+        :placeholder="t('dashboard.search')"
+        clearable
+        class="search-bar"
+      >
         <template #prefix>
           <el-icon>
             <Icon name="icon_search-outline_outlined">
@@ -293,11 +322,40 @@ defineExpose({
           </el-icon>
         </template>
       </el-input>
+      <el-dropdown trigger="click" @command="handleSortTypeChange">
+        <el-icon class="filter-icon-span">
+          <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+            <Icon v-if="state.curSortType.includes('asc')" name="dv-sort-asc" class="opt-icon"
+              ><dv_sort_asc class="svg-icon opt-icon"
+            /></Icon>
+          </el-tooltip>
+          <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+            <Icon v-if="state.curSortType.includes('desc')" name="dv-sort-desc" class="opt-icon"
+              ><dv_sort_desc class="svg-icon opt-icon"
+            /></Icon>
+          </el-tooltip>
+        </el-icon>
+        <template #dropdown>
+          <el-dropdown-menu style="width: 246px">
+            <template v-for="ele in sortList" :key="ele.value">
+              <el-dropdown-item
+                class="ed-select-dropdown__item"
+                :class="ele.value === state.curSortType && 'selected'"
+                :command="ele.value"
+              >
+                {{ ele.name }}
+              </el-dropdown-item>
+              <li v-if="ele.divided" class="ed-dropdown-menu__item--divided"></li>
+            </template>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
     <el-scrollbar v-loading="copyLoading" class="custom-tree">
       <el-tree
         ref="resourceListTree"
         menu
+        :empty-text="t('dashboard.no_dashboard')"
         :default-expanded-keys="expandedArray"
         :data="state.resourceTree"
         :props="defaultProps"
@@ -332,16 +390,8 @@ defineExpose({
               >
                 <Icon><icon_add_outlined class="svg-icon" /></Icon>
               </el-icon>
-              <el-icon
-                v-if="data.node_type === 'leaf'"
-                class="hover-icon"
-                @click.stop
-                @click="resourceEdit(data.id)"
-              >
-                <Icon><icon_edit_outlined class="svg-icon" /></Icon>
-              </el-icon>
               <HandleMore
-                :menu-list="state.folderMenuList"
+                :menu-list="state.menuList"
                 :icon-name="icon_more_outlined"
                 placement="bottom-start"
                 @handle-command="(opt: string) => operation(opt, data)"
@@ -360,7 +410,7 @@ defineExpose({
   width: 32px;
   height: 32px;
   border-radius: 4px;
-  color: #1f2329;
+  color: var(--ed-color-primary);
   padding: 8px;
   margin-left: 8px;
   font-size: 16px;
diff --git a/frontend/src/views/dashboard/preview/SQPreviewHead.vue b/frontend/src/views/dashboard/preview/SQPreviewHead.vue
index 3bb2caa3..4dfc6206 100644
--- a/frontend/src/views/dashboard/preview/SQPreviewHead.vue
+++ b/frontend/src/views/dashboard/preview/SQPreviewHead.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import dashboardInfoSvg from '@/assets/svg/dashboard-info.svg'
 import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
-import DashboardDetailInfo from '@/views/dashboard/common/DashboardDetailInfo.vue'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 
@@ -23,20 +21,6 @@ const props = defineProps({
 <template>
   <div class="preview-head flex-align-center">
     <div class="canvas-name ellipsis">{{ dashboardInfo.name }}</div>
-    <el-divider style="margin: 5px 10px 0 17px" direction="vertical" />
-    <span class="create-area" style="line-height: 22px"
-      >{{ t('dashboard.creator') }}: {{ dashboardInfo.createName }}</span
-    >
-    <div style="padding-top: 4px" class="create-area flex-align-center">
-      <el-popover show-arrow :offset="8" placement="bottom" width="400" trigger="hover">
-        <template #reference>
-          <el-icon class="info-tips">
-            <dashboardInfoSvg class="svg-icon" />
-          </el-icon>
-        </template>
-        <DashboardDetailInfo :dashboard-info="dashboardInfo"></DashboardDetailInfo>
-      </el-popover>
-    </div>
     <div class="canvas-opt-button">
       <el-button secondary @click="preview">
         <template #icon>
diff --git a/frontend/src/views/dashboard/preview/SQPreviewShow.vue b/frontend/src/views/dashboard/preview/SQPreviewShow.vue
index eb93c25a..97110d0f 100644
--- a/frontend/src/views/dashboard/preview/SQPreviewShow.vue
+++ b/frontend/src/views/dashboard/preview/SQPreviewShow.vue
@@ -42,10 +42,6 @@ const resourceTreeRef = ref()
 const hasTreeData = computed(() => {
   return resourceTreeRef.value?.hasData
 })
-
-const rootManage = computed(() => {
-  return resourceTreeRef.value?.rootManage
-})
 const mounted = computed(() => {
   return resourceTreeRef.value?.mounted
 })
@@ -126,17 +122,20 @@ defineExpose({
         </div>
       </template>
       <template v-else-if="hasTreeData && mounted">
-        <EmptyBackground :description="'Please Select Resource'" img-type="select" />
+        <EmptyBackground
+          :description="t('dashboard.select_dashboard_tips')"
+          img-type="selectDashboard"
+        />
       </template>
       <template v-else-if="mounted">
-        <EmptyBackground :description="t('dashboard.select_dashboard')" img-type="none">
-          <el-button v-if="rootManage" type="primary" @click="createNew">
+        <EmptyBackground :description="t('dashboard.no_dashboard_info')" img-type="none">
+          <el-button type="primary" @click="createNew">
             <template #icon>
               <Icon name="icon_add_outlined">
                 <icon_add_outlined class="svg-icon" />
               </Icon>
             </template>
-            Create Dashboard
+            {{ t('dashboard.new_dashboard') }}
           </el-button>
         </EmptyBackground>
       </template>