refactor: dashboard layout update

2026-11-09 01:36:57 +08:00 · 2025-07-18 10:46:23 +08:00
parent 97e76362f5
commit 22973e9313
13 changed files with 143 additions and 75 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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?"
  }
-}
+}
@@ -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": "图表",
@@ -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: [
        {
@@ -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,
 }
@@ -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
  }
@@ -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;
@@ -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>
@@ -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>