diff --git a/web/src/views/login/login/index.vue b/web/src/views/login/login/index.vue
new file mode 100644
index 0000000..a6d09db
--- /dev/null
+++ b/web/src/views/login/login/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <n-tabs type="segment" justify-content="space-evenly">
+    <n-tab-pane name="account" tab="账号登录">
+      <Form @updateActiveModule="updateActiveModule" mode="account" />
+    </n-tab-pane>
+    <n-tab-pane name="mobile" tab="手机号登录">
+      <Form @updateActiveModule="updateActiveModule" mode="mobile" />
+    </n-tab-pane>
+  </n-tabs>
+</template>
+
+<script lang="ts" setup>
+  import Form from './form.vue';
+
+  const emit = defineEmits(['updateActiveModule']);
+
+  function updateActiveModule(key: string) {
+    emit('updateActiveModule', key);
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/login/register/agreement.vue b/web/src/views/login/register/agreement.vue
new file mode 100644
index 0000000..840c7b1
--- /dev/null
+++ b/web/src/views/login/register/agreement.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <n-checkbox v-model:checked="checked" class="text-12px">我已阅读并接受</n-checkbox>
+    <n-button text type="primary" @click="handleClickProtocol" class="text-12px">
+      《用户协议》
+    </n-button>
+    <n-button text type="primary" @click="handleClickPolicy" class="text-12px">
+      《隐私权政策》
+    </n-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  interface Props {
+    value?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    value: true,
+  });
+
+  interface Emits {
+    (e: 'update:value', value: boolean): void;
+    (e: 'click-protocol'): void;
+    (e: 'click-policy'): void;
+  }
+
+  const emit = defineEmits<Emits>();
+
+  const checked = computed({
+    get() {
+      return props.value;
+    },
+    set(newValue: boolean) {
+      emit('update:value', newValue);
+    },
+  });
+
+  function handleClickProtocol() {
+    emit('click-protocol');
+  }
+
+  function handleClickPolicy() {
+    emit('click-policy');
+  }
+</script>
+
+<style scoped>
+  .text-12px {
+    font-size: 12px;
+  }
+</style>
diff --git a/web/src/views/login/register/index.vue b/web/src/views/login/register/index.vue
new file mode 100644
index 0000000..f4ce11f
--- /dev/null
+++ b/web/src/views/login/register/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
+    <n-form-item path="username">
+      <n-input
+        @keyup.enter="handleSubmit"
+        v-model:value="formInline.username"
+        placeholder="请输入用户名"
+      >
+        <template #prefix>
+          <n-icon size="18" color="#808695">
+            <PersonOutline />
+          </n-icon>
+        </template>
+      </n-input>
+    </n-form-item>
+    <n-form-item path="pass">
+      <n-input
+        @keyup.enter="handleSubmit"
+        v-model:value="formInline.pass"
+        type="password"
+        placeholder="请输入密码"
+        show-password-on="click"
+      >
+        <template #prefix>
+          <n-icon size="18" color="#808695">
+            <LockClosedOutline />
+          </n-icon>
+        </template>
+      </n-input>
+    </n-form-item>
+
+    <n-form-item path="confirmPwd">
+      <n-input
+        @keyup.enter="handleSubmit"
+        v-model:value="formInline.confirmPwd"
+        type="password"
+        placeholder="再次输入密码"
+        show-password-on="click"
+      >
+        <template #prefix>
+          <n-icon size="18" color="#808695">
+            <LockClosedOutline />
+          </n-icon>
+        </template>
+      </n-input>
+    </n-form-item>
+
+    <n-form-item path="mobile">
+      <n-input
+        @keyup.enter="handleSubmit"
+        v-model:value="formInline.mobile"
+        placeholder="请输入手机号码"
+      >
+        <template #prefix>
+          <n-icon size="18" color="#808695">
+            <MobileOutlined />
+          </n-icon>
+        </template>
+      </n-input>
+    </n-form-item>
+
+    <n-form-item path="code">
+      <n-input-group>
+        <n-input
+          @keyup.enter="handleSubmit"
+          v-model:value="formInline.code"
+          placeholder="请输入验证码"
+        >
+          <template #prefix>
+            <n-icon size="18" color="#808695" :component="SafetyCertificateOutlined" />
+          </template>
+        </n-input>
+        <n-button
+          type="primary"
+          ghost
+          @click="sendMobileCode"
+          :disabled="isCounting"
+          :loading="sendLoading"
+        >
+          {{ sendLabel }}
+        </n-button>
+      </n-input-group>
+    </n-form-item>
+
+    <n-form-item path="inviteCode">
+      <n-input
+        :style="{ width: '100%' }"
+        placeholder="邀请码(选填)"
+        @keyup.enter="handleSubmit"
+        v-model:value="formInline.inviteCode"
+        :disabled="inviteCodeDisabled"
+      >
+        <template #prefix>
+          <n-icon size="18" color="#808695" :component="TagOutlined" />
+        </template>
+      </n-input>
+    </n-form-item>
+
+    <n-form-item class="default-color">
+      <Agreement
+        v-model:value="agreement"
+        @clickProtocol="handleClickProtocol"
+        @clickPolicy="handleClickPolicy"
+      />
+    </n-form-item>
+    <n-form-item>
+      <n-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>
+        注册
+      </n-button>
+    </n-form-item>
+
+    <FormOther moduleKey="login" tag="登录账号" @updateActiveModule="updateActiveModule" />
+  </n-form>
+
+  <n-modal
+    v-model:show="showModal"
+    :show-icon="false"
+    :mask-closable="false"
+    preset="dialog"
+    :closable="false"
+    :style="{
+      width: dialogWidth,
+      position: 'top',
+      bottom: '15vw',
+    }"
+  >
+    <n-space justify="center">
+      <div class="agree-title">《{{ agreeTitle }}》</div>
+    </n-space>
+
+    <div v-html="modalContent"></div>
+
+    <n-divider />
+    <n-space justify="center">
+      <n-button type="info" ghost strong @click="handleAgreement(true)">我已知晓并接受</n-button>
+      <n-button type="error" ghost strong @click="handleAgreement(false)">我拒绝</n-button>
+    </n-space>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+  import '../components/style.less';
+  import { ref, onMounted, computed } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useMessage } from 'naive-ui';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
+  import { SafetyCertificateOutlined, MobileOutlined, TagOutlined } from '@vicons/antd';
+  import { aesEcb } from '@/utils/encrypt';
+  import Agreement from './agreement.vue';
+  import FormOther from '../components/form-other.vue';
+  import { useSendCode } from '@/hooks/common';
+  import { validate } from '@/utils/validateUtil';
+  import { register, SendSms } from '@/api/system/user';
+  import { useUserStore } from '@/store/modules/user';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  interface FormState {
+    username: string;
+    pass: string;
+    confirmPwd: string;
+    mobile: string;
+    code: string;
+    inviteCode: string;
+    password: string;
+  }
+
+  const emit = defineEmits(['updateActiveModule']);
+  const formRef = ref();
+  const router = useRouter();
+  const message = useMessage();
+  const userStore = useUserStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const agreeTitle = ref('');
+  const modalContent = ref('');
+  const { sendLabel, isCounting, loading: sendLoading, activateSend } = useSendCode();
+  const agreement = ref(false);
+  const inviteCodeDisabled = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  const formInline = ref<FormState>({
+    username: '',
+    pass: '',
+    confirmPwd: '',
+    mobile: '',
+    code: '',
+    inviteCode: '',
+    password: '',
+  });
+
+  const rules = {
+    username: { required: true, message: '请输入用户名', trigger: 'blur' },
+    pass: { required: true, message: '请输入密码', trigger: 'blur' },
+    mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
+    code: { required: true, message: '请输入验证码', trigger: 'blur' },
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    formRef.value.validate(async (errors) => {
+      if (!errors) {
+        if (formInline.value.pass !== formInline.value.confirmPwd) {
+          message.info('两次输入的密码不一致，请检查');
+          return;
+        }
+
+        if (!agreement.value) {
+          message.info('请确认你已经仔细阅读并接受《用户协议》和《隐私权政策》并已勾选接受选项');
+          return;
+        }
+
+        message.loading('注册中...');
+        loading.value = true;
+
+        try {
+          const { code, message: msg } = await register({
+            username: formInline.value.username,
+            password: aesEcb.encrypt(formInline.value.pass),
+            mobile: formInline.value.mobile,
+            code: formInline.value.code,
+            inviteCode: formInline.value.inviteCode,
+          });
+          message.destroyAll();
+          if (code == ResultEnum.SUCCESS) {
+            message.success('注册成功，请登录！');
+            updateActiveModule('login');
+          } else {
+            message.info(msg || '注册失败');
+          }
+        } finally {
+          loading.value = false;
+        }
+      } else {
+        message.error('请填写完整信息，并且进行验证码校验');
+      }
+    });
+  };
+
+  onMounted(() => {
+    const inviteCode = router.currentRoute.value.query?.inviteCode as string;
+    if (inviteCode) {
+      inviteCodeDisabled.value = true;
+      formInline.value.inviteCode = inviteCode;
+    }
+  });
+
+  function updateActiveModule(key: string) {
+    emit('updateActiveModule', key);
+  }
+
+  function sendMobileCode() {
+    validate.phone(rules.mobile, formInline.value.mobile, function (error?: Error) {
+      if (error === undefined) {
+        activateSend(SendSms({ mobile: formInline.value.mobile, event: 'register' }));
+        return;
+      }
+      message.error(error.message);
+    });
+  }
+
+  function handleClickProtocol() {
+    showModal.value = true;
+    agreeTitle.value = '用户协议';
+    modalContent.value = userStore.loginConfig?.loginProtocol as string;
+  }
+
+  function handleClickPolicy() {
+    showModal.value = true;
+    agreeTitle.value = '隐私权政策';
+    modalContent.value = userStore.loginConfig?.loginPolicy as string;
+  }
+
+  function handleAgreement(agree: boolean) {
+    showModal.value = false;
+    agreement.value = agree;
+  }
+</script>
+
+<style lang="less" scoped>
+  .agree-title {
+    font-size: 18px;
+    margin-bottom: 22px;
+  }
+</style>
diff --git a/web/src/views/monitor/netconn/columns.ts b/web/src/views/monitor/netconn/columns.ts
new file mode 100644
index 0000000..74c254c
--- /dev/null
+++ b/web/src/views/monitor/netconn/columns.ts
@@ -0,0 +1,130 @@
+import { h } from 'vue';
+import { NButton, NTag } from 'naive-ui';
+import { timestampToTime, formatBefore } from '@/utils/dateUtil';
+import { renderIcon, renderOptionTag, renderTooltip } from '@/utils';
+import { HelpCircleOutline } from '@vicons/ionicons5';
+
+export const columns = [
+  {
+    title: '连接ID',
+    key: 'id',
+    width: 80,
+    render(row) {
+      return '# ' + row.id;
+    },
+  },
+  {
+    title: '连接协议',
+    key: 'proto',
+    width: 80,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'info',
+          bordered: false,
+        },
+        {
+          default: () => row.proto,
+        }
+      );
+    },
+  },
+  {
+    title: '服务端口',
+    key: 'port',
+    width: 80,
+    render(row) {
+      return row.port;
+    },
+  },
+  {
+    title: '应用名称',
+    key: 'name',
+    width: 100,
+    render: (rows, _) => {
+      return rows.name;
+    },
+  },
+  {
+    title: '登录地址',
+    key: 'addr',
+    width: 150,
+  },
+  {
+    title(_column) {
+      return renderTooltip(
+        h(
+          NButton,
+          {
+            strong: true,
+            size: 'small',
+            text: true,
+            iconPlacement: 'right',
+          },
+          { default: () => '认证状态', icon: renderIcon(HelpCircleOutline) }
+        ),
+        '成功连接到服务端口并通过登录许可认证的客户端连接会显示为 `已认证` 状态'
+      );
+    },
+    key: 'isAuth',
+    width: 80,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.isAuth ? 'success' : 'warning',
+          bordered: false,
+        },
+        {
+          default: () => (row.isAuth ? '已认证' : '未认证'),
+        }
+      );
+    },
+  },
+  {
+    title: '授权分组',
+    key: 'group',
+    width: 100,
+    render(row) {
+      return renderOptionTag('ServerLicenseGroupOptions', row.group);
+    },
+  },
+  {
+    title: '授权许可',
+    key: 'name',
+    render(row) {
+      return h('p', { id: 'app' }, [
+        h('div', {
+          innerHTML: '<div><p>名称：' + row.licenseName + '</p></div>',
+        }),
+        h('div', {
+          innerHTML: '<div><p>APPID：' + row.appId + '</p></div>',
+        }),
+      ]);
+    },
+    width: 180,
+  },
+  {
+    title: '心跳',
+    key: 'heartbeatTime',
+    width: 100,
+    render: (rows, _) => {
+      return formatBefore(new Date(rows.heartbeatTime * 1000));
+    },
+  },
+  {
+    title: '登录时间',
+    key: 'firstTime',
+    width: 150,
+    render: (rows, _) => {
+      return timestampToTime(rows.firstTime);
+    },
+  },
+];
diff --git a/web/src/views/monitor/netconn/index.vue b/web/src/views/monitor/netconn/index.vue
new file mode 100644
index 0000000..0dd0130
--- /dev/null
+++ b/web/src/views/monitor/netconn/index.vue
@@ -0,0 +1,224 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="在线服务">
+        在这里，您可以方便地查看、维护和管理系统中的在线服务和授权许可证
+      </n-card>
+    </div>
+
+    <n-card :bordered="false" class="proCard">
+      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button type="info" @click="openGroupModal">
+            <template #icon>
+              <n-icon>
+                <TrademarkOutlined />
+              </n-icon>
+            </template>
+            许可证列表
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+
+    <GroupModal ref="GroupModalRef" />
+
+    <Edit
+      @reload-table="reloadTable"
+      @update-show-modal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formEditParams"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { NetOnlineList, NetOffline } from '@/api/monitor/monitor';
+  import { columns } from './columns';
+  import { TrademarkOutlined } from '@vicons/antd';
+  import GroupModal from './modal/modal.vue';
+  import Edit from '@/views/monitor/netconn/modal/edit.vue';
+  import { loadOptions, newState, State } from '@/views/monitor/netconn/modal/model';
+  import { defRangeShortcuts } from '@/utils/dateUtil';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const message = useMessage();
+  const dialog = useDialog();
+  const dict = useDictStore();
+  const showModal = ref(false);
+  const formEditParams = ref<State>(newState(null));
+  const actionRef = ref();
+  const formParams = ref({});
+
+  const actionColumn = reactive({
+    width: 180,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑许可证',
+            onClick: handleEditLicense.bind(null, record),
+            type: 'primary',
+          },
+          {
+            label: '下线',
+            onClick: handleDelete.bind(null, record),
+            type: 'error',
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '应用名称',
+      componentProps: {
+        placeholder: '请输入应用名称',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'group',
+      component: 'NSelect',
+      label: '授权分组',
+      defaultValue: null,
+      componentProps: {
+        placeholder: '请选择授权分组',
+        options: dict.getOption('ServerLicenseGroupOptions'),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'appId',
+      component: 'NInput',
+      label: 'APPID',
+      componentProps: {
+        placeholder: '请输入许可证APPID',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'addr',
+      component: 'NInput',
+      label: '登录地址',
+      componentProps: {
+        placeholder: '请输入登录地址',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'firstTime',
+      component: 'NDatePicker',
+      label: '登录时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        shortcuts: defRangeShortcuts(),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+  ];
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '确认是否要下线该服务？下线操作将中断当前连接，但服务在下线后仍可重新连接',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        NetOffline(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  const loadDataTable = async (res) => {
+    return await NetOnlineList({ ...formParams.value, ...res });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleSubmit(values: Recordable) {
+    formParams.value = values;
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    formParams.value = {};
+    reloadTable();
+  }
+
+  const GroupModalRef = ref();
+  function openGroupModal() {
+    const { openDrawer } = GroupModalRef.value;
+    openDrawer();
+  }
+
+  function handleEditLicense(record: Recordable) {
+    formEditParams.value = newState({ id: record.licenseId } as State);
+    updateShowModal(true);
+  }
+
+  function updateShowModal(value) {
+    showModal.value = value;
+  }
+
+  onMounted(async () => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/monitor/netconn/modal/edit.vue b/web/src/views/monitor/netconn/modal/edit.vue
new file mode 100644
index 0000000..3a70330
--- /dev/null
+++ b/web/src/views/monitor/netconn/modal/edit.vue
@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <n-spin :show="loading" description="请稍候...">
+      <n-modal
+        v-model:show="isShowModal"
+        :show-icon="false"
+        preset="dialog"
+        :title="params?.id > 0 ? '编辑许可证 #' + params?.id : '添加许可证'"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-alert :show-icon="false" type="info" v-if="params?.id > 0">
+          注意：如果服务在线，为了确保更新后的许可证信息生效，服务需要重新登录
+        </n-alert>
+        <n-form
+          :model="params"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="100"
+          class="py-4"
+        >
+          <n-grid x-gap="24" :cols="2">
+            <n-gi>
+              <n-form-item label="分组" path="group">
+                <n-select
+                  v-model:value="params.group"
+                  :options="dict.getOptionUnRef('ServerLicenseGroupOptions')"
+                />
+              </n-form-item>
+            </n-gi>
+            <n-gi>
+              <n-form-item label="许可名称" path="name">
+                <n-input placeholder="请输入许可名称" v-model:value="params.name" />
+              </n-form-item>
+            </n-gi>
+          </n-grid>
+
+          <n-grid x-gap="24" :cols="2">
+            <n-gi>
+              <n-form-item label="应用ID" path="appid">
+                <n-input placeholder="请输入应用ID" v-model:value="params.appid" />
+              </n-form-item>
+            </n-gi>
+            <n-gi>
+              <n-form-item label="应用秘钥" path="secretKey">
+                <n-input
+                  placeholder="请输入应用秘钥"
+                  v-model:value="params.secretKey"
+                  type="password"
+                  show-password-on="click"
+                />
+              </n-form-item>
+            </n-gi>
+          </n-grid>
+
+          <n-grid x-gap="24" :cols="2">
+            <n-gi>
+              <n-form-item label="在线限制" path="onlineLimit">
+                <n-input-number
+                  placeholder="请输入在线数量限制"
+                  v-model:value="params.onlineLimit"
+                  style="width: 100%"
+                />
+              </n-form-item>
+            </n-gi>
+            <n-gi>
+              <n-form-item label="授权有效期" path="endAt">
+                <DatePicker v-model:formValue="params.endAt" type="datetime" style="width: 100%" />
+              </n-form-item>
+            </n-gi>
+          </n-grid>
+
+          <n-form-item label="IP白名单" path="allowedIps">
+            <n-input
+              type="textarea"
+              placeholder="*代表所有，支持IP段，多个IP用,隔开。只有允许的IP才能连接到tcp服务"
+              v-model:value="params.allowedIps"
+            />
+          </n-form-item>
+
+          <n-form-item label="授权状态" path="status">
+            <n-select
+              v-model:value="params.status"
+              :options="dict.getOptionUnRef('sys_normal_disable')"
+            />
+          </n-form-item>
+
+          <n-form-item label="备注" path="remark">
+            <n-input type="textarea" placeholder="备注" v-model:value="params.remark" />
+          </n-form-item>
+        </n-form>
+        <template #action>
+          <n-space>
+            <n-button @click="closeForm">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import { Edit, View } from '@/api/serveLicense';
+  import DatePicker from '@/components/DatePicker/datePicker.vue';
+  import { rules, State, newState } from './model';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const loading = ref(false);
+  const params = ref<State>(props.formParams);
+  const dict = useDictStore();
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(params.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            isShowModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  function loadForm(value) {
+    console.log('value:' + JSON.stringify(value));
+    // 新增
+    if (value.id < 1) {
+      params.value = newState(value);
+      loading.value = false;
+      return;
+    }
+
+    loading.value = true;
+    // 编辑
+    View({ id: value.id })
+      .then((res) => {
+        params.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  watch(
+    () => props.formParams,
+    (value) => {
+      loadForm(value);
+    }
+  );
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/monitor/netconn/modal/index.vue b/web/src/views/monitor/netconn/modal/index.vue
new file mode 100644
index 0000000..3fcdaf8
--- /dev/null
+++ b/web/src/views/monitor/netconn/modal/index.vue
@@ -0,0 +1,359 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm
+        @register="register"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        :checked-row-keys="checkedIds"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button
+            type="primary"
+            @click="addTable"
+            class="min-left-space"
+            v-if="hasPermission(['/serveLicense/edit'])"
+          >
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加许可证
+          </n-button>
+          <n-button
+            type="error"
+            @click="handleBatchDelete"
+            :disabled="batchDeleteDisabled"
+            class="min-left-space"
+            v-if="hasPermission(['/serveLicense/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button
+            type="primary"
+            @click="handleExport"
+            class="min-left-space"
+            v-if="hasPermission(['/serveLicense/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit
+      @reload-table="reloadTable"
+      @update-show-modal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formParams"
+    />
+
+    <n-modal
+      v-model:show="showRoutesModal"
+      :show-icon="false"
+      preset="dialog"
+      :title="'分配路由 #' + formParams?.id"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-alert :show-icon="false" type="info">
+        如果许可证未分配任何路由，则客户端可以访问所有服务路由接口
+      </n-alert>
+      <n-form
+        :model="formParams"
+        ref="formRef"
+        label-placement="left"
+        :label-width="100"
+        class="py-4"
+      >
+        <n-transfer
+          ref="transfer"
+          v-model:value="formParams.routes"
+          virtual-scroll
+          :options="routesOptions"
+          source-filterable
+          :render-source-label="renderLabel"
+          :render-target-label="renderLabel"
+        />
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">取消</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage, NTag } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { Delete, Export, List, Status, AssignRouter } from '@/api/serveLicense';
+  import { columns, newState, loadOptions, schemas, State } from './model';
+  import { DeleteOutlined, ExportOutlined, PlusOutlined } from '@vicons/antd';
+  import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+  import { NetOption } from '@/api/monitor/monitor';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const dict = useDictStore();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const message = useMessage();
+  const searchFormRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  const showModal = ref(false);
+  const formParams = ref<State>(newState(null));
+  const showRoutesModal = ref(false);
+  const formBtnLoading = ref(false);
+  const formRef = ref<any>({});
+  const routesOptions = ref([]);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  const actionColumn = reactive({
+    width: 300,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '分配路由',
+            onClick: handleAssignRouter.bind(null, record),
+            auth: ['/serveLicense/assignRouter'],
+          },
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/serveLicense/edit'],
+          },
+          {
+            label: '禁用',
+            onClick: handleStatus.bind(null, record, 2),
+            ifShow: () => {
+              return record.status === 1;
+            },
+            auth: ['/serveLicense/status'],
+          },
+          {
+            label: '启用',
+            onClick: handleStatus.bind(null, record, 1),
+            ifShow: () => {
+              return record.status === 2;
+            },
+            auth: ['/serveLicense/status'],
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/serveLicense/delete'],
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = newState(null);
+  }
+
+  function updateShowModal(value) {
+    showModal.value = value;
+  }
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = newState(record as State);
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleBatchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          batchDeleteDisabled.value = true;
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
+      message.success('设为' + dict.getLabel('sys_normal_disable', status) + '成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        AssignRouter(formParams.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showRoutesModal.value = false;
+            reloadTable();
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    showRoutesModal.value = false;
+  }
+
+  function handleAssignRouter(record: Recordable) {
+    showRoutesModal.value = true;
+    formParams.value = newState(record as State);
+  }
+
+  function renderLabel({ option }) {
+    return h(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          margin: '6px 0',
+        },
+      },
+      {
+        default: () => [
+          h(
+            NTag,
+            {
+              style: {
+                marginRight: '6px',
+              },
+              type: option.isRPC ? 'success' : 'info',
+              bordered: false,
+            },
+            {
+              default: () => (option.isRPC ? 'RPC' : 'TCP'),
+            }
+          ),
+          h(
+            'div',
+            {
+              style: {
+                display: 'flex',
+                marginLeft: '6px',
+                alignSelf: 'center',
+              },
+            },
+            { default: () => option.label }
+          ),
+        ],
+      }
+    );
+  }
+
+  function loadRoutesOptions() {
+    NetOption().then((res) => {
+      routesOptions.value = res.routes;
+    });
+  }
+
+  onMounted(async () => {
+    loadOptions();
+    loadRoutesOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/monitor/netconn/modal/modal.vue b/web/src/views/monitor/netconn/modal/modal.vue
new file mode 100644
index 0000000..cbdd692
--- /dev/null
+++ b/web/src/views/monitor/netconn/modal/modal.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      style="width: 80%; height: 90%; min-height: 820px"
+      :show-icon="false"
+      preset="dialog"
+      :title="title"
+    >
+      <Index />
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import Index from './index.vue';
+
+  const showModal = ref(false);
+  const title = ref('许可证列表');
+
+  function openDrawer() {
+    showModal.value = true;
+  }
+
+  defineExpose({ openDrawer });
+</script>
+
+<style scoped></style>
diff --git a/web/src/views/monitor/netconn/modal/model.ts b/web/src/views/monitor/netconn/modal/model.ts
new file mode 100644
index 0000000..bab1967
--- /dev/null
+++ b/web/src/views/monitor/netconn/modal/model.ts
@@ -0,0 +1,254 @@
+import { h, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts, formatBefore } from '@/utils/dateUtil';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag } from '@/utils';
+
+const dict = useDictStore();
+
+export interface State {
+  id: number;
+  group: string;
+  name: string;
+  appid: string;
+  secretKey: string;
+  remoteAddr: string;
+  onlineLimit: number;
+  loginTimes: number;
+  lastLoginAt: string;
+  lastActiveAt: string;
+  routes: any;
+  allowedIps: string;
+  endAt: string;
+  remark: string;
+  status: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const defaultState = {
+  id: 0,
+  group: '',
+  name: '',
+  appid: '',
+  secretKey: '',
+  remoteAddr: '',
+  onlineLimit: 1,
+  loginTimes: 0,
+  lastLoginAt: '',
+  lastActiveAt: '',
+  routes: null,
+  allowedIps: '',
+  endAt: '',
+  remark: '',
+  status: 1,
+  createdAt: '',
+  updatedAt: '',
+};
+
+export function newState(state: State | null): State {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(defaultState);
+}
+
+export const rules = {
+  group: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入分组',
+  },
+  name: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入许可名称',
+  },
+  appid: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入应用ID',
+  },
+  endAt: {
+    required: true,
+    trigger: ['blur', 'input', 'focus'],
+    type: 'string',
+    message: '请输入授权结束时间',
+  },
+};
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'id',
+    component: 'NInput',
+    label: '许可ID',
+    componentProps: {
+      placeholder: '请输入许可ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'group',
+    component: 'NSelect',
+    label: '授权分组',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择授权分组',
+      options: dict.getOption('ServerLicenseGroupOptions'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '许可名称',
+    componentProps: {
+      placeholder: '请输入许可名称',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'appid',
+    component: 'NInput',
+    label: 'APPID',
+    componentProps: {
+      placeholder: '请输入APPID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态',
+      options: dict.getOption('sys_normal_disable'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'endAt',
+    component: 'NDatePicker',
+    label: '过期时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const columns = [
+  {
+    title: '许可ID',
+    key: 'id',
+    width: 100,
+  },
+  {
+    title: '授权分组',
+    key: 'group',
+    width: 100,
+    render(row) {
+      return renderOptionTag('ServerLicenseGroupOptions', row.group);
+    },
+  },
+  {
+    title: '授权许可',
+    key: 'name',
+    render(row) {
+      return h('p', { id: 'app' }, [
+        h('div', {
+          innerHTML: '<div><p>名称：' + row.name + '</p></div>',
+        }),
+        h('div', {
+          innerHTML: '<div><p>APPID：' + row.appid + '</p></div>',
+        }),
+      ]);
+    },
+    width: 180,
+  },
+  {
+    title: '在线',
+    key: 'online',
+    render(row) {
+      return row.online + ' / ' + row.onlineLimit;
+    },
+    width: 100,
+  },
+  {
+    title: '授权有效期',
+    key: 'endAt',
+    width: 150,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+    render(row) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+  {
+    title: '最后连接',
+    key: 'remoteAddr',
+    width: 150,
+  },
+  {
+    title: '最近登录 / 心跳',
+    key: 'name',
+    render(row) {
+      if (row.lastLoginAt === null) {
+        return '从未登录';
+      }
+      return (
+        formatBefore(new Date(row.lastLoginAt)) + ' / ' + formatBefore(new Date(row.lastActiveAt))
+      );
+    },
+    width: 180,
+  },
+  {
+    title: '累计登录',
+    key: 'loginTimes',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 150,
+  },
+];
+
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable', 'ServerLicenseGroupOptions']);
+}
diff --git a/web/src/views/monitor/online/columns.ts b/web/src/views/monitor/online/columns.ts
new file mode 100644
index 0000000..8b3308e
--- /dev/null
+++ b/web/src/views/monitor/online/columns.ts
@@ -0,0 +1,122 @@
+import { h } from 'vue';
+import { NAvatar, NTag } from 'naive-ui';
+import { timestampToTime, formatBefore } from '@/utils/dateUtil';
+
+export const columns = [
+  {
+    title: '会话编号',
+    key: 'id',
+    width: 280,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'info',
+          bordered: false,
+        },
+        {
+          default: () => row.id,
+        }
+      );
+    },
+  },
+  {
+    title: '登录应用',
+    key: 'app',
+    width: 80,
+    render(row) {
+      return row.app;
+    },
+  },
+  {
+    title: '用户ID',
+    key: 'userId',
+    width: 100,
+  },
+  {
+    title: '用户名',
+    key: 'username',
+    width: 100,
+  },
+  {
+    title: '头像',
+    key: 'avatar',
+    width: 80,
+    render(row) {
+      if (row.avatar !== '') {
+        return h(NAvatar, {
+          circle: true,
+          size: 'small',
+          src: row.avatar,
+        });
+      } else {
+        return h(
+          NAvatar,
+          {
+            circle: true,
+            size: 'small',
+          },
+          {
+            default: () => row.username.substring(0, 2),
+          }
+        );
+      }
+    },
+  },
+  {
+    title: '登录IP',
+    key: 'ip',
+    width: 150,
+  },
+  // {
+  //   title: 'IP地区',
+  //   key: 'region',
+  // },
+  {
+    title: '浏览器',
+    key: 'browser',
+    width: 200,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'success',
+          bordered: false,
+        },
+        {
+          default: () => row.browser,
+        }
+      );
+    },
+  },
+  {
+    title: '操作系统',
+    key: 'os',
+    width: 150,
+    render(row) {
+      return row.os;
+    },
+  },
+  {
+    title: '最后活跃',
+    key: 'heartbeatTime',
+    width: 80,
+    render: (rows, _) => {
+      return formatBefore(new Date(rows.heartbeatTime * 1000));
+    },
+  },
+  {
+    title: '登录时间',
+    key: 'firstTime',
+    width: 220,
+    render: (rows, _) => {
+      return timestampToTime(rows.firstTime);
+    },
+  },
+];
diff --git a/web/src/views/monitor/online/index.vue b/web/src/views/monitor/online/index.vue
new file mode 100644
index 0000000..c210d05
--- /dev/null
+++ b/web/src/views/monitor/online/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="在线用户">
+      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+      />
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { OnlineList, Offline } from '@/api/monitor/monitor';
+  import { columns } from './columns';
+  import { defRangeShortcuts } from '@/utils/dateUtil';
+  import { adaTableScrollX } from '@/utils/hotgo';
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'userId',
+      component: 'NInput',
+      label: '用户ID',
+      componentProps: {
+        placeholder: '请输入用户ID',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'username',
+      component: 'NInput',
+      label: '用户名',
+      componentProps: {
+        placeholder: '请输入用户名',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'ip',
+      component: 'NInput',
+      label: '登录IP',
+      componentProps: {
+        placeholder: '请输入登录IP',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'firstTime',
+      component: 'NDatePicker',
+      label: '登录时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        shortcuts: defRangeShortcuts(),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+  ];
+
+  const dialog = useDialog();
+  const message = useMessage();
+  const actionRef = ref();
+  const formParams = ref({});
+
+  const actionColumn = reactive({
+    width: 120,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '强制退出',
+            onClick: handleDelete.bind(null, record),
+            type: 'error',
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要强制退出该用户？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Offline(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  const loadDataTable = async (res) => {
+    return await OnlineList({ ...formParams.value, ...res });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleSubmit(values: Recordable) {
+    formParams.value = values;
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    formParams.value = {};
+    reloadTable();
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/monitor/serve-log/index.vue b/web/src/views/monitor/serve-log/index.vue
new file mode 100644
index 0000000..e54880c
--- /dev/null
+++ b/web/src/views/monitor/serve-log/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="服务日志">
+        在这里，开发者可以快速定位重要的运行时日志，以便更方便地排查系统异常和进行日常运维
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm
+        @register="register"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        :checked-row-keys="checkedIds"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+        size="small"
+      >
+        <template #tableTitle>
+          <n-button
+            type="error"
+            @click="handleBatchDelete"
+            :disabled="batchDeleteDisabled"
+            class="min-left-space"
+            v-if="hasPermission(['/serveLog/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button
+            type="primary"
+            @click="handleExport"
+            class="min-left-space"
+            v-if="hasPermission(['/serveLog/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+
+      <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" style="width: 920px">
+        <n-card
+          :bordered="false"
+          title="日志内容"
+          class="proCard mt-4"
+          size="small"
+          :segmented="{ content: true }"
+        >
+          <n-alert type="error" :show-icon="false">
+            {{ preview?.content }}
+          </n-alert>
+        </n-card>
+
+        <n-card
+          :bordered="false"
+          class="proCard mt-4"
+          size="small"
+          :segmented="{ content: true }"
+          title="堆栈打印"
+        >
+          <JsonViewer
+            :value="JSON.parse(preview?.stack)"
+            :expand-depth="10"
+            sort
+            style="width: 100%; min-width: 3.125rem"
+          />
+        </n-card>
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showModal = false)">关闭</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { List, Export, Delete } from '@/api/serveLog';
+  import { columns, schemas } from './model';
+  import { ExportOutlined, DeleteOutlined } from '@vicons/antd';
+  import { useRouter } from 'vue-router';
+  import { JsonViewer } from 'vue3-json-viewer';
+  import 'vue3-json-viewer/dist/vue3-json-viewer.css';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import { loadOptions } from './model';
+
+  const { hasPermission } = usePermission();
+  const router = useRouter();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const message = useMessage();
+  const searchFormRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  const showModal = ref(false);
+
+  const actionColumn = reactive({
+    width: 220,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '堆栈',
+            onClick: handleStack.bind(null, record),
+            type: 'primary',
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/serveLog/delete'],
+          },
+          {
+            label: '访问日志',
+            onClick: handleView.bind(null, record),
+            ifShow: record.sysLogId > 0,
+            type: 'default',
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  const preview = ref<Recordable>();
+  function handleStack(record: Recordable) {
+    showModal.value = true;
+    preview.value = record;
+  }
+
+  function handleView(record: Recordable) {
+    router.push({ name: 'log_view', params: { id: record.sysLogId } });
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleBatchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          batchDeleteDisabled.value = true;
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  onMounted(async () => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/monitor/serve-log/model.ts b/web/src/views/monitor/serve-log/model.ts
new file mode 100644
index 0000000..18921e5
--- /dev/null
+++ b/web/src/views/monitor/serve-log/model.ts
@@ -0,0 +1,137 @@
+import { h, ref } from 'vue';
+import { NTag, NButton } from 'naive-ui';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { format } from 'date-fns';
+import { renderIcon, renderOptionTag, renderTooltip } from '@/utils';
+import { HelpCircleOutline } from '@vicons/ionicons5';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'traceId',
+    component: 'NInput',
+    label: '链路ID',
+    componentProps: {
+      placeholder: '请输入链路ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'content',
+    component: 'NInput',
+    label: '日志内容',
+    componentProps: {
+      placeholder: '请输入日志内容关键词',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'levelFormat',
+    component: 'NSelect',
+    label: '日志级别',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择日志级别',
+      options: dict.getOption('sys_log_type'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const columns = [
+  {
+    title: '日志ID',
+    key: 'id',
+    width: 80,
+  },
+  {
+    title(_column) {
+      return renderTooltip(
+        h(
+          NButton,
+          {
+            strong: true,
+            size: 'small',
+            text: true,
+            iconPlacement: 'right',
+          },
+          { default: () => '链路ID', icon: renderIcon(HelpCircleOutline) }
+        ),
+        'hotgo默认支持链路追踪，如果是web请求产生的日志则还可以关联对应的访问日志'
+      );
+    },
+    key: 'traceId',
+    width: 280,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'default',
+          bordered: false,
+          checkable: true,
+        },
+        {
+          default: () => row.traceId,
+        }
+      );
+    },
+  },
+  {
+    title: '日志级别',
+    key: 'levelFormat',
+    render(row) {
+      return renderOptionTag('sys_log_type', row.levelFormat);
+    },
+    width: 120,
+  },
+  {
+    title: '日志内容',
+    key: 'content',
+    width: 320,
+  },
+  {
+    title: '触发时间',
+    key: 'triggerNs',
+    width: 200,
+    render(row) {
+      if (row.triggerNs <= 0) {
+        return '-';
+      }
+      return format(new Date(row.triggerNs / 1000000), 'yyyy-MM-dd HH:mm:ss.SSS');
+    },
+  },
+  {
+    title: '记录时间',
+    key: 'createdAt',
+    width: 150,
+  },
+];
+
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable', 'sys_log_type']);
+}
diff --git a/web/src/views/monitor/serve-monitor/components/DataItem.vue b/web/src/views/monitor/serve-monitor/components/DataItem.vue
new file mode 100644
index 0000000..cff9e6f
--- /dev/null
+++ b/web/src/views/monitor/serve-monitor/components/DataItem.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <n-card
+      :content-style="{ padding: '10px' }"
+      :header-style="{ padding: '5px' }"
+      :segmented="true"
+    >
+      <template #header>
+        <n-skeleton text v-if="loading" width="60%" />
+        <template v-else>
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-bold">{{ dataModel.title }}</span>
+            <n-icon style="font-size: 26px">
+              <div v-if="dataModel.iconClass === 'HardwareChip'">
+                <HardwareChip />
+              </div>
+              <div v-else-if="dataModel.iconClass === 'AppsSharp'">
+                <AppsSharp />
+              </div>
+              <div v-else-if="dataModel.iconClass === 'Analytics'">
+                <Analytics />
+              </div>
+              <div v-else-if="dataModel.iconClass === 'PieChart'">
+                <PieChart />
+              </div>
+
+              <div v-else>
+                <Bookmark />
+              </div>
+            </n-icon>
+          </div>
+        </template>
+      </template>
+      <n-skeleton text v-if="loading" :repeat="6" />
+      <template v-else>
+        <div style="height: 130px" class="flex flex-col justify-between">
+          <div class="flex flex-col justify-center">
+            <span class="text-xxl">{{ dataModel.data }}</span>
+          </div>
+          <div class="flex flex-col justify-center flex-1">
+            <slot name="extra" :extra="dataModel.extra"></slot>
+          </div>
+          <div class="divide"></div>
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-grey">{{ dataModel.bottomTitle }}</span>
+            <span class="text-sm text-grey">{{ dataModel.totalSum }}</span>
+          </div>
+        </div>
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { HardwareChip, Bookmark, AppsSharp, PieChart, Analytics } from '@vicons/ionicons5';
+
+  export default defineComponent({
+    name: 'DataItem',
+    components: {
+      Bookmark,
+      HardwareChip,
+      AppsSharp,
+      PieChart,
+      Analytics,
+    },
+    props: {
+      dataModel: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      loading: {
+        type: Boolean,
+        default: () => {
+          return false;
+        },
+      },
+    },
+    setup() {
+      return {
+        Bookmark,
+        AppsSharp,
+        PieChart,
+        HardwareChip,
+        Analytics,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .divide {
+    margin: 10px 0;
+    border-bottom: 1px solid #f5f5f5;
+  }
+</style>
diff --git a/web/src/views/monitor/serve-monitor/components/chart/FullYearSalesChart.vue b/web/src/views/monitor/serve-monitor/components/chart/FullYearSalesChart.vue
new file mode 100644
index 0000000..9bccef4
--- /dev/null
+++ b/web/src/views/monitor/serve-monitor/components/chart/FullYearSalesChart.vue
@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <n-card
+      :content-style="{ padding: '10px' }"
+      :header-style="{ padding: '10px' }"
+      :segmented="true"
+    >
+      <template #header>
+        <n-skeleton text style="width: 50%" v-if="loading" />
+        <template v-else>
+          <div class="text-sm"> 实时网卡流量（全部网卡）</div>
+        </template>
+      </template>
+
+      <div class="chart-item-container">
+        <n-skeleton text v-if="loading" :repeat="10" />
+        <template v-else>
+          <n-grid responsive="screen" cols="1 s:2 m:4 l:4 xl:4 2xl:4" x-gap="5" y-gap="5">
+            <n-grid-item class="item-wrapper">
+              <n-card
+                :bordered="false"
+                :content-style="{ padding: '10px' }"
+                :header-style="{ padding: '5px' }"
+                :segmented="true"
+              >
+                <div class="text-number">{{ last?.up }} KB</div>
+                <div class="title-text">
+                  <n-badge :value="1" dot color="rgb(58, 104, 255)" />
+                  上行
+                </div>
+              </n-card>
+            </n-grid-item>
+            <n-grid-item class="item-wrapper">
+              <n-card
+                :bordered="false"
+                :content-style="{ padding: '10px' }"
+                :header-style="{ padding: '5px' }"
+                :segmented="true"
+              >
+                <div class="text-number"> {{ last?.down ?? 0 }} KB</div>
+                <div class="title-text">
+                  <n-badge :value="1" dot color="rgb(241, 136, 136)" />
+                  下行
+                </div>
+              </n-card>
+            </n-grid-item>
+            <n-grid-item class="item-wrapper">
+              <n-card
+                :bordered="false"
+                :content-style="{ padding: '10px' }"
+                :header-style="{ padding: '5px' }"
+                :segmented="true"
+              >
+                <div class="text-number">{{ last?.bytesSent ?? 0 }}</div>
+                <div class="title-text"> 总发送</div>
+              </n-card>
+            </n-grid-item>
+            <n-grid-item class="item-wrapper">
+              <n-card
+                :bordered="false"
+                :content-style="{ padding: '10px' }"
+                :header-style="{ padding: '5px' }"
+                :segmented="true"
+              >
+                <div class="text-number">{{ last?.bytesRecv ?? 0 }}</div>
+                <div class="title-text"> 总接收</div>
+              </n-card>
+            </n-grid-item>
+          </n-grid>
+          <div ref="fullYearSalesChart" class="chart-item"></div>
+        </template>
+      </div>
+    </n-card>
+  </div>
+</template>
+<script lang="ts">
+  import useEcharts from '@/hooks/useEcharts';
+  import { defineComponent, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+  import { dispose, graphic } from 'echarts';
+  import { object } from 'vue-types';
+
+  export default defineComponent({
+    name: 'FullYearSalesChart',
+    props: {
+      dataModel: {
+        type: Array || object,
+        default: () => {
+          return {};
+        },
+      },
+      loading: {
+        type: Boolean,
+        default: () => {
+          return false;
+        },
+      },
+    },
+    setup(props) {
+      const last = ref<any>({
+        bytesSent: '0B',
+        bytesRecv: '0B',
+        down: '0',
+        up: '0',
+      });
+      const s = ref<any>([]);
+      const x = ref<any>([]);
+      const sName = ref('上行宽带');
+      const xName = ref('下行宽带');
+      const months = ref<any>([]);
+      const option = ref({
+        title: {
+          subtext: '单位：KB',
+        },
+        color: ['rgb(58,104,255)', 'rgb(241,136,136)'],
+        grid: {
+          top: '10%',
+          left: '2%',
+          right: '2%',
+          bottom: '5%',
+          containLabel: true,
+        },
+        // legend: {
+        //   data: [sName.value, xName.value],
+        // },
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: {
+          type: 'category',
+          data: months.value,
+          boundaryGap: false,
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            name: sName.value,
+            stack: '总量',
+            data: s.value,
+            smooth: true,
+            lineStyle: {
+              color: 'rgba(24, 160, 88, 0.5)',
+            },
+            label: {
+              show: true,
+              formatter(val: any) {
+                return val.data + 'KB';
+              },
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(85, 193, 250, 0.1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(156, 21, 214, 0.2)',
+                },
+              ]),
+            },
+          },
+          {
+            type: 'line',
+            showSymbol: false,
+            name: xName.value,
+            stack: '总量',
+            data: x.value,
+            smooth: true,
+            lineStyle: {
+              color: 'rgba(24, 160, 88, 0.5)',
+            },
+            label: {
+              show: true,
+              formatter(val: any) {
+                return val.data + 'KB';
+              },
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(132, 248, 187, 0.1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(51, 209, 125, 0.2)',
+                },
+              ]),
+            },
+          },
+        ],
+      });
+
+      const fullYearSalesChart = ref<HTMLDivElement | null>(null);
+      watch(props, (newVal, _oldVal) => {
+        last.value = newVal.dataModel[newVal.dataModel.length - 1];
+        if (months.value.length < 10) {
+          for (let i = 0; i < newVal.dataModel?.length; i++) {
+            const v: any = newVal.dataModel[i];
+            s.value.push(v.up);
+            x.value.push(v.down);
+            months.value.push(v.time);
+          }
+        } else {
+          s.value.shift();
+          s.value.push(last.value.up);
+
+          x.value.shift();
+          x.value.push(last.value.down);
+
+          months.value.shift();
+          months.value.push(last.value.time);
+        }
+
+        setTimeout(() => {
+          nextTick(() =>
+            useEcharts(fullYearSalesChart.value as HTMLDivElement).setOption(option.value)
+          );
+        }, 10);
+      });
+      const updateChart = () => {
+        useEcharts(fullYearSalesChart.value as HTMLDivElement).resize();
+      };
+      onBeforeUnmount(() => {
+        if (fullYearSalesChart.value !== null) {
+          dispose(fullYearSalesChart.value as HTMLDivElement);
+        }
+      });
+      return {
+        fullYearSalesChart,
+        updateChart,
+        last,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .chart-item-container {
+    width: 100%;
+
+    .chart-item {
+      height: 345px;
+    }
+  }
+
+  .light-green {
+    height: 108px;
+    background-color: rgba(0, 128, 0, 0.12);
+  }
+
+  .green {
+    height: 108px;
+    background-color: rgba(0, 128, 0, 0.24);
+  }
+</style>
diff --git a/web/src/views/monitor/serve-monitor/components/chart/LoadChart.vue b/web/src/views/monitor/serve-monitor/components/chart/LoadChart.vue
new file mode 100644
index 0000000..4652166
--- /dev/null
+++ b/web/src/views/monitor/serve-monitor/components/chart/LoadChart.vue
@@ -0,0 +1,130 @@
+<template>
+  <div ref="orderChartWrapper" style="height: 100%"></div>
+</template>
+
+<script lang="ts">
+  import useEcharts from '@/hooks/useEcharts';
+  import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import { dispose, graphic } from 'echarts';
+
+  type DataItem = {
+    time: string;
+    avg: number;
+    ratio: number;
+  };
+
+  export default defineComponent({
+    name: 'LoadChart',
+    props: {
+      dataModel: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      },
+    },
+    setup(props) {
+      const data = ref<any>([]);
+      const option = ref({
+        tooltip: {
+          trigger: 'item',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985',
+            },
+          },
+        },
+        grid: {
+          x: '-5%',
+          y: 0,
+          x2: '-5%',
+          y2: 0,
+        },
+        xAxis: {
+          type: 'category',
+          splitLine: { show: false },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            splitLine: { show: false },
+          },
+        ],
+        series: [
+          {
+            type: 'line',
+            smooth: true,
+            lineStyle: {
+              width: 0,
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(128, 255, 165)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(1, 191, 236)',
+                },
+              ]),
+            },
+            data: [],
+          },
+        ],
+      });
+
+      const orderChartWrapper = ref();
+
+      function getWrapper(): HTMLElement {
+        return orderChartWrapper.value as HTMLElement;
+      }
+
+      const init = () => {
+        // 绘制图表
+        option.value.series.forEach((item) => {
+          item.data = data.value;
+        });
+
+        handleResize();
+
+        useEcharts(getWrapper()).setOption(option.value);
+      };
+
+      // 调整图表大小
+      const handleResize = () => {
+        useEcharts(getWrapper()).resize();
+      };
+
+      onMounted(init);
+
+      onBeforeUnmount(() => {
+        dispose(getWrapper());
+      });
+
+      watch(props, (newVal) => {
+        const newValues = newVal.dataModel.map((item: DataItem) => ({
+          name: 'CPU分钟负载比率',
+          value: [item.time, item.ratio],
+        }));
+
+        data.value.push(...newValues);
+
+        // 移除超过10个的最开头元素
+        if (data.value.length > 10) {
+          const removeCount = data.value.length - 10;
+          data.value.splice(0, removeCount);
+        }
+
+        useEcharts(getWrapper()).setOption(option.value);
+      });
+
+      return {
+        orderChartWrapper,
+      };
+    },
+  });
+</script>
diff --git a/web/src/views/monitor/serve-monitor/index.vue b/web/src/views/monitor/serve-monitor/index.vue
new file mode 100644
index 0000000..9252f5c
--- /dev/null
+++ b/web/src/views/monitor/serve-monitor/index.vue
@@ -0,0 +1,270 @@
+<template>
+  <div>
+    <div class="main-container">
+      <n-spin :show="loading" description="正在从服务器查询信息...">
+        <n-grid responsive="screen" cols="1 s:2 m:4 l:4 xl:4 2xl:4" x-gap="5" y-gap="5">
+          <n-grid-item v-for="(item, index) of dataSource.head" :key="index" class="item-wrapper">
+            <DataItem :data-model="item" :loading="loading">
+              <template v-if="index === 0" #extra="{ extra }">
+                <div class="margin-top-lg">
+                  <div> {{ extra.data }}</div>
+                  <div class="margin-top-sm"> {{ extra.data1 }}</div>
+                </div>
+              </template>
+              <template v-else-if="index === 1" #extra="{ extra }">
+                <div class="margin-top" style="position: relative">
+                  <div> 已用内存：{{ extra.data }}</div>
+                  <div class="margin-top-sm"> 剩余内存：{{ extra.data1 }}</div>
+                  <div class="stack-avatar-wrapper"></div>
+                </div>
+              </template>
+              <template v-else-if="index === 2" #extra="{ extra }">
+                <n-progress type="line" :percentage="Number(extra.data)" />
+              </template>
+              <template v-else-if="index === 3" #extra>
+                <LoadChart ref="loadChartRef" :data-model="dataSource.load" />
+              </template>
+            </DataItem>
+          </n-grid-item>
+        </n-grid>
+
+        <n-grid class="mt-2">
+          <n-grid-item :span="24">
+            <FullYearSalesChart
+              ref="fullYearSalesChartRef"
+              :data-model="dataSource.net"
+              :loading="loading"
+            />
+          </n-grid-item>
+        </n-grid>
+
+        <n-space vertical style="padding-top: 10px">
+          <n-card title="服务器信息">
+            <n-descriptions
+              label-placement="top"
+              bordered
+              cols="1 s:1 m:2 l:3 xl:4 2xl:4"
+              :label-style="{ 'font-weight': 'bold', 'font-size': '16px' }"
+            >
+              <n-descriptions-item label="服务器名称">
+                {{ dataRunInfo.hostname }}
+              </n-descriptions-item>
+              <n-descriptions-item label="操作系统"> {{ dataRunInfo.os }}</n-descriptions-item>
+              <n-descriptions-item label="服务器IP">
+                {{ dataRunInfo.intranet_ip }} /
+                {{ dataRunInfo.public_ip }}
+              </n-descriptions-item>
+              <n-descriptions-item label="系统架构"> {{ dataRunInfo.arch }}</n-descriptions-item>
+            </n-descriptions>
+          </n-card>
+          <n-card title="运行信息">
+            <n-descriptions
+              label-placement="top"
+              bordered
+              cols="1 s:1 m:2 l:3 xl:4 2xl:4"
+              :label-style="{ 'font-weight': 'bold', 'font-size': '16px' }"
+            >
+              <n-descriptions-item label="Go版本"> {{ dataRunInfo.version }}</n-descriptions-item>
+
+              <n-descriptions-item label="HotGo版本">
+                {{ dataRunInfo.hgVersion }}</n-descriptions-item
+              >
+              <n-descriptions-item label="启动时间">
+                {{ dataRunInfo.startTime }}</n-descriptions-item
+              >
+              <n-descriptions-item label="运行时长">
+                {{ formatBefore(new Date(dataRunInfo.startTime)) }}
+              </n-descriptions-item>
+              <n-descriptions-item label="运行路径"> {{ dataRunInfo.pwd }}</n-descriptions-item>
+              <n-descriptions-item label="goroutine数量">
+                {{ dataRunInfo.goroutine }}
+              </n-descriptions-item>
+              <n-descriptions-item label="运行内存"> {{ dataRunInfo.goMem }}</n-descriptions-item>
+              <n-descriptions-item label="磁盘占用"> {{ dataRunInfo.goSize }}</n-descriptions-item>
+            </n-descriptions>
+          </n-card>
+        </n-space>
+      </n-spin>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import DataItem from './components/DataItem.vue';
+  import LoadChart from './components/chart/LoadChart.vue';
+  import FullYearSalesChart from './components/chart/FullYearSalesChart.vue';
+  import { defineComponent, onMounted, ref, onUnmounted } from 'vue';
+  import { SocketEnum } from '@/enums/socketEnum';
+  import { addOnMessage, removeOnMessage, sendMsg, WebSocketMessage } from '@/utils/websocket';
+  import { formatBefore } from '@/utils/dateUtil';
+  import { useDialog, useMessage } from 'naive-ui';
+
+  export default defineComponent({
+    name: 'Home',
+    components: {
+      DataItem,
+      LoadChart,
+      FullYearSalesChart,
+    },
+    setup() {
+      const timer = ref(0);
+      const dataRunInfo = ref({
+        arch: '',
+        goMem: '0MB',
+        hgVersion: '',
+        goSize: '0MB',
+        goroutine: 0,
+        hostname: '',
+        intranet_ip: '127.0.0.1',
+        os: '',
+        public_ip: '0.0.0.0',
+        pwd: '/',
+        rootPath: '/',
+        runTime: 0,
+        startTime: '',
+        version: '',
+      });
+      const dataSource = ref({
+        head: [
+          {
+            title: 'CPU',
+            data: '0%',
+            bottomTitle: 'CPU数量',
+            totalSum: '',
+            iconClass: 'HardwareChip',
+            extra: {
+              data: '',
+              data1: '',
+            },
+          },
+          {
+            title: '内存',
+            data: '0%',
+            bottomTitle: '总内存',
+            totalSum: '0GB',
+            iconClass: 'AppsSharp',
+            extra: {
+              data: '0GB',
+              data1: '0GB',
+            },
+          },
+          {
+            title: '磁盘',
+            data: '已用 0GB',
+            bottomTitle: '总容量',
+            totalSum: '0GB',
+            iconClass: 'PieChart',
+            extra: {
+              data: 0,
+            },
+          },
+          {
+            title: '负载',
+            data: '0%',
+            bottomTitle: '总进程数',
+            totalSum: '0个',
+            iconClass: 'Analytics',
+            extra: {
+              data: 80,
+            },
+          },
+        ],
+        load: {},
+        net: {},
+      });
+
+      const collapse = true;
+      const message = useMessage();
+      const dialog = useDialog();
+      const loading = ref(true);
+      const loadChartRef = ref<InstanceType<typeof LoadChart>>();
+      const fullYearSalesChartRef = ref<InstanceType<typeof FullYearSalesChart>>();
+
+      // 运行信息
+      const onMessageAdminMonitorRunInfo = (res: WebSocketMessage) => {
+        loading.value = false;
+        if (res.code == SocketEnum.CodeErr) {
+          message.error('查询出错:' + res.event);
+          return;
+        }
+
+        dataRunInfo.value = res.data;
+      };
+
+      // 服务器信息
+      const onMessageAdminMonitorTrends = (res: WebSocketMessage) => {
+        loading.value = false;
+        if (res.code == SocketEnum.CodeErr) {
+          message.error('查询出错:' + res.event);
+          return;
+        }
+        dataSource.value = res.data;
+      };
+
+      onMounted(() => {
+        addOnMessage(SocketEnum.EventAdminMonitorRunInfo, onMessageAdminMonitorRunInfo);
+        addOnMessage(SocketEnum.EventAdminMonitorTrends, onMessageAdminMonitorTrends);
+
+        loading.value = true;
+        sendMsg(SocketEnum.EventAdminMonitorTrends);
+        sendMsg(SocketEnum.EventAdminMonitorRunInfo);
+
+        timer.value = window.setInterval(function () {
+          sendMsg(SocketEnum.EventAdminMonitorTrends);
+          sendMsg(SocketEnum.EventAdminMonitorRunInfo);
+        }, 2000);
+
+        setTimeout(() => {
+          if (loading.value) {
+            loading.value = false;
+            dialog.error({
+              title: '错误',
+              content: '连接超时，请刷新重试。如仍未解决请检查websocket连接是否正确！',
+              positiveText: '确定',
+            });
+          }
+        }, 5000);
+      });
+
+      onUnmounted(() => {
+        window.clearInterval(timer.value);
+        removeOnMessage(SocketEnum.EventAdminMonitorTrends);
+        removeOnMessage(SocketEnum.EventAdminMonitorRunInfo);
+      });
+
+      return {
+        loading,
+        collapse,
+        loadChartRef,
+        fullYearSalesChartRef,
+        dataSource,
+        dataRunInfo,
+        formatBefore,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  @media screen and (max-width: 992px) {
+    .item-wrapper {
+      margin-bottom: 5px;
+    }
+
+    .map-margin-tb {
+      margin: 5px 0;
+    }
+  }
+
+  .light {
+    .chart-item {
+      background-color: #fff;
+    }
+  }
+
+  .stack-avatar-wrapper {
+    position: absolute;
+    right: -2%;
+    top: 10%;
+  }
+</style>
diff --git a/web/src/views/normalTreeDemo/edit.vue b/web/src/views/normalTreeDemo/edit.vue
new file mode 100644
index 0000000..712cc71
--- /dev/null
+++ b/web/src/views/normalTreeDemo/edit.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑普通树表 #' + formValue.id : '添加普通树表'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            ref="formRef"
+            :model="formValue"
+            :rules="rules"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
+              <n-gi span="2">
+                <n-form-item label="标题" path="title">
+                  <n-input placeholder="请输入标题" v-model:value="formValue.title" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="上级" path="pid">
+                  <n-tree-select
+                :options="treeOption"
+                v-model:value="formValue.pid"
+                key-field="id"
+                label-field="title"
+                clearable
+                filterable
+                default-expand-all
+                show-path
+              />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="测试分类" path="categoryId">
+                  <n-select v-model:value="formValue.categoryId" :options="dict.getOptionUnRef('testCategoryOption')" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="描述" path="description">
+                  <n-input placeholder="请输入描述" v-model:value="formValue.description" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="排序" path="sort">
+                  <n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="状态" path="status">
+                  <n-select v-model:value="formValue.status" :options="dict.getOptionUnRef('sys_normal_disable')" />
+                </n-form-item>
+              </n-gi>
+            </n-grid>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">
+            取消
+          </n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
+            确定
+          </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useDictStore } from '@/store/modules/dict';
+  import { Edit, View, MaxSort } from '@/api/normalTreeDemo';
+  import { State, newState, treeOption, loadTreeOption, rules } from './model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const dict = useDictStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(840);
+  });
+
+  // 提交表单
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        Edit(formValue.value)
+          .then((_res) => {
+            message.success('操作成功');
+            closeForm();
+            emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  // 关闭表单
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  // 打开模态框
+  function openModal(state: State) {
+    showModal.value = true;
+
+    // 加载关系树选项
+    loadTreeOption();
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+
+      loading.value = true;
+      MaxSort()
+        .then((res) => {
+          formValue.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+      return;
+    }
+
+    // 编辑
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
\ No newline at end of file
diff --git a/web/src/views/normalTreeDemo/index.vue b/web/src/views/normalTreeDemo/index.vue
new file mode 100644
index 0000000..c964ba4
--- /dev/null
+++ b/web/src/views/normalTreeDemo/index.vue
@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="普通树表">
+        <!--  这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm  ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+      <BasicTable  ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000" :cascade="false" :expanded-row-keys="expandedKeys" @update:expanded-row-keys="updateExpandedKeys" :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
+        <template #tableTitle>
+          <n-button type="primary"  @click="addTable" class="min-left-space" v-if="hasPermission(['/normalTreeDemo/edit'])">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加
+          </n-button>
+          <n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/normalTreeDemo/delete'])">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button type="primary" icon-placement="left" @click="handleAllExpanded" class="min-left-space">
+            全部{{ expandedKeys.length ? '收起' : '展开' }}
+            <template #icon>
+              <div class="flex items-center">
+                <n-icon size="14">
+                  <AlignLeftOutlined />
+                </n-icon>
+              </div>
+            </template>
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit ref="editRef" @reloadTable="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { useDictStore } from '@/store/modules/dict';
+  import { List, Delete } from '@/api/normalTreeDemo';
+  import { PlusOutlined, DeleteOutlined, AlignLeftOutlined } from '@vicons/antd';
+  import { columns, schemas, loadOptions, newState } from './model';
+  import { adaTableScrollX, convertListToTree } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+
+  const dict = useDictStore();
+  const dialog = useDialog();
+  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+
+  const checkedIds = ref([]);
+  const expandedKeys = ref([]);
+  const allTreeKeys = ref([]);
+
+  const actionColumn = reactive({
+    width: 216,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record: State) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/normalTreeDemo/edit'],
+          },
+          {
+            label: '添加',
+            onClick: handleAdd.bind(null, record),
+            auth: ['/normalTreeDemo/edit'],
+          },
+
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/normalTreeDemo/delete'],
+          },
+        ],
+
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  // 加载普通数表数据
+  const loadDataTable = async (res = {}) => {
+    const params = { ...(searchFormRef.value?.formModel ?? {}), ...res, pagination: false };
+    const dataSource = await List(params);
+    allTreeKeys.value = expandedKeys.value = dataSource.list.map((item) => item.id);
+    dataSource.list = convertListToTree(dataSource.list, 'id');
+    return dataSource;
+  };
+
+  // 更新选中的行
+  function handleOnCheckedRow(rowKeys) {
+    checkedIds.value = rowKeys;
+  }
+
+  // 重新加载表格数据
+  function reloadTable() {
+    actionRef.value?.reload();
+  }
+
+  // 添加数据
+  function addTable() {
+    editRef.value.openModal(null);
+  }
+
+  // 添加树节点下级数据
+  function handleAdd(record: Recordable) {
+    const state = newState(null);
+    state.pid = record.id;
+    editRef.value.openModal(state);
+  }
+
+  // 编辑数据
+  function handleEdit(record: Recordable) {
+    editRef.value.openModal(record);
+  }
+
+  // 单个删除
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 批量删除
+  function handleBatchDelete() {
+    if (checkedIds.value.length < 1){
+      message.error('请至少选择一项要删除的数据');
+      return;
+    }
+
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 收起/展开全部树节点
+  function handleAllExpanded() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = allTreeKeys.value;
+    }
+  }
+
+  // 更新展开的树节点
+  function updateExpandedKeys(openKeys: never[]) {
+    expandedKeys.value = openKeys;
+  }
+
+  onMounted(() => {
+    loadOptions();
+
+  });
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/web/src/views/normalTreeDemo/model.ts b/web/src/views/normalTreeDemo/model.ts
new file mode 100644
index 0000000..361d809
--- /dev/null
+++ b/web/src/views/normalTreeDemo/model.ts
@@ -0,0 +1,171 @@
+import { h, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { renderOptionTag, renderPopoverMemberSumma, MemberSumma } from '@/utils';
+import { TreeOption } from '@/api/normalTreeDemo';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export class State {
+  public title = ''; // 标题
+  public id = 0; // ID
+  public pid = 0; // 上级
+  public level = 1; // 关系树级别
+  public tree = ''; // 关系树
+  public categoryId = null; // 测试分类
+  public description = ''; // 描述
+  public sort = 0; // 排序
+  public status = 1; // 状态
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public updatedBy = 0; // 更新者
+  public createdAt = ''; // 创建时间
+  public updatedAt = ''; // 修改时间
+  public deletedAt = ''; // 删除时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+export const rules = {
+  title: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入标题',
+  },
+};
+
+// 表格搜索表单
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'categoryId',
+    component: 'NSelect',
+    label: '测试分类',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择测试分类',
+      options: dict.getOption('testCategoryOption'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态',
+      options: dict.getOption('sys_normal_disable'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+// 表格列
+export const columns = [
+  {
+    title: '标题',
+    key: 'title',
+    align: 'left',
+    width: 200,
+  },
+  {
+    title: '测试分类',
+    key: 'categoryId',
+    align: 'left',
+    width: 100,
+    render(row: State) {
+      return renderOptionTag('testCategoryOption', row.categoryId);
+    },
+  },
+  {
+    title: '描述',
+    key: 'description',
+    align: 'left',
+    width: 300,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    align: 'left',
+    width: 150,
+    render(row: State) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+  {
+    title: '创建者',
+    key: 'createdBy',
+    align: 'left',
+    width: 100,
+    render(row: State) {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    align: 'left',
+    width: 180,
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable', 'testCategoryOption']);
+}
+
+// 关系树选项
+export const treeOption = ref([]);
+
+// 加载关系树选项
+export function loadTreeOption() {
+  TreeOption().then((res) => {
+    treeOption.value = res;
+  });
+}
\ No newline at end of file
diff --git a/web/src/views/optionTreeDemo/edit.vue b/web/src/views/optionTreeDemo/edit.vue
new file mode 100644
index 0000000..4749d0e
--- /dev/null
+++ b/web/src/views/optionTreeDemo/edit.vue
@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑选项树表 #' + formValue.id : '添加选项树表'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            ref="formRef"
+            :model="formValue"
+            :rules="rules"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
+              <n-gi span="2">
+                <n-form-item label="标题" path="title">
+                  <n-input placeholder="请输入标题" v-model:value="formValue.title" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="上级" path="pid">
+                  <n-tree-select
+                :options="treeOption"
+                v-model:value="formValue.pid"
+                key-field="id"
+                label-field="title"
+                clearable
+                filterable
+                default-expand-all
+                show-path
+              />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="测试分类" path="categoryId">
+                  <n-select v-model:value="formValue.categoryId" :options="dict.getOptionUnRef('testCategoryOption')" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="描述" path="description">
+                  <n-input placeholder="请输入描述" v-model:value="formValue.description" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="排序" path="sort">
+                  <n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="状态" path="status">
+                  <n-select v-model:value="formValue.status" :options="dict.getOptionUnRef('sys_normal_disable')" />
+                </n-form-item>
+              </n-gi>
+            </n-grid>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">
+            取消
+          </n-button>
+          <n-button type="info" :loading="formBtnLoading" :disabled="!isFormValid" @click="confirmForm">
+            确定
+          </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useDictStore } from '@/store/modules/dict';
+  import { Edit, View, MaxSort } from '@/api/optionTreeDemo';
+  import { State, newState, treeOption, loadTreeOption, rules } from './model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const dict = useDictStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(840);
+  });
+  const isFormValid = ref(true);
+
+  // 提交表单
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        Edit(formValue.value)
+          .then((_res) => {
+            message.success('操作成功');
+            closeForm();
+            emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  // 关闭表单
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  // 打开模态框
+  function openModal(state: State) {
+    showModal.value = true;
+
+    // 加载关系树选项
+    loadTreeOption();
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+
+      loading.value = true;
+      MaxSort()
+        .then((res) => {
+          formValue.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+      return;
+    }
+
+    // 编辑
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
\ No newline at end of file
diff --git a/web/src/views/optionTreeDemo/index.vue b/web/src/views/optionTreeDemo/index.vue
new file mode 100644
index 0000000..c87322a
--- /dev/null
+++ b/web/src/views/optionTreeDemo/index.vue
@@ -0,0 +1,319 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="选项树表">
+        <!--  这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
+      </n-card>
+    </div>
+    <n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12">
+      <n-gi span="1">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-button type="info" icon-placement="left" @click="addTable" v-if="hasPermission(['/optionTreeDemo/edit'])">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <PlusOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                添加
+              </n-button>
+              <n-button v-if="hasPermission(['/optionTreeDemo/edit'])" type="info" icon-placement="left" @click="handleEdit(selectedState)" :disabled="selectedState.id < 1">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <EditOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                编辑
+              </n-button>
+              <n-button v-if="hasPermission(['/optionTreeDemo/delete'])" type="error" icon-placement="left" @click="handleDelete(selectedState)" :disabled="selectedState.id < 1">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <DeleteOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                删除
+              </n-button>
+              <n-button type="info" icon-placement="left" @click="handleAllExpanded">
+                {{ expandedKeys.length ? '收起' : '展开' }}
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <AlignLeftOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+              </n-button>
+            </n-space>
+          </template>
+          <div class="w-full menu">
+            <n-input v-model:value="pattern" placeholder="输入名称搜索">
+              <template #suffix>
+                <n-icon size="18" class="cursor-pointer">
+                  <SearchOutlined />
+                </n-icon>
+              </template>
+            </n-input>
+            <div class="py-3 menu-list">
+              <template v-if="loading">
+                <div class="flex items-center justify-center py-4">
+                  <n-spin size="medium" />
+                </div>
+              </template>
+              <n-tree v-else show-line block-line cascade virtual-scroll :pattern="pattern" :data="treeOption" :expandedKeys="expandedKeys" style="height: 75vh" key-field="id" label-field="title" @update:selected-keys="handleSelected" @update:expanded-keys="handleOnExpandedKeys" />
+            </div>
+          </div>
+        </n-card>
+      </n-gi>
+      <n-gi span="3">
+        <n-card :bordered="false" class="proCard">
+          <template #header v-if="selectedState.id > 0">
+            <n-space>
+              <n-icon size="18">
+                <FormOutlined />
+              </n-icon>
+              <span>
+                正在编辑 {{ selectedState.title }}
+              </span>
+            </n-space>
+          </template>
+          <n-result v-show="selectedState.id < 1" status="info" title="提示" description="请先从列表选择一项后，进行编辑">
+            <template #footer>
+              <n-button type="info" icon-placement="left" @click="handleAdd(selectedState)"  v-if="hasPermission(['/optionTreeDemo/edit'])">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <PlusOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                添加
+              </n-button>
+            </template>
+          </n-result>
+          <BasicForm v-if="selectedState.id > 0" ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
+            <template #statusSlot="{ model, field }">
+              <n-input v-model:value="model[field]" />
+            </template>
+          </BasicForm>
+          <BasicTable v-if="selectedState.id > 0" ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000"  :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
+            <template #tableTitle>
+              <n-button type="primary" @click="handleAdd(selectedState)"  class="min-left-space" v-if="hasPermission(['/optionTreeDemo/edit'])">
+                <template #icon>
+                  <n-icon>
+                    <PlusOutlined />
+                  </n-icon>
+                </template>
+                添加
+              </n-button>
+              <n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/optionTreeDemo/delete'])">
+                <template #icon>
+                  <n-icon>
+                    <DeleteOutlined />
+                  </n-icon>
+                </template>
+                批量删除
+              </n-button>
+            </template>
+          </BasicTable>
+        </n-card>
+      </n-gi>
+    </n-grid>
+    <Edit ref="editRef" @reloadTable="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted, unref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { useDictStore } from '@/store/modules/dict';
+  import { List, Delete, TreeOption } from '@/api/optionTreeDemo';
+  import { PlusOutlined, EditOutlined, DeleteOutlined, AlignLeftOutlined, FormOutlined, SearchOutlined } from '@vicons/antd';
+  import { columns, schemas, loadOptions, loadTreeOption, treeOption, State, newState } from './model';
+  import { adaTableScrollX, getTreeKeys } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+
+  const dict = useDictStore();
+  const dialog = useDialog();
+  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+
+  const checkedIds = ref([]);
+
+  const expandedKeys = ref([]);
+  const pattern = ref('');
+  const selectedState = ref<State>(newState(null));
+  const loading = ref(false);
+
+  const actionColumn = reactive({
+    width: 144,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record: State) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/optionTreeDemo/edit'],
+          },
+
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/optionTreeDemo/delete'],
+          },
+        ],
+
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  // 加载选项式树表数据
+  const loadDataTable = async (res = {}) => {
+    if (selectedState.value.id < 1) {
+      return;
+    }
+
+    // 刷新树选项
+    loadTreeOption();
+
+    // 获取选中的下级列表
+    const params = {
+      ...(searchFormRef.value?.formModel ?? {}),
+      ...res,
+      pid: selectedState.value.id,
+    };
+    return await List(params);
+  };
+
+  // 更新选中的行
+  function handleOnCheckedRow(rowKeys) {
+    checkedIds.value = rowKeys;
+  }
+
+  // 重新加载表格数据
+  function reloadTable() {
+    actionRef.value?.reload();
+  }
+
+  // 添加数据
+  function addTable() {
+    editRef.value.openModal(null);
+  }
+
+  // 添加树节点下级数据
+  function handleAdd(record: Recordable) {
+    const state = newState(null);
+    state.pid = record.id;
+    editRef.value.openModal(state);
+  }
+
+  // 编辑数据
+  function handleEdit(record: Recordable) {
+    editRef.value.openModal(record);
+  }
+
+  // 单个删除
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 批量删除
+  function handleBatchDelete() {
+    if (checkedIds.value.length < 1){
+      message.error('请至少选择一项要删除的数据');
+      return;
+    }
+
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 选中树节点
+  function handleSelected(keys, option) {
+    if (keys.length) {
+      selectedState.value = newState(option[0]);
+      reloadTable();
+    } else {
+      selectedState.value = newState(null);
+    }
+  }
+
+  // 展开指定节点
+  function handleOnExpandedKeys(keys) {
+    expandedKeys.value = keys;
+  }
+
+  // 展开全部节点
+  function handleAllExpanded() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = getTreeKeys(unref(treeOption), 'id');
+    }
+  }
+
+  // 首次加载树选项，默认展开全部
+  function firstLoadTreeOption() {
+    loading.value = true;
+    TreeOption().then((res) => {
+      treeOption.value = res;
+      expandedKeys.value = getTreeKeys(unref(treeOption), 'id');
+      loading.value = false;
+    });
+  }
+
+  onMounted(() => {
+    loadOptions();
+    firstLoadTreeOption();
+  });
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/web/src/views/optionTreeDemo/model.ts b/web/src/views/optionTreeDemo/model.ts
new file mode 100644
index 0000000..b407f70
--- /dev/null
+++ b/web/src/views/optionTreeDemo/model.ts
@@ -0,0 +1,165 @@
+import { h, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { renderOptionTag, renderPopoverMemberSumma, MemberSumma } from '@/utils';
+import { TreeOption } from '@/api/optionTreeDemo';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export class State {
+
+  public title = '';//标题
+  public id = 0;//ID
+  public pid = 0;//上级
+  public level = 1;//关系树级别
+  public tree = null;//关系树
+  public categoryId = null;//测试分类
+  public description = '';//描述
+  public sort = 0;//排序
+  public status = 1;//状态
+  public createdBy = 0;//创建者
+  public createdBySumma?: null | MemberSumma = null;//创建者摘要信息
+  public updatedBy = 0;//更新者
+  public createdAt = '';//创建时间
+  public updatedAt = '';//修改时间
+  public deletedAt = '';//删除时间
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+export const rules = {
+  title: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入标题',
+  },
+};
+
+// 表格搜索表单
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'categoryId',
+    component: 'NSelect',
+    label: '测试分类',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择测试分类',
+      options: dict.getOption('testCategoryOption'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态',
+      options: dict.getOption('sys_normal_disable'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+// 表格列
+export const columns = [
+  {
+    title: '标题',
+    key: 'title',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: '测试分类',
+    key: 'categoryId',
+    align: 'left',
+    width: 100,
+    render(row: State) {
+      return renderOptionTag('testCategoryOption', row.categoryId);
+    },
+  },
+  {
+    title: '状态',
+    key: 'status',
+    align: 'left',
+    width: 150,
+    render(row: State) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+  {
+    title: '创建者',
+    key: 'createdBy',
+    align: 'left',
+    width: 100,
+    render(row: State) {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    align: 'left',
+    width: 180,
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable', 'testCategoryOption']);
+}
+
+// 关系树选项
+export const treeOption = ref([]);
+
+// 加载关系树选项
+export function loadTreeOption() {
+  TreeOption().then((res) => {
+    treeOption.value = res;
+  });
+}
\ No newline at end of file
diff --git a/web/src/views/org/dept/dept.vue b/web/src/views/org/dept/dept.vue
new file mode 100644
index 0000000..e1faea6
--- /dev/null
+++ b/web/src/views/org/dept/dept.vue
@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="部门管理">
+      <BasicForm
+        ref="searchFormRef"
+        @register="register"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+      <BasicTable
+        ref="actionRef"
+        openChecked
+        :columns="columns"
+        :pagination="false"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        :actionColumn="actionColumn"
+        :scroll-x="1280"
+        :resizeHeightOffset="-10000"
+        :cascade="false"
+        :expanded-row-keys="expandedKeys"
+        @update:expanded-row-keys="updateExpandedKeys"
+        :checked-row-keys="checkedIds"
+        @update:checked-row-keys="handleOnCheckedRow"
+      >
+        <template #tableTitle>
+          <n-button
+            type="primary"
+            @click="addTable"
+            class="min-left-space"
+            v-if="hasPermission(['/dept/edit'])"
+          >
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加部门
+          </n-button>
+          <n-button
+            type="error"
+            @click="handleBatchDelete"
+            class="min-left-space"
+            v-if="hasPermission(['/dept/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button
+            type="primary"
+            icon-placement="left"
+            @click="handleAllExpanded"
+            class="min-left-space"
+          >
+            全部{{ expandedKeys.length ? '收起' : '展开' }}
+            <template #icon>
+              <div class="flex items-center">
+                <n-icon size="14">
+                  <AlignLeftOutlined />
+                </n-icon>
+              </div>
+            </template>
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit ref="editRef" @reloadTable="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { getDeptList, Delete } from '@/api/org/dept';
+  import { PlusOutlined, DeleteOutlined, AlignLeftOutlined } from '@vicons/antd';
+  import { columns, schemas, loadOptions, newState, filterIds } from './model';
+  import { convertListToTree } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+
+  const dialog = useDialog();
+  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+  const checkedIds = ref([]);
+  const expandedKeys = ref([]);
+  const allTreeKeys = ref([]);
+
+  const actionColumn = reactive({
+    width: 220,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/dept/edit'],
+          },
+          {
+            label: '添加子部门',
+            onClick: handleAdd.bind(null, record),
+            auth: ['/dept/edit'],
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/dept/delete'],
+          },
+        ],
+      });
+    },
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  // 加载普通数表数据
+  const loadDataTable = async (res = {}) => {
+    filterIds.value = [];
+    const params = { ...(searchFormRef.value?.formModel ?? {}), ...res, pagination: false };
+    const dataSource = await getDeptList(params);
+    allTreeKeys.value = expandedKeys.value = dataSource.list.map((item) => item.id);
+    dataSource.list = convertListToTree(dataSource.list, 'id');
+    filterIds.value = dataSource.ids;
+    return dataSource;
+  };
+
+  // 更新选中的行
+  function handleOnCheckedRow(rowKeys) {
+    checkedIds.value = rowKeys;
+  }
+
+  // 重新加载表格数据
+  function reloadTable() {
+    actionRef.value?.reload();
+  }
+
+  // 添加数据
+  function addTable() {
+    editRef.value.openModal(null);
+  }
+
+  // 添加树节点下级数据
+  function handleAdd(record: Recordable) {
+    const state = newState(null);
+    state.pid = record.id;
+    editRef.value.openModal(state);
+  }
+
+  // 编辑数据
+  function handleEdit(record: Recordable) {
+    editRef.value.openModal(record);
+  }
+
+  // 单个删除
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 批量删除
+  function handleBatchDelete() {
+    if (checkedIds.value.length < 1) {
+      message.error('请至少选择一项要删除的数据');
+      return;
+    }
+
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 收起/展开全部树节点
+  function handleAllExpanded() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = allTreeKeys.value;
+    }
+  }
+
+  // 更新展开的树节点
+  function updateExpandedKeys(openKeys: never[]) {
+    expandedKeys.value = openKeys;
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/org/dept/edit.vue b/web/src/views/org/dept/edit.vue
new file mode 100644
index 0000000..c1aacdb
--- /dev/null
+++ b/web/src/views/org/dept/edit.vue
@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑部门 #' + formValue.id : '添加部门'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            ref="formRef"
+            :model="formValue"
+            :rules="rules"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
+              <n-gi span="1">
+                <n-form-item label="上级部门" path="pid">
+                  <n-tree-select
+                    :options="treeOption"
+                    v-model:value="formValue.pid"
+                    key-field="id"
+                    label-field="name"
+                    clearable
+                    filterable
+                    default-expand-all
+                    show-path
+                  />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="部门名称" path="name">
+                  <n-input placeholder="请输入部门名称" v-model:value="formValue.name" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="部门编码" path="code">
+                  <n-input placeholder="请输入部门编码" v-model:value="formValue.code" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="部门类型" path="type">
+                  <n-radio-group v-model:value="formValue.type" name="type">
+                    <n-space>
+                      <n-radio v-for="item in dict.getOptionUnRef('deptType')" :value="item.value">
+                        {{ item.label }}
+                      </n-radio>
+                    </n-space>
+                  </n-radio-group>
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="负责人" path="leader">
+                  <n-input placeholder="请输入负责人" v-model:value="formValue.leader" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="联系电话" path="phone">
+                  <n-input placeholder="请输入联系电话" v-model:value="formValue.phone" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="邮箱" path="email">
+                  <n-input placeholder="请输入邮箱" v-model:value="formValue.email" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="排序" path="sort">
+                  <n-input-number
+                    placeholder="请输入排序"
+                    v-model:value="formValue.sort"
+                    clearable
+                    style="width: 100%"
+                  />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="状态" path="status">
+                  <n-radio-group v-model:value="formValue.status" name="status">
+                    <n-radio-button
+                      v-for="status in dict.getOptionUnRef('sys_normal_disable')"
+                      :key="status.value"
+                      :value="status.value"
+                      :label="status.label"
+                    />
+                  </n-radio-group>
+                </n-form-item>
+              </n-gi>
+            </n-grid>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm"> 取消 </n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 确定 </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { Edit, View, MaxSort } from '@/api/org/dept';
+  import { State, newState, treeOption, loadTreeOption, rules } from './model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const dict = useDictStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(520);
+  });
+
+  function openModal(state: State) {
+    showModal.value = true;
+
+    // 加载关系树选项
+    loadTreeOption();
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+
+      loading.value = true;
+      MaxSort()
+        .then((res) => {
+          formValue.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+      return;
+    }
+
+    // 编辑
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formValue.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            closeForm();
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/org/dept/model.ts b/web/src/views/org/dept/model.ts
new file mode 100644
index 0000000..30fc87e
--- /dev/null
+++ b/web/src/views/org/dept/model.ts
@@ -0,0 +1,201 @@
+import { h, ref } from 'vue';
+import { NTag, NButton } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { validate } from '@/utils/validateUtil';
+import { renderTooltip, renderIcon, renderOptionTag } from '@/utils';
+import { HelpCircleOutline } from '@vicons/ionicons5';
+import { TreeOption } from '@/api/org/dept';
+import { useDictStore } from '@/store/modules/dict';
+import type { FormRules } from 'naive-ui/es/form/src/interface';
+
+const dict = useDictStore();
+
+export class State {
+  public id = 0; // 部门ID
+  public pid = 0; // 父部门ID
+  public name = ''; // 部门名称
+  public code = ''; // 部门编码
+  public type = 'company'; // 部门类型
+  public leader = ''; // 负责人
+  public phone = ''; // 联系电话
+  public email = ''; // 邮箱
+  public level = 0; // 关系树等级
+  public tree = ''; // 关系树
+  public sort = 0; // 排序
+  public status = 1; // 部门状态
+  public createdAt = ''; // 创建时间
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+export const rules: FormRules = {
+  email: {
+    required: false,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    validator: validate.email,
+  },
+};
+
+// 表格搜索表单
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '部门名称',
+    componentProps: {
+      placeholder: '请输入部门名称',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入部门名称', trigger: ['blur'] }],
+  },
+  {
+    field: 'code',
+    component: 'NInput',
+    label: '部门编码',
+    componentProps: {
+      placeholder: '请输入部门编码',
+      showButton: false,
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'leader',
+    component: 'NInput',
+    label: '负责人',
+    componentProps: {
+      placeholder: '请输入负责人',
+      showButton: false,
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const filterIds = ref([]);
+
+// 表格列
+export const columns = [
+  {
+    title(_column) {
+      return renderTooltip(
+        h(
+          NButton,
+          {
+            strong: true,
+            size: 'small',
+            text: true,
+            iconPlacement: 'right',
+          },
+          { default: () => '部门名称', icon: renderIcon(HelpCircleOutline) }
+        ),
+        '支持上下级部门，点击列表中左侧 > 按钮可展开下级部门列表'
+      );
+    },
+    key: 'name',
+    render(row) {
+      const filter = filterIds.value.includes(row.id as never);
+      return h(
+        NTag,
+        {
+          type: 'info',
+          checkable: filter,
+          checked: filter,
+        },
+        {
+          default: () => row.name,
+        }
+      );
+    },
+    width: 200,
+  },
+  {
+    title: '部门编码',
+    key: 'code',
+    width: 100,
+  },
+  {
+    title: '部门类型',
+    key: 'type',
+    align: 'left',
+    width: 100,
+    render(row) {
+      return renderOptionTag('deptType', row.type);
+    },
+  },
+  {
+    title: '负责人',
+    key: 'leader',
+    width: 100,
+  },
+  {
+    title: '联系电话',
+    key: 'phone',
+    width: 150,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    align: 'left',
+    width: 80,
+    render(row) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 150,
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable', 'deptType']);
+}
+
+// 关系树选项
+export const treeOption = ref([]);
+
+// 加载关系树选项
+export function loadTreeOption() {
+  TreeOption().then((res) => {
+    treeOption.value = res;
+  });
+}
diff --git a/web/src/views/org/post/columns.ts b/web/src/views/org/post/columns.ts
new file mode 100644
index 0000000..a6992fe
--- /dev/null
+++ b/web/src/views/org/post/columns.ts
@@ -0,0 +1,61 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    title: 'ID',
+    key: 'id',
+    width: 100,
+  },
+  {
+    title: '岗位',
+    key: 'name',
+    width: 200,
+    render(row) {
+      return h(
+        NTag,
+        {
+          type: 'info',
+        },
+        {
+          default: () => row.name,
+        }
+      );
+    },
+  },
+  {
+    title: '岗位编码',
+    key: 'code',
+    width: 100,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 100,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.status == 1 ? 'info' : 'error',
+          bordered: false,
+        },
+        {
+          default: () => (row.status == 1 ? '正常' : '已禁用'),
+        }
+      );
+    },
+  },
+  {
+    title: '备注',
+    key: 'sort',
+    width: 150,
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 180,
+  },
+];
diff --git a/web/src/views/org/post/post.vue b/web/src/views/org/post/post.vue
new file mode 100644
index 0000000..7d61d30
--- /dev/null
+++ b/web/src/views/org/post/post.vue
@@ -0,0 +1,305 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="岗位管理">
+      <BasicForm
+        @register="register"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        @keyup.enter="handleSubmit"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :resizeHeightOffset="-10000"
+        :scroll-x="1090"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加岗位
+          </n-button>
+          &nbsp;
+          <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+        </template>
+      </BasicTable>
+
+      <n-modal
+        v-model:show="showModal"
+        :show-icon="false"
+        preset="dialog"
+        :title="formParams?.id > 0 ? '编辑岗位 #' + formParams?.id : '添加岗位'"
+      >
+        <n-form
+          :model="formParams"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="岗位名称" path="name">
+            <n-input placeholder="请输入岗位名称" v-model:value="formParams.name" />
+          </n-form-item>
+
+          <n-form-item label="岗位编码" path="code">
+            <n-input placeholder="请输入岗位编码" v-model:value="formParams.code" />
+          </n-form-item>
+
+          <n-form-item label="排序" path="sort">
+            <n-input-number v-model:value="formParams.sort" clearable style="width: 100%" />
+          </n-form-item>
+
+          <n-form-item label="状态" path="status">
+            <n-radio-group v-model:value="formParams.status" name="status">
+              <n-radio-button
+                v-for="status in statusOptions"
+                :key="status.value"
+                :value="status.value"
+                :label="status.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item label="备注" path="remark">
+            <n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
+          </n-form-item>
+        </n-form>
+
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showModal = false)">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { Delete, Edit, getPostList } from '@/api/org/post';
+  import { columns } from './columns';
+  import { DeleteOutlined, PlusOutlined } from '@vicons/antd';
+  import { statusOptions } from '@/enums/optionsiEnum';
+  import { defRangeShortcuts } from '@/utils/dateUtil';
+  import { cloneDeep } from 'lodash-es';
+
+  const params = ref<any>({
+    pageSize: 10,
+    name: '',
+    code: '',
+    status: null,
+  });
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '岗位名称',
+      componentProps: {
+        placeholder: '请输入岗位名称',
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ message: '请输入岗位名称', trigger: ['blur'] }],
+    },
+    {
+      field: 'code',
+      component: 'NInput',
+      label: '岗位编码',
+      componentProps: {
+        placeholder: '请输入岗位编码',
+        showButton: false,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'status',
+      component: 'NSelect',
+      label: '状态',
+      defaultValue: null,
+      componentProps: {
+        placeholder: '请选择类型',
+        options: statusOptions,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'createdAt',
+      component: 'NDatePicker',
+      label: '创建时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        shortcuts: defRangeShortcuts(),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+  ];
+
+  const message = useMessage();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const searchFormRef = ref<any>({});
+  const formRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+
+  const resetFormParams = {
+    id: 0,
+    code: '',
+    name: '',
+    remark: '',
+    sort: 10,
+    status: 1,
+  };
+  const formParams = ref<any>(resetFormParams);
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = cloneDeep(resetFormParams);
+  }
+
+  const loadDataTable = async (res) => {
+    return await getPostList({ ...params.value, ...res, ...searchFormRef.value?.formModel });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formParams.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showModal.value = false;
+            reloadTable();
+            formParams.value = ref(resetFormParams);
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = record;
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    params.value = values;
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    params.value = values;
+    reloadTable();
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/org/user/addBalance.vue b/web/src/views/org/user/addBalance.vue
new file mode 100644
index 0000000..e552f9b
--- /dev/null
+++ b/web/src/views/org/user/addBalance.vue
@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <n-spin :show="loading" description="请稍候...">
+      <n-modal
+        v-model:show="isShowModal"
+        :show-icon="false"
+        preset="dialog"
+        title="变更余额"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-alert :show-icon="false" type="info">
+          通过扣除或增加你的余额来为
+          <b> {{ params.realName }}</b> 加款或扣款。当扣款方余额不足时，则会操作失败
+        </n-alert>
+        <n-form
+          :model="params"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="管理员ID" path="id">
+            <n-input v-model:value="params.id" :disabled="true" />
+          </n-form-item>
+
+          <n-form-item label="TA的余额" path="balance">
+            <n-input placeholder="请输入" v-model:value="params.balance" :disabled="true" />
+          </n-form-item>
+
+          <n-form-item label="操作方式" path="operateMode">
+            <n-radio-group v-model:value="params.operateMode" name="operateMode">
+              <n-radio-button
+                v-for="status in operateModes"
+                :key="status.value"
+                :value="status.value"
+                :label="status.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item label="操作数量" path="num">
+            <n-input placeholder="请输入操作数量" v-model:value="params.num" />
+          </n-form-item>
+        </n-form>
+        <template #action>
+          <n-space>
+            <n-button @click="closeForm">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import {
+    addRules as rules,
+    addState as State,
+    addNewState as newState,
+    operateModes,
+  } from './model';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { GetMemberView, AddMemberBalance } from '@/api/org/user';
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const loading = ref(false);
+  const params = ref<State>(props.formParams);
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        AddMemberBalance(params.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            isShowModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  function loadForm(value) {
+    loading.value = true;
+    GetMemberView({ id: value.id })
+      .then((res) => {
+        params.value = res;
+        params.value.operateMode = 1;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  watch(
+    () => props.formParams,
+    (value) => {
+      if (isShowModal.value) {
+        loadForm(value);
+      }
+    }
+  );
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/org/user/addIntegral.vue b/web/src/views/org/user/addIntegral.vue
new file mode 100644
index 0000000..ff28412
--- /dev/null
+++ b/web/src/views/org/user/addIntegral.vue
@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <n-spin :show="loading" description="请稍候...">
+      <n-modal
+        v-model:show="isShowModal"
+        :show-icon="false"
+        preset="dialog"
+        title="变更积分"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-alert :show-icon="false" type="info">
+          通过扣除或增加你的积分来为
+          <b> {{ params.realName }}</b> 加款或扣款。当扣款方积分不足时，则会操作失败
+        </n-alert>
+        <n-form
+          :model="params"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="管理员ID" path="id">
+            <n-input v-model:value="params.id" :disabled="true" />
+          </n-form-item>
+
+          <n-form-item label="TA的积分" path="integral">
+            <n-input placeholder="请输入" v-model:value="params.integral" :disabled="true" />
+          </n-form-item>
+
+          <n-form-item label="操作方式" path="operateMode">
+            <n-radio-group v-model:value="params.operateMode" name="operateMode">
+              <n-radio-button
+                v-for="status in operateModes"
+                :key="status.value"
+                :value="status.value"
+                :label="status.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item label="操作数量" path="num">
+            <n-input placeholder="请输入操作数量" v-model:value="params.num" />
+          </n-form-item>
+        </n-form>
+        <template #action>
+          <n-space>
+            <n-button @click="closeForm">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, computed, watch } from 'vue';
+  import {
+    addRules as rules,
+    addState as State,
+    addNewState as newState,
+    operateModes,
+  } from './model';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { GetMemberView, AddMemberIntegral } from '@/api/org/user';
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const loading = ref(false);
+  const params = ref<State>(props.formParams);
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        AddMemberIntegral(params.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            isShowModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  function loadForm(value) {
+    loading.value = true;
+    GetMemberView({ id: value.id })
+      .then((res) => {
+        params.value = res;
+        params.value.operateMode = 1;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  watch(
+    () => props.formParams,
+    (value) => {
+      if (isShowModal.value) {
+        loadForm(value);
+      }
+    }
+  );
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/org/user/columns.ts b/web/src/views/org/user/columns.ts
new file mode 100644
index 0000000..3638eb9
--- /dev/null
+++ b/web/src/views/org/user/columns.ts
@@ -0,0 +1,148 @@
+import { h } from 'vue';
+import { NAvatar, NTag, NText } from 'naive-ui';
+import { formatBefore } from '@/utils/dateUtil';
+
+export const columns = [
+  {
+    title: '管理员ID',
+    key: 'id',
+    width: 100,
+  },
+  {
+    title: '用户名',
+    key: 'username',
+    width: 100,
+  },
+  {
+    title: '姓名',
+    key: 'realName',
+    width: 100,
+    render(row) {
+      if (row.realName == '') {
+        return h(NText, { depth: 3 }, { default: () => '未设置' });
+      }
+      return row.realName;
+    },
+  },
+  {
+    title: '头像',
+    key: 'avatar',
+    width: 70,
+    render(row) {
+      if (row.avatar !== '') {
+        return h(NAvatar, {
+          circle: true,
+          size: 'small',
+          src: row.avatar,
+        });
+      } else {
+        return h(
+          NAvatar,
+          {
+            circle: true,
+            size: 'small',
+          },
+          {
+            default: () =>
+              row.realName !== '' ? row.realName.substring(0, 1) : row.username.substring(0, 2),
+          }
+        );
+      }
+    },
+  },
+  {
+    title: '绑定角色',
+    key: 'roleName',
+    width: 100,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'success',
+          bordered: false,
+        },
+        {
+          default: () => row.roleName,
+        }
+      );
+    },
+  },
+  {
+    title: '所属部门',
+    key: 'deptName',
+    width: 100,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'info',
+          bordered: false,
+        },
+        {
+          default: () => row.deptName,
+        }
+      );
+    },
+  },
+  {
+    title: '余额',
+    key: 'balance',
+    width: 120,
+    render(row) {
+      return '￥' + Number(row.balance).toFixed(2);
+    },
+  },
+  {
+    title: '积分',
+    key: 'integral',
+    width: 120,
+    render(row) {
+      return Number(row.integral).toFixed(2);
+    },
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 80,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.status == 1 ? 'info' : 'error',
+          bordered: false,
+        },
+        {
+          default: () => (row.status == 1 ? '正常' : '已禁用'),
+        }
+      );
+    },
+  },
+  {
+    title: '最近活跃',
+    key: 'lastActiveAt',
+    width: 100,
+    render(row) {
+      if (row.lastActiveAt === null) {
+        return '从未登录';
+      }
+      return formatBefore(new Date(row.lastActiveAt));
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 180,
+    render: (rows, _) => {
+      return rows.createdAt;
+    },
+  },
+];
diff --git a/web/src/views/org/user/list.vue b/web/src/views/org/user/list.vue
new file mode 100644
index 0000000..22336e5
--- /dev/null
+++ b/web/src/views/org/user/list.vue
@@ -0,0 +1,526 @@
+<template>
+  <div>
+    <BasicForm
+      @register="register"
+      @submit="handleSubmit"
+      @reset="handleReset"
+      @keyup.enter="handleSubmit"
+      ref="searchFormRef"
+    >
+      <template #statusSlot="{ model, field }">
+        <n-input v-model:value="model[field]" />
+      </template>
+    </BasicForm>
+
+    <BasicTable
+      :openChecked="true"
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="(row) => row.id"
+      ref="actionRef"
+      :actionColumn="actionColumn"
+      @update:checked-row-keys="onCheckedRow"
+      :scroll-x="scrollX"
+      :resizeHeightOffset="-10000"
+    >
+      <template #tableTitle>
+        <n-button
+          type="primary"
+          @click="addTable"
+          class="min-left-space"
+          v-if="hasPermission(['/member/edit'])"
+        >
+          <template #icon>
+            <n-icon>
+              <PlusOutlined />
+            </n-icon>
+          </template>
+          添加用户
+        </n-button>
+        <n-button
+          type="error"
+          @click="batchDelete"
+          :disabled="batchDeleteDisabled"
+          class="min-left-space"
+          v-if="hasPermission(['/member/delete'])"
+        >
+          <template #icon>
+            <n-icon>
+              <DeleteOutlined />
+            </n-icon>
+          </template>
+          批量删除
+        </n-button>
+
+        <n-button
+          type="success"
+          @click="handleInviteQR(userStore.info?.inviteCode)"
+          class="min-left-space"
+          v-if="userStore.loginConfig?.loginRegisterSwitch === 1"
+        >
+          <template #icon>
+            <n-icon>
+              <QrCodeOutline />
+            </n-icon>
+          </template>
+          邀请注册
+        </n-button>
+      </template>
+    </BasicTable>
+
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      :title="formParams?.id > 0 ? '编辑用户 #' + formParams?.id : '添加用户'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-form
+        :model="formParams"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-grid x-gap="24" :cols="2">
+          <n-gi>
+            <n-form-item label="用户名" path="username">
+              <n-input placeholder="请输入登录用户名" v-model:value="formParams.username" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="密码" path="password">
+              <n-input
+                type="password"
+                :placeholder="formParams.id === 0 ? '请输入' : '不填则不修改'"
+                v-model:value="formParams.password"
+              />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
+        <n-grid x-gap="24" :cols="2">
+          <n-gi>
+            <n-form-item label="所属部门" path="deptId">
+              <n-tree-select
+                key-field="id"
+                :options="deptTreeOptions"
+                :default-value="formParams.deptId"
+                @update:value="handleUpdateDeptValue"
+                clearable
+                filterable
+                default-expand-all
+              />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="绑定角色" path="roleId">
+              <n-tree-select
+                key-field="id"
+                :options="roleTreeOptions"
+                :default-value="formParams.roleId"
+                @update:value="handleUpdateRoleValue"
+                clearable
+                filterable
+                default-expand-all
+              />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
+        <n-divider title-placement="left">填写更多信息（可选)</n-divider>
+        <n-grid x-gap="24" :cols="2">
+          <n-gi>
+            <n-form-item label="姓名" path="realName">
+              <n-input placeholder="请输入姓名" v-model:value="formParams.realName" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="绑定岗位" path="postIds">
+              <n-select
+                :default-value="formParams.postIds"
+                :options="dict.getOptionUnRef('adminPostOption')"
+                @update:value="handleUpdatePostValue"
+                multiple
+                clearable
+                filterable
+              />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
+        <n-grid x-gap="24" :cols="2">
+          <n-gi>
+            <n-form-item label="手机号" path="mobile">
+              <n-input placeholder="请输入" v-model:value="formParams.mobile" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="邮箱" path="email">
+              <n-input placeholder="请输入" v-model:value="formParams.email" />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
+        <n-grid x-gap="24" :cols="2">
+          <n-gi>
+            <n-form-item label="性别" path="sex">
+              <n-radio-group v-model:value="formParams.sex" name="sex">
+                <n-radio-button
+                  v-for="status in dict.getOptionUnRef('sys_user_sex')"
+                  :key="status.value"
+                  :value="status.value"
+                  :label="status.label"
+                />
+              </n-radio-group>
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="状态" path="status">
+              <n-radio-group v-model:value="formParams.status" name="status">
+                <n-radio-button
+                  v-for="status in dict.getOptionUnRef('sys_normal_disable')"
+                  :key="status.value"
+                  :value="status.value"
+                  :label="status.label"
+                />
+              </n-radio-group>
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
+        <n-form-item label="备注" path="remark">
+          <n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
+        </n-form-item>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="() => (showModal = false)">取消</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+
+    <AddBalance
+      @reload-table="reloadTable"
+      @update-show-modal="updateBalanceShowModal"
+      :showModal="showBalanceModal"
+      :formParams="formParams"
+    />
+
+    <AddIntegral
+      @reload-table="reloadTable"
+      @update-show-modal="updateIntegralShowModal"
+      :showModal="showIntegralModal"
+      :formParams="formParams"
+    />
+
+    <n-modal v-model:show="showQrModal" :show-icon="false" preset="dialog" title="邀请注册二维码">
+      <n-form class="py-4">
+        <div class="text-center">
+          <qrcode-vue :value="qrParams.qrUrl" :size="220" class="canvas" style="margin: 0 auto" />
+        </div>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="() => (showQrModal = false)">关闭</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, computed } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { ActionItem, BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm } from '@/components/Form/index';
+  import { Delete, Edit, List, ResetPwd } from '@/api/org/user';
+  import { columns } from './columns';
+  import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
+  import { QrCodeOutline } from '@vicons/ionicons5';
+  import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';
+  import { getRandomString } from '@/utils/charset';
+  import { cloneDeep } from 'lodash-es';
+  import QrcodeVue from 'qrcode.vue';
+  import AddBalance from './addBalance.vue';
+  import AddIntegral from './addIntegral.vue';
+  import {
+    addNewState,
+    addState,
+    register,
+    defaultState,
+    deptTreeOptions,
+    roleTreeOptions,
+  } from './model';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { useUserStore } from '@/store/modules/user';
+  import { LoginRoute } from '@/router';
+  import { getNowUrl } from '@/utils/urlUtils';
+  import { useDictStore } from '@/store/modules/dict';
+
+  interface Props {
+    type?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: '-1',
+  });
+
+  const rules = {
+    username: {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入用户名',
+    },
+  };
+
+  const dict = useDictStore();
+  const { hasPermission } = usePermission();
+  const userStore = useUserStore();
+  const showIntegralModal = ref(false);
+  const showBalanceModal = ref(false);
+  const message = useMessage();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const searchFormRef = ref<any>({});
+  const formRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  const formParams = ref<any>();
+  const showQrModal = ref(false);
+  const qrParams = ref({
+    name: '',
+    qrUrl: '',
+  });
+
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  const actionColumn = reactive({
+    width: 200,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      const downActions = getDropDownActions(record);
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            ifShow: () => {
+              return record.id !== 1;
+            },
+            auth: ['/member/edit'],
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            ifShow: () => {
+              return record.id !== 1;
+            },
+            auth: ['/member/delete'],
+          },
+        ],
+        dropDownActions: downActions,
+        select: (key) => {
+          if (key === 0) {
+            return handleResetPwd(record);
+          }
+          if (key === 100) {
+            return handleAddBalance(record);
+          }
+          if (key === 101) {
+            return handleAddIntegral(record);
+          }
+          if (key === 102) {
+            if (userStore.loginConfig?.loginRegisterSwitch !== 1) {
+              message.error('管理员暂未开启此功能');
+              return;
+            }
+            return handleInviteQR(record.inviteCode);
+          }
+        },
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  function getDropDownActions(record: Recordable): ActionItem[] {
+    if (record.id === 1) {
+      return [];
+    }
+
+    let list = [
+      {
+        label: '重置密码',
+        key: 0,
+      },
+      {
+        label: '变更余额',
+        key: 100,
+      },
+      {
+        label: '变更积分',
+        key: 101,
+      },
+    ];
+
+    if (userStore.loginConfig?.loginRegisterSwitch === 1) {
+      list.push({
+        label: 'TA的邀请码',
+        key: 102,
+      });
+    }
+
+    return list;
+  }
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = cloneDeep(defaultState);
+  }
+
+  const loadDataTable = async (res) => {
+    return await List({ ...res, ...searchFormRef.value?.formModel, ...{ roleId: props.type } });
+  };
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formParams.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showModal.value = false;
+            reloadTable();
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = cloneDeep(record);
+  }
+
+  function handleResetPwd(record: Recordable) {
+    record.password = getRandomString(12);
+    dialog.warning({
+      title: '警告',
+      content: '你确定要重置密码？\r\n重置成功后密码为：' + record.password + '\r\n 请先保存',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        ResetPwd(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleSubmit(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleUpdateDeptValue(value) {
+    formParams.value.deptId = Number(value);
+  }
+
+  function handleUpdateRoleValue(value) {
+    formParams.value.roleId = Number(value);
+  }
+
+  function handleUpdatePostValue(value) {
+    formParams.value.postIds = value;
+  }
+
+  function updateBalanceShowModal(value) {
+    showBalanceModal.value = value;
+  }
+
+  function handleAddBalance(record: Recordable) {
+    showBalanceModal.value = true;
+    formParams.value = addNewState(record as addState);
+  }
+
+  function updateIntegralShowModal(value) {
+    showIntegralModal.value = value;
+  }
+
+  function handleAddIntegral(record: Recordable) {
+    showIntegralModal.value = true;
+    formParams.value = addNewState(record as addState);
+  }
+
+  function handleInviteQR(code: any) {
+    const domain = getNowUrl() + '#';
+    qrParams.value.qrUrl = domain + LoginRoute.path + '?scope=register&inviteCode=' + code;
+    showQrModal.value = true;
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/org/user/model.ts b/web/src/views/org/user/model.ts
new file mode 100644
index 0000000..4f18199
--- /dev/null
+++ b/web/src/views/org/user/model.ts
@@ -0,0 +1,237 @@
+import { cloneDeep } from 'lodash-es';
+import { ref } from 'vue';
+import { getDeptOption } from '@/api/org/dept';
+import { getRoleOption } from '@/api/system/role';
+import { FormSchema, useForm } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { useDictStore, Option } from '@/store/modules/dict';
+
+// 增加余额/积分.
+
+const dict = useDictStore();
+
+export interface addState {
+  id: number;
+  username: string;
+  realName: string;
+  integral: number;
+  balance: number;
+  operateMode: number;
+  num: number | null;
+}
+
+export const addDefaultState = {
+  id: 0,
+  realName: '',
+  username: '',
+  integral: 0,
+  balance: 0,
+  operateMode: 1,
+  num: null,
+};
+
+export function addNewState(state: addState | null): addState {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(addDefaultState);
+}
+
+export const operateModes = [
+  {
+    value: 1,
+    label: '加款',
+  },
+  {
+    value: 2,
+    label: '扣款',
+  },
+];
+
+export const addRules = {};
+
+// 用户列表.
+
+export const defaultState = {
+  id: 0,
+  roleId: null,
+  realName: '',
+  username: '',
+  password: '',
+  deptId: null,
+  postIds: null,
+  mobile: '',
+  email: '',
+  sex: 1,
+  leader: '',
+  phone: '',
+  sort: 0,
+  status: 1,
+  createdAt: '',
+  updatedAt: '',
+};
+
+export interface State {
+  id: number;
+  roleId: number | null;
+  realName: string;
+  username: string;
+  password: string;
+  deptId: number | null;
+  postIds: any;
+  mobile: string;
+  email: string;
+  sex: number;
+  leader: string;
+  phone: string;
+  sort: number;
+  status: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const schemas: FormSchema[] = [
+  {
+    field: 'username',
+    component: 'NInput',
+    label: '用户名',
+    componentProps: {
+      placeholder: '请输入用户名',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入用户名', trigger: ['blur'] }],
+  },
+  {
+    field: 'realName',
+    component: 'NInput',
+    label: '姓名',
+    componentProps: {
+      placeholder: '请输入姓名',
+      showButton: false,
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'mobile',
+    component: 'NInputNumber',
+    label: '手机号',
+    componentProps: {
+      placeholder: '请输入手机号码',
+      showButton: false,
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'email',
+    component: 'NInput',
+    label: '邮箱',
+    componentProps: {
+      placeholder: '请输入邮箱地址',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'id',
+    component: 'NInput',
+    label: '用户ID',
+    componentProps: {
+      placeholder: '请输入用户ID',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'pid',
+    component: 'NInput',
+    label: '上级ID',
+    componentProps: {
+      placeholder: '请输入上级用户ID',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择类型',
+      options: dict.getOption('sys_normal_disable'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'created_at',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+];
+
+export const [register, {}] = useForm({
+  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+  labelWidth: 80,
+  schemas,
+});
+
+export const deptTreeOptions = ref([]);
+export const roleTreeOptions = ref([]);
+
+export async function loadOptions() {
+  dict.loadOptions(['adminPostOption', 'sys_user_sex', 'sys_normal_disable']);
+
+  getDeptOption().then((res) => {
+    if (res.list) {
+      deptTreeOptions.value = res.list;
+    }
+  });
+
+  getRoleOption().then((res) => {
+    if (res.list) {
+      roleTreeOptions.value = res.list;
+      registerRoleTabsOption();
+    }
+  });
+}
+
+// 将角色Tabs选项注册到字典
+function registerRoleTabsOption() {
+  const items = [{ id: -1, name: '全部' }];
+  treeDataToCompressed(items, roleTreeOptions.value);
+
+  const roleTabs: Option[] = [];
+  for (const item of items) {
+    roleTabs.push(dict.genOption(item.id, item.name));
+  }
+  dict.setOption('roleTabs', roleTabs);
+}
+
+function treeDataToCompressed(items: any[], source: any) {
+  for (const i in source) {
+    items.push(source[i]);
+    source[i].children && source[i].children.length > 0
+      ? treeDataToCompressed(items, source[i].children)
+      : ''; // 子级递归
+  }
+  return items;
+}
diff --git a/web/src/views/org/user/user.vue b/web/src/views/org/user/user.vue
new file mode 100644
index 0000000..1f3986d
--- /dev/null
+++ b/web/src/views/org/user/user.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="后台用户">
+      <n-tabs
+        type="card"
+        class="card-tabs"
+        :value="defaultTab"
+        animated
+        @before-leave="handleBeforeLeave"
+      >
+        <n-tab-pane
+          :name="item.key.toString()"
+          :tab="item.label"
+          v-for="item in dict.getOptionUnRef('roleTabs')"
+          :key="item.key"
+        >
+          <List :type="defaultTab" />
+        </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import List from './list.vue';
+  import { useRouter } from 'vue-router';
+  import { loadOptions } from './model';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const dict = useDictStore();
+  const router = useRouter();
+  const defaultTab = ref('-1');
+
+  onMounted(() => {
+    if (router.currentRoute.value.query?.type) {
+      defaultTab.value = router.currentRoute.value.query.type as string;
+    }
+    loadOptions();
+  });
+
+  function handleBeforeLeave(tabName: string): boolean | Promise<boolean> {
+    defaultTab.value = tabName;
+    return true;
+  }
+</script>
diff --git a/web/src/views/permission/menu/addModal.vue b/web/src/views/permission/menu/addModal.vue
new file mode 100644
index 0000000..26f49c6
--- /dev/null
+++ b/web/src/views/permission/menu/addModal.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      title="添加菜单"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <EditForm
+            ref="editFormRef"
+            v-model:formParams="formParams"
+            v-model:treeOption="treeOption"
+            @reloadTable="reloadTable"
+            @closeForm="closeForm"
+          />
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm"> 关闭 </n-button>
+          <n-button @click="handleReset"> 重置 </n-button>
+          <n-button type="primary" :loading="formLoading" @click="formSubmit"> 确定添加 </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { State, newState } from './model';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import EditForm from '@/views/permission/menu/editForm.vue';
+
+  const emit = defineEmits(['reloadTable']);
+  const formParams = ref<State>(newState(null));
+  const treeOption = defineModel<any[]>('treeOption');
+  const loading = ref(false);
+  const showModal = ref(false);
+  const editFormRef = ref();
+  const formLoading = computed(() => {
+    return editFormRef.value?.getFormLoading();
+  });
+
+  const dialogWidth = computed(() => {
+    return adaModalWidth(960);
+  });
+
+  function reloadTable() {
+    emit('reloadTable');
+  }
+
+  function openModal(state: State) {
+    showModal.value = true;
+    formParams.value = newState(state);
+  }
+
+  function formSubmit(e) {
+    e.preventDefault();
+    editFormRef.value.formSubmit();
+  }
+
+  function handleReset() {
+    editFormRef.value.handleReset();
+  }
+
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/permission/menu/editForm.vue b/web/src/views/permission/menu/editForm.vue
new file mode 100644
index 0000000..efa31b5
--- /dev/null
+++ b/web/src/views/permission/menu/editForm.vue
@@ -0,0 +1,415 @@
+<template>
+  <div>
+    <n-form
+      :model="formParams"
+      :rules="rules"
+      ref="formRef"
+      label-placement="left"
+      :label-width="100"
+      class="py-4"
+    >
+      <n-grid cols="2 300:1 600:2">
+        <n-gi>
+          <n-form-item label="菜单类型" path="type">
+            <n-radio-group
+              v-model:value="formParams.type"
+              name="type"
+              :on-update:value="handleUpdateType"
+            >
+              <n-radio-button
+                v-for="menuType in dict.getOptionUnRef('sys_menu_types')"
+                :key="menuType.value"
+                :value="menuType.value"
+                :label="menuType.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+        </n-gi>
+        <n-gi>
+          <n-form-item label="上级目录" path="pid">
+            <n-cascader
+              clearable
+              filterable
+              :options="filterTreeOption"
+              v-model:value="formParams.pid"
+              value-field="key"
+              label-field="label"
+            />
+          </n-form-item>
+        </n-gi>
+        <n-gi>
+          <n-form-item :label="titleLabel" path="title">
+            <n-input placeholder="请输入" v-model:value="formParams.title" />
+          </n-form-item>
+        </n-gi>
+        <n-gi v-if="formParams.type !== 3">
+          <n-form-item path="icon">
+            <IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
+            <template #label>
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+                </template>
+                请填写图标编码，可以参考图标库，也可以不填使用默认图标
+              </n-tooltip>
+              菜单图标
+            </template>
+          </n-form-item>
+        </n-gi>
+        <n-gi v-if="formParams.type !== 3">
+          <n-form-item path="path">
+            <n-input placeholder="路由地址" v-model:value="formParams.path" />
+            <template #label>
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+                </template>
+                请路由地址，如：user
+              </n-tooltip>
+              路由地址
+            </template>
+          </n-form-item>
+        </n-gi>
+        <n-gi>
+          <n-form-item path="name">
+            <n-input placeholder="路由别名" v-model:value="formParams.name" />
+            <template #label>
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+                </template>
+                对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
+              </n-tooltip>
+              路由别名
+            </template>
+          </n-form-item>
+        </n-gi>
+      </n-grid>
+
+      <n-grid cols="2 300:1 600:2" v-if="formParams.type !== 3">
+        <n-gi v-if="formParams.type === 1">
+          <n-form-item label="目录组件" path="component">
+            <n-select
+              v-if="formParams.type === 1"
+              :options="dict.getOptionUnRef('sys_menu_component')"
+              v-model:value="formParams.component"
+              placeholder="请选择目录组件"
+              clearable
+              tag
+            />
+          </n-form-item>
+        </n-gi>
+
+        <n-gi v-if="formParams.type === 2">
+          <n-form-item label="组件路径" path="component">
+            <n-input placeholder="组件路径" v-model:value="formParams.component" />
+            <template #feedback> 填 Vue 组件路径，如：`/system/menu/menu` </template>
+          </n-form-item>
+        </n-gi>
+        <n-gi v-if="formParams.type === 1">
+          <n-form-item label="默认跳转" path="redirect">
+            <n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
+            <template #feedback>当目录下存在多个同级菜单时适用，如：`/system/menu/menu`</template>
+          </n-form-item>
+        </n-gi>
+      </n-grid>
+
+      <n-divider title-placement="left">功能设置</n-divider>
+
+      <n-grid cols="1">
+        <n-gi>
+          <n-form-item label="分配权限" path="permissions">
+            <n-dynamic-tags
+              v-model:value="permissions"
+              :on-update:value="handleUpdatePermissions"
+              type="success"
+            />
+            <template #label>
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  <n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
+                </template>
+                请填写API路径地址，可同时作用于server端接口鉴权和web端细粒度权限
+              </n-tooltip>
+              分配权限
+            </template>
+          </n-form-item>
+        </n-gi>
+      </n-grid>
+
+      <n-grid cols="2 300:1 600:2">
+        <n-gi v-if="formParams.type !== 3">
+          <n-form-item label="高亮路由" path="activeMenu">
+            <n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
+          </n-form-item>
+        </n-gi>
+        <n-gi>
+          <n-form-item label="菜单排序" path="sort">
+            <n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
+          </n-form-item>
+        </n-gi>
+        <n-gi v-if="formParams.type !== 3">
+          <n-form-item label="内嵌链接" path="frameSrc">
+            <n-input-group>
+              <n-select
+                :style="{ width: '33%', minWidth: '80px' }"
+                :options="dict.getOptionUnRef('sys_switch')"
+                v-model:value="formParams.isFrame"
+              />
+              <n-input
+                placeholder="格式：http://www.xxx.cn 或 https://www.xxx.cn"
+                v-model:value="formParams.frameSrc"
+              />
+            </n-input-group>
+          </n-form-item>
+        </n-gi>
+        <n-gi>
+          <n-form-item label="菜单状态" path="status">
+            <n-radio-group v-model:value="formParams.status" name="status">
+              <n-radio-button
+                v-for="status in dict.getOptionUnRef('sys_normal_disable')"
+                :key="status.value"
+                :value="status.value"
+                :label="status.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+        </n-gi>
+      </n-grid>
+
+      <n-form-item label="高级选项" path="senior" v-if="formParams.type !== 3">
+        <n-checkbox-group v-model:value="senior" :on-update:value="handleSeniorChecked">
+          <n-space item-style="display: flex;">
+            <n-checkbox value="keepAlive" label="缓存路由" />
+            <n-checkbox value="hidden" label="隐藏菜单" />
+            <n-checkbox value="alwaysShow" label="简化路由" />
+            <n-checkbox value="affix" label="页签固定" />
+            <n-checkbox value="isRoot" label="根路由" />
+          </n-space>
+        </n-checkbox-group>
+      </n-form-item>
+
+      <n-form-item path="auth" style="margin-left: 100px" v-if="formParams.id > 0">
+        <n-space>
+          <n-button type="primary" :loading="loading" @click="formSubmit">保存修改 </n-button>
+          <n-button @click="handleReset">重置</n-button>
+          <n-button @click="handleDel">删除</n-button>
+        </n-space>
+      </n-form-item>
+    </n-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { QuestionCircleOutlined } from '@vicons/antd';
+  import IconSelector from '@/components/IconSelector/index.vue';
+  import { computed, ref } from 'vue';
+  import { newState, State } from '@/views/permission/menu/model';
+  import { FormItemRule, useDialog, useMessage } from 'naive-ui';
+  import { cloneDeep } from 'lodash-es';
+  import { DeleteMenu, EditMenu } from '@/api/system/menu';
+  import { findTreeNode } from '@/utils';
+  import { useDictStore } from '@/store/modules/dict';
+  import type { FormRules } from 'naive-ui/es/form/src/interface';
+
+  const rules: FormRules = {
+    title: {
+      required: true,
+      message: '请输入名称',
+      trigger: 'blur',
+    },
+    label: {
+      required: true,
+      message: '请输入标题',
+      trigger: 'blur',
+    },
+    path: {
+      required: false,
+      message: '请输入路由地址',
+      trigger: 'blur',
+      validator: function (_rule: FormItemRule, value: any, callback: Function): boolean | Error {
+        if (formParams.value.type != 3 && !value) {
+          callback(new Error('请输入路由地址'));
+        }
+        return true;
+      },
+    },
+  };
+
+  const emit = defineEmits(['reloadTable', 'closeForm']);
+  const dict = useDictStore();
+  const message = useMessage();
+  const dialog = useDialog();
+  const loading = ref(false);
+  const formRef = ref();
+  const formParams = defineModel<State>('formParams', { required: true });
+  const treeOption = defineModel<any[]>('treeOption');
+  const titleLabel = computed(() => {
+    const type = formParams.value.type as number;
+    if (type == 1) {
+      return '目录名称';
+    }
+    if (type == 2) {
+      return '菜单名称';
+    }
+    return '按钮名称';
+  });
+
+  const filterTreeOption = computed(() => {
+    const list = cloneDeep(treeOption.value) as any[];
+    for (let i = 0; i < list.length; i++) {
+      const item = list[i];
+      if (item.id === formParams.value.id) {
+        item.disabled = true;
+        if (item.children) {
+          setChildrenDisabled(item.children);
+        }
+      } else {
+        if (item.children) {
+          const foundChild = findItemById(item.children, formParams.value.id);
+          if (foundChild) {
+            foundChild.disabled = true;
+            setChildrenDisabled(foundChild.children);
+          }
+        }
+      }
+    }
+    return list;
+  });
+
+  const senior = computed(() => {
+    let opts: string[] = [];
+    if (formParams.value.keepAlive == 1) {
+      opts.push('keepAlive');
+    }
+    if (formParams.value.hidden == 1) {
+      opts.push('hidden');
+    }
+    if (formParams.value.alwaysShow == 1) {
+      opts.push('alwaysShow');
+    }
+    if (formParams.value.affix == 1) {
+      opts.push('affix');
+    }
+    if (formParams.value.isRoot == 1) {
+      opts.push('isRoot');
+    }
+    return opts;
+  });
+
+  function handleSeniorChecked(_: string, opt: { actionType: 'check' | 'uncheck'; value: string }) {
+    if (opt.actionType == 'check') {
+      formParams.value[opt.value] = 1;
+    } else {
+      formParams.value[opt.value] = 0;
+    }
+  }
+
+  function setChildrenDisabled(children: State[]) {
+    if (!children) return;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      child.disabled = true;
+      if (child.children) {
+        setChildrenDisabled(child.children);
+      }
+    }
+  }
+
+  function findItemById(children: State[], id: number) {
+    if (!children) {
+      return null;
+    }
+    for (let i = 0; i < children.length; i++) {
+      const item = children[i];
+      if (item.id === id) {
+        return item;
+      }
+
+      if (item.children) {
+        const child = findItemById(item.children, id);
+        if (child) {
+          return child;
+        }
+      }
+    }
+    return null;
+  }
+
+  function getFormLoading() {
+    return loading.value;
+  }
+
+  function handleDel() {
+    dialog.warning({
+      title: '提示',
+      content: `您确定要删除 ` + formParams.value.title + ` 菜单吗?`,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        DeleteMenu(formParams.value).then((_res) => {
+          message.success('操作成功');
+          formParams.value = newState(null);
+          emit('reloadTable');
+        });
+      },
+    });
+  }
+
+  function handleReset() {
+    const item = findTreeNode(treeOption.value, formParams.value.id);
+    formParams.value = newState(item);
+  }
+
+  function formSubmit() {
+    formRef.value.validate((errors: boolean) => {
+      if (!errors) {
+        loading.value = true;
+        EditMenu(formParams.value)
+          .then((_res) => {
+            message.success('操作成功');
+            emit('reloadTable');
+            emit('closeForm');
+          })
+          .finally(() => {
+            loading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  const permissions = computed(() => {
+    if (formParams.value.permissions.length == 0) {
+      return [];
+    }
+    return formParams.value.permissions.split(',');
+  });
+
+  function handleUpdatePermissions(values: string[]) {
+    formParams.value.permissions = Array.from(new Set(values)).join(',');
+  }
+
+  function handleUpdateType(value: number) {
+    formParams.value.type = value;
+    if (value == 1) {
+      formParams.value.component = null;
+    } else {
+      formParams.value.component = '';
+    }
+
+    const item = findTreeNode(treeOption.value, formParams.value.id);
+    if (item && item.type == value) {
+      formParams.value.component = item.component;
+    }
+  }
+
+  defineExpose({
+    handleReset,
+    formSubmit,
+    getFormLoading,
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/web/src/views/permission/menu/menu.vue b/web/src/views/permission/menu/menu.vue
new file mode 100644
index 0000000..7da0a46
--- /dev/null
+++ b/web/src/views/permission/menu/menu.vue
@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <div class="n-layout-page-header" v-if="!isModal">
+      <n-card :bordered="false" title="菜单管理">
+        在这里可以管理编辑系统下的所有菜单导航和分配相应的菜单权限
+      </n-card>
+    </div>
+    <n-grid
+      cols="1 s:1 m:1 l:3 xl:3 2xl:3"
+      responsive="screen"
+      :x-gap="12"
+    >
+      <n-gi span="1">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-button type="info" icon-placement="left" @click="openCreateDrawer">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <PlusOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                添加菜单
+              </n-button>
+              <n-button
+                type="info"
+                icon-placement="left"
+                @click="openChildCreateDrawer"
+                :disabled="formParams.id == 0"
+              >
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <PlusOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                添加子菜单
+              </n-button>
+              <n-button type="primary" icon-placement="left" @click="packHandle">
+                全部{{ expandedKeys.length ? '收起' : '展开' }}
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <AlignLeftOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+              </n-button>
+            </n-space>
+          </template>
+          <div class="w-full menu">
+            <n-input type="text" v-model:value="pattern" placeholder="输入菜单名称或权限路径搜索">
+              <template #suffix>
+                <n-icon size="18" class="cursor-pointer">
+                  <SearchOutlined />
+                </n-icon>
+              </template>
+            </n-input>
+            <div class="py-3 menu-list">
+              <template v-if="loading">
+                <div class="flex items-center justify-center py-4">
+                  <n-spin size="medium" />
+                </div>
+              </template>
+              <template v-else>
+                <n-tree
+                  block-line
+                  cascade
+                  checkable
+                  :virtual-scroll="true"
+                  :pattern="pattern"
+                  :filter="filterTreeNode"
+                  :data="treeOption"
+                  :expandedKeys="expandedKeys"
+                  style="max-height: 650px; overflow: hidden"
+                  @update:selected-keys="selectedTree"
+                  @update:expanded-keys="onExpandedKeys"
+                />
+              </template>
+            </div>
+          </div>
+        </n-card>
+      </n-gi>
+      <n-gi span="2">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-icon size="18">
+                <FormOutlined />
+              </n-icon>
+              <span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
+            </n-space>
+          </template>
+
+          <n-result
+            v-show="formParams.id == 0"
+            status="info"
+            title="提示"
+            description="从菜单列表中选择一项进行编辑"
+          />
+          <EditForm
+            v-if="formParams.id > 0"
+            v-model:formParams="formParams"
+            v-model:treeOption="treeOption"
+            @reloadTable="loadTreeOption"
+          />
+        </n-card>
+      </n-gi>
+    </n-grid>
+    <AddModal ref="addModalRef" v-model:treeOption="treeOption" @reloadTable="loadTreeOption" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted, ref, unref } from 'vue';
+  import { AlignLeftOutlined, FormOutlined, PlusOutlined, SearchOutlined } from '@vicons/antd';
+  import { getMenuList } from '@/api/system/menu';
+  import { newState, State, loadOptions } from '@/views/permission/menu/model';
+  import EditForm from '@/views/permission/menu/editForm.vue';
+  import AddModal from '@/views/permission/menu/addModal.vue';
+
+  const addModalRef = ref();
+  const loading = ref(false);
+  const treeOption = ref([]);
+  const pattern = ref('');
+  const expandedKeys = ref([]);
+  const formParams = ref<State>(newState(null));
+  const treeItemTitle = computed(() => {
+    if (formParams.value.id > 0) {
+      return formParams.value.label + ' #' + formParams.value.id;
+    }
+    return '';
+  });
+  const isModal = defineModel<boolean>('isModal', { default: false });
+
+  function openCreateDrawer() {
+    addModalRef.value.openModal(null);
+  }
+
+  function openChildCreateDrawer() {
+    const state = newState(null);
+    state.pid = formParams.value.id;
+    state.type = formParams.value.type;
+    addModalRef.value.openModal(state);
+  }
+
+  function selectedTree(keys: number[], option: any[]) {
+    let item = null;
+    if (keys.length) {
+      item = option[0];
+    }
+    formParams.value = newState(item);
+  }
+
+  function packHandle() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = unref(treeOption).map((item: any) => item.key as string) as [];
+    }
+  }
+
+  function onExpandedKeys(keys) {
+    expandedKeys.value = keys;
+  }
+
+  // 按名称和权限搜索
+  function filterTreeNode(pattern: string, node: any) {
+    if (!pattern) return true;
+    const searchText = pattern.toLowerCase();
+
+    const label = (node.label || node.title || '').toLowerCase();
+    if (label.includes(searchText)) {
+      return true;
+    }
+
+    const permissions = node.permissions || '';
+    if (permissions) {
+      const permissionsLower = permissions.toLowerCase();
+      if (permissionsLower.includes(searchText)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // 加载菜单选项树
+  function loadTreeOption() {
+    const needLoading = treeOption.value.length == 0;
+    if (needLoading) {
+      loading.value = true;
+    }
+
+    getMenuList()
+      .then((res) => {
+        if (res.list && res.list.length > 0) {
+          treeOption.value = res.list;
+        } else {
+          treeOption.value = [];
+        }
+      })
+      .finally(() => {
+        if (needLoading) {
+          loading.value = false;
+        }
+      });
+  }
+
+  onMounted(() => {
+    loadTreeOption();
+    loadOptions();
+  });
+</script>
diff --git a/web/src/views/permission/menu/menuModal.vue b/web/src/views/permission/menu/menuModal.vue
new file mode 100644
index 0000000..16405bc
--- /dev/null
+++ b/web/src/views/permission/menu/menuModal.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <n-modal
+      title="菜单管理"
+      v-model:show="showModal"
+      :block-scroll="false"
+      :mask-closable="false"
+      :show-icon="false"
+      :on-after-leave="handleCancel"
+      preset="card"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <Menu v-model:isModal="isModal" />
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import Menu from './menu.vue';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  const emit = defineEmits(['reloadTable']);
+  const showModal = ref(false);
+  const isModal = ref(true);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(1280);
+  });
+
+  function openModal() {
+    showModal.value = true;
+  }
+
+  function handleCancel() {
+    emit('reloadTable');
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
diff --git a/web/src/views/permission/menu/model.ts b/web/src/views/permission/menu/model.ts
new file mode 100644
index 0000000..44929ee
--- /dev/null
+++ b/web/src/views/permission/menu/model.ts
@@ -0,0 +1,102 @@
+import { cloneDeep } from 'lodash-es';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export interface State {
+  id: number;
+  pid?: number | null;
+  title: string;
+  name: string;
+  path: string;
+  label: string;
+  icon: string;
+  type: number;
+  redirect: string;
+  permissions: string;
+  permissionName: string;
+  component?: string | null;
+  alwaysShow: number;
+  activeMenu: string;
+  isRoot: number;
+  isFrame: number;
+  frameSrc: string;
+  keepAlive: number;
+  hidden: number;
+  affix: number;
+  status: number;
+  sort: number;
+  disabled: boolean;
+  children?: State[] | null;
+}
+
+export const defaultState: State = {
+  id: 0,
+  pid: 0,
+  title: '',
+  name: '',
+  path: '',
+  label: '',
+  icon: '',
+  type: 1,
+  redirect: '',
+  permissions: '',
+  permissionName: '',
+  component: null,
+  alwaysShow: 2,
+  activeMenu: '',
+  isRoot: 2,
+  isFrame: 2,
+  frameSrc: '',
+  keepAlive: 2,
+  hidden: 2,
+  affix: 2,
+  status: 1,
+  sort: 10,
+  disabled: false,
+  children: null,
+};
+
+export function newState(state: State | null): State {
+  if (state !== null) {
+    return defaultValueCheck(cloneDeep(state));
+  }
+  return defaultValueCheck(cloneDeep(defaultState));
+}
+
+// 默认值校正，主要为了解决历史数据格式不规范问题
+export function defaultValueCheck(state: State): State {
+  if (!state) {
+    state = newState(null);
+  }
+  if (!state.pid || state.pid < 1) {
+    state.pid = null;
+  }
+  if (state.alwaysShow != 1) {
+    state.alwaysShow = 2;
+  }
+  if (state.isRoot != 1) {
+    state.isRoot = 2;
+  }
+  if (state.isFrame != 1) {
+    state.isFrame = 2;
+  }
+  if (state.keepAlive != 1) {
+    state.keepAlive = 2;
+  }
+  if (state.hidden != 1) {
+    state.hidden = 2;
+  }
+  if (state.affix != 1) {
+    state.affix = 2;
+  }
+  if (state.status != 1) {
+    state.status = 2;
+  }
+  return state;
+}
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['sys_menu_types', 'sys_menu_component', 'sys_normal_disable', 'sys_switch']);
+}
diff --git a/web/src/views/permission/role/columns.ts b/web/src/views/permission/role/columns.ts
new file mode 100644
index 0000000..0d3caf3
--- /dev/null
+++ b/web/src/views/permission/role/columns.ts
@@ -0,0 +1,100 @@
+import { h } from 'vue';
+import { NTag, NButton } from 'naive-ui';
+import { HelpCircleOutline } from '@vicons/ionicons5';
+import { renderTooltip, renderIcon } from '@/utils';
+export const columns = [
+  // {
+  //   title: '角色ID',
+  //   key: 'id',
+  // },
+  {
+    title(_column) {
+      return renderTooltip(
+        h(
+          NButton,
+          {
+            strong: true,
+            size: 'small',
+            text: true,
+            iconPlacement: 'right',
+          },
+          { default: () => '角色', icon: renderIcon(HelpCircleOutline) }
+        ),
+        '支持上下级角色，点击列表中左侧 > 按钮可展开下级角色列表'
+      );
+    },
+    key: 'name',
+    render(row) {
+      return h(
+        NTag,
+        {
+          type: 'info',
+        },
+        {
+          default: () => row.name,
+        }
+      );
+    },
+    width: 200,
+  },
+  {
+    title: '角色编码',
+    key: 'key',
+    width: 150,
+  },
+  // {
+  //   title: '上级角色',
+  //   key: 'pid',
+  // },
+  // {
+  //   title: '默认角色',
+  //   key: 'isDefault',
+  //   render(row) {
+  //     return h(
+  //       NTag,
+  //       {
+  //         type: row.id == 1 ? 'success' : 'error',
+  //       },
+  //       {
+  //         default: () => (row.id == 1 ? '是' : '否'),
+  //       }
+  //     );
+  //   },
+  //   width: 80,
+  // },
+  // {
+  //   title: '排序',
+  //   key: 'sort',
+  //   width: 100,
+  // },
+  {
+    title: '备注',
+    key: 'remark',
+    width: 180,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 80,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.status == 1 ? 'info' : 'error',
+          bordered: false,
+        },
+        {
+          default: () => (row.status == 1 ? '正常' : '已禁用'),
+        }
+      );
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 180,
+  },
+];
diff --git a/web/src/views/permission/role/editDataAuth.vue b/web/src/views/permission/role/editDataAuth.vue
new file mode 100644
index 0000000..ccaaf8b
--- /dev/null
+++ b/web/src/views/permission/role/editDataAuth.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="'修改 ' + formValue.name + ' 的数据权限'"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            :model="formValue"
+            ref="formRef"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-form-item label="数据范围" path="dataScope">
+              <n-select v-model:value="formValue.dataScope" :options="dataScopeOption" />
+            </n-form-item>
+            <n-form-item label="自定义权限" path="customDept" v-if="formValue.dataScope === 4">
+              <n-tree-select
+                multiple
+                key-field="id"
+                label-field="name"
+                :options="deptList"
+                v-model:value="formValue.customDept"
+                :default-expand-all="true"
+              />
+            </n-form-item>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">取消</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { DataScopeEdit, DataScopeSelect } from '@/api/system/role';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { newState, State } from '@/views/permission/role/model';
+  import { getDeptList } from '@/api/org/dept';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref();
+  const formBtnLoading = ref(false);
+  const dataScopeOption = ref<any>([]);
+  const deptList = ref<any>([]);
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        DataScopeEdit(formValue.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  async function loadDataScopeSelect() {
+    const res = await DataScopeSelect();
+    if (res.list) {
+      dataScopeOption.value = res.list;
+    }
+  }
+
+  async function loadDeptList() {
+    const res = await getDeptList({});
+    if (res.list) {
+      deptList.value = res.list;
+    }
+  }
+
+  async function openModal(record: Recordable) {
+    showModal.value = true;
+    loading.value = true;
+    formValue.value = newState(record);
+    await loadDeptList();
+    await loadDataScopeSelect();
+    loading.value = false;
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/permission/role/editMenuAuth.vue b/web/src/views/permission/role/editMenuAuth.vue
new file mode 100644
index 0000000..44710fb
--- /dev/null
+++ b/web/src/views/permission/role/editMenuAuth.vue
@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <n-drawer v-model:show="showModal" :width="dialogWidth" :show-icon="false" preset="dialog">
+      <n-drawer-content closable :title="`分配 ${formValue.name} 的菜单权限`">
+        <n-spin :show="loading" description="请稍候...">
+          <div :style="{ maxHeight: '78vh', height: '78vh' }">
+            <n-input v-model:value="pattern" placeholder="输入菜单名称或权限路径搜索" class="mb-2">
+              <template #suffix>
+                <n-icon size="18" class="cursor-pointer">
+                  <SearchOutlined />
+                </n-icon>
+              </template>
+            </n-input>
+            <n-tree
+              block-line
+              checkable
+              check-on-click
+              default-expand-all
+              virtual-scroll
+              :data="treeData"
+              :pattern="pattern"
+              :filter="filterTreeNode"
+              :expandedKeys="expandedKeys"
+              :checked-keys="checkedKeys"
+              style="max-height: 950px; overflow: hidden"
+              @update:checked-keys="checkedTree"
+              @update:expanded-keys="onExpandedKeys"
+            />
+          </div>
+        </n-spin>
+        <template #footer>
+          <n-space v-if="showImportSelect">
+            <n-input-group>
+              <n-tree-select
+                placeholder="请选择一个要导入的角色"
+                :consistent-menu-width="false"
+                clearable
+                filterable
+                default-expand-all
+                :options="editRoleOption"
+                key-field="id"
+                label-field="name"
+                :on-update:value="handleImportSelect"
+                style="width: 300px"
+              />
+              <div class="mr-2"></div>
+              <n-button ghost @click="showImportSelect = false"> 取消 </n-button>
+            </n-input-group>
+          </n-space>
+
+          <n-space v-if="!showImportSelect">
+            <n-button ghost @click="showImportSelect = true"> 导入权限 </n-button>
+            <n-button type="info" ghost icon-placement="left" @click="packHandle">
+              全部{{ expandedKeys.length ? '收起' : '展开' }}
+            </n-button>
+            <n-button type="info" ghost icon-placement="left" @click="checkedAllHandle">
+              全部{{ checkedAll ? '取消' : '选择' }}
+            </n-button>
+
+            <n-popconfirm @positive-click="confirmForm">
+              <template #trigger>
+                <n-button type="primary" :loading="formBtnLoading">提交</n-button>
+              </template>
+              你正在修改 {{ formValue.name }} 的菜单权限，确定要提交吗？
+            </n-popconfirm>
+          </n-space>
+        </template>
+      </n-drawer-content>
+    </n-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { GetPermissions, getRoleList, UpdatePermissions } from '@/api/system/role';
+  import { NButton, useMessage } from 'naive-ui';
+  import { adaModalWidth, getTreeKeys } from '@/utils/hotgo';
+  import { findTreeNode, getAllExpandKeys } from '@/utils';
+  import { getMenuList } from '@/api/system/menu';
+  import { SearchOutlined } from '@vicons/antd';
+  import { State, newState } from '@/views/permission/role/model';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formBtnLoading = ref(false);
+  const rawRoleOption = ref<State[]>([]);
+  const checkedAll = ref(false);
+  const treeData = ref([]);
+  const expandedKeys = ref<any[]>([]);
+  const checkedKeys = ref<any[]>([]);
+  const pattern = ref('');
+  const showImportSelect = ref(false);
+
+  const editRoleOption = computed<State[]>(() => {
+    if (!rawRoleOption.value) {
+      return [];
+    }
+    const role = findTreeNode(rawRoleOption.value, formValue.value.id, 'id');
+    if (role) {
+      role.disabled = true;
+    }
+    return rawRoleOption.value;
+  });
+
+  const dialogWidth = computed(() => {
+    return adaModalWidth(630);
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    const params = {
+      id: formValue.value.id,
+      menuIds: checkedKeys.value ?? [],
+    };
+    UpdatePermissions(params)
+      .then((_res) => {
+        message.success('操作成功');
+        setTimeout(() => {
+          showModal.value = false;
+          emit('reloadTable');
+        });
+      })
+      .finally(() => {
+        formBtnLoading.value = false;
+      });
+  }
+
+  function checkedTree(keys) {
+    checkedKeys.value = keys;
+  }
+
+  function onExpandedKeys(keys) {
+    expandedKeys.value = keys;
+  }
+
+  function packHandle() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = getAllExpandKeys(treeData) as [];
+    }
+  }
+
+  function checkedAllHandle() {
+    if (!checkedAll.value) {
+      checkedKeys.value = getTreeKeys(treeData.value);
+      checkedAll.value = true;
+    } else {
+      checkedKeys.value = [];
+      checkedAll.value = false;
+    }
+  }
+
+  // 按名称和权限搜索
+  function filterTreeNode(pattern: string, node: any) {
+    if (!pattern) return true;
+    const searchText = pattern.toLowerCase();
+
+    const label = (node.label || node.title || '').toLowerCase();
+    if (label.includes(searchText)) {
+      return true;
+    }
+
+    const permissions = node.permissions || '';
+    if (permissions) {
+      const permissionsLower = permissions.toLowerCase();
+      if (permissionsLower.includes(searchText)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function handleImportSelect(key: number) {
+    showImportSelect.value = false;
+    showModal.value = true;
+    getPermissions(key);
+
+    // 默认全部展开
+    expandedKeys.value = getAllExpandKeys(treeData);
+    message.success('导入成功，提交后生效');
+  }
+
+  async function loadMenuList() {
+    const res = await getMenuList();
+    expandedKeys.value = getAllExpandKeys(res.list) as [];
+    treeData.value = res.list;
+  }
+
+  async function getPermissions(id: number) {
+    checkedKeys.value = [];
+    checkedAll.value = false;
+    const res = await GetPermissions({ id: id });
+    checkedKeys.value = res.menuIds;
+  }
+
+  async function loadDataList() {
+    const res = await getRoleList({ pageSize: 100, page: 1 });
+    rawRoleOption.value = res.list;
+  }
+
+  async function openModal(record: Recordable) {
+    loading.value = true;
+    formValue.value = newState(record);
+    showModal.value = true;
+    await loadMenuList();
+    await getPermissions(record.id);
+    await loadDataList();
+    loading.value = false;
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/permission/role/editRole.vue b/web/src/views/permission/role/editRole.vue
new file mode 100644
index 0000000..efa2b69
--- /dev/null
+++ b/web/src/views/permission/role/editRole.vue
@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑角色 #' + formValue.id : '添加角色'"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            :model="formValue"
+            :rules="rules"
+            ref="formRef"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-form-item label="上级角色" path="pid">
+              <n-tree-select
+                :options="editRoleOption"
+                v-model:value="formValue.pid"
+                key-field="id"
+                label-field="name"
+                clearable
+                filterable
+                default-expand-all
+              />
+            </n-form-item>
+            <n-form-item label="角色名称" path="name">
+              <n-input placeholder="请输入名称" v-model:value="formValue.name" />
+            </n-form-item>
+            <n-form-item label="角色编码" path="key">
+              <n-input placeholder="请输入" v-model:value="formValue.key" />
+            </n-form-item>
+            <n-form-item label="排序" path="sort">
+              <n-input-number v-model:value="formValue.sort" clearable style="width: 100%" />
+            </n-form-item>
+
+            <n-form-item label="状态" path="status">
+              <n-radio-group v-model:value="formValue.status" name="status">
+                <n-radio-button
+                  v-for="status in statusOptions"
+                  :key="status.value"
+                  :value="status.value"
+                  :label="status.label"
+                />
+              </n-radio-group>
+            </n-form-item>
+            <n-form-item label="备注" path="remark">
+              <n-input type="textarea" placeholder="请输入" v-model:value="formValue.remark" />
+            </n-form-item>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">取消</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { Edit, getRoleList } from '@/api/system/role';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { statusOptions } from '@/enums/optionsiEnum';
+  import { newState, State } from '@/views/permission/role/model';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref();
+  const formBtnLoading = ref(false);
+  const rawRoleOption = ref([]);
+
+  const editRoleOption = computed(() => {
+    return rawRoleOption.value;
+  });
+
+  const rules = {
+    name: {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入名称',
+    },
+    key: {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入角色编码',
+    },
+  };
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formValue.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  function loadDataList() {
+    loading.value = true;
+    getRoleList({ pageSize: 100, page: 1 }).then((res) => {
+      rawRoleOption.value = res.list;
+      loading.value = false;
+    });
+  }
+
+  function openModal(record: Recordable) {
+    loadDataList();
+    showModal.value = true;
+    formValue.value = newState(record);
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/permission/role/model.ts b/web/src/views/permission/role/model.ts
new file mode 100644
index 0000000..7fd503c
--- /dev/null
+++ b/web/src/views/permission/role/model.ts
@@ -0,0 +1,40 @@
+import { cloneDeep } from 'lodash-es';
+
+export class State {
+  id = 0;
+  name = '';
+  key = '';
+  dataScope = 1;
+  customDept: any[] = [];
+  pid = 0;
+  level = 1;
+  tree = '';
+  remark = '';
+  sort = 0;
+  status = 1;
+  createdAt = '';
+  updatedAt = '';
+  label = '';
+  value = 0;
+  children: State[] | null = null;
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.keys(this).forEach((key) => {
+        if (state[key] !== undefined) {
+          this[key] = state[key];
+        }
+      });
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
diff --git a/web/src/views/permission/role/role.vue b/web/src/views/permission/role/role.vue
new file mode 100644
index 0000000..fab8c6d
--- /dev/null
+++ b/web/src/views/permission/role/role.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="角色管理">
+      <n-space vertical :size="12">
+        <n-space>
+          <n-button type="primary" @click="addTable">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加角色
+          </n-button>
+        </n-space>
+
+        <n-data-table
+          v-if="dataSource.length > 0 || !loading"
+          :columns="columns.concat(actionColumn)"
+          :data="dataSource"
+          :row-key="(row) => row.id"
+          :loading="loading"
+          :resizeHeightOffset="-20000"
+          default-expand-all
+        />
+      </n-space>
+    </n-card>
+
+    <EditRole ref="editRoleRef" @reloadTable="reloadTable" />
+    <EditMenuAuth ref="editMenuAuthRef" @reloadTable="reloadTable" />
+    <EditDataAuth ref="editDataAuthRef" @reloadTable="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, onMounted, reactive, ref } from 'vue';
+  import { NButton, useDialog, useMessage } from 'naive-ui';
+  import { BasicColumn, TableAction } from '@/components/Table';
+  import { Delete, getRoleList } from '@/api/system/role';
+  import { columns } from './columns';
+  import { PlusOutlined } from '@vicons/antd';
+  import EditRole from './editRole.vue';
+  import EditMenuAuth from './editMenuAuth.vue';
+  import EditDataAuth from './editDataAuth.vue';
+  import { newState } from '@/views/permission/role/model';
+
+  const message = useMessage();
+  const dialog = useDialog();
+  const loading = ref(false);
+  const dataSource = ref<any>([]);
+  const editRoleRef = ref();
+  const editMenuAuthRef = ref();
+  const editDataAuthRef = ref();
+
+  const actionColumn = reactive<BasicColumn>({
+    width: 200,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction, {
+        style: 'primary',
+        actions: [
+          {
+            label: '菜单权限',
+            onClick: handleMenuAuth.bind(null, record),
+            ifShow: () => {
+              return record.id !== 1;
+            },
+            type: 'default',
+          },
+          {
+            label: '数据权限',
+            onClick: handleDataAuth.bind(null, record),
+            ifShow: () => {
+              return record.id !== 1;
+            },
+            type: 'default',
+          },
+          {
+            label: '添加子角色',
+            onClick: handleAddSub.bind(null, record),
+          },
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            ifShow: () => {
+              return record.id !== 1;
+            },
+          },
+        ],
+      });
+    },
+  });
+
+  function loadDataTable() {
+    loading.value = true;
+    getRoleList({ pageSize: 100, page: 1 }).then((res) => {
+      dataSource.value = res.list ?? [];
+      loading.value = false;
+    });
+  }
+
+  function reloadTable() {
+    loadDataTable();
+  }
+
+  function addTable() {
+    editRoleRef.value.openModal(null);
+  }
+
+  function handleEdit(record: Recordable) {
+    editRoleRef.value.openModal(record);
+  }
+
+  function handleAddSub(record: Recordable) {
+    let state = newState(null);
+    state.pid = record.id;
+    editRoleRef.value.openModal(state);
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  async function handleMenuAuth(record: Recordable) {
+    editMenuAuthRef.value.openModal(record);
+  }
+
+  function handleDataAuth(record: Recordable) {
+    editDataAuthRef.value.openModal(record);
+  }
+
+  onMounted(() => {
+    loadDataTable();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/redirect/index.vue b/web/src/views/redirect/index.vue
new file mode 100644
index 0000000..175e0ae
--- /dev/null
+++ b/web/src/views/redirect/index.vue
@@ -0,0 +1,22 @@
+<script lang="tsx">
+  import { defineComponent, onBeforeMount } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { NEmpty } from 'naive-ui';
+
+  export default defineComponent({
+    name: 'Redirect',
+    setup() {
+      const route = useRoute();
+      const router = useRouter();
+      onBeforeMount(() => {
+        const { params, query } = route;
+        const { path } = params;
+        router.replace({
+          path: '/' + (Array.isArray(path) ? path.join('/') : path),
+          query,
+        });
+      });
+      return () => <NEmpty />;
+    },
+  });
+</script>
diff --git a/web/src/views/system/blacklist/index.vue b/web/src/views/system/blacklist/index.vue
new file mode 100644
index 0000000..00e6fbc
--- /dev/null
+++ b/web/src/views/system/blacklist/index.vue
@@ -0,0 +1,344 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="访问黑名单">
+      <BasicForm
+        @register="register"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        @keyup.enter="handleSubmit"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="1090"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加策略
+          </n-button>
+          &nbsp;
+          <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+        </template>
+      </BasicTable>
+
+      <n-modal
+        v-model:show="showModal"
+        :show-icon="false"
+        preset="dialog"
+        :title="formParams?.id > 0 ? '编辑策略 #' + formParams.id : '添加策略'"
+        style="width: 720px"
+      >
+        <n-form
+          :model="formParams"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="IP策略" path="ip">
+            <n-input type="textarea" placeholder="请输入IP策略" v-model:value="formParams.ip" />
+            <template #feedback>
+              <p>支持添加IP：如果添加多个IP请用","隔开</p>
+              <p>支持添加IP段,如：192.168.0.0/24</p>
+              <p>支持添加IP范围,格式如：192.168.1.xx-192.168.1.xx</p>
+              <br />
+            </template>
+          </n-form-item>
+
+          <n-form-item label="状态" path="status">
+            <n-radio-group v-model:value="formParams.status" name="status">
+              <n-radio-button
+                v-for="status in dict.getOptionUnRef('BlacklistStatusOptions')"
+                :key="status.value"
+                :value="status.value"
+                :label="status.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item label="备注" path="remark">
+            <n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
+          </n-form-item>
+        </n-form>
+
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showModal = false)">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { Delete, Edit, List, Status } from '@/api/sys/blacklist';
+  import { DeleteOutlined, PlusOutlined } from '@vicons/antd';
+  import { statusActions } from '@/enums/optionsiEnum';
+  import { defRangeShortcuts } from '@/utils/dateUtil';
+  import { useDictStore } from '@/store/modules/dict';
+  import { renderOptionTag } from '@/utils';
+
+  const dict = useDictStore();
+  const columns = [
+    {
+      title: 'ID',
+      key: 'id',
+    },
+    {
+      title: 'IP地址',
+      key: 'ip',
+    },
+    {
+      title: '备注',
+      key: 'remark',
+    },
+    {
+      title: '状态',
+      key: 'status',
+      render(row) {
+        return renderOptionTag('BlacklistStatusOptions', row.status);
+      },
+    },
+    {
+      title: '创建时间',
+      key: 'createdAt',
+    },
+  ];
+
+  const params = ref<any>({
+    pageSize: 10,
+    title: '',
+    content: '',
+    status: null,
+  });
+
+  const rules = {};
+
+  const schemas = ref<FormSchema[]>([
+    {
+      field: 'ip',
+      component: 'NInput',
+      label: 'IP地址',
+      componentProps: {
+        placeholder: '请输入IP地址',
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ message: '请输入IP地址', trigger: ['blur'] }],
+    },
+    {
+      field: 'status',
+      component: 'NSelect',
+      label: '状态',
+      defaultValue: null,
+      componentProps: {
+        placeholder: '请选择类型',
+        options: dict.getOption('BlacklistStatusOptions'),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'created_at',
+      component: 'NDatePicker',
+      label: '创建时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        shortcuts: defRangeShortcuts(),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'remark',
+      component: 'NInput',
+      label: '备注',
+      componentProps: {
+        placeholder: '请输入备注',
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ message: '请输入备注', trigger: ['blur'] }],
+    },
+  ]);
+
+  const message = useMessage();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const searchFormRef = ref<any>({});
+  const formRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+
+  const resetFormParams = {
+    id: 0,
+    ip: '',
+    remark: '',
+    sort: 0,
+    status: 1,
+  };
+  const formParams = ref<any>(resetFormParams);
+
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = resetFormParams;
+  }
+
+  const loadDataTable = async (res) => {
+    return await List({ ...params.value, ...res, ...searchFormRef.value?.formModel });
+  };
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formParams.value)
+          .then((_res) => {
+            message.success('操作成功');
+            setTimeout(() => {
+              showModal.value = false;
+              reloadTable();
+              formParams.value = ref(resetFormParams);
+            });
+          })
+          .catch((e: Error) => {
+            message.error(e.message ?? '操作失败');
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = record;
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value })
+          .then((_res) => {
+            message.success('操作成功');
+            reloadTable();
+          })
+          .catch((e: Error) => {
+            message.error(e.message ?? '操作失败');
+          });
+      },
+    });
+  }
+
+  function handleSubmit(values: Recordable) {
+    params.value = values;
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    params.value = values;
+    reloadTable();
+  }
+
+  onMounted(() => {
+    dict.loadOptions(['BlacklistStatusOptions']);
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/system/config/BasicSetting.vue b/web/src/views/system/config/BasicSetting.vue
new file mode 100644
index 0000000..13c8338
--- /dev/null
+++ b/web/src/views/system/config/BasicSetting.vue
@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="网站名称" path="basicName">
+          <n-input v-model:value="formValue.basicName" placeholder="请输入网站名称" />
+        </n-form-item>
+
+        <n-form-item label="网站logo" path="basicLogo">
+          <FileChooser v-model:value="formValue.basicLogo" file-type="image" />
+        </n-form-item>
+
+        <n-form-item label="网站域名" path="basicDomain">
+          <n-input v-model:value="formValue.basicDomain" placeholder="请输入网站域名" />
+          <template #feedback>
+            如果客户端通过本地或内网访问，则认为是调试模式，走实际请求地址，否则走该配置
+          </template>
+        </n-form-item>
+
+        <n-form-item label="websocket地址" path="basicWsAddr">
+          <n-input v-model:value="formValue.basicWsAddr" placeholder="请输入websocket地址" />
+          <template #feedback>
+            如果客户端通过本地或内网访问，则认为是调试模式，走实际请求地址，否则走该配置
+          </template>
+        </n-form-item>
+
+        <n-form-item label="网站开启访问" path="basicSystemOpen">
+          <n-switch
+            size="large"
+            v-model:value="formValue.basicSystemOpen"
+            @update:value="systemOpenChange"
+          />
+        </n-form-item>
+
+        <n-form-item label="网站关闭提示" path="basicCloseText">
+          <n-input
+            v-model:value="formValue.basicCloseText"
+            type="textarea"
+            placeholder="请输入网站关闭提示"
+          />
+        </n-form-item>
+
+        <n-form-item label="备案编号" path="basicIcpCode">
+          <n-input placeholder="请输入备案编号" v-model:value="formValue.basicIcpCode" />
+        </n-form-item>
+
+        <n-form-item label="版权所有" path="basicCopyright">
+          <n-input placeholder="版权所有" v-model:value="formValue.basicCopyright" />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/sys/config';
+  import FileChooser from '@/components/FileChooser/index.vue';
+
+  const group = ref('basic');
+  const show = ref(false);
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const dialog = useDialog();
+
+  const formValue = ref({
+    basicName: 'HotGo',
+    basicLogo: '',
+    basicDomain: 'https://hotgo.facms.cn',
+    basicWsAddr: 'wss://hotgo.facms.cn/socket',
+    basicIcpCode: '',
+    basicLoginCode: 0,
+    basicRegisterSwitch: 1,
+    basicCaptchaSwitch: 1,
+    basicCopyright: '© 2021 - 2023 HotGo All Rights Reserved.',
+    basicCloseText:
+      '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
+    basicSystemOpen: true,
+  });
+
+  const rules = {
+    basicName: {
+      required: true,
+      message: '请输入网站名称',
+      trigger: 'blur',
+    },
+  };
+
+  function systemOpenChange(value) {
+    if (!value) {
+      dialog.warning({
+        title: '提示',
+        content: '您确定要关闭系统访问吗？该操作保存后立马生效，请慎重操作！',
+        positiveText: '确定',
+        negativeText: '取消',
+        onPositiveClick: () => {
+          // message.success('操作成功');
+        },
+        onNegativeClick: () => {
+          formValue.value.basicSystemOpen = true;
+        },
+      });
+    }
+  }
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    new Promise((_resolve, _reject) => {
+      getConfig({ group: group.value })
+        .then((res) => {
+          formValue.value = res.list;
+        })
+        .finally(() => {
+          show.value = false;
+        });
+    });
+  }
+</script>
diff --git a/web/src/views/system/config/CashSetting.vue b/web/src/views/system/config/CashSetting.vue
new file mode 100644
index 0000000..c005e4c
--- /dev/null
+++ b/web/src/views/system/config/CashSetting.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="申请提现开关" path="cashSwitch">
+          <n-radio-group v-model:value="formValue.cashSwitch" name="cashSwitch">
+            <n-space>
+              <n-radio :value="1">开启</n-radio>
+              <n-radio :value="2">关闭</n-radio>
+            </n-space>
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="提现最低手续费（元）" path="cashMinFee">
+          <n-input-number placeholder="" v-model:value="formValue.cashMinFee" style="width: 100%" />
+        </n-form-item>
+
+        <n-form-item label="提现最低手续费比率" path="cashMinFeeRatio">
+          <n-input-number
+            placeholder=""
+            v-model:value="formValue.cashMinFeeRatio"
+            style="width: 100%"
+          />
+        </n-form-item>
+
+        <n-form-item label="提现最低金额" path="cashMinMoney">
+          <n-input-number
+            placeholder=""
+            v-model:value="formValue.cashMinMoney"
+            style="width: 100%"
+          />
+        </n-form-item>
+
+        <n-form-item label="提现提示信息" path="cashTips">
+          <Editor style="height: 320px" v-model:value="formValue.cashTips" />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/sys/config';
+  import Editor from '@/components/Editor/editor.vue';
+
+  const group = ref('cash');
+  const show = ref(false);
+  const rules = {};
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const formValue = ref({
+    cashSwitch: '',
+    cashMinFee: 0,
+    cashMinFeeRatio: 0,
+    cashMinMoney: 0,
+    cashTips: '',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value })
+          .then((_res) => {
+            message.success('更新成功');
+            load();
+          })
+          .catch((error) => {
+            message.error(error.toString());
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    new Promise((_resolve, _reject) => {
+      getConfig({ group: group.value })
+        .then((res) => {
+          show.value = false;
+          formValue.value = res.list;
+        })
+        .catch((error) => {
+          show.value = false;
+          message.error(error.toString());
+        });
+    });
+  }
+</script>
diff --git a/web/src/views/system/config/EmailSetting.vue b/web/src/views/system/config/EmailSetting.vue
new file mode 100644
index 0000000..51707a7
--- /dev/null
+++ b/web/src/views/system/config/EmailSetting.vue
@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="SMTP服务器" path="smtpHost">
+          <n-input v-model:value="formValue.smtpHost" placeholder="" />
+          <template #feedback> 错误的配置发送邮件会导致服务器超时</template>
+        </n-form-item>
+
+        <n-form-item label="SMTP端口" path="smtpPort">
+          <n-input-number v-model:value="formValue.smtpPort" placeholder="" :show-button="false" />
+          <template #feedback> (不加密默认25,SSL默认465,TLS默认587)</template>
+        </n-form-item>
+        <n-form-item label="SMTP用户名" path="smtpUser">
+          <n-input v-model:value="formValue.smtpUser" placeholder="" />
+          <template #feedback>填写完整用户名</template>
+        </n-form-item>
+
+        <n-form-item label="SMTP密码" path="smtpPass">
+          <n-input
+            v-model:value="formValue.smtpPass"
+            placeholder=""
+            type="password"
+            show-password-on="click"
+          >
+            <template #password-visible-icon>
+              <n-icon :size="16" :component="GlassesOutline" />
+            </template>
+            <template #password-invisible-icon>
+              <n-icon :size="16" :component="Glasses" />
+            </template>
+          </n-input>
+          <template #feedback>填写您的密码</template>
+        </n-form-item>
+
+        <n-form-item label="发件人名称" path="smtpSendName">
+          <n-input v-model:value="formValue.smtpSendName" placeholder="" />
+        </n-form-item>
+
+        <n-form-item label="管理员邮箱" path="smtpAdminMailbox">
+          <n-input v-model:value="formValue.smtpAdminMailbox" placeholder="" />
+        </n-form-item>
+
+        <n-divider title-placement="left">发信限制</n-divider>
+        <n-form-item label="最小发送间隔" path="smtpMinInterval">
+          <n-input-number
+            :show-button="false"
+            placeholder="请输入"
+            v-model:value="formValue.smtpMinInterval"
+          >
+            <template #suffix> 秒 </template>
+          </n-input-number>
+          <template #feedback> 同地址</template>
+        </n-form-item>
+        <n-form-item label="IP最大发送次数" path="smtpMaxIpLimit">
+          <n-input-number v-model:value="formValue.smtpMaxIpLimit" placeholder="" />
+          <template #feedback> 同IP每天最大允许发送次数 </template>
+        </n-form-item>
+        <n-form-item label="验证码有效期" path="smtpCodeExpire">
+          <n-input-number
+            :show-button="false"
+            placeholder="请输入"
+            v-model:value="formValue.smtpCodeExpire"
+          >
+            <template #suffix> 秒 </template>
+          </n-input-number>
+        </n-form-item>
+
+        <n-form-item label="邮件模板" path="smtpTemplate">
+          <n-dynamic-input
+            v-model:value="formValue.smtpTemplate"
+            preset="pair"
+            key-placeholder="事件KEY"
+            value-placeholder="模板路径"
+          />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+            <n-button type="default" @click="sendTest">发送测试邮件</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+
+    <n-modal
+      :block-scroll="false"
+      :mask-closable="false"
+      v-model:show="showModal"
+      :show-icon="false"
+      preset="dialog"
+      title="发送测试邮件"
+    >
+      <n-form
+        :model="formParams"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-form-item label="接收邮箱" path="to">
+          <n-input
+            type="textarea"
+            placeholder="多个用;隔开"
+            v-model:value="formParams.to"
+            :required="true"
+          />
+        </n-form-item>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="() => (showModal = false)">关闭</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">发送</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, sendTestEmail, updateConfig } from '@/api/sys/config';
+  import { GlassesOutline, Glasses } from '@vicons/ionicons5';
+
+  const group = ref('smtp');
+  const show = ref(false);
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const formParams = ref({ to: '' });
+
+  const rules = {
+    smtpHost: {
+      required: true,
+      message: '请输入SMTP服务器',
+      trigger: 'blur',
+    },
+  };
+
+  const formRef: any = ref(null);
+  const message = useMessage();
+
+  const formValue = ref({
+    smtpHost: 'smtpdm.aliyun.com',
+    smtpPort: 25,
+    smtpUser: '',
+    smtpPass: '',
+    smtpSendName: 'HotGo',
+    smtpAdminMailbox: '',
+    smtpMinInterval: 60,
+    smtpMaxIpLimit: 10,
+    smtpCodeExpire: 600,
+    smtpTemplate: null,
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        sendTestEmail(formParams.value).then((_res) => {
+          message.success('发送成功');
+          showModal.value = false;
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function sendTest() {
+    showModal.value = true;
+    formBtnLoading.value = false;
+  }
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    new Promise((_resolve, _reject) => {
+      getConfig({ group: group.value })
+        .then((res) => {
+          res.list.smtpTemplate = JSON.parse(res.list.smtpTemplate);
+          formValue.value = res.list;
+        })
+        .finally(() => {
+          show.value = false;
+        });
+    });
+  }
+</script>
diff --git a/web/src/views/system/config/GeoSetting.vue b/web/src/views/system/config/GeoSetting.vue
new file mode 100644
index 0000000..365883c
--- /dev/null
+++ b/web/src/views/system/config/GeoSetting.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="高德Web服务key" path="geoAmapWebKey">
+          <n-input
+            v-model:value="formValue.geoAmapWebKey"
+            placeholder=""
+            type="password"
+            show-password-on="click"
+          >
+            <template #password-visible-icon>
+              <n-icon :size="16" :component="GlassesOutline" />
+            </template>
+            <template #password-invisible-icon>
+              <n-icon :size="16" :component="Glasses" />
+            </template>
+          </n-input>
+          <template #feedback> 申请地址：https://console.amap.com/dev/key/app</template>
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/sys/config';
+  import { GlassesOutline, Glasses } from '@vicons/ionicons5';
+
+  const group = ref('geo');
+  const show = ref(false);
+
+  const rules = {
+    geoAmapWebKey: {
+      required: true,
+      message: '请输入高德Web服务key',
+      trigger: 'blur',
+    },
+  };
+
+  const formRef: any = ref(null);
+  const message = useMessage();
+
+  const formValue = ref({
+    geoAmapWebKey: '',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    new Promise((_resolve, _reject) => {
+      getConfig({ group: group.value })
+        .then((res) => {
+          formValue.value = res.list;
+        })
+        .finally(() => {
+          show.value = false;
+        });
+    });
+  }
+</script>
diff --git a/web/src/views/system/config/LoginSetting.vue b/web/src/views/system/config/LoginSetting.vue
new file mode 100644
index 0000000..998ec64
--- /dev/null
+++ b/web/src/views/system/config/LoginSetting.vue
@@ -0,0 +1,208 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="100" :model="formValue" ref="formRef">
+        <n-divider title-placement="left">开关配置</n-divider>
+        <n-form-item label="登录验证码开关" path="loginCaptchaSwitch">
+          <n-radio-group v-model:value="formValue.loginCaptchaSwitch" name="loginCaptchaSwitch">
+            <n-space>
+              <n-radio :value="1">开启</n-radio>
+              <n-radio :value="2">关闭</n-radio>
+            </n-space>
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="验证码方式" path="loginCaptchaType">
+          <n-radio-group v-model:value="formValue.loginCaptchaType" name="loginCaptchaType">
+            <n-space>
+              <n-radio :value="1">字符</n-radio>
+              <n-radio :value="2">算数</n-radio>
+            </n-space>
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="注册开关" path="loginRegisterSwitch">
+          <n-radio-group v-model:value="formValue.loginRegisterSwitch" name="cashSwitch">
+            <n-space>
+              <n-radio :value="1">开启</n-radio>
+              <n-radio :value="2">关闭</n-radio>
+            </n-space>
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="强制邀请" path="loginForceInvite">
+          <n-radio-group v-model:value="formValue.loginForceInvite" name="loginForceInvite">
+            <n-space>
+              <n-radio :value="1">开启</n-radio>
+              <n-radio :value="2">关闭</n-radio>
+            </n-space>
+          </n-radio-group>
+          <template #feedback>
+            用户通过注册页面发起注册时是否必须填写邀请信息，用于上下级关系绑定</template
+          >
+        </n-form-item>
+
+        <n-form-item label="自动获取openId" path="loginAutoOpenId">
+          <n-radio-group v-model:value="formValue.loginAutoOpenId" name="loginAutoOpenId">
+            <n-space>
+              <n-radio :value="1">开启</n-radio>
+              <n-radio :value="2">关闭</n-radio>
+            </n-space>
+          </n-radio-group>
+          <template #feedback>
+            在微信内登录后台时，自动获取当前登录人的openid（如开启需要配置微信公众号参数）</template
+          >
+        </n-form-item>
+
+        <n-divider title-placement="left">注册默认信息配置</n-divider>
+        <n-form-item label="默认注册头像" path="loginAvatar">
+          <FileChooser v-model:value="formValue.loginAvatar" file-type="image" />
+        </n-form-item>
+
+        <n-form-item label="默认注册角色" path="loginRoleId">
+          <n-tree-select
+            key-field="id"
+            :options="options.role"
+            v-model:value="formValue.loginRoleId"
+            :default-expand-all="true"
+          />
+        </n-form-item>
+
+        <n-form-item label="默认注册部门" path="loginDeptId">
+          <n-tree-select
+            key-field="id"
+            :options="options.dept"
+            v-model:value="formValue.loginDeptId"
+            :default-expand-all="true"
+          />
+        </n-form-item>
+
+        <n-form-item label="默认注册岗位（非必选）" path="loginPostIds">
+          <n-select v-model:value="formValue.loginPostIds" multiple :options="options.post" />
+        </n-form-item>
+
+        <n-divider title-placement="left">协议配置</n-divider>
+        <n-form-item label="用户协议" path="loginProtocol">
+          <Editor
+            style="height: 320px"
+            v-model:value="formValue.loginProtocol"
+            id="loginProtocol"
+          />
+        </n-form-item>
+
+        <n-form-item label="隐私权政策" path="loginPolicy">
+          <Editor style="height: 320px" v-model:value="formValue.loginPolicy" id="loginPolicy" />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/sys/config';
+  import Editor from '@/components/Editor/editor.vue';
+  import FileChooser from '@/components/FileChooser/index.vue';
+  import { getDeptOption } from '@/api/org/dept';
+  import { getRoleOption } from '@/api/system/role';
+  import { getPostOption } from '@/api/org/post';
+
+  const message = useMessage();
+  const formRef: any = ref(null);
+  const group = ref('login');
+  const show = ref(false);
+
+  const formValue = ref({
+    loginRegisterSwitch: 1,
+    loginCaptchaSwitch: 1,
+    loginCaptchaType: 1, // 1: 'str' or 2: 'numMath'
+    loginForceInvite: 2,
+    loginAutoOpenId: 2,
+    loginAvatar: '',
+    loginProtocol: '',
+    loginPolicy: '',
+    loginRoleId: null,
+    loginDeptId: null,
+    loginPostIds: [],
+  });
+
+  const options = ref<any>({
+    role: [],
+    roleTabs: [{ id: -1, name: '全部' }],
+    dept: [],
+    post: [],
+  });
+
+  async function loadOptions() {
+    const dept = await getDeptOption();
+    if (dept.list !== undefined) {
+      options.value.dept = dept.list;
+    }
+
+    const role = await getRoleOption();
+    if (role.list !== undefined) {
+      options.value.role = role.list;
+      treeDataToCompressed(role.list);
+    }
+
+    const post = await getPostOption();
+    if (post.list !== undefined && post.list.length > 0) {
+      for (let i = 0; i < post.list.length; i++) {
+        post.list[i].label = post.list[i].name;
+        post.list[i].value = post.list[i].id;
+      }
+      options.value.post = post.list;
+    }
+  }
+
+  function treeDataToCompressed(source) {
+    for (const i in source) {
+      options.value.roleTabs.push(source[i]);
+      source[i].children && source[i].children.length > 0
+        ? treeDataToCompressed(source[i].children)
+        : ''; // 子级递归
+    }
+
+    return options.value.roleTabs;
+  }
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value })
+          .then((_res) => {
+            message.success('更新成功');
+            load();
+          })
+          .catch((error) => {
+            message.error(error.toString());
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function load() {
+    show.value = true;
+    getConfig({ group: group.value })
+      .then((res) => {
+        formValue.value = res.list;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+
+  onMounted(async () => {
+    load();
+    await loadOptions();
+  });
+</script>
diff --git a/web/src/views/system/config/PaySetting.vue b/web/src/views/system/config/PaySetting.vue
new file mode 100644
index 0000000..f7715fb
--- /dev/null
+++ b/web/src/views/system/config/PaySetting.vue
@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="开启debug" path="payDebug">
+          <n-switch size="large" v-model:value="formValue.payDebug" />
+          <template #feedback>开启后控制台会输出支付相关的日志</template>
+        </n-form-item>
+
+        <n-divider title-placement="left">支付宝</n-divider>
+        <n-alert :show-icon="false" type="info">
+          确保你已经申请开通过支付宝相关产品权限，建议按照以下步骤进行配置
+          <br />1.
+          下载支付宝平台密钥工具（下载地址：https://opendocs.alipay.com/common/02kipk），加签方式选择证书，加密算法选择RSA2
+          <br />2. 生成后的私钥请在工具中转换为PKCS1格式 <br />3.
+          在支付宝中配置证书，参考地址：https://opendocs.alipay.com/common/02khjo?pathHash=5403bedd
+        </n-alert>
+        <n-form-item label="应用ID" path="payAliPayAppId">
+          <n-input v-model:value="formValue.payAliPayAppId" placeholder="" />
+          <template #feedback></template>
+        </n-form-item>
+
+        <n-form-item label="应用私钥路径" path="payAliPayPrivateKey">
+          <n-input v-model:value="formValue.payAliPayPrivateKey" placeholder="" clearable />
+          <template #feedback
+            >RSA2 加密算法默认生成格式为 PKCS8，系统默认是RSA2加密，切记转换为 PKCS1 格式</template
+          >
+        </n-form-item>
+
+        <n-form-item label="应用公钥" path="payAliPayAppCertPublicKey">
+          <n-input v-model:value="formValue.payAliPayAppCertPublicKey" placeholder="" clearable />
+          <template #feedback>appCertPublicKey.crt证书路径</template>
+        </n-form-item>
+
+        <n-form-item label="支付宝根证书路径" path="payAliPayRootCert">
+          <n-input v-model:value="formValue.payAliPayRootCert" placeholder="" clearable />
+          <template #feedback>alipayRootCert.crt证书路径"</template>
+        </n-form-item>
+
+        <n-form-item label="支付宝公钥证书路径" path="payAliPayCertPublicKeyRSA2">
+          <n-input v-model:value="formValue.payAliPayCertPublicKeyRSA2" placeholder="" clearable />
+          <template #feedback>alipayCertPublicKey_RSA2.crt证书路径"</template>
+        </n-form-item>
+
+        <n-divider title-placement="left">微信支付</n-divider>
+        <n-form-item label="应用ID" path="payWxPayAppId">
+          <n-input v-model:value="formValue.payWxPayAppId" placeholder="" />
+          <template #feedback>和微信配置中的微信公众号配置保持一致</template>
+        </n-form-item>
+
+        <n-form-item label="商户ID" path="payWxPayMchId">
+          <n-input v-model:value="formValue.payWxPayMchId" placeholder="" />
+          <template #feedback>商户ID 或者服务商模式的 sp_mchid</template>
+        </n-form-item>
+
+        <n-form-item label="证书序列号" path="payWxPaySerialNo">
+          <n-input v-model:value="formValue.payWxPaySerialNo" placeholder="" />
+          <template #feedback>商户证书的证书序列号</template>
+        </n-form-item>
+        <n-form-item label="APIv3Key" path="payWxPayAPIv3Key">
+          <n-input v-model:value="formValue.payWxPayAPIv3Key" placeholder="" clearable />
+          <template #feedback>商户平台获取</template>
+        </n-form-item>
+
+        <n-form-item label="私钥" path="payWxPayPrivateKey">
+          <n-input
+            type="textarea"
+            v-model:value="formValue.payWxPayPrivateKey"
+            placeholder=""
+            clearable
+          />
+          <template #feedback>apiclient_key.pem 读取后的内容</template>
+        </n-form-item>
+
+        <n-divider title-placement="left">QQ支付</n-divider>
+        <n-form-item label="应用ID" path="payQQPayAppId">
+          <n-input v-model:value="formValue.payQQPayAppId" placeholder="" />
+          <template #feedback></template>
+        </n-form-item>
+
+        <n-form-item label="商户ID" path="payQQPayMchId">
+          <n-input v-model:value="formValue.payQQPayMchId" placeholder="" />
+          <template #feedback></template>
+        </n-form-item>
+
+        <n-form-item label="ApiKey" path="payQQPayApiKey">
+          <n-input
+            type="textarea"
+            v-model:value="formValue.payQQPayApiKey"
+            placeholder=""
+            clearable
+          />
+          <template #feedback>API秘钥值</template>
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+            <!--            <n-button type="default" @click="sendTest">测试支付</n-button>-->
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+
+    <n-modal
+      :block-scroll="false"
+      :mask-closable="false"
+      v-model:show="showModal"
+      :show-icon="false"
+      preset="dialog"
+      title="发送测试短信"
+    >
+      <n-form
+        :model="formParams"
+        :rules="rules"
+        ref="formTestRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-form-item label="事件模板" path="event">
+          <n-select
+            :options="dict.getOptionUnRef('config_sms_template')"
+            v-model:value="formParams.event"
+          />
+        </n-form-item>
+
+        <n-form-item label="手机号" path="mobile">
+          <n-input
+            placeholder="请输入接收手机号"
+            v-model:value="formParams.mobile"
+            :required="true"
+          />
+        </n-form-item>
+
+        <n-form-item label="验证码" path="code">
+          <n-input
+            placeholder="请输入要接收的验证码"
+            v-model:value="formParams.code"
+            :required="true"
+          />
+        </n-form-item>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="() => (showModal = false)">关闭</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">发送</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, sendTestSms, updateConfig } from '@/api/sys/config';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const group = ref('pay');
+  const show = ref(false);
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const formParams = ref({ mobile: '', event: '', code: '1234' });
+  const rules = {};
+  const formTestRef = ref<any>();
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const dict = useDictStore();
+
+  const formValue = ref({
+    payDebug: true,
+    payAliPayAppId: '',
+    payAliPayPrivateKey: '',
+    payAliPayAppCertPublicKey: '',
+    payAliPayRootCert: '',
+    payAliPayCertPublicKeyRSA2: '',
+    payWxPayAppId: '',
+    payWxPayMchId: '',
+    payWxPaySerialNo: '',
+    payWxPayAPIv3Key: '',
+    payWxPayPrivateKey: '',
+    payQQPayAppId: '',
+    payQQPayMchId: '',
+    payQQPayApiKey: '',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function load() {
+    show.value = true;
+    loadOptions();
+    getConfig({ group: group.value })
+      .then((res) => {
+        formValue.value = res.list;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+
+  function loadOptions() {
+    dict.loadOptions(['config_sms_template', 'config_sms_drive']);
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formTestRef.value.validate((errors) => {
+      if (!errors) {
+        sendTestSms(formParams.value).then((_res) => {
+          message.success('发送成功');
+          showModal.value = false;
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+</script>
diff --git a/web/src/views/system/config/RevealSetting.vue b/web/src/views/system/config/RevealSetting.vue
new file mode 100644
index 0000000..363997b
--- /dev/null
+++ b/web/src/views/system/config/RevealSetting.vue
@@ -0,0 +1,193 @@
+<template>
+  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
+    <n-grid-item>
+      <n-form :label-width="120" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="商品图片(大)">
+          <n-space align="center">
+            <span>宽度：</span>
+            <n-input
+              v-model:value="formValue.bigWidth"
+              style="width: 80px"
+              placeholder="宽度像素"
+            />
+            <span>高度：</span>
+            <n-input
+              v-model:value="formValue.bigHeight"
+              style="width: 80px"
+              placeholder="高度像素"
+            />
+          </n-space>
+        </n-form-item>
+
+        <n-form-item label="商品图片(小)">
+          <n-space align="center">
+            <span>宽度：</span>
+            <n-input
+              v-model:value="formValue.smallWidth"
+              style="width: 80px"
+              placeholder="宽度像素"
+            />
+            <span>高度：</span>
+            <n-input
+              v-model:value="formValue.smallHeight"
+              style="width: 80px"
+              placeholder="高度像素"
+            />
+          </n-space>
+        </n-form-item>
+
+        <n-form-item label="水印透明度" path="watermarkClarity">
+          <n-input-number
+            v-model:value="formValue.watermarkClarity"
+            :show-button="false"
+            placeholder="请输入水印透明度"
+          />
+        </n-form-item>
+
+        <n-form-item label="水印图片" path="watermarkClarity">
+          <n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
+            <n-button>上传文件</n-button>
+          </n-upload>
+        </n-form-item>
+
+        <n-form-item label="水印位置" path="watermarkPlace">
+          <n-select
+            placeholder="请选择价格精确方式"
+            :options="watermarkPlaceList"
+            v-model:value="formValue.watermarkPlace"
+          />
+        </n-form-item>
+
+        <n-form-item label="价格精确位数" path="pricePreciseNum">
+          <n-select
+            placeholder="请选择价格精确位数"
+            :options="pricePreciseNumList"
+            v-model:value="formValue.pricePreciseNum"
+          />
+        </n-form-item>
+
+        <n-form-item label="价格精确方式" path="pricePrecise">
+          <n-select
+            placeholder="请选择价格精确方式"
+            :options="pricePreciseList"
+            v-model:value="formValue.pricePrecise"
+          />
+        </n-form-item>
+
+        <n-form-item label="前台显示市场价" path="isMarketPrice">
+          <n-switch size="large" v-model:value="formValue.isMarketPrice" />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">更新显示信息</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, toRefs } from 'vue';
+  import { useMessage } from 'naive-ui';
+
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入网站名称',
+      trigger: 'blur',
+    },
+    mobile: {
+      required: true,
+      message: '请输入联系电话',
+      trigger: 'input',
+    },
+  };
+  const watermarkPlaceList = [
+    {
+      label: '左上',
+      value: 1,
+    },
+    {
+      label: '右上',
+      value: 2,
+    },
+    {
+      label: '居中',
+      value: 3,
+    },
+    {
+      label: '右下',
+      value: 4,
+    },
+  ];
+
+  const pricePreciseNumList = [
+    {
+      label: '2位',
+      value: 1,
+    },
+    {
+      label: '3位',
+      value: 2,
+    },
+    {
+      label: '4位',
+      value: 3,
+    },
+  ];
+  const pricePreciseList = [
+    {
+      label: '四舍五入',
+      value: 1,
+    },
+    {
+      label: '向上取整',
+      value: 2,
+    },
+    {
+      label: '向下取整',
+      value: 3,
+    },
+  ];
+
+  export default defineComponent({
+    setup() {
+      const formRef: any = ref(null);
+      const message = useMessage();
+      const state = reactive({
+        formValue: {
+          bigWidth: '',
+          bigHeight: '',
+          smallWidth: '',
+          smallHeight: '',
+          watermarkClarity: null,
+          pricePrecise: 1,
+          isMarketPrice: true,
+          pricePreciseNum: null,
+        },
+      });
+
+      function formSubmit() {
+        formRef.value.validate((errors) => {
+          if (!errors) {
+            message.success('验证成功');
+          } else {
+            message.error('验证失败，请填写完整信息');
+          }
+        });
+      }
+
+      return {
+        formRef,
+        ...toRefs(state),
+        pricePreciseList,
+        watermarkPlaceList,
+        pricePreciseNumList,
+        rules,
+        formSubmit,
+      };
+    },
+  });
+</script>
diff --git a/web/src/views/system/config/SmsSetting.vue b/web/src/views/system/config/SmsSetting.vue
new file mode 100644
index 0000000..9c1755d
--- /dev/null
+++ b/web/src/views/system/config/SmsSetting.vue
@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form
+        :label-width="150"
+        :model="formValue"
+        :rules="rules"
+        ref="formRef"
+        label-placement="top"
+      >
+        <n-divider title-placement="left">基础设置</n-divider>
+        <n-form-item label="默认驱动" path="smsDrive">
+          <n-select
+            placeholder="默认发送驱动"
+            :options="dict.getOptionUnRef('config_sms_drive')"
+            v-model:value="formValue.smsDrive"
+          />
+        </n-form-item>
+        <n-form-item label="最小发送间隔" path="smsMinInterval">
+          <n-input-number
+            :show-button="false"
+            placeholder="请输入"
+            v-model:value="formValue.smsMinInterval"
+          >
+            <template #suffix> 秒 </template>
+          </n-input-number>
+          <template #feedback> 同号码</template>
+        </n-form-item>
+        <n-form-item label="IP最大发送次数" path="smsMaxIpLimit">
+          <n-input-number v-model:value="formValue.smsMaxIpLimit" placeholder="" />
+          <template #feedback> 同IP每天最大允许发送次数 </template>
+        </n-form-item>
+        <n-form-item label="验证码有效期" path="smsCodeExpire">
+          <n-input-number
+            :show-button="false"
+            placeholder="请输入"
+            v-model:value="formValue.smsCodeExpire"
+          >
+            <template #suffix> 秒 </template>
+          </n-input-number>
+        </n-form-item>
+
+        <n-tabs type="card" size="small" v-model:value="tabName">
+          <n-tab-pane name="aliyun">
+            <template #tab> 阿里云 </template>
+            <n-divider title-placement="left"> 阿里云</n-divider>
+            <n-form-item label="AccessKeyID" path="smsAliYunAccessKeyID">
+              <n-input v-model:value="formValue.smsAliYunAccessKeyID" placeholder="" />
+              <template #feedback>
+                应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取
+              </template>
+            </n-form-item>
+
+            <n-form-item label="AccessKeySecret" path="smsAliYunAccessKeySecret">
+              <n-input
+                type="password"
+                v-model:value="formValue.smsAliYunAccessKeySecret"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+
+            <n-form-item label="签名" path="smsAliYunSign">
+              <n-input v-model:value="formValue.smsAliYunSign" placeholder="" />
+              <template #feedback>
+                申请地址：https://dysms.console.aliyun.com/domestic/text/sign
+              </template>
+            </n-form-item>
+
+            <n-form-item label="短信模板" path="smsAliYunTemplate">
+              <n-dynamic-input
+                v-model:value="formValue.smsAliYunTemplate"
+                preset="pair"
+                key-placeholder="事件KEY"
+                value-placeholder="模板CODE"
+              />
+            </n-form-item>
+          </n-tab-pane>
+
+          <n-tab-pane name="tencent">
+            <template #tab> 腾讯云 </template>
+            <n-divider title-placement="left"> 腾讯云</n-divider>
+            <n-form-item label="APPID" path="smsTencentSecretId">
+              <n-input v-model:value="formValue.smsTencentSecretId" placeholder="" />
+              <template #feedback>
+                子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140
+              </template>
+            </n-form-item>
+
+            <n-form-item label="密钥" path="smsTencentSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.smsTencentSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+
+            <n-form-item label="接入地域域名" path="smsTencentEndpoint">
+              <n-input v-model:value="formValue.smsTencentEndpoint" placeholder="" />
+              <template #feedback>
+                默认就近地域接入域名为 <n-text code>sms.tencentcloudapi.com</n-text>
+                ，也支持指定地域域名访问，例如广州地域的域名为
+                <n-text code>sms.ap-guangzhou.tencentcloudapi.com</n-text>
+              </template>
+            </n-form-item>
+
+            <n-form-item label="地域信息" path="smsTencentRegion">
+              <n-input v-model:value="formValue.smsTencentRegion" placeholder="" />
+              <template #feedback>
+                支持的地域列表参考
+                https://cloud.tencent.com/document/api/382/52071#.E5.9C.B0.E5.9F.9F.E5.88.97.E8.A1.A8
+              </template>
+            </n-form-item>
+
+            <n-form-item label="短信应用ID" path="smsTencentAppId">
+              <n-input v-model:value="formValue.smsTencentAppId" placeholder="" />
+              <template #feedback>
+                查看地址：https://console.cloud.tencent.com/smsv2/app-manage
+              </template>
+            </n-form-item>
+
+            <n-form-item label="签名" path="smsTencentSign">
+              <n-input v-model:value="formValue.smsTencentSign" placeholder="" />
+              <template #feedback>
+                查看地址：https://console.cloud.tencent.com/smsv2/csms-sign
+              </template>
+            </n-form-item>
+
+            <n-form-item label="短信模板" path="smsTencentTemplate">
+              <n-dynamic-input
+                v-model:value="formValue.smsTencentTemplate"
+                preset="pair"
+                key-placeholder="事件KEY"
+                value-placeholder="模板ID"
+              />
+            </n-form-item>
+          </n-tab-pane>
+
+          <!-- tencent -->
+        </n-tabs>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+            <n-button type="default" @click="sendTest">发送测试短信</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+
+    <n-modal
+      :block-scroll="false"
+      :mask-closable="false"
+      v-model:show="showModal"
+      :show-icon="false"
+      preset="dialog"
+      title="发送测试短信"
+    >
+      <n-form
+        :model="formParams"
+        :rules="rules"
+        ref="formTestRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-form-item label="事件模板" path="event">
+          <n-select
+            :options="dict.getOptionUnRef('config_sms_template')"
+            v-model:value="formParams.event"
+          />
+        </n-form-item>
+
+        <n-form-item label="手机号" path="mobile">
+          <n-input
+            placeholder="请输入接收手机号"
+            v-model:value="formParams.mobile"
+            :required="true"
+          />
+        </n-form-item>
+
+        <n-form-item label="验证码" path="code">
+          <n-input
+            placeholder="请输入要接收的验证码"
+            v-model:value="formParams.code"
+            :required="true"
+          />
+        </n-form-item>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="() => (showModal = false)">关闭</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 发送 </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, watch } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, sendTestSms, updateConfig } from '@/api/sys/config';
+  import { GlassesOutline, Glasses } from '@vicons/ionicons5';
+  import { useDictStore } from '@/store/modules/dict';
+  import type { FormRules } from 'naive-ui/es/form/src/interface';
+
+  const dict = useDictStore();
+  const message = useMessage();
+  const group = ref('sms');
+  const show = ref(false);
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const formParams = ref({ mobile: '', event: '', code: '1234' });
+  const formTestRef = ref<any>();
+  const formRef: any = ref(null);
+  const defaultTabName = 'aliyun';
+  const tabName = ref<string>(defaultTabName);
+
+  const rules: FormRules = {
+    smsDrive: {
+      required: true,
+      message: '请输入默认驱动',
+      trigger: 'blur',
+    },
+  };
+
+  const formValue = ref({
+    smsDrive: defaultTabName,
+    smsMinInterval: 60,
+    smsMaxIpLimit: 10,
+    smsCodeExpire: 600,
+    smsAliYunAccessKeyID: '',
+    smsAliYunAccessKeySecret: '',
+    smsAliYunSign: '',
+    smsAliYunTemplate: null,
+    smsTencentSecretId: '',
+    smsTencentSecretKey: '',
+    smsTencentEndpoint: 'sms.tencentcloudapi.com',
+    smsTencentRegion: 'ap-guangzhou',
+    smsTencentAppId: '',
+    smsTencentSign: '',
+    smsTencentTemplate: null,
+  });
+
+  function sendTest() {
+    showModal.value = true;
+    formBtnLoading.value = false;
+  }
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function load() {
+    show.value = true;
+    getConfig({ group: group.value })
+      .then((res) => {
+        res.list.smsAliYunTemplate = JSON.parse(res.list.smsAliYunTemplate);
+        res.list.smsTencentTemplate = JSON.parse(res.list.smsTencentTemplate);
+        formValue.value = res.list;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+
+  function loadOptions() {
+    dict.loadOptions(['config_sms_template', 'config_sms_drive']);
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formTestRef.value.validate((errors) => {
+      if (!errors) {
+        sendTestSms(formParams.value).then((_res) => {
+          message.success('发送成功');
+          showModal.value = false;
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  watch(
+    () => formValue.value.smsDrive,
+    (smsDrive: string) => {
+      tabName.value = smsDrive;
+    }
+  );
+
+  onMounted(() => {
+    loadOptions();
+    load();
+  });
+</script>
diff --git a/web/src/views/system/config/ThemeSetting.vue b/web/src/views/system/config/ThemeSetting.vue
new file mode 100644
index 0000000..08baab2
--- /dev/null
+++ b/web/src/views/system/config/ThemeSetting.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="默认主题" path="themeDarkTheme">
+          <n-input v-model:value="formValue.themeDarkTheme" placeholder="" />
+          <template #feedback> 可选：'dark' 、 'light' </template>
+        </n-form-item>
+
+        <n-form-item label="默认系统主题" path="themeAppTheme">
+          <n-input v-model:value="formValue.themeAppTheme" placeholder="" />
+          <template #feedback> 默认：#2d8cf0 </template>
+        </n-form-item>
+        <n-form-item label="默认侧边栏风格" path="themeNavTheme">
+          <n-input v-model:value="formValue.themeNavTheme" placeholder="" />
+          <template #feedback>可选：'light'、 'header-dark'</template>
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/sys/config';
+
+  const group = ref('theme');
+  const show = ref(false);
+
+  const rules = {
+    themeDarkTheme: {
+      required: true,
+      message: '请输入默认主题',
+      trigger: 'blur',
+    },
+  };
+
+  const formRef: any = ref(null);
+  const message = useMessage();
+
+  const formValue = ref({
+    themeDarkTheme: 'dark',
+    themeAppTheme: '#2d8cf0',
+    themeNavTheme: 'dark',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    new Promise((_resolve, _reject) => {
+      getConfig({ group: group.value })
+        .then((res) => {
+          formValue.value = res.list;
+        })
+        .finally(() => {
+          show.value = false;
+        });
+    });
+  }
+</script>
diff --git a/web/src/views/system/config/UploadSetting.vue b/web/src/views/system/config/UploadSetting.vue
new file mode 100644
index 0000000..2ad5573
--- /dev/null
+++ b/web/src/views/system/config/UploadSetting.vue
@@ -0,0 +1,409 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form
+        :label-width="150"
+        :model="formValue"
+        :rules="rules"
+        ref="formRef"
+        label-placement="top"
+      >
+        <n-form-item label="默认驱动" path="uploadDrive">
+          <n-select
+            placeholder="默认驱动"
+            :options="dict.getOptionUnRef('config_upload_drive')"
+            v-model:value="formValue.uploadDrive"
+          />
+        </n-form-item>
+
+        <n-tabs type="card" size="small" v-model:value="tabName">
+          <n-tab-pane name="local" tab="本地存储">
+            <n-form-item label="本地存储路径" path="uploadLocalPath">
+              <n-input v-model:value="formValue.uploadLocalPath" placeholder="" />
+              <template #feedback>填对外访问的相对路径</template>
+            </n-form-item>
+          </n-tab-pane>
+
+          <n-tab-pane name="oss" tab="阿里云OSS">
+            <n-form-item label="AccessKey ID" path="uploadOssSecretId">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadOssSecretId"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+              <template #feedback> 创建地址：https://ram.console.aliyun.com/manage/ak </template>
+            </n-form-item>
+
+            <n-form-item label="AccessKey Secret" path="uploadOssSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadOssSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="Endpoint" path="uploadOssEndpoint">
+              <n-input v-model:value="formValue.uploadOssEndpoint" placeholder="" />
+              <template #feedback> Endpoint（地域节点）</template>
+            </n-form-item>
+            <n-form-item label="存储路径" path="uploadOssPath">
+              <n-input v-model:value="formValue.uploadOssPath" placeholder="" />
+              <template #feedback>填对对象存储中的相对路径</template>
+            </n-form-item>
+            <n-form-item label="存储空间名称" path="uploadOssBucket">
+              <n-input v-model:value="formValue.uploadOssBucket" placeholder="" />
+            </n-form-item>
+            <n-form-item label="Bucket 域名" path="uploadOssBucketURL">
+              <n-input v-model:value="formValue.uploadOssBucketURL" placeholder="" />
+            </n-form-item>
+          </n-tab-pane>
+
+          <n-tab-pane name="cos" tab="腾讯云COS">
+            <n-form-item label="APPID" path="uploadCosSecretId">
+              <n-input v-model:value="formValue.uploadCosSecretId" />
+              <template #feedback>
+                子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140
+              </template>
+            </n-form-item>
+
+            <n-form-item label="密钥" path="uploadCosSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadCosSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="存储路径" path="uploadCosPath">
+              <n-input v-model:value="formValue.uploadCosPath" placeholder="" />
+              <template #feedback>填对对象存储中的相对路径</template>
+            </n-form-item>
+            <n-form-item label="访问域名" path="uploadCosBucketURL">
+              <n-input v-model:value="formValue.uploadCosBucketURL" placeholder="" />
+              <template #feedback
+                >控制台查看地址：https://console.cloud.tencent.com/cos5/bucket</template
+              >
+            </n-form-item>
+          </n-tab-pane>
+
+          <n-tab-pane name="qiniu" tab="七牛云对象存储">
+            <n-form-item label="AccessKey" path="uploadQiNiuAccessKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadQiNiuAccessKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+              <template #feedback>创建地址：https://portal.qiniu.com/user/key</template>
+            </n-form-item>
+
+            <n-form-item label="SecretKey" path="uploadQiNiuSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadQiNiuSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="储存路径" path="uploadQiNiuPath">
+              <n-input v-model:value="formValue.uploadQiNiuPath" placeholder="" />
+              <template #feedback>填对对象存储中的相对路径</template>
+            </n-form-item>
+            <n-form-item label="存储空间名称" path="uploadQiNiuBucket">
+              <n-input v-model:value="formValue.uploadQiNiuBucket" placeholder="" />
+            </n-form-item>
+            <n-form-item label="访问域名" path="uploadQiNiuDomain">
+              <n-input v-model:value="formValue.uploadQiNiuDomain" placeholder="" />
+            </n-form-item>
+          </n-tab-pane>
+
+          <n-tab-pane name="ucloud" tab="UC对象存储">
+            <n-form-item label="公钥" path="uploadUCloudPublicKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadUCloudPublicKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+              <template #feedback> 获取地址：https://console.ucloud.cn/ufile/token </template>
+            </n-form-item>
+
+            <n-form-item label="私钥" path="uploadUCloudPrivateKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadUCloudPrivateKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="存储路径" path="uploadUCloudPath">
+              <n-input v-model:value="formValue.uploadUCloudPath" placeholder="" />
+              <template #feedback>填对对象存储中的相对路径</template>
+            </n-form-item>
+            <n-form-item label="地域API" path="uploadUCloudBucketHost">
+              <n-input v-model:value="formValue.uploadUCloudBucketHost" placeholder="" />
+            </n-form-item>
+            <n-form-item label="存储桶名称" path="uploadUCloudBucketName">
+              <n-input v-model:value="formValue.uploadUCloudBucketName" placeholder="" />
+              <template #feedback>存储空间名称</template>
+            </n-form-item>
+            <n-form-item label="存储桶地域host" path="uploadUCloudFileHost">
+              <n-input v-model:value="formValue.uploadUCloudFileHost" placeholder="" />
+              <template #feedback>不需要包含桶名称</template>
+            </n-form-item>
+            <n-form-item label="访问域名" path="uploadUCloudEndpoint">
+              <n-input v-model:value="formValue.uploadUCloudEndpoint" placeholder="" />
+              <template #feedback> 格式，http://abc.com 或 https://abc.com，不可为空 </template>
+            </n-form-item>
+          </n-tab-pane>
+
+          <n-tab-pane name="minio" tab="MinIO">
+            <n-form-item label="AccessKey ID" path="uploadMinioAccessKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadMinioAccessKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+              <template #feedback>相关文档：https://min.io/</template>
+            </n-form-item>
+
+            <n-form-item label="AccessKey Secret" path="uploadMinioSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadMinioSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="Endpoint" path="uploadMinioEndpoint">
+              <n-input v-model:value="formValue.uploadMinioEndpoint" placeholder="" />
+              <template #feedback> Endpoint（不带http://和路径）</template>
+            </n-form-item>
+            <n-form-item path="uploadMinioUseSSL" label="SSL">
+              <n-switch
+                v-model:value="formValue.uploadMinioUseSSL"
+                :checked-value="1"
+                :unchecked-value="2"
+              >
+                <template #checked> 已启用</template>
+                <template #unchecked> 已禁用</template>
+              </n-switch>
+            </n-form-item>
+            <n-form-item label="储存路径" path="uploadMinioPath">
+              <n-input v-model:value="formValue.uploadMinioPath" placeholder="" />
+            </n-form-item>
+            <n-form-item label="存储桶名称" path="uploadMinioBucket">
+              <n-input v-model:value="formValue.uploadMinioBucket" placeholder="" />
+            </n-form-item>
+            <n-form-item label="访问域名" path="uploadMinioDomain">
+              <n-input v-model:value="formValue.uploadMinioDomain" placeholder="" />
+            </n-form-item>
+          </n-tab-pane>
+        </n-tabs>
+
+        <n-grid x-gap="24" :cols="4" class="mt-4">
+          <n-gi>
+            <n-form-item label="图片大小限制" path="uploadImageSize">
+              <n-input-number
+                :show-button="false"
+                placeholder="请输入"
+                v-model:value="formValue.uploadImageSize"
+              >
+                <template #suffix> MB</template>
+              </n-input-number>
+            </n-form-item>
+          </n-gi>
+          <n-gi :span="3">
+            <n-form-item label="图片类型限制" path="uploadImageType">
+              <n-input v-model:value="formValue.uploadImageType" placeholder="" />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
+        <n-grid x-gap="24" :cols="4">
+          <n-gi>
+            <n-form-item label="文件大小限制" path="uploadFileSize">
+              <n-input-number
+                :show-button="false"
+                placeholder="请输入"
+                v-model:value="formValue.uploadFileSize"
+              >
+                <template #suffix> MB</template>
+              </n-input-number>
+            </n-form-item>
+          </n-gi>
+          <n-gi :span="3">
+            <n-form-item label="文件类型限制" path="uploadFileType">
+              <n-input v-model:value="formValue.uploadFileType" placeholder="" />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, watch } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/sys/config';
+  import { Glasses, GlassesOutline } from '@vicons/ionicons5';
+  import { useDictStore } from '@/store/modules/dict';
+  import type { FormRules } from 'naive-ui/es/form/src/interface';
+
+  const dict = useDictStore();
+  const message = useMessage();
+  const group = ref('upload');
+  const show = ref(false);
+  const formRef: any = ref(null);
+  const defaultTabName = 'local';
+  const tabName = ref<string>(defaultTabName);
+
+  const rules: FormRules = {
+    uploadDrive: {
+      required: true,
+      message: '请输入默认驱动',
+      trigger: 'blur',
+    },
+  };
+
+  const formValue = ref({
+    uploadDrive: defaultTabName,
+    uploadImageSize: 2,
+    uploadImageType: '',
+    uploadFileSize: 10,
+    uploadFileType: '',
+    uploadLocalPath: '',
+    uploadUCloudPath: '',
+    uploadUCloudPublicKey: '',
+    uploadUCloudPrivateKey: '',
+    uploadUCloudBucketHost: 'api.ucloud.cn',
+    uploadUCloudBucketName: '',
+    uploadUCloudFileHost: 'cn-bj.ufileos.com',
+    uploadUCloudEndpoint: '',
+    uploadCosSecretId: '',
+    uploadCosSecretKey: '',
+    uploadCosBucketURL: '',
+    uploadCosPath: '',
+    uploadOssSecretId: '',
+    uploadOssSecretKey: '',
+    uploadOssEndpoint: '',
+    uploadOssBucketURL: '',
+    uploadOssPath: '',
+    uploadOssBucket: '',
+    uploadQiNiuAccessKey: '',
+    uploadQiNiuSecretKey: '',
+    uploadQiNiuDomain: '',
+    uploadQiNiuPath: '',
+    uploadQiNiuBucket: '',
+    uploadMinioAccessKey: '',
+    uploadMinioSecretKey: '',
+    uploadMinioEndpoint: '',
+    uploadMinioUseSSL: 2,
+    uploadMinioPath: '',
+    uploadMinioBucket: '',
+    uploadMinioDomain: '',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function load() {
+    show.value = true;
+    getConfig({ group: group.value })
+      .then((res) => {
+        formValue.value = res.list;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+
+  function loadOptions() {
+    dict.loadOptions(['config_upload_drive']);
+  }
+
+  watch(
+    () => formValue.value.uploadDrive,
+    (uploadDrive: string) => {
+      tabName.value = uploadDrive;
+    }
+  );
+
+  onMounted(async () => {
+    loadOptions();
+    load();
+  });
+</script>
diff --git a/web/src/views/system/config/WechatSetting.vue b/web/src/views/system/config/WechatSetting.vue
new file mode 100644
index 0000000..d14fe2b
--- /dev/null
+++ b/web/src/views/system/config/WechatSetting.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
+        <n-divider title-placement="left">公众号</n-divider>
+        <n-form-item label="AppID" path="officialAccountAppId">
+          <n-input v-model:value="formValue.officialAccountAppId" placeholder="" />
+          <template #feedback>请填写微信公众平台后台的AppId</template>
+        </n-form-item>
+
+        <n-form-item label="AppSecret" path="officialAccountAppSecret">
+          <n-input v-model:value="formValue.officialAccountAppSecret" placeholder="" clearable />
+          <template #feedback>请填写微信公众平台后台的AppSecret</template>
+        </n-form-item>
+
+        <n-form-item label="Token" path="officialAccountToken">
+          <n-input v-model:value="formValue.officialAccountToken" placeholder="" clearable />
+          <template #feedback
+            >与公众平台接入设置值一致，必须为英文或者数字，长度为3到32个字符</template
+          >
+        </n-form-item>
+
+        <n-form-item label="EncodingAESKey" path="officialAccountEncodingAESKey">
+          <n-input
+            v-model:value="formValue.officialAccountEncodingAESKey"
+            placeholder=""
+            clearable
+          />
+          <template #feedback
+            >与公众平台接入设置值一致，必须为英文或者数字，长度为43个字符
+          </template>
+        </n-form-item>
+
+        <n-divider title-placement="left">开放平台</n-divider>
+        <n-form-item label="AppID" path="openPlatformAppId">
+          <n-input v-model:value="formValue.openPlatformAppId" placeholder="" />
+          <template #feedback>请填写微信开放平台后台的AppId</template>
+        </n-form-item>
+
+        <n-form-item label="AppSecret" path="openPlatformAppSecret">
+          <n-input v-model:value="formValue.openPlatformAppSecret" placeholder="" clearable />
+          <template #feedback>请填写微信开放平台后台的AppSecret</template>
+        </n-form-item>
+
+        <n-form-item label="Token" path="openPlatformToken">
+          <n-input v-model:value="formValue.openPlatformToken" placeholder="" clearable />
+          <template #feedback
+            >与开放平台接入设置值一致，必须为英文或者数字，长度为3到32个字符</template
+          >
+        </n-form-item>
+
+        <n-form-item label="EncodingAESKey" path="openPlatformEncodingAESKey">
+          <n-input v-model:value="formValue.openPlatformEncodingAESKey" placeholder="" clearable />
+          <template #feedback
+            >与开放平台接入设置值一致，必须为英文或者数字，长度为43个字符</template
+          >
+        </n-form-item>
+
+        <!--        <n-divider title-placement="left">小程序</n-divider>-->
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/sys/config';
+
+  const group = ref('wechat');
+  const show = ref(false);
+  const rules = {};
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const formValue = ref({
+    officialAccountAppId: '',
+    officialAccountAppSecret: '',
+    officialAccountToken: '',
+    officialAccountEncodingAESKey: '',
+    openPlatformAppId: '',
+    openPlatformAppSecret: '',
+    openPlatformToken: '',
+    openPlatformEncodingAESKey: '',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  async function load() {
+    show.value = true;
+    new Promise((_resolve, _reject) => {
+      getConfig({ group: group.value })
+        .then((res) => {
+          formValue.value = res.list;
+        })
+        .finally(() => {
+          show.value = false;
+        });
+    });
+  }
+</script>
diff --git a/web/src/views/system/config/system.vue b/web/src/views/system/config/system.vue
new file mode 100644
index 0000000..81b8451
--- /dev/null
+++ b/web/src/views/system/config/system.vue
@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <n-grid cols="24 300:1 600:24" :x-gap="12">
+      <n-grid-item span="6">
+        <n-card :bordered="false" size="small" class="proCard">
+          <n-thing
+            class="thing-cell"
+            v-for="item in typeTabList"
+            :key="item.key"
+            :class="{ 'thing-cell-on': type === item.key }"
+            @click="switchType(item)"
+          >
+            <template #header>{{ item.name }}</template>
+            <template #description>{{ item.desc }}</template>
+          </n-thing>
+        </n-card>
+      </n-grid-item>
+      <n-grid-item span="18">
+        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
+          <BasicSetting v-if="type === 1" />
+          <ThemeSetting v-if="type === 2" />
+          <RevealSetting v-if="type === 3" />
+          <EmailSetting v-if="type === 4" />
+          <SmsSetting v-if="type === 5" />
+          <LoginSetting v-if="type === 6" />
+          <CashSetting v-if="type === 7" />
+          <UploadSetting v-if="type === 8" />
+          <GeoSetting v-if="type === 9" />
+          <PaySetting v-if="type === 10" />
+          <WechatSetting v-if="type === 11" />
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+<script lang="ts">
+  import { defineAsyncComponent, defineComponent, reactive, toRefs, onMounted } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { pushHashRouterParameter } from '@/utils/urlUtils';
+  /** 异步加载的组件，用到的时候再加载组件 */
+  const BasicSetting = defineAsyncComponent(() => {
+      return import('./BasicSetting.vue');
+    }),
+    RevealSetting = defineAsyncComponent(() => {
+      return import('./RevealSetting.vue');
+    }),
+    EmailSetting = defineAsyncComponent(() => {
+      return import('./EmailSetting.vue');
+    }),
+    ThemeSetting = defineAsyncComponent(() => {
+      return import('./ThemeSetting.vue');
+    }),
+    CashSetting = defineAsyncComponent(() => {
+      return import('./CashSetting.vue');
+    }),
+    UploadSetting = defineAsyncComponent(() => {
+      return import('./UploadSetting.vue');
+    }),
+    GeoSetting = defineAsyncComponent(() => {
+      return import('./GeoSetting.vue');
+    }),
+    SmsSetting = defineAsyncComponent(() => {
+      return import('./SmsSetting.vue');
+    }),
+    PaySetting = defineAsyncComponent(() => {
+      return import('./PaySetting.vue');
+    }),
+    WechatSetting = defineAsyncComponent(() => {
+      return import('./WechatSetting.vue');
+    }),
+    LoginSetting = defineAsyncComponent(() => {
+      return import('./LoginSetting.vue');
+    });
+  const typeTabList = [
+    {
+      name: '基本设置',
+      desc: '系统常规设置',
+      key: 1,
+    },
+    // {
+    //   name: '主题设置',
+    //   desc: '系统主题设置',
+    //   key: 2,
+    // },
+    // {
+    //   name: '显示设置',
+    //   desc: '系统显示设置',
+    //   key: 3,
+    // },
+    {
+      name: '邮件设置',
+      desc: '系统邮件设置',
+      key: 4,
+    },
+    {
+      name: '短信配置',
+      desc: '短信验证码平台',
+      key: 5,
+    },
+    {
+      name: '登录注册',
+      desc: '登录注册配置',
+      key: 6,
+    },
+    {
+      name: '提现配置',
+      desc: '管理员提现规则配置',
+      key: 7,
+    },
+    {
+      name: '云存储',
+      desc: '配置上传文件驱动',
+      key: 8,
+    },
+    {
+      name: '地理位置',
+      desc: '配置地理位置工具',
+      key: 9,
+    },
+    {
+      name: '支付配置',
+      desc: '支付宝/微信/QQ支付配置等',
+      key: 10,
+    },
+    {
+      name: '微信配置',
+      desc: '公众号/开放平台/小程序配置等',
+      key: 11,
+    },
+  ];
+  export default defineComponent({
+    components: {
+      BasicSetting,
+      RevealSetting,
+      EmailSetting,
+      ThemeSetting,
+      CashSetting,
+      UploadSetting,
+      GeoSetting,
+      SmsSetting,
+      PaySetting,
+      WechatSetting,
+      LoginSetting,
+    },
+    setup() {
+      const router = useRouter();
+      const state = reactive({
+        type: 1,
+        typeTitle: '基本设置',
+      });
+
+      function switchType(e) {
+        state.type = e.key;
+        state.typeTitle = e.name;
+        pushHashRouterParameter(window.location.href, 'type', e.key);
+      }
+
+      function setDefaultOption() {
+        const key = router.currentRoute.value.query.type as unknown as number;
+        if (key !== undefined && key > 0) {
+          for (const item of typeTabList) {
+            if (item.key == key) {
+              switchType(item);
+            }
+          }
+        }
+      }
+
+      onMounted(() => {
+        if (router.currentRoute.value.query?.type) {
+          setDefaultOption();
+        }
+      });
+
+      return {
+        ...toRefs(state),
+        switchType,
+        typeTabList,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .thing-cell {
+    margin: 0 -16px 10px;
+    padding: 5px 16px;
+
+    &:hover {
+      background: #f3f3f3;
+      cursor: pointer;
+    }
+  }
+
+  .thing-cell-on {
+    background: #f0faff;
+    color: #2d8cf0;
+
+    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+      color: #2d8cf0;
+    }
+
+    &:hover {
+      background: #f0faff;
+    }
+  }
+</style>
diff --git a/web/src/views/system/cron/columns.ts b/web/src/views/system/cron/columns.ts
new file mode 100644
index 0000000..35f5c33
--- /dev/null
+++ b/web/src/views/system/cron/columns.ts
@@ -0,0 +1,93 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+const policyOptions = {
+  1: '并行策略',
+  2: '单例策略',
+  3: '单次策略',
+  4: '多次策略',
+};
+
+export const columns = [
+  {
+    title: 'ID',
+    key: 'id',
+    width: 80,
+  },
+  {
+    title: '任务标题',
+    key: 'title',
+    width: 150,
+  },
+  {
+    title: '任务分组',
+    key: 'groupName',
+    width: 100,
+  },
+  {
+    title: '执行方法',
+    key: 'name',
+    width: 100,
+  },
+  // {
+  //   title: '执行参数',
+  //   key: 'params',
+  //   render(row) {
+  //     return row.params;
+  //   },
+  // },
+  {
+    title: '执行策略',
+    key: 'policy',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'info',
+          bordered: false,
+        },
+        {
+          default: () => policyOptions[row.policy] ?? '未知',
+        }
+      );
+    },
+    width: 100,
+  },
+  {
+    title: '表达式',
+    key: 'pattern',
+    width: 150,
+  },
+  // {
+  //   title: '执行次数',
+  //   key: 'count',
+  // },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.status == 1 ? 'success' : 'warning',
+          bordered: false,
+        },
+        {
+          default: () => (row.status == 1 ? '运行中' : '已结束'),
+        }
+      );
+    },
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 180,
+  },
+];
diff --git a/web/src/views/system/cron/index.vue b/web/src/views/system/cron/index.vue
new file mode 100644
index 0000000..4195c5b
--- /dev/null
+++ b/web/src/views/system/cron/index.vue
@@ -0,0 +1,554 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="定时任务">
+      <BasicForm
+        @register="register"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        @keyup.enter="handleSubmit"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加任务
+          </n-button>
+          &nbsp;
+          <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          &nbsp;
+          <n-button type="info" @click="openGroupModal">
+            <template #icon>
+              <n-icon>
+                <GroupOutlined />
+              </n-icon>
+            </template>
+            任务分组
+          </n-button>
+        </template>
+      </BasicTable>
+
+      <n-modal
+        v-model:show="showModal"
+        :show-icon="false"
+        preset="dialog"
+        :title="formParams?.id > 0 ? '编辑任务 #' + formParams.id : '添加任务'"
+        style="width: 720px"
+      >
+        <n-form
+          :model="formParams"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="任务分组" path="groupId">
+            <n-tree-select
+              :options="optionTreeData"
+              :default-value="formParams.groupId"
+              @update:value="handleUpdateValue"
+            />
+          </n-form-item>
+
+          <n-form-item label="任务标题" path="title">
+            <n-input placeholder="请输入任务标题" v-model:value="formParams.title" />
+          </n-form-item>
+
+          <n-form-item label="执行方法" path="name">
+            <n-input placeholder="请输入执行方法" v-model:value="formParams.name" />
+            <template #feedback>go方法名称</template>
+          </n-form-item>
+
+          <n-form-item label="执行参数" path="params">
+            <n-input
+              type="textarea"
+              placeholder="请输入执行参数，如果函数需要多个参数请用,隔开"
+              v-model:value="formParams.params"
+            />
+          </n-form-item>
+
+          <n-form-item label="执行策略" path="policy">
+            <n-radio-group v-model:value="formParams.policy" name="policy">
+              <n-radio-button
+                v-for="type in policyOptions"
+                :key="type.value"
+                :value="type.value"
+                :label="type.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item label="执行次数" path="count" v-if="formParams.policy === 4">
+            <n-input placeholder="请输入执行次数" v-model:value="formParams.count" />
+          </n-form-item>
+
+          <n-form-item label="表达式" path="pattern">
+            <n-input placeholder="请输入定时表达式" v-model:value="formParams.pattern" />
+            <template #feedback>
+              表达式语法参考：<a
+                target="_blank"
+                href="https://goframe.org/pages/viewpage.action?pageId=30736411"
+                >https://goframe.org/pages/viewpage.action?pageId=30736411</a
+              >
+            </template>
+          </n-form-item>
+
+          <n-form-item label="排序" path="sort">
+            <n-input-number v-model:value="formParams.sort" clearable />
+          </n-form-item>
+
+          <n-form-item label="状态" path="status">
+            <n-radio-group v-model:value="formParams.status" name="status">
+              <n-radio-button
+                v-for="status in statusOptions"
+                :key="status.value"
+                :value="status.value"
+                :label="status.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item label="备注" path="remark">
+            <n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
+          </n-form-item>
+        </n-form>
+
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showModal = false)">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-card>
+
+    <GroupModal ref="GroupModalRef" @reloadGroupOption="reloadGroupOption" />
+
+    <n-modal
+      v-model:show="showStdout"
+      style="width: 72%"
+      :show-icon="false"
+      preset="dialog"
+      title="调度日志"
+    >
+      <n-form ref="formRef" label-placement="left" :label-width="80" class="py-4">
+        <n-form-item label="日志文件" path="fileName">
+          <n-input placeholder="" v-model:value="log.fileName" readonly />
+        </n-form-item>
+
+        <n-form-item label="文件大小" path="sizeFormat">
+          <n-input placeholder="" v-model:value="log.sizeFormat" readonly />
+        </n-form-item>
+
+        <n-form-item label="日志内容" path="log" class="n-code-container">
+          <n-code
+            class="n-code-contents"
+            id="n-code"
+            :word-wrap="true"
+            :code="log?.contents ?? ''"
+            language="html"
+          />
+        </n-form-item>
+      </n-form>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, onBeforeMount, computed } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { Delete, Edit, getSelect, List, Status, OnlineExec, DispatchLog } from '@/api/sys/cron';
+  import { columns } from './columns';
+  import { DeleteOutlined, GroupOutlined, PlusOutlined } from '@vicons/antd';
+  import GroupModal from './modal/modal.vue';
+  import { adaTableScrollX } from '@/utils/hotgo';
+
+  const optionTreeData = ref<any>([]);
+  const defaultValueRef = () => ({
+    id: 0,
+    groupId: 0,
+    title: '',
+    name: '',
+    params: '',
+    pattern: '',
+    policy: 1,
+    count: 1,
+    sort: 0,
+    remark: '',
+    status: 1,
+  });
+  const params = ref<any>({
+    pageSize: 10,
+    title: '',
+    content: '',
+    status: null,
+  });
+
+  const rules = {};
+
+  const policyOptions = [
+    {
+      value: 1,
+      label: '并行策略',
+    },
+    {
+      value: 2,
+      label: '单例策略',
+    },
+    {
+      value: 3,
+      label: '单次策略',
+    },
+    {
+      value: 4,
+      label: '多次策略',
+    },
+  ].map((s) => {
+    return s;
+  });
+
+  const statusOptions = [
+    {
+      value: 1,
+      label: '运行中',
+    },
+    {
+      value: 2,
+      label: '已结束',
+    },
+  ].map((s) => {
+    return s;
+  });
+
+  const statusActions = [
+    {
+      label: '设为运行中',
+      key: 1,
+    },
+    {
+      label: '设为已结束',
+      key: 2,
+    },
+    {
+      label: '删除任务',
+      key: 3,
+    },
+  ];
+
+  const groupOptions = ref<any>([]);
+  const showStdout = ref(false);
+  const log = ref();
+  const schemas: FormSchema[] = [
+    {
+      field: 'groupId',
+      component: 'NTreeSelect',
+      label: '任务分组',
+      defaultValue: null,
+      componentProps: {
+        placeholder: '请选择分组',
+        options: groupOptions,
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '任务名称',
+      componentProps: {
+        placeholder: '请输入任务名称',
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ message: '请输入任务名称', trigger: ['blur'] }],
+    },
+    {
+      field: 'policy',
+      component: 'NSelect',
+      label: '执行策略',
+      defaultValue: null,
+      componentProps: {
+        placeholder: '请选择策略',
+        options: policyOptions,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'status',
+      component: 'NSelect',
+      label: '运行状态',
+      defaultValue: null,
+      componentProps: {
+        placeholder: '请选择类型',
+        options: statusOptions,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+  ];
+
+  const message = useMessage();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const searchFormRef = ref<any>({});
+  const formRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  let formParams = ref<any>(defaultValueRef());
+
+  const actionColumn = reactive({
+    width: 320,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '在线执行',
+            onClick: handleExecute.bind(null, record),
+            type: 'success',
+          },
+          {
+            label: '调度日志',
+            onClick: handleDispatchLog.bind(null, record),
+            type: 'default',
+          },
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+        ],
+        dropDownActions: statusActions,
+        select: (key) => {
+          if (key < 3) {
+            updateStatus(record.id, key);
+            return;
+          }
+          if (key == 3) {
+            handleDelete(record);
+            return;
+          }
+        },
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = defaultValueRef();
+  }
+
+  const loadDataTable = async (res) => {
+    return await List({ ...params.value, ...res, ...searchFormRef.value?.formModel });
+  };
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formParams.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showModal.value = false;
+            reloadTable();
+            formParams.value = ref(defaultValueRef());
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = record;
+  }
+
+  function handleDispatchLog(record: Recordable) {
+    DispatchLog(record).then((res) => {
+      showStdout.value = true;
+      log.value = res;
+
+      setTimeout(() => {
+        const container = document.getElementById('n-code');
+        container.scrollTop = container.scrollHeight;
+      }, 100);
+    });
+  }
+
+  function handleExecute(record: Recordable) {
+    dialog.info({
+      title: '提示',
+      content: '提交成功后将立即执行一次，你确定要执行吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        OnlineExec(record).then((_res) => {
+          message.success('提交成功，执行结果请登录控制台查看日志！');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleSubmit(values: Recordable) {
+    params.value = values;
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    params.value = values;
+    reloadTable();
+  }
+
+  function updateStatus(id, status) {
+    Status({ id: id, status: status }).then((_res) => {
+      message.success('操作成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
+  const GroupModalRef = ref();
+  function openGroupModal() {
+    const { openDrawer } = GroupModalRef.value;
+    openDrawer();
+  }
+
+  async function reloadGroupOption() {
+    const tmp = await getSelect({});
+    optionTreeData.value = tmp.list;
+    if (optionTreeData.value === undefined || optionTreeData.value === null) {
+      optionTreeData.value = [];
+    }
+    groupOptions.value = transformGroupData(optionTreeData.value);
+  }
+
+  function transformGroupData(data: any[]) {
+    return data.map((item) => {
+      return {
+        key: item.key,
+        value: item.key,
+        label: item.label,
+        children: item.children !== null ? transformGroupData(item.children) : null,
+      };
+    });
+  }
+
+  onBeforeMount(async () => {
+    await reloadGroupOption();
+  });
+
+  // 处理选项更新
+  function handleUpdateValue(value: string | number) {
+    formParams.value.groupId = value;
+  }
+</script>
+
+<style lang="less" scoped>
+  .n-code-container {
+    height: 450px;
+    width: 100%;
+  }
+
+  .n-code-contents {
+    height: 450px;
+    width: 100%;
+    overflow: auto;
+    background: #2f3129;
+    color: wheat;
+    padding: 10px;
+  }
+</style>
diff --git a/web/src/views/system/cron/modal/columns.ts b/web/src/views/system/cron/modal/columns.ts
new file mode 100644
index 0000000..7774dcf
--- /dev/null
+++ b/web/src/views/system/cron/modal/columns.ts
@@ -0,0 +1,83 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id',
+    width: 100,
+  },
+  {
+    title: '分组名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150,
+  },
+  {
+    title: '上级分组',
+    dataIndex: 'supName',
+    key: 'supName',
+    width: 150,
+    render(row) {
+      if (row.supName == ''){
+        return '顶级分组';
+      }
+      return row.supName;
+    },
+  },
+  {
+    title: '默认',
+    dataIndex: 'isDefault',
+    key: 'isDefault',
+    render(row) {
+      return row.isDefault === 1 ? '是' : '否';
+    },
+    width: 80,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.status === 1 ? 'info' : 'error',
+          bordered: false,
+        },
+        {
+          default: () => (row.status === 1 ? '正常' : '禁用'),
+        }
+      );
+    },
+    width: 150,
+  },
+  // {
+  //   title: '排序',
+  //   dataIndex: 'sort',
+  //   key: 'sort',
+  //   width: 100,
+  // },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    width: 150,
+  },
+  // {
+  //   title: '更新时间',
+  //   dataIndex: 'updatedAt',
+  //   key: 'updatedAt',
+  //   width: 160,
+  // },
+  {
+    title: '创建时间',
+    dataIndex: 'createdAt',
+    key: 'createdAt',
+    width: 160,
+  },
+];
diff --git a/web/src/views/system/cron/modal/index.vue b/web/src/views/system/cron/modal/index.vue
new file mode 100644
index 0000000..8e6a1df
--- /dev/null
+++ b/web/src/views/system/cron/modal/index.vue
@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard">
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="1090"
+        :flex-height="false"
+        :pagination="{ pageSize: 10 }"
+        :resizeHeightOffset="-50000"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加分组
+          </n-button>
+        </template>
+      </BasicTable>
+
+      <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" :title="modalTitle">
+        <n-form
+          :model="formParams"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="上级分组" path="pid">
+            <n-tree-select
+              :options="optionTreeData"
+              :default-value="formParams.pid"
+              @update:value="handleUpdateValue"
+            />
+          </n-form-item>
+          <n-form-item label="分组名称" path="name">
+            <n-input placeholder="请输入分组名称" v-model:value="formParams.name" />
+          </n-form-item>
+
+          <n-form-item label="状态" path="status">
+            <n-radio-group v-model:value="formParams.status" name="status">
+              <n-radio-button
+                v-for="status in statusOptions"
+                :key="status.value"
+                :value="status.value"
+                :label="status.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+
+<!--          <n-form-item label="排序" path="sort">-->
+<!--            <n-input-number v-model:value="formParams.sort" clearable />-->
+<!--          </n-form-item>-->
+
+          <n-form-item label="备注" path="remark">
+            <n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
+          </n-form-item>
+        </n-form>
+
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showModal = false)">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { columns } from './columns';
+  import { PlusOutlined } from '@vicons/antd';
+  import { GroupDelete, GroupEdit, GroupList, getSelect } from '@/api/sys/cron';
+  import { statusOptions } from '@/enums/optionsiEnum';
+
+  const emit = defineEmits(['reloadGroupOption']);
+  const optionTreeData = ref<any>([]);
+  const message = useMessage();
+  const statusValue = ref(1);
+  const defaultValueRef = () => ({
+    id: 0,
+    pid: 0,
+    name: '',
+    sort: 0,
+    remark: '',
+    status: statusValue.value,
+  });
+  const modalTitle = ref('添加分组');
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const rules = {
+    name: {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入名称',
+    },
+  };
+
+  function addTable() {
+    showModal.value = true;
+    modalTitle.value = '添加分组';
+    formParams.value = defaultValueRef();
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        GroupEdit(formParams.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showModal.value = false;
+            reloadTable();
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  const dialog = useDialog();
+  const actionRef = ref();
+  const formParams = ref<any>(defaultValueRef);
+  const formRef = ref<any>({});
+
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    // fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    modalTitle.value = '编辑分组 ID：' + record.id;
+    formParams.value = {
+      id: record.id,
+      pid: record.pid,
+      name: record.name,
+      sort: record.sort,
+      remark: record.remark,
+      status: record.status,
+    };
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        GroupDelete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  const dataSource = ref({
+    successful_order: 0,
+    transaction_money: 0,
+  });
+
+  const loadDataTable = async (res) => {
+    dataSource.value = await GroupList({ ...res });
+    return dataSource.value;
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+    emit('reloadGroupOption');
+  }
+
+  async function setDictSelect() {
+    const tmp = await getSelect({});
+    optionTreeData.value = [
+      {
+        id: 0,
+        key: 0,
+        label: '顶级分组',
+        pid: 0,
+        name: '顶级分组',
+      },
+    ];
+    optionTreeData.value = optionTreeData.value.concat(tmp.list);
+  }
+
+  onMounted(async () => {
+    await setDictSelect();
+  });
+
+  // 处理选项更新
+  function handleUpdateValue(value: string | number | Array<string | number> | null) {
+    formParams.value.pid = value;
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/system/cron/modal/modal.vue b/web/src/views/system/cron/modal/modal.vue
new file mode 100644
index 0000000..d851f78
--- /dev/null
+++ b/web/src/views/system/cron/modal/modal.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      style="width: 80%; height: 700px"
+      :show-icon="false"
+      preset="dialog"
+      :title="title"
+    >
+      <Index @reloadGroupOption="reloadGroupOption" />
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import Index from './index.vue';
+
+  const emit = defineEmits(['reloadGroupOption']);
+  const showModal = ref(false);
+  const title = ref('任务分组');
+
+  function openDrawer() {
+    showModal.value = true;
+  }
+
+  function reloadGroupOption() {
+    emit('reloadGroupOption');
+  }
+
+  defineExpose({ openDrawer });
+</script>
+
+<style scoped></style>
diff --git a/web/src/views/system/dict/CreateDrawer.vue b/web/src/views/system/dict/CreateDrawer.vue
new file mode 100644
index 0000000..5e8da0d
--- /dev/null
+++ b/web/src/views/system/dict/CreateDrawer.vue
@@ -0,0 +1,132 @@
+<template>
+  <n-drawer
+    v-model:show="isDrawer"
+    :width="dialogWidth"
+    :label-placement="settingStore.isMobile ? 'top' : 'left'"
+  >
+    <n-drawer-content :title="title" closable>
+      <n-form
+        :model="formParams"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="100"
+      >
+        <n-divider title-placement="left">基本设置</n-divider>
+        <n-form-item label="上级字典" path="pid">
+          <n-tree-select
+            :options="optionTreeData"
+            :default-value="formParams.pid"
+            @update:value="handleUpdateValue"
+          />
+        </n-form-item>
+        <n-form-item label="类型名称" path="name">
+          <n-input placeholder="请输入类型名称" v-model:value="formParams.name" />
+        </n-form-item>
+        <n-form-item label="类型编码" path="type">
+          <n-input placeholder="请输入类型编码" v-model:value="formParams.type" />
+        </n-form-item>
+        <n-form-item label="排序" path="sort">
+          <n-input-number v-model:value="formParams.sort" clearable />
+        </n-form-item>
+        <n-form-item label="状态" path="status">
+          <n-radio-group v-model:value="formParams.status" name="status">
+            <n-radio-button
+              v-for="status in dict.getOptionUnRef('sys_normal_disable')"
+              :key="status.value"
+              :value="status.value"
+              :label="status.label"
+            />
+          </n-radio-group>
+        </n-form-item>
+      </n-form>
+
+      <template #footer>
+        <n-space>
+          <n-button type="primary" :loading="btnLoading" @click="formSubmit">提交</n-button>
+          <n-button @click="closeDrawer">取消</n-button>
+        </n-space>
+      </template>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { EditDict } from '@/api/dict/dict';
+  import { useDictStore } from '@/store/modules/dict';
+  import type { FormRules } from 'naive-ui/es/form/src/interface';
+  import { State } from '@/views/system/dict/model';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+
+  const rules: FormRules = {
+    name: {
+      required: true,
+      message: '请输入类型名称',
+      trigger: 'blur',
+    },
+    type: {
+      required: true,
+      message: '请输入类型编码',
+      trigger: 'blur',
+    },
+  };
+
+  interface Props {
+    title: '添加顶级菜单';
+    optionTreeData: [];
+  }
+
+  const emit = defineEmits(['loadData']);
+  const props = withDefaults(defineProps<Props>(), {});
+  const dict = useDictStore();
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const formRef: any = ref(null);
+  const formParams = ref<State>(new State());
+  const btnLoading = ref(false);
+  const isDrawer = ref(false);
+
+  const dialogWidth = computed(() => {
+    return adaModalWidth(500);
+  });
+
+  function openDrawer(state: State) {
+    isDrawer.value = true;
+    formParams.value = state;
+  }
+
+  function closeDrawer() {
+    isDrawer.value = false;
+  }
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        btnLoading.value = true;
+        EditDict(formParams.value)
+          .then(async (_res) => {
+            message.success('操作成功');
+            emit('loadData');
+            closeDrawer();
+          })
+          .finally(() => {
+            btnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  // 处理选项更新
+  function handleUpdateValue(value: number) {
+    formParams.value.pid = value;
+  }
+
+  defineExpose({
+    openDrawer,
+  });
+</script>
diff --git a/web/src/views/system/dict/columns.ts b/web/src/views/system/dict/columns.ts
new file mode 100644
index 0000000..8dfaa4d
--- /dev/null
+++ b/web/src/views/system/dict/columns.ts
@@ -0,0 +1,74 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    title: '字典ID',
+    key: 'id',
+  },
+  {
+    title: '字典类型',
+    key: 'type',
+  },
+  {
+    title: '字典标签',
+    key: 'type',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.listClass,
+          bordered: false,
+        },
+        {
+          default: () => row.label,
+        }
+      );
+    },
+  },
+  {
+    title: '字典键值',
+    key: 'value',
+  },
+  {
+    title: '键值类型',
+    key: 'valueType',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'default',
+          bordered: false,
+        },
+        {
+          default: () => row.valueType,
+        }
+      );
+    },
+  },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.status == 1 ? 'success' : 'warning',
+          bordered: false,
+        },
+        {
+          default: () => (row.status == 1 ? '正常' : '隐藏'),
+        }
+      );
+    },
+  },
+];
diff --git a/web/src/views/system/dict/index.vue b/web/src/views/system/dict/index.vue
new file mode 100644
index 0000000..fbcbc7b
--- /dev/null
+++ b/web/src/views/system/dict/index.vue
@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="字典管理">
+        可代替后台管理系统，设置的大量枚举值和配置，统一标准化管理，随时修改或增加
+      </n-card>
+    </div>
+    <n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12">
+      <n-gi span="1">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-button type="info" icon-placement="left" @click="openCreateDrawer">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <PlusOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                添加
+              </n-button>
+              <n-button
+                type="info"
+                icon-placement="left"
+                @click="openEditDrawer"
+                :disabled="formParams.id === 0"
+              >
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <EditOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                编辑
+              </n-button>
+              <n-button type="error" icon-placement="left" @click="handleDel">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <DeleteOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                删除
+              </n-button>
+              <n-button type="info" icon-placement="left" @click="packHandle">
+                {{ expandedKeys.length ? '收起' : '展开' }}
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <AlignLeftOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+              </n-button>
+            </n-space>
+          </template>
+          <div class="w-full menu">
+            <n-input type="text" v-model:value="pattern" placeholder="输入字典名称搜索">
+              <template #suffix>
+                <n-icon size="18" class="cursor-pointer">
+                  <SearchOutlined />
+                </n-icon>
+              </template>
+            </n-input>
+            <div class="py-3 menu-list">
+              <template v-if="loading">
+                <div class="flex items-center justify-center py-4">
+                  <n-spin size="medium" />
+                </div>
+              </template>
+              <template v-else>
+                <n-tree
+                  block-line
+                  cascade
+                  checkable
+                  :virtual-scroll="true"
+                  :pattern="pattern"
+                  :data="treeData"
+                  :expandedKeys="expandedKeys"
+                  style="max-height: 95%; overflow: hidden"
+                  @update:selected-keys="selectedTree"
+                  @update:expanded-keys="onExpandedKeys"
+                />
+              </template>
+            </div>
+          </div>
+        </n-card>
+      </n-gi>
+      <n-gi span="3">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-icon size="18">
+                <FormOutlined />
+              </n-icon>
+              <span>编辑字典{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
+              <span style="font-size: 14px">{{
+                treeItemTitle ? '' : '从列表选择一项后，进行编辑'
+              }}</span>
+            </n-space>
+          </template>
+
+          <List :checkedId="checkedId" />
+        </n-card>
+      </n-gi>
+    </n-grid>
+    <CreateDrawer
+      ref="createDrawerRef"
+      :title="drawerTitle"
+      :optionTreeData="optionTreeData"
+      @load-data="loadData"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, reactive, ref, unref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import {
+    AlignLeftOutlined,
+    FormOutlined,
+    PlusOutlined,
+    EditOutlined,
+    SearchOutlined,
+    DeleteOutlined,
+  } from '@vicons/antd';
+  import CreateDrawer from './CreateDrawer.vue';
+  import List from './list.vue';
+  import { DeleteDict, getDictTree } from '@/api/dict/dict';
+  import { State } from '@/views/system/dict/model';
+
+  const createDrawerRef = ref();
+  const message = useMessage();
+  const dialog = useDialog();
+  let treeItemKey = ref([]);
+  let expandedKeys = ref([]);
+  const treeData = ref([]);
+  const loading = ref(true);
+  const isEditMenu = ref(false);
+  const treeItemTitle = ref('');
+  const checkedId = ref(0);
+  const pattern = ref('');
+  const drawerTitle = ref('');
+  const optionTreeData = ref([]);
+  const formParams = ref<State>(new State());
+
+  function openCreateDrawer() {
+    drawerTitle.value = '添加字典类型';
+    const { openDrawer } = createDrawerRef.value;
+    openDrawer(new State());
+  }
+
+  function openEditDrawer() {
+    drawerTitle.value = '编辑字典类型';
+    const { openDrawer } = createDrawerRef.value;
+    openDrawer(formParams.value);
+  }
+
+  function selectedTree(keys, opts) {
+    if (keys.length) {
+      const treeItem = opts[0];
+      treeItemKey.value = keys;
+      treeItemTitle.value = treeItem.label;
+      formParams.value = unref(treeItem);
+      isEditMenu.value = true;
+      checkedId.value = treeItem.id;
+    } else {
+      isEditMenu.value = false;
+      treeItemKey.value = [];
+      treeItemTitle.value = '';
+    }
+  }
+
+  function handleDel() {
+    dialog.info({
+      title: '提示',
+      content: `您确定想删除此类型吗?`,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        DeleteDict(formParams.value).then(async (_res) => {
+          message.success('操作成功');
+          await loadData();
+        });
+      },
+    });
+  }
+
+  function packHandle() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
+    }
+  }
+
+  async function loadData() {
+    const treeMenuList = await getDictTree();
+    const keys = treeMenuList.list.map((item) => item.key);
+    Object.assign(formParams.value, keys);
+    treeData.value = [];
+    optionTreeData.value = [];
+    treeData.value = treeMenuList.list;
+    optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
+    loading.value = false;
+  }
+
+  function onExpandedKeys(keys) {
+    expandedKeys.value = keys;
+  }
+
+  onMounted(async () => {
+    await loadData();
+  });
+</script>
diff --git a/web/src/views/system/dict/list.vue b/web/src/views/system/dict/list.vue
new file mode 100644
index 0000000..552ddde
--- /dev/null
+++ b/web/src/views/system/dict/list.vue
@@ -0,0 +1,325 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+      <template #statusSlot="{ model, field }">
+        <n-input v-model:value="model[field]" />
+      </template>
+    </BasicForm>
+
+    <BasicTable
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="(row) => row.id"
+      ref="actionRef"
+      :actionColumn="actionColumn"
+      @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1090"
+      :resizeHeightOffset="-10000"
+    >
+      <template #tableTitle>
+        <n-button type="primary" @click="addTable">
+          <template #icon>
+            <n-icon>
+              <PlusOutlined />
+            </n-icon>
+          </template>
+          添加数据
+        </n-button>
+      </template>
+    </BasicTable>
+
+    <n-modal
+      v-model:show="showModal"
+      :show-icon="false"
+      preset="dialog"
+      :title="formParams?.id > 0 ? '编辑数据' : '添加数据'"
+    >
+      <n-form
+        :model="formParams"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-form-item label="字典类型" path="typeId">
+          <n-tree-select
+            :options="typeList"
+            :default-value="formParams.typeId"
+            :default-expand-all="true"
+            @update:value="handleUpdateTypeIdValue"
+          />
+        </n-form-item>
+        <n-form-item label="标签" path="label">
+          <n-input placeholder="请输入标签名称" v-model:value="formParams.label" />
+        </n-form-item>
+        <n-form-item label="标签样式" path="listClass">
+          <n-select
+            :render-tag="renderTag"
+            v-model:value="formParams.listClass"
+            :options="dict.getOptionUnRef('tagTypeOptions')"
+          />
+        </n-form-item>
+        <n-form-item label="字典键值" path="value">
+          <n-input placeholder="请输入键值" v-model:value="formParams.value" />
+        </n-form-item>
+        <n-form-item label="键值类型" path="valueType">
+          <n-select v-model:value="formParams.valueType" :options="options" />
+        </n-form-item>
+        <n-form-item label="排序" path="sort">
+          <n-input-number placeholder="请输入" v-model:value="formParams.sort" />
+        </n-form-item>
+        <n-form-item label="状态" path="status">
+          <n-radio-group v-model:value="formParams.status" name="status">
+            <n-radio-button
+              v-for="status in dict.getOptionUnRef('sys_normal_disable')"
+              :key="status.value"
+              :value="status.value"
+              :label="status.label"
+            />
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="备注" path="remark">
+          <n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
+        </n-form-item>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="() => (showModal = false)">取消</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, watch, onMounted } from 'vue';
+  import { useMessage, useDialog, NTag, SelectRenderTag } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { getDataList, getDictSelect, EditData, DeleteData } from '@/api/dict/dict';
+  import { columns } from './columns';
+  import { PlusOutlined } from '@vicons/antd';
+  import { TypeSelect } from '@/api/sys/config';
+  import { findTreeNode } from '@/utils';
+  import { cloneDeep } from 'lodash-es';
+  import { Option, useDictStore } from '@/store/modules/dict';
+  import { State } from '@/views/system/dict/model';
+
+  interface Props {
+    checkedId?: number;
+  }
+
+  const dict = useDictStore();
+  const props = withDefaults(defineProps<Props>(), { checkedId: 0 });
+  const typeList = ref<any>([]);
+  const rules = {
+    label: {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入标签名称',
+    },
+    value: {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入键值',
+    },
+  };
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'label',
+      component: 'NInput',
+      label: '字典标签',
+      componentProps: {
+        placeholder: '请输入字典标签',
+        onInput: (e: any) => {
+          console.log(e);
+          params.value.label = e;
+        },
+      },
+      rules: [{ message: '请输入字典标签', trigger: ['blur'] }],
+    },
+    {
+      field: 'value',
+      component: 'NInput',
+      label: '字典键值',
+      componentProps: {
+        placeholder: '请输入字典键值',
+        onInput: (e: any) => {
+          console.log(e);
+          params.value.value = e;
+        },
+      },
+      rules: [{ message: '请输入字典键值', trigger: ['blur'] }],
+    },
+  ];
+
+  const renderTag: SelectRenderTag = ({ option }) => {
+    return h(
+      NTag,
+      {
+        type: option.listClass as 'success' | 'warning' | 'error' | 'info' | 'primary' | 'default',
+      },
+      { default: () => option.label }
+    );
+  };
+
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const dialog = useDialog();
+  const actionRef = ref();
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const formParams = ref<State>(new State());
+  const options = ref<Option>();
+  const typeId = ref(0);
+
+  const params = ref({
+    pageSize: 10,
+    typeId: props.checkedId,
+    label: '',
+    value: '',
+  });
+
+  const actionColumn = reactive({
+    width: 140,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = new State();
+    if (typeId.value > 0) {
+      formParams.value.typeId = typeId.value;
+    }
+  }
+
+  const loadDataTable = async (res) => {
+    return await getDataList({ ...params.value, ...res });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        EditData(formParams.value)
+          .then((_res) => {
+            message.success('操作成功');
+            showModal.value = false;
+            reloadTable();
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        DeleteData(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = cloneDeep(record) as unknown as State;
+  }
+
+  function handleSubmit(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    params.value.label = '';
+    params.value.value = '';
+    reloadTable();
+  }
+
+  async function setDictSelect() {
+    const tmp = await getDictSelect({});
+    typeList.value = tmp.list;
+    if (typeList.value === undefined || typeList.value === null) {
+      typeList.value = [];
+    }
+  }
+
+  function handleUpdateTypeIdValue(value) {
+    const row = findTreeNode(typeList.value, value, 'id');
+    if (!row) {
+      message.error('未找到该节点数据');
+      return;
+    }
+    formParams.value.typeId = value;
+    formParams.value.type = row.type;
+  }
+
+  function loadOptions() {
+    dict.loadOptions(['sys_normal_disable']);
+    TypeSelect().then((res) => {
+      options.value = res;
+    });
+  }
+
+  watch(props, (newVal, _oldVal) => {
+    params.value.typeId = newVal.checkedId;
+    typeId.value = newVal.checkedId;
+    actionRef.value.reload();
+    setDictSelect();
+  });
+
+  onMounted(async () => {
+    loadOptions();
+    await setDictSelect();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/system/dict/model.ts b/web/src/views/system/dict/model.ts
new file mode 100644
index 0000000..de6ccf2
--- /dev/null
+++ b/web/src/views/system/dict/model.ts
@@ -0,0 +1,18 @@
+export class State {
+  typeId = 0;
+  key = '';
+  id = 0;
+  label = '';
+  value = '';
+  valueType = 'string';
+  type = '';
+  listClass = 'primary';
+  isDefault = 0;
+  sort = 0;
+  remark = '';
+  status = 1;
+  createdAt = '';
+  updatedAt = '';
+  pid: number | null = 0;
+  name = '';
+}
diff --git a/web/src/views/testCategory/edit.vue b/web/src/views/testCategory/edit.vue
new file mode 100644
index 0000000..d9f267f
--- /dev/null
+++ b/web/src/views/testCategory/edit.vue
@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑测试分类 #' + formValue.id : '添加测试分类'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            ref="formRef"
+            :model="formValue"
+            :rules="rules"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
+              <n-gi span="2">
+                <n-form-item label="分类名称" path="name">
+                  <n-input placeholder="请输入分类名称" v-model:value="formValue.name" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="简称" path="shortName">
+                  <n-input placeholder="请输入简称" v-model:value="formValue.shortName" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="描述" path="description">
+                  <n-input type="textarea" placeholder="描述" v-model:value="formValue.description" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="排序" path="sort">
+                  <n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="状态" path="status">
+                  <n-select v-model:value="formValue.status" :options="dict.getOptionUnRef('sys_normal_disable')" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="备注" path="remark">
+                  <n-input type="textarea" placeholder="备注" v-model:value="formValue.remark" />
+                </n-form-item>
+              </n-gi>
+            </n-grid>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">
+            取消
+          </n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
+            确定
+          </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useDictStore } from '@/store/modules/dict';
+  import { Edit, View, MaxSort } from '@/api/testCategory';
+  import { State, newState, rules } from './model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const dict = useDictStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(840);
+  });
+
+  // 提交表单
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        Edit(formValue.value)
+          .then((_res) => {
+            message.success('操作成功');
+            closeForm();
+            emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  // 关闭表单
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  // 打开模态框
+  function openModal(state: State) {
+    showModal.value = true;
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+
+      loading.value = true;
+      MaxSort()
+        .then((res) => {
+          formValue.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+      return;
+    }
+
+    // 编辑
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
\ No newline at end of file
diff --git a/web/src/views/testCategory/index.vue b/web/src/views/testCategory/index.vue
new file mode 100644
index 0000000..a1b4dbd
--- /dev/null
+++ b/web/src/views/testCategory/index.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="测试分类">
+        <!--  这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm  ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+      <BasicTable  ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000"  :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
+        <template #tableTitle>
+          <n-button type="primary"  @click="addTable" class="min-left-space" v-if="hasPermission(['/testCategory/edit'])">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加
+          </n-button>
+          <n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/testCategory/delete'])">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit ref="editRef" @reloadTable="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { useDictStore } from '@/store/modules/dict';
+  import { List, Delete, Status } from '@/api/testCategory';
+  import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
+  import { columns, schemas, loadOptions } from './model';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+
+  const dict = useDictStore();
+  const dialog = useDialog();
+  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+
+  const checkedIds = ref([]);
+
+  const actionColumn = reactive({
+    width: 216,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record: State) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/testCategory/edit'],
+          },
+
+          {
+            label: '禁用',
+            onClick: handleStatus.bind(null, record, 2),
+            ifShow: () => {
+              return record.status === 1;
+            },
+            auth: ['/testCategory/status'],
+          },
+          {
+            label: '启用',
+            onClick: handleStatus.bind(null, record, 1),
+            ifShow: () => {
+              return record.status === 2;
+            },
+            auth: ['/testCategory/status'],
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/testCategory/delete'],
+          },
+        ],
+
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  // 加载表格数据
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  // 更新选中的行
+  function handleOnCheckedRow(rowKeys) {
+    checkedIds.value = rowKeys;
+  }
+
+  // 重新加载表格数据
+  function reloadTable() {
+    actionRef.value?.reload();
+  }
+
+  // 添加数据
+  function addTable() {
+    editRef.value.openModal(null);
+  }
+
+  // 编辑数据
+  function handleEdit(record: Recordable) {
+    editRef.value.openModal(record);
+  }
+
+  // 单个删除
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 批量删除
+  function handleBatchDelete() {
+    if (checkedIds.value.length < 1){
+      message.error('请至少选择一项要删除的数据');
+      return;
+    }
+
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 修改状态
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
+      message.success('设为' + dict.getLabel('sys_normal_disable', status) + '成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
+  onMounted(() => {
+    loadOptions();
+
+  });
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/web/src/views/testCategory/model.ts b/web/src/views/testCategory/model.ts
new file mode 100644
index 0000000..ff7bd36
--- /dev/null
+++ b/web/src/views/testCategory/model.ts
@@ -0,0 +1,153 @@
+import { h, ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { renderOptionTag } from '@/utils';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export class State {
+  public id = 0; // 分类ID
+  public name = ''; // 分类名称
+  public shortName = ''; // 简称
+  public description = ''; // 描述
+  public sort = 0; // 排序
+  public status = 1; // 状态
+  public remark = ''; // 备注
+  public createdAt = ''; // 创建时间
+  public updatedAt = ''; // 修改时间
+  public deletedAt = ''; // 删除时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+export const rules = {
+  name: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入分类名称',
+  },
+  sort: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'number',
+    message: '请输入排序',
+  },
+};
+
+// 表格搜索表单
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'id',
+    component: 'NInputNumber',
+    label: '分类ID',
+    componentProps: {
+      placeholder: '请输入分类ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '分类名称',
+    componentProps: {
+      placeholder: '请输入分类名称',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态',
+      options: dict.getOption('sys_normal_disable'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+// 表格列
+export const columns = [
+  {
+    title: '分类ID',
+    key: 'id',
+    align: 'left',
+    width: 80,
+  },
+  {
+    title: '分类名称',
+    key: 'name',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '简称',
+    key: 'shortName',
+    align: 'left',
+    width: 80,
+  },
+  {
+    title: '描述',
+    key: 'description',
+    align: 'left',
+    width: 300,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    align: 'left',
+    width: -1,
+    render(row: State) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    align: 'left',
+    width: 180,
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable']);
+}
\ No newline at end of file
diff --git a/web/stylelint.config.js b/web/stylelint.config.js
new file mode 100644
index 0000000..06951ed
--- /dev/null
+++ b/web/stylelint.config.js
@@ -0,0 +1,70 @@
+module.exports = {
+  root: true,
+  plugins: ['stylelint-order'],
+  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+  rules: {
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['global'],
+      },
+    ],
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: ['v-deep'],
+      },
+    ],
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'function',
+          'if',
+          'each',
+          'include',
+          'mixin',
+        ],
+      },
+    ],
+    'no-empty-source': null,
+    'named-grid-areas-no-invalid': null,
+    'unicode-bom': 'never',
+    'no-descending-specificity': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'declaration-colon-space-after': 'always-single-line',
+    'declaration-colon-space-before': 'never',
+    // 'declaration-block-trailing-semicolon': 'always',
+    'rule-empty-line-before': [
+      'always',
+      {
+        ignore: ['after-comment', 'first-nested'],
+      },
+    ],
+    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
+    'order/order': [
+      [
+        'dollar-variables',
+        'custom-properties',
+        'at-rules',
+        'declarations',
+        {
+          type: 'at-rule',
+          name: 'supports',
+        },
+        {
+          type: 'at-rule',
+          name: 'media',
+        },
+        'rules',
+      ],
+      { severity: 'warning' },
+    ],
+  },
+  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
+};
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
new file mode 100644
index 0000000..ed05a3d
--- /dev/null
+++ b/web/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
+  important: true,
+  theme: {
+    extend: {},
+  },
+};
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..12b3587
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,60 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "strictFunctionTypes": false,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "allowJs": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "types": [
+      "vite/client"
+    ],
+    "typeRoots": [
+      "./node_modules/@types/",
+      "./types"
+    ],
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "/#/*": [
+        "types/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "types/**/*.d.ts",
+    "types/**/*.ts",
+    "build/**/*.ts",
+    "build/**/*.d.ts",
+    "mock/**/*.ts",
+    "components.d.ts",
+    "auto-imports.d.ts",
+    "vite.config.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.js"
+  ]
+}
diff --git a/web/types/config.d.ts b/web/types/config.d.ts
new file mode 100644
index 0000000..f326389
--- /dev/null
+++ b/web/types/config.d.ts
@@ -0,0 +1,71 @@
+export interface ProjectSettingState {
+  //导航模式
+  navMode: string;
+  //导航风格
+  navTheme: string;
+  //顶部设置
+  headerSetting: object;
+  //页脚
+  showFooter: boolean;
+  //菜单设置
+  menuSetting: object;
+  //多标签
+  multiTabsSetting: object;
+  //面包屑
+  crumbsSetting: object;
+  //权限模式
+  permissionMode: string;
+}
+
+export interface IbodySetting {
+  fixed: boolean;
+}
+
+export interface IheaderSetting {
+  bgColor: string;
+  fixed: boolean;
+  isReload: boolean;
+}
+
+export interface ImenuSetting {
+  minMenuWidth: number;
+  menuWidth: number;
+  fixed: boolean;
+  mixMenu: boolean;
+  collapsed: boolean;
+  mobileWidth: number;
+}
+
+export interface IcrumbsSetting {
+  show: boolean;
+  showIcon: boolean;
+}
+
+export interface ImultiTabsSetting {
+  bgColor: string;
+  fixed: boolean;
+  show: boolean;
+}
+export interface GlobConfig {
+  title: string;
+  apiUrl: string;
+  shortName: string;
+  urlPrefix?: string;
+  uploadUrl?: string;
+  imgUrl?: string;
+}
+
+export interface GlobEnvConfig {
+  // 标题
+  VITE_GLOB_APP_TITLE: string;
+  // 接口地址
+  VITE_GLOB_API_URL: string;
+  // 接口前缀
+  VITE_GLOB_API_URL_PREFIX?: string;
+  // Project abbreviation
+  VITE_GLOB_APP_SHORT_NAME: string;
+  // 图片上传地址
+  VITE_GLOB_UPLOAD_URL?: string;
+  //图片前缀地址
+  VITE_GLOB_IMG_URL?: string;
+}
diff --git a/web/types/global.d.ts b/web/types/global.d.ts
new file mode 100644
index 0000000..2506c61
--- /dev/null
+++ b/web/types/global.d.ts
@@ -0,0 +1,100 @@
+import type {
+  ComponentRenderProxy,
+  VNode,
+  VNodeChild,
+  ComponentPublicInstance,
+  FunctionalComponent,
+  PropType as VuePropType,
+} from 'vue';
+
+declare global {
+  const __APP_INFO__: {
+    pkg: {
+      name: string;
+      version: string;
+      dependencies: Recordable<string>;
+      devDependencies: Recordable<string>;
+    };
+    lastBuildTime: string;
+  };
+  // declare interface Window {
+  //   // Global vue app instance
+  //   __APP__: App<Element>;
+  // }
+
+  // vue
+  declare type PropType<T> = VuePropType<T>;
+  declare type VueNode = VNodeChild | JSX.Element;
+
+  export type Writable<T> = {
+    -readonly [P in keyof T]: T[P];
+  };
+
+  declare type Nullable<T> = T | null;
+  declare type NonNullable<T> = T extends null | undefined ? never : T;
+  declare type Recordable<T = any> = Record<string, T>;
+  declare type ReadonlyRecordable<T = any> = {
+    readonly [key: string]: T;
+  };
+  declare type Indexable<T = any> = {
+    [key: string]: T;
+  };
+  declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+  };
+  declare type TimeoutHandle = ReturnType<typeof setTimeout>;
+  declare type IntervalHandle = ReturnType<typeof setInterval>;
+
+  declare interface ChangeEvent extends Event {
+    target: HTMLInputElement;
+  }
+
+  declare interface WheelEvent {
+    path?: EventTarget[];
+  }
+
+  interface ImportMetaEnv extends ViteEnv {
+    __: unknown;
+  }
+
+  declare interface ViteEnv {
+    VITE_PORT: number;
+    VITE_PUBLIC_PATH: string;
+    VITE_GLOB_APP_TITLE: string;
+    VITE_GLOB_APP_SHORT_NAME: string;
+    VITE_DROP_CONSOLE: boolean;
+    VITE_GLOB_IMG_URL: string;
+    VITE_PROXY: [string, string][];
+    VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+  }
+
+  declare function parseInt(s: string | number, radix?: number): number;
+
+  declare function parseFloat(string: string | number): number;
+
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    type Element = VNode;
+    // tslint:disable no-empty-interface
+    type ElementClass = ComponentRenderProxy;
+
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+
+    interface IntrinsicAttributes {
+      [elem: string]: any;
+    }
+  }
+}
+
+declare module 'vue' {
+  export type JSXComponent<Props = any> =
+    | { new (): ComponentPublicInstance<Props> }
+    | FunctionalComponent<Props>;
+}
diff --git a/web/types/index.d.ts b/web/types/index.d.ts
new file mode 100644
index 0000000..85d2492
--- /dev/null
+++ b/web/types/index.d.ts
@@ -0,0 +1,28 @@
+declare interface Fn<T = any, R = T> {
+  (...arg: T[]): R;
+}
+
+declare interface PromiseFn<T = any, R = T> {
+  (...arg: T[]): Promise<R>;
+}
+
+declare type RefType<T> = T | null;
+
+declare type LabelValueOptions = {
+  label: string;
+  value: any;
+  disabled: boolean;
+  [key: string]: string | number | boolean;
+}[];
+
+declare type EmitType = (event: string, ...args: any[]) => void;
+
+declare type TargetContext = '_self' | '_blank';
+
+declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
+  $el: T;
+}
+
+declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
+
+declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
diff --git a/web/types/modules.d.ts b/web/types/modules.d.ts
new file mode 100644
index 0000000..b57b3cf
--- /dev/null
+++ b/web/types/modules.d.ts
@@ -0,0 +1,10 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent<{}, {}, any>;
+  export default Component;
+}
+
+declare module 'virtual:*' {
+  const result: any;
+  export default result;
+}
diff --git a/web/types/utils.d.ts b/web/types/utils.d.ts
new file mode 100644
index 0000000..6500d44
--- /dev/null
+++ b/web/types/utils.d.ts
@@ -0,0 +1,5 @@
+import type { ComputedRef, Ref } from 'vue';
+
+export type DynamicProps<T> = {
+  [P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
+};
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 0000000..831dcd1
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,83 @@
+import type { UserConfig, ConfigEnv } from 'vite';
+import { loadEnv } from 'vite';
+import { resolve } from 'path';
+import { wrapperEnv } from './build/utils';
+import { createVitePlugins } from './build/vite/plugin';
+import { OUTPUT_DIR } from './build/constant';
+import { createProxy } from './build/vite/proxy';
+import pkg from './package.json';
+import { format } from 'date-fns';
+const { dependencies, devDependencies, name, version } = pkg;
+
+const __APP_INFO__ = {
+  pkg: { dependencies, devDependencies, name, version },
+  lastBuildTime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+};
+
+function pathResolve(dir: string) {
+  return resolve(process.cwd(), '.', dir);
+}
+
+export default ({ command, mode }: ConfigEnv): UserConfig => {
+  const root = process.cwd();
+  const env = loadEnv(mode, root);
+  const viteEnv = wrapperEnv(env);
+  const { VITE_PUBLIC_PATH, VITE_PORT, VITE_PROXY } = viteEnv;
+  const isBuild = command === 'build';
+  return {
+    base: VITE_PUBLIC_PATH,
+    esbuild: {},
+    resolve: {
+      alias: [
+        {
+          find: /\/#\//,
+          replacement: pathResolve('types') + '/',
+        },
+        {
+          find: '@',
+          replacement: pathResolve('src') + '/',
+        },
+      ],
+      dedupe: ['vue'],
+    },
+    plugins: createVitePlugins(viteEnv, isBuild),
+    define: {
+      __APP_INFO__: JSON.stringify(__APP_INFO__),
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
+    },
+    css: {
+      preprocessorOptions: {
+        less: {
+          modifyVars: {},
+          javascriptEnabled: true,
+          additionalData: `@import "src/styles/var.less";`,
+        },
+      },
+    },
+    server: {
+      host: true,
+      port: VITE_PORT,
+      proxy: createProxy(VITE_PROXY),
+      // proxy: {
+      //     '/api': {
+      //         target: '',
+      //         changeOrigin: true,
+      //         rewrite: (path) => path.replace(/^\/api/, '/api/v1')
+      //     }
+      // }
+    },
+    optimizeDeps: {
+      include: [],
+      exclude: ['vue-demi'],
+    },
+    build: {
+      target: 'es2015',
+      cssTarget: 'chrome80',
+      outDir: OUTPUT_DIR,
+      reportCompressedSize: false,
+      chunkSizeWarningLimit: 3000,
+    },
+  };
+};