refactor: sort list change

Author: ziyujiahao

frontend/src/i18n/en.json

@@ -32,6 +32,11 @@
     "password_reset_successful": "Password reset successful"
   },
   "dashboard": {
+    "sort_column": "Sort field",
+    "sort_type": "Sort type",
+    "time": "Time",
+    "sort_asc": "Ascending",
+    "sort_desc": "Descending",
     "name_repeat": "Name Repeat",
     "rich_text_tips": "Double-click to enter text content",
     "exit_preview": "Exit preview",
@@ -487,4 +492,4 @@
     "back_community": "Restore to Community Edition",
     "confirm_tips": "Are you sure to restore to Community Edition?"
   }
-}
+}

frontend/src/i18n/zh-CN.json

@@ -34,6 +34,11 @@
     "password_reset_successful": "重置密码成功"
   },
   "dashboard": {
+    "sort_column": "排序字段",
+    "sort_type": "排序方式",
+    "time": "时间",
+    "sort_asc": "升序",
+    "sort_desc": "降序",
     "name_repeat": "仪表板名称已被使用",
     "rich_text_tips": "双击输入文本内容",
     "exit_preview": "退出预览",
@@ -499,4 +504,4 @@
     "back_community": "还原至社区版",
     "confirm_tips": "确定还原至社区版？"
   }
-}
+}

frontend/src/views/dashboard/common/ResourceTree.vue

@@ -57,7 +57,9 @@ const expandedArray = ref([])
 const resourceListTree = ref()
 const returnMounted = ref(false)
 const state = reactive({
-  curSortType: 'time_desc',
+  curSortType: 'name_asc',
+  curSortTypePrefix: 'name',
+  curSortTypeSuffix: '_asc',
   resourceTree: [] as SQTreeNode[],
   originResourceTree: [] as SQTreeNode[],
   sortType: [],
@@ -134,6 +136,7 @@ const getTree = async () => {
   dashboardApi.list_resource(params).then((res: SQTreeNode[]) => {
     state.originResourceTree = res || []
     state.resourceTree = _.cloneDeep(state.originResourceTree)
+    handleSortTypeChange('name_asc')
     afterTreeInit()
   })
 }
@@ -246,16 +249,41 @@ const baseInfoChangeFinish = () => {
   getTree()
 }
 
-const handleSortTypeChange = (sortType: string) => {
-  state.resourceTree = treeSort(state.originResourceTree, sortType)
-  state.curSortType = sortType
+const handleSortTypeChange = (menuSortType: string) => {
+  state.curSortTypePrefix = ['name', 'time'].includes(menuSortType)
+    ? menuSortType
+    : state.curSortTypePrefix
+  state.curSortTypeSuffix = ['_asc', '_desc'].includes(menuSortType)
+    ? menuSortType
+    : state.curSortTypeSuffix
+  const curMenuSortType = state.curSortTypePrefix + state.curSortTypeSuffix
+  state.resourceTree = treeSort(state.originResourceTree, curMenuSortType)
+  state.curSortType = curMenuSortType
   wsCache.set('TreeSort-dashboard', state.curSortType)
 }
 
-// const sortTypeChange = (sortType: string) => {
-//   state.resourceTree = treeSort(state.originResourceTree, sortType)
-//   state.curSortType = sortType
-// }
+const sortColumnList = [
+  {
+    name: t('dashboard.time'),
+    value: 'time',
+  },
+  {
+    name: t('dashboard.name'),
+    value: 'name',
+    divided: true,
+  },
+]
+
+const sortTypeList = [
+  {
+    name: t('dashboard.sort_asc'),
+    value: '_asc',
+  },
+  {
+    name: t('dashboard.sort_desc'),
+    value: '_desc',
+  },
+]
 
 const sortList = [
   {
@@ -322,7 +350,12 @@ defineExpose({
           </el-icon>
         </template>
       </el-input>
-      <el-dropdown trigger="click" @command="handleSortTypeChange">
+      <el-dropdown
+        popper-class="tree-sort-menu-custom"
+        trigger="click"
+        placement="bottom-end"
+        @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"
@@ -336,17 +369,28 @@ defineExpose({
           </el-tooltip>
         </el-icon>
         <template #dropdown>
-          <el-dropdown-menu style="width: 246px">
-            <template v-for="ele in sortList" :key="ele.value">
+          <el-dropdown-menu style="width: 120px">
+            <span class="sort_menu">{{ t('dashboard.sort_column') }}</span>
+            <template v-for="ele in sortColumnList" :key="ele.value">
               <el-dropdown-item
                 class="ed-select-dropdown__item"
-                :class="ele.value === state.curSortType && 'selected'"
+                :class="state.curSortType.includes(ele.value) && 'selected'"
                 :command="ele.value"
               >
                 {{ ele.name }}
               </el-dropdown-item>
               <li v-if="ele.divided" class="ed-dropdown-menu__item--divided"></li>
             </template>
+            <span class="sort_menu">{{ t('dashboard.sort_type') }}</span>
+            <template v-for="ele in sortTypeList" :key="ele.value">
+              <el-dropdown-item
+                class="ed-select-dropdown__item"
+                :class="state.curSortType.includes(ele.value) && 'selected'"
+                :command="ele.value"
+              >
+                {{ ele.name }}
+              </el-dropdown-item>
+            </template>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -555,6 +599,17 @@ defineExpose({
 </style>
 
 <style lang="less">
+.tree-sort-menu-custom {
+  padding: 0 4px !important;
+  li {
+    border-radius: 4px;
+    padding: 0 8px !important;
+    &:hover {
+      // color: var(--primary-color);
+      background-color: rgba(31, 35, 41, 0.1) !important;
+    }
+  }
+}
 .menu-outer-dv_popper {
   min-width: 140px;
   margin-top: -2px !important;
@@ -586,4 +641,10 @@ defineExpose({
 .color-dataV-disabled {
   background: #bbbfc4 !important;
 }
+
+.sort_menu {
+  color: rgba(143, 149, 158, 1);
+  font-size: 14px;
+  margin-left: 12px;
+}
 </style>