diff --git a/apps/admin/src/components/common/rest-basic-editor/components/math-iframe-dialog.vue b/apps/admin/src/components/common/rest-basic-editor/components/math-iframe-dialog.vue
index 154deaa..9d0913c 100644
--- a/apps/admin/src/components/common/rest-basic-editor/components/math-iframe-dialog.vue
+++ b/apps/admin/src/components/common/rest-basic-editor/components/math-iframe-dialog.vue
@@ -1,33 +1,33 @@
-<template>
-  <div>
-    <NModal v-model:show="visible" preset="card" title="第三方在线编辑器" style="width: 90vw" @after-leave="hide">
-      <div style="height: 80vh; overflow: hidden">
-        <iframe src="https://www.processon.com/latex" style="width: 100%; height: calc(100% + 50px); margin-top: -50px; border: none"></iframe>
-      </div>
-    </NModal>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref } from 'vue';
-import { NModal } from 'naive-ui';
+import { NModal } from 'naive-ui'
+import { ref } from 'vue'
 
 const emit = defineEmits<{
-  (e: 'hide'): void;
-}>();
+  (e: 'hide'): void
+}>()
 
-const visible = ref(false);
+const visible = ref(false)
 
 function show() {
-  visible.value = true;
+  visible.value = true
 }
 function hide() {
-  visible.value = false;
-  emit('hide');
+  visible.value = false
+  emit('hide')
 }
 
 defineExpose({
   show,
   hide,
-});
+})
 </script>
+
+<template>
+  <div>
+    <NModal v-model:show="visible" preset="card" title="第三方在线编辑器" style="width: 90vw" @after-leave="hide">
+      <div style="height: 80vh; overflow: hidden">
+        <iframe src="https://www.processon.com/latex" style="width: 100%; height: calc(100% + 50px); margin-top: -50px; border: none" />
+      </div>
+    </NModal>
+  </div>
+</template>
diff --git a/apps/admin/src/components/common/rest-basic-editor/components/up-file-dialog.vue b/apps/admin/src/components/common/rest-basic-editor/components/up-file-dialog.vue
index 7c1c7ef..e3bbaa4 100644
--- a/apps/admin/src/components/common/rest-basic-editor/components/up-file-dialog.vue
+++ b/apps/admin/src/components/common/rest-basic-editor/components/up-file-dialog.vue
@@ -1,10 +1,29 @@
+<script setup lang="ts">
+import type { UpFile } from '../types'
+import { NModal, NProgress, NScrollbar } from 'naive-ui'
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  /** 上传文件列表 */
+  upFileList: UpFile[]
+}>()
+
+const visible = ref(false)
+watch(
+  () => props.upFileList.length,
+  (len) => {
+    visible.value = len > 0
+  },
+)
+</script>
+
 <template>
   <div>
     <NModal v-model:show="visible" preset="card" title="上传进度" style="width: 600px">
       <NScrollbar style="max-height: 700px">
         <div class="list">
           <div v-for="item in props.upFileList" :key="item.id" class="item">
-            <NProgress type="circle" :percentage="item.progress" :indicator-placement="'inside'" :radius="40" />
+            <NProgress type="circle" :percentage="item.progress" indicator-placement="inside" :radius="40" />
             <span class="name">{{ item.name }}</span>
           </div>
         </div>
@@ -13,25 +32,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import { NModal, NScrollbar, NProgress } from 'naive-ui';
-import type { UpFile } from '../types';
-
-const props = defineProps<{
-  /** 上传文件列表 */
-  upFileList: UpFile[];
-}>();
-
-const visible = ref(false);
-watch(
-  () => props.upFileList.length,
-  (len) => {
-    visible.value = len > 0;
-  }
-);
-</script>
-
 <style lang="scss" scoped>
 .list {
   display: flex;
diff --git a/apps/admin/src/components/common/rest-basic-editor/editor-util.ts b/apps/admin/src/components/common/rest-basic-editor/editor-util.ts
index 53946ce..f2f3f67 100644
--- a/apps/admin/src/components/common/rest-basic-editor/editor-util.ts
+++ b/apps/admin/src/components/common/rest-basic-editor/editor-util.ts
@@ -1,62 +1,62 @@
-import { getAliOssTokenAxios } from '@/service/api/upload';
-import { browserPathJoin } from '@/utils/date';
-import { initOSSClient, uploadFileToOSS } from '@/utils/oss';
-import type { IEditorConfig, ToolbarOptions } from '@opentiny/fluent-editor/types/config/types';
-import type OSS from 'ali-oss';
-import katex from 'katex';
-import { default as FluentEditor, type MathliveModule, type Range, generateToolbarTip } from '@opentiny/fluent-editor';
-import QuillToolbarTip, { type QuillToolbarTipOptions } from 'quill-toolbar-tip';
-import { base64ToFile } from '@/utils/file';
-import { getSnowflake } from '@/utils/rest';
-import type { GetEditorConfigParams, MyToolbarOption, UpFile } from './types';
-import { ref } from 'vue';
+import type { IEditorConfig, ToolbarOptions } from '@opentiny/fluent-editor/types/config/types'
+import type OSS from 'ali-oss'
+import type { GetEditorConfigParams, MyToolbarOption, UpFile } from './types'
+import { default as FluentEditor, generateToolbarTip, type MathliveModule, type Range } from '@opentiny/fluent-editor'
+import katex from 'katex'
+import QuillToolbarTip, { type QuillToolbarTipOptions } from 'quill-toolbar-tip'
+import { ref } from 'vue'
+import { getAliOssTokenAxios } from '@/service/api/upload'
+import { browserPathJoin } from '@/utils/date'
+import { base64ToFile } from '@/utils/file'
+import { initOSSClient, uploadFileToOSS } from '@/utils/oss'
+import { getSnowflake } from '@/utils/rest'
 
 /** 自定义打开iframe的按钮的key */
-export const MY_OPEN_PROCESSON_IFRAME = 'my-open-processon-iframe' as const;
-export const upFileList = ref<UpFile[]>([]);
+export const MY_OPEN_PROCESSON_IFRAME = 'my-open-processon-iframe' as const
+export const upFileList = ref<UpFile[]>([])
 
 /**
  * 初始化编辑器
  */
 export function initEditor(container: HTMLElement, params: IEditorConfig): FluentEditor {
   // 需要依赖 katex
-  window.katex = katex;
+  window.katex = katex
 
   // 处理图片给每个图片添加类名和最大宽度
-  const ImageBlot: any = FluentEditor.import('formats/image');
+  const ImageBlot: any = FluentEditor.import('formats/image')
   class CustomImageBlot extends ImageBlot {
     static create(value: any) {
-      const node: HTMLImageElement = super.create(value);
-      editImageAttribute(node, false);
-      return node;
+      const node: HTMLImageElement = super.create(value)
+      editImageAttribute(node, false)
+      return node
     }
   }
-  FluentEditor.register(CustomImageBlot, true);
+  FluentEditor.register(CustomImageBlot, true)
 
   // 处理视频给每个视频添加类名和最大宽度
-  const VideoBlot: any = FluentEditor.import('formats/video');
+  const VideoBlot: any = FluentEditor.import('formats/video')
   class CustomVideoBlot extends VideoBlot {
     static create(value: any) {
-      const node: HTMLVideoElement = super.create(value);
-      editVideoAttribute(node, false);
-      return node;
+      const node: HTMLVideoElement = super.create(value)
+      editVideoAttribute(node, false)
+      return node
     }
   }
-  FluentEditor.register(CustomVideoBlot, true);
+  FluentEditor.register(CustomVideoBlot, true)
 
   // 注册工具栏提示模块
-  FluentEditor.register({ 'modules/toolbar-tip': generateToolbarTip(QuillToolbarTip) }, true);
-  const Parchment = FluentEditor.import('parchment');
-  addToolbarIcon();
+  FluentEditor.register({ 'modules/toolbar-tip': generateToolbarTip(QuillToolbarTip) }, true)
+  const Parchment = FluentEditor.import('parchment')
+  addToolbarIcon()
 
   // 居中问题
-  const config = { scope: Parchment.Scope.BLOCK, whitelist: ['right', 'center', 'justify'] };
-  new Parchment.StyleAttributor('align', 'text-align', config);
-  const Align = FluentEditor.import('attributors/style/align');
-  FluentEditor.register(Align, true);
+  const config = { scope: Parchment.Scope.BLOCK, whitelist: ['right', 'center', 'justify'] }
+  new Parchment.StyleAttributor('align', 'text-align', config)
+  const Align = FluentEditor.import('attributors/style/align')
+  FluentEditor.register(Align, true)
 
   // 工具栏配置
-  return new FluentEditor(container, params);
+  return new FluentEditor(container, params)
 }
 
 /**
@@ -67,53 +67,54 @@ export async function getEditorConfig(params: GetEditorConfigParams): Promise<IE
     theme: 'snow',
     modules: {
       // 是否开启数学公式模块
-      mathlive: true,
+      'mathlive': true,
       // 开启字数统计
       // counter: {
       //   count: 2000,
       // },
-      toolbar: {
+      'toolbar': {
         // 工具栏显示那些按钮
         container: await getToolbarOption(params.toolbarOption || {}),
         handlers: {
           formula() {
             // 点击数学公式按钮时打开弹出框
-            const mathlive = this.quill.getModule('mathlive') as MathliveModule;
-            mathlive.createDialog('');
+            const mathlive = this.quill.getModule('mathlive') as MathliveModule
+            mathlive.createDialog('')
           },
           // 自定义打开iframe的按钮的点击事件的回调
           [`${MY_OPEN_PROCESSON_IFRAME}`](_value: boolean) {
-            params[MY_OPEN_PROCESSON_IFRAME](); // 执行回调
+            params[MY_OPEN_PROCESSON_IFRAME]() // 执行回调
           },
         },
       },
-      uploader: {
+      'uploader': {
         // only allow image
         mimetypes: ['*', 'video/*', 'audio/*'],
         async handler(_range: Range, files: File[]): Promise<(string | false)[]> {
           try {
-            const paths = await Promise.all(files.map((file, index) => upFileAxios(file, `${Date.now()}_${index}`)));
-            return paths;
-          } catch (error) {
-            console.log('error====', error);
-            return files.map(() => false);
+            const paths = await Promise.all(files.map((file, index) => upFileAxios(file, `${Date.now()}_${index}`)))
+            return paths
+          }
+          catch (error) {
+            console.log('error====', error)
+            return files.map(() => false)
           }
         },
       },
-      clipboard: {
+      'clipboard': {
         matchers: [
           [
             'img',
             (node: HTMLImageElement, delta: any) => {
-              editImageAttribute(node, false);
-              return delta;
+              editImageAttribute(node, false)
+              return delta
             },
           ],
           [
             'video',
             (node: HTMLVideoElement, delta: any) => {
-              editVideoAttribute(node, false);
-              return delta;
+              editVideoAttribute(node, false)
+              return delta
             },
           ],
         ],
@@ -128,28 +129,28 @@ export async function getEditorConfig(params: GetEditorConfigParams): Promise<IE
         },
       } satisfies Partial<QuillToolbarTipOptions>,
       // 国际化配置
-      i18n: { lang: 'zh-CN' },
+      'i18n': { lang: 'zh-CN' },
     },
-  };
-  return editorOptions;
+  }
+  return editorOptions
 }
 
 /**
  * 得到工具栏配置(显示那些按钮)
  */
 function getToolbarOption(params: MyToolbarOption): Promise<ToolbarOptions['container']> {
-  const { show, showUpFile, showUpVideo, customToolbar } = params;
+  const { show, showUpFile, showUpVideo, customToolbar } = params
 
   if (show === false) {
-    return Promise.resolve([] satisfies ToolbarOptions['container']);
+    return Promise.resolve([] satisfies ToolbarOptions['container'])
   }
 
   if (customToolbar !== undefined) {
-    return Promise.resolve(customToolbar);
+    return Promise.resolve(customToolbar)
   }
-  const va = ['image'];
-  showUpVideo !== false && va.push('video'); // 只要不等于false就添加 (undefined也添加)
-  showUpFile !== false && va.push('file'); // 只要不等于false就添加 (undefined也添加)
+  const va = ['image']
+  showUpVideo !== false && va.push('video') // 只要不等于false就添加 (undefined也添加)
+  showUpFile !== false && va.push('file') // 只要不等于false就添加 (undefined也添加)
   // 工具栏配置
   const TOOLBAR_CONFIG: ToolbarOptions['container'] = [
     ['undo', 'redo', 'clean', 'format-painter'],
@@ -157,7 +158,7 @@ function getToolbarOption(params: MyToolbarOption): Promise<ToolbarOptions['cont
       { header: [1, 2, 3, 4, 5, 6, false] },
       { size: [false, '12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] },
       { 'line-height': [false, '1.2', '1.5', '1.75', '2', '3', '4', '5'] },
-      { 'font': [false, 'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', '宋体', '黑体', '微软雅黑', '楷体', '仿宋', '等线'] },
+      { font: [false, 'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', '宋体', '黑体', '微软雅黑', '楷体', '仿宋', '等线'] },
     ],
     ['bold', 'italic', 'strike', 'underline', 'divider'],
     [{ color: [] }, { background: [] }],
@@ -168,8 +169,8 @@ function getToolbarOption(params: MyToolbarOption): Promise<ToolbarOptions['cont
     ['link', 'blockquote'],
     [...va],
     ['fullscreen', 'formula', MY_OPEN_PROCESSON_IFRAME],
-  ];
-  return Promise.resolve(TOOLBAR_CONFIG);
+  ]
+  return Promise.resolve(TOOLBAR_CONFIG)
 }
 
 /**
@@ -177,49 +178,50 @@ function getToolbarOption(params: MyToolbarOption): Promise<ToolbarOptions['cont
  */
 function addToolbarIcon() {
   // 这里时增加按钮
-  const myOpenProcessonIframeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="currentColor" d="M6.5 1a1.5 1.5 0 0 0-1.415 1H4.5A1.5 1.5 0 0 0 3 3.5v10A1.5 1.5 0 0 0 4.5 15h1.651a1.5 1.5 0 0 1-.111-1H4.5a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h.585A1.5 1.5 0 0 0 6.5 4h3a1.5 1.5 0 0 0 1.415-1h.585a.5.5 0 0 1 .5.5v1.57q.346.079.681.247.178.09.319.217V3.5A1.5 1.5 0 0 0 11.5 2h-.585A1.5 1.5 0 0 0 9.5 1zM6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m3.451 5.277a1.916 1.916 0 0 1 2.778-1.568.5.5 0 0 1-.452.892.916.916 0 0 0-1.328.75l-.087 1.172H11.5a.5.5 0 0 1 0 1h-1.212l-.237 3.2a1.916 1.916 0 0 1-2.777 1.567.5.5 0 1 1 .452-.892.916.916 0 0 0 1.328-.75l.231-3.125H8.5a.5.5 0 1 1 0-1h.86zm5.403 4.077a.5.5 0 0 0-.708-.708l-1.057 1.057-.457-.734a.994.994 0 0 0-1.424-.281.5.5 0 0 0 .579.815l.576.926-1.217 1.217a.5.5 0 0 0 .708.708l1.052-1.053.457.735a.99.99 0 0 0 1.442.264.5.5 0 0 0-.599-.801l-.574-.924z"/></svg>`;
-  const icons = FluentEditor.import('ui/icons') as Record<string, string>;
-  icons[MY_OPEN_PROCESSON_IFRAME] = myOpenProcessonIframeIcon;
+  const myOpenProcessonIframeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="currentColor" d="M6.5 1a1.5 1.5 0 0 0-1.415 1H4.5A1.5 1.5 0 0 0 3 3.5v10A1.5 1.5 0 0 0 4.5 15h1.651a1.5 1.5 0 0 1-.111-1H4.5a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h.585A1.5 1.5 0 0 0 6.5 4h3a1.5 1.5 0 0 0 1.415-1h.585a.5.5 0 0 1 .5.5v1.57q.346.079.681.247.178.09.319.217V3.5A1.5 1.5 0 0 0 11.5 2h-.585A1.5 1.5 0 0 0 9.5 1zM6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m3.451 5.277a1.916 1.916 0 0 1 2.778-1.568.5.5 0 0 1-.452.892.916.916 0 0 0-1.328.75l-.087 1.172H11.5a.5.5 0 0 1 0 1h-1.212l-.237 3.2a1.916 1.916 0 0 1-2.777 1.567.5.5 0 1 1 .452-.892.916.916 0 0 0 1.328-.75l.231-3.125H8.5a.5.5 0 1 1 0-1h.86zm5.403 4.077a.5.5 0 0 0-.708-.708l-1.057 1.057-.457-.734a.994.994 0 0 0-1.424-.281.5.5 0 0 0 .579.815l.576.926-1.217 1.217a.5.5 0 0 0 .708.708l1.052-1.053.457.735a.99.99 0 0 0 1.442.264.5.5 0 0 0-.599-.801l-.574-.924z"/></svg>`
+  const icons = FluentEditor.import('ui/icons') as Record<string, string>
+  icons[MY_OPEN_PROCESSON_IFRAME] = myOpenProcessonIframeIcon
 }
 
 /**
  * 上传文件
  */
 async function upFileAxios(file: File, id: string): Promise<string | false> {
-  const item: UpFile = { id, name: file.name, progress: 0 };
+  const item: UpFile = { id, name: file.name, progress: 0 }
   try {
-    upFileList.value.push(item);
-    const tokenRes = await getAliOssTokenAxios();
+    upFileList.value.push(item)
+    const tokenRes = await getAliOssTokenAxios()
     // 初始化OSS客户端
-    const client = initOSSClient(tokenRes);
-    const path = browserPathJoin(`temp/${Date.now()}`, file!.name);
+    const client = initOSSClient(tokenRes)
+    const path = browserPathJoin(`temp/${Date.now()}`, file!.name)
     // 上传文件
     const res: OSS.MultipartUploadResult = await uploadFileToOSS(client, file, path, (progress) => {
-      item.progress = Math.floor(progress * 10000) / 100;
-    });
-    const url = browserPathJoin(import.meta.env.VITE_BASE_OSS_URL, res.name);
-    upFileList.value.splice(upFileList.value.indexOf(item), 1);
-    return Promise.resolve(url);
+      item.progress = Math.floor(progress * 10000) / 100
+    })
+    const url = browserPathJoin(import.meta.env.VITE_BASE_OSS_URL, res.name)
+    upFileList.value.splice(upFileList.value.indexOf(item), 1)
+    return Promise.resolve(url)
     // oxlint-disable-next-line no-unused-vars
-  } catch (error) {
-    upFileList.value.splice(upFileList.value.indexOf(item), 1);
-    window.$message?.error('上传失败');
-    return Promise.resolve(false);
+  }
+  catch (error) {
+    upFileList.value.splice(upFileList.value.indexOf(item), 1)
+    window.$message?.error('上传失败')
+    return Promise.resolve(false)
   }
 }
 
 /** 编辑视频属性 */
 export function editVideoAttribute(node: HTMLVideoElement, isReplace = true) {
-  node.setAttribute('style', 'max-width: 100%;'); // 强制内联样式
-  node.classList.add('my-ql-video');
-  isReplace && replaceFileUrl(node);
+  node.setAttribute('style', 'max-width: 100%;') // 强制内联样式
+  node.classList.add('my-ql-video')
+  isReplace && replaceFileUrl(node)
 }
 
 /** 编辑图片属性 */
 export function editImageAttribute(node: HTMLImageElement, isReplace = true) {
-  node.setAttribute('style', 'max-width: 100%;'); // 强制内联样式
-  node.classList.add('my-ql-image');
-  isReplace && replaceFileUrl(node);
+  node.setAttribute('style', 'max-width: 100%;') // 强制内联样式
+  node.classList.add('my-ql-image')
+  isReplace && replaceFileUrl(node)
 }
 
 /**
@@ -227,10 +229,10 @@ export function editImageAttribute(node: HTMLImageElement, isReplace = true) {
  * @param node
  */
 export function replaceFileUrl(node: HTMLImageElement | HTMLVideoElement) {
-  const ex = getExtensionFromDataUrl(node.src);
+  const ex = getExtensionFromDataUrl(node.src)
   if (ex) {
-    const file = base64ToFile(node.src, `${Date.now()}_${getSnowflake()}.${ex}`);
-    upFileAxios(file, file.name);
+    const file = base64ToFile(node.src, `${Date.now()}_${getSnowflake()}.${ex}`)
+    upFileAxios(file, file.name)
   }
 }
 
@@ -245,7 +247,7 @@ const mimeToExtension: Record<string, string> = {
   'audio/mpeg': 'mp3',
   'application/pdf': 'pdf',
   'text/plain': 'txt',
-};
+}
 
 /**
  * 从 base64 获取文件扩展名
@@ -253,11 +255,12 @@ const mimeToExtension: Record<string, string> = {
  * @param mimeMap
  */
 function getExtensionFromDataUrl(dataUrl: string, mimeMap = mimeToExtension): string | null {
-  const base64Pattern = /^data:(image|video)\/([a-zA-Z]+);base64,([A-Za-z0-9+/]+={0,2})$/;
+  const base64Pattern = /^data:(image|video)\/([a-zA-Z]+);base64,([A-Za-z0-9+/]+={0,2})$/
   if (base64Pattern.test(dataUrl)) {
-    const mimeType = dataUrl.split(',')?.[0]?.split(':')?.[1]?.split(';')[0];
-    return mimeType && mimeType in mimeMap ? mimeMap[mimeType]! : null;
-  } else {
-    return null;
+    const mimeType = dataUrl.split(',')?.[0]?.split(':')?.[1]?.split(';')[0]
+    return mimeType && mimeType in mimeMap ? mimeMap[mimeType]! : null
+  }
+  else {
+    return null
   }
 }
diff --git a/apps/admin/src/components/common/rest-basic-editor/rest-basic-editor.vue b/apps/admin/src/components/common/rest-basic-editor/rest-basic-editor.vue
index c25865c..13bbcd1 100644
--- a/apps/admin/src/components/common/rest-basic-editor/rest-basic-editor.vue
+++ b/apps/admin/src/components/common/rest-basic-editor/rest-basic-editor.vue
@@ -1,236 +1,244 @@
+<script setup lang="ts">
+import type { IEditorConfig, ToolbarOptions } from '@opentiny/fluent-editor/types/config/types'
+import type { PropType } from 'vue'
+import type MathIframeDailog from './components/math-iframe-dialog.vue'
+import type { MyToolbarOption } from './types'
+import FluentEditor from '@opentiny/fluent-editor'
+import { nextTick, onMounted, ref, watch } from 'vue'
+import UpFileDialog from './components/up-file-dialog.vue'
+import { editImageAttribute, editVideoAttribute, getEditorConfig, initEditor, MY_OPEN_PROCESSON_IFRAME, upFileList } from './editor-util'
+import 'mathlive'
+import 'mathlive/static.css'
+import 'mathlive/fonts.css'
+import '@opentiny/fluent-editor/style.css'
+import 'katex/dist/katex.min.css'
+import 'quill-toolbar-tip/dist/index.css'
+
+const props = defineProps({
+  /** 输入内容 */
+  modelValue: { type: String, default: '' },
+  /** 工具栏配置 */
+  toolbarOption: { type: Object as PropType<MyToolbarOption>, default: undefined },
+})
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const editorRef = useTemplateRef<HTMLDivElement>('editorRef')
+const mathIframeDalogRef = useTemplateRef<InstanceType<typeof MathIframeDailog>>('mathIframeDalogRef')
+const editorContainerRef = useTemplateRef<HTMLDivElement>('editorContainerRef')
+const showToolbar = ref(true)
+
+let editor: FluentEditor | undefined
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (editor && newValue) {
+      if (newValue.startsWith('<p><br></p>') || newValue.startsWith('<p></p>')) {
+        emit('update:modelValue', '')
+        editor!.root.innerHTML = ''
+        return
+      }
+      nextTick(() => {
+        if (editor!.root.innerHTML !== newValue) {
+          editor!.root.innerHTML = newValue
+        }
+      })
+    }
+  },
+)
+
+onMounted(async () => {
+  // 得到编辑器配置
+  const editorOptions: IEditorConfig = await getEditorConfig({
+    toolbarOption: props.toolbarOption,
+    /** 点击自定义打开iframe的按钮的回调 */
+    [MY_OPEN_PROCESSON_IFRAME]: () => {
+      mathIframeDalogRef.value?.show()
+    },
+  })
+  const container = (editorOptions!.modules!.toolbar as ToolbarOptions).container || []
+  showToolbar.value = !(container && Array.isArray(container) && container.length > 0)
+
+  // 初始化编辑器
+  editor = initEditor(editorRef.value!, editorOptions)
+  // 设置内容
+  editor.root.innerHTML = props.modelValue
+
+  setTimeout(() => {
+    const ImageBlot: any = FluentEditor.import('formats/image')
+    // 处理图片给每个图片添加类名和最大宽度
+    editor?.scroll.descendants(ImageBlot).forEach((imageBlot: any) => {
+      const node = imageBlot.domNode as HTMLImageElement
+      editImageAttribute(node, true)
+    })
+    // 处理视频给每个视频添加类名和最大宽度
+    const VideoBlot: any = FluentEditor.import('formats/video')
+    editor?.scroll.descendants(VideoBlot).forEach((videoBlot: any) => {
+      const node = videoBlot.domNode as HTMLVideoElement
+      editVideoAttribute(node, true)
+    })
+  }, 10)
+
+  editor?.on('text-change', () => {
+    nextTick(() => {
+      emit('update:modelValue', editor!.root.innerHTML)
+    })
+  })
+})
+
+/**
+ * 弹出框关闭时弹出mathlive输入框
+ */
+function hideIframeDialog() {
+  const butt = (editorContainerRef.value?.querySelector('.ql-toolbar.ql-snow .ql-formats  button.ql-formula') || null) as HTMLButtonElement | null
+  butt?.click()
+}
+</script>
+
 <template>
   <div ref="editorContainerRef" class="rest-basic-editor" :class="{ 'hide-toolbar': showToolbar }">
-    <div ref="editorRef"></div>
-    <math-iframe-dialog ref="mathIframeDalogRef" @hide="hideIframeDialog"></math-iframe-dialog>
-    <up-file-dialog :upFileList="upFileList"></up-file-dialog>
+    <div ref="editorRef" />
+    <MathIframeDialog ref="mathIframeDalogRef" @hide="hideIframeDialog" />
+    <UpFileDialog :up-file-list="upFileList" />
   </div>
 </template>
 
-<script setup lang="ts">
-  import 'mathlive';
-  import FluentEditor from '@opentiny/fluent-editor';
-  import type { IEditorConfig, ToolbarOptions } from '@opentiny/fluent-editor/types/config/types';
-  import type MathIframeDailog from './components/math-iframe-dialog.vue';
-  import { MY_OPEN_PROCESSON_IFRAME, editImageAttribute, editVideoAttribute, getEditorConfig, initEditor, upFileList } from './editor-util';
-  import UpFileDialog from './components/up-file-dialog.vue';
-  import type { PropType } from 'vue';
-  import type { MyToolbarOption } from './types';
-  import 'mathlive/static.css';
-  import 'mathlive/fonts.css';
-  import '@opentiny/fluent-editor/style.css';
-  import 'katex/dist/katex.min.css';
-  import 'quill-toolbar-tip/dist/index.css';
-  import { ref, watch, onMounted, nextTick } from 'vue';
-
-  const props = defineProps({
-    /** 输入内容 */
-    modelValue: { type: String, default: '' },
-    /** 工具栏配置 */
-    toolbarOption: { type: Object as PropType<MyToolbarOption>, default: undefined },
-  });
-  const emit = defineEmits<{
-    (e: 'update:modelValue', value: string): void;
-  }>();
-
-  const editorRef = useTemplateRef<HTMLDivElement>('editorRef');
-  const mathIframeDalogRef = useTemplateRef<InstanceType<typeof MathIframeDailog>>('mathIframeDalogRef');
-  const editorContainerRef = useTemplateRef<HTMLDivElement>('editorContainerRef');
-  const showToolbar = ref(true);
-
-  let editor: FluentEditor | undefined = undefined;
-
-  watch(
-    () => props.modelValue,
-    (newValue) => {
-      if (editor && newValue) {
-        if (newValue.startsWith('<p><br></p>') || newValue.startsWith('<p></p>')) {
-          emit('update:modelValue', '');
-          editor!.root.innerHTML = '';
-          return;
-        }
-        nextTick(() => {
-          if (editor!.root.innerHTML !== newValue) {
-            editor!.root.innerHTML = newValue;
-          }
-        });
-      }
-    }
-  );
-
-  onMounted(async () => {
-    // 得到编辑器配置
-    const editorOptions: IEditorConfig = await getEditorConfig({
-      toolbarOption: props.toolbarOption,
-      /** 点击自定义打开iframe的按钮的回调 */
-      [MY_OPEN_PROCESSON_IFRAME]: () => {
-        mathIframeDalogRef.value?.show();
-      },
-    });
-    const container = (editorOptions!.modules!.toolbar as ToolbarOptions).container || [];
-    showToolbar.value = !(container && Array.isArray(container) && container.length > 0);
-
-    // 初始化编辑器
-    editor = initEditor(editorRef.value!, editorOptions);
-    // 设置内容
-    editor.root.innerHTML = props.modelValue;
-
-    setTimeout(() => {
-      const ImageBlot: any = FluentEditor.import('formats/image');
-      // 处理图片给每个图片添加类名和最大宽度
-      editor?.scroll.descendants(ImageBlot).forEach((imageBlot: any) => {
-        const node = imageBlot.domNode as HTMLImageElement;
-        editImageAttribute(node, true);
-      });
-      // 处理视频给每个视频添加类名和最大宽度
-      const VideoBlot: any = FluentEditor.import('formats/video');
-      editor?.scroll.descendants(VideoBlot).forEach((videoBlot: any) => {
-        const node = videoBlot.domNode as HTMLVideoElement;
-        editVideoAttribute(node, true);
-      });
-    }, 10);
-
-    editor?.on('text-change', () => {
-      nextTick(() => {
-        emit('update:modelValue', editor!.root.innerHTML);
-      });
-    });
-  });
-
-  /**
-   * 弹出框关闭时弹出mathlive输入框
-   */
-  function hideIframeDialog() {
-    const butt = (editorContainerRef.value?.querySelector('.ql-toolbar.ql-snow .ql-formats  button.ql-formula') || null) as HTMLButtonElement | null;
-    butt?.click();
-  }
-</script>
-
 <style lang="scss">
   /* stylelint-disable selector-attribute-name-disallowed-list */
-  .ql-toolbar.ql-snow {
-    // 行高
-    .ql-picker.ql-line-height .ql-picker-label:before,
-    .ql-picker.ql-line-height .ql-picker-item:before {
-      content: '行高(系统默认)';
-    }
-
-    .ql-formats .ql-line-height.ql-picker .ql-picker-label[data-value]:before,
-    .ql-formats .ql-line-height.ql-picker .ql-picker-item[data-value]:before {
-      content: attr(data-value) '倍';
-    }
-
-    // 字体
-    .ql-picker.ql-font .ql-picker-label:before,
-    .ql-picker.ql-font .ql-picker-item:before {
-      content: '字体(系统默认)';
-    }
-
-    .ql-formats .ql-font.ql-picker .ql-picker-label[data-value]:before,
-    .ql-formats .ql-font.ql-picker .ql-picker-item[data-value]:before {
-      content: attr(data-value);
-    }
-
-    // 字号
-    .ql-picker.ql-size .ql-picker-label:before,
-    .ql-picker.ql-size .ql-picker-item:before {
-      content: '字号(系统默认)';
-    }
-
-    .ql-formats .ql-size.ql-picker .ql-picker-label[data-value]:before,
-    .ql-formats .ql-size.ql-picker .ql-picker-item[data-value]:before {
-      content: attr(data-value);
-    }
-
-    // 标题
-    .ql-picker.ql-header .ql-picker-label:before,
-    .ql-picker.ql-header .ql-picker-item:before {
-      content: '标题(默认)';
-    }
-
-    .ql-formats .ql-header.ql-picker .ql-picker-label[data-value]:before,
-    .ql-formats .ql-header.ql-picker .ql-picker-item[data-value]:before {
-      content: '标题(H' attr(data-value) ')';
-    }
+.ql-toolbar.ql-snow {
+  // 行高
+  .ql-picker.ql-line-height .ql-picker-label:before,
+  .ql-picker.ql-line-height .ql-picker-item:before {
+    content: '行高(系统默认)';
   }
+
+  .ql-formats .ql-line-height.ql-picker .ql-picker-label[data-value]:before,
+  .ql-formats .ql-line-height.ql-picker .ql-picker-item[data-value]:before {
+    content: attr(data-value) '倍';
+  }
+
+  // 字体
+  .ql-picker.ql-font .ql-picker-label:before,
+  .ql-picker.ql-font .ql-picker-item:before {
+    content: '字体(系统默认)';
+  }
+
+  .ql-formats .ql-font.ql-picker .ql-picker-label[data-value]:before,
+  .ql-formats .ql-font.ql-picker .ql-picker-item[data-value]:before {
+    content: attr(data-value);
+  }
+
+  // 字号
+  .ql-picker.ql-size .ql-picker-label:before,
+  .ql-picker.ql-size .ql-picker-item:before {
+    content: '字号(系统默认)';
+  }
+
+  .ql-formats .ql-size.ql-picker .ql-picker-label[data-value]:before,
+  .ql-formats .ql-size.ql-picker .ql-picker-item[data-value]:before {
+    content: attr(data-value);
+  }
+
+  // 标题
+  .ql-picker.ql-header .ql-picker-label:before,
+  .ql-picker.ql-header .ql-picker-item:before {
+    content: '标题(默认)';
+  }
+
+  .ql-formats .ql-header.ql-picker .ql-picker-label[data-value]:before,
+  .ql-formats .ql-header.ql-picker .ql-picker-item[data-value]:before {
+    content: '标题(H' attr(data-value) ')';
+  }
+}
 </style>
 
 <style lang="scss" scoped>
   .rest-basic-editor {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
 
-    &.hide-toolbar :deep(.ql-toolbar) {
-      display: none;
+  &.hide-toolbar :deep(.ql-toolbar) {
+    display: none;
+  }
+
+  :deep() {
+    .ql-container.ql-snow .toolbar-tip__tooltip {
+      position: fixed;
     }
 
-    :deep() {
-      .ql-container.ql-snow .toolbar-tip__tooltip {
-        position: fixed;
+    .ql-container.ql-snow {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      width: 100%;
+      min-height: 0;
+      overflow-y: auto;
+    }
+
+    .ql-editor {
+      overflow-y: visible;
+    }
+
+    .ql-toolbar.ql-snow > .ql-formats {
+      position: relative;
+      padding: 6px 10px;
+      margin: 0;
+      margin-right: 0;
+
+      &:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 100%;
+        content: '';
+        background: linear-gradient(
+          to bottom,
+          transparent 0%,
+          transparent 26%,
+          #dcdada 20%,
+          #dcdada 80%,
+          transparent 74%,
+          transparent 100%
+        );
       }
 
-      .ql-container.ql-snow {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        width: 100%;
-        min-height: 0;
-        overflow-y: auto;
+      .ql-picker {
+        width: auto;
+
+        .ql-picker-label {
+          &:before {
+            width: auto;
+            padding-right: 14px;
+          }
+
+          .icon {
+            right: 6px;
+          }
+        }
       }
 
-      .ql-editor {
-        overflow-y: visible;
-      }
-
-      .ql-toolbar.ql-snow > .ql-formats {
-        position: relative;
-        padding: 6px 10px;
-        margin: 0;
-        margin-right: 0;
+      &:first-child {
+        padding-left: 0;
 
         &:before {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 1px;
-          height: 100%;
-          content: '';
-          background: linear-gradient(to bottom, transparent 0%, transparent 26%, #dcdada 20%, #dcdada 80%, transparent 74%, transparent 100%);
-        }
-
-        .ql-picker {
-          width: auto;
-
-          .ql-picker-label {
-            &:before {
-              width: auto;
-              padding-right: 14px;
-            }
-
-            .icon {
-              right: 6px;
-            }
-          }
-        }
-
-        &:first-child {
+          display: none;
+          width: 0;
+          height: 0;
           padding-left: 0;
-
-          &:before {
-            display: none;
-            width: 0;
-            height: 0;
-            padding-left: 0;
-            background: transparent;
-          }
+          background: transparent;
         }
+      }
 
-        > .ql-picker.ql-expanded .ql-picker-options {
-          z-index: 3;
-          width: auto;
-        }
+      > .ql-picker.ql-expanded .ql-picker-options {
+        z-index: 3;
+        width: auto;
       }
     }
   }
+}
 </style>
diff --git a/apps/admin/src/components/common/rest-basic-editor/types.ts b/apps/admin/src/components/common/rest-basic-editor/types.ts
index 7d678bc..254b973 100644
--- a/apps/admin/src/components/common/rest-basic-editor/types.ts
+++ b/apps/admin/src/components/common/rest-basic-editor/types.ts
@@ -1,23 +1,23 @@
-import type { ToolbarOptions } from '@opentiny/fluent-editor';
-import type { MY_OPEN_PROCESSON_IFRAME } from './editor-util';
+import type { ToolbarOptions } from '@opentiny/fluent-editor'
+import type { MY_OPEN_PROCESSON_IFRAME } from './editor-util'
 
-export type MyToolbarOption = {
+export interface MyToolbarOption {
   /** 是否显示工具栏 */
-  show?: boolean;
+  show?: boolean
   /** 是否显示上传文件按钮 */
-  showUpFile?: boolean;
+  showUpFile?: boolean
   /** 是否显示上传视频按钮 */
-  showUpVideo?: boolean;
+  showUpVideo?: boolean
   /** 自定义工具栏 */
-  customToolbar?: ToolbarOptions['container'];
-};
+  customToolbar?: ToolbarOptions['container']
+}
 
-export type GetEditorConfigParams = {
-  toolbarOption?: MyToolbarOption;
-  [MY_OPEN_PROCESSON_IFRAME]: () => void;
-};
-export type UpFile = {
-  id: string;
-  name: string;
-  progress: number;
-};
+export interface GetEditorConfigParams {
+  toolbarOption?: MyToolbarOption
+  [MY_OPEN_PROCESSON_IFRAME]: () => void
+}
+export interface UpFile {
+  id: string
+  name: string
+  progress: number
+}
diff --git a/apps/admin/src/components/custom/README.md b/apps/admin/src/components/custom/README.md
index 8aa0345..0516727 100644
--- a/apps/admin/src/components/custom/README.md
+++ b/apps/admin/src/components/custom/README.md
@@ -5,14 +5,17 @@
 ## 1. 快速开始
 
 ### 1.1 使用 Iconify 图标 (推荐)
+
 本项目集成了 [Iconify](https://iconify.design/)，可直接使用海量开源图标库（如 Material Design, Carbon, Phosphor 等）。
 
 **语法**：
+
 ```vue
 <SvgIcon icon="图集名:图标名" />
 ```
 
 **示例**：
+
 ```vue
 <!-- Material Design Icons -->
 <SvgIcon icon="mdi:home" class="text-xl text-blue-500" />
@@ -22,18 +25,21 @@
 ```
 
 ### 1.2 使用本地 SVG 图标
+
 当需要使用设计师提供的自定义图标或彩色图标时。
 
 1. **存放**：将 `.svg` 文件放入 `src/assets/svg-icon/` 目录。
 2. **引用**：使用 `local-icon` 属性引用文件名（不含 `.svg` 后缀）。
 
 **语法**：
+
 ```vue
 <SvgIcon local-icon="文件名" />
 ```
 
 **示例**：
 假设文件位于 `src/assets/svg-icon/custom-logo.svg`：
+
 ```vue
 <SvgIcon local-icon="custom-logo" class="text-32px" />
 ```
@@ -44,12 +50,13 @@
 
 该组件定义在 `src/components/custom/svg-icon.vue`。
 
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-| :--- | :--- | :--- | :--- | :--- |
-| `icon` | `string` | 否 | - | Iconify 图标名称，格式为 `collection:name`。 |
-| `localIcon` | `string` | 否 | - | 本地 SVG 文件名。**优先级高于 `icon`**。 |
+| 属性名      | 类型     | 必填 | 默认值 | 说明                                         |
+| :---------- | :------- | :--- | :----- | :------------------------------------------- |
+| `icon`      | `string` | 否   | -      | Iconify 图标名称，格式为 `collection:name`。 |
+| `localIcon` | `string` | 否   | -      | 本地 SVG 文件名。**优先级高于 `icon`**。     |
 
 > **提示**：
+>
 > - 组件设置了 `inheritAttrs: false`，但会手动绑定 `class` 和 `style` 到根元素。
 > - 你可以通过 Tailwind CSS 类名（如 `text-xl`, `text-red-500`）直接控制图标的大小和颜色。
 
@@ -60,29 +67,34 @@
 推荐使用 [Icones.js.org](https://icones.js.org/) 图标搜索引擎。
 
 ### 3.1 查找步骤
+
 1. 打开 [Icones.js.org](https://icones.js.org/)。
 2. 输入关键词搜索（如 `user`, `setting`）。
 3. 点击选中的图标，复制底部的 **ID**（例如 `mdi:shield-airplane-outline`）。
 
 ### 3.2 使用示例对照
 
-| Icones 图标 ID | 在本项目中的写法 (推荐) |
-| :--- | :--- |
-| `mdi:shield-airplane-outline` | `<SvgIcon icon="mdi:shield-airplane-outline" />` |
+| Icones 图标 ID                                 | 在本项目中的写法 (推荐)                                           |
+| :--------------------------------------------- | :---------------------------------------------------------------- |
+| `mdi:shield-airplane-outline`                  | `<SvgIcon icon="mdi:shield-airplane-outline" />`                  |
 | `material-symbols:android-wifi-4-bar-question` | `<SvgIcon icon="material-symbols:android-wifi-4-bar-question" />` |
-| `solar:minimize-square-minimalistic-outline` | `<SvgIcon icon="solar:minimize-square-minimalistic-outline" />` |
-| `tabler:align-box-top-right` | `<SvgIcon icon="tabler:align-box-top-right" />` |
+| `solar:minimize-square-minimalistic-outline`   | `<SvgIcon icon="solar:minimize-square-minimalistic-outline" />`   |
+| `tabler:align-box-top-right`                   | `<SvgIcon icon="tabler:align-box-top-right" />`                   |
 
 ---
 
 ## 4. 常见问题与进阶
 
 ### 4.1 什么是 `icon-ic-baseline-refresh`？
+
 在项目中（如 `competition-add/index.vue`）你可能会看到这种写法：
+
 ```vue
 <icon-ic-baseline-refresh class="text-icon" />
 ```
+
 这是 `unplugin-icons` 插件提供的**自动组件导入**功能。
+
 - **命名规则**：`{Prefix}-{Collection}-{Name}`
 - **配置来源**：`.env` 文件中的 `VITE_ICON_PREFIX=icon`。
 - **解析**：`icon-ic-baseline-refresh` 对应图集 `ic` 下的 `baseline-refresh` 图标。
@@ -90,6 +102,7 @@
 **建议**：虽然支持这种写法，但为了统一性和灵活性（支持动态变量），**推荐统一使用 `<SvgIcon />` 组件**。
 
 ### 4.2 在 Render 函数中使用 (TSX)
+
 在 Naive UI 的 `NTree`, `NDataTable` 或 `NMenu` 等需要渲染函数的场景中：
 
 ```ts
@@ -98,16 +111,16 @@ import SvgIcon from '@/components/custom/svg-icon.vue'
 
 // 渲染 Iconify 图标
 function renderIcon() {
-  return h(SvgIcon, { 
-    icon: 'carbon:folder', 
-    class: 'text-gray-500' 
+  return h(SvgIcon, {
+    icon: 'carbon:folder',
+    class: 'text-gray-500'
   })
 }
 
 // 渲染本地图标
 function renderLocalIcon() {
-  return h(SvgIcon, { 
-    localIcon: 'custom-logo' 
+  return h(SvgIcon, {
+    localIcon: 'custom-logo'
   })
 }
 ```
diff --git a/apps/admin/src/constants/business.ts b/apps/admin/src/constants/business.ts
index 9fa06b5..3f6a0dd 100644
--- a/apps/admin/src/constants/business.ts
+++ b/apps/admin/src/constants/business.ts
@@ -1,29 +1,29 @@
-import { transformRecordToOption } from '@/utils/common';
+import { transformRecordToOption } from '@/utils/common'
 
 export const enableStatusRecord: Record<Api.Common.EnableStatus, string> = {
-  '1': '启用',
-  '2': '禁用'
-};
+  1: '启用',
+  2: '禁用',
+}
 
-export const enableStatusOptions = transformRecordToOption(enableStatusRecord);
+export const enableStatusOptions = transformRecordToOption(enableStatusRecord)
 
 export const userGenderRecord: Record<Api.SystemManage.UserGender, string> = {
-  '1': '男',
-  '2': '女'
-};
+  1: '男',
+  2: '女',
+}
 
-export const userGenderOptions = transformRecordToOption(userGenderRecord);
+export const userGenderOptions = transformRecordToOption(userGenderRecord)
 
 export const menuTypeRecord: Record<Api.SystemManage.MenuType, string> = {
-  '1': '目录',
-  '2': '菜单'
-};
+  1: '目录',
+  2: '菜单',
+}
 
-export const menuTypeOptions = transformRecordToOption(menuTypeRecord);
+export const menuTypeOptions = transformRecordToOption(menuTypeRecord)
 
 export const menuIconTypeRecord: Record<Api.SystemManage.IconType, string> = {
-  '1': 'iconify',
-  '2': '本地图标'
-};
+  1: 'iconify',
+  2: '本地图标',
+}
 
-export const menuIconTypeOptions = transformRecordToOption(menuIconTypeRecord);
+export const menuIconTypeOptions = transformRecordToOption(menuIconTypeRecord)
diff --git a/apps/admin/src/service/api/index.ts b/apps/admin/src/service/api/index.ts
index 01eaad5..82bba03 100644
--- a/apps/admin/src/service/api/index.ts
+++ b/apps/admin/src/service/api/index.ts
@@ -1,3 +1,3 @@
 export * from './auth'
 export * from './route'
-export * from './system-manage';
+export * from './system-manage'
diff --git a/apps/admin/src/service/api/system-manage.ts b/apps/admin/src/service/api/system-manage.ts
index cb975b2..82b9cee 100644
--- a/apps/admin/src/service/api/system-manage.ts
+++ b/apps/admin/src/service/api/system-manage.ts
@@ -1,12 +1,12 @@
-import { request } from '../request';
+import { request } from '../request'
 
 /** get role list */
 export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
   return request<Api.SystemManage.RoleList>({
     url: '/systemManage/getRoleList',
     method: 'get',
-    params
-  });
+    params,
+  })
 }
 
 /**
@@ -17,8 +17,8 @@ export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
 export function fetchGetAllRoles() {
   return request<Api.SystemManage.AllRole[]>({
     url: '/systemManage/getAllRoles',
-    method: 'get'
-  });
+    method: 'get',
+  })
 }
 
 /** get user list */
@@ -26,30 +26,30 @@ export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
   return request<Api.SystemManage.UserList>({
     url: '/systemManage/getUserList',
     method: 'get',
-    params
-  });
+    params,
+  })
 }
 
 /** get menu list */
 export function fetchGetMenuList() {
   return request<Api.SystemManage.MenuList>({
     url: '/systemManage/getMenuList/v2',
-    method: 'get'
-  });
+    method: 'get',
+  })
 }
 
 /** get all pages */
 export function fetchGetAllPages() {
   return request<string[]>({
     url: '/systemManage/getAllPages',
-    method: 'get'
-  });
+    method: 'get',
+  })
 }
 
 /** get menu tree */
 export function fetchGetMenuTree() {
   return request<Api.SystemManage.MenuTree[]>({
     url: '/systemManage/getMenuTree',
-    method: 'get'
-  });
+    method: 'get',
+  })
 }
diff --git a/apps/admin/src/service/api/upload.ts b/apps/admin/src/service/api/upload.ts
index 9804a60..e98ebe7 100644
--- a/apps/admin/src/service/api/upload.ts
+++ b/apps/admin/src/service/api/upload.ts
@@ -1,26 +1,24 @@
 import { request } from '../request'
 
-
 export interface ReqDeleteAliOssFile {
-  key: string;
+  key: string
 }
 
-export type AliOssSTS = {
-  AccessKeyId: string;
-  AccessKeySecret: string;
-  SecurityToken: string;
-  Expiration: string;
-  BucketName: string;
-  Region: string;
-};
-
+export interface AliOssSTS {
+  AccessKeyId: string
+  AccessKeySecret: string
+  SecurityToken: string
+  Expiration: string
+  BucketName: string
+  Region: string
+}
 
 /** 得到上传的token */
-export function getAliOssTokenAxios(){
+export function getAliOssTokenAxios() {
   return request<AliOssSTS>({
     url: `${import.meta.env.VITE_BASE_UPLOAD_URL}/admin/v1/oss/sts`,
     method: 'get',
-  });
+  })
 }
 
 /** 删除阿里云oss 文件 */
@@ -29,5 +27,5 @@ export function deleteAliOssFileAxios(data: ReqDeleteAliOssFile) {
     url: `${import.meta.env.VITE_BASE_UPLOAD_URL}/admin/v1/oss/delete`,
     method: 'post',
     data,
-  });
+  })
 }
diff --git a/apps/admin/src/store/modules/route/index.ts b/apps/admin/src/store/modules/route/index.ts
index 20652f4..2e2fd67 100644
--- a/apps/admin/src/store/modules/route/index.ts
+++ b/apps/admin/src/store/modules/route/index.ts
@@ -165,7 +165,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     // 如果是静态路由模式，直接添加静态常量路由
     if (authRouteMode.value === 'static') { // 静态路由模式
       addConstantRoutes(staticRoute.constantRoutes)
-    }else {// 动态路由模式
+    }
+    else { // 动态路由模式
       const { data, error } = await fetchGetConstantRoutes()
 
       if (!error) {
diff --git a/apps/admin/src/typings/api/common.d.ts b/apps/admin/src/typings/api/common.d.ts
index 6b6633d..c558b78 100644
--- a/apps/admin/src/typings/api/common.d.ts
+++ b/apps/admin/src/typings/api/common.d.ts
@@ -8,20 +8,20 @@ declare namespace Api {
     /** common params of paginating */
     interface PaginatingCommonParams {
       /** current page number */
-      current: number;
+      current: number
       /** page size */
-      size: number;
+      size: number
       /** total count */
-      total: number;
+      total: number
     }
 
     /** common params of paginating query list data */
     interface PaginatingQueryRecord<T = any> extends PaginatingCommonParams {
-      records: T[];
+      records: T[]
     }
 
     /** common search params of table */
-    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>
 
     /**
      * enable status
@@ -29,22 +29,22 @@ declare namespace Api {
      * - "1": enabled
      * - "2": disabled
      */
-    type EnableStatus = '1' | '2';
+    type EnableStatus = '1' | '2'
 
     /** common record */
     type CommonRecord<T = any> = {
       /** record id */
-      id: number;
+      id: number
       /** record creator */
-      createBy: string;
+      createBy: string
       /** record create time */
-      createTime: string;
+      createTime: string
       /** record updater */
-      updateBy: string;
+      updateBy: string
       /** record update time */
-      updateTime: string;
+      updateTime: string
       /** record status */
-      status: EnableStatus | null;
-    } & T;
+      status: EnableStatus | null
+    } & T
   }
 }
diff --git a/apps/admin/src/typings/api/system-manage.d.ts b/apps/admin/src/typings/api/system-manage.d.ts
index d95c037..728e77f 100644
--- a/apps/admin/src/typings/api/system-manage.d.ts
+++ b/apps/admin/src/typings/api/system-manage.d.ts
@@ -5,28 +5,28 @@ declare namespace Api {
    * backend api module: "systemManage"
    */
   namespace SystemManage {
-    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>
 
     /** role */
     type Role = Common.CommonRecord<{
       /** role name */
-      roleName: string;
+      roleName: string
       /** role code */
-      roleCode: string;
+      roleCode: string
       /** role description */
-      roleDesc: string;
-    }>;
+      roleDesc: string
+    }>
 
     /** role search params */
     type RoleSearchParams = CommonType.RecordNullable<
       Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'status'> & CommonSearchParams
-    >;
+    >
 
     /** role list */
-    type RoleList = Common.PaginatingQueryRecord<Role>;
+    type RoleList = Common.PaginatingQueryRecord<Role>
 
     /** all role */
-    type AllRole = Pick<Role, 'id' | 'roleName' | 'roleCode'>;
+    type AllRole = Pick<Role, 'id' | 'roleName' | 'roleCode'>
 
     /**
      * user gender
@@ -34,32 +34,32 @@ declare namespace Api {
      * - "1": "male"
      * - "2": "female"
      */
-    type UserGender = '1' | '2';
+    type UserGender = '1' | '2'
 
     /** user */
     type User = Common.CommonRecord<{
       /** user name */
-      userName: string;
+      userName: string
       /** user gender */
-      userGender: UserGender | null;
+      userGender: UserGender | null
       /** user nick name */
-      nickName: string;
+      nickName: string
       /** user phone */
-      userPhone: string;
+      userPhone: string
       /** user email */
-      userEmail: string;
+      userEmail: string
       /** user role code collection */
-      userRoles: string[];
-    }>;
+      userRoles: string[]
+    }>
 
     /** user search params */
     type UserSearchParams = CommonType.RecordNullable<
       Pick<Api.SystemManage.User, 'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'status'> &
-        CommonSearchParams
-    >;
+      CommonSearchParams
+    >
 
     /** user list */
-    type UserList = Common.PaginatingQueryRecord<User>;
+    type UserList = Common.PaginatingQueryRecord<User>
 
     /**
      * menu type
@@ -67,18 +67,18 @@ declare namespace Api {
      * - "1": directory
      * - "2": menu
      */
-    type MenuType = '1' | '2';
+    type MenuType = '1' | '2'
 
-    type MenuButton = {
+    interface MenuButton {
       /**
        * button code
        *
        * it can be used to control the button permission
        */
-      code: string;
+      code: string
       /** button description */
-      desc: string;
-    };
+      desc: string
+    }
 
     /**
      * icon type
@@ -86,54 +86,54 @@ declare namespace Api {
      * - "1": iconify icon
      * - "2": local icon
      */
-    type IconType = '1' | '2';
+    type IconType = '1' | '2'
 
     type MenuPropsOfRoute = Pick<
       import('vue-router').RouteMeta,
-      | 'i18nKey'
-      | 'keepAlive'
-      | 'constant'
-      | 'order'
-      | 'href'
-      | 'hideInMenu'
-      | 'activeMenu'
-      | 'multiTab'
-      | 'fixedIndexInTab'
-      | 'query'
-    >;
+        | 'i18nKey'
+        | 'keepAlive'
+        | 'constant'
+        | 'order'
+        | 'href'
+        | 'hideInMenu'
+        | 'activeMenu'
+        | 'multiTab'
+        | 'fixedIndexInTab'
+        | 'query'
+    >
 
     type Menu = Common.CommonRecord<{
       /** parent menu id */
-      parentId: number;
+      parentId: number
       /** menu type */
-      menuType: MenuType;
+      menuType: MenuType
       /** menu name */
-      menuName: string;
+      menuName: string
       /** route name */
-      routeName: string;
+      routeName: string
       /** route path */
-      routePath: string;
+      routePath: string
       /** component */
-      component?: string;
+      component?: string
       /** iconify icon name or local icon name */
-      icon: string;
+      icon: string
       /** icon type */
-      iconType: IconType;
+      iconType: IconType
       /** buttons */
-      buttons?: MenuButton[] | null;
+      buttons?: MenuButton[] | null
       /** children menu */
-      children?: Menu[] | null;
+      children?: Menu[] | null
     }> &
-      MenuPropsOfRoute;
+    MenuPropsOfRoute
 
     /** menu list */
-    type MenuList = Common.PaginatingQueryRecord<Menu>;
+    type MenuList = Common.PaginatingQueryRecord<Menu>
 
-    type MenuTree = {
-      id: number;
-      label: string;
-      pId: number;
-      children?: MenuTree[];
-    };
+    interface MenuTree {
+      id: number
+      label: string
+      pId: number
+      children?: MenuTree[]
+    }
   }
 }
diff --git a/apps/admin/src/utils/date.ts b/apps/admin/src/utils/date.ts
index 9d53a76..6168937 100644
--- a/apps/admin/src/utils/date.ts
+++ b/apps/admin/src/utils/date.ts
@@ -1,7 +1,7 @@
-import path from 'path-browserify';
+import path from 'path-browserify'
 
 export function getCurrentYear(): Date {
-  return new Date();
+  return new Date()
 }
 
 /**
@@ -11,29 +11,29 @@ export function getCurrentYear(): Date {
  * @returns
  */
 export function getTrueRandomInt(min: number, max: number) {
-  const range = max - min + 1;
-  const maxSafe = 0xffffffff; // 32位最大无符号整数 (2^32 - 1)
-  let randomValue = 0;
+  const range = max - min + 1
+  const maxSafe = 0xFFFFFFFF // 32位最大无符号整数 (2^32 - 1)
+  let randomValue = 0
 
   do {
-    const buffer = new Uint32Array(1);
-    window.crypto.getRandomValues(buffer);
-    randomValue = (buffer[0]! / (maxSafe + 1)) * range; // 转换为[0, range)的浮点数
-  } while (randomValue >= range); // 拒绝采样避免偏差
+    const buffer = new Uint32Array(1)
+    window.crypto.getRandomValues(buffer)
+    randomValue = (buffer[0]! / (maxSafe + 1)) * range // 转换为[0, range)的浮点数
+  } while (randomValue >= range) // 拒绝采样避免偏差
 
-  return Math.floor(randomValue) + min;
+  return Math.floor(randomValue) + min
 }
 
 /**
  * 路径拼接
  */
 export function browserPathJoin(base: string, ...paths: string[]) {
-  const [protocol, ...rest] = base.split('://');
+  const [protocol, ...rest] = base.split('://')
   if (rest.length > 0) {
-    const pathPart = rest.join('://').replace(/\/+/g, '/');
-    return `${protocol}://${path.join(pathPart, ...paths)}`;
+    const pathPart = rest.join('://').replace(/\/+/g, '/')
+    return `${protocol}://${path.join(pathPart, ...paths)}`
   }
-  return path.join(base, ...paths);
+  return path.join(base, ...paths)
 }
 
 /**
@@ -42,7 +42,7 @@ export function browserPathJoin(base: string, ...paths: string[]) {
 export function nextTickSleep() {
   return new Promise((resolve) => {
     nextTick(() => {
-      resolve(true);
-    });
-  });
+      resolve(true)
+    })
+  })
 }
diff --git a/apps/admin/src/utils/file.ts b/apps/admin/src/utils/file.ts
index 440a167..3d8bbaa 100644
--- a/apps/admin/src/utils/file.ts
+++ b/apps/admin/src/utils/file.ts
@@ -1,22 +1,22 @@
-import { snapdom } from '@zumer/snapdom';
-import { getTrueRandomInt } from './date';
-import { getSnowflake } from './rest';
+import { snapdom } from '@zumer/snapdom'
+import { getTrueRandomInt } from './date'
+import { getSnowflake } from './rest'
 
 /** 通过 url 判断是否为 图片链接 */
 export function isImageUrl(url: string) {
-  const str = url.split('?')[0]!.substring(url.lastIndexOf('.') + 1) || '';
-  return ['jpg', 'jpeg', 'png', 'webp', 'svg', 'gif'].includes(str.toLocaleLowerCase());
+  const str = url.split('?')[0]!.substring(url.lastIndexOf('.') + 1) || ''
+  return ['jpg', 'jpeg', 'png', 'webp', 'svg', 'gif'].includes(str.toLocaleLowerCase())
 }
 
 /** 通过 url 判断是否为 图片链接 */
 export function isVideoUrl(url: string) {
-  const str = url.split('?')[0]!.substring(url.lastIndexOf('.') + 1) || '';
-  return ['m4v', 'mov', '3gp', '3g2', 'mp4', 'flv', 'f4v', 'webm', 'wmv', 'avi', 'asf'].includes(str.toLocaleLowerCase());
+  const str = url.split('?')[0]!.substring(url.lastIndexOf('.') + 1) || ''
+  return ['m4v', 'mov', '3gp', '3g2', 'mp4', 'flv', 'f4v', 'webm', 'wmv', 'avi', 'asf'].includes(str.toLocaleLowerCase())
 }
 
 /** 得到 */
 export function getAssetsFile(url: string) {
-  return new URL(url, import.meta.url).href;
+  return new URL(url, import.meta.url).href
 }
 
 /**
@@ -28,31 +28,31 @@ export function getAssetsFile(url: string) {
 export function selectFiles(accept = '*/*', multiple = false): Promise<File[]> {
   return new Promise((resolve, reject) => {
     // 1. 创建隐藏的文件输入元素
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = accept;
-    input.multiple = multiple;
-    input.style.display = 'none';
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = accept
+    input.multiple = multiple
+    input.style.display = 'none'
 
     // 2. 监听文件选择事件
     input.addEventListener('change', () => {
       if (!input.files || input.files.length === 0) {
-        reject(new Error('未选择文件'));
-        return;
+        reject(new Error('未选择文件'))
+        return
       }
 
       // 3. 转换为 File 对象数组
-      const files = Array.from(input.files);
-      resolve(files);
+      const files = Array.from(input.files)
+      resolve(files)
 
       // 4. 清理DOM
-      document.body.removeChild(input);
-    });
+      document.body.removeChild(input)
+    })
 
     // 5. 触发文件选择弹窗
-    document.body.appendChild(input);
-    input.click();
-  });
+    document.body.appendChild(input)
+    input.click()
+  })
 }
 
 /**
@@ -63,54 +63,55 @@ export function selectFiles(accept = '*/*', multiple = false): Promise<File[]> {
  */
 export function base64ToFile(dataUrl: string, filename: string): File {
   // 拆分 Data URL
-  const arr = dataUrl.split(',');
-  const mimeMatch = arr[0]?.match(/:(.*?);/) || null;
+  const arr = dataUrl.split(',')
+  const mimeMatch = arr[0]?.match(/:(.*?);/) || null
   if (!mimeMatch || !mimeMatch[1] || !arr[1]) {
-    throw new Error('无效的Base64字符串');
+    throw new Error('无效的Base64字符串')
   }
-  const mime = mimeMatch[1]; // 提取 MIME 类型（如 "image/png"）
-  const bstr = atob(arr[1]); // Base64 解码
-  const n = bstr.length;
-  const u8arr = new Uint8Array(n);
+  const mime = mimeMatch[1] // 提取 MIME 类型（如 "image/png"）
+  const bstr = atob(arr[1]) // Base64 解码
+  const n = bstr.length
+  const u8arr = new Uint8Array(n)
 
   // 将解码后的二进制数据存入 Uint8Array
   for (let i = 0; i < n; i++) {
-    u8arr[i] = bstr.charCodeAt(i);
+    u8arr[i] = bstr.charCodeAt(i)
   }
 
   // 生成 File 对象
-  return new File([u8arr], filename, { type: mime });
+  return new File([u8arr], filename, { type: mime })
 }
 
 /**
  * 将图片file转换为Base64对象
  */
-export function fileToBase64(file: File): Promise<{ id: string; img: string }> {
+export function fileToBase64(file: File): Promise<{ id: string, img: string }> {
   return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
     reader.onload = (e) => {
-      const date = new Date().getTime();
-      const num = getTrueRandomInt(100000000, 99999999999);
+      const date = new Date().getTime()
+      const num = getTrueRandomInt(100000000, 99999999999)
       if (file.size > 1024 * 40) {
         // 只有大于40kb才压缩
-        const img = new Image();
-        img.src = String(e.target?.result || '');
+        const img = new Image()
+        img.src = String(e.target?.result || '')
         img.onload = async () => {
-          const Base64Url = await compressImg(img, file.type);
-          resolve({ id: `id_${date}_${num}`, img: Base64Url });
-        };
+          const Base64Url = await compressImg(img, file.type)
+          resolve({ id: `id_${date}_${num}`, img: Base64Url })
+        }
         img.onerror = () => {
-          reject('加载图片失败,002');
-        };
-      } else {
-        resolve({ id: `id_${date}_${num}`, img: String(e.target?.result || '') });
+          reject('加载图片失败,002')
+        }
       }
-    };
+      else {
+        resolve({ id: `id_${date}_${num}`, img: String(e.target?.result || '') })
+      }
+    }
     reader.onerror = () => {
-      reject('加载图片失败,001');
-    };
-  });
+      reject('加载图片失败,001')
+    }
+  })
 }
 
 /**
@@ -123,41 +124,42 @@ export function fileToBase64(file: File): Promise<{ id: string; img: string }> {
  */
 export function compressImg(img: HTMLImageElement, imgType = 'image/jpeg', mx = 720, mh = 1280, quality = 0.8): Promise<string> {
   return new Promise((resolve) => {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    const { width: originWidth, height: originHeight } = img;
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')
+    const { width: originWidth, height: originHeight } = img
     // 最大尺寸限制
-    const maxWidth = mx;
-    const maxHeight = mh;
+    const maxWidth = mx
+    const maxHeight = mh
     // 目标尺寸
-    let targetWidth = originWidth;
-    let targetHeight = originHeight;
+    let targetWidth = originWidth
+    let targetHeight = originHeight
     if (originWidth > maxWidth || originHeight > maxHeight) {
       if (originWidth / originHeight > 1) {
         // 宽图片
-        targetWidth = maxWidth;
-        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
-      } else {
+        targetWidth = maxWidth
+        targetHeight = Math.round(maxWidth * (originHeight / originWidth))
+      }
+      else {
         // 高图片
-        targetHeight = maxHeight;
-        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
+        targetHeight = maxHeight
+        targetWidth = Math.round(maxHeight * (originWidth / originHeight))
       }
     }
-    canvas.width = targetWidth;
-    canvas.height = targetHeight;
+    canvas.width = targetWidth
+    canvas.height = targetHeight
     if (context) {
-      context.clearRect(0, 0, targetWidth, targetHeight);
+      context.clearRect(0, 0, targetWidth, targetHeight)
       // 图片绘制
-      context.drawImage(img, 0, 0, targetWidth, targetHeight);
+      context.drawImage(img, 0, 0, targetWidth, targetHeight)
     }
-    const dataURL = canvas.toDataURL(imgType, quality); // 转换图片为dataURL
+    const dataURL = canvas.toDataURL(imgType, quality) // 转换图片为dataURL
     // const fun = (blob) => {
     //    resolve(blob);
     // };
     // 转换为bolb对象
     // canvas.toBlob(fun, imgType, 0.7);
-    resolve(dataURL);
-  });
+    resolve(dataURL)
+  })
 }
 
 /**
@@ -166,131 +168,137 @@ export function compressImg(img: HTMLImageElement, imgType = 'image/jpeg', mx =
  * @returns - 第一帧的File对象
  */
 export function getFirstFrameOfVideo(
-  videoSource: Blob | File | string
-): Promise<{ firstFrame: File; duration: number; videoWidth: number; videoHeight: number }> {
+  videoSource: Blob | File | string,
+): Promise<{ firstFrame: File, duration: number, videoWidth: number, videoHeight: number }> {
   return new Promise((resolve, reject) => {
-    let url = ''; // 使用createObjectURL创建的URL
+    let url = '' // 使用createObjectURL创建的URL
 
     // 创建视频元素
-    const video = document.createElement('video');
-    video.crossOrigin = 'Anonymous';
-    video.setAttribute('playsinline', '');
-    video.muted = true;
+    const video = document.createElement('video')
+    video.crossOrigin = 'Anonymous'
+    video.setAttribute('playsinline', '')
+    video.muted = true
 
     // 事件监听：当视频可播放时处理
     video.addEventListener('seeked', () => {
-      const canvas = document.createElement('canvas');
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
+      const canvas = document.createElement('canvas')
+      canvas.width = video.videoWidth
+      canvas.height = video.videoHeight
 
-      const context = canvas.getContext('2d');
+      const context = canvas.getContext('2d')
       if (context) {
-        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        context.drawImage(video, 0, 0, canvas.width, canvas.height)
         const blobCallback = (blob: Blob | null) => {
           if (blob) {
-            const name = `${getSnowflake()}_${Math.random().toString(32).substring(2)}.png`;
+            const name = `${getSnowflake()}_${Math.random().toString(32).substring(2)}.png`
             // 将 Blob 转换为 File
-            const firstFrame = new File([blob], name, { type: blob.type });
-            resolve({ firstFrame, videoWidth: video.videoWidth, videoHeight: video.videoHeight, duration: video.duration });
-            url && URL.revokeObjectURL(url); // 使用createObjectURL创建的URL应在不再需要时通过revokeObjectURL释放，以避免内存泄漏。
-          } else {
-            reject(new Error('获取地一帧失败,BD002'));
+            const firstFrame = new File([blob], name, { type: blob.type })
+            resolve({ firstFrame, videoWidth: video.videoWidth, videoHeight: video.videoHeight, duration: video.duration })
+            url && URL.revokeObjectURL(url) // 使用createObjectURL创建的URL应在不再需要时通过revokeObjectURL释放，以避免内存泄漏。
           }
-        };
-        canvas.toBlob(blobCallback, 'image/jpeg', 0.7);
-      } else {
-        reject(new Error('获取地一帧失败,BD001'));
+          else {
+            reject(new Error('获取地一帧失败,BD002'))
+          }
+        }
+        canvas.toBlob(blobCallback, 'image/jpeg', 0.7)
       }
-    });
+      else {
+        reject(new Error('获取地一帧失败,BD001'))
+      }
+    })
 
     // 错误处理
     video.addEventListener('error', () => {
-      reject(new Error('获取地一帧失败,BD003'));
-    });
+      reject(new Error('获取地一帧失败,BD003'))
+    })
 
     // 设置视频源
     if (videoSource instanceof Blob || (videoSource as any) instanceof File) {
       // Blob 或 File
-      url = URL.createObjectURL(videoSource as Blob | File);
-      video.src = url;
-      video.load();
-    } else if (typeof videoSource === 'string') {
-      video.src = videoSource;
-      video.load();
-    } else {
-      reject(new Error('不支持此类型'));
+      url = URL.createObjectURL(videoSource as Blob | File)
+      video.src = url
+      video.load()
     }
-    video.currentTime = 0.01;
-  });
+    else if (typeof videoSource === 'string') {
+      video.src = videoSource
+      video.load()
+    }
+    else {
+      reject(new Error('不支持此类型'))
+    }
+    video.currentTime = 0.01
+  })
 }
 
 /**
  * 得到图片的宽高
  * @param file - 图片,可以是 url 或者File
  */
-export function getImageWidthHeight(file: Blob | File | string): Promise<{ width: number; height: number }> {
-  return new Promise<{ width: number; height: number }>((resolve, reject) => {
-    const img = new Image();
+export function getImageWidthHeight(file: Blob | File | string): Promise<{ width: number, height: number }> {
+  return new Promise<{ width: number, height: number }>((resolve, reject) => {
+    const img = new Image()
     img.onload = () => {
-      const size = { width: img.width, height: img.height };
-      resolve(size);
-    };
+      const size = { width: img.width, height: img.height }
+      resolve(size)
+    }
     img.onerror = () => {
-      reject(new Error('读取图片失败,BD0001'));
-    };
+      reject(new Error('读取图片失败,BD0001'))
+    }
 
     if (typeof file === 'string') {
-      img.src = file;
-    } else if (file instanceof File || file instanceof Blob) {
-      img.src = URL.createObjectURL(file);
-    } else {
-      reject(new Error('读取图片失败,BD0002'));
+      img.src = file
     }
-  });
+    else if (file instanceof File || file instanceof Blob) {
+      img.src = URL.createObjectURL(file)
+    }
+    else {
+      reject(new Error('读取图片失败,BD0002'))
+    }
+  })
 }
 
 /**
  * html 转换为 jpg图片
  */
 export async function htmlToJpgImgFile(html: string, op: { width: number }): Promise<File> {
-  const type: 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp' = 'jpg';
+  const type: 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp' = 'jpg'
   // 创建临时容器
-  const container = document.createElement('div');
-  container.style.width = `${op.width}px`;
-  container.style.position = 'absolute';
-  container.style.left = '101vw';
-  container.style.top = '101vh';
-  container.style.zIndex = '-1';
-  container.style.backgroundColor = '#ffffff';
-  container.innerHTML = html;
-  document.body.appendChild(container);
+  const container = document.createElement('div')
+  container.style.width = `${op.width}px`
+  container.style.position = 'absolute'
+  container.style.left = '101vw'
+  container.style.top = '101vh'
+  container.style.zIndex = '-1'
+  container.style.backgroundColor = '#ffffff'
+  container.innerHTML = html
+  document.body.appendChild(container)
   try {
     // 等待图片加载完成
-    const images = container.querySelectorAll('img');
+    const images = container.querySelectorAll('img')
     const imageLoadPromises = Array.from(images).map((img) => {
       if (img.complete) {
-        return Promise.resolve();
+        return Promise.resolve()
       }
       return new Promise((resolve) => {
-        img.onload = () => resolve(null);
-        img.onerror = () => resolve(null); // 即使图片加载失败也继续
+        img.onload = () => resolve(null)
+        img.onerror = () => resolve(null) // 即使图片加载失败也继续
         // 设置超时，防止某些图片一直加载不成功
-        setTimeout(() => resolve(null), 5000);
-      });
-    });
+        setTimeout(() => resolve(null), 5000)
+      })
+    })
 
-    await Promise.all(imageLoadPromises);
-    console.log('所有图片加载完成，图片数量:', images.length);
+    await Promise.all(imageLoadPromises)
+    console.log('所有图片加载完成，图片数量:', images.length)
 
     // 额外等待确保DOM完全渲染
     await new Promise((resolve) => {
       setTimeout(() => {
-        requestAnimationFrame(resolve);
-      }, 100); // 增加等待时间
-    });
+        requestAnimationFrame(resolve)
+      }, 100) // 增加等待时间
+    })
 
-    const name = `${getSnowflake()}_${Math.random().toString(32).substring(2)}.jpg`;
-    console.log('开始截图，容器宽度:', container.offsetWidth, '高度:', container.offsetHeight);
+    const name = `${getSnowflake()}_${Math.random().toString(32).substring(2)}.jpg`
+    console.log('开始截图，容器宽度:', container.offsetWidth, '高度:', container.offsetHeight)
 
     // 使用 snapdom 进行 DOM 快照
     const res = await snapdom(container, {
@@ -300,29 +308,31 @@ export async function htmlToJpgImgFile(html: string, op: { width: number }): Pro
       format: type,
       filename: name,
       backgroundColor: '#ffffff',
-    });
+    })
 
-    const blob = await res.toBlob({ type, backgroundColor: '#ffffff' });
-    console.log('截图完成，blob大小:', (blob.size / 1024).toFixed(2), 'KB');
+    const blob = await res.toBlob({ type, backgroundColor: '#ffffff' })
+    console.log('截图完成，blob大小:', (blob.size / 1024).toFixed(2), 'KB')
 
     // 将blob转换为base64以便在浏览器查看
-    const reader = new FileReader();
+    const reader = new FileReader()
     const base64Promise = new Promise<string>((resolve) => {
       reader.onloadend = () => {
-        resolve(reader.result as string);
-      };
-      reader.readAsDataURL(blob);
-    });
-    const base64 = await base64Promise;
+        resolve(reader.result as string)
+      }
+      reader.readAsDataURL(blob)
+    })
+    const base64 = await base64Promise
     // console.log("blob=====", blob);
     // console.log("图片base64=====", base64);
     // console.log("👆 复制上面的base64到浏览器地址栏查看图片");
 
-    return new File([blob], name, { type: blob.type });
-  } catch (error) {
-    console.error('htmlToJpgImgFile 错误:', error);
-    return Promise.reject(error);
-  } finally {
+    return new File([blob], name, { type: blob.type })
+  }
+  catch (error) {
+    console.error('htmlToJpgImgFile 错误:', error)
+    return Promise.reject(error)
+  }
+  finally {
     //  document.body.removeChild(container);
   }
 }
diff --git a/apps/admin/src/utils/oss.ts b/apps/admin/src/utils/oss.ts
index 5dd5a99..011a77d 100644
--- a/apps/admin/src/utils/oss.ts
+++ b/apps/admin/src/utils/oss.ts
@@ -1,8 +1,8 @@
-import { type AliOssSTS, getAliOssTokenAxios } from '@/service/api/upload';
-import OSS, { type Checkpoint } from 'ali-oss';
+import OSS, { type Checkpoint } from 'ali-oss'
+import { type AliOssSTS, getAliOssTokenAxios } from '@/service/api/upload'
 
 // 初始化OSS客户端
-export const initOSSClient = (token: AliOssSTS) => {
+export function initOSSClient(token: AliOssSTS) {
   return new OSS({
     region: token.Region || 'oss-cn-shenzhen',
     accessKeyId: token.AccessKeyId,
@@ -12,34 +12,30 @@ export const initOSSClient = (token: AliOssSTS) => {
     refreshSTSTokenInterval: 600000, // 10分钟刷新一次token
     refreshSTSToken: async () => {
       // 这里可以添加获取新token的逻辑
-      const res = await getAliOssTokenAxios();
+      const res = await getAliOssTokenAxios()
       return {
         accessKeyId: res.AccessKeyId,
         accessKeySecret: res.AccessKeySecret,
         stsToken: res.SecurityToken,
-      };
+      }
     },
-  });
-};
+  })
+}
 
 /**
  * 上传文件到OSS (注意进度从 0 开始到 1 结束)
  */
-export const uploadFileToOSS = async (
-  client: OSS,
-  file: File,
-  path: string,
-  progress?: ((progress: number, checkpoint?: Checkpoint, http?: any) => any) | undefined
-) => {
+export async function uploadFileToOSS(client: OSS, file: File, path: string, progress?: ((progress: number, checkpoint?: Checkpoint, http?: any) => any) | undefined) {
   try {
     const result = await client.multipartUpload(path, file, {
       parallel: 5, // 并发分片数
       partSize: 1024 * 1024 * 5, // 分片大小5MB
       progress,
-    });
-    return result;
-  } catch (error) {
-    console.error('上传文件失败:', error);
-    throw error;
+    })
+    return result
   }
-};
+  catch (error) {
+    console.error('上传文件失败:', error)
+    throw error
+  }
+}
diff --git a/apps/admin/src/utils/rest.ts b/apps/admin/src/utils/rest.ts
index 31ba8df..19b9bae 100644
--- a/apps/admin/src/utils/rest.ts
+++ b/apps/admin/src/utils/rest.ts
@@ -1,13 +1,13 @@
-import { Snowflake } from '@sapphire/snowflake';
+import { Snowflake } from '@sapphire/snowflake'
 
 /**
  * 得到雪花ID
  */
 export function getSnowflake(): bigint {
-  const epoch = new Date('2025-07-01T00:00:00.000Z');
-  const snowflake = new Snowflake(epoch);
-  snowflake.workerId = 1;
-  return snowflake.generate();
+  const epoch = new Date('2025-07-01T00:00:00.000Z')
+  const snowflake = new Snowflake(epoch)
+  snowflake.workerId = 1
+  return snowflake.generate()
 }
 
 /**
@@ -18,50 +18,53 @@ export function getSnowflake(): bigint {
  */
 export async function concurrentPool<T>(tasks: (() => Promise<T>)[], concurrency: number): Promise<T[]> {
   // 存储所有任务的结果
-  const results: T[] = [];
+  const results: T[] = []
   // 存储当前正在执行的任务
-  const executing: Promise<void>[] = [];
-  let index = 0; // 任务索引，用于按顺序添加任务
+  const executing: Promise<void>[] = []
+  let index = 0 // 任务索引，用于按顺序添加任务
 
   // 创建执行器函数
   const execute = async (taskIndex: number): Promise<void> => {
     try {
       // 执行任务并获取结果
-      const result = await tasks[taskIndex]!();
-      results[taskIndex] = result; // 按原始顺序存储结果
-    } catch (error) {
-      results[taskIndex] = error as any; // 捕获错误（可根据需求调整）
-    } finally {
+      const result = await tasks[taskIndex]!()
+      results[taskIndex] = result // 按原始顺序存储结果
+    }
+    catch (error) {
+      results[taskIndex] = error as any // 捕获错误（可根据需求调整）
+    }
+    finally {
       // 无论成功失败，任务完成后从执行队列移除
-      const executingIndex = executing.findIndex((p) => p === executing[taskIndex]);
+      const executingIndex = executing.findIndex(p => p === executing[taskIndex])
       if (executingIndex !== -1) {
-        executing.splice(executingIndex, 1);
+        executing.splice(executingIndex, 1)
       }
     }
-  };
+  }
 
   // 启动初始并发任务
   while (index < Math.min(concurrency, tasks.length)) {
-    const taskPromise = execute(index);
-    executing.push(taskPromise);
-    index++;
+    const taskPromise = execute(index)
+    executing.push(taskPromise)
+    index++
   }
 
   // 动态管理任务池
   while (index < tasks.length) {
     if (executing.length < concurrency) {
-      const taskPromise = execute(index);
-      executing.push(taskPromise);
-      index++;
-    } else {
+      const taskPromise = execute(index)
+      executing.push(taskPromise)
+      index++
+    }
+    else {
       // 等待任意一个任务完成
-      await Promise.race(executing); // eslint-disable-line no-await-in-loop
+      await Promise.race(executing)
     }
   }
 
   // 等待所有剩余任务完成
-  await Promise.all(executing);
-  return results;
+  await Promise.all(executing)
+  return results
 }
 
 /**
@@ -75,25 +78,27 @@ export async function concurrentPool<T>(tasks: (() => Promise<T>)[], concurrency
  */
 export function compareVersion(v1: string, v2: string, operator: '_' | '-' | '.' = '.'): -1 | 0 | 1 {
   if (v1 === v2) {
-    return 0;
+    return 0
   }
 
-  const vs1 = v1.split(operator).map((a) => parseInt(a));
-  const vs2 = v2.split(operator).map((a) => parseInt(a));
+  const vs1 = v1.split(operator).map(a => Number.parseInt(a))
+  const vs2 = v2.split(operator).map(a => Number.parseInt(a))
 
-  const length = Math.min(vs1.length, vs2.length);
+  const length = Math.min(vs1.length, vs2.length)
   for (let i = 0; i < length; i++) {
-    const s1 = vs1[i] || 0;
-    const s2 = vs2[i] || 0;
+    const s1 = vs1[i] || 0
+    const s2 = vs2[i] || 0
     if (s1 > s2) {
-      return 1;
-    } else if (s1 < s2) {
-      return -1;
+      return 1
+    }
+    else if (s1 < s2) {
+      return -1
     }
   }
   if (length === vs1.length) {
-    return -1;
-  } else {
-    return 1;
+    return -1
+  }
+  else {
+    return 1
   }
 }
diff --git a/apps/admin/src/views/question-store/index.vue b/apps/admin/src/views/question-store/index.vue
index 793832d..9ade057 100644
--- a/apps/admin/src/views/question-store/index.vue
+++ b/apps/admin/src/views/question-store/index.vue
@@ -27,7 +27,8 @@ function onMouseDown(e: MouseEvent) {
 }
 
 function onMouseMove(e: MouseEvent) {
-  if (!isDragging.value) return
+  if (!isDragging.value)
+    return
   const dx = e.clientX - startX.value
   const newWidth = startWidth.value + dx
 
@@ -48,12 +49,13 @@ function onMouseUp() {
 <template>
   <div class="h-full flex overflow-hidden rounded-2xl bg-white shadow-sm">
     <!-- 分类树区域 -->
-    <div class="h-full flex-shrink-0 relative" :style="{ width: `${siderWidth}px` }">
+    <div class="relative h-full flex-shrink-0" :style="{ width: `${siderWidth}px` }">
       <CategoryTree @update:category="val => currentCategory = val" />
       <!-- 分类树宽度调整手柄 -->
       <div
-        class="absolute top-0 right-0 h-full w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/40 transition-colors z-10"
-        @mousedown="onMouseDown"></div>
+        class="absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize transition-colors active:bg-primary/40 hover:bg-primary/20"
+        @mousedown="onMouseDown"
+      />
     </div>
     <!-- 题目列表区域 -->
     <div class="h-full flex-1 overflow-hidden">
diff --git a/apps/admin/src/views/question-store/modules/CategoryTree.vue b/apps/admin/src/views/question-store/modules/CategoryTree.vue
index 6baf714..30dc00c 100644
--- a/apps/admin/src/views/question-store/modules/CategoryTree.vue
+++ b/apps/admin/src/views/question-store/modules/CategoryTree.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref, h, watch } from 'vue'
 import {
   NButton,
-  NTree,
-  NModal,
   NForm,
   NFormItem,
   NInput,
-  useMessage,
+  NModal,
+  NTree,
+  type TreeOption,
   useDialog,
-  type TreeOption
+  useMessage,
 } from 'naive-ui'
+import { h, ref, watch } from 'vue'
 import SvgIcon from '@/components/custom/svg-icon.vue'
 
 const emit = defineEmits<{
@@ -135,9 +135,10 @@ watch(selectedKeys, (newKeys) => {
       level: node.isLeaf ? 3 : 1,
       key: node.key,
       isLeaf: node.isLeaf,
-      children: node.children
+      children: node.children,
     })
-  } else {
+  }
+  else {
     emit('update:category', null)
   }
 })
@@ -318,10 +319,12 @@ function renderSuffix({ option }: { option: TreeOption }) {
     </div>
 
     <div class="flex-1 overflow-y-auto py-2">
-      <NTree block-line :data="treeData" :selected-keys="selectedKeys" :expanded-keys="expandedKeys"
+      <NTree
+        block-line :data="treeData" :selected-keys="selectedKeys" :expanded-keys="expandedKeys"
         :render-prefix="renderPrefix" :render-suffix="renderSuffix" selectable expand-on-click class="px-2"
         @update:selected-keys="(keys) => (selectedKeys = keys)"
-        @update:expanded-keys="(keys) => (expandedKeys = keys)" />
+        @update:expanded-keys="(keys) => (expandedKeys = keys)"
+      />
     </div>
 
     <div class="border-t border-gray-100 bg-gray-50 p-3 text-xs text-gray-400">
@@ -329,8 +332,10 @@ function renderSuffix({ option }: { option: TreeOption }) {
     </div>
 
     <!-- Add/Edit Category Modal -->
-    <NModal v-model:show="showCategoryModal" preset="card"
-      :title="categoryOperation === 'edit' ? '编辑分类' : `新增 ${categoryModalType} 级分类`" class="w-[500px]">
+    <NModal
+      v-model:show="showCategoryModal" preset="card"
+      :title="categoryOperation === 'edit' ? '编辑分类' : `新增 ${categoryModalType} 级分类`" class="w-[500px]"
+    >
       <NForm>
         <NFormItem label="分类显示名称">
           <NInput v-model:value="categoryForm.name" placeholder="请输入内容" />
diff --git a/apps/admin/src/views/question-store/modules/QuestionList.vue b/apps/admin/src/views/question-store/modules/QuestionList.vue
index 64c8a73..b6de1df 100644
--- a/apps/admin/src/views/question-store/modules/QuestionList.vue
+++ b/apps/admin/src/views/question-store/modules/QuestionList.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
 import {
   NBreadcrumb,
   NBreadcrumbItem,
   NButton,
   NCard,
+  NDrawer,
+  NDrawerContent,
   NEmpty,
   NForm,
   NFormItem,
   NInput,
   NInputNumber,
-  NDrawer,
-  NDrawerContent,
   NTag,
 
 } from 'naive-ui'
+import { computed, ref } from 'vue'
 import SvgIcon from '@/components/custom/svg-icon.vue'
-import RestBasicEditor from '@/components/common/rest-basic-editor/rest-basic-editor.vue'
 
 const props = defineProps<{
   currentCategory: any
@@ -168,7 +167,7 @@ function submitQuestion() {
     questionList.value.push({
       id: `Q-${Math.floor(Math.random() * 10000)}`,
       ...questionForm.value,
-      categoryKey: props.currentCategory?.key // Add categoryKey
+      categoryKey: props.currentCategory?.key, // Add categoryKey
     })
     window.$message?.success('题目添加成功')
   }
@@ -294,9 +293,9 @@ function submitQuestion() {
       <NDrawerContent :title="questionOperation === 'edit' ? '编辑题目详情' : '新增题目详情'">
         <NForm label-placement="top">
           <NFormItem label="题目正文内容">
-            <div class="w-full border border-gray-200 rounded-lg overflow-hidden">
+            <div class="w-full overflow-hidden border border-gray-200 rounded-lg">
               <!-- <RestBasicEditor v-model="questionForm.content" /> -->
-               <NInput type="textarea" v-model:value="questionForm.content" class="w-full h-64" />
+              <NInput v-model:value="questionForm.content" type="textarea" class="h-64 w-full" />
             </div>
           </NFormItem>
 
diff --git a/apps/admin/src/views/rank/rank-list/index.vue b/apps/admin/src/views/rank/rank-list/index.vue
index ce45fd5..c9c2fff 100644
--- a/apps/admin/src/views/rank/rank-list/index.vue
+++ b/apps/admin/src/views/rank/rank-list/index.vue
@@ -1,14 +1,14 @@
 <script setup lang="tsx">
-import { reactive, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { NButton, NTag, NCard, NSpace } from 'naive-ui';
-import { fetchGetUserList } from '@/service/api';
-import { useAppStore } from '@/store/modules/app';
-import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table';
-import RankSearch from './modules/rank-search.vue';
+import { NButton, NCard, NTag } from 'naive-ui'
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table'
+import { fetchGetUserList } from '@/service/api'
+import { useAppStore } from '@/store/modules/app'
+import RankSearch from './modules/rank-search.vue'
 
-const appStore = useAppStore();
-const router = useRouter();
+const appStore = useAppStore()
+const router = useRouter()
 
 const searchParams: Api.SystemManage.UserSearchParams = reactive({
   current: 1,
@@ -18,67 +18,67 @@ const searchParams: Api.SystemManage.UserSearchParams = reactive({
   userGender: null,
   nickName: null,
   userPhone: null,
-  userEmail: null
-});
+  userEmail: null,
+})
 
-const rankTitle = '排行榜管理列表';
+const rankTitle = '排行榜管理列表'
 
 const statusMap: Record<string, string> = {
   1: '已发布',
-  2: '待审核'
-};
+  2: '待审核',
+}
 
 const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagination } = useNaivePaginatedTable({
   api: () => fetchGetUserList(searchParams),
-  transform: response => {
-    const transformed = defaultTransform(response);
+  transform: (response) => {
+    const transformed = defaultTransform(response)
     // Mocking data for Rank Management based on User API response
-    const mockCompetitions = ['阅读之星-辞海遨游环节 (2026)', '古诗词大会年度精英巅峰赛', '趣味百科常识挑战周'];
-    const mockDates = ['2026.01.12', '2026.01.15', '2026.01.18'];
-    const mockScales = ['40 支队伍', '24 支队伍', '60 支队伍'];
-    const mockScores = ['145', '180', '120'];
-    const mockTimes = ['2026-01-22 16:30:12', '2026-01-22 12:00:00', '2026-01-21 18:22:45'];
+    const mockCompetitions = ['阅读之星-辞海遨游环节 (2026)', '古诗词大会年度精英巅峰赛', '趣味百科常识挑战周']
+    const mockDates = ['2026.01.12', '2026.01.15', '2026.01.18']
+    const mockScales = ['40 支队伍', '24 支队伍', '60 支队伍']
+    const mockScores = ['145', '180', '120']
+    const mockTimes = ['2026-01-22 16:30:12', '2026-01-22 12:00:00', '2026-01-21 18:22:45']
 
     transformed.data.forEach((item, index) => {
-      const mockIndex = index % 3;
-      item.userName = mockCompetitions[mockIndex]; // Competition Name
-      item.userEmail = mockDates[mockIndex];       // Activity Date (using userEmail field)
-      item.userPhone = mockScales[mockIndex];      // Team Scale (using userPhone field)
-      item.nickName = mockScores[mockIndex];       // Max Score (using nickName field)
+      const mockIndex = index % 3
+      item.userName = mockCompetitions[mockIndex] // Competition Name
+      item.userEmail = mockDates[mockIndex] // Activity Date (using userEmail field)
+      item.userPhone = mockScales[mockIndex] // Team Scale (using userPhone field)
+      item.nickName = mockScores[mockIndex] // Max Score (using nickName field)
       // item.createTime is typically available, we'll simulate update time
-      item.createTime = mockTimes[mockIndex];
+      item.createTime = mockTimes[mockIndex]
       // Status: 1 (Published), 2 (Pending)
-      item.status = (index % 2 === 0) ? '2' : '1';
-    });
-    return transformed;
+      item.status = (index % 2 === 0) ? '2' : '1'
+    })
+    return transformed
   },
-  onPaginationParamsChange: params => {
-    searchParams.current = params.page;
-    searchParams.size = params.pageSize;
+  onPaginationParamsChange: (params) => {
+    searchParams.current = params.page
+    searchParams.size = params.pageSize
   },
   columns: () => [
     {
       type: 'selection',
       align: 'center',
-      width: 48
+      width: 48,
     },
     {
       key: 'userName',
       title: '比赛活动名称',
       align: 'left',
-      minWidth: 200
+      minWidth: 200,
     },
     {
       key: 'userEmail',
       title: '活动日期',
       align: 'center',
-      minWidth: 120
+      minWidth: 120,
     },
     {
       key: 'userPhone',
       title: '队伍规模',
       align: 'center',
-      minWidth: 100
+      minWidth: 100,
     },
     {
       key: 'nickName',
@@ -86,26 +86,31 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
       align: 'center',
       minWidth: 100,
       render: row => (
-        <span class="text-primary font-bold">{row.nickName} Pts</span>
-      )
+        <span class="text-primary font-bold">
+          {row.nickName}
+          {' '}
+          Pts
+        </span>
+      ),
     },
     {
       key: 'createTime',
       title: '最后更新时间',
       align: 'center',
-      minWidth: 160
+      minWidth: 160,
     },
     {
       key: 'status',
       title: '发布状态',
       align: 'center',
       width: 100,
-      render: row => {
-        if (row.status === null) return null;
-        const label = statusMap[row.status] || '未知';
+      render: (row) => {
+        if (row.status === null)
+          return null
+        const label = statusMap[row.status] || '未知'
         // 1: Published (Success/Green), 2: Pending (Warning/Orange)
-        return <NTag type={row.status === '1' ? 'success' : 'warning'}>{label}</NTag>;
-      }
+        return <NTag type={row.status === '1' ? 'success' : 'warning'}>{label}</NTag>
+      },
     },
     {
       key: 'operate',
@@ -118,10 +123,10 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
             进入排行详情
           </NButton>
         </div>
-      )
-    }
-  ]
-});
+      ),
+    },
+  ],
+})
 
 const {
   drawerVisible,
@@ -130,16 +135,14 @@ const {
   handleEdit,
   checkedRowKeys,
   onBatchDeleted,
-} = useTableOperate(data, 'id', getData);
-
-
+} = useTableOperate(data, 'id', getData)
 
 function edit(id: number) {
-  router.push({ name: 'rank_rank-detail', query: { id } });
+  router.push({ name: 'rank_rank-detail', query: { id } })
 }
 
 function handleBatchPublish() {
-  window.$message?.success('批量发布成功');
+  window.$message?.success('批量发布成功')
 }
 </script>
 
@@ -150,8 +153,12 @@ function handleBatchPublish() {
       <template #header>
         <div class="flex items-center justify-between">
           <div>
-            <div class="text-16px font-bold">{{ rankTitle }}</div>
-            <div class="text-12px text-gray-500 mt-4px">您可以对所有比赛场次的最终积分进行核对、修正，并正式发布结果。</div>
+            <div class="text-16px font-bold">
+              {{ rankTitle }}
+            </div>
+            <div class="mt-4px text-12px text-gray-500">
+              您可以对所有比赛场次的最终积分进行核对、修正，并正式发布结果。
+            </div>
           </div>
           <NButton type="primary" ghost class="ml-auto" @click="handleBatchPublish">
             <template #icon>
@@ -165,9 +172,11 @@ function handleBatchPublish() {
         <TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
           :loading="loading" @add="handleAdd" @delete="handleBatchDelete" @refresh="getData" />
       </template> -->
-      <NDataTable v-model:checked-row-keys="checkedRowKeys" :columns="columns" :data="data" size="small" striped
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys" :columns="columns" :data="data" size="small" striped
         :flex-height="!appStore.isMobile" :scroll-x="962" :loading="loading" remote :row-key="row => row.id"
-        :pagination="mobilePagination" class="sm:h-full" />
+        :pagination="mobilePagination" class="sm:h-full"
+      />
     </NCard>
   </div>
 </template>
diff --git a/apps/admin/src/views/rank/rank-list/modules/rank-search.vue b/apps/admin/src/views/rank/rank-list/modules/rank-search.vue
index d975c1a..230fdca 100644
--- a/apps/admin/src/views/rank/rank-list/modules/rank-search.vue
+++ b/apps/admin/src/views/rank/rank-list/modules/rank-search.vue
@@ -1,53 +1,53 @@
 <script setup lang="ts">
-import { computed, toRaw } from 'vue';
-import { jsonClone } from '@sa/utils';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { jsonClone } from '@sa/utils'
+import { computed, toRaw } from 'vue'
+import { useFormRules, useNaiveForm } from '@/hooks/common/form'
 
 defineOptions({
-  name: 'RankSearch'
-});
+  name: 'RankSearch',
+})
+
+const emit = defineEmits<Emits>()
 
 interface Emits {
-  (e: 'search'): void;
+  (e: 'search'): void
 }
 
-const emit = defineEmits<Emits>();
+const { formRef, validate, restoreValidation } = useNaiveForm()
 
-const { formRef, validate, restoreValidation } = useNaiveForm();
+const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true })
 
-const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });
-
-type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>;
+type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>
 
 const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
-  const { patternRules } = useFormRules();
+  const { patternRules } = useFormRules()
 
   return {
     userEmail: patternRules.email,
-    userPhone: patternRules.phone
-  };
-});
+    userPhone: patternRules.phone,
+  }
+})
 
-const defaultModel = jsonClone(toRaw(model.value));
+const defaultModel = jsonClone(toRaw(model.value))
 
 function resetModel() {
-  Object.assign(model.value, defaultModel);
+  Object.assign(model.value, defaultModel)
 }
 
 async function reset() {
-  await restoreValidation();
-  resetModel();
+  await restoreValidation()
+  resetModel()
 }
 
 async function search() {
-  await validate();
-  emit('search');
+  await validate()
+  emit('search')
 }
 
 const publishStatusOptions = [
   { label: '待审核', value: '2' }, // Mapping to '2' (Warning)
-  { label: '已发布', value: '1' }  // Mapping to '1' (Success)
-];
+  { label: '已发布', value: '1' }, // Mapping to '1' (Success)
+]
 </script>
 
 <template>
diff --git a/apps/admin/src/views/template/index.vue b/apps/admin/src/views/template/index.vue
index 1d0be84..a400121 100644
--- a/apps/admin/src/views/template/index.vue
+++ b/apps/admin/src/views/template/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="tsx">
-import { reactive } from 'vue';
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
-import { fetchGetUserList } from '@/service/api';
-import { useAppStore } from '@/store/modules/app';
-import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table';
-import TemplateOperateDrawer from './modules/template-operate-drawer.vue';
-import TemplateSearch from './modules/template-search.vue';
+import { NButton, NPopconfirm, NTag } from 'naive-ui'
+import { reactive } from 'vue'
+import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table'
+import { fetchGetUserList } from '@/service/api'
+import { useAppStore } from '@/store/modules/app'
+import TemplateOperateDrawer from './modules/template-operate-drawer.vue'
+import TemplateSearch from './modules/template-search.vue'
 
-const appStore = useAppStore();
+const appStore = useAppStore()
 
 const searchParams: Api.SystemManage.UserSearchParams = reactive({
   current: 1,
@@ -17,48 +17,48 @@ const searchParams: Api.SystemManage.UserSearchParams = reactive({
   userGender: null,
   nickName: null,
   userPhone: null,
-  userEmail: null
-});
+  userEmail: null,
+})
 
-const templateTitle = '模板管理';
+const templateTitle = '模板管理'
 
 const competitionMap: Record<string, string> = {
   1: '第九届阅读之星大赛',
-  2: '科普阅读大赛'
-};
+  2: '科普阅读大赛',
+}
 
 const statusMap: Record<string, string> = {
   1: '铺码成功',
-  2: '未铺码'
-};
+  2: '未铺码',
+}
 
 const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagination } = useNaivePaginatedTable({
   api: () => fetchGetUserList(searchParams),
-  transform: response => {
-    const transformed = defaultTransform(response);
+  transform: (response) => {
+    const transformed = defaultTransform(response)
     transformed.data.forEach((item, index) => {
-      item.nickName = `MD${String(index + 1).padStart(6, '0')}`;
-      item.userPhone = '210mmx297mm';
-      item.userGender = (item.userGender === '1' || item.userGender === '2') ? item.userGender : '1';
-    });
-    return transformed;
+      item.nickName = `MD${String(index + 1).padStart(6, '0')}`
+      item.userPhone = '210mmx297mm'
+      item.userGender = (item.userGender === '1' || item.userGender === '2') ? item.userGender : '1'
+    })
+    return transformed
   },
-  onPaginationParamsChange: params => {
-    searchParams.current = params.page;
-    searchParams.size = params.pageSize;
+  onPaginationParamsChange: (params) => {
+    searchParams.current = params.page
+    searchParams.size = params.pageSize
   },
   columns: () => [
     {
       type: 'selection',
       align: 'center',
-      width: 48
+      width: 48,
     },
     {
       key: 'index',
       title: '序号',
       align: 'center',
       width: 60,
-      render: (_, index) => index + 1
+      render: (_, index) => index + 1,
     },
     {
       key: 'userName',
@@ -74,10 +74,10 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
       key: 'userGender',
       title: '关联比赛',
       align: 'center',
-      render: row => {
-        const label = competitionMap[row.userGender as string] || '未知比赛';
-        return <span>{label}</span>;
-      }
+      render: (row) => {
+        const label = competitionMap[row.userGender as string] || '未知比赛'
+        return <span>{label}</span>
+      },
     },
     {
       key: 'userPhone',
@@ -89,13 +89,13 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
       title: '状态',
       align: 'center',
       width: 100,
-      render: row => {
+      render: (row) => {
         if (row.status === null) {
-          return null;
+          return null
         }
-        const label = statusMap[row.status] || '未知';
-        return <NTag type={row.status === '1' ? 'success' : 'warning'}>{label}</NTag>;
-      }
+        const label = statusMap[row.status] || '未知'
+        return <NTag type={row.status === '1' ? 'success' : 'warning'}>{label}</NTag>
+      },
     },
     {
       key: 'operate',
@@ -126,14 +126,14 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
                 <NButton type="error" ghost size="small">
                   删除
                 </NButton>
-              )
+              ),
             }}
           </NPopconfirm>
         </div>
-      )
-    }
-  ]
-});
+      ),
+    },
+  ],
+})
 
 const {
   drawerVisible,
@@ -143,26 +143,21 @@ const {
   handleEdit,
   checkedRowKeys,
   onBatchDeleted,
-  onDeleted
+  onDeleted,
   // closeDrawer
-} = useTableOperate(data, 'id', getData);
+} = useTableOperate(data, 'id', getData)
 
 async function handleBatchDelete() {
   // request
-  console.log(checkedRowKeys.value);
-
-  onBatchDeleted();
+  onBatchDeleted()
 }
 
 function handleDelete(id: number) {
-  // request
-  console.log(id);
-
-  onDeleted();
+  onDeleted(id)
 }
 
 function edit(id: number) {
-  handleEdit(id);
+  handleEdit(id)
 }
 </script>
 
@@ -171,14 +166,20 @@ function edit(id: number) {
     <TemplateSearch v-model:model="searchParams" @search="getDataByPage" />
     <NCard :title="templateTitle" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
       <template #header-extra>
-        <TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading" @add="handleAdd" @delete="handleBatchDelete" @refresh="getData" />
+        <TableHeaderOperation
+          v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading" @add="handleAdd" @delete="handleBatchDelete" @refresh="getData"
+        />
       </template>
-      <NDataTable v-model:checked-row-keys="checkedRowKeys" :columns="columns" :data="data" size="small" striped
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys" :columns="columns" :data="data" size="small" striped
         :flex-height="!appStore.isMobile" :scroll-x="962" :loading="loading" remote :row-key="row => row.id"
-        :pagination="mobilePagination" class="sm:h-full" />
-      <TemplateOperateDrawer v-model:visible="drawerVisible" :operate-type="operateType" :row-data="editingData"
-        @submitted="getDataByPage" />
+        :pagination="mobilePagination" class="sm:h-full"
+      />
+      <TemplateOperateDrawer
+        v-model:visible="drawerVisible" :operate-type="operateType" :row-data="editingData"
+        @submitted="getDataByPage"
+      />
     </NCard>
   </div>
 </template>
diff --git a/apps/admin/src/views/template/modules/template-operate-drawer.vue b/apps/admin/src/views/template/modules/template-operate-drawer.vue
index 8e8357d..ddc5159 100644
--- a/apps/admin/src/views/template/modules/template-operate-drawer.vue
+++ b/apps/admin/src/views/template/modules/template-operate-drawer.vue
@@ -1,47 +1,47 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { jsonClone } from '@sa/utils';
-import { enableStatusOptions } from '@/constants/business';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { jsonClone } from '@sa/utils'
+import { computed, ref, watch } from 'vue'
+import { enableStatusOptions } from '@/constants/business'
+import { useFormRules, useNaiveForm } from '@/hooks/common/form'
 
 defineOptions({
-  name: 'TemplateOperateDrawer'
-});
+  name: 'TemplateOperateDrawer',
+})
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emits>()
 
 interface Props {
-  operateType: NaiveUI.TableOperateType;
-  rowData?: Api.SystemManage.User | null;
+  operateType: NaiveUI.TableOperateType
+  rowData?: Api.SystemManage.User | null
 }
 
-const props = defineProps<Props>();
-
 interface Emits {
-  (e: 'submitted'): void;
+  (e: 'submitted'): void
 }
 
-const emit = defineEmits<Emits>();
-
 const visible = defineModel<boolean>('visible', {
-  default: false
-});
+  default: false,
+})
 
-const { formRef, validate, restoreValidation } = useNaiveForm();
-const { defaultRequiredRule } = useFormRules();
+const { formRef, validate, restoreValidation } = useNaiveForm()
+const { defaultRequiredRule } = useFormRules()
 
 const title = computed(() => {
   const titles: Record<NaiveUI.TableOperateType, string> = {
     add: '新增模板',
-    edit: '编辑模板'
-  };
-  return titles[props.operateType];
-});
+    edit: '编辑模板',
+  }
+  return titles[props.operateType]
+})
 
 type Model = Pick<
   Api.SystemManage.User,
   'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
->;
+>
 
-const model = ref(createDefaultModel());
+const model = ref(createDefaultModel())
 
 function createDefaultModel(): Model {
   return {
@@ -51,53 +51,53 @@ function createDefaultModel(): Model {
     userPhone: '',
     userEmail: '',
     userRoles: [],
-    status: null
-  };
+    status: null,
+  }
 }
 
-type RuleKey = Extract<keyof Model, 'userName' | 'status'>;
+type RuleKey = Extract<keyof Model, 'userName' | 'status'>
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
   userName: defaultRequiredRule,
-  status: defaultRequiredRule
-};
+  status: defaultRequiredRule,
+}
 
 function handleInitModel() {
-  model.value = createDefaultModel();
+  model.value = createDefaultModel()
 
   if (props.operateType === 'edit' && props.rowData) {
-    Object.assign(model.value, jsonClone(props.rowData));
+    Object.assign(model.value, jsonClone(props.rowData))
   }
 }
 
 function closeDrawer() {
-  visible.value = false;
+  visible.value = false
 }
 
 async function handleSubmit() {
-  await validate();
+  await validate()
   // request
-  window.$message?.success('更新成功');
-  closeDrawer();
-  emit('submitted');
+  window.$message?.success('更新成功')
+  closeDrawer()
+  emit('submitted')
 }
 
 watch(visible, () => {
   if (visible.value) {
-    handleInitModel();
-    restoreValidation();
+    handleInitModel()
+    restoreValidation()
   }
-});
+})
 
 const competitionOptions = [
   { label: '第九届阅读之星大赛', value: '1' },
-  { label: '科普阅读大赛', value: '2' }
-];
+  { label: '科普阅读大赛', value: '2' },
+]
 
 const sizeOptions = [
   { label: '210mmx297mm', value: '1' },
-  { label: 'A3', value: '2' }
-];
+  { label: 'A3', value: '2' },
+]
 </script>
 
 <template>
@@ -132,8 +132,12 @@ const sizeOptions = [
       </NForm>
       <template #footer>
         <NSpace :size="16">
-          <NButton @click="closeDrawer">取消</NButton>
-          <NButton type="primary" @click="handleSubmit">确认</NButton>
+          <NButton @click="closeDrawer">
+            取消
+          </NButton>
+          <NButton type="primary" @click="handleSubmit">
+            确认
+          </NButton>
         </NSpace>
       </template>
     </NDrawerContent>
diff --git a/apps/admin/src/views/template/modules/template-search.vue b/apps/admin/src/views/template/modules/template-search.vue
index bf6e795..45dced0 100644
--- a/apps/admin/src/views/template/modules/template-search.vue
+++ b/apps/admin/src/views/template/modules/template-search.vue
@@ -1,59 +1,59 @@
 <script setup lang="ts">
-import { computed, toRaw } from 'vue';
-import { jsonClone } from '@sa/utils';
-import { enableStatusOptions } from '@/constants/business';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { jsonClone } from '@sa/utils'
+import { computed, toRaw } from 'vue'
+import { enableStatusOptions } from '@/constants/business'
+import { useFormRules, useNaiveForm } from '@/hooks/common/form'
 
 defineOptions({
-  name: 'TemplateSearch'
-});
+  name: 'TemplateSearch',
+})
+
+const emit = defineEmits<Emits>()
 
 interface Emits {
-  (e: 'search'): void;
+  (e: 'search'): void
 }
 
-const emit = defineEmits<Emits>();
+const { formRef, validate, restoreValidation } = useNaiveForm()
 
-const { formRef, validate, restoreValidation } = useNaiveForm();
+const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true })
 
-const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });
-
-type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>;
+type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>
 
 const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
-  const { patternRules } = useFormRules();
+  const { patternRules } = useFormRules()
 
   return {
     userEmail: patternRules.email,
-    userPhone: patternRules.phone
-  };
-});
+    userPhone: patternRules.phone,
+  }
+})
 
-const defaultModel = jsonClone(toRaw(model.value));
+const defaultModel = jsonClone(toRaw(model.value))
 
 function resetModel() {
-  Object.assign(model.value, defaultModel);
+  Object.assign(model.value, defaultModel)
 }
 
 async function reset() {
-  await restoreValidation();
-  resetModel();
+  await restoreValidation()
+  resetModel()
 }
 
 async function search() {
-  await validate();
-  emit('search');
+  await validate()
+  emit('search')
 }
 
 const competitionOptions = [
   { label: '第九届阅读之星大赛', value: '1' },
-  { label: '科普阅读大赛', value: '2' }
-];
+  { label: '科普阅读大赛', value: '2' },
+]
 
 const sizeOptions = [
   { label: '210mmx297mm', value: '1' },
-  { label: 'A3', value: '2' }
-];
+  { label: 'A3', value: '2' },
+]
 </script>
 
 <template>
@@ -66,8 +66,10 @@ const sizeOptions = [
               <NInput v-model:value="model.userName" placeholder="请输入名称" />
             </NFormItemGi>
             <NFormItemGi span="24 s:12 m:6" label="关联比赛" path="userGender" class="pr-24px">
-              <NSelect v-model:value="model.userGender" placeholder="请选择" :options="competitionOptions as any"
-                clearable />
+              <NSelect
+                v-model:value="model.userGender" placeholder="请选择" :options="competitionOptions as any"
+                clearable
+              />
             </NFormItemGi>
             <NFormItemGi span="24 s:12 m:6" label="状态" path="userStatus" class="pr-24px">
               <NSelect v-model:value="model.status" placeholder="请选择" :options="enableStatusOptions as any" clearable />