feat: Custom sorting function style

Author: wangdan-fit2cloud

ui/src/components/folder-tree/constant.ts

@@ -1,34 +1,31 @@
 import { t } from '@/locales'
 
-
 export const SORT_TYPES = {
   CREATE_TIME_ASC: 'createTime-asc',
   CREATE_TIME_DESC: 'createTime-desc',
   NAME_ASC: 'name-asc',
   NAME_DESC: 'name-desc',
-  CUSTOM: 'custom'
+  CUSTOM: 'custom',
 } as const
 
-export type SortType = typeof SORT_TYPES[keyof typeof SORT_TYPES]
+export type SortType = (typeof SORT_TYPES)[keyof typeof SORT_TYPES]
 
 export const SORT_MENU_CONFIG = [
   {
-    title: 'time', 
+    title: 'time',
     items: [
-      { label: t('components.folder.ascTime', '按创建时间升序'), value: SORT_TYPES.CREATE_TIME_ASC},
-      { label: t('components.folder.descTime', '按创建时间降序'), value: SORT_TYPES.CREATE_TIME_DESC },
-    ]
+      { label: t('components.folder.ascTime'), value: SORT_TYPES.CREATE_TIME_ASC },
+      { label: t('components.folder.descTime'), value: SORT_TYPES.CREATE_TIME_DESC },
+    ],
   },
   {
     title: 'name',
     items: [
-      { label: t('components.folder.ascName', '按名称升序'), value: SORT_TYPES.NAME_ASC },
-      { label: t('components.folder.descName', '按名称降序'), value: SORT_TYPES.NAME_DESC },
-    ]
+      { label: t('components.folder.ascName'), value: SORT_TYPES.NAME_ASC },
+      { label: t('components.folder.descName'), value: SORT_TYPES.NAME_DESC },
+    ],
   },
   {
-    items: [
-      { label: t('components.folder.custom', '按用户拖拽排序'), value: SORT_TYPES.CUSTOM },
-    ]
-  }
-]
+    items: [{ label: t('components.folder.sortDrop'), value: SORT_TYPES.CUSTOM }],
+  },
+]

ui/src/components/folder-tree/index.vue

@@ -1,27 +1,29 @@
 <template>
   <div class="folder-tree">
-    <div class="flex ml-4 p-8 pb-0 items-start">
+    <div class="flex ml-4 p-8 pb-0">
       <el-input
         v-model="filterText"
         :placeholder="$t('common.search')"
         prefix-icon="Search"
         clearable
-        class="flex-[5]"
       />
       <el-dropdown trigger="click" :teleported="false" @command="switchSortMethod">
-        <el-button class="flex-1 ml-4">
+        <el-button class="ml-4">
           <el-icon><Operation /></el-icon>
         </el-button>
         <template #dropdown>
-          <el-dropdown-menu>
+          <el-dropdown-menu class="w-180">
             <template v-for="(group, index) in SORT_MENU_CONFIG" :key="index">
               <el-dropdown-item
                 v-for="obj in group.items"
                 :key="obj.value"
                 :command="obj.value"
-                class="mr-2"
+                :class="`${currentSort === obj.value ? 'active' : ''} flex-between`"
               >
-                {{ obj.label }}
+                <span>
+                  {{ obj.label }}
+                </span>
+
                 <el-icon v-if="currentSort === obj.value" class="ml-4">
                   <Check />
                 </el-icon>
@@ -272,7 +274,7 @@ function addOrderToTree(nodes: any, parentId: string): Node[] {
     return nodes
   }
 
-  let positions = getPositions(parentId)
+  const positions = getPositions(parentId)
   let needSave = false
 
   nodes.forEach((node: any) => {

ui/src/components/infinite-scroll/index.vue

@@ -61,9 +61,6 @@ const noMore = computed(
     props.size > 0 && props.size === props.total && props.total > props.page_size && !props.loading,
 )
 const disabledScroll = computed(() => props.size > 0 && (props.loading || noMore.value))
-console.log(props.size)
-console.log(props.total)
-console.log(props.page_size)
 function loadData() {
   if (props.total > props.page_size) {
     current.value += 1

ui/src/layout/layout-header/avatar/index.vue

@@ -109,7 +109,7 @@
             </div>
 
             <template #dropdown>
-              <el-dropdown-menu style="width: 180px">
+              <el-dropdown-menu class="w-180">
                 <el-dropdown-item
                   v-for="(lang, index) in langList"
                   :key="index"

ui/src/layout/login-layout/LoginLayout.vue

@@ -8,7 +8,7 @@
         <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
           <el-dropdown trigger="click" type="primary" class="lang" v-if="lang">
             <template #dropdown>
-              <el-dropdown-menu style="width: 180px">
+              <el-dropdown-menu class="w-180">
                 <el-dropdown-item
                   v-for="(lang, index) in langList"
                   :key="index"

ui/src/locales/lang/en-US/components.ts

@@ -17,5 +17,10 @@ export default {
     folderNamePlaceholder: 'Please enter a name',
     requiredMessage: 'Please select a folder',
     deleteConfirmMessage: 'Folders with resources will be deleted, please be cautious.',
+    ascTime: 'Sort by creation time ascending',
+    descTime: 'Sort by creation time descending',
+    ascName: 'Sort by name ascending',
+    descName: 'Sort by name descending',
+    custom: 'Sort by user drag-and-drop',
   },
 }

ui/src/locales/lang/zh-CN/components.ts

@@ -17,5 +17,10 @@ export default {
     folderNamePlaceholder: '请输入名称',
     requiredMessage: '请选择文件夹',
     deleteConfirmMessage: '文件夹下的资源会被删除，请谨慎操作。',
+    ascTime: '按创建时间升序',
+    descTime: '按创建时间降序',
+    ascName: '按名称升序',
+    descName: '按名称降序',
+    sortDrop: '按用户拖拽排序',
   },
 }

ui/src/locales/lang/zh-Hant/components.ts

@@ -17,5 +17,10 @@ export default {
     folderNamePlaceholder: '請輸入名稱',
     requiredMessage: '請選擇文件夾',
     deleteConfirmMessage: '文件夹下的資源會被刪除，請謹慎操作。',
+    ascTime: '按創建時間升序',
+    descTime: '按創建時間降序',
+    ascName: '按名稱升序',
+    descName: '按名稱降序',
+    sortDrop: '按用戶拖拽排序',
   },
 }

ui/src/styles/app.scss

@@ -125,6 +125,9 @@ h5 {
 .w-120 {
   width: 120px;
 }
+.w-180 {
+  width: 180px;
+}
 .w-240 {
   width: 240px;
 }

ui/src/views/application-overview/index.vue

@@ -150,9 +150,9 @@
           <div class="mb-16">
             <el-select
               v-model="history_day"
-              class="mr-12"
+              class="mr-12 w-180"
               @change="changeDayHandle"
-              style="width: 180px"
+
             >
               <el-option
                 v-for="item in dayOptions"