发布v2.8.4版本，更新内容请查看：https://github.com/bufanyun/hotgo/tree/v2.0/docs/guide-zh-CN/addon-version-upgrade.md

2025-11-12 20:23:52 +08:00 · 2023-07-20 18:01:10 +08:00
parent 9113fc5297
commit 373d9627fb
492 changed files with 12170 additions and 6982 deletions
--- a/web/src/views/addons/hgexample/table/edit.vue
+++ b/web/src/views/addons/hgexample/table/edit.vue
@@ -47,15 +47,15 @@
        </n-form-item>

        <n-form-item label="单图" path="image">
-          <UploadImage :maxNumber="1" v-model:value="params.image" />
+          <UploadImage v-model:value="params.image" />
        </n-form-item>

        <n-form-item label="多图" path="images">
-          <UploadImage :maxNumber="10" v-model:value="params.images" />
+          <FileChooser :maxNumber="10" v-model:value="params.images" fileType="image" />
        </n-form-item>

        <n-form-item label="单附件" path="attachfile">
-          <UploadFile :maxNumber="1" v-model:value="params.attachfile" />
+          <FileChooser v-model:value="params.attachfile" />
        </n-form-item>

        <n-form-item label="多附件" path="attachfiles">
@@ -160,6 +160,7 @@
  import UploadImage from '@/components/Upload/uploadImage.vue';
  import UploadFile from '@/components/Upload/uploadFile.vue';
  import CitySelector from '@/components/CitySelector/citySelector.vue';
+  import FileChooser from '@/components/FileChooser/index.vue';
  const emit = defineEmits(['reloadTable', 'updateShowModal']);

  interface Props {
--- a/web/src/views/addons/hgexample/table/index.vue
+++ b/web/src/views/addons/hgexample/table/index.vue
@@ -85,14 +85,14 @@
  import Edit from './edit.vue';

  const router = useRouter();
-  const actionRef = ref();
  const dialog = useDialog();
  const message = useMessage();
-  const searchFormRef = ref<any>({});
+  const searchFormRef = ref<any>();
  const batchDeleteDisabled = ref(true);
  const checkedIds = ref([]);
  const showModal = ref(false);
  const formParams = ref<State>();
+  const actionRef = ref();

  const actionColumn = reactive({
    width: 300,
--- a/web/src/views/apply/attachment/columns.ts
+++ b/web/src/views/apply/attachment/columns.ts
@@ -1,14 +1,14 @@
 import { h, ref } from 'vue';
 import { NAvatar, NImage, NTag } from 'naive-ui';
 import { getFileExt } from '@/utils/urlUtils';
-import { Dicts } from '@/api/dict/dict';
 import { getOptionLabel, getOptionTag, Options } from '@/utils/hotgo';
 import { FormSchema } from '@/components/Form';
-import { isNullOrUnDef } from '@/utils/is';
 import { errorImg } from '@/utils/hotgo';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { ChooserOption } from '@/api/apply/attachment';
 export const options = ref<Options>({
-  sys_normal_disable: [],
-  config_upload_drive: [],
+  kind: [],
+  drive: [],
 });

 export const schemas = ref<FormSchema[]>([
@@ -25,6 +25,45 @@ export const schemas = ref<FormSchema[]>([
      },
    },
  },
+  {
+    field: 'kind',
+    component: 'NSelect',
+    label: '上传类型',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择上传类型',
+      options: [],
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '文件名称',
+    labelMessage: '支持模糊查询',
+    componentProps: {
+      placeholder: '请输入文件名称',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入文件名称', trigger: ['blur'] }],
+  },
+  {
+    field: 'updatedAt',
+    component: 'NDatePicker',
+    label: '上传时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
  {
    field: 'member_id',
    component: 'NInput',
@@ -37,19 +76,6 @@ export const schemas = ref<FormSchema[]>([
    },
    rules: [{ message: '请输入用户ID', trigger: ['blur'] }],
  },
-  {
-    field: 'status',
-    component: 'NSelect',
-    label: '状态',
-    defaultValue: null,
-    componentProps: {
-      placeholder: '请选择类型',
-      options: [],
-      onUpdateValue: (e: any) => {
-        console.log(e);
-      },
-    },
-  },
 ]);

 export const columns = [
@@ -63,11 +89,11 @@ export const columns = [
    key: 'appId',
    width: 100,
  },
-  {
-    title: '用户ID',
-    key: 'memberId',
-    width: 100,
-  },
+  // {
+  //   title: '用户ID',
+  //   key: 'memberId',
+  //   width: 100,
+  // },
  {
    title: '驱动',
    key: 'drive',
@@ -86,16 +112,21 @@ export const columns = [
          style: {
            marginRight: '6px',
          },
-          type: row.kind == 'images' ? 'success' : 'warning',
+          type: getOptionTag(options.value.kind, row.kind),
          bordered: false,
        },
        {
-          default: () => row.kind,
+          default: () => getOptionLabel(options.value.kind, row.kind),
        }
      );
    },
    width: 120,
  },
+  {
+    title: '文件名称',
+    key: 'name',
+    width: 120,
+  },
  {
    title: '文件',
    key: 'fileUrl',
@@ -104,7 +135,7 @@ export const columns = [
      if (row.fileUrl === '') {
        return ``;
      }
-      if (row.kind !== 'images') {
+      if (row.kind !== 'image') {
        return h(
          NAvatar,
          {
@@ -132,61 +163,37 @@ export const columns = [
      });
    },
  },
-  // {
-  //   title: '本地路径',
-  //   key: 'path',
-  // },
-  {
-    title: '扩展名',
-    key: 'ext',
-    width: 80,
-  },
  {
    title: '文件大小',
    key: 'sizeFormat',
    width: 100,
  },
  {
-    title: '状态',
-    key: 'status',
-    render(row) {
-      if (isNullOrUnDef(row.status)) {
-        return ``;
-      }
-      return h(
-        NTag,
-        {
-          style: {
-            marginRight: '6px',
-          },
-          type: getOptionTag(options.value.sys_normal_disable, row.status),
-          bordered: false,
-        },
-        {
-          default: () => getOptionLabel(options.value.sys_normal_disable, row.status),
-        }
-      );
-    },
-    width: 100,
+    title: '扩展名',
+    key: 'ext',
+    width: 80,
+  },
+  {
+    title: '扩展类型',
+    key: 'mimeType',
+    width: 120,
  },
  {
    title: '上传时间',
-    key: 'createdAt',
+    key: 'updatedAt',
    width: 180,
  },
 ];

 async function loadOptions() {
-  options.value = await Dicts({
-    types: ['sys_normal_disable', 'config_upload_drive'],
-  });
+  options.value = await ChooserOption();
  for (const item of schemas.value) {
    switch (item.field) {
-      case 'status':
-        item.componentProps.options = options.value.sys_normal_disable;
+      case 'kind':
+        item.componentProps.options = options.value.kind;
        break;
      case 'drive':
-        item.componentProps.options = options.value.config_upload_drive;
+        item.componentProps.options = options.value.drive;
        break;
    }
  }
--- a/web/src/views/apply/attachment/index.vue
+++ b/web/src/views/apply/attachment/index.vue
@@ -25,7 +25,16 @@
        :resizeHeightOffset="-20000"
      >
        <template #tableTitle>
-          <n-button type="primary" @click="addTable">
+          <n-button type="primary" @click="handleUpload">
+            <template #icon>
+              <n-icon>
+                <UploadOutlined />
+              </n-icon>
+            </template>
+            上传文件
+          </n-button>
+          &nbsp;
+          <n-button type="primary" @click="handleUploadImage">
            <template #icon>
              <n-icon>
                <UploadOutlined />
@@ -34,13 +43,13 @@
            上传图片
          </n-button>
          &nbsp;
-          <n-button type="primary" @click="addFileTable">
+          <n-button type="primary" @click="handleUploadDoc">
            <template #icon>
              <n-icon>
                <UploadOutlined />
              </n-icon>
            </template>
-            上传文件
+            上传文档
          </n-button>
          &nbsp;
          <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
@@ -53,109 +62,34 @@
          </n-button>
        </template>
      </BasicTable>
-
-      <n-modal
-        v-model:show="showModal"
-        :show-icon="false"
-        preset="dialog"
-        style="width: 60%"
-        title="上传图片"
-      >
-        <n-upload
-          multiple
-          directory-dnd
-          :action="`${uploadUrl}${urlPrefix}/upload/image`"
-          :headers="uploadHeaders"
-          :data="{ type: 0 }"
-          @before-upload="beforeUpload"
-          @finish="finish"
-          name="file"
-          :max="20"
-          :default-file-list="fileList"
-          list-type="image"
-        >
-          <n-upload-dragger>
-            <div style="margin-bottom: 12px">
-              <n-icon size="48" :depth="3">
-                <CloudUploadOutlined />
-              </n-icon>
-            </div>
-            <n-text style="font-size: 16px"> 点击或者拖动图片到该区域来上传</n-text>
-            <n-p depth="3" style="margin: 8px 0 0 0"> 单次最多允许20个图片</n-p>
-          </n-upload-dragger>
-        </n-upload>
-      </n-modal>
-
-      <n-modal
-        v-model:show="showFileModal"
-        :show-icon="false"
-        preset="dialog"
-        style="width: 60%"
-        title="上传文件"
-      >
-        <n-upload
-          multiple
-          directory-dnd
-          :action="`${uploadUrl}${urlPrefix}/upload/file`"
-          :headers="uploadHeaders"
-          :data="{ type: 0 }"
-          @before-upload="beforeUpload"
-          @finish="finish"
-          name="file"
-          :max="20"
-          :default-file-list="fileList"
-          list-type="image"
-        >
-          <n-upload-dragger>
-            <div style="margin-bottom: 12px">
-              <n-icon size="48" :depth="3">
-                <FileAddOutlined />
-              </n-icon>
-            </div>
-            <n-text style="font-size: 16px"> 点击或者拖动文件到该区域来上传</n-text>
-            <n-p depth="3" style="margin: 8px 0 0 0"> 单次最多允许20个文件</n-p>
-          </n-upload-dragger>
-        </n-upload>
-      </n-modal>
    </n-card>
+
+    <FileUpload ref="fileUploadRef" :finish-call="handleFinishCall" />
+    <FileUpload ref="imageUploadRef" :finish-call="handleFinishCall" upload-type="image" />
+    <FileUpload ref="docUploadRef" :finish-call="handleFinishCall" upload-type="doc" />
  </div>
 </template>

 <script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
-  import { UploadFileInfo, useDialog, useMessage } from 'naive-ui';
+  import { useDialog, useMessage } from 'naive-ui';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { Delete, List } from '@/api/apply/attachment';
  import { columns, schemas } from './columns';
-  import {
-    DeleteOutlined,
-    UploadOutlined,
-    FileAddOutlined,
-    CloudUploadOutlined,
-  } from '@vicons/antd';
-  import { useGlobSetting } from '@/hooks/setting';
-  import { useUserStoreWidthOut } from '@/store/modules/user';
-  import componentSetting from '@/settings/componentSetting';
-  import { ResultEnum } from '@/enums/httpEnum';
+  import { DeleteOutlined, UploadOutlined } from '@vicons/antd';
+  import FileUpload from '@/components/FileChooser/src/Upload.vue';
+  import { Attachment } from '@/components/FileChooser/src/model';

-  const useUserStore = useUserStoreWidthOut();
-  const globSetting = useGlobSetting();
-  const { uploadUrl } = globSetting;
-  const urlPrefix = globSetting.urlPrefix || '';
-  const uploadHeaders = reactive({
-    Authorization: useUserStore.token,
-  });
-
-  const fileList = ref<UploadFileInfo[]>([]);
  const message = useMessage();
  const actionRef = ref();
  const dialog = useDialog();
-  const showFileModal = ref(false);
-  const showModal = ref(false);
  const searchFormRef = ref<any>({});
  const batchDeleteDisabled = ref(true);
  const checkedIds = ref([]);
+  const fileUploadRef = ref();
+  const imageUploadRef = ref();
+  const docUploadRef = ref();

  const actionColumn = reactive({
    width: 150,
@@ -182,20 +116,20 @@

  const [register, {}] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
-    labelWidth: 80,
+    labelWidth: 100,
    schemas,
  });

-  function addTable() {
-    showFileModal.value = false;
-    showModal.value = true;
-    fileList.value = [];
+  function handleUpload() {
+    fileUploadRef.value.openModal();
  }

-  function addFileTable() {
-    showModal.value = false;
-    showFileModal.value = true;
-    fileList.value = [];
+  function handleUploadImage() {
+    imageUploadRef.value.openModal();
+  }
+
+  function handleUploadDoc() {
+    docUploadRef.value.openModal();
  }

  const loadDataTable = async (res) => {
@@ -260,32 +194,9 @@
    reloadTable();
  }

-  //上传之前
-  function beforeUpload({ _file }) {
-    return true;
-  }
-
-  //上传结束
-  function finish({ event: Event }) {
-    const res = eval('(' + Event.target.response + ')');
-    const infoField = componentSetting.upload.apiSetting.infoField;
-    const { code } = res;
-    const msg = res.msg || res.message || '上传失败';
-    const result = res[infoField];
-
-    //成功
-    if (code === ResultEnum.SUCCESS) {
-      fileList.value.push({
-        id: result.id,
-        name: result.name,
-        status: 'finished',
-        type: result.naiveType,
-      });
-
-      message.success('上传' + result.name + '成功');
+  function handleFinishCall(result: Attachment, success: boolean) {
+    if (success) {
      reloadTable();
-    } else {
-      message.error(msg);
    }
  }
 </script>
--- a/web/src/views/asset/creditsLog/model.ts
+++ b/web/src/views/asset/creditsLog/model.ts
@@ -104,6 +104,17 @@ export const schemas = ref<FormSchema[]>([
      },
    },
  },
+  {
+    field: 'id',
+    component: 'NInput',
+    label: '变动ID',
+    componentProps: {
+      placeholder: '请输入变动ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
  {
    field: 'createdAt',
    component: 'NDatePicker',
@@ -117,17 +128,6 @@ export const schemas = ref<FormSchema[]>([
      },
    },
  },
-  {
-    field: 'id',
-    component: 'NInput',
-    label: '变动ID',
-    componentProps: {
-      placeholder: '请输入变动ID',
-      onUpdateValue: (e: any) => {
-        console.log(e);
-      },
-    },
-  },
 ]);

 export const columns = [
--- a/web/src/views/curdDemo/edit.vue
+++ b/web/src/views/curdDemo/edit.vue
@@ -31,7 +31,7 @@
          </n-form-item>

          <n-form-item label="内容" path="content">
-            <Editor style="height: 450px" v-model:value="params.content" />
+            <Editor style="height: 450px" id="content" v-model:value="params.content" />
          </n-form-item>

          <n-form-item label="单图" path="image">
--- a/web/src/views/develop/addons/index.vue
+++ b/web/src/views/develop/addons/index.vue
@@ -53,7 +53,6 @@
        </n-alert>
        <n-form
          :model="formParams"
-          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="80"
@@ -134,10 +133,23 @@
  import { isUrl } from '@/utils/is';
  import { getIconComponent } from '@/utils/icons';

+  const dialog = useDialog();
+  const message = useMessage();
+  const notification = useNotification();
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const formRef: any = ref(null);
+  const actionRef = ref();
+  const formParams = ref<any>();
+  const dialogWidth = ref('50%');
+  const checkedIds = ref([]);
+  const searchFormRef = ref<any>();
+
  const selectList = ref({
    groupType: [],
    status: [],
  });
+
  const columns = [
    {
      title: '图标',
@@ -246,9 +258,6 @@
    },
  ];

-  const checkedIds = ref([]);
-  const searchFormRef = ref<any>();
-
  const schemas = ref<FormSchema[]>([
    {
      field: 'name',
@@ -288,17 +297,6 @@
    },
  ]);

-  const notification = useNotification();
-  const dialog = useDialog();
-  const showModal = ref(false);
-  const formBtnLoading = ref(false);
-  const formRef: any = ref(null);
-  const message = useMessage();
-  const actionRef = ref();
-  const formParams = ref<any>();
-
-  const rules = {};
-
  const actionColumn = reactive({
    width: 220,
    title: '操作',
@@ -450,8 +448,6 @@
    });
  }

-  const dialogWidth = ref('50%');
-
  function mapWidth() {
    let val = document.body.clientWidth;
    const def = 840; // 默认宽度
@@ -464,10 +460,6 @@
    return dialogWidth.value;
  }

-  onBeforeMount(async () => {
-    await loadSelect();
-  });
-
  const loadSelect = async () => {
    selectList.value = await Selects({});
    for (const item of schemas.value) {
@@ -508,6 +500,10 @@
      },
    });
  }
+
+  onBeforeMount(async () => {
+    await loadSelect();
+  });
 </script>

 <style lang="less" scoped></style>
--- a/web/src/views/home/account/BasicSetting.vue
+++ b/web/src/views/home/account/BasicSetting.vue
@@ -73,7 +73,7 @@
        style="margin-top: 15px"
      >
        <n-form-item label="头像" path="avatar">
-          <UploadImage :maxNumber="1" v-model:value="formValue.avatar" />
+          <FileChooser v-model:value="formValue.avatar" file-type="image" />
        </n-form-item>

        <n-form-item label="姓名" path="realName">
@@ -122,13 +122,13 @@
 <script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useMessage } from 'naive-ui';
-  import UploadImage from '@/components/Upload/uploadImage.vue';
  import CitySelector from '@/components/CitySelector/citySelector.vue';
  import DatePicker from '@/components/DatePicker/datePicker.vue';
  import { getUserInfo, updateMemberProfile } from '@/api/system/user';
  import { CheckmarkCircle } from '@vicons/ionicons5';
  import { timeFix } from '@/utils/hotgo';
  import { UserInfoState, useUserStore } from '@/store/modules/user';
+  import FileChooser from '@/components/FileChooser/index.vue';

  const userStore = useUserStore();
  const show = ref(false);
@@ -146,30 +146,33 @@

  const formValue = ref<UserInfoState>({
    id: 0,
-    deptName: '',
-    roleName: '',
-    cityLabel: '',
+    deptName: "",
+    roleName: "",
+    cityLabel: "",
    permissions: [],
-    username: '',
-    realName: '',
-    avatar: '',
+    username: "",
+    realName: "",
+    avatar: "",
    balance: 0,
    sex: 1,
-    qq: '',
-    email: '',
-    mobile: '',
-    birthday: '',
+    qq: "",
+    email: "",
+    mobile: "",
+    birthday: "",
    cityId: 0,
-    address: '',
+    address: "",
    cash: {
-      name: '',
-      account: '',
-      payeeCode: '',
+      name: "",
+      account: "",
+      payeeCode: ""
    },
-    createdAt: '',
+    createdAt: "",
    loginCount: 0,
-    lastLoginAt: '',
-    lastLoginIp: '',
+    lastLoginAt: "",
+    lastLoginIp: "",
+    integral: 0,
+    openId: "",
+    inviteCode: ""
  });

  function formSubmit() {
--- a/web/src/views/home/account/CashSetting.vue
+++ b/web/src/views/home/account/CashSetting.vue
@@ -11,11 +11,7 @@
        </n-form-item>

        <n-form-item label="支付宝收款码" path="payeeCode">
-          <UploadImage
-            :maxNumber="1"
-            :helpText="'请上传清晰有效的收款码，图片大小不超过2M'"
-            v-model:value="formValue.payeeCode"
-          />
+          <FileChooser v-model:value="formValue.payeeCode" file-type="image" />
        </n-form-item>

        <n-form-item label="登录密码" path="password">
@@ -39,10 +35,8 @@
 <script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useMessage } from 'naive-ui';
-  import UploadImage from '@/components/Upload/uploadImage.vue';
  import { getUserInfo, updateMemberCash } from '@/api/system/user';
-
-  const show = ref(false);
+  import FileChooser from '@/components/FileChooser/index.vue';

  const rules = {
    password: {
@@ -52,6 +46,7 @@
    },
  };

+  const show = ref(false);
  const formRef: any = ref(null);
  const message = useMessage();
  const formValue = ref({
--- a/web/src/views/home/account/ThirdBind.vue
+++ b/web/src/views/home/account/ThirdBind.vue
@@ -7,9 +7,7 @@
            <n-button type="primary" text @click="openUpdatePassForm">修改</n-button>
          </template>
          <n-thing title="绑定微信">
-            <template #description
-              ><span class="text-gray-400">已绑定微信号：xxx</span></template
-            >
+            <template #description><span class="text-gray-400">已绑定微信号：xxx</span></template>
          </n-thing>
        </n-list-item>
        <n-list-item>
@@ -17,11 +15,7 @@
            <n-button type="primary" text @click="openUpdateMobileForm">修改</n-button>
          </template>
          <n-thing title="绑定抖音">
-            <template #description
-              ><span class="text-gray-400"
-                >已绑定抖音号：xxx</span
-              ></template
-            >
+            <template #description><span class="text-gray-400">已绑定抖音号：xxx</span></template>
          </n-thing>
        </n-list-item>
      </n-list>
@@ -217,7 +211,7 @@

  function openUpdatePassForm() {
    message.error('未开放');
-    return
+    return;
    showModal.value = true;
    formValue.value.newPassword = '';
    formValue.value.oldPassword = '';
@@ -255,7 +249,7 @@

  function openUpdateMobileForm() {
    message.error('未开放');
-    return
+    return;
    showMobileModal.value = true;
    formMobileValue.value.mobile = '';
    formMobileValue.value.code = '';
--- a/web/src/views/home/message/list.vue
+++ b/web/src/views/home/message/list.vue
@@ -1,7 +1,7 @@
 <template>
  <n-spin :show="loading">
    <n-empty
-      v-show="dataSource.list?.length === undefined || dataSource.list?.length === 0"
+      v-show="!dataSource.list || dataSource.list.length === 0"
      description="无数据"
    />

--- a/web/src/views/log/log/index.vue
+++ b/web/src/views/log/log/index.vue
@@ -2,7 +2,7 @@
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="访问日志">
-        全局访问日志，记录了系统中后台人员和客户端的操作记录，以及服务响应情况
+        全局访问日志记录了系统中后台人员和客户端的操作记录以及服务响应情况
      </n-card>
    </div>
    <n-card :bordered="false" class="proCard">
@@ -212,12 +212,7 @@

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
-    if (rowKeys.length > 0) {
-      batchDeleteDisabled.value = false;
-    } else {
-      batchDeleteDisabled.value = true;
-    }
-
+    batchDeleteDisabled.value = rowKeys.length <= 0;
    checkedIds.value = rowKeys;
  }

--- a/web/src/views/log/sms-log/index.vue
+++ b/web/src/views/log/sms-log/index.vue
@@ -1,7 +1,9 @@
 <template>
  <div>
    <div class="n-layout-page-header">
-      <n-card :bordered="false" title="短信记录"> 你可以在这里查看到平台所有的短信发送记录 </n-card>
+      <n-card :bordered="false" title="短信记录">
+        在这里，您可以方便地查看平台的所有短信发送记录
+      </n-card>
    </div>
    <n-card :bordered="false" class="proCard">
      <BasicForm
@@ -46,10 +48,10 @@
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { getLogList, Delete } from '@/api/log/smslog';
-  import { useRouter } from 'vue-router';
  import { DeleteOutlined } from '@vicons/antd';
  import { Dicts } from '@/api/dict/dict';
  import { getOptionLabel, getOptionTag, Options } from '@/utils/hotgo';
+  import { defRangeShortcuts } from "@/utils/dateUtil";

  const options = ref<Options>({
    config_sms_template: [],
@@ -137,6 +139,8 @@
  ];

  const dialog = useDialog();
+  const message = useMessage();
+  const actionRef = ref();
  const batchDeleteDisabled = ref(true);
  const checkedIds = ref([]);
  const searchFormRef = ref<any>({});
@@ -198,14 +202,23 @@
        },
      },
    },
+    {
+      field: 'createdAt',
+      component: 'NDatePicker',
+      label: '发送时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        shortcuts: defRangeShortcuts(),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
  ]);

-  const router = useRouter();
-  const message = useMessage();
-  const actionRef = ref();
-
  const actionColumn = reactive({
-    width: 120,
+    width: 80,
    title: '操作',
    key: 'action',
    fixed: 'right',
@@ -241,15 +254,10 @@
      positiveText: '确定',
      negativeText: '不确定',
      onPositiveClick: () => {
-        Delete(record)
-          .then((_res) => {
-            console.log('_res:' + JSON.stringify(_res));
-            message.success('操作成功');
-            reloadTable();
-          })
-          .catch((_e: Error) => {
-            // message.error(e.message ?? '操作失败');
-          });
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
      },
      onNegativeClick: () => {
        // message.error('不确定');
@@ -264,15 +272,10 @@
      positiveText: '确定',
      negativeText: '不确定',
      onPositiveClick: () => {
-        Delete({ id: checkedIds.value })
-          .then((_res) => {
-            console.log('_res:' + JSON.stringify(_res));
-            message.success('操作成功');
-            reloadTable();
-          })
-          .catch((e: Error) => {
-            message.error(e.message ?? '操作失败');
-          });
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
      },
      onNegativeClick: () => {
        // message.error('不确定');
--- a/web/src/views/monitor/netconn/columns.ts
+++ b/web/src/views/monitor/netconn/columns.ts
@@ -0,0 +1,144 @@
+import { h } from 'vue';
+import { NButton, NTag } from 'naive-ui';
+import { timestampToTime, formatBefore } from '@/utils/dateUtil';
+import { getOptionLabel } from '@/utils/hotgo';
+import { options } from '@/views/monitor/netconn/modal/model';
+import { renderIcon, 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: 120,
+  },
+  {
+    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 h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'info',
+          bordered: false,
+        },
+        {
+          default: () => getOptionLabel(options.value.group, 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);
+    },
+  },
+];
--- a/web/src/views/monitor/netconn/index.vue
+++ b/web/src/views/monitor/netconn/index.vue
@@ -0,0 +1,215 @@
+<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="1800"
+      >
+        <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
+      @reloadTable="reloadTable"
+      @updateShowModal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formEditParams"
+    />
+  </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 { 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 { newState, options, State } from '@/views/monitor/netconn/modal/model';
+  import { defRangeShortcuts } from "@/utils/dateUtil";
+
+  const message = useMessage();
+  const dialog = useDialog();
+  const showModal = ref(false);
+  const formEditParams = ref<State>(newState(null));
+  const actionRef = ref();
+  const formParams = ref({});
+
+  const actionColumn = reactive({
+    width: 150,
+    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 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: options.value.group,
+        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();
+        });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  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;
+  }
+</script>
+
+<style lang="less" scoped></style>
--- a/web/src/views/monitor/netconn/modal/edit.vue
+++ b/web/src/views/monitor/netconn/modal/edit.vue
@@ -0,0 +1,192 @@
+<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="options.group" />
+              </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="options.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 { onMounted, ref, computed, watch } from 'vue';
+  import { Edit, View } from '@/api/serveLicense';
+  import DatePicker from '@/components/DatePicker/datePicker.vue';
+  import { rules, options, State, newState } from './model';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  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 dialogWidth = ref('75%');
+  const formBtnLoading = ref(false);
+
+  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;
+    });
+  }
+
+  onMounted(async () => {
+    adaModalWidth(dialogWidth);
+  });
+
+  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>
--- a/web/src/views/monitor/netconn/modal/index.vue
+++ b/web/src/views/monitor/netconn/modal/index.vue
@@ -0,0 +1,347 @@
+<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"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="1090"
+        :resizeHeightOffset="-10000"
+        size="small"
+      >
+        <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
+      @reloadTable="reloadTable"
+      @updateShowModal="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="options.routes"
+          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 { 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, options, schemas, State } from './model';
+  import { DeleteOutlined, ExportOutlined, PlusOutlined } from '@vicons/antd';
+  import { adaModalWidth, getOptionLabel } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+
+  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>();
+  const showRoutesModal = ref(false);
+  const dialogWidth = ref('75%');
+  const formBtnLoading = ref(false);
+  const formRef = ref<any>({});
+
+  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 [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();
+        });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  function handleBatchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  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('设为' + getOptionLabel(options.value.sys_normal_disable, status) + '成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      console.log('formParams.value:' + JSON.stringify(formParams.value));
+      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 }
+          ),
+        ],
+      }
+    );
+  }
+
+  onMounted(async () => {
+    adaModalWidth(dialogWidth);
+  });
+</script>
+
+<style lang="less" scoped></style>
--- a/web/src/views/monitor/netconn/modal/modal.vue
+++ 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>
--- a/web/src/views/monitor/netconn/modal/model.ts
+++ b/web/src/views/monitor/netconn/modal/model.ts
@@ -0,0 +1,307 @@
+import { h, ref } from 'vue';
+import { NTag } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { Dicts } from '@/api/dict/dict';
+import { isNullObject } from '@/utils/is';
+import { defRangeShortcuts, formatBefore } from '@/utils/dateUtil';
+import { getOptionLabel, getOptionTag, Options } from '@/utils/hotgo';
+import { NetOption } from '@/api/monitor/monitor';
+
+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 options = ref<Options>({
+  sys_normal_disable: [],
+  group: [],
+  routes: [],
+});
+
+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: options.value.group,
+      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: [],
+      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 h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'info',
+          bordered: false,
+        },
+        {
+          default: () => getOptionLabel(options.value.group, 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) {
+      if (isNullObject(row.status)) {
+        return ``;
+      }
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: getOptionTag(options.value.sys_normal_disable, row.status),
+          bordered: false,
+        },
+        {
+          default: () => getOptionLabel(options.value.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,
+  },
+];
+
+async function loadOptions() {
+  options.value = await Dicts({
+    types: ['sys_normal_disable'],
+  });
+
+  const netOption = await NetOption();
+  options.value.group = netOption.licenseGroup;
+  options.value.routes = netOption.routes;
+
+  for (const item of schemas.value) {
+    switch (item.field) {
+      case 'status':
+        item.componentProps.options = options.value.sys_normal_disable;
+        break;
+      case 'group':
+        item.componentProps.options = options.value.group;
+        break;
+    }
+  }
+}
+
+await loadOptions();
--- a/web/src/views/monitor/online/index.vue
+++ b/web/src/views/monitor/online/index.vue
@@ -1,20 +1,25 @@
 <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>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="在线用户" />
+    </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="1800"
-    />
-  </n-card>
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        :scroll-x="1800"
+      />
+    </n-card>
+  </div>
 </template>

 <script lang="ts" setup>
@@ -24,8 +29,8 @@
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { OnlineList, Offline } from '@/api/monitor/monitor';
  import { columns } from './columns';
+  import { defRangeShortcuts } from '@/utils/dateUtil';

-  const dialog = useDialog();
  const schemas: FormSchema[] = [
    {
      field: 'userId',
@@ -39,6 +44,18 @@
      },
      rules: [{ trigger: ['blur'] }],
    },
+    {
+      field: 'username',
+      component: 'NInput',
+      label: '用户名',
+      componentProps: {
+        placeholder: '请输入用户名',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
    {
      field: 'addr',
      component: 'NInput',
@@ -51,8 +68,22 @@
      },
      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({});
--- a/web/src/views/monitor/serve-log/index.vue
+++ b/web/src/views/monitor/serve-log/index.vue
@@ -2,7 +2,7 @@
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="服务日志">
-        在这里开发者可以快速定位服务端在运行时产生的重要日志，方便排查系统异常和日常运维工作
+        在这里，开发者可以快速定位重要的运行时日志，以便更方便地排查系统异常和进行日常运维
      </n-card>
    </div>
    <n-card :bordered="false" class="proCard">
@@ -130,12 +130,6 @@
      return h(TableAction as any, {
        style: 'button',
        actions: [
-          {
-            label: '访问日志',
-            onClick: handleView.bind(null, record),
-            ifShow: record.sysLogId > 0,
-            type: 'default',
-          },
          {
            label: '堆栈',
            onClick: handleStack.bind(null, record),
@@ -146,6 +140,12 @@
            onClick: handleDelete.bind(null, record),
            auth: ['/serveLog/delete'],
          },
+          {
+            label: '访问日志',
+            onClick: handleView.bind(null, record),
+            ifShow: record.sysLogId > 0,
+            type: 'default',
+          },
        ],
      });
    },
--- a/web/src/views/monitor/serve-monitor/components/chart/FullYearSalesChart.vue
+++ b/web/src/views/monitor/serve-monitor/components/chart/FullYearSalesChart.vue
@@ -199,10 +199,10 @@

      const fullYearSalesChart = ref<HTMLDivElement | null>(null);
      watch(props, (newVal, _oldVal) => {
-        last.value  = newVal.dataModel[newVal.dataModel.length - 1];
+        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]
+            const v: any = newVal.dataModel[i];
            s.value.push(v.up);
            x.value.push(v.down);
            months.value.push(v.time);
--- a/web/src/views/monitor/serve-monitor/components/chart/LoadChart.vue
+++ b/web/src/views/monitor/serve-monitor/components/chart/LoadChart.vue
@@ -4,17 +4,22 @@

 <script lang="ts">
  import useEcharts from '@/hooks/useEcharts';
-  import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  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: () => {
-          // eslint-disable-next-line vue/require-valid-default-prop
-          return {};
+          return [];
        },
      },
    },
@@ -72,51 +77,53 @@
        ],
      });

-      const loading = ref(true);
-      const orderChartWrapper = ref<HTMLDivElement | null>(null);
+      const orderChartWrapper = ref();
+
+      function getWrapper(): HTMLElement {
+        return orderChartWrapper.value as HTMLElement;
+      }
+
      const init = () => {
-        for (let i = 0; i < props.dataModel?.length; i++) {
-          const v : any = props.dataModel[i]
-          data.value.push({
-            name: 'CPU分钟负载比率',
-            value: [v?.time, v?.ratio],
-          });
-        }
-
-        // 基于准备好的dom，初始化echarts实例
-        setTimeout(() => {
-          loading.value = false;
-          nextTick(() => {
-            useEcharts(orderChartWrapper.value as HTMLDivElement).setOption(option.value);
-          });
-        }, 100);
-
        // 绘制图表
        option.value.series.forEach((item) => {
          item.data = data.value;
        });
-        useEcharts(orderChartWrapper.value as HTMLDivElement).setOption(option.value);
+
+        handleResize();
+
+        useEcharts(getWrapper()).setOption(option.value);
      };
-      const updateChart = () => {
-        useEcharts(orderChartWrapper.value as HTMLDivElement).resize();
+
+      // 调整图表大小
+      const handleResize = () => {
+        useEcharts(getWrapper()).resize();
      };
+
      onMounted(init);
+
      onBeforeUnmount(() => {
-        dispose(orderChartWrapper.value as HTMLDivElement);
+        dispose(getWrapper());
      });
-      watch(props, (newVal, _oldVal) => {
-        let last : any = newVal.dataModel[newVal.dataModel.length - 1];
-        data.value.shift();
-        data.value.push({
+
+      watch(props, (newVal) => {
+        const newValues = newVal.dataModel.map((item: DataItem) => ({
          name: 'CPU分钟负载比率',
-          value: [last?.time, last?.ratio],
-        });
-        useEcharts(orderChartWrapper.value as HTMLDivElement).setOption(option.value);
+          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 {
-        loading,
        orderChartWrapper,
-        updateChart,
      };
    },
  });
--- a/web/src/views/monitor/serve-monitor/index.vue
+++ b/web/src/views/monitor/serve-monitor/index.vue
@@ -22,7 +22,7 @@
                <n-progress type="line" :percentage="extra.data" />
              </template>
              <template v-else-if="index === 3" #extra>
-                <LoadChart ref="mLoadChart" :data-model="dataSource.load" />
+                <LoadChart ref="loadChartRef" :data-model="dataSource.load" />
              </template>
            </DataItem>
          </n-grid-item>
@@ -31,7 +31,7 @@
        <n-grid class="mt-2">
          <n-grid-item :span="24">
            <FullYearSalesChart
-              ref="fullYearSalesChart"
+              ref="fullYearSalesChartRef"
              :data-model="dataSource.net"
              :loading="loading"
            />
@@ -57,15 +57,18 @@
              <n-descriptions-item label="系统架构"> {{ dataRunInfo.arch }}</n-descriptions-item>
            </n-descriptions>
          </n-card>
-          <n-card title="GO运行信息">
+          <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.goName }}</n-descriptions-item>
-              <n-descriptions-item label="版本号"> {{ dataRunInfo.version }}</n-descriptions-item>
+              <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
              >
@@ -107,7 +110,7 @@
      const dataRunInfo = ref({
        arch: '',
        goMem: '0MB',
-        goName: 'Golang',
+        hgVersion: '',
        goSize: '0MB',
        goroutine: 0,
        hostname: '',
@@ -169,9 +172,12 @@
        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 onMessageList = inject('onMessageList');

      const onAdminMonitor = (res) => {
@@ -237,20 +243,11 @@
        }, 1000 * 10);
      }

-      const mLoadChart = ref<InstanceType<typeof LoadChart>>();
-      const fullYearSalesChart = ref<InstanceType<typeof FullYearSalesChart>>();
-      const onResize = () => {
-        setTimeout(() => {
-          mLoadChart.value?.updateChart();
-        }, 500);
-      };
-      const collapse = true;
-      onResize();
      return {
        loading,
        collapse,
-        mLoadChart,
-        fullYearSalesChart,
+        loadChartRef,
+        fullYearSalesChartRef,
        dataSource,
        dataRunInfo,
        formatBefore,
--- a/web/src/views/org/dept/dept.vue
+++ b/web/src/views/org/dept/dept.vue
@@ -61,6 +61,7 @@
          <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>
@@ -68,16 +69,18 @@
          <n-form-item label="负责人" path="leader">
            <n-input placeholder="请输入负责人" v-model:value="formParams.leader" />
          </n-form-item>
+
          <n-form-item label="联系电话" path="phone">
            <n-input placeholder="请输入联系电话" v-model:value="formParams.phone" />
          </n-form-item>
+
          <n-form-item label="邮箱" path="email">
            <n-input placeholder="请输入邮箱" v-model:value="formParams.email" />
          </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="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">
@@ -113,6 +116,7 @@
  import { cloneDeep } from 'lodash-es';
  import { renderIcon, renderTooltip } from '@/utils';
  import { HelpCircleOutline } from '@vicons/ionicons5';
+  import { defRangeShortcuts } from '@/utils/dateUtil';

  const rules = {
    name: {
@@ -152,6 +156,31 @@
        },
      },
    },
+    {
+      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);
+        },
+      },
+    },
  ];

  const [register, {}] = useForm({
--- a/web/src/views/org/post/post.vue
+++ b/web/src/views/org/post/post.vue
@@ -52,7 +52,6 @@
      >
        <n-form
          :model="formParams"
-          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="80"
@@ -61,13 +60,14 @@
          <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 />-->
-          <!--          </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">
@@ -105,6 +105,7 @@
  import { columns } from './columns';
  import { DeleteOutlined, PlusOutlined } from '@vicons/antd';
  import { statusActions, statusOptions } from '@/enums/optionsiEnum';
+  import { defRangeShortcuts } from "@/utils/dateUtil";

  const params = ref<any>({
    pageSize: 10,
@@ -113,14 +114,6 @@
    status: null,
  });

-  const rules = {
-    name: {
-      // required: true,
-      trigger: ['blur', 'input'],
-      message: '请输入名称',
-    },
-  };
-
  const schemas: FormSchema[] = [
    {
      field: 'name',
@@ -159,6 +152,19 @@
        },
      },
    },
+    {
+      field: 'createdAt',
+      component: 'NDatePicker',
+      label: '创建时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        shortcuts: defRangeShortcuts(),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
  ];

  const message = useMessage();
--- a/web/src/views/org/user/list.vue
+++ b/web/src/views/org/user/list.vue
@@ -228,7 +228,7 @@
 </template>

 <script lang="ts" setup>
-  import { h, reactive, ref } from 'vue';
+  import { h, reactive, ref, onMounted } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { ActionItem, BasicTable, TableAction } from '@/components/Table';
  import { BasicForm } from '@/components/Form/index';
@@ -243,7 +243,7 @@
  import QrcodeVue from 'qrcode.vue';
  import AddBalance from './addBalance.vue';
  import AddIntegral from './addIntegral.vue';
-  import { addNewState, addState, options, register, defaultState } from './model';
+  import { addNewState, addState, options, register, defaultState, loadOptions } from './model';
  import { usePermission } from '@/hooks/web/usePermission';
  import { useUserStore } from '@/store/modules/user';
  import { LoginRoute } from '@/router';
@@ -518,11 +518,15 @@
    formParams.value = addNewState(record as addState);
  }

-  function handleInviteQR(code: string) {
+  function handleInviteQR(code: any) {
    const domain = getNowUrl() + '#';
    qrParams.value.qrUrl = domain + LoginRoute.path + '?scope=register&inviteCode=' + code;
    showQrModal.value = true;
  }
+
+  onMounted(async () => {
+    await loadOptions();
+  });
 </script>

 <style lang="less" scoped></style>
--- a/web/src/views/org/user/model.ts
+++ b/web/src/views/org/user/model.ts
@@ -178,7 +178,7 @@ export const options = ref<any>({
  post: [],
 });

-async function loadOptions() {
+export async function loadOptions() {
  const dept = await getDeptOption();
  if (dept.list !== undefined) {
    options.value.dept = dept.list;
@@ -187,6 +187,7 @@ async function loadOptions() {
  const role = await getRoleOption();
  if (role.list !== undefined) {
    options.value.role = role.list;
+    options.value.roleTabs = [{ id: -1, name: '全部' }];
    treeDataToCompressed(role.list);
  }

@@ -207,8 +208,5 @@ function treeDataToCompressed(source) {
      ? treeDataToCompressed(source[i].children)
      : ''; // 子级递归
  }
-
  return options.value.roleTabs;
 }
-
-await loadOptions();
--- a/web/src/views/org/user/user.vue
+++ b/web/src/views/org/user/user.vue
@@ -39,7 +39,8 @@
    }
  });

-  function handleBeforeLeave(tabName: string) {
+  function handleBeforeLeave(tabName: string): boolean | Promise<boolean> {
    defaultTab.value = tabName;
+    return true;
  }
 </script>
--- a/web/src/views/permission/menu/CreateDrawer.vue
+++ b/web/src/views/permission/menu/CreateDrawer.vue
@@ -296,7 +296,7 @@
      },
    },
    emits: ['loadData'],
-    setup(props, context) {
+    setup(_props, context) {
      const message = useMessage();
      const formRef: any = ref(null);
      const state = reactive<any>({
--- a/web/src/views/permission/role/columns.ts
+++ b/web/src/views/permission/role/columns.ts
@@ -40,7 +40,7 @@ export const columns = [
  {
    title: '角色编码',
    key: 'key',
-    // width: 150,
+    width: 150,
  },
  // {
  //   title: '上级角色',
@@ -60,22 +60,22 @@ export const columns = [
        }
      );
    },
-    // width: 80,
+    width: 80,
  },
  {
    title: '排序',
    key: 'sort',
-    // width: 100,
+    width: 100,
  },
  {
    title: '备注',
    key: 'remark',
-    // width: 300,
+    width: 180,
  },
  {
    title: '状态',
    key: 'status',
-    // width: 80,
+    width: 80,
    render(row) {
      return h(
        NTag,
--- a/web/src/views/permission/role/role.vue
+++ b/web/src/views/permission/role/role.vue
@@ -31,8 +31,8 @@
      <div class="py-3 menu-list" :style="{ maxHeight: '90vh', height: '70vh' }">
        <n-tree
          block-line
-          cascade
          checkable
+          :check-on-click="true"
          :default-expand-all="true"
          :virtual-scroll="true"
          :data="treeData"
@@ -155,7 +155,7 @@

 <script lang="ts" setup>
  import { h, onMounted, reactive, ref } from 'vue';
-  import { TreeSelectOption, useDialog, useMessage } from 'naive-ui';
+  import { useDialog, useMessage } from 'naive-ui';
  import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
  import {
    Delete,
@@ -189,6 +189,12 @@
  const checkedKeys = ref<any>([]);
  const updatePermissionsParams = ref<any>({});
  const optionTreeData = ref<any>([]);
+  const dataScopeOption = ref<any>();
+  const deptList = ref<any>([]);
+  const dataFormRef = ref<any>();
+  const dataFormBtnLoading = ref(false);
+  const showDataModal = ref(false);
+  const dataForm = ref<any>();

  const rules = {
    name: {
@@ -217,10 +223,10 @@
    customDept: [],
  };

-  let formParams = ref<any>(cloneDeep(defaultState));
+  const formParams = ref<any>(cloneDeep(defaultState));

  const actionColumn = reactive<BasicColumn>({
-    width: 320,
+    width: 300,
    title: '操作',
    key: 'action',
    fixed: 'right',
@@ -350,21 +356,12 @@
    showModal.value = true;
  }

-  const dataScopeOption = ref<any>();
-  const deptList = ref<any>([]);
-  const dataFormRef = ref<any>();
-  const dataFormBtnLoading = ref(false);
-  const showDataModal = ref(false);
-  const dataForm = ref<any>();
  function handleDataAuth(record: Recordable) {
    dataForm.value = cloneDeep(record);
    showDataModal.value = true;
  }

-  function handleUpdateDeptValue(
-    value: string | number | Array<string | number> | null,
-    _option: TreeSelectOption | null | Array<TreeSelectOption | null>
-  ) {
+  function handleUpdateDeptValue(value: string | number | Array<string | number> | null) {
    dataForm.value.customDept = value;
  }

--- a/web/src/views/system/blacklist/index.vue
+++ b/web/src/views/system/blacklist/index.vue
@@ -98,34 +98,30 @@
 </template>

 <script lang="ts" setup>
-  import { h, onMounted, reactive, ref } from 'vue';
+  import { h, reactive, ref } from 'vue';
  import { NTag, 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, statusOptions } from '@/enums/optionsiEnum';
-  import { Dict } from '@/api/dict/dict';
-  import { getOptionLabel, getOptionTag } from '@/utils/hotgo';
+  import { statusActions } from '@/enums/optionsiEnum';
+  import { getOptionLabel, getOptionTag, Option } from '@/utils/hotgo';
+  import { defRangeShortcuts } from '@/utils/dateUtil';

-  const blacklistOptions = [
+  const blacklistOptions: Option[] = [
    {
+      key: 1,
      value: 1,
      label: '封禁中',
      listClass: 'warning',
    },
    {
+      key: 2,
      value: 2,
      label: '已解封',
      listClass: 'success',
    },
-  ].map((s) => {
-    return s;
-  });
-
-  const options = ref({
-    status: blacklistOptions,
-  });
+  ];

  const columns = [
    {
@@ -150,16 +146,15 @@
            style: {
              marginRight: '6px',
            },
-            type: getOptionTag(options.value.status, row.status),
+            type: getOptionTag(blacklistOptions, row.status),
            bordered: false,
          },
          {
-            default: () => getOptionLabel(options.value.status, row.status),
+            default: () => getOptionLabel(blacklistOptions, row.status),
          }
        );
      },
    },
-
    {
      title: '创建时间',
      key: 'createdAt',
@@ -173,13 +168,7 @@
    status: null,
  });

-  const rules = {
-    title: {
-      // required: true,
-      trigger: ['blur', 'input'],
-      message: '请输入标题',
-    },
-  };
+  const rules = {};

  const schemas = ref<FormSchema[]>([
    {
@@ -207,6 +196,31 @@
        },
      },
    },
+    {
+      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();
--- a/web/src/views/system/config/BasicSetting.vue
+++ b/web/src/views/system/config/BasicSetting.vue
@@ -7,13 +7,7 @@
        </n-form-item>

        <n-form-item label="网站logo" path="basicLogo">
-          <UploadImage
-            :maxNumber="1"
-            v-model:value="formValue.basicLogo"
-            :helpText="
-              '网站logo适用于客户端使用，图片大小不超过' + componentSetting.upload.maxSize + 'MB'
-            "
-          />
+          <FileChooser v-model:value="formValue.basicLogo" file-type="image" />
        </n-form-item>

        <n-form-item label="网站域名" path="basicDomain">
@@ -67,8 +61,8 @@
 <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
-  import componentSetting from '@/settings/componentSetting';
  import { getConfig, updateConfig } from '@/api/sys/config';
+  import FileChooser from '@/components/FileChooser/index.vue';

  const group = ref('basic');
  const show = ref(false);
--- a/web/src/views/system/config/LoginSetting.vue
+++ b/web/src/views/system/config/LoginSetting.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <n-spin :show="show" description="请稍候...">
-      <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
+      <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">
@@ -47,7 +47,7 @@

        <n-divider title-placement="left">注册默认信息配置</n-divider>
        <n-form-item label="默认注册头像" path="loginAvatar">
-          <UploadImage :maxNumber="1" v-model:value="formValue.loginAvatar" />
+          <FileChooser v-model:value="formValue.loginAvatar" file-type="image" />
        </n-form-item>

        <n-form-item label="默认注册角色" path="loginRoleId">
@@ -100,16 +100,16 @@
  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';
-  import UploadImage from '@/components/Upload/uploadImage.vue';

+  const message = useMessage();
+  const formRef: any = ref(null);
  const group = ref('login');
  const show = ref(false);
-  const rules = {};
-  const formRef: any = ref(null);
-  const message = useMessage();
+
  const formValue = ref({
    loginRegisterSwitch: 1,
    loginCaptchaSwitch: 1,
@@ -180,12 +180,6 @@
    });
  }

-  onMounted(async () => {
-    show.value = true;
-    await loadOptions();
-    load();
-  });
-
  function load() {
    show.value = true;
    new Promise((_resolve, _reject) => {
@@ -200,4 +194,10 @@
        });
    });
  }
+
+  onMounted(async () => {
+    show.value = true;
+    await loadOptions();
+    load();
+  });
 </script>
--- a/web/src/views/system/config/PaySetting.vue
+++ b/web/src/views/system/config/PaySetting.vue
@@ -96,7 +96,7 @@
        <div>
          <n-space>
            <n-button type="primary" @click="formSubmit">保存更新</n-button>
-<!--            <n-button type="default" @click="sendTest">测试支付</n-button>-->
+            <!--            <n-button type="default" @click="sendTest">测试支付</n-button>-->
          </n-space>
        </div>
      </n-form>
--- a/web/src/views/system/config/UploadSetting.vue
+++ b/web/src/views/system/config/UploadSetting.vue
@@ -152,9 +152,7 @@
              <n-icon :size="16" :component="Glasses" />
            </template>
          </n-input>
-          <template #feedback
-            >创建地址：https://ram.console.aliyun.com/manage/ak</template
-          >
+          <template #feedback>创建地址：https://ram.console.aliyun.com/manage/ak</template>
        </n-form-item>

        <n-form-item label="AccessKey Secret" path="uploadOssSecretKey">
@@ -200,9 +198,7 @@
              <n-icon :size="16" :component="Glasses" />
            </template>
          </n-input>
-          <template #feedback
-          >创建地址：https://portal.qiniu.com/user/key</template
-          >
+          <template #feedback>创建地址：https://portal.qiniu.com/user/key</template>
        </n-form-item>

        <n-form-item label="SecretKey" path="uploadQiNiuSecretKey">
@@ -287,12 +283,12 @@
    uploadOssEndpoint: '',
    uploadOssBucketURL: '',
    uploadOssPath: '',
-    uploadOssBucket:'',
-    uploadQiNiuAccessKey:'',
-    uploadQiNiuSecretKey:'',
-    uploadQiNiuDomain:'',
-    uploadQiNiuPath:'',
-    uploadQiNiuBucket:'',
+    uploadOssBucket: '',
+    uploadQiNiuAccessKey: '',
+    uploadQiNiuSecretKey: '',
+    uploadQiNiuDomain: '',
+    uploadQiNiuPath: '',
+    uploadQiNiuBucket: '',
  });

  function formSubmit() {
--- a/web/src/views/system/config/WechatSetting.vue
+++ b/web/src/views/system/config/WechatSetting.vue
@@ -27,8 +27,8 @@
            clearable
          />
          <template #feedback
-            >与公众平台接入设置值一致，必须为英文或者数字，长度为43个字符 </template
-          >
+            >与公众平台接入设置值一致，必须为英文或者数字，长度为43个字符
+          </template>
        </n-form-item>

        <n-divider title-placement="left">开放平台</n-divider>
@@ -56,7 +56,7 @@
          >
        </n-form-item>

-<!--        <n-divider title-placement="left">小程序</n-divider>-->
+        <!--        <n-divider title-placement="left">小程序</n-divider>-->

        <div>
          <n-space>
--- a/web/src/views/system/cron/index.vue
+++ b/web/src/views/system/cron/index.vue
@@ -445,7 +445,6 @@
  }

  const GroupModalRef = ref();
-
  function openGroupModal() {
    const { openDrawer } = GroupModalRef.value;
    openDrawer();