feat: optmized layout

src/components/index.ts

@@ -8,10 +8,10 @@ import Chart from './chart/Chart.vue';
 import Metric from './chart/Metric.vue';
 import ContextMenu from './context-menu/ContextMenu.vue';
 import ContextMenuList from './context-menu/ContextMenuList.vue';
+import * as date from './date/date';
 import DateRangePicker from './date/DateRangePicker.vue';
 import DateTimeRangePicker from './date/DateTimeRangePicker.vue';
 import RangePicker from './date/RangePicker.vue';
-import * as date from './date/date';
 import ConfirmDialog from './dialog/ConfirmDialog.vue';
 import CreateEditDialog from './dialog/CreateEditDialog.vue';
 import Dialog from './dialog/Dialog.vue';
@@ -34,6 +34,7 @@ import FileActions from './file/FileActions.vue';
 import FileDiff from './file/FileDiff.vue';
 import FileEditor from './file/FileEditor.vue';
 import FileEditorCreateWithAiDialog from './file/FileEditorCreateWithAiDialog.vue';
+import * as fileEditorDropZone from './file/fileEditorDropZone';
 import FileEditorNavMenu from './file/FileEditorNavMenu.vue';
 import FileEditorNavMenuContextMenu from './file/FileEditorNavMenuContextMenu.vue';
 import FileEditorNavTabs from './file/FileEditorNavTabs.vue';
@@ -43,16 +44,15 @@ import FileEditorSettingsDialog from './file/FileEditorSettingsDialog.vue';
 import FileTab from './file/FileTab.vue';
 import FileUpload from './file/FileUpload.vue';
 import UploadFilesDialog from './file/UploadFilesDialog.vue';
-import * as fileEditorDropZone from './file/fileEditorDropZone';
+import * as filter from './filter/filter';
 import FilterCondition from './filter/FilterCondition.vue';
 import FilterConditionList from './filter/FilterConditionList.vue';
 import FilterInput from './filter/FilterInput.vue';
 import FilterSelect from './filter/FilterSelect.vue';
-import * as filter from './filter/filter';
 import Form from './form/Form.vue';
 import FormItem from './form/FormItem.vue';
-import FormTableField from './form/FormTableField.vue';
 import * as formTable from './form/formTable';
+import FormTableField from './form/FormTableField.vue';
 import useForm from './form/useForm';
 import CreateEditGitDialog from './git/CreateEditGitDialog.vue';
 import CreateGitBranchDialog from './git/CreateGitBranchDialog.vue';
@@ -69,11 +69,10 @@ import GitStatus from './git/GitStatus.vue';
 import UploadGitFilesDialog from './git/UploadGitFilesDialog.vue';
 import useGit from './git/useGit';
 import AtomMaterialIcon from './icon/AtomMaterialIcon.vue';
+import * as icon from './icon/icon';
 import Icon from './icon/Icon.vue';
 import MenuItemIcon from './icon/MenuItemIcon.vue';
-import * as icon from './icon/icon';
 import InputList from './input/InputList.vue';
-import LexicalEditor from './lexical/LexicalEditor.vue';
 import BlockOptionsDropdownList from './lexical/components/BlockOptionsDropdownList.vue';
 import DropdownButton from './lexical/components/DropdownButton.vue';
 import FloatLinkEditor from './lexical/components/FloatLinkEditor.vue';
@@ -89,6 +88,7 @@ import useLexicalList from './lexical/composables/useLexicalList';
 import useLexicalMounted from './lexical/composables/useLexicalMounted';
 import useRichTextSetup from './lexical/composables/useRichTextSetup';
 import useVariableSetup from './lexical/composables/useVariableSetup';
+import LexicalEditor from './lexical/LexicalEditor.vue';
 import * as ImageNode from './lexical/nodes/ImageNode';
 import * as VariableNode from './lexical/nodes/VariableNode';
 import LexicalAutoFocusPlugin from './lexical/plugins/LexicalAutoFocusPlugin.vue';
@@ -152,6 +152,12 @@ import useSpider from './spider/useSpider';
 import Switch from './switch/Switch.vue';
 import ActionTab from './tab/ActionTab.vue';
 import Tab from './tab/Tab.vue';
+import * as action from './table/action';
+import * as column from './table/column';
+import * as data from './table/data';
+import * as header from './table/header';
+import * as pagination from './table/pagination';
+import * as store from './table/store';
 import Table from './table/Table.vue';
 import TableActions from './table/TableActions.vue';
 import TableCell from './table/TableCell.vue';
@@ -161,12 +167,6 @@ import TableHeaderAction from './table/TableHeaderAction.vue';
 import TableHeaderDialog from './table/TableHeaderDialog.vue';
 import TableHeaderDialogFilter from './table/TableHeaderDialogFilter.vue';
 import TableHeaderDialogSort from './table/TableHeaderDialogSort.vue';
-import * as action from './table/action';
-import * as column from './table/column';
-import * as data from './table/data';
-import * as header from './table/header';
-import * as pagination from './table/pagination';
-import * as store from './table/store';
 import CheckTag from './tag/CheckTag.vue';
 import CheckTagGroup from './tag/CheckTagGroup.vue';
 import LinkTag from './tag/LinkTag.vue';
@@ -199,10 +199,10 @@ export {
   Metric as ClMetric,
   ContextMenu as ClContextMenu,
   ContextMenuList as ClContextMenuList,
+  date as date,
   DateRangePicker as ClDateRangePicker,
   DateTimeRangePicker as ClDateTimeRangePicker,
   RangePicker as ClRangePicker,
-  date as date,
   ConfirmDialog as ClConfirmDialog,
   CreateEditDialog as ClCreateEditDialog,
   Dialog as ClDialog,
@@ -225,6 +225,7 @@ export {
   FileDiff as ClFileDiff,
   FileEditor as ClFileEditor,
   FileEditorCreateWithAiDialog as ClFileEditorCreateWithAiDialog,
+  fileEditorDropZone as fileEditorDropZone,
   FileEditorNavMenu as ClFileEditorNavMenu,
   FileEditorNavMenuContextMenu as ClFileEditorNavMenuContextMenu,
   FileEditorNavTabs as ClFileEditorNavTabs,
@@ -234,16 +235,15 @@ export {
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
   UploadFilesDialog as ClUploadFilesDialog,
-  fileEditorDropZone as fileEditorDropZone,
+  filter as filter,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
   FilterSelect as ClFilterSelect,
-  filter as filter,
   Form as ClForm,
   FormItem as ClFormItem,
-  FormTableField as ClFormTableField,
   formTable as formTable,
+  FormTableField as ClFormTableField,
   useForm as useForm,
   CreateEditGitDialog as ClCreateEditGitDialog,
   CreateGitBranchDialog as ClCreateGitBranchDialog,
@@ -260,11 +260,10 @@ export {
   UploadGitFilesDialog as ClUploadGitFilesDialog,
   useGit as useGit,
   AtomMaterialIcon as ClAtomMaterialIcon,
+  icon as icon,
   Icon as ClIcon,
   MenuItemIcon as ClMenuItemIcon,
-  icon as icon,
   InputList as ClInputList,
-  LexicalEditor as ClLexicalEditor,
   BlockOptionsDropdownList as ClBlockOptionsDropdownList,
   DropdownButton as ClDropdownButton,
   FloatLinkEditor as ClFloatLinkEditor,
@@ -280,6 +279,7 @@ export {
   useLexicalMounted as useLexicalMounted,
   useRichTextSetup as useRichTextSetup,
   useVariableSetup as useVariableSetup,
+  LexicalEditor as ClLexicalEditor,
   ImageNode as ImageNode,
   VariableNode as VariableNode,
   LexicalAutoFocusPlugin as ClLexicalAutoFocusPlugin,
@@ -343,6 +343,12 @@ export {
   Switch as ClSwitch,
   ActionTab as ClActionTab,
   Tab as ClTab,
+  action as action,
+  column as column,
+  data as data,
+  header as header,
+  pagination as pagination,
+  store as store,
   Table as ClTable,
   TableActions as ClTableActions,
   TableCell as ClTableCell,
@@ -352,12 +358,6 @@ export {
   TableHeaderDialog as ClTableHeaderDialog,
   TableHeaderDialogFilter as ClTableHeaderDialogFilter,
   TableHeaderDialogSort as ClTableHeaderDialogSort,
-  action as action,
-  column as column,
-  data as data,
-  header as header,
-  pagination as pagination,
-  store as store,
   CheckTag as ClCheckTag,
   CheckTagGroup as ClCheckTagGroup,
   LinkTag as ClLinkTag,

src/components/nav/NavTabs.vue

@@ -1,21 +1,5 @@
 <script setup lang="ts">
-import {
-  TAB_NAME_OVERVIEW,
-  TAB_NAME_FILES,
-  TAB_NAME_GIT,
-  TAB_NAME_TASKS,
-  TAB_NAME_SETTINGS,
-  TAB_NAME_SPIDERS,
-  TAB_NAME_DATA,
-  TAB_NAME_SCHEDULES,
-  TAB_NAME_LOGS,
-  TAB_NAME_DEPENDENCIES,
-  TAB_NAME_TRIGGERS,
-  TAB_NAME_TEMPLATE,
-  TAB_NAME_CHANGES,
-  TAB_NAME_MONITORING,
-} from '@/constants';
-import { translate } from '@/utils';
+import { getIconByNavItem, translate } from '@/utils';
 
 const t = translate;
 
@@ -45,42 +29,6 @@ const getClassName = (item: NavItem): string => {
   if (item.id) cls.push(item.id);
   return cls.join(' ');
 };
-
-const getIcon = (item: NavItem): Icon => {
-  if (item.icon) return item.icon;
-  switch (item.id) {
-    case TAB_NAME_OVERVIEW:
-      return ['fa', 'tachometer-alt'];
-    case TAB_NAME_FILES:
-      return ['fa', 'file-code'];
-    case TAB_NAME_GIT:
-      return ['fa', 'code-branch'];
-    case TAB_NAME_TASKS:
-      return ['fa', 'tasks'];
-    case TAB_NAME_SETTINGS:
-      return ['fa', 'cog'];
-    case TAB_NAME_SPIDERS:
-      return ['fa', 'spider'];
-    case TAB_NAME_DATA:
-      return ['fa', 'database'];
-    case TAB_NAME_SCHEDULES:
-      return ['fa', 'calendar-alt'];
-    case TAB_NAME_LOGS:
-      return ['fa', 'file-alt'];
-    case TAB_NAME_DEPENDENCIES:
-      return ['fa', 'cubes'];
-    case TAB_NAME_TRIGGERS:
-      return ['fa', 'bolt'];
-    case TAB_NAME_TEMPLATE:
-      return ['fa', 'file-code'];
-    case TAB_NAME_CHANGES:
-      return ['fa', 'code-commit'];
-    case TAB_NAME_MONITORING:
-      return ['fa', 'tachometer-alt'];
-    default:
-      return ['fa', 'circle'];
-  }
-};
 defineOptions({ name: 'ClNavTabs' });
 </script>
 
@@ -114,7 +62,7 @@ defineOptions({ name: 'ClNavTabs' });
             :offset="[10, 10]"
           >
             <div class="item-wrapper">
-              <cl-icon :icon="getIcon(item)" />
+              <cl-icon :icon="getIconByNavItem(item)" />
               <span class="label">{{ item.title }}</span>
             </div>
           </el-badge>

src/components/tab/Tab.vue

@@ -3,8 +3,7 @@ import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { Close } from '@element-plus/icons-vue';
-import { translate } from '@/utils';
-import { getPrimaryPath } from '@/utils/path';
+import { getPrimaryPath, translate } from '@/utils';
 
 const props = withDefaults(
   defineProps<{

src/i18n/lang/en/layouts.ts

@@ -6,8 +6,8 @@ const layouts: LLayouts = {
       disclaimer: 'Disclaimer',
     },
     sidebar: {
-      collapse: 'Collapse',
-      expand: 'Expand',
+      collapse: 'Collapse Sidebar',
+      expand: 'Expand Sidebar',
     },
   },
   detailLayout: {
@@ -20,6 +20,101 @@ const layouts: LLayouts = {
       },
     },
   },
+  routes: {
+    home: 'Home',
+    nodes: {
+      title: 'Nodes',
+      tabs: {
+        overview: 'Overview',
+        tasks: 'Tasks',
+        monitoring: 'Monitoring',
+      },
+    },
+    projects: {
+      title: 'Projects',
+      tabs: {
+        overview: 'Overview',
+        spiders: 'Spiders',
+      },
+    },
+    spiders: {
+      title: 'Spiders',
+      tabs: {
+        overview: 'Overview',
+        files: 'Files',
+        tasks: 'Tasks',
+        schedules: 'Schedules',
+        data: 'Data',
+        settings: 'Settings',
+        dependencies: 'Dependencies',
+      },
+    },
+    tasks: {
+      title: 'Tasks',
+      tabs: {
+        overview: 'Overview',
+        logs: 'Logs',
+        data: 'Data',
+      },
+    },
+    schedules: {
+      title: 'Schedules',
+      tabs: {
+        overview: 'Overview',
+        tasks: 'Tasks',
+      },
+    },
+    users: {
+      title: 'Users',
+      tabs: {
+        overview: 'Overview',
+      },
+    },
+    tokens: {
+      title: 'Tokens',
+    },
+    dependencies: {
+      title: 'Dependencies',
+      settings: 'Settings',
+      lang: {
+        python: 'Python',
+        node: 'Node',
+      },
+    },
+    notifications: {
+      title: 'Notifications',
+      tabs: {
+        settings: 'Settings',
+        templates: 'Templates',
+      },
+    },
+    gits: {
+      title: 'Git Repo',
+      tabs: {
+        overview: 'Overview',
+        files: 'Files',
+        logs: 'Logs',
+        changes: 'Changes',
+        spiders: 'Spiders',
+      },
+    },
+    dataSources: {
+      title: 'Data Sources',
+      tabs: {
+        overview: 'Overview',
+      },
+    },
+    environments: {
+      title: 'Environments',
+    },
+    system: {
+      title: 'System',
+    },
+    misc: {
+      disclaimer: 'Disclaimer',
+      mySettings: 'My Settings',
+    },
+  },
 };
 
 export default layouts;