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

2025-11-15 05:33:47 +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/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hotgo",
-  "version": "2.7.6",
+  "version": "2.8.4",
  "author": {
    "name": "MengShuai",
    "email": "133814250@qq.com",
--- a/web/src/api/apply/attachment.ts
+++ b/web/src/api/apply/attachment.ts
@@ -39,3 +39,18 @@ export function View(params) {
    params,
  });
 }
+
+export function ChooserOption() {
+  return http.request({
+    url: '/attachment/chooserOption',
+    method: 'GET',
+  });
+}
+
+export function ClearKind(params) {
+  return http.request({
+    url: '/attachment/clearKind',
+    method: 'POST',
+    params,
+  });
+}
--- a/web/src/api/monitor/monitor.ts
+++ b/web/src/api/monitor/monitor.ts
@@ -2,7 +2,7 @@ import { http } from '@/utils/http/axios';

 export function OnlineList(params) {
  return http.request({
-    url: '/monitor/onlineList',
+    url: '/monitor/userOnlineList',
    method: 'get',
    params,
  });
@@ -10,8 +10,31 @@ export function OnlineList(params) {

 export function Offline(params) {
  return http.request({
-    url: '/monitor/offline',
+    url: '/monitor/userOffline',
    method: 'POST',
    params,
  });
 }
+
+export function NetOnlineList(params) {
+  return http.request({
+    url: '/monitor/netOnlineList',
+    method: 'get',
+    params,
+  });
+}
+
+export function NetOffline(params) {
+  return http.request({
+    url: '/monitor/netOffline',
+    method: 'POST',
+    params,
+  });
+}
+
+export function NetOption() {
+  return http.request({
+    url: '/monitor/netOption',
+    method: 'get',
+  });
+}
--- a/web/src/api/order/index.ts
+++ b/web/src/api/order/index.ts
@@ -97,8 +97,6 @@ export function AcceptRefund(params) {
  });
 }

-
-
 // 导出充值订单
 export function Export(params) {
  jumpExport('/order/export', params);
--- a/web/src/api/serveLicense/index.ts
+++ b/web/src/api/serveLicense/index.ts
@@ -0,0 +1,60 @@
+import { http, jumpExport } from '@/utils/http/axios';
+
+// 获取服务许可证列表
+export function List(params) {
+  return http.request({
+    url: '/serveLicense/list',
+    method: 'get',
+    params,
+  });
+}
+
+// 删除/批量删除服务许可证
+export function Delete(params) {
+  return http.request({
+    url: '/serveLicense/delete',
+    method: 'POST',
+    params,
+  });
+}
+
+// 添加/编辑服务许可证
+export function Edit(params) {
+  return http.request({
+    url: '/serveLicense/edit',
+    method: 'POST',
+    params,
+  });
+}
+
+// 修改服务许可证状态
+export function Status(params) {
+  return http.request({
+    url: '/serveLicense/status',
+    method: 'POST',
+    params,
+  });
+}
+
+// 获取服务许可证指定详情
+export function View(params) {
+  return http.request({
+    url: '/serveLicense/view',
+    method: 'GET',
+    params,
+  });
+}
+
+// 分配服务许可证路由
+export function AssignRouter(params) {
+  return http.request({
+    url: '/serveLicense/assignRouter',
+    method: 'POST',
+    params,
+  });
+}
+
+// 导出服务许可证
+export function Export(params) {
+  jumpExport('/serveLicense/export', params);
+}
--- a/web/src/api/system/menu.ts
+++ b/web/src/api/system/menu.ts
@@ -1,5 +1,5 @@
-import {http} from '@/utils/http/axios';
-import {ApiEnum} from "@/enums/apiEnum";
+import { http } from '@/utils/http/axios';
+import { ApiEnum } from '@/enums/apiEnum';

 /**
 * @description: 根据用户id获取用户菜单
--- a/web/src/components/CountTo/CountTo.vue
+++ b/web/src/components/CountTo/CountTo.vue
@@ -46,7 +46,7 @@
      const source = ref(props.startVal);
      const disabled = ref(false);
      let outputValue = useTransition(source);
-  
+
      const value = computed(() => formatNumber(unref(outputValue)));

      watchEffect(() => {
--- a/web/src/components/FileChooser/index.vue
+++ b/web/src/components/FileChooser/index.vue
@@ -0,0 +1,361 @@
+<template>
+  <n-space vertical>
+    <n-button @click="showModal = true" size="small">
+      <template #icon
+        ><n-icon><PlusOutlined /></n-icon> </template
+      >选择{{ buttonText }}
+    </n-button>
+    <div class="w-full">
+      <div class="upload">
+        <div class="upload-card" v-if="fileList.length > 0">
+          <div
+            class="upload-card-item"
+            :style="getCSSProperties"
+            v-for="(item, index) in fileList"
+            :key="`img_${index}`"
+          >
+            <div class="upload-card-item-info">
+              <div class="img-box">
+                <template v-if="fileType === 'image'">
+                  <img :src="item" @error="errorImg($event)" alt="" />
+                </template>
+                <template v-else>
+                  <n-avatar :style="fileAvatarCSS">{{ getFileExt(item) }}</n-avatar>
+                </template>
+              </div>
+              <div class="img-box-actions">
+                <template v-if="fileType === 'image'">
+                  <n-icon size="18" class="mx-2 action-icon" @click="handlePreview(item)">
+                    <EyeOutlined />
+                  </n-icon>
+                </template>
+                <template v-else>
+                  <n-icon size="18" class="mx-2 action-icon" @click="handleDownload(item)">
+                    <CloudDownloadOutlined />
+                  </n-icon>
+                </template>
+                <n-icon size="18" class="mx-2 action-icon" @click="handleRemove(index)">
+                  <DeleteOutlined />
+                </n-icon>
+              </div>
+            </div>
+          </div> </div></div
+    ></div>
+  </n-space>
+
+  <n-modal
+    v-model:show="showModal"
+    :on-after-leave="handleCancel"
+    :style="{
+      width: dialogWidth,
+    }"
+  >
+    <n-card title="文件选择">
+      <template #header-extra>
+        <n-space>
+          <n-button @click="handleUpload" ghost>
+            <template #icon>
+              <n-icon :component="UploadOutlined" />
+            </template>
+            上传文件
+          </n-button>
+        </n-space>
+      </template>
+      <n-card style="overflow: auto" content-style="padding: 0;">
+        <Chooser
+          ref="chooserRef"
+          :file-type="fileType"
+          :maxNumber="maxNumber"
+          :fileList="fileList"
+          @saveChange="saveChange"
+        />
+      </n-card>
+      <template #footer>
+        <n-space justify="end">
+          <n-button @click="handleCancel"> 取消 </n-button>
+          <n-button type="primary" @click="handleSelectFile"> 确定 </n-button>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+
+  <FileUpload
+    ref="fileUploadRef"
+    :width="dialogWidth"
+    :finish-call="handleFinishCall"
+    max-upload="20"
+  />
+
+  <Preview ref="previewRef" />
+</template>
+
+<script lang="ts" setup>
+  import { NButton, NSpace, NCard, NModal, NIcon, useDialog } from 'naive-ui';
+  import { cloneDeep } from 'lodash-es';
+  import FileUpload from '@/components/FileChooser/src/Upload.vue';
+  import Chooser from '@/components/FileChooser/src/Chooser.vue';
+  import Preview from '@/components/FileChooser/src/Preview.vue';
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { adaModalWidth, errorImg } from '@/utils/hotgo';
+  import { getFileExt } from '@/utils/urlUtils';
+  import {
+    UploadOutlined,
+    PlusOutlined,
+    CloudDownloadOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+  } from '@vicons/antd';
+  import { Attachment, FileType, getFileType } from '@/components/FileChooser/src/model';
+  import { isArrayString, isString } from '@/utils/is';
+
+  export interface Props {
+    value: string | string[] | null;
+    maxNumber?: number;
+    fileType?: FileType;
+    width?: number;
+    height?: number;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    value: '',
+    maxNumber: 1,
+    fileType: 'default',
+    width: 100,
+    height: 100,
+  });
+
+  const emit = defineEmits(['update:value']);
+  const fileUploadRef = ref();
+  const dialogWidth = ref('85%');
+  const dialog = useDialog();
+  const showModal = ref(false);
+  const chooserRef = ref();
+  const previewRef = ref();
+  const fileList = ref<string[]>([]);
+
+  const getCSSProperties = computed(() => {
+    return {
+      width: `${props.width}px`,
+      height: `${props.height}px`,
+    };
+  });
+
+  const fileAvatarCSS = computed(() => {
+    return {
+      '--n-merged-size': `var(--n-avatar-size-override, ${props.width * 0.8}px)`,
+      '--n-font-size': `18px`,
+    };
+  });
+
+  const buttonText = computed(() => {
+    return getFileType(props.fileType);
+  });
+
+  // 预览
+  function handlePreview(url: string) {
+    previewRef.value.openPreview(url);
+  }
+
+  // 下载
+  function handleDownload(url: string) {
+    window.open(url);
+  }
+
+  // 删除
+  function handleRemove(index: number) {
+    dialog.info({
+      title: '提示',
+      content: '你确定要删除吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        fileList.value.splice(index, 1);
+        if (props.maxNumber === 1) {
+          emit('update:value', '');
+        } else {
+          emit('update:value', fileList.value);
+        }
+      },
+      onNegativeClick: () => {},
+    });
+  }
+
+  function handleSelectFile() {
+    showModal.value = false;
+    if (props.maxNumber === 1) {
+      emit('update:value', fileList.value.length > 0 ? fileList.value[0] : '');
+    } else {
+      emit('update:value', fileList.value);
+    }
+  }
+
+  function handleCancel() {
+    showModal.value = false;
+    loadImage();
+  }
+
+  function handleUpload() {
+    fileUploadRef.value.openModal();
+  }
+
+  function handleFinishCall(result: Attachment, success: boolean) {
+    if (success) {
+      chooserRef.value.reloadTable();
+    }
+  }
+
+  function saveChange(list: string[]) {
+    fileList.value = list;
+  }
+
+  function loadImage() {
+    const value = cloneDeep(props.value);
+    if (props.maxNumber === 1) {
+      fileList.value = [];
+      if (value !== '') {
+        if (!isString(value)) {
+          console.warn(
+            'When the file picker is currently in single-file mode, but the passed value is not of type string, there may be potential issues.'
+          );
+        }
+        fileList.value.push(value as string);
+      }
+    } else {
+      if (!isArrayString(value)) {
+        console.warn(
+          'When the file picker is currently in multiple-file mode, but the passed value is not of type string array, there may be potential issues.'
+        );
+      }
+      fileList.value = value as string[];
+    }
+  }
+
+  watch(
+    () => props.value,
+    () => {
+      loadImage();
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+
+  onMounted(async () => {
+    adaModalWidth(dialogWidth, 1080);
+    loadImage();
+  });
+</script>
+
+<style lang="less">
+  .n-upload {
+    width: auto; /**  居中 */
+  }
+
+  .upload {
+    width: 100%;
+    overflow: hidden;
+
+    &-card {
+      width: auto;
+      height: auto;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+
+      &-item {
+        margin: 0 8px 8px 0;
+        position: relative;
+        padding: 8px;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+
+        &:hover {
+          background: 0 0;
+
+          .upload-card-item-info::before {
+            opacity: 1;
+          }
+
+          &-info::before {
+            opacity: 1;
+          }
+        }
+
+        &-info {
+          position: relative;
+          height: 100%;
+          padding: 0;
+          overflow: hidden;
+
+          &:hover {
+            .img-box-actions {
+              opacity: 1;
+            }
+          }
+
+          &::before {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            transition: all 0.3s;
+            content: ' ';
+          }
+
+          .img-box {
+            position: relative;
+            //padding: 8px;
+            //border: 1px solid #d9d9d9;
+            border-radius: 2px;
+          }
+
+          .img-box-actions {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 10;
+            white-space: nowrap;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            &:hover {
+              background: 0 0;
+            }
+
+            .action-icon {
+              color: rgba(255, 255, 255, 0.85);
+
+              &:hover {
+                cursor: pointer;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+
+      &-item-select-picture {
+        border: 1px dashed #d9d9d9;
+        border-radius: 2px;
+        cursor: pointer;
+        background: #fafafa;
+        color: #666;
+
+        .upload-title {
+          color: #666;
+        }
+      }
+    }
+  }
+</style>
--- a/web/src/components/FileChooser/src/Chooser.vue
+++ b/web/src/components/FileChooser/src/Chooser.vue
@@ -0,0 +1,428 @@
+<template>
+  <n-grid :x-gap="5" :y-gap="5" :cols="pageGridCols" responsive="screen">
+    <n-gi :span="2">
+      <n-menu
+        :options="options.kind"
+        style="width: 100%"
+        :default-value="defaultKindValue"
+        :on-update:value="handleUpdateKind"
+      />
+    </n-gi>
+    <n-gi :span="8">
+      <n-spin style="height: 100%" :show="loading">
+        <n-layout style="height: 100%" content-style="display:flex;flex-direction: column;">
+          <n-layout-header>
+            <BasicForm
+              style="padding-top: 10px; box-sizing: border-box"
+              @register="register"
+              @submit="reloadTable"
+              @reset="reloadTable"
+              @keyup.enter="reloadTable"
+              ref="searchFormRef"
+            >
+              <template #statusSlot="{ model, field }">
+                <n-input v-model:value="model[field]" />
+              </template>
+            </BasicForm>
+          </n-layout-header>
+
+          <n-empty v-if="isEmptyDataSource()" description="无数据" />
+          <n-layout-content style="padding: 5px; box-sizing: border-box">
+            <n-grid :cols="imageGridCols" x-gap="15" y-gap="15" responsive="screen">
+              <n-grid-item
+                v-for="item in dataSource"
+                :key="item.id"
+                :class="{ imageActive: isSelected(item) }"
+              >
+                <n-card
+                  size="small"
+                  hoverable
+                  content-style="padding: 3px;"
+                  footer-style="padding: 0"
+                  style="overflow: hidden"
+                  bordered
+                >
+                  <div @click="handleSelect(item)">
+                    <n-image
+                      v-if="item.kind === 'image'"
+                      preview-disabled
+                      class="image-size"
+                      :src="item.fileUrl"
+                      :on-error="errorImg"
+                    />
+                    <n-avatar v-else class="image-size">
+                      <span style="font-size: 24px"> {{ getFileExt(item.fileUrl) }}</span>
+                    </n-avatar>
+                  </div>
+                  <template #footer>
+                    <n-ellipsis style="padding-left: 5px">
+                      {{ item.name }}
+                    </n-ellipsis>
+                  </template>
+
+                  <template #action style="padding: 5px">
+                    <n-space justify="center">
+                      <n-button
+                        strong
+                        secondary
+                        size="tiny"
+                        type="primary"
+                        @click="item.kind === 'image' ? handlePreview(item) : handleDown(item)"
+                      >
+                        <template #icon>
+                          <n-icon>
+                            <EyeOutlined v-if="item.kind === 'image'" />
+                            <DownloadOutlined v-else />
+                          </n-icon>
+                        </template>
+
+                        {{ item.kind === 'image' ? '预览' : '下载' }}
+                      </n-button>
+                      <n-button
+                        strong
+                        secondary
+                        size="tiny"
+                        type="error"
+                        @click="handleDelete(item)"
+                      >
+                        <template #icon>
+                          <n-icon>
+                            <DeleteOutlined />
+                          </n-icon>
+                        </template>
+                        删除
+                      </n-button>
+                    </n-space>
+                  </template>
+                </n-card>
+              </n-grid-item>
+            </n-grid>
+          </n-layout-content>
+          <n-space
+            v-if="!isEmptyDataSource()"
+            justify="end"
+            align="center"
+            style="box-sizing: border-box; padding: 5px; margin: 0"
+          >
+            <n-pagination
+              v-model:page="params.page"
+              v-model:page-size="params.pageSize"
+              :page-count="params.pageCount"
+              :page-slot="pageSlot"
+              :page-sizes="[10, 20, 30, 40]"
+              :on-update:page="onUpdatePage"
+              :on-update:page-size="onUpdatePageSize"
+              show-size-picker
+              show-quick-jumper
+            />
+          </n-space>
+        </n-layout>
+      </n-spin>
+    </n-gi>
+  </n-grid>
+  <Preview ref="previewRef" />
+</template>
+
+<script lang="ts" setup>
+  import { NSpace, NInput, NButton, useMessage, NEllipsis, useDialog } from 'naive-ui';
+  import { onMounted, ref, h, computed } from 'vue';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { defRangeShortcuts } from '@/utils/dateUtil';
+  import { EyeOutlined, DeleteOutlined, DownloadOutlined, ClearOutlined } from '@vicons/antd';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { ChooserOption, ClearKind, Delete, List } from '@/api/apply/attachment';
+  import { constantRouterIcon } from '@/router/router-icons';
+  import { errorImg } from '@/utils/hotgo';
+  import { getFileExt } from '@/utils/urlUtils';
+  import { renderIcon } from '@/utils';
+  import { Attachment, FileType, KindOption, KindRawOption } from './model';
+  import Preview from './Preview.vue';
+  import { VNode } from '@vue/runtime-core';
+
+  export interface Props {
+    fileList: string[] | null;
+    maxNumber?: number;
+    fileType?: FileType;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    fileList: null,
+    maxNumber: 1,
+    fileType: 'default',
+  });
+
+  const emit = defineEmits(['saveChange']);
+  const settingStore = useProjectSettingStore();
+  const message = useMessage();
+  const dialog = useDialog();
+  const selectList = ref(props.fileList);
+  const loading = ref(false);
+  const previewRef = ref();
+  const searchFormRef = ref<any>();
+  const dataSource = ref<Attachment[]>([]);
+
+  const defaultKindValue = computed(() => {
+    if (props.fileType === 'default') {
+      return '';
+    }
+    return props.fileType;
+  });
+
+  const pageSlot = computed(() => (settingStore.isMobile ? 3 : 10));
+
+  const imageGridCols = computed(() =>
+    settingStore.isMobile ? '2 s:1 m:2 l:2 xl:2 2xl:3' : '5 s:3 m:4 l:5 xl:5 2xl:6'
+  );
+
+  const pageGridCols = computed(() =>
+    settingStore.isMobile ? '1' : '10 s:1 m:1 l:10 xl:10 2xl:10'
+  );
+
+  const options = ref({
+    drive: [],
+    kind: [],
+  });
+
+  const schemas = ref<FormSchema[]>([
+    {
+      field: 'drive',
+      component: 'NSelect',
+      label: '',
+      defaultValue: null,
+      componentProps: {
+        placeholder: '请选择上传驱动',
+        options: options.value.drive,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '',
+      defaultValue: null,
+      componentProps: {
+        placeholder: '请输入文件名称',
+        options: options.value.drive,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'updatedAt',
+      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:2 xl:3 2xl:3' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  const params = ref({
+    kind: defaultKindValue.value,
+    page: 1,
+    pageSize: 10,
+    pageCount: 0,
+  });
+
+  function handleDelete(item: Attachment) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: item.id }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  function handlePreview(item: Attachment) {
+    previewRef.value.openPreview(item.fileUrl);
+  }
+
+  function handleDown(item: Attachment) {
+    window.open(item.fileUrl);
+  }
+
+  function handleSelect(item: Attachment) {
+    if (selectList.value === null || props.maxNumber == 1) {
+      selectList.value = [];
+    }
+
+    const index = selectList.value.findIndex((selected) => selected === item.fileUrl);
+    if (index === -1) {
+      if (selectList.value.length >= props.maxNumber) {
+        message.error('已达最大允许选择上限' + props.maxNumber + '个');
+        return;
+      }
+      selectList.value.push(item.fileUrl);
+    } else {
+      selectList.value.splice(index, 1);
+    }
+    emit('saveChange', selectList.value);
+  }
+
+  function handleUpdateKind(value: string) {
+    params.value.page = 1;
+    params.value.kind = value;
+    loadList();
+  }
+
+  function isSelected(item: Attachment) {
+    if (selectList.value === null) {
+      return false;
+    }
+    return selectList.value.some((selected) => selected === item.fileUrl);
+  }
+
+  function generateKindOptions(kinds: KindRawOption[]): any {
+    const option: KindOption[] = [];
+    kinds.forEach((item) => {
+      const data: KindOption = {
+        label: () => h(NEllipsis, null, { default: () => item.label }),
+        key: item.key,
+        extra: () => createExtraContent(item),
+        icon: constantRouterIcon[item.icon] || null,
+        disabled: isDisabledKindOption(item),
+      };
+      option.push(data);
+    });
+    return option;
+  }
+
+  function isDisabledKindOption(item: KindRawOption): boolean {
+    if (props.fileType === 'default') {
+      return false;
+    }
+    return item.key !== props.fileType;
+  }
+
+  function createExtraContent(item: KindRawOption): VNode {
+    return h(
+      NButton,
+      {
+        quaternary: true,
+        type: 'default',
+        size: 'tiny',
+        style: 'position: absolute; right: 15px;',
+        onClick: (event: MouseEvent) => {
+          event.stopPropagation();
+          dialog.warning({
+            title: '警告',
+            content: '你确定要清空 [' + item.label + '] 分类？该操作不可恢复！',
+            positiveText: '确定',
+            negativeText: '取消',
+            onPositiveClick: () => {
+              ClearKind({ kind: item.key }).then((_res) => {
+                message.success('操作成功');
+                reloadTable();
+              });
+            },
+            onNegativeClick: () => {
+              // message.error('取消');
+            },
+          });
+        },
+      },
+      { icon: renderIcon(ClearOutlined) }
+    );
+  }
+
+  async function loadOptions() {
+    let tmpOptions = await ChooserOption();
+    options.value.drive = tmpOptions.drive;
+    options.value.kind = generateKindOptions(tmpOptions.kind);
+
+    for (const item of schemas.value) {
+      switch (item.field) {
+        case 'drive':
+          item.componentProps.options = options.value.drive;
+          break;
+      }
+    }
+  }
+
+  function loadList() {
+    loading.value = true;
+    List({ ...params.value, ...searchFormRef.value?.formModel }).then((res) => {
+      dataSource.value = res.list;
+      params.value.page = res.page;
+      params.value.pageSize = res.pageSize;
+      params.value.pageCount = res.pageCount;
+      loading.value = false;
+    });
+  }
+
+  function isEmptyDataSource(): boolean {
+    return !dataSource.value || dataSource.value.length === 0;
+  }
+
+  function onUpdatePage(page: number) {
+    params.value.page = page;
+    loadList();
+  }
+
+  function onUpdatePageSize(pageSize: number) {
+    params.value.pageSize = pageSize;
+    loadList();
+  }
+
+  function reloadTable() {
+    params.value.page = 1;
+    loadList();
+  }
+
+  onMounted(async () => {
+    await loadOptions();
+    loadList();
+  });
+
+  defineExpose({
+    reloadTable,
+  });
+</script>
+
+<style lang="less" scoped>
+  .base-list .n-spin-content {
+    height: 100% !important;
+  }
+
+  :deep(.n-card__action) {
+    padding: 5px;
+  }
+
+  .imageActive {
+    border: 2px solid #3086ff;
+  }
+
+  :deep(img, video) {
+    max-width: 100%;
+    aspect-ratio: 1/1;
+  }
+
+  :deep(.image-size) {
+    aspect-ratio: 1/1;
+    width: 100%;
+    height: auto;
+  }
+</style>
--- a/web/src/components/FileChooser/src/Preview.vue
+++ b/web/src/components/FileChooser/src/Preview.vue
@@ -0,0 +1,29 @@
+<template>
+  <n-modal
+    v-model:show="showModal"
+    preset="card"
+    title="预览"
+    :bordered="false"
+    :style="{ width: '520px' }"
+  >
+    <n-image preview-disabled :src="previewUrl" :on-error="errorImg" />
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+  import { errorImg } from '@/utils/hotgo';
+  import { ref } from 'vue';
+  const showModal = ref(false);
+  const previewUrl = ref('');
+
+  function openPreview(url) {
+    showModal.value = true;
+    previewUrl.value = url;
+  }
+
+  defineExpose({
+    openPreview,
+  });
+</script>
+
+<style scoped lang="less"></style>
--- a/web/src/components/FileChooser/src/Upload.vue
+++ b/web/src/components/FileChooser/src/Upload.vue
@@ -0,0 +1,113 @@
+<template>
+  <n-modal
+    v-model:show="showFileModal"
+    :show-icon="false"
+    preset="dialog"
+    :style="{
+      width: width,
+    }"
+    :title="'上传' + typeTag"
+  >
+    <n-upload
+      multiple
+      directory-dnd
+      :action="`${uploadUrl}${urlPrefix}/upload/file`"
+      :headers="uploadHeaders"
+      :data="{ type: 0 }"
+      @finish="finish"
+      name="file"
+      :max="maxUpload"
+      :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"> 点击或者拖动{{ typeTag }}到该区域来上传</n-text>
+        <n-p depth="3" style="margin: 8px 0 0 0"> 单次最多允许{{ maxUpload }}个{{ typeTag }}</n-p>
+      </n-upload-dragger>
+    </n-upload>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, reactive, ref } from 'vue';
+  import { FileAddOutlined } from '@vicons/antd';
+  import { useUserStoreWidthOut } from '@/store/modules/user';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { NModal, UploadFileInfo, useMessage } from 'naive-ui';
+  import componentSetting from '@/settings/componentSetting';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import { Attachment, FileType, getFileType, UploadTag } from '@/components/FileChooser/src/model';
+
+  export interface Props {
+    width?: string;
+    maxUpload?: number;
+    finishCall?: Function | null;
+    uploadType?: FileType;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    width: '60%',
+    maxUpload: 20,
+    finishCall: null,
+    uploadType: 'default',
+  });
+
+  const fileList = ref<UploadFileInfo[]>([]);
+  const showFileModal = ref(false);
+  const message = useMessage();
+  const useUserStore = useUserStoreWidthOut();
+  const globSetting = useGlobSetting();
+  const { uploadUrl } = globSetting;
+  const urlPrefix = globSetting.urlPrefix || '';
+  const uploadHeaders = reactive({
+    Authorization: useUserStore.token,
+    uploadType: props.uploadType,
+  });
+
+  const typeTag = computed(() => {
+    return getFileType(props.uploadType);
+  });
+
+  //上传结束
+  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] as Attachment;
+
+    //成功
+    if (code === ResultEnum.SUCCESS) {
+      fileList.value.push({
+        id: result.md5,
+        name: result.name,
+        status: 'finished',
+        type: result.naiveType,
+      });
+
+      message.success('上传' + result.name + '成功');
+      if (props.finishCall !== null) {
+        props.finishCall(result, true);
+      }
+    } else {
+      message.error(msg);
+      if (props.finishCall !== null) {
+        props.finishCall(result, false);
+      }
+    }
+  }
+
+  function openModal() {
+    showFileModal.value = true;
+    fileList.value = [];
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
--- a/web/src/components/FileChooser/src/model.ts
+++ b/web/src/components/FileChooser/src/model.ts
@@ -0,0 +1,57 @@
+import { VNode } from '@vue/runtime-core';
+
+export type Attachment = {
+  id: number;
+  appId: string;
+  memberId: number;
+  cateId: number;
+  drive: string;
+  name: string;
+  kind: string;
+  metaType: string;
+  naiveType: string;
+  path: string;
+  fileUrl: string;
+  size: number;
+  ext: string;
+  md5: string;
+  status: number;
+  createdAt: string;
+  updatedAt: string;
+  sizeFormat: string;
+};
+
+export interface KindRawOption {
+  key: string;
+  label: string;
+  icon: string;
+}
+
+export interface KindOption {
+  key: string;
+  label: any;
+  icon: VNode;
+  extra: any;
+  disabled: boolean;
+}
+
+export type FileType = 'image' | 'doc' | 'audio' | 'video' | 'zip' | 'other' | 'default';
+
+export function getFileType(fileType: string): string {
+  switch (fileType) {
+    case 'image':
+      return '图片';
+    case 'doc':
+      return '文档';
+    case 'audio':
+      return '音频';
+    case 'video':
+      return '视频';
+    case 'zip':
+      return '压缩包';
+    case 'other':
+    case 'default':
+      return '文件';
+  }
+  return '文件';
+}
--- a/web/src/components/SvgIcon/index.vue
+++ b/web/src/components/SvgIcon/index.vue
@@ -5,7 +5,7 @@
 </template>

 <script lang="ts">
-  import { defineComponent } from 'vue'
+  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'SvgIcon',
@@ -21,22 +21,22 @@
    },
    computed: {
      component(): string {
-        return this.prefix === 'icon' ? 'svg' : 'i'
+        return this.prefix === 'icon' ? 'svg' : 'i';
      },
      iconName(): string {
-        return `#${this.prefix}-${this.name}`
+        return `#${this.prefix}-${this.name}`;
      },
      className(): string {
        if (this.prefix === 'icon') {
-          return 'svg-icon'
+          return 'svg-icon';
        } else if (this.prefix === 'iconfont') {
-          return 'iconfont icon-' + this.name
+          return 'iconfont icon-' + this.name;
        } else {
-          return ''
+          return '';
        }
      },
    },
-  })
+  });
 </script>

 <style scoped>
--- a/web/src/components/Upload/src/BasicUpload.vue
+++ b/web/src/components/Upload/src/BasicUpload.vue
@@ -68,16 +68,7 @@
      </n-space>
    </div>

-    <!--预览图片-->
-    <n-modal
-      v-model:show="showModal"
-      preset="card"
-      title="预览"
-      :bordered="false"
-      :style="{ width: '520px' }"
-    >
-      <img :src="previewUrl" />
-    </n-modal>
+    <Preview ref="previewRef" />
  </div>
 </template>

@@ -86,6 +77,7 @@
  import { EyeOutlined, DeleteOutlined, PlusOutlined, CloudDownloadOutlined } from '@vicons/antd';
  import { basicProps } from './props';
  import { useMessage, useDialog } from 'naive-ui';
+  import Preview from '@/components/FileChooser/src/Preview.vue';
  import { ResultEnum } from '@/enums/httpEnum';
  import componentSetting from '@/settings/componentSetting';
  import { useGlobSetting } from '@/hooks/setting';
@@ -110,6 +102,7 @@
        };
      });

+      const previewRef = ref();
      const message = useMessage();
      const dialog = useDialog();
      const uploadTitle = ref(props.fileType === 'image' ? '上传图片' : '上传附件');
@@ -185,9 +178,9 @@

      //预览
      function preview(url: string) {
-        state.showModal = true;
-        state.previewUrl = url;
+        previewRef.value.openPreview(url);
      }
+
      //下载
      function download(url: string) {
        window.open(url);
@@ -294,6 +287,8 @@
        uploadTitle,
        fileAvatarCSS,
        getFileExt,
+        Preview,
+        previewRef,
      };
    },
  });
--- a/web/src/components/Upload/uploadImage.vue
+++ b/web/src/components/Upload/uploadImage.vue
@@ -26,6 +26,10 @@
    helpText?: string;
  }

+  const emit = defineEmits(['update:value']);
+  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
+  const image = ref<string>('');
+  const images = ref<string[]>([]);
  const globSetting = useGlobSetting();
  const urlPrefix = globSetting.urlPrefix || '';
  const { uploadUrl } = globSetting;
@@ -33,10 +37,6 @@
  const uploadHeaders = reactive({
    Authorization: useUserStore.token,
  });
-  const emit = defineEmits(['update:value']);
-  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
-  const image = ref<string>('');
-  const images = ref<string[]>([]);

  function uploadChange(list: string | string[]) {
    if (props.maxNumber === 1) {
@@ -48,7 +48,6 @@
    }
  }

-  //赋值默认图片显示
  function loadImage() {
    if (props.maxNumber === 1) {
      image.value = props.value as string;
--- a/web/src/directives/debounce.ts
+++ b/web/src/directives/debounce.ts
@@ -3,29 +3,29 @@
 * 按钮防抖指令，可自行扩展至input
 * 接收参数：function类型
 */
-import type { Directive, DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from 'vue';
 interface ElType extends HTMLElement {
-	__handleClick__: () => any;
+  __handleClick__: () => any;
 }
 const debounce: Directive = {
-	mounted(el: ElType, binding: DirectiveBinding) {
-		if (typeof binding.value !== "function") {
-			throw "callback must be a function";
-		}
-		let timer: NodeJS.Timeout | null = null;
-		el.__handleClick__ = function () {
-			if (timer) {
-				clearInterval(timer);
-			}
-			timer = setTimeout(() => {
-				binding.value();
-			}, 500);
-		};
-		el.addEventListener("click", el.__handleClick__);
-	},
-	beforeUnmount(el: ElType) {
-		el.removeEventListener("click", el.__handleClick__);
-	}
+  mounted(el: ElType, binding: DirectiveBinding) {
+    if (typeof binding.value !== 'function') {
+      throw 'callback must be a function';
+    }
+    let timer: NodeJS.Timeout | null = null;
+    el.__handleClick__ = function () {
+      if (timer) {
+        clearInterval(timer);
+      }
+      timer = setTimeout(() => {
+        binding.value();
+      }, 500);
+    };
+    el.addEventListener('click', el.__handleClick__);
+  },
+  beforeUnmount(el: ElType) {
+    el.removeEventListener('click', el.__handleClick__);
+  },
 };

 export default debounce;
--- a/web/src/directives/draggable.ts
+++ b/web/src/directives/draggable.ts
@@ -10,40 +10,40 @@
 	使用：在 Dom 上加上 v-draggable 即可
 	<div class="dialog-model" v-draggable></div>
 */
-import type { Directive } from "vue";
+import type { Directive } from 'vue';
 interface ElType extends HTMLElement {
-	parentNode: any;
+  parentNode: any;
 }
 const draggable: Directive = {
-	mounted: function (el: ElType) {
-		el.style.cursor = "move";
-		el.style.position = "absolute";
-		el.onmousedown = function (e) {
-			let disX = e.pageX - el.offsetLeft;
-			let disY = e.pageY - el.offsetTop;
-			document.onmousemove = function (e) {
-				let x = e.pageX - disX;
-				let y = e.pageY - disY;
-				let maxX = el.parentNode.offsetWidth - el.offsetWidth;
-				let maxY = el.parentNode.offsetHeight - el.offsetHeight;
-				if (x < 0) {
-					x = 0;
-				} else if (x > maxX) {
-					x = maxX;
-				}
+  mounted: function (el: ElType) {
+    el.style.cursor = 'move';
+    el.style.position = 'absolute';
+    el.onmousedown = function (e) {
+      const disX = e.pageX - el.offsetLeft;
+      const disY = e.pageY - el.offsetTop;
+      document.onmousemove = function (e) {
+        let x = e.pageX - disX;
+        let y = e.pageY - disY;
+        const maxX = el.parentNode.offsetWidth - el.offsetWidth;
+        const maxY = el.parentNode.offsetHeight - el.offsetHeight;
+        if (x < 0) {
+          x = 0;
+        } else if (x > maxX) {
+          x = maxX;
+        }

-				if (y < 0) {
-					y = 0;
-				} else if (y > maxY) {
-					y = maxY;
-				}
-				el.style.left = x + "px";
-				el.style.top = y + "px";
-			};
-			document.onmouseup = function () {
-				document.onmousemove = document.onmouseup = null;
-			};
-		};
-	}
+        if (y < 0) {
+          y = 0;
+        } else if (y > maxY) {
+          y = maxY;
+        }
+        el.style.left = x + 'px';
+        el.style.top = y + 'px';
+      };
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null;
+      };
+    };
+  },
 };
 export default draggable;
--- a/web/src/directives/throttle.ts
+++ b/web/src/directives/throttle.ts
@@ -8,34 +8,34 @@
  使用：给 Dom 加上 v-throttle 及回调函数即可
  <button v-throttle="debounceClick">节流提交</button>
 */
-import type { Directive, DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from 'vue';
 interface ElType extends HTMLElement {
-	__handleClick__: () => any;
-	disabled: boolean;
+  __handleClick__: () => any;
+  disabled: boolean;
 }
 const throttle: Directive = {
-	mounted(el: ElType, binding: DirectiveBinding) {
-		if (typeof binding.value !== "function") {
-			throw "callback must be a function";
-		}
-		let timer: NodeJS.Timeout | null = null;
-		el.__handleClick__ = function () {
-			if (timer) {
-				clearTimeout(timer);
-			}
-			if (!el.disabled) {
-				el.disabled = true;
-				binding.value();
-				timer = setTimeout(() => {
-					el.disabled = false;
-				}, 1000);
-			}
-		};
-		el.addEventListener("click", el.__handleClick__);
-	},
-	beforeUnmount(el: ElType) {
-		el.removeEventListener("click", el.__handleClick__);
-	}
+  mounted(el: ElType, binding: DirectiveBinding) {
+    if (typeof binding.value !== 'function') {
+      throw 'callback must be a function';
+    }
+    let timer: NodeJS.Timeout | null = null;
+    el.__handleClick__ = function () {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      if (!el.disabled) {
+        el.disabled = true;
+        binding.value();
+        timer = setTimeout(() => {
+          el.disabled = false;
+        }, 1000);
+      }
+    };
+    el.addEventListener('click', el.__handleClick__);
+  },
+  beforeUnmount(el: ElType) {
+    el.removeEventListener('click', el.__handleClick__);
+  },
 };

 export default throttle;
--- a/web/src/hooks/useTime.ts
+++ b/web/src/hooks/useTime.ts
@@ -21,10 +21,10 @@ export function useTime() {
    week.value = '日一二三四五六'.charAt(date.getDay());
    day.value = date.getDate();
    hour.value =
-      (date.getHours() + '')?.padStart(2, '0') ||
+      (date.getHours() + '').padStart(2, '0') ||
      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours());
    minute.value =
-      (date.getMinutes() + '')?.padStart(2, '0') ||
+      (date.getMinutes() + '').padStart(2, '0') ||
      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes());
    second.value = date.getSeconds();
  };
--- a/web/src/layout/components/Menu/index.vue
+++ b/web/src/layout/components/Menu/index.vue
@@ -123,7 +123,9 @@
        if (/http(s)?:/.test(key)) {
          window.open(key);
        } else {
-          router.push({ name: key });
+          if (getSelectedKeys.value !== key){
+            router.push({ name: key });
+          }
        }
        emit('clickMenuItem' as any, key);
      }
--- a/web/src/store/modules/user.ts
+++ b/web/src/store/modules/user.ts
@@ -226,11 +226,11 @@ export const useUserStore = defineStore({
        return false;
      }

-      if (this.loginConfig?.loginAutoOpenId !== 1) {
+      if (this.loginConfig !== null && this.loginConfig.loginAutoOpenId !== 1) {
        return false;
      }

-      return this.info?.openId === '';
+      return this.info === null || this.info.openId === '';
    },
    // 登出
    async logout() {
--- a/web/src/utils/array.ts
+++ b/web/src/utils/array.ts
@@ -1,75 +1,3 @@
-export function arrayDelIndex(array: any, keyName: string, key: string): any {
-  if (array === null || array === undefined || array.length === 0) {
-    return array;
-  }
-
-  const newArray = [];
-  for (let i = 0; i < array.length; i++) {
-    if (array[i][keyName] !== undefined && array[i][keyName] === key) {
-      continue;
-    }
-    // @ts-ignore
-    newArray.push(array[i]);
-  }
-
-  return newArray;
-}
-
-export function arrayAddIndex(array: any, keyName: string, key: string, row: any): any {
-  if (array === null || array === undefined) {
-    return array;
-  }
-  const newArray = [];
-
-  if (array.length === 0) {
-    // @ts-ignore
-    newArray.push(row);
-  } else {
-    let isFor = false;
-    for (let i = 0; i < array.length; i++) {
-      if (array[i][keyName] !== undefined && array[i][keyName] === key) {
-        array[i] = row;
-        isFor = true;
-      }
-      // @ts-ignore
-      newArray.push(array[i]);
-    }
-
-    if (!isFor) {
-      // @ts-ignore
-      newArray.push(row);
-    }
-  }
-
-  return newArray;
-}
-
-export function objDalEmpty(obj: object): object {
-  for (const key in obj) {
-    if (obj[key] === '' || obj[key] === undefined || obj[key] == null || obj[key].length === 0) {
-      delete obj[key];
-    }
-  }
-  return obj;
-}
-
-export function filterArray(condition, data) {
-  return data.filter((item) => {
-    return Object.keys(condition).every((key) => {
-      return String(item[key]).toLowerCase().includes(String(condition[key]).trim().toLowerCase());
-    });
-  });
-}
-
-export function findIndex(value, arr) {
-  for (let i = 0; i < arr.length; i++) {
-    const item = arr[i];
-    if (item.value == value) {
-      return i;
-    }
-  }
-  return false;
-}

 export function delNullProperty(obj) {
  for (const i in obj) {
@@ -121,11 +49,6 @@ export function encodeParams(obj) {
  return arr.join('&');
 }

-/**
- * 对象拷贝
- * @param obj2
- * @param obj1
- */
 export function copyObj(obj2: any, obj1: any) {
  for (const key in obj1) {
    if (obj2[key] !== undefined) {
@@ -134,3 +57,8 @@ export function copyObj(obj2: any, obj1: any) {
  }
  return obj2;
 }
+
+// 返回两个数组的差集
+export function findArrayDifference(arr1: number[], arr2: number[]): number[] {
+  return arr1.filter((num) => !arr2.includes(num));
+}
--- a/web/src/utils/http/axios/index.ts
+++ b/web/src/utils/http/axios/index.ts
@@ -103,7 +103,7 @@ const transform: AxiosTransform = {
      case ResultEnum.TIMEOUT:
        const LoginName = PageEnum.BASE_LOGIN_NAME;
        const LoginPath = PageEnum.BASE_LOGIN;
-        if (router.currentRoute.value?.name === LoginName) return;
+        if (router.currentRoute.value.name === LoginName) return;
        // 到登录页
        errorMsg = message ?? '登录超时，请重新登录!';
        $dialog.warning({
@@ -284,14 +284,7 @@ export const http = createAxios();

 // 导出
 export const jumpExport = function (url, params) {
-  window.location.href =
-    urlPrefix +
-    url +
-    '?' +
-    encodeParams({
-      ...delNullProperty(params),
-      ...{ authorization: useUserStoreWidthOut().token },
-    });
+  jump(url, params);
 };

 // 跳转
--- a/web/src/utils/is/index.ts
+++ b/web/src/utils/is/index.ts
@@ -80,6 +80,13 @@ export function isArray(val: any): val is Array<any> {
  return val && Array.isArray(val);
 }

+/**
+ * @description:  是否为字符串数组
+ */
+export function isArrayString(val: any): val is Array<any> {
+  return Array.isArray(val) && val.every((item: any) => typeof item === 'string');
+}
+
 /**
 * @description:  是否为转为string的json
 */
--- 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();