feat(Implementation of asynchronous asset handoff): implementation of…

… asynchronous asset handoff

src/directive/sidebarDraggable.ts

@@ -9,7 +9,7 @@ export const draggable = {
       const newWidth = startWidth + (event.clientX - startX);
 
       // 确保宽度在合理范围内
-      if (newWidth >= 100 && newWidth <= 600) {
+      if (newWidth >= 240 && newWidth <= 600) {
         el.style.width = `${newWidth}px`;
 
         // 更新传递的 ref 变量

src/hooks/useTheme.ts

@@ -42,7 +42,7 @@ export const useTheme = () => {
   const changePrimary = (val: string | null) => {
     if (!val) {
       val = DEFAULT_PRIMARY;
-      message.success(`${t('Theme reset')} ${DEFAULT_PRIMARY}`);
+      message.success(`${t('Theme Reset')} ${DEFAULT_PRIMARY}`);
     }
 
     // 计算主题颜色变化

src/languages/modules/en.ts

@@ -12,13 +12,15 @@ export default {
   GUI: 'GUI',
   CLI: 'CLI',
   'Web Terminal': 'Web Terminal',
-  'Theme reset': 'The theme color has been reset to',
+  'Theme Reset': 'The theme color has been reset to',
   'Custom Setting': 'Custom Setting',
   'Dark Mode': '黑暗模式',
   'Theme Settings': 'Theme Settings',
   'Language Settings': 'Language Settings',
-  'Page configuration': 'Page configuration',
-  'Please select': 'Please select',
+  'Page Configuration': 'Page Configuration',
+  'Please Select': 'Please Select',
   'Language Selection': 'Language Selection',
+  'Asset Async': 'Asynchronous loading',
+  'Asset Async Explain': 'Whether assets are loaded asynchronously',
   'Primary Color': 'Primary Color'
 };

src/languages/modules/zh.ts

@@ -12,13 +12,15 @@ export default {
   GUI: '图形化配置',
   CLI: '命令行配置',
   'Web Terminal': 'Web 终端',
-  'Theme reset': '主题颜色已重置为',
+  'Theme Reset': '主题颜色已重置为',
   'Custom Setting': '自定义设置',
   'Dark Mode': '黑暗模式',
   'Theme Settings': '主题设置',
   'Language Settings': '语言设置',
-  'Page configuration': '页面配置',
-  'Please select': '请选择',
+  'Page Configuration': '页面配置',
+  'Please Select': '请选择',
+  'Asset Async': '异步加载',
+  'Asset Async Explain': '是否异步加载资产',
   'Language Selection': '语言选择',
   'Primary Color': '主题颜色'
 };

src/layouts/components/FileManagement/index.vue

@@ -147,8 +147,6 @@ const loadTree = async (isAsync: Boolean) => {
     const data = Object.values(treeMap).filter(node => !node.pId);
 
     testData.value = data;
-    console.log(res);
-    console.log(data);
   } catch (e) {
     console.log(e);
   }

src/layouts/components/SettingDrawer/index.vue

@@ -1,17 +1,11 @@
 <template>
-  <n-drawer
-    v-model:show="showSettingDrawer"
-    :default-width="290"
-    placement="right"
-    resizable
-    closable
-  >
-    <n-drawer-content :title="t('Custom Setting')" class="drawer-content">
+  <n-drawer v-model:show="showSettingDrawer" :default-width="290" placement="right" resizable>
+    <n-drawer-content :title="t('Custom Setting')" class="drawer-content" closable>
       <n-divider> {{ t('Theme Settings') }} </n-divider>
       <n-flex>
         <n-flex class="dark-setting" justify="space-between" align="center">
           {{ t('Dark Mode') }}
-          <n-switch v-model:value="active" @update:value="handleChange">
+          <n-switch v-model:value="darkModeActive" @update:value="handleDarkModeChange">
             <template #checked-icon>
               <n-icon :component="MoonOutline" />
             </template>
@@ -20,15 +14,31 @@
             </template>
           </n-switch>
         </n-flex>
+        <n-flex class="asset-async" justify="space-between" align="center">
+          <n-popover placement="bottom" trigger="hover">
+            <template #trigger>
+              {{ t('Asset Async') }}
+            </template>
+            {{ t('Asset Async Explain') }}
+          </n-popover>
+          <n-switch v-model:value="assetAsyncActive" @update:value="handleAssetAsyncChange">
+            <template #checked-icon>
+              <n-icon :component="ArrowBackCircleOutline" />
+            </template>
+            <template #unchecked-icon>
+              <n-icon :component="ArrowForwardCircleOutline" />
+            </template>
+          </n-switch>
+        </n-flex>
         <n-flex class="page-setting" justify="space-between" align="center">
-          {{ t('Page configuration') }}
+          {{ t('Page Configuration') }}
           <n-select
-            v-model:value="pageOptionValue"
-            :options="pageOptions"
             clearable
             size="small"
+            v-model:value="pageOptionValue"
+            :options="pageOptions"
+            :placeholder="t('Please Select')"
             @update-value="handlePageConfigurationChange"
-            :placeholder="t('Please select')"
           />
         </n-flex>
       </n-flex>
@@ -37,12 +47,12 @@
       <n-flex class="language-setting" justify="space-between" align="center">
         {{ t('Language Selection') }}
         <n-select
-          v-model:value="languageOptionValue"
-          :options="languageOptions"
           clearable
           size="small"
+          v-model:value="languageOptionValue"
+          :options="languageOptions"
+          :placeholder="t('Please Select')"
           @update-value="handlePageConfigurationChange"
-          :placeholder="t('Please select')"
         />
       </n-flex>
     </n-drawer-content>
@@ -55,24 +65,37 @@ import { storeToRefs } from 'pinia';
 import { SelectOption } from 'naive-ui';
 import { useTheme } from '@/hooks/useTheme.ts';
 import { onBeforeUnmount, reactive, ref } from 'vue';
+import { useTreeStore } from '@/stores/modules/tree.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
 
 import mittBus from '@/utils/mittBus.ts';
-import { MoonOutline, SunnyOutline } from '@vicons/ionicons5';
+import {
+  MoonOutline,
+  SunnyOutline,
+  ArrowBackCircleOutline,
+  ArrowForwardCircleOutline
+} from '@vicons/ionicons5';
 
+const treeStore = useTreeStore();
 const globalStore = useGlobalStore();
 
 const { t } = useI18n();
 const { switchDark } = useTheme();
 const { isDark } = storeToRefs(globalStore);
+const { isAsync } = storeToRefs(treeStore);
 
-const active = isDark;
+const darkModeActive = isDark;
+const assetAsyncActive = isAsync;
 const showSettingDrawer = ref<Boolean>(false);
 
-const handleChange = (value: Boolean) => {
+const handleDarkModeChange = (value: Boolean) => {
   globalStore.setGlobalState('isDark', value);
   switchDark();
 };
+const handleAssetAsyncChange = (value: Boolean) => {
+  treeStore.changeState(value);
+  mittBus.emit('tree-load');
+};
 
 const handlePageConfigurationChange = (value: string, option: SelectOption) => {
   console.log(value);
@@ -126,18 +149,22 @@ onBeforeUnmount(() => {
 <style scoped lang="scss">
 .drawer-content {
   :deep(.n-drawer-body-content-wrapper) {
-    .dark-setting {
+    .dark-setting,
+    .asset-async,
+    .page-setting,
+    .language-setting {
       width: 100%;
     }
+    .asset-async {
+      margin-top: 15px;
+    }
     .page-setting {
-      width: 100%;
       margin-top: 15px;
       .n-select {
         width: 150px;
       }
     }
     .language-setting {
-      width: 100%;
       .n-select {
         width: 150px;
       }

src/stores/modules/tree.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { TreeState } from '../interface/index';
+import piniaPersistConfig from '@/stores/helper/persist';
 
 export const useTreeStore = defineStore('tree', {
   state: (): TreeState => ({
@@ -10,5 +11,6 @@ export const useTreeStore = defineStore('tree', {
     changeState(newValue: Boolean) {
       newValue && (this.isAsync = newValue);
     }
-  }
+  },
+  persist: piniaPersistConfig('tree')
 });