chore: format code

vben
1 parent 2884e863
Showing 100 changed files with 188 additions and 184 deletions
.vscode/launch.json
README.zh-CN.md
build/generate/icon/index.ts
build/script/buildConf.ts
build/vite/plugin/compress.ts
build/vite/plugin/index.ts
mock/_util.ts
mock/sys/user.ts
prettier.config.js
src/App.vue
src/api/sys/upload.ts
src/api/sys/user.ts
src/components/Application/src/AppDarkModeToggle.vue
src/components/Application/src/search/AppSearchModal.vue
src/components/Basic/src/BasicHelp.vue
src/components/Button/src/PopConfirmButton.vue
src/components/CodeEditor/src/codemirror/CodeMirror.vue
src/components/Cropper/src/CropperAvatar.vue
src/components/Description/src/typing.ts
src/components/Drawer/src/BasicDrawer.vue
@@ -8,6 +8,6 @@
       "url": "http://localhost:3100",
       "webRoot": "${workspaceFolder}/src",
       "sourceMaps": true
-    },
+    }
   ]
 }
@@ -150,7 +150,7 @@ yarn build
 ## 后台整合示例
  
 - [lamp-cloud](https://github.com/zuihou/lamp-cloud) - 基于 SpringCloud Alibaba 的微服务中后台快速开发平台
-- [matecloud](https://github.com/matevip/matecloud) - MateCloud微服务脚手架，基于Spring Cloud 2020.0.3、SpringBoot 2.5.3的全开源平台
+- [matecloud](https://github.com/matevip/matecloud) - MateCloud 微服务脚手架，基于 Spring Cloud 2020.0.3、SpringBoot 2.5.3 的全开源平台
  
 ## 维护者
  
@@ -52,19 +52,19 @@ async function generateIcon() {
           const { prefix } = data;
           const isLocal = useType === 'local';
           const icons = Object.keys(data.icons).map(
-            (item) => `${isLocal ? prefix + ':' : ''}${item}`
+            (item) => `${isLocal ? prefix + ':' : ''}${item}`,
           );
  
           await fs.writeFileSync(
             path.join(output, `icons.data.ts`),
-            `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`
+            `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`,
           );
           prefixSet.push(prefix);
         }
       }
       fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'));
       console.log(
-        `✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`
+        `✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`,
       );
     });
 }
@@ -15,7 +15,7 @@ function createConfig(
     configName,
     config,
     configFileName = GLOB_CONFIG_FILE_NAME,
-  }: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} }
+  }: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} },
 ) {
   try {
     const windowConf = `window.${configName}`;
@@ -7,7 +7,7 @@ import compressPlugin from &#39;vite-plugin-compression&#39;;
  
 export function configCompressPlugin(
   compress: 'gzip' | 'brotli' | 'none',
-  deleteOriginFile = false
+  deleteOriginFile = false,
 ): Plugin | Plugin[] {
   const compressList = compress.split(',');
  
@@ -18,7 +18,7 @@ export function configCompressPlugin(
       compressPlugin({
         ext: '.gz',
         deleteOriginFile,
-      })
+      }),
     );
   }
  
@@ -28,7 +28,7 @@ export function configCompressPlugin(
         ext: '.br',
         algorithm: 'brotliCompress',
         deleteOriginFile,
-      })
+      }),
     );
   }
   return plugins;
@@ -68,7 +68,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  
     // rollup-plugin-gzip
     vitePlugins.push(
-      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE)
+      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE),
     );
  
     // vite-plugin-pwa
@@ -13,7 +13,7 @@ export function resultPageSuccess&lt;T = any&gt;(
   page: number,
   pageSize: number,
   list: T[],
-  { message = 'ok' } = {}
+  { message = 'ok' } = {},
 ) {
   const pageData = pagination(page, pageSize, list);
  
@@ -52,7 +52,7 @@ export default [
     response: ({ body }) => {
       const { username, password } = body;
       const checkUser = createFakeUserList().find(
-        (item) => item.username === username && password === item.password
+        (item) => item.username === username && password === item.password,
       );
       if (!checkUser) {
         return resultError('Incorrect account or password！');
@@ -7,7 +7,7 @@ module.exports = {
   singleQuote: true,
   quoteProps: 'as-needed',
   bracketSpacing: true,
-  trailingComma: 'es5',
+  trailingComma: 'all',
   jsxBracketSameLine: false,
   jsxSingleQuote: false,
   arrowParens: 'always',
@@ -16,5 +16,4 @@ module.exports = {
   proseWrap: 'never',
   htmlWhitespaceSensitivity: 'strict',
   endOfLine: 'auto',
-  rangeStart: 0,
 };
@@ -15,5 +15,6 @@
   // support Multi-language
   const { getAntdLocale } = useLocale();
  
+  // Listening to page changes and dynamically changing site titles
   useTitle();
 </script>
@@ -10,13 +10,13 @@ const { uploadUrl = &#39;&#39; } = useGlobSetting();
  */
 export function uploadApi(
   params: UploadFileParams,
-  onUploadProgress: (progressEvent: ProgressEvent) => void
+  onUploadProgress: (progressEvent: ProgressEvent) => void,
 ) {
   return defHttp.uploadFile<UploadApiResult>(
     {
       url: uploadUrl,
       onUploadProgress,
     },
-    params
+    params,
   );
 }
@@ -21,7 +21,7 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = &#39;modal&#39;) 
     },
     {
       errorMessageMode: mode,
-    }
+    },
   );
 }
  
 <template>
   <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
-    <div :class="`${prefixCls}-inner`"> </div>
+    <div :class="`${prefixCls}-inner`"></div>
     <SvgIcon size="14" name="sun" />
     <SvgIcon size="14" name="moon" />
   </div>
@@ -105,7 +105,7 @@
         nextTick(() => {
           unref(inputRef)?.focus();
         });
-    }
+    },
   );
  
   function handleClose() {
@@ -47,7 +47,7 @@
       const { prefixCls } = useDesign('basic-help');
  
       const getTooltipStyle = computed(
-        (): CSSProperties => ({ color: props.color, fontSize: props.fontSize })
+        (): CSSProperties => ({ color: props.color, fontSize: props.fontSize }),
       );
  
       const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }));
@@ -33,7 +33,7 @@
             okText: t('common.okText'),
             cancelText: t('common.cancelText'),
           },
-          { ...props, ...unref(attrs) }
+          { ...props, ...unref(attrs) },
         );
       });
  
 <template>
-  <div class="relative !h-full w-full overflow-hidden" ref="el"> </div>
+  <div class="relative !h-full w-full overflow-hidden" ref="el"></div>
 </template>
  
 <script lang="ts" setup>
@@ -40,7 +40,7 @@
         editor?.setValue(value ? value : '');
       }
     },
-    { flush: 'post' }
+    { flush: 'post' },
   );
  
   watchEffect(() => {
@@ -54,13 +54,13 @@
     },
     {
       immediate: true,
-    }
+    },
   );
  
   function setTheme() {
     unref(editor)?.setOption(
       'theme',
-      appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight'
+      appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight',
     );
   }
  
@@ -77,7 +77,7 @@
       const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
  
       const getImageWrapperStyle = computed(
-        (): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) })
+        (): CSSProperties => ({ width: unref(getWidth), height: unref(getWidth) }),
       );
  
       watchEffect(() => {
@@ -88,7 +88,7 @@
         () => sourceValue.value,
         (v: string) => {
           emit('update:value', v);
-        }
+        },
       );
  
       function handleUploadSuccess({ source }) {
@@ -14,7 +14,7 @@ export interface DescItem {
   // render
   render?: (
     val: any,
-    data: Recordable
+    data: Recordable,
   ) => VNode | undefined | JSX.Element | Element | string | number;
 }
  
@@ -139,7 +139,7 @@
         (newVal, oldVal) => {
           if (newVal !== oldVal) visibleRef.value = newVal;
         },
-        { deep: true }
+        { deep: true },
       );
  
       watch(
@@ -149,7 +149,7 @@
             emit('visible-change', visible);
             instance && drawerInstance.emitVisible?.(visible, instance.uid);
           });
-        }
+        },
       );
  
       // Cancel event
@@ -79,7 +79,7 @@
         () => props.data,
         () => {
           onRender();
-        }
+        },
       );
  
       // TODO
@@ -94,7 +94,7 @@
         () => unref(getFlowOptions),
         (options) => {
           unref(lfInstance)?.updateEditConfig(options);
-        }
+        },
       );
  
       // init logicFlow
@@ -110,7 +110,7 @@
       });
  
       const getBindValue = computed(
-        () => ({ ...attrs, ...props, ...unref(getProps) } as Recordable)
+        () => ({ ...attrs, ...props, ...unref(getProps) } as Recordable),
       );
  
       const getSchema = computed((): FormSchema[] => {
@@ -198,14 +198,14 @@
         },
         {
           immediate: true,
-        }
+        },
       );
  
       watch(
         () => unref(getProps).schemas,
         (schemas) => {
           resetSchema(schemas ?? []);
-        }
+        },
       );
  
       watch(
@@ -222,7 +222,7 @@
             initDefault();
             isInitedDefaultRef.value = true;
           }
-        }
+        },
       );
  
       async function setProps(formProps: Partial<FormProps>): Promise<void> {
@@ -284,7 +284,7 @@
         setFormModel,
         getFormClass,
         getFormActionBindProps: computed(
-          (): Recordable => ({ ...getProps.value, ...advanceState })
+          (): Recordable => ({ ...getProps.value, ...advanceState }),
         ),
         ...formActionType,
       };
@@ -100,7 +100,7 @@
         () => {
           !unref(isFirstLoad) && fetch();
         },
-        { deep: true }
+        { deep: true },
       );
  
       async function fetch() {
@@ -46,14 +46,14 @@
         () => {
           isFirstLoaded.value && fetch();
         },
-        { deep: true }
+        { deep: true },
       );
  
       watch(
         () => props.immediate,
         (v) => {
           v && !isFirstLoaded.value && fetch();
-        }
+        },
       );
  
       onMounted(() => {
@@ -105,7 +105,7 @@
           {
             text: t('common.resetText'),
           },
-          props.resetButtonOptions
+          props.resetButtonOptions,
         );
       });
  
@@ -114,7 +114,7 @@
           {
             text: t('common.queryText'),
           },
-          props.submitButtonOptions
+          props.submitButtonOptions,
         );
       });
  
@@ -183,7 +183,7 @@
         }
  
         const requiredRuleIndex: number = rules.findIndex(
-          (rule) => Reflect.has(rule, 'required') && !Reflect.has(rule, 'validator')
+          (rule) => Reflect.has(rule, 'required') && !Reflect.has(rule, 'validator'),
         );
  
         if (requiredRuleIndex !== -1) {
@@ -38,7 +38,7 @@ function genType() {
 export function setComponentRuleType(
   rule: ValidationRule,
   component: ComponentType,
-  valueFormat: string
+  valueFormat: string,
 ) {
   if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
     rule.type = valueFormat ? 'string' : 'object';
@@ -58,7 +58,7 @@ export default function ({
         debounceUpdateAdvanced();
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
  
   function getAdvanced(itemCol: Partial<ColEx>, itemColSum = 0, isLastAction = false) {
@@ -139,7 +139,7 @@ export default function ({
       if (isShow && (colProps || baseColProps)) {
         const { itemColSum: sum, isAdvanced } = getAdvanced(
           { ...baseColProps, ...colProps },
-          itemColSum
+          itemColSum,
         );
  
         itemColSum = sum || 0;
@@ -18,7 +18,7 @@ export function useForm(props?: Props): UseFormReturnType {
     const form = unref(formRef);
     if (!form) {
       error(
-        'The form instance has not been obtained, please make sure that the form has been rendered when performing the form operation!'
+        'The form instance has not been obtained, please make sure that the form has been rendered when performing the form operation!',
       );
     }
     await nextTick();
@@ -44,7 +44,7 @@ export function useForm(props?: Props): UseFormReturnType {
       {
         immediate: true,
         deep: true,
-      }
+      },
     );
   }
  
@@ -96,7 +96,7 @@ export function useForm(props?: Props): UseFormReturnType {
     appendSchemaByField: async (
       schema: FormSchema,
       prefixField: string | undefined,
-      first: boolean
+      first: boolean,
     ) => {
       const form = await getForm();
       form.appendSchemaByField(schema, prefixField, first);
@@ -150,12 +150,12 @@ export function useFormEvents({
     }
  
     const hasField = updateData.every(
-      (item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field)
+      (item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field),
     );
  
     if (!hasField) {
       error(
-        'All children of the form Schema array that need to be updated must contain the `field` field'
+        'All children of the form Schema array that need to be updated must contain the `field` field',
       );
       return;
     }
@@ -172,12 +172,12 @@ export function useFormEvents({
     }
  
     const hasField = updateData.every(
-      (item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field)
+      (item) => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field),
     );
  
     if (!hasField) {
       error(
-        'All children of the form Schema array that need to be updated must contain the `field` field'
+        'All children of the form Schema array that need to be updated must contain the `field` field',
       );
       return;
     }
@@ -37,7 +37,7 @@ export interface FormActionType {
   appendSchemaByField: (
     schema: FormSchema,
     prefixField: string | undefined,
-    first?: boolean | undefined
+    first?: boolean | undefined,
   ) => Promise<void>;
   validateFields: (nameList?: NamePath[]) => Promise<any>;
   validate: (nameList?: NamePath[]) => Promise<any>;
@@ -63,7 +63,7 @@
             </div>
           </div>
           <template v-else
-            ><div class="p-5"> <Empty /></div>
+            ><div class="p-5"><Empty /></div>
           </template>
         </template>
  
@@ -139,7 +139,7 @@
  
       const { getPaginationList, getTotal, setCurrentPage } = usePagination(
         currentList,
-        props.pageSize
+        props.pageSize,
       );
  
       watchEffect(() => {
@@ -151,7 +151,7 @@
         (v) => {
           emit('update:value', v);
           return emit('change', v);
-        }
+        },
       );
  
       function handlePageChange(page: number) {
@@ -16,7 +16,7 @@ export function useLoading(props: Partial&lt;LoadingProps&gt;): [Fn, Fn, (string) =&gt; v
 export function useLoading(opt: Partial<UseLoadingOptions>): [Fn, Fn, (string) => void];
  
 export function useLoading(
-  opt: Partial<LoadingProps> | Partial<UseLoadingOptions>
+  opt: Partial<LoadingProps> | Partial<UseLoadingOptions>,
 ): [Fn, Fn, (string) => void] {
   let props: Partial<LoadingProps>;
   let target: HTMLElement | Ref<ElRef> = document.body;
@@ -52,7 +52,7 @@
         {
           immediate: true,
           flush: 'post',
-        }
+        },
       );
  
       watch(
@@ -62,7 +62,7 @@
             instance.getVditor()?.setValue(v);
           }
           valueRef.value = v;
-        }
+        },
       );
  
       const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
@@ -64,7 +64,7 @@
         menuState,
         items,
         mode as any,
-        accordion
+        accordion,
       );
  
       const getIsTopMenu = computed(() => {
@@ -114,7 +114,7 @@
           () => props.items,
           () => {
             handleMenuChange();
-          }
+          },
         );
  
       async function handleMenuClick({ key }: { key: string; keyPath: string[] }) {
@@ -14,7 +14,7 @@ export function useOpenKeys(
   menuState: MenuState,
   menus: Ref<MenuType[]>,
   mode: Ref<MenuModeEnum>,
-  accordion: Ref<boolean>
+  accordion: Ref<boolean>,
 ) {
   const { getCollapsed, getIsMixSidebar } = useMenuSetting();
  
@@ -37,7 +37,7 @@ export function useOpenKeys(
         }
       },
       16,
-      !native
+      !native,
     );
   }
  
@@ -169,7 +169,7 @@
         },
         {
           immediate: false,
-        }
+        },
       );
  
       // 取消事件
@@ -62,7 +62,7 @@
         {
           attributes: true,
           subtree: true,
-        }
+        },
       );
  
       createModalContext({
@@ -89,7 +89,7 @@
           } else {
             minRealHeightRef.value = realHeightRef.value;
           }
-        }
+        },
       );
  
       onMounted(() => {
@@ -71,7 +71,7 @@
  
       provide(
         PageWrapperFixedHeightKey,
-        computed(() => props.fixedHeight)
+        computed(() => props.fixedHeight),
       );
  
       const getIsContentFullHeight = computed(() => {
@@ -82,7 +82,7 @@
         getIsContentFullHeight,
         wrapperRef,
         [headerRef, footerRef],
-        [contentRef]
+        [contentRef],
       );
       setCompensation({ useLayoutFooter: true, elements: [footerRef] });
  
@@ -135,7 +135,7 @@
         {
           flush: 'post',
           immediate: true,
-        }
+        },
       );
  
       return {
@@ -103,7 +103,7 @@
         },
         {
           deep: true,
-        }
+        },
       );
  
       return { wrapRef, download };
@@ -7,9 +7,9 @@ export const renderQrCode = ({
   canvas,
   content,
   width = 0,
-  options: params = {}
+  options: params = {},
 }: RenderQrCodeParams) => {
-  const options = cloneDeep(params)
+  const options = cloneDeep(params);
   // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
   options.errorCorrectionLevel = options.errorCorrectionLevel || getErrorCorrectionLevel(content);
  
@@ -44,7 +44,7 @@ export default defineComponent({
  
     const clickTrackHandler = (e: any) => {
       const offset = Math.abs(
-        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
+        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client],
       );
       const thumbHalf = thumb.value[bar.value.offset] / 2;
       const thumbPositionPercentage =
@@ -104,7 +104,7 @@ export default defineComponent({
             move: props.move,
             bar: bar.value,
           }),
-        })
+        }),
       );
   },
 });
@@ -75,7 +75,7 @@
         items,
         accordion,
         mixSider,
-        collapse
+        collapse,
       );
  
       const getBindValues = computed(() => ({ ...attrs, ...props }));
@@ -89,7 +89,7 @@
             setOpenKeys(currentRoute.value.path);
           }
         },
-        { immediate: true }
+        { immediate: true },
       );
  
       watch(
@@ -100,7 +100,7 @@
           }
           setOpenKeys(currentRoute.value.path);
         },
-        { flush: 'post' }
+        { flush: 'post' },
       );
  
       listenerRouteChange((route) => {
@@ -87,7 +87,7 @@
           nextTick(() => {
             updateOpened();
           });
-        }
+        },
       );
  
       function updateOpened() {
@@ -98,7 +98,7 @@
             active.value = false;
           }
         },
-        { immediate: true }
+        { immediate: true },
       );
  
       return { getClass, prefixCls, getItemStyle, getCollapse, handleClickItem, showTooptip };
@@ -286,7 +286,7 @@
             if (props.name && Array.isArray(data)) {
               state.opened = (data as (string | number)[]).includes(props.name);
             }
-          }
+          },
         );
  
         rootMenuEmitter.on('on-update-active-name:submenu', (data: number[]) => {
@@ -15,7 +15,7 @@ export function useOpenKeys(
   menus: Ref<MenuType[]>,
   accordion: Ref<boolean>,
   mixSider: Ref<boolean>,
-  collapse: Ref<boolean>
+  collapse: Ref<boolean>,
 ) {
   const debounceSetOpenKeys = useDebounceFn(setOpenKeys, 50);
   async function setOpenKeys(path: string) {
@@ -38,7 +38,7 @@ export function useOpenKeys(
         menuState.activeSubMenuNames = menuState.openNames;
       },
       30,
-      native
+      native,
     );
   }
  
@@ -59,7 +59,7 @@
         () => unref(innerValueRef),
         (val) => {
           emit('change', val);
-        }
+        },
       );
  
       return {
@@ -111,7 +111,7 @@
         unref(isFixedHeightPage) &&
           props.canResize &&
           warn(
-            "'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)"
+            "'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)",
           );
       });
  
@@ -157,7 +157,7 @@
           getFieldsValue: formActions.getFieldsValue,
           clearSelectedRowKeys,
         },
-        emit
+        emit,
       );
  
       function handleTableChange(...args) {
@@ -182,7 +182,7 @@
         tableElRef,
         getColumnsRef,
         getRowSelectionRef,
-        getDataSourceRef
+        getDataSourceRef,
       );
  
       const { customRow } = useCustomRow(getProps, {
@@ -211,7 +211,7 @@
         getProps,
         getScrollRef,
         tableElRef,
-        getDataSourceRef
+        getDataSourceRef,
       );
  
       const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
@@ -21,7 +21,7 @@ export const CellComponent: FunctionalComponent = (
     popoverVisible,
     getPopupContainer,
   }: ComponentProps,
-  { attrs }
+  { attrs },
 ) => {
   const Comp = componentMap.get(component) as typeof defineComponent;
  
@@ -39,6 +39,6 @@ export const CellComponent: FunctionalComponent = (
     {
       default: () => DefaultComp,
       content: () => ruleMessage,
-    }
+    },
   );
 };
@@ -5,9 +5,9 @@
       :class="{ [`${prefixCls}__normal`]: true, 'ellipsis-cell': column.ellipsis }"
       @click="handleEdit"
     >
-      <div class="cell-content" :title="column.ellipsis ? getValues ?? '' : ''">{{
-        getValues ? getValues : '&nbsp;'
-      }}</div>
+      <div class="cell-content" :title="column.ellipsis ? getValues ?? '' : ''">
+        {{ getValues ? getValues : '&nbsp;' }}
+      </div>
       <FormOutlined :class="`${prefixCls}__normal-icon`" v-if="!column.editRow" />
     </div>
  
@@ -351,7 +351,7 @@
           const visible =
             columns.findIndex(
               (c: BasicColumn | string) =>
-                c === col.value || (typeof c !== 'string' && c.dataIndex === col.value)
+                c === col.value || (typeof c !== 'string' && c.dataIndex === col.value),
             ) !== -1;
           return { dataIndex: col.value, fixed: col.fixed, visible };
         });
@@ -40,7 +40,7 @@ function handleChildren(children: BasicColumn[] | undefined, ellipsis: boolean) 
 function handleIndexColumn(
   propsRef: ComputedRef<BasicTableProps>,
   getPaginationRef: ComputedRef<boolean | PaginationProps>,
-  columns: BasicColumn[]
+  columns: BasicColumn[],
 ) {
   const { t } = useI18n();
  
@@ -102,7 +102,7 @@ function handleActionColumn(propsRef: ComputedRef&lt;BasicTableProps&gt;, columns: Bas
  
 export function useColumns(
   propsRef: ComputedRef<BasicTableProps>,
-  getPaginationRef: ComputedRef<boolean | PaginationProps>
+  getPaginationRef: ComputedRef<boolean | PaginationProps>,
 ) {
   const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
   let cacheColumns = unref(propsRef).columns;
@@ -122,7 +122,7 @@ export function useColumns(
  
       handleItem(
         item,
-        Reflect.has(item, 'ellipsis') ? !!item.ellipsis : !!ellipsis && !customRender && !slots
+        Reflect.has(item, 'ellipsis') ? !!item.ellipsis : !!ellipsis && !customRender && !slots,
       );
     });
     return columns;
@@ -179,7 +179,7 @@ export function useColumns(
     (columns) => {
       columnsRef.value = columns;
       cacheColumns = columns?.filter((item) => !item.flag) ?? [];
-    }
+    },
   );
  
   function setCacheColumnsByField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
@@ -288,7 +288,7 @@ function sortFixedColumn(columns: BasicColumn[]) {
     defColumns.push(column);
   }
   return [...fixedLeftColumns, ...defColumns, ...fixedRightColumns].filter(
-    (item) => !item.defaultHidden
+    (item) => !item.defaultHidden,
   );
 }
  
@@ -15,7 +15,7 @@ interface Options {
 function getKey(
   record: Recordable,
   rowKey: string | ((record: Record<string, any>) => string) | undefined,
-  autoCreateKey?: boolean
+  autoCreateKey?: boolean,
 ) {
   if (!rowKey || autoCreateKey) {
     return record[ROW_KEY];
@@ -31,7 +31,7 @@ function getKey(
  
 export function useCustomRow(
   propsRef: ComputedRef<BasicTableProps>,
-  { setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options
+  { setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options,
 ) {
   const customRow = (record: Recordable, index: number) => {
     return {
@@ -40,7 +40,7 @@ export function useDataSource(
     clearSelectedRowKeys,
     tableData,
   }: ActionType,
-  emit: EmitType
+  emit: EmitType,
 ) {
   const searchState = reactive<SearchState>({
     sortInfo: {},
@@ -61,13 +61,13 @@ export function useDataSource(
     },
     {
       immediate: true,
-    }
+    },
   );
  
   function handleTableChange(
     pagination: PaginationProps,
     filters: Partial<Recordable<string[]>>,
-    sorter: SorterResult
+    sorter: SorterResult,
   ) {
     const { clearSelectOnPageChange, sortFn, filterFn } = unref(propsRef);
     if (clearSelectOnPageChange) {
@@ -148,7 +148,7 @@ export function useDataSource(
  
   function updateTableDataRecord(
     rowKey: string | number,
-    record: Recordable
+    record: Recordable,
   ): Recordable | undefined {
     const row = findTableDataRecord(rowKey);
  
@@ -206,7 +206,7 @@ export function useDataSource(
       const { pageField, sizeField, listField, totalField } = Object.assign(
         {},
         FETCH_SETTING,
-        fetchSetting
+        fetchSetting,
       );
       let pageParams: Recordable = {};
  
@@ -8,7 +8,7 @@ export function useLoading(props: ComputedRef&lt;BasicTableProps&gt;) {
     () => unref(props).loading,
     (loading) => {
       loadingRef.value = loading;
-    }
+    },
   );
  
   const getLoading = computed(() => unref(loadingRef));
@@ -8,7 +8,7 @@ import { findNodeAll } from &#39;/@/utils/helper/treeHelper&#39;;
 export function useRowSelection(
   propsRef: ComputedRef<BasicTableProps>,
   tableData: Ref<Recordable[]>,
-  emit: EmitType
+  emit: EmitType,
 ) {
   const selectedRowKeysRef = ref<string[]>([]);
   const selectedRowRef = ref<Recordable[]>([]);
@@ -35,7 +35,7 @@ export function useRowSelection(
     () => unref(propsRef).rowSelection?.selectedRowKeys,
     (v: string[]) => {
       setSelectedRowKeys(v);
-    }
+    },
   );
  
   watch(
@@ -53,7 +53,7 @@ export function useRowSelection(
         });
       });
     },
-    { deep: true }
+    { deep: true },
   );
  
   const getAutoCreateKey = computed(() => {
@@ -72,7 +72,7 @@ export function useRowSelection(
       (item) => rowKeys.includes(item[unref(getRowKey) as string]),
       {
         children: propsRef.value.childrenColumnName ?? 'children',
-      }
+      },
     );
     const trueSelectedRows: any[] = [];
     rowKeys.forEach((key: string) => {
@@ -18,7 +18,7 @@ export function useTable(tableProps?: Props): [
   (instance: TableActionType, formInstance: UseTableMethod) => void,
   TableActionType & {
     getForm: () => FormActionType;
-  }
+  },
 ] {
   const tableRef = ref<Nullable<TableActionType>>(null);
   const loadedRef = ref<Nullable<boolean>>(false);
@@ -50,7 +50,7 @@ export function useTable(tableProps?: Props): [
       {
         immediate: true,
         deep: true,
-      }
+      },
     );
   }
  
@@ -58,7 +58,7 @@ export function useTable(tableProps?: Props): [
     const table = unref(tableRef);
     if (!table) {
       error(
-        'The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!'
+        'The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!',
       );
     }
     return table as TableActionType;
@@ -6,7 +6,7 @@ import { ROW_KEY } from &#39;../const&#39;;
 export function useTableExpand(
   propsRef: ComputedRef<BasicTableProps>,
   tableData: Ref<Recordable[]>,
-  emit: EmitType
+  emit: EmitType,
 ) {
   const expandedRowKeys = ref<string[]>([]);
  
@@ -12,7 +12,7 @@ export function useTableFooter(
     scrollToFirstRowOnChange: boolean;
   }>,
   tableElRef: Ref<ComponentRef>,
-  getDataSourceRef: ComputedRef<Recordable>
+  getDataSourceRef: ComputedRef<Recordable>,
 ) {
   const getIsEmptyData = computed(() => {
     return (unref(getDataSourceRef) || []).length === 0;
@@ -43,7 +43,7 @@ export function useTableFooter(
         name: 'scroll',
         listener: () => {
           const footerBodyDom = tableEl.$el.querySelector(
-            '.ant-table-footer .ant-table-body'
+            '.ant-table-footer .ant-table-body',
           ) as HTMLDivElement;
           if (!footerBodyDom || !bodyDom) return;
           footerBodyDom.scrollLeft = bodyDom.scrollLeft;
@@ -8,7 +8,7 @@ export function useTableForm(
   propsRef: ComputedRef<BasicTableProps>,
   slots: Slots,
   fetch: (opt?: FetchParams | undefined) => Promise<void>,
-  getLoading: ComputedRef<boolean | undefined>
+  getLoading: ComputedRef<boolean | undefined>,
 ) {
   const getFormProps = computed((): Partial<FormProps> => {
     const { formConfig } = unref(propsRef);
@@ -8,7 +8,7 @@ import { getSlot } from &#39;/@/utils/helper/tsxHelper&#39;;
 export function useTableHeader(
   propsRef: ComputedRef<BasicTableProps>,
   slots: Slots,
-  handlers: InnerHandlers
+  handlers: InnerHandlers,
 ) {
   const getHeaderProps = computed((): Recordable => {
     const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(propsRef);
@@ -46,7 +46,7 @@ export function useTableHeader(
                       headerTop: () => getSlot(slots, 'headerTop'),
                     }
                   : {}),
-              }
+              },
             ),
     };
   });
@@ -13,7 +13,7 @@ export function useTableScroll(
   tableElRef: Ref<ComponentRef>,
   columnsRef: ComputedRef<BasicColumn[]>,
   rowSelectionRef: ComputedRef<TableRowSelection<any> | null>,
-  getDataSourceRef: ComputedRef<Recordable[]>
+  getDataSourceRef: ComputedRef<Recordable[]>,
 ) {
   const tableHeightRef: Ref<Nullable<number>> = ref(null);
  
@@ -34,7 +34,7 @@ export function useTableScroll(
     },
     {
       flush: 'post',
-    }
+    },
   );
  
   function redoHeight() {
@@ -34,7 +34,7 @@
         () => {
           setTime();
         },
-        { immediate: true }
+        { immediate: true },
       );
  
       function getTime() {
@@ -190,7 +190,7 @@
             return;
           }
           editor.setMode(attrs.disabled ? 'readonly' : 'design');
-        }
+        },
       );
  
       onMountedOrActivated(() => {
@@ -264,7 +264,7 @@
           () => props.modelValue,
           (val: string, prevVal: string) => {
             setValue(editor, val, prevVal);
-          }
+          },
         );
  
         watch(
@@ -274,7 +274,7 @@
           },
           {
             immediate: true,
-          }
+          },
         );
  
         editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
@@ -18,10 +18,10 @@ export const ScaleRotateTransition = createSimpleTransition(&#39;scale-rotate-transi
  
 export const ExpandXTransition = createJavascriptTransition(
   'expand-x-transition',
-  ExpandTransitionGenerator('', true)
+  ExpandTransitionGenerator('', true),
 );
  
 export const ExpandTransition = createJavascriptTransition(
   'expand-transition',
-  ExpandTransitionGenerator('')
+  ExpandTransitionGenerator(''),
 );
@@ -41,7 +41,7 @@ export function createSimpleTransition(name: string, origin = &#39;top center 0&#39;, mo
 export function createJavascriptTransition(
   name: string,
   functions: Recordable,
-  mode: Mode = 'in-out'
+  mode: Mode = 'in-out',
 ) {
   return defineComponent({
     name,
@@ -119,7 +119,7 @@
       });
  
       const getTreeData = computed((): TreeItem[] =>
-        searchState.startSearch ? searchState.searchData : unref(treeDataRef)
+        searchState.startSearch ? searchState.searchData : unref(treeDataRef),
       );
  
       const getNotFound = computed((): boolean => {
@@ -219,7 +219,7 @@
           (node) => {
             return node[titleField]?.includes(searchValue) ?? false;
           },
-          unref(getReplaceFields)
+          unref(getReplaceFields),
         );
       }
  
@@ -266,7 +266,7 @@
         () => props.value,
         () => {
           state.checkedKeys = toRaw(props.value || []);
-        }
+        },
       );
  
       watch(
@@ -275,7 +275,7 @@
           const v = toRaw(state.checkedKeys);
           emit('update:value', v);
           emit('change', v);
-        }
+        },
       );
  
       // watchEffect(() => {
@@ -143,7 +143,7 @@
         () => searchValue.value,
         (v) => {
           debounceEmitChange(v);
-        }
+        },
       );
       watch(
         () => props.searchText,
@@ -151,7 +151,7 @@
           if (v !== searchValue.value) {
             searchValue.value = v;
           }
-        }
+        },
       );
       // function handleSearch(e: ChangeEvent): void {
       //   debounceEmitChange(e.target.value);
@@ -8,7 +8,7 @@ import { forEach } from &#39;/@/utils/helper/treeHelper&#39;;
  
 export function useTree(
   treeDataRef: Ref<TreeDataItem[]>,
-  getReplaceFields: ComputedRef<ReplaceFields>
+  getReplaceFields: ComputedRef<ReplaceFields>,
 ) {
   function getAllKeys(list?: TreeDataItem[]) {
     const keys: string[] = [];
@@ -80,7 +80,7 @@
         (value = []) => {
           fileList.value = isArray(value) ? value : [];
         },
-        { immediate: true }
+        { immediate: true },
       );
  
       // 上传modal保存操作
@@ -15,7 +15,7 @@
           nextTick(() => {
             modalFn?.redoModalHeight?.();
           });
-        }
+        },
       );
       return () => {
         const { columns, actionColumn, dataSource } = props;
@@ -102,7 +102,7 @@
  
       const getOkButtonProps = computed(() => {
         const someSuccess = fileListRef.value.some(
-          (item) => item.status === UploadResultStatus.SUCCESS
+          (item) => item.status === UploadResultStatus.SUCCESS,
         );
         return {
           disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess,
@@ -111,7 +111,7 @@
  
       const getUploadBtnText = computed(() => {
         const someError = fileListRef.value.some(
-          (item) => item.status === UploadResultStatus.ERROR
+          (item) => item.status === UploadResultStatus.ERROR,
         );
         return isUploadingRef.value
           ? t('component.upload.uploading')
@@ -193,7 +193,7 @@
             function onUploadProgress(progressEvent: ProgressEvent) {
               const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
               item.percent = complete;
-            }
+            },
           );
           item.status = UploadResultStatus.SUCCESS;
           item.responseData = data;
@@ -225,7 +225,7 @@
           const data = await Promise.all(
             uploadFileList.map((item) => {
               return uploadApiByItem(item);
-            })
+            }),
           );
           isUploadingRef.value = false;
           // 生产环境:抛出错误
@@ -45,7 +45,7 @@
               };
             });
         },
-        { immediate: true }
+        { immediate: true },
       );
  
       // 删除
@@ -56,7 +56,7 @@
           emit('delete', removed[0].url);
           emit(
             'list-change',
-            fileListRef.value.map((item) => item.url)
+            fileListRef.value.map((item) => item.url),
           );
         }
       }
@@ -92,7 +92,7 @@
             emit('update:value', isPassing);
             emit('change', isPassing);
           }
-        }
+        },
       );
  
       watchEffect(() => {
@@ -37,7 +37,7 @@
             emit('change', isPassing);
             emit('update:value', isPassing);
           }
-        }
+        },
       );
  
       const getImgWrapStyleRef = computed(() => {
@@ -65,7 +65,7 @@
         const { imgWidth, height, maxDegree } = props;
         const { moveX } = data;
         const currentRotate = Math.ceil(
-          (moveX / (imgWidth! - parseInt(height as string))) * maxDegree! * unref(getFactorRef)
+          (moveX / (imgWidth! - parseInt(height as string))) * maxDegree! * unref(getFactorRef),
         );
         state.currentRotate = currentRotate;
         state.imgStyle = hackCss('transform', `rotateZ(${state.randomRotate - currentRotate}deg)`);
@@ -15,7 +15,7 @@ const loadingDirective: Directive = {
         loading: !!binding.value,
         absolute: !fullscreen,
       },
-      fullscreen ? document.body : el
+      fullscreen ? document.body : el,
     );
     el.instance = instance;
   },
@@ -16,7 +16,7 @@ export function useRuleFormItem&lt;T extends Recordable&gt;(
   props: T,
   key: keyof T = 'value',
   changeEvent = 'change',
-  emitData?: Ref<any[]>
+  emitData?: Ref<any[]>,
 ) {
   const instance = getCurrentInstance();
   const emit = instance?.emit;
@@ -21,7 +21,7 @@ type ShallowUnwrap&lt;T&gt; = {
 export function createContext<T>(
   context: any,
   key: InjectionKey<T> = Symbol(),
-  options: CreateContextOptions = {}
+  options: CreateContextOptions = {},
 ) {
   const { readonly = true, createProvider = false, native = false } = options;
  
@@ -39,7 +39,7 @@ export function useContext&lt;T&gt;(key: InjectionKey&lt;T&gt;, defaultValue?: any, native?:
  
 export function useContext<T>(
   key: InjectionKey<T> = Symbol(),
-  defaultValue?: any
+  defaultValue?: any,
 ): ShallowUnwrap<T> {
   return inject(key, defaultValue || {});
 }
 import { ref, unref } from 'vue';
  
 export function useLockFn<P extends any[] = any[], V extends any = any>(
-  fn: (...args: P) => Promise<V>
+  fn: (...args: P) => Promise<V>,
 ) {
   const lockRef = ref(false);
   return async function (...args: P) {
@@ -16,7 +16,7 @@ export function useTimeoutFn(handle: Fn&lt;any&gt;, wait: number, native = false) {
       (maturity) => {
         maturity && handle();
       },
-      { immediate: false }
+      { immediate: false },
     );
   }
   return { readyRef, stop, start };
@@ -46,7 +46,7 @@ export function useEventListener({
           });
         }
       },
-      { immediate: true }
+      { immediate: true },
     );
  
     remove = () => {
@@ -10,7 +10,7 @@ export function useScroll(
     wait?: number;
     leading?: boolean;
     trailing?: boolean;
-  }
+  },
 ) {
   const refX = ref(0);
   const refY = ref(0);
@@ -49,7 +49,7 @@ export function useScroll(
           el && el.removeEventListener('scroll', handler);
         });
       },
-      { immediate: true }
+      { immediate: true },
     );
   });
  
@@ -14,7 +14,7 @@ export const useGlobSetting = (): Readonly&lt;GlobConfig&gt; =&gt; {
  
   if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
     warn(
-      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
     );
   }
  
@@ -54,7 +54,7 @@ export function useMenuSetting() {
   const getTopMenuAlign = computed(() => appStore.getMenuSetting.topMenuAlign);
  
   const getCloseMixSidebarOnChange = computed(
-    () => appStore.getMenuSetting.closeMixSidebarOnChange
+    () => appStore.getMenuSetting.closeMixSidebarOnChange,
   );
  
   const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
@@ -56,7 +56,7 @@ export function useRootSetting() {
   const getLayoutContentMode = computed(() =>
     appStore.getProjectConfig.contentMode === ContentEnum.FULL
       ? ContentEnum.FULL
-      : ContentEnum.FIXED
+      : ContentEnum.FIXED,
   );
  
   function setRootSetting(setting: Partial<RootSetting>) {
@@ -27,7 +27,7 @@ export function useContentHeight(
   anchorRef: Ref,
   subtractHeightRefs: Ref[],
   substractSpaceRefs: Ref[],
-  offsetHeightRef: Ref<number> = ref(0)
+  offsetHeightRef: Ref<number> = ref(0),
 ) {
   const contentHeight: Ref<Nullable<number>> = ref(null);
   const { footerHeightRef: layoutFooterHeightRef } = useLayoutHeight();
@@ -130,7 +130,7 @@ export function useContentHeight(
       calcContentHeight();
     },
     50,
-    { immediate: true }
+    { immediate: true },
   );
   watch(
     () => [layoutFooterHeightRef.value],
@@ -140,7 +140,7 @@ export function useContentHeight(
     {
       flush: 'post',
       immediate: true,
-    }
+    },
   );
  
   return { redoHeight, setCompensation, contentHeight };
@@ -17,7 +17,7 @@ export function useCopyToClipboard(initial?: string) {
         isSuccessRef.value = copyTextToClipboard(str);
       }
     },
-    { immediate: !!initial, flush: 'sync' }
+    { immediate: !!initial, flush: 'sync' },
   );
  
   return { clipboardRef, isSuccessRef, copiedRef };
@@ -11,7 +11,7 @@ import { useRootSetting } from &#39;/@/hooks/setting/useRootSetting&#39;;
  
 export function useECharts(
   elRef: Ref<HTMLDivElement>,
-  theme: 'light' | 'dark' | 'default' = 'default'
+  theme: 'light' | 'dark' | 'default' = 'default',
 ) {
   const { getDarkMode: getSysDarkMode } = useRootSetting();
  
@@ -90,7 +90,7 @@ export function useECharts(
         initCharts(theme as 'default');
         setOptions(cacheOptions.value);
       }
-    }
+    },
   );
  
   tryOnUnmounted(() => {
@@ -88,7 +88,7 @@ export function usePermission() {
   async function changeRole(roles: RoleEnum | RoleEnum[]): Promise<void> {
     if (projectSetting.permissionMode !== PermissionModeEnum.ROUTE_MAPPING) {
       throw new Error(
-        'Please switch PermissionModeEnum to ROUTE_MAPPING mode in the configuration to operate!'
+        'Please switch PermissionModeEnum to ROUTE_MAPPING mode in the configuration to operate!',
       );
     }
  
@@ -6,6 +6,9 @@ import { useRouter } from &#39;vue-router&#39;;
  
 import { REDIRECT_NAME } from '/@/router/constant';
  
+/**
+ * Listening to page changes and dynamically changing site titles
+ */
 export function useTitle() {
   const { title } = useGlobSetting();
   const { t } = useI18n();
@@ -17,6 +20,7 @@ export function useTitle() {
     () => currentRoute.value.path,
     () => {
       const route = unref(currentRoute);
+
       if (route.name === REDIRECT_NAME) {
         return;
       }
@@ -24,6 +28,6 @@ export function useTitle() {
       const tTitle = t(route?.meta?.title as string);
       pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
     },
-    { immediate: true }
+    { immediate: true },
   );
 }
@@ -6,7 +6,7 @@ import { isDef } from &#39;/@/utils/is&#39;;
 const domSymbol = Symbol('watermark-dom');
  
 export function useWatermark(
-  appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>
+  appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>,
 ) {
   const func = useRafThrottle(function () {
     const el = unref(appendEl);
@@ -49,7 +49,7 @@ export function useWatermark(
       width?: number;
       height?: number;
       str?: string;
-    } = {}
+    } = {},
   ) {
     const el = unref(watermarkEl);
     if (!el) return;
@@ -27,7 +27,7 @@ export function useContentViewHeight() {
       contentHeight.value = window.innerHeight;
     },
     100,
-    { immediate: true }
+    { immediate: true },
   );
  
   async function setPageHeight(height: number) {
@@ -107,7 +107,7 @@
         () => props.currentPage,
         (v) => {
           current.value = v;
-        }
+        },
       );
       const isTitleClickable = computed(() => !!props.onTitleClick);
       const getPagination = computed(() => {
@@ -60,7 +60,7 @@
       const { getIsMobile } = useAppInject();
  
       const getComputedMenuMode = computed(() =>
-        unref(getIsMobile) ? MenuModeEnum.INLINE : props.menuMode || unref(getMenuMode)
+        unref(getIsMobile) ? MenuModeEnum.INLINE : props.menuMode || unref(getMenuMode),
       );
  
       const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme));
@@ -20,11 +20,11 @@ export function useSplitMenu(splitType: Ref&lt;MenuSplitTyeEnum&gt;) {
   const throttleHandleSplitLeftMenu = useThrottleFn(handleSplitLeftMenu, 50);
  
   const splitNotLeft = computed(
-    () => unref(splitType) !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontal)
+    () => unref(splitType) !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontal),
   );
  
   const getSplitLeft = computed(
-    () => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT
+    () => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT,
   );
  
   const getSpiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP);
@@ -48,7 +48,7 @@ export function useSplitMenu(splitType: Ref&lt;MenuSplitTyeEnum&gt;) {
     },
     {
       immediate: true,
-    }
+    },
   );
  
   // Menu changes
@@ -59,7 +59,7 @@ export function useSplitMenu(splitType: Ref&lt;MenuSplitTyeEnum&gt;) {
     },
     {
       immediate: true,
-    }
+    },
   );
  
   // split Menu changes
@@ -68,7 +68,7 @@ export function useSplitMenu(splitType: Ref&lt;MenuSplitTyeEnum&gt;) {
     () => {
       if (unref(splitNotLeft)) return;
       genMenus();
-    }
+    },
   );
  
   // Handle left menu split
@@ -49,7 +49,7 @@
  
       function handleCopy() {
         const { isSuccessRef } = useCopyToClipboard(
-          JSON.stringify(unref(appStore.getProjectConfig), null, 2)
+          JSON.stringify(unref(appStore.getProjectConfig), null, 2),
         );
         unref(isSuccessRef) &&
           createSuccessModal({
@@ -23,7 +23,7 @@
       const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
  
       const getIcon = computed(() =>
-        unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full'
+        unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full',
       );
  
       function handleFold() {
@@ -44,12 +44,12 @@
       const getIsTabs = computed(() => !props.isExtra);
  
       const getTrigger = computed((): ('contextmenu' | 'click' | 'hover')[] =>
-        unref(getIsTabs) ? ['contextmenu'] : ['click']
+        unref(getIsTabs) ? ['contextmenu'] : ['click'],
       );
  
       const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(
         props as TabContentProps,
-        getIsTabs
+        getIsTabs,
       );
  
       function handleContext(e) {
@@ -85,7 +85,7 @@ export function scriptErrorHandler(
   source?: string,
   lineno?: number,
   colno?: number,
-  error?: Error
+  error?: Error,
 ) {
   if (event === 'Script error.' && !source) {
     return false;
@@ -129,7 +129,7 @@ function registerPromiseErrorHandler() {
         message: event.reason,
       });
     },
-    true
+    true,
   );
 }
  
@@ -157,7 +157,7 @@ function registerResourceErrorHandler() {
         message: (e.target || ({} as any)).localName + ' is load error',
       });
     },
-    true
+    true,
   );
 }