diff --git a/.env.development b/.env.development
index 1a5d46b..4e87e58 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 # 后台服务地址
-VITE_HTTP_PROXY_TARGET=http://192.168.2.124:10086
+VITE_HTTP_PROXY_TARGET=http://localhost:10086
 VITE_WS_PROXY_TARGET=ws://localhost:10086
diff --git a/src/common/router/index.ts b/src/common/router/index.ts
index 09998c5..53e088b 100644
--- a/src/common/router/index.ts
+++ b/src/common/router/index.ts
@@ -110,6 +110,8 @@ export function reloadRouter() {
   routNames.push('user')
   routNames.push('role')
   routNames.push('dict')
+  routNames.push('db-table')
+  routNames.push('tpl')
 
   if (Colls.isEmpty(routNames)) {
     return false
diff --git a/src/common/utils/http-util.ts b/src/common/utils/http-util.ts
index ee71793..bf4c3f1 100644
--- a/src/common/utils/http-util.ts
+++ b/src/common/utils/http-util.ts
@@ -140,13 +140,14 @@ export function get<T = any>(url: string, params?: any, disposeErr: boolean = tr
  *
  * @param url 请求地址
  * @param body Body 参数
+ * @param params 参数
  * @param disposeErr 是否处理错误响应，默认-->true
  */
-export function post<T>(url: string, body?: any, disposeErr: boolean = true) {
+export function post<T>(url: string, body?: any, params?: any, disposeErr: boolean = true) {
   if (closeUrls.includes(url)) {
     return Promise.reject({code: 0, success: true, msg: '', message: '', data: null} as R<T>)
   }
-  return httpUtil.post<R<T>>(url, body, {responseType: 'json'})
+  return httpUtil.post<R<T>>(url, body, {responseType: 'json', params})
     .then(({data}) => data)
     .catch(res => {
       if (disposeErr) errHandler(res)
@@ -224,8 +225,8 @@ function getFileName(contentDisposition: string) {
   return decodeURIComponent(fileNameWithoutQuotes)
 }
 
-export function download(url: string, params?: any, defaultName: string = '下载的文件', disposeErr: boolean = true) {
-  return httpUtil.get(url, {params, paramsSerializer, responseType: 'arraybuffer'})
+export function download(url: string, data?: any, params?: any, defaultName: string = '下载的文件', disposeErr: boolean = true) {
+  return httpUtil.post(url, data, {params, paramsSerializer, responseType: 'arraybuffer'})
     .then(res => {
       const data = res.data
       if (!data || data.byteLength <= 0) {
diff --git a/src/dts/components.d.ts b/src/dts/components.d.ts
index a822845..23ff205 100644
--- a/src/dts/components.d.ts
+++ b/src/dts/components.d.ts
@@ -5,7 +5,6 @@
 // ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import { GlobalComponents } from 'vue'
 
 export {}
 
@@ -47,6 +46,7 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTabsPane: typeof import('element-plus/es')['ElTabsPane']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTransfer: typeof import('element-plus/es')['ElTransfer']
@@ -97,6 +97,7 @@ declare global {
   const ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
   const ElTabPane: typeof import('element-plus/es')['ElTabPane']
   const ElTabs: typeof import('element-plus/es')['ElTabs']
+  const ElTabsPane: typeof import('element-plus/es')['ElTabsPane']
   const ElTag: typeof import('element-plus/es')['ElTag']
   const ElTooltip: typeof import('element-plus/es')['ElTooltip']
   const ElTransfer: typeof import('element-plus/es')['ElTransfer']
@@ -104,4 +105,4 @@ declare global {
   const ElUpload: typeof import('element-plus/es')['ElUpload']
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']
-}
\ No newline at end of file
+}
diff --git a/src/pages/sys/dict/DictForm.vue b/src/pages/sys/dict/DictForm.vue
index 00b5557..09225f4 100644
--- a/src/pages/sys/dict/DictForm.vue
+++ b/src/pages/sys/dict/DictForm.vue
@@ -2,6 +2,7 @@
   <ElDialog v-model="showDialog"
     :close-on-click-modal="false"
     destroy-on-close
+    @close="dialogCloseHandler"
     width="25vw">
     <ElForm :model="dictFormData"
       class="sys_dict-form"
@@ -40,13 +41,17 @@ const emits = defineEmits([ 'editSucc' ])
 const showDialog = ref(false)
 const submiting = ref(false)
 const status = ref<'add' | 'view' | 'modify'>('add')
-const dictFormData = reactive<DictTypes.SearchDictResult>({})
+const dictFormData = ref<DictTypes.SearchDictResult>({})
+
+function dialogCloseHandler() {
+  dictFormData.value = {}
+}
 
 function submitHandler() {
   if (status.value === 'view') return
   submiting.value = true
-  if (dictFormData.id != null) {
-    DictApi.modify(dictFormData)
+  if (dictFormData.value.id != null) {
+    DictApi.modify(dictFormData.value)
       .then(() => {
         ElMessage.success('修改成功')
         emits('editSucc')
@@ -56,7 +61,7 @@ function submitHandler() {
         submiting.value = false
       })
   } else {
-    DictApi.add(dictFormData)
+    DictApi.add(dictFormData.value)
       .then(() => {
         ElMessage.success('添加成功')
         emits('editSucc')
@@ -75,11 +80,11 @@ defineExpose({
       status.value = 'modify'
       DictApi.detail(data.id!)
         .then(res => {
-          Object.assign(dictFormData, res.data)
+          dictFormData.value = res.data
         })
     } else {
       status.value = 'add'
-      Object.assign(dictFormData, {})
+      dictFormData.value = data
     }
   },
 })
diff --git a/src/pages/sys/dict/DictItemForm.vue b/src/pages/sys/dict/DictItemForm.vue
index dbd95f5..6c20333 100644
--- a/src/pages/sys/dict/DictItemForm.vue
+++ b/src/pages/sys/dict/DictItemForm.vue
@@ -2,6 +2,7 @@
   <ElDialog v-model="showDialog"
     :close-on-click-modal="false"
     destroy-on-close
+    @close="dialogCloseHandler"
     width="25vw">
     <ElForm :model="dictItemFormData"
       class="sys_dict_item-form"
@@ -48,13 +49,17 @@ const emits = defineEmits([ 'editSucc' ])
 const showDialog = ref(false)
 const submiting = ref(false)
 const status = ref<'add' | 'view' | 'modify'>('add')
-const dictItemFormData = reactive<DictItemTypes.SearchDictItemResult>({})
+const dictItemFormData = ref<DictItemTypes.SearchDictItemResult>({})
+
+function dialogCloseHandler() {
+  dictItemFormData.value = {}
+}
 
 function submitHandler() {
   if (status.value === 'view') return
   submiting.value = true
-  if (dictItemFormData.id != null) {
-    DictItemApi.modify(dictItemFormData)
+  if (dictItemFormData.value.id != null) {
+    DictItemApi.modify(dictItemFormData.value)
       .then(() => {
         ElMessage.success('修改成功')
         emits('editSucc')
@@ -64,11 +69,11 @@ function submitHandler() {
         submiting.value = false
       })
   } else {
-    if (Strings.isBlank(dictItemFormData.dictId) || Strings.isBlank(dictItemFormData.dictKey)) {
+    if (Strings.isBlank(dictItemFormData.value.dictId) || Strings.isBlank(dictItemFormData.value.dictKey)) {
       ElMessage.error('未指定字典')
       return
     }
-    DictItemApi.add(dictItemFormData)
+    DictItemApi.add(dictItemFormData.value)
       .then(() => {
         ElMessage.success('添加成功')
         emits('editSucc')
@@ -87,11 +92,11 @@ defineExpose({
       status.value = 'modify'
       DictItemApi.detail(data.id!)
         .then(res => {
-          Object.assign(dictItemFormData, res.data)
+          dictItemFormData.value = res.data
         })
     } else {
       status.value = 'add'
-      Object.assign(dictItemFormData, data)
+      dictItemFormData.value = data
     }
   },
 })
diff --git a/src/pages/sys/gen/db-table/CodePreview.vue b/src/pages/sys/gen/db-table/CodePreview.vue
new file mode 100644
index 0000000..eaedcf2
--- /dev/null
+++ b/src/pages/sys/gen/db-table/CodePreview.vue
@@ -0,0 +1,204 @@
+<template>
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close
+    width="50vw"
+    @close="dialogCloseHandler"
+  >
+    <div class="content">
+      <ElForm :model="formData"
+        class="sys_user-form"
+        label-width="auto">
+        <ElFormItem label="表名称">
+          <ElTooltip
+            :content="currentTable.comment"
+            placement="top"
+          >
+            <ElInput
+              v-model="currentTable.name"
+              readonly
+            />
+          </ElTooltip>
+        </ElFormItem>
+        <ElFormItem label="前端/后端">
+          <ElSelect
+            v-model="formData.lang"
+            placeholder="前端/后端"
+            @change="formData.tplNames = []"
+          >
+            <ElOption
+              label="前端"
+              value="ts"/>
+            <ElOption
+              label="后端"
+              value="java"/>
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="模板">
+          <ElSelect
+            v-model="formData.tplNames"
+            collapse-tags
+            collapse-tags-tooltip
+            multiple
+            placeholder="模板"
+          >
+            <ElOption
+              v-for="item in currentTpls"
+              :key="item.id"
+              :label="item.tplName"
+              :value="item.tplName!"/>
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="表前缀">
+          <ElInput
+            v-model="formData.data.prefix"
+            placeholder=""/>
+        </ElFormItem>
+        <ElFormItem v-if="formData.lang === 'java'" label="基础包名称">
+          <ElInput
+            v-model="formData.data.basePackage"
+            placeholder=""/>
+        </ElFormItem>
+        <ElFormItem label="模块名称">
+          <ElInput
+            v-model="formData.data.moduleName"
+            placeholder=""/>
+        </ElFormItem>
+        <ElFormItem v-if="formData.lang === 'ts'" label="子模块">
+          <ElInput
+            v-model="formData.data.subModuleName"
+            placeholder=""/>
+        </ElFormItem>
+      </ElForm>
+      <ElDivider direction="vertical"/>
+      <ElTabs v-model="activeName">
+        <ElTabPane v-for="tab in tabsPanes" :label="tab.tplName!" :name="tab.tplName!">
+            <pre>
+              {{ codeInfo[tab.tplName!]?.content }}
+            </pre>
+        </ElTabPane>
+      </ElTabs>
+    </div>
+    <template #footer>
+      <ElButton @click="showDialog = false">关闭</ElButton>
+      <ElButton :loading="previewing" type="primary" @click="previewHandler">预览</ElButton>
+      <ElButton :loading="downloading" type="primary" @click="downloadHandler">下载</ElButton>
+    </template>
+  </ElDialog>
+</template>
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import GenApi from '@/pages/sys/gen/gen-api.ts'
+
+const activeName = ref('')
+const showDialog = ref(false)
+const downloading = ref(false)
+const previewing = ref(false)
+const codeInfo = ref<GenTypes.CodeInfo>({})
+const tpls = ref<GenTypes.TplInfo[]>([])
+const currentTpls = computed(() => {
+  return tpls.value.filter(it => it.lang === formData.value.lang)
+})
+
+const tabsPanes = computed(() => {
+  const d = currentTpls.value.filter(it => formData.value.tplNames.includes(it.tplName!))
+  if (d.length > 0) {
+    activeName.value = d[0].tplName!
+  } else {
+    activeName.value = ''
+  }
+  return d
+})
+
+const currentTable = reactive<GenTypes.TableInfo>({})
+const formData = ref<{
+  // 1-->前、2-->后
+  lang: 'java' | 'ts'
+  tplNames: string[]
+  data: {
+    prefix: string
+    basePackage: string
+    moduleName: string
+    subModuleName: string
+  }
+}>({
+  lang: 'java',
+  tplNames: [],
+  data: {
+    prefix: '',
+    basePackage: '',
+    moduleName: '',
+    subModuleName: '',
+  },
+})
+
+function dialogCloseHandler() {
+  formData.value = {
+    lang: 'java',
+    tplNames: [],
+    data: {
+      prefix: '',
+      basePackage: '',
+      moduleName: '',
+      subModuleName: '',
+    },
+  }
+}
+
+function downloadHandler() {
+  downloading.value = true
+  GenApi.download(formData.value.tplNames, currentTable.name!, formData.value.data)
+    .then(() => {
+      ElMessage.success('下载成功')
+    })
+    .finally(() => {
+      downloading.value = false
+    })
+}
+
+function previewHandler() {
+  previewing.value = true
+  GenApi.preview(formData.value.tplNames, currentTable.name!, formData.value.data)
+    .then(res => {
+      codeInfo.value = res.data
+    })
+    .finally(() => {
+      previewing.value = false
+    })
+}
+
+defineExpose({
+  open(data?: GenTypes.TableInfo) {
+    Object.assign(currentTable, data)
+    showDialog.value = true
+    GenApi.list()
+      .then(res => {
+        tpls.value = res.data
+      })
+  },
+})
+</script>
+<style lang="stylus" scoped>
+.content {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+
+  & > form, & > div:nth-child(3) {
+    padding 20px
+    border 1px solid #D3D7DE
+  }
+
+  & > form {
+    width 270px;
+  }
+
+  & > div:nth-child(2) {
+    height auto
+  }
+
+  & > div:nth-child(3) {
+    flex 1
+  }
+}
+</style>
diff --git a/src/pages/sys/gen/db-table/DbTable.vue b/src/pages/sys/gen/db-table/DbTable.vue
new file mode 100644
index 0000000..8087afd
--- /dev/null
+++ b/src/pages/sys/gen/db-table/DbTable.vue
@@ -0,0 +1,144 @@
+<template>
+  <Page>
+    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
+      <ElFormItem label="表名称">
+        <ElInput
+          v-model="searchForm.tableName"
+          placeholder="表名称"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
+        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
+      </ElFormItem>
+    </ElForm>
+    <div class="tool-bar">
+      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
+    </div>
+    <ElTable v-loading="searching" :data="tableData"
+      cell-class-name="table-cell"
+      class="table-list"
+      empty-text="暂无数据"
+      header-row-class-name="table-header"
+      row-key="id">
+      <ElTableColumn label="表名称" prop="name"/>
+      <ElTableColumn label="备注" prop="comment"/>
+      <ElTableColumn label="操作" width="180">
+        <template #default="scope">
+          <div class="action-btn">
+            <ElButton text type="primary" @click="previewHandler(scope)">预览</ElButton>
+          </div>
+        </template>
+      </ElTableColumn>
+    </ElTable>
+    <CodePreview ref="codePreview"/>
+  </Page>
+</template>
+<script lang="ts" setup>
+import Page from '@/components/page/Page.vue'
+import { elIcons } from '@/common/element/element.ts'
+import CodePreview from '@/pages/sys/gen/db-table/CodePreview.vue'
+import GenApi from '@/pages/sys/gen/gen-api.ts'
+
+const tableData = ref<GenTypes.TableInfo[]>([])
+const searchForm = reactive<{
+  tableName?: string
+}>({})
+const searching = ref(false)
+const showSearchForm = ref(true)
+const codePreviewIns = useTemplateRef<InstanceType<typeof CodePreview>>('codePreview')
+
+function showDialog(data?: GenTypes.TableInfo) {
+  codePreviewIns.value?.open(data)
+}
+
+function previewHandler({row}: { row: GenTypes.TableInfo }) {
+  showDialog(row)
+}
+
+function reset() {
+  Object.assign(searchForm, {})
+  paging()
+}
+
+
+function paging() {
+  searching.value = true
+  GenApi.listTable(searchForm.tableName)
+    .then(res => {
+      tableData.value = res.data ?? []
+
+    })
+    .finally(() => {
+      searching.value = false
+    })
+}
+
+onMounted(() => {
+  paging()
+})
+</script>
+<style lang="stylus" scoped>
+.table-list {
+  flex 1;
+  width 100%
+
+  :deep(.table-header) {
+    color #454C59
+
+    th {
+      background-color #EDF1F7
+      font-weight 500
+      position relative
+
+      & > div {
+        display flex
+        gap 5px
+        align-items center
+      }
+
+      &:not(:first-child) > div::before {
+        position: absolute;
+        top: 50%;
+        left: 1px;
+        width: 1px;
+        background-color: #D3D7DE;
+        transform: translateY(-50%);
+        content: "";
+        height 50%
+      }
+    }
+  }
+
+  :deep(.table-cell) {
+    color #2F3540
+  }
+
+  .action-btn {
+    width 100%
+    display flex
+    flex-wrap wrap
+
+    & > button {
+      margin 0
+    }
+  }
+}
+
+.tool-bar {
+  display flex
+  justify-content space-between
+  margin 0 0 20px 0
+}
+
+.avatar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :deep(.el-icon) {
+    font-size 25px
+  }
+}
+</style>
diff --git a/src/pages/sys/gen/db-table/page.ts b/src/pages/sys/gen/db-table/page.ts
new file mode 100644
index 0000000..11d293a
--- /dev/null
+++ b/src/pages/sys/gen/db-table/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/sys/gen/db-table/DbTable.vue'),
+} as RouterTypes.RouteConfig
diff --git a/src/pages/sys/gen/gen-api.ts b/src/pages/sys/gen/gen-api.ts
new file mode 100644
index 0000000..4a55d2a
--- /dev/null
+++ b/src/pages/sys/gen/gen-api.ts
@@ -0,0 +1,39 @@
+import {
+  download,
+  get,
+  post,
+} from '@/common/utils/http-util.ts'
+
+export default {
+  listTable(tableName?: string) {
+    return get<GenTypes.TableInfo[]>('/tpl/list_table', {tableName})
+  },
+  list() {
+    return get<GenTypes.TplInfo[]>('/tpl/list')
+  },
+  preview(tplNames: string[], tableName: string, data: Record<string, any>) {
+    return post<GenTypes.CodeInfo>('/tpl/preview', data, {tplNames, tableName})
+  },
+  download(tplNames: string[], tableName: string, data: Record<string, any>) {
+    return download('/tpl/download', data, {tplNames, tableName})
+      .then(res => {
+        // 创建新的URL并指向File对象或者Blob对象的地址
+        const blobURL = window.URL.createObjectURL(res.data.data)
+        // 创建a标签，用于跳转至下载链接
+        const tempLink = document.createElement('a')
+        tempLink.style.display = 'none'
+        tempLink.href = blobURL
+        tempLink.setAttribute('download', decodeURI(res.data.filename))
+        // 兼容：某些浏览器不支持HTML5的download属性
+        if (typeof tempLink.download === 'undefined') {
+          tempLink.setAttribute('target', '_blank')
+        }
+        // 挂载a标签
+        document.body.appendChild(tempLink)
+        tempLink.click()
+        document.body.removeChild(tempLink)
+        // 释放blob URL地址
+        window.URL.revokeObjectURL(blobURL)
+      })
+  },
+}
diff --git a/src/pages/sys/gen/gen.d.ts b/src/pages/sys/gen/gen.d.ts
new file mode 100644
index 0000000..4a43693
--- /dev/null
+++ b/src/pages/sys/gen/gen.d.ts
@@ -0,0 +1,29 @@
+export {}
+declare global {
+  namespace GenTypes {
+    interface TableInfo {
+      name?: string
+      comment?: string
+    }
+
+    interface TplInfo {
+      id?: string
+      tplName?: string
+      lang?: string
+      tpl: {
+        content?: string
+        dir?: string
+        filename?: string
+      }
+      modelData: Record<string, any>
+    }
+
+    interface CodeInfo {
+      [key: string]: {
+        content: string
+        path: string
+      }
+    }
+  }
+
+}
diff --git a/src/pages/sys/gen/tpl/Tpl.vue b/src/pages/sys/gen/tpl/Tpl.vue
new file mode 100644
index 0000000..df3c888
--- /dev/null
+++ b/src/pages/sys/gen/tpl/Tpl.vue
@@ -0,0 +1,213 @@
+<template>
+  <Page>
+    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
+      <ElFormItem label="模板名称">
+        <ElInput
+          v-model="searchForm.tplName"
+          placeholder="模板名称"/>
+      </ElFormItem>
+      <ElFormItem label="前端/后端">
+        <ElSelect
+          v-model="searchForm.lang"
+          placeholder="前端/后端"
+          style="width: 180px"
+        >
+          <ElOption
+            label="前端"
+            value="ts"/>
+          <ElOption
+            label="后端"
+            value="java"/>
+        </ElSelect>
+      </ElFormItem>
+
+      <ElFormItem>
+        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
+        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
+      </ElFormItem>
+    </ElForm>
+    <div class="tool-bar">
+      <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
+      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
+    </div>
+    <ElTable v-loading="searching" :data="tableData"
+      cell-class-name="table-cell"
+      class="table-list"
+      empty-text="暂无数据"
+      header-row-class-name="table-header"
+      row-key="id">
+      <ElTableColumn label="模板名称" prop="tplName"/>
+
+      <ElTableColumn label="前端/后端" prop="lang">
+        <template #default="scope">
+          <span>{{ scope.row.lang === 'java' ? '后端' : '前端' }}</span>
+        </template>
+      </ElTableColumn>
+
+      <ElTableColumn label="模板内容" prop="tpl">
+        <template #default="{row}:{row:TplTypes.SearchTplResult}">
+          <span>{{ (row.tpl != null && (row.tpl?.content?.length ?? 0) > 20) ? row.tpl!.content!.substring(0, 19) + '...' : row.tpl?.content }}</span>
+        </template>
+      </ElTableColumn>
+
+      <ElTableColumn label="操作" width="180">
+        <template #default="scope">
+          <div class="action-btn">
+            <el-popconfirm
+              cancel-button-text="否"
+              cancel-button-type="primary"
+              confirm-button-text="是"
+              confirm-button-type="danger"
+              placement="top"
+              title="是否删除当前数据?"
+              width="180"
+              @confirm="delHandler(scope)">
+              <template #reference>
+                <ElButton :loading="deling" text type="danger">删除</ElButton>
+              </template>
+            </el-popconfirm>
+            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
+          </div>
+        </template>
+      </ElTableColumn>
+    </ElTable>
+    <ElPagination
+      :page-size="pagination.size"
+      :pager-count="pagination.pages"
+      :total="pagination.total"
+      class="pagination"
+      layout="prev, pager, next"
+      @change="pageChangeHandler"/>
+    <TplForm ref="tplForm" @edit-succ="paging"/>
+  </Page>
+</template>
+<script lang="ts" setup>
+import TplApi from '@/pages/sys/gen/tpl/tpl-api.ts'
+import Page from '@/components/page/Page.vue'
+import { elIcons } from '@/common/element/element.ts'
+import TplForm from '@/pages/sys/gen/tpl/TplForm.vue'
+
+const tableData = ref<TplTypes.SearchTplResult[]>([])
+const searchForm = reactive<TplTypes.SearchTplParam>({
+  current: 1,
+  size: 20,
+})
+const searching = ref(false)
+const deling = ref(false)
+const showSearchForm = ref(true)
+const tplFormIns = useTemplateRef<InstanceType<typeof TplForm>>('tplForm')
+const pagination = reactive<G.Pagination>({
+  total: 0,
+  pages: 0,
+  current: 1,
+  size: 1,
+})
+
+function pageChangeHandler(currentPage: number, pageSize: number) {
+  searchForm.current = currentPage
+  searchForm.size = pageSize
+  paging()
+}
+
+function showDialog(data?: TplTypes.SearchTplResult) {
+  tplFormIns.value?.open(data)
+}
+
+function delHandler({row}: { row: TplTypes.SearchTplResult }) {
+  deling.value = true
+  TplApi.del([ row.id! ])
+    .then(() => {
+      ElMessage.success('删除成功')
+      paging()
+    })
+    .finally(() => {
+      deling.value = false
+    })
+}
+
+function modifyHandler({row}: { row: TplTypes.SearchTplResult }) {
+  showDialog(row)
+}
+
+function addHandler() {
+  showDialog()
+}
+
+function reset() {
+  Object.assign(searchForm, {})
+  paging()
+}
+
+function paging() {
+  searching.value = true
+  TplApi.paging(searchForm)
+    .then(res => {
+      tableData.value = res.data?.records ?? []
+    })
+    .finally(() => {
+      searching.value = false
+    })
+}
+
+onMounted(() => {
+  paging()
+})
+</script>
+<style lang="stylus" scoped>
+.table-list {
+  flex 1;
+  width 100%
+
+  :deep(.table-header) {
+    color #454C59
+
+    th {
+      background-color #EDF1F7
+      font-weight 500
+      position relative
+
+      & > div {
+        display flex
+        gap 5px
+        align-items center
+      }
+
+      &:not(:first-child) > div::before {
+        position: absolute;
+        top: 50%;
+        left: 1px;
+        width: 1px;
+        background-color: #D3D7DE;
+        transform: translateY(-50%);
+        content: "";
+        height 50%
+      }
+    }
+  }
+
+  :deep(.table-cell) {
+    color #2F3540
+  }
+
+  .action-btn {
+    width 100%
+    display flex
+    flex-wrap wrap
+
+    & > button {
+      margin 0
+    }
+  }
+}
+
+.tool-bar {
+  display flex
+  justify-content space-between
+  margin 0 0 20px 0
+}
+
+.pagination {
+  justify-content: end;
+  margin: 8px;
+}
+</style>
diff --git a/src/pages/sys/gen/tpl/TplForm.vue b/src/pages/sys/gen/tpl/TplForm.vue
new file mode 100644
index 0000000..b028158
--- /dev/null
+++ b/src/pages/sys/gen/tpl/TplForm.vue
@@ -0,0 +1,126 @@
+<template>
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close
+    width="25vw"
+    @close="dialogCloseHandler">
+    <ElForm :model="tplFormData"
+      class="sys_tpl-form"
+      label-width="auto">
+      <ElFormItem label="模板名称">
+        <ElInput
+          v-model="tplFormData.tplName"
+          :disabled="status === 'view'"
+          placeholder="模板名称"/>
+      </ElFormItem>
+      <ElFormItem label="前端/后端">
+        <ElSelect
+          v-model="tplFormData.lang"
+          :disabled="status === 'view'"
+          placeholder="前端/后端"
+        >
+          <ElOption
+            label="前端"
+            value="ts"/>
+          <ElOption
+            label="后端"
+            value="java"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="模板内容">
+        <ElInput
+          v-model="tplFormData.tpl.content"
+          :disabled="status === 'view'"
+          placeholder="模板内容"
+          resize="none"
+          type="textarea"/>
+      </ElFormItem>
+
+      <ElFormItem label="文件路径">
+        <ElInput
+          v-model="tplFormData.tpl.dir"
+          :disabled="status === 'view'"
+          placeholder="文件路径"
+          resize="none"
+          type="textarea"/>
+      </ElFormItem>
+
+      <ElFormItem label="文件名称">
+        <ElInput
+          v-model="tplFormData.tpl.filename"
+          :disabled="status === 'view'"
+          placeholder="文件名称"
+          resize="none"
+          type="textarea"/>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
+      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+    </template>
+  </ElDialog>
+</template>
+<script lang="ts" setup>
+import TplApi from '@/pages/sys/gen/tpl/tpl-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import { ElMessage } from 'element-plus'
+
+const emits = defineEmits([ 'editSucc' ])
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
+const tplFormData = ref<TplTypes.SearchTplResult>({
+  tpl: {},
+})
+
+function dialogCloseHandler() {
+  tplFormData.value = {tpl: {}}
+}
+
+function submitHandler() {
+  if (status.value === 'view') return
+  submiting.value = true
+  if (tplFormData.value.id != null) {
+    TplApi.modify(tplFormData.value)
+      .then(() => {
+        ElMessage.success('修改成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  } else {
+    TplApi.add(tplFormData.value)
+      .then(() => {
+        ElMessage.success('添加成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  }
+}
+
+defineExpose({
+  open(data: TplTypes.SearchTplResult = {tpl: {}}) {
+    showDialog.value = true
+    if (!Strings.isBlank(data.id)) {
+      status.value = 'modify'
+      TplApi.detail(data.id!)
+        .then(res => {
+          tplFormData.value = res.data
+        })
+    } else {
+      status.value = 'add'
+      tplFormData.value = data
+    }
+  },
+})
+</script>
+<style lang="stylus" scoped>
+.sys_tpl-form {
+  padding 20px
+}
+</style>
diff --git a/src/pages/sys/gen/tpl/page.ts b/src/pages/sys/gen/tpl/page.ts
new file mode 100644
index 0000000..7ada030
--- /dev/null
+++ b/src/pages/sys/gen/tpl/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/sys/gen/tpl/Tpl.vue'),
+} as RouterTypes.RouteConfig
diff --git a/src/pages/sys/gen/tpl/tpl-api.ts b/src/pages/sys/gen/tpl/tpl-api.ts
new file mode 100644
index 0000000..fccf7d8
--- /dev/null
+++ b/src/pages/sys/gen/tpl/tpl-api.ts
@@ -0,0 +1,22 @@
+import {
+  get,
+  post,
+} from '@/common/utils/http-util.ts'
+
+export default {
+  paging(data: TplTypes.SearchTplParam) {
+    return get<G.PageResult<TplTypes.SearchTplResult>>('/tpl/paging', data)
+  },
+  detail(id: string) {
+    return get<TplTypes.SearchTplResult>('/tpl/detail', {id})
+  },
+  add(data: TplTypes.AddTplParam) {
+    return post('/tpl/add', data)
+  },
+  modify(data: TplTypes.ModifyTplParam) {
+    return post('/tpl/modify', data)
+  },
+  del(ids: string[]) {
+    return post('/tpl/del', ids)
+  },
+}
diff --git a/src/pages/sys/gen/tpl/tpl.d.ts b/src/pages/sys/gen/tpl/tpl.d.ts
new file mode 100644
index 0000000..657b874
--- /dev/null
+++ b/src/pages/sys/gen/tpl/tpl.d.ts
@@ -0,0 +1,64 @@
+export {}
+declare global {
+  namespace TplTypes {
+    interface SearchTplParam extends G.PageParam {
+      // Id
+      id?: string
+      // 模板名称
+      tplName?: string
+      // 语言
+      lang?: string
+      // 模板内容
+      tpl: {
+        content?: string
+        dir?: string
+        filename?: string
+      }
+    }
+
+    interface SearchTplResult {
+      // Id
+      id?: string
+      // 模板名称
+      tplName?: string
+      // 语言
+      lang?: string
+      // 模板内容
+      tpl: {
+        content?: string
+        dir?: string
+        filename?: string
+      }
+    }
+
+    interface AddTplParam {
+      // Id
+      id?: string
+      // 模板名称
+      tplName?: string
+      // 语言
+      lang?: string
+      // 模板内容
+      tpl: {
+        content?: string
+        dir?: string
+        filename?: string
+      }
+    }
+
+    interface ModifyTplParam {
+      // Id
+      id?: string
+      // 模板名称
+      tplName?: string
+      // 语言
+      lang?: string
+      // 模板内容
+      tpl: {
+        content?: string
+        dir?: string
+        filename?: string
+      }
+    }
+  }
+}
diff --git a/src/pages/sys/menus/MenuForm.vue b/src/pages/sys/menus/MenuForm.vue
index b8d1577..063327e 100644
--- a/src/pages/sys/menus/MenuForm.vue
+++ b/src/pages/sys/menus/MenuForm.vue
@@ -1,164 +1,186 @@
 <template>
-  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="25vw">
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close width="25vw" @close="dialogCloseHandler">
     <ElForm :model="menuForm" class="menu-form" label-width="auto">
       <ElFormItem label="上级">
-        <ElTreeSelect v-model="menuForm.pid" :data="menuTreeDataSource" :default-expanded-keys="['0']" :disabled="status === 'view'" :render-after-expand="false" check-strictly placeholder="选择上级菜单" />
+        <ElTreeSelect v-model="menuForm.pid" :data="menuTreeDataSource" :default-expanded-keys="['0']" :disabled="status === 'view'" :render-after-expand="false" check-strictly placeholder="选择上级菜单"/>
       </ElFormItem>
       <ElFormItem label="类型">
         <ElSelect v-model="menuForm.menuCategory" :data="menuCategoryData" :disabled="status === 'view'" placeholder="选择类型">
-          <ElOption v-for="menuCategory in menuCategoryData" :key="menuCategory.key" :label="menuCategory.label" :value="menuCategory.key" />
+          <ElOption v-for="menuCategory in menuCategoryData" :key="menuCategory.key" :label="menuCategory.label" :value="menuCategory.key"/>
         </ElSelect>
       </ElFormItem>
 
       <ElFormItem label="名称">
-        <ElInput v-model="menuForm.title" :disabled="status === 'view'" placeholder="名称" />
+        <ElInput v-model="menuForm.title" :disabled="status === 'view'" placeholder="名称"/>
       </ElFormItem>
 
       <ElFormItem v-if="menuForm.menuCategory === MenuCategory.Page || menuForm.menuCategory === MenuCategory.SubPage" :disabled="status === 'view'" label="路由名称">
-        <ElInput v-model="menuForm.routeName" :min="0" placeholder="路由名称" />
+        <ElInput v-model="menuForm.routeName" :min="0" placeholder="路由名称"/>
       </ElFormItem>
       <ElFormItem v-if="menuForm.menuCategory === MenuCategory.Page || menuForm.menuCategory === MenuCategory.SubPage" :disabled="status === 'view'" label="路由地址">
-        <ElInput v-model="menuForm.routePath" :min="0" placeholder="路由地址" />
+        <ElInput v-model="menuForm.routePath" :min="0" placeholder="路由地址"/>
       </ElFormItem>
       <ElFormItem label="编码">
-        <ElInput v-model="menuForm.sn" :disabled="status === 'view'" :min="0" placeholder="编码" />
+        <ElInput v-model="menuForm.sn" :disabled="status === 'view'" :min="0" placeholder="编码"/>
       </ElFormItem>
       <ElFormItem label="图标">
         <ElDropdown closable header="图标列表" placement="bottom" style="width: 100%" trigger="click">
           <ElInput v-model="menuForm.iconName" placeholder="选择图标" :disabled="status === 'view'" readonly>
             <template #suffix>
-              <AIcon :name="menuForm.icon!" />
+              <AIcon :name="menuForm.icon!"/>
             </template>
           </ElInput>
           <template #dropdown>
             <div class="dropdown-table-wrapper">
               <ElTable ref="dropdownTable" :data="iconTableDataSource" empty-text="暂无数据" highlight-current-row style="width: 324px" @current-change="currentChangeHandler">
-                <ElTableColumn label="#" type="index" />
+                <ElTableColumn label="#" type="index"/>
                 <ElTableColumn label="图标" prop="font_class">
                   <template #default="scope">
-                    <AIcon :name="scope?.row?.font_class" />
+                    <AIcon :name="scope?.row?.font_class"/>
                   </template>
                 </ElTableColumn>
-                <ElTableColumn label="名称" prop="name" />
+                <ElTableColumn label="名称" prop="name"/>
               </ElTable>
-              <ElPagination :page-size="pagination.size" :total="pagination.total" layout="prev, pager, next" @change="pageChangeHandler" />
+              <ElPagination :page-size="pagination.size" :total="pagination.total" layout="prev, pager, next" @change="pageChangeHandler"/>
             </div>
           </template>
         </ElDropdown>
       </ElFormItem>
       <ElFormItem label="排序">
-        <ElInputNumber v-model="menuForm.sort" :disabled="status === 'view'" :min="0" placeholder="排序" style="width: 100%" />
+        <ElInputNumber v-model="menuForm.sort" :disabled="status === 'view'" :min="0" placeholder="排序" style="width: 100%"/>
       </ElFormItem>
     </ElForm>
     <template #footer>
-      <ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
       <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
     </template>
   </ElDialog>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-import { MenuCategory, MenuCategoryDict } from "@/common/app/constants.ts";
-import MenuApi from "@/pages/sys/menus/menu-api.ts";
-import Colls from "@/common/utils/colls.ts";
-import Strings from "@/common/utils/strings.ts";
-import { ElMessage, type TableInstance } from "element-plus";
-import { type IconGlyphs, icons } from "@/components/a-icon/iconfont.ts";
-import AIcon from "@/components/a-icon/AIcon.tsx";
+import { ref } from 'vue'
+import {
+  MenuCategory,
+  MenuCategoryDict,
+} from '@/common/app/constants.ts'
+import MenuApi from '@/pages/sys/menus/menu-api.ts'
+import Colls from '@/common/utils/colls.ts'
+import Strings from '@/common/utils/strings.ts'
+import {
+  ElMessage,
+  type TableInstance,
+} from 'element-plus'
+import {
+  type IconGlyphs,
+  icons,
+} from '@/components/a-icon/iconfont.ts'
+import AIcon from '@/components/a-icon/AIcon.tsx'
 
 const pagination = reactive<G.Pagination>({
   total: icons.glyphs.length,
   pages: Math.ceil(icons.glyphs.length / 5),
   current: 1,
   size: 5,
-});
+})
 
-function pageChangeHandler(currentPage: number, pageSize: number) {
-  pagination.current = currentPage;
-  pagination.size = pageSize;
-  iconTableDataSource.value = icons.glyphs.filter((_, i) => {
-    return i >= (currentPage - 1) * pageSize && i < currentPage * pageSize;
-  });
+function dialogCloseHandler() {
+  menuForm.value = {
+    icon: 'dianzixiaopiao',
+  }
 }
 
-const dropdownTableIns = useTemplateRef<TableInstance>("dropdownTable");
 
-let menuForm = reactive<MenuTypes.MenuForm>({
-  icon: "dianzixiaopiao",
-});
+function pageChangeHandler(currentPage: number, pageSize: number) {
+  pagination.current = currentPage
+  pagination.size = pageSize
+  iconTableDataSource.value = icons.glyphs.filter((_, i) => {
+    return i >= (currentPage - 1) * pageSize && i < currentPage * pageSize
+  })
+}
+
+const dropdownTableIns = useTemplateRef<TableInstance>('dropdownTable')
+
+let menuForm = ref<MenuTypes.MenuForm>({
+  icon: 'dianzixiaopiao',
+})
 
 const iconTableDataSource = ref<IconGlyphs[]>(
   icons.glyphs.filter((_, i) => {
-    return i >= 0 && i < 5;
-  })
-);
+    return i >= 0 && i < 5
+  }),
+)
 
 function currentChangeHandler(val?: IconGlyphs) {
-  console.log(val);
-  if (val == null) return;
-  menuForm.icon = val.font_class;
-  menuForm.iconName = val.name;
+  console.log(val)
+  if (val == null) return
+  menuForm.value.icon = val.font_class
+  menuForm.value.iconName = val.name
 }
 
-const showDialog = ref(false);
-const submiting = ref(false);
-const status = ref<"add" | "view" | "modify">("add");
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
 
 const menuCategoryData = computed(() => {
-  const data: { key: string; label: string }[] = [];
+  const data: { key: string; label: string }[] = []
   for (const key in MenuCategoryDict) {
     data.push({
       key,
       label: MenuCategoryDict[key as keyof typeof MenuCategoryDict],
-    });
+    })
   }
-  return data;
-});
+  return data
+})
 
-const menuTreeDataSource = ref<MenuTypes.SysMenu[]>();
+const menuTreeDataSource = ref<MenuTypes.SysMenu[]>()
 
 function submitHandler() {
-  if (status.value === "view") return;
-  submiting.value = true;
-  if (menuForm.id != null) {
-    MenuApi.modify(menuForm)
+  if (status.value === 'view') return
+  submiting.value = true
+  if (menuForm.value.id != null) {
+    MenuApi.modify(menuForm.value)
       .then(() => {
-        ElMessage.success("修改成功");
+        ElMessage.success('修改成功')
       })
       .finally(() => {
-        submiting.value = false;
-      });
+        submiting.value = false
+      })
   } else {
-    MenuApi.add(menuForm)
+    MenuApi.add(menuForm.value)
       .then(() => {
-        ElMessage.success("添加成功");
+        ElMessage.success('添加成功')
       })
       .finally(() => {
-        submiting.value = false;
-      });
+        submiting.value = false
+      })
   }
 }
 
 defineExpose({
-  open(data: MenuTypes.MenuForm = {}) {
+  open(data: MenuTypes.MenuForm = {
+    icon: 'dianzixiaopiao',
+  }) {
     if (!Strings.isBlank(data.id)) {
-      status.value = "modify";
-      Object.assign(menuForm, data);
+      status.value = 'modify'
+      menuForm.value = data
     } else {
-      menuForm = {};
+      menuForm.value = {
+        icon: 'dianzixiaopiao',
+      }
     }
-    showDialog.value = true;
-    dropdownTableIns.value?.setCurrentRow(icons.glyphs.find((it) => it.font_class === data.icon));
+    showDialog.value = true
+    dropdownTableIns.value?.setCurrentRow(icons.glyphs.find((it) => it.font_class === data.icon))
   },
-});
+})
 
 onMounted(() => {
-  MenuApi.list().then(({ data }) => {
-    const nodes = Colls.toTree(data.map((it) => ({ value: it.id, label: it.title, ...it })));
-    menuTreeDataSource.value = [{ value: "0", label: "顶级菜单", id: "0", pid: "0", children: nodes }];
-  });
-});
+  MenuApi.list().then(({data}) => {
+    const nodes = Colls.toTree(data.map((it) => ({value: it.id, label: it.title, ...it})))
+    menuTreeDataSource.value = [ {value: '0', label: '顶级菜单', id: '0', pid: '0', children: nodes} ]
+  })
+})
 </script>
 
 <style lang="stylus" scoped>
diff --git a/src/pages/sys/role/RoleForm.vue b/src/pages/sys/role/RoleForm.vue
index befea82..da21f14 100644
--- a/src/pages/sys/role/RoleForm.vue
+++ b/src/pages/sys/role/RoleForm.vue
@@ -1,6 +1,7 @@
 <template>
   <ElDialog v-model="showDialog"
     :close-on-click-modal="false"
+    @close="dialogCloseHandler"
     destroy-on-close
     width="25vw">
     <ElForm :model="roleFormData"
@@ -40,13 +41,17 @@ const emits = defineEmits([ 'editSucc' ])
 const showDialog = ref(false)
 const submiting = ref(false)
 const status = ref<'add' | 'view' | 'modify'>('add')
-const roleFormData = reactive<RoleTypes.SearchRoleResult>({})
+const roleFormData = ref<RoleTypes.SearchRoleResult>({})
+
+function dialogCloseHandler() {
+  roleFormData.value = {}
+}
 
 function submitHandler() {
   if (status.value === 'view') return
   submiting.value = true
-  if (roleFormData.id != null) {
-    RoleApi.modify(roleFormData)
+  if (roleFormData.value.id != null) {
+    RoleApi.modify(roleFormData.value)
       .then(() => {
         ElMessage.success('修改成功')
         emits('editSucc')
@@ -56,7 +61,7 @@ function submitHandler() {
         submiting.value = false
       })
   } else {
-    RoleApi.add(roleFormData)
+    RoleApi.add(roleFormData.value)
       .then(() => {
         ElMessage.success('添加成功')
         emits('editSucc')
@@ -75,11 +80,11 @@ defineExpose({
       status.value = 'modify'
       RoleApi.detail(data.id!)
         .then(res => {
-          Object.assign(roleFormData, res.data)
+          roleFormData.value = res.data
         })
     } else {
       status.value = 'add'
-      Object.assign(roleFormData, {})
+      roleFormData.value = data
     }
   },
 })
diff --git a/src/pages/sys/sn-config/SnConfigForm.vue b/src/pages/sys/sn-config/SnConfigForm.vue
index e3ec467..70fcf42 100644
--- a/src/pages/sys/sn-config/SnConfigForm.vue
+++ b/src/pages/sys/sn-config/SnConfigForm.vue
@@ -188,10 +188,6 @@ function moveDown(index: number) {
   }
 }
 
-const expandedKeys = computed(() => snConfig.config.map((_, i) => i + ''))
-
-const arrowDropdownVisible = ref(false)
-
 defineExpose({
   open(data?: SnConfigTypes.SnConfigDetail) {
     if (data == null) {
@@ -207,7 +203,8 @@ defineExpose({
 </script>
 
 <template>
-  <ElDialog v-model="visible" :title="Strings.isBlank(snConfig.id) ? '新增编码配置' : '修改编码配置'" class="config-dialog" footer-class="panel-footer" width="950px"
+  <ElDialog v-model="visible"
+    :title="Strings.isBlank(snConfig.id) ? '新增编码配置' : '修改编码配置'" class="config-dialog" footer-class="panel-footer" width="950px"
     @close="onCloseHandler">
     <div class="config-panel">
       <div class="config-title">
diff --git a/src/pages/sys/task/TaskForm.vue b/src/pages/sys/task/TaskForm.vue
index 6b12596..8fe45e6 100644
--- a/src/pages/sys/task/TaskForm.vue
+++ b/src/pages/sys/task/TaskForm.vue
@@ -1,26 +1,28 @@
 <template>
-  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="25vw">
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close width="25vw" @close="dialogCloseHandler">
     <ElForm :model="taskFormData" class="sys_task-form" label-width="auto">
       <ElFormItem label="任务名称">
-        <ElInput v-model="taskFormData.taskName" :disabled="status === 'view'" placeholder="任务名称" />
+        <ElInput v-model="taskFormData.taskName" :disabled="status === 'view'" placeholder="任务名称"/>
       </ElFormItem>
       <ElFormItem label="任务执行函数">
-        <ElInput v-model="taskFormData.fn" :disabled="status === 'view'" placeholder="任务执行函数" />
+        <ElInput v-model="taskFormData.fn" :disabled="status === 'view'" placeholder="任务执行函数"/>
       </ElFormItem>
       <ElFormItem label="日志等级">
         <el-select v-model="taskFormData.logLevel" placeholder="请选择日志等级">
-          <el-option v-for="item in logLevelList" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in logLevelList" :key="item.value" :label="item.label" :value="item.value"/>
         </el-select>
         <!-- <ElInput v-model="taskFormData.logLevel" :disabled="status === 'view'" placeholder="日志等级" /> -->
       </ElFormItem>
       <ElFormItem label="调度方式">
         <!-- <ElInput v-model="taskFormData.scheduleType" :disabled="status === 'view'" placeholder="调度方式" /> -->
         <el-select @change="taskFormData.scheduleConf = ''" v-model="taskFormData.scheduleType" placeholder="请选择调度方式">
-          <el-option v-for="item in scheduleTypeList" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in scheduleTypeList" :key="item.value" :label="item.label" :value="item.value"/>
         </el-select>
       </ElFormItem>
       <ElFormItem label="调度配置" v-if="taskFormData.scheduleType != 'Manually'">
-        <ElInput v-model="taskFormData.scheduleConf" :disabled="status === 'view'" placeholder="调度配置" />
+        <ElInput v-model="taskFormData.scheduleConf" :disabled="status === 'view'" placeholder="调度配置"/>
       </ElFormItem>
       <!-- <ElFormItem label="临界时间">
         <ElInput v-model="taskFormData.criticalTiming" :disabled="status === 'view'" placeholder="临界时间" />
@@ -31,78 +33,84 @@
           :disabled="status === 'view'"
           placeholder="是否禁用"/> -->
 
-        <el-switch v-model="taskFormData.disabled" active-text="禁用" inactive-text="启用" />
+        <el-switch v-model="taskFormData.disabled" active-text="禁用" inactive-text="启用"/>
       </ElFormItem>
 
       <ElFormItem label="备注">
-        <ElInput v-model="taskFormData.memo" :disabled="status === 'view'" placeholder="备注" />
+        <ElInput v-model="taskFormData.memo" :disabled="status === 'view'" placeholder="备注"/>
       </ElFormItem>
     </ElForm>
     <template #footer>
-      <ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
       <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
     </template>
   </ElDialog>
 </template>
 <script lang="ts" setup>
-import TaskApi from "@/pages/sys/task/task-api.ts";
-import Strings from "@/common/utils/strings.ts";
-import { ElMessage } from "element-plus";
+import TaskApi from '@/pages/sys/task/task-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import { ElMessage } from 'element-plus'
 
-const emits = defineEmits(["editSucc"]);
+const emits = defineEmits([ 'editSucc' ])
 const scheduleTypeList = [
-  { value: "Manually", label: "手动" },
-  { value: "Fixed", label: "固定周期" },
-  { value: "Cron", label: "自定义" },
-];
+  {value: 'Manually', label: '手动'},
+  {value: 'Fixed', label: '固定周期'},
+  {value: 'Cron', label: '自定义'},
+]
 const logLevelList = [
-  { value: "DEBUG", label: "调试" },
-  { value: "INFO", label: "普通" },
-  { value: "WARN", label: "警告" },
-  { value: "ERROR", label: "错误" },
-  { value: "OFF", label: "关闭" },
-];
-const showDialog = ref(false);
-const submiting = ref(false);
-const status = ref<"add" | "view" | "modify">("add");
-let taskFormData = reactive<TaskTypes.SearchTaskResult>({});
+  {value: 'DEBUG', label: '调试'},
+  {value: 'INFO', label: '普通'},
+  {value: 'WARN', label: '警告'},
+  {value: 'ERROR', label: '错误'},
+  {value: 'OFF', label: '关闭'},
+]
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
+let taskFormData = ref<TaskTypes.SearchTaskResult>({})
+
+function dialogCloseHandler() {
+  taskFormData.value = {}
+}
+
 function submitHandler() {
-  if (status.value === "view") return;
-  submiting.value = true;
-  if (taskFormData.id != null) {
-    TaskApi.modify(taskFormData)
+  if (status.value === 'view') return
+  submiting.value = true
+  if (taskFormData.value.id != null) {
+    TaskApi.modify(taskFormData.value)
       .then(() => {
-        ElMessage.success("修改成功");
-        emits("editSucc");
-        showDialog.value = false;
+        ElMessage.success('修改成功')
+        emits('editSucc')
+        showDialog.value = false
       })
       .finally(() => {
-        submiting.value = false;
-      });
+        submiting.value = false
+      })
   } else {
-    TaskApi.add(taskFormData)
+    TaskApi.add(taskFormData.value)
       .then(() => {
-        ElMessage.success("添加成功");
-        emits("editSucc");
-        showDialog.value = false;
+        ElMessage.success('添加成功')
+        emits('editSucc')
+        showDialog.value = false
       })
       .finally(() => {
-        submiting.value = false;
-      });
+        submiting.value = false
+      })
   }
 }
+
 defineExpose({
   open(data: TaskTypes.SearchTaskResult = {}) {
-    showDialog.value = true;
-    console.log(!Strings.isBlank(data.id),'dataa')
+    showDialog.value = true
+    console.log(!Strings.isBlank(data.id), 'dataa')
     if (!Strings.isBlank(data.id)) {
-      status.value = "modify";
+      status.value = 'modify'
       TaskApi.detail(data.id!).then((res) => {
-        Object.assign(taskFormData, res.data);
-      });
+        taskFormData.value = res.data
+      })
     } else {
-      status.value = "add";
-      taskFormData = reactive({});
+      status.value = 'add'
+      taskFormData.value = data
       // taskFormData = {}
       // for (const key in taskFormData) {
       //   taskFormData[key] = undefined
@@ -110,7 +118,7 @@ defineExpose({
       // }
     }
   },
-});
+})
 </script>
 <style lang="stylus" scoped>
 .sys_task-form {
diff --git a/src/pages/sys/user/BindRole.vue b/src/pages/sys/user/BindRole.vue
index 7fe2307..500772c 100644
--- a/src/pages/sys/user/BindRole.vue
+++ b/src/pages/sys/user/BindRole.vue
@@ -1,6 +1,7 @@
 <template>
   <ElDialog v-model="showDialog"
     :close-on-click-modal="false"
+    @close="dialogCloseHandler"
     destroy-on-close
     width="700">
     <ElTransfer
@@ -53,6 +54,12 @@ const allRoles = ref<RoleTypes.SearchRoleResult[]>([])
 const rightValue = ref<string[]>([])
 const currentUserId = ref<string>('')
 
+function dialogCloseHandler() {
+  currentUserId.value = ''
+  hadRoles.value = []
+  allRoles.value = []
+  rightValue.value = []
+}
 function filterMethod(query: string, item: TransferDataItem) {
   return Strings.isBlank(query) || (item as RoleTypes.SearchRoleResult).roleCode!.includes(query) || (item as RoleTypes.SearchRoleResult).roleName!.includes(query)
 }
diff --git a/src/pages/sys/user/UserForm.vue b/src/pages/sys/user/UserForm.vue
index 55aaeae..44a47d9 100644
--- a/src/pages/sys/user/UserForm.vue
+++ b/src/pages/sys/user/UserForm.vue
@@ -1,6 +1,7 @@
 <template>
   <ElDialog v-model="showDialog"
     :close-on-click-modal="false"
+    @close="dialogCloseHandler"
     destroy-on-close
     width="25vw">
     <ElForm :model="userFormData"
@@ -60,18 +61,27 @@ const emits = defineEmits([ 'editSucc' ])
 const showDialog = ref(false)
 const submiting = ref(false)
 const status = ref<'add' | 'view' | 'modify'>('add')
-const userFormData = reactive<UserTypes.SearchUserResult>({
+const userFormData = ref<UserTypes.SearchUserResult>({
   account: {
     username: '',
     secret: '',
   },
 })
 
+function dialogCloseHandler() {
+  userFormData.value = {
+    account: {
+      username: '',
+      secret: '',
+    },
+  }
+}
+
 function submitHandler() {
   if (status.value === 'view') return
   submiting.value = true
-  if (userFormData.id != null) {
-    UserApi.modify(userFormData)
+  if (userFormData.value.id != null) {
+    UserApi.modify(userFormData.value)
       .then(() => {
         ElMessage.success('修改成功')
         emits('editSucc')
@@ -81,7 +91,7 @@ function submitHandler() {
         submiting.value = false
       })
   } else {
-    UserApi.add(userFormData)
+    UserApi.add(userFormData.value)
       .then(() => {
         ElMessage.success('添加成功')
         emits('editSucc')
@@ -100,18 +110,18 @@ defineExpose({
       status.value = 'modify'
       UserApi.detail(data.id!)
         .then(res => {
-          Object.assign(userFormData, {
+          userFormData.value = {
             ...res.data, account: {},
-          })
+          }
         })
     } else {
       status.value = 'add'
-      Object.assign(userFormData, {
+      userFormData.value = {
         account: {
           username: '',
           secret: '',
         },
-      })
+      }
     }
   },
 })