diff --git a/web/src/assets/images/tool.png b/web/src/assets/images/tool.png
new file mode 100644
index 0000000..35606c1
Binary files /dev/null and b/web/src/assets/images/tool.png differ
diff --git a/web/src/components/Application/Application.vue b/web/src/components/Application/Application.vue
new file mode 100644
index 0000000..9c812a7
--- /dev/null
+++ b/web/src/components/Application/Application.vue
@@ -0,0 +1,40 @@
+<template>
+  <n-loading-bar-provider>
+    <n-dialog-provider>
+      <DialogContent />
+      <n-notification-provider>
+        <n-message-provider>
+          <MessageContent />
+          <slot name="default"></slot>
+        </n-message-provider>
+      </n-notification-provider>
+    </n-dialog-provider>
+  </n-loading-bar-provider>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import {
+    NDialogProvider,
+    NNotificationProvider,
+    NMessageProvider,
+    NLoadingBarProvider,
+  } from 'naive-ui';
+  import { MessageContent } from '@/components/MessageContent';
+  import { DialogContent } from '@/components/DialogContent';
+
+  export default defineComponent({
+    name: 'Application',
+    components: {
+      NDialogProvider,
+      NNotificationProvider,
+      NMessageProvider,
+      NLoadingBarProvider,
+      MessageContent,
+      DialogContent,
+    },
+    setup() {
+      return {};
+    },
+  });
+</script>
diff --git a/web/src/components/Application/index.ts b/web/src/components/Application/index.ts
new file mode 100644
index 0000000..5cea04a
--- /dev/null
+++ b/web/src/components/Application/index.ts
@@ -0,0 +1,3 @@
+import AppProvider from './Application.vue';
+
+export { AppProvider };
diff --git a/web/src/components/CitySelector/citySelector.vue b/web/src/components/CitySelector/citySelector.vue
new file mode 100644
index 0000000..3e88442
--- /dev/null
+++ b/web/src/components/CitySelector/citySelector.vue
@@ -0,0 +1,105 @@
+<template>
+  <n-cascader
+    v-bind="$props"
+    :value="valueLabel"
+    :options="dataOptions"
+    :placeholder="placeholder"
+    :check-strategy="checkStrategy"
+    clearable
+    cascade
+    :on-update:value="onValueChange"
+    :on-load="handleLoad"
+    :on-focus="focusLoad"
+    remote
+  />
+</template>
+
+<script lang="ts" setup>
+  import { GetCityLabel, ProvincesSelect } from '@/api/apply/provinces';
+  import { computed, ref, watch } from 'vue';
+  import type { CascaderOption } from 'naive-ui';
+  const emits = defineEmits(['update:value', 'update:label']);
+  import { basicProps } from './props';
+  const props = defineProps({
+    ...basicProps,
+  });
+
+  const valueLabel = ref<string | null>(null);
+  const dataOptions = ref([]);
+  const placeholder = computed(() => {
+    if (props.dataType === 'p') {
+      return '请选择省份';
+    } else if (props.dataType === 'pc') {
+      return '请选择省市';
+    } else {
+      return '请选择省市区';
+    }
+  });
+
+  function onValueChange(
+    value: string | number | Array<string | number> | null,
+    option: CascaderOption | Array<CascaderOption | null> | null,
+    pathValues: Array<CascaderOption | null>
+  ) {
+    const tempPathValues = pathValues
+      ? pathValues.map((it: CascaderOption | null) => ({
+          label: it?.label,
+          value: it?.value,
+          level: it?.level,
+        }))
+      : null;
+
+    emits('update:value', value);
+    valueLabel.value = getLabel(tempPathValues);
+  }
+
+  function getLabel(values): string | null {
+    if (values === null || values === undefined) {
+      return null;
+    }
+    let label = '';
+    const length = values.length;
+    for (let i = 0; i < length; i++) {
+      const item = values[i];
+      label += item.label;
+      if (i + 1 < length) {
+        label += props.separator;
+      }
+    }
+    return label;
+  }
+
+  watch(
+    () => props.value,
+    async () => {
+      if (!props.value || props.value === 0) {
+        valueLabel.value = null;
+        return;
+      }
+
+      if (valueLabel.value === null) {
+        valueLabel.value = await GetCityLabel({ id: props.value, spilt: props.separator });
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+
+  async function load(option) {
+    const data = await ProvincesSelect({ dataType: props.dataType, ...option });
+    return data.list;
+  }
+
+  async function handleLoad(option: CascaderOption) {
+    option.children = await load({ dataType: props.dataType, ...option });
+    return;
+  }
+
+  async function focusLoad() {
+    if (dataOptions.value.length === 0) {
+      dataOptions.value = await load({ dataType: props.dataType });
+    }
+  }
+</script>
diff --git a/web/src/components/CitySelector/props.ts b/web/src/components/CitySelector/props.ts
new file mode 100644
index 0000000..f4f21ee
--- /dev/null
+++ b/web/src/components/CitySelector/props.ts
@@ -0,0 +1,22 @@
+import type { PropType } from 'vue';
+import { NCascader } from 'naive-ui';
+
+export const basicProps = {
+  ...NCascader.props,
+  defaultValue: {
+    type: [Number, String, Array],
+    default: null,
+  },
+  value: {
+    type: [Number, String, Array],
+    default: null,
+  },
+  dataType: {
+    type: String as PropType<'p' | 'pc' | 'pca'>,
+    default: 'pca',
+  },
+  checkStrategy: {
+    type: String as PropType<'child' | 'all'>,
+    default: 'child',
+  },
+};
diff --git a/web/src/components/ComplexMemberPicker/index.vue b/web/src/components/ComplexMemberPicker/index.vue
new file mode 100644
index 0000000..ca9a58f
--- /dev/null
+++ b/web/src/components/ComplexMemberPicker/index.vue
@@ -0,0 +1,144 @@
+<template>
+  <n-input-group>
+    <n-select
+      v-bind="$props"
+      :style="{ width: '68%' }"
+      v-model:value="memberId"
+      :options="memberOption"
+      :render-label="renderLabel"
+      :filter="handleReceiverFilter"
+      @update:value="handleChangeMemberId"
+      clearable
+      filterable
+    />
+    <n-select
+      :consistent-menu-width="false"
+      :style="{ width: '32%', 'min-width': '90px' }"
+      :options="selectOptions"
+      v-model:value="optVal"
+      @update:value="handleUpdateOptions"
+    />
+  </n-input-group>
+</template>
+
+<script setup lang="ts">
+  import { h, onMounted, ref, watch } from 'vue';
+  import { GetMemberOption } from '@/api/org/user';
+  import { useUserStore } from '@/store/modules/user';
+  import { NText, SelectRenderLabel } from 'naive-ui';
+  import { basicProps } from './props';
+
+  const props = defineProps({
+    ...basicProps,
+  });
+  const emit = defineEmits(['update:value']);
+  const userStore = useUserStore();
+  const memberId = ref(null);
+  const optVal = ref('-1');
+  const memberOption = ref([]);
+  const selectOptions = [
+    {
+      label: '查全部',
+      value: '-1',
+    },
+    {
+      label: '查本人',
+      value: '1',
+    },
+    {
+      label: '查下级',
+      value: '2',
+    },
+  ];
+
+  const renderLabel: SelectRenderLabel = (option: { username: ''; label: '' }) => {
+    return h(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+        },
+      },
+      [
+        h(
+          'div',
+          {
+            style: {
+              padding: '4px 0',
+              display: 'flex',
+            },
+          },
+          [
+            h(
+              'div',
+              {
+                style: {
+                  marginRight: '4px',
+                },
+              },
+              [option.username as string]
+            ),
+            h(
+              NText,
+              { depth: 3, tag: 'div' },
+              {
+                default: () => option.label as string,
+              }
+            ),
+          ]
+        ),
+      ]
+    );
+  };
+
+  function handleReceiverFilter(pattern: string, option: object): boolean {
+    const isPatternInLabel = option.label.includes(pattern);
+    const isPatternInUsername = option.username.includes(pattern);
+    const isValueEqual = option.value.toString() === pattern;
+    return isPatternInLabel || isPatternInUsername || isValueEqual;
+  }
+
+  function handleChangeMemberId(v: string) {
+    memberId.value = v;
+    handleUpdateValue();
+  }
+
+  function handleUpdateOptions(value: string) {
+    optVal.value = value;
+    handleUpdateValue();
+  }
+
+  function handleUpdateValue() {
+    if (memberId.value) {
+      emit('update:value', [memberId.value, optVal.value]);
+    } else {
+      emit('update:value', null);
+    }
+  }
+
+  function resetFields() {
+    memberId.value = null;
+    optVal.value = '-1';
+  }
+
+  watch(
+    () => props.value,
+    (v) => {
+      if (!v) {
+        resetFields();
+      }
+    },
+    { deep: true }
+  );
+
+  onMounted(() => {
+    GetMemberOption().then((res) => {
+      if (res) {
+        memberOption.value = res;
+      }
+    });
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/web/src/components/ComplexMemberPicker/props.ts b/web/src/components/ComplexMemberPicker/props.ts
new file mode 100644
index 0000000..727c266
--- /dev/null
+++ b/web/src/components/ComplexMemberPicker/props.ts
@@ -0,0 +1,13 @@
+import { NSelect } from 'naive-ui';
+
+export const basicProps = {
+  ...NSelect.props,
+  defaultValue: {
+    type: [Array],
+    default: null,
+  },
+  value: {
+    type: [Array],
+    default: null,
+  },
+};
diff --git a/web/src/components/CountTo/CountTo.vue b/web/src/components/CountTo/CountTo.vue
new file mode 100644
index 0000000..dfe248d
--- /dev/null
+++ b/web/src/components/CountTo/CountTo.vue
@@ -0,0 +1,111 @@
+<template>
+  <span :style="{ color }" v-if="endVal > 0">
+    {{ value }}
+  </span>
+  <span :style="{ color }" v-else> 0 </span>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
+  import { useTransition, TransitionPresets } from '@vueuse/core';
+  import { isNumber } from '@/utils/is';
+
+  const props = {
+    startVal: { type: Number, default: 0 },
+    endVal: { type: Number, default: 2021 },
+    duration: { type: Number, default: 1500 },
+    autoplay: { type: Boolean, default: true },
+    decimals: {
+      type: Number,
+      default: 0,
+      validator(value: number) {
+        return value >= 0;
+      },
+    },
+    prefix: { type: String, default: '' },
+    suffix: { type: String, default: '' },
+    separator: { type: String, default: ',' },
+    decimal: { type: String, default: '.' },
+    /**
+     * font color
+     */
+    color: { type: String },
+    /**
+     * Turn on digital animation
+     */
+    useEasing: { type: Boolean, default: true },
+    /**
+     * Digital animation
+     */
+    transition: { type: String, default: 'linear' },
+  };
+
+  export default defineComponent({
+    name: 'CountTo',
+    props,
+    emits: ['onStarted', 'onFinished'],
+    setup(props, { emit }) {
+      const source = ref(props.startVal);
+      const disabled = ref(false);
+      let outputValue = useTransition(source);
+
+      const value = computed(() => formatNumber(unref(outputValue)));
+
+      watchEffect(() => {
+        source.value = props.startVal;
+      });
+
+      watch([() => props.startVal, () => props.endVal], () => {
+        if (props.autoplay) {
+          start();
+        }
+      });
+
+      onMounted(() => {
+        props.autoplay && start();
+      });
+
+      function start() {
+        run();
+        source.value = props.endVal;
+      }
+
+      function reset() {
+        source.value = props.startVal;
+        run();
+      }
+
+      function run() {
+        outputValue = useTransition(source, {
+          disabled,
+          duration: props.duration,
+          onFinished: () => emit('onFinished'),
+          onStarted: () => emit('onStarted'),
+          ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
+        });
+      }
+
+      function formatNumber(num: number | string) {
+        if (!num) {
+          return '';
+        }
+        const { decimals, decimal, separator, suffix, prefix } = props;
+        num = Number(num).toFixed(decimals);
+        num += '';
+
+        const x = num.split('.');
+        let x1 = x[0];
+        const x2 = x.length > 1 ? decimal + x[1] : '';
+
+        const rgx = /(\d+)(\d{3})/;
+        if (separator && !isNumber(separator)) {
+          while (rgx.test(x1)) {
+            x1 = x1.replace(rgx, '$1' + separator + '$2');
+          }
+        }
+        return prefix + x1 + x2 + suffix;
+      }
+
+      return { value, start, reset };
+    },
+  });
+</script>
diff --git a/web/src/components/CountTo/index.ts b/web/src/components/CountTo/index.ts
new file mode 100644
index 0000000..946e525
--- /dev/null
+++ b/web/src/components/CountTo/index.ts
@@ -0,0 +1,4 @@
+import { withInstall } from '@/utils';
+import countTo from './CountTo.vue';
+
+export const CountTo = withInstall(countTo);
diff --git a/web/src/components/DatePicker/datePicker.vue b/web/src/components/DatePicker/datePicker.vue
new file mode 100644
index 0000000..8c56c7b
--- /dev/null
+++ b/web/src/components/DatePicker/datePicker.vue
@@ -0,0 +1,99 @@
+<template>
+  <n-date-picker
+    v-bind="$props"
+    v-model:value="modelValue"
+    :shortcuts="showShortcuts ? shortcuts : undefined"
+    :clearable="true"
+    style="width: 100%"
+  />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, onMounted, ref } from 'vue';
+  import {
+    dateToTimestamp,
+    defRangeShortcuts,
+    defShortcuts,
+    formatToDate,
+    formatToDateTime,
+    timestampToTime,
+  } from '@/utils/dateUtil';
+  import { basicProps } from './props';
+
+  export default defineComponent({
+    name: 'DatePicker',
+    props: {
+      ...basicProps,
+    },
+    emits: ['update:formValue', 'update:startValue', 'update:endValue'],
+    setup(props, { emit }) {
+      const shortcuts = ref<any>({});
+
+      function getTimestamp(value) {
+        let t = dateToTimestamp(value);
+        console.log('getTimestamp t:' + t);
+        if (t === 0) {
+          return undefined;
+        }
+        return t;
+      }
+
+      function setTimestamp(value) {
+        if (value === undefined) {
+          return undefined;
+        }
+        if (!isTimeType()) {
+          return formatToDate(new Date(Number(value)).toDateString());
+        } else {
+          return formatToDateTime(timestampToTime(Number(value / 1000)));
+        }
+      }
+
+      function isRangeType() {
+        return props.type.indexOf('range') != -1;
+      }
+
+      function isTimeType() {
+        return props.type.indexOf('time') != -1;
+      }
+
+      const modelValue = computed({
+        get() {
+          if (!isRangeType()) {
+            return getTimestamp(props.formValue);
+          } else {
+            const value = [getTimestamp(props.startValue), getTimestamp(props.endValue)];
+            if (!value[0] && !value[1]) {
+              return null;
+            }
+            return value;
+          }
+        },
+        set(value) {
+          if (!isRangeType()) {
+            emit('update:formValue', setTimestamp(value));
+          } else {
+            emit('update:startValue', setTimestamp(value[0]));
+            emit('update:endValue', setTimestamp(value[1]));
+          }
+        },
+      });
+
+      onMounted(async () => {
+        if (!isRangeType()) {
+          shortcuts.value = defShortcuts();
+        } else {
+          shortcuts.value = defRangeShortcuts();
+        }
+      });
+
+      return {
+        modelValue,
+        shortcuts,
+        showShortcuts: props.showShortcuts,
+      };
+    },
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/components/DatePicker/props.ts b/web/src/components/DatePicker/props.ts
new file mode 100644
index 0000000..91e3f5e
--- /dev/null
+++ b/web/src/components/DatePicker/props.ts
@@ -0,0 +1,22 @@
+import type { PropType } from 'vue';
+import { NDatePicker } from 'naive-ui';
+
+export const basicProps = {
+  ...NDatePicker.props,
+  formValue: {
+    type: String as PropType<string> | undefined | Date,
+    default: () => '',
+  },
+  startValue: {
+    type: String as PropType<string> | undefined | Date,
+    default: () => '',
+  },
+  endValue: {
+    type: String as PropType<string> | undefined | Date,
+    default: () => '',
+  },
+  showShortcuts: {
+    type: Boolean as PropType<boolean>,
+    default: () => true,
+  },
+};
diff --git a/web/src/components/DialogContent/index.ts b/web/src/components/DialogContent/index.ts
new file mode 100644
index 0000000..80103ec
--- /dev/null
+++ b/web/src/components/DialogContent/index.ts
@@ -0,0 +1,3 @@
+import DialogContent from './index.vue';
+
+export { DialogContent };
diff --git a/web/src/components/DialogContent/index.vue b/web/src/components/DialogContent/index.vue
new file mode 100644
index 0000000..b35b1ef
--- /dev/null
+++ b/web/src/components/DialogContent/index.vue
@@ -0,0 +1,12 @@
+<template></template>
+<script lang="ts">
+  import { useDialog } from 'naive-ui';
+
+  export default {
+    name: 'DialogContent',
+    setup() {
+      //挂载在 window 方便与在js中使用
+      window['$dialog'] = useDialog();
+    },
+  };
+</script>
diff --git a/web/src/components/Editor/editor.vue b/web/src/components/Editor/editor.vue
new file mode 100644
index 0000000..062db48
--- /dev/null
+++ b/web/src/components/Editor/editor.vue
@@ -0,0 +1,150 @@
+<template>
+  <QuillEditor
+    ref="quillEditorRef"
+    toolbar="full"
+    v-model:content="content"
+    @ready="readyQuill"
+    class="quillEditor"
+    :id="id"
+    :modules="modules"
+    @focus="onEditorFocus"
+    @blur="onEditorBlur"
+    @update:content="onUpdateContent"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted } from 'vue';
+  import { QuillEditor } from '@vueup/vue-quill';
+  import '@vueup/vue-quill/dist/vue-quill.snow.css';
+  import ImageUploader from 'quill-image-uploader';
+  import MagicUrl from 'quill-magic-url';
+  import { getRandomString } from '@/utils/charset';
+  import { UploadImage } from '@/api/base';
+  import componentSetting from '@/settings/componentSetting';
+  import { isNullOrUnDef } from '@/utils/is';
+  import { useMessage } from 'naive-ui';
+
+  export interface Props {
+    value: string;
+    id?: string;
+  }
+
+  const emit = defineEmits(['update:value']);
+  const message = useMessage();
+  const initFinish = ref(false);
+  const quillEditorRef = ref();
+  const content = ref();
+  const props = withDefaults(defineProps<Props>(), {
+    value: '',
+    id: 'quillEditorId-' + getRandomString(16, true),
+  });
+
+  function readyQuill() {
+    quillEditorRef.value.setHTML(props.value);
+  }
+
+  watch(
+    () => props.value,
+    (newValue) => {
+      if (!initFinish.value) {
+        quillEditorRef.value?.setHTML(newValue);
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+
+  function onEditorFocus(val) {
+    initFinish.value = true;
+    console.log(val);
+  }
+
+  function onEditorBlur(val) {
+    console.log(val);
+  }
+
+  function onUpdateContent() {
+    emit('update:value', quillEditorRef.value.getHTML());
+  }
+
+  function checkFileType(map: string[], fileType: string) {
+    if (isNullOrUnDef(map)) {
+      return true;
+    }
+    return map.includes(fileType);
+  }
+
+  onMounted(async () => {
+    // 兼容表单分组 n-form-item-blank
+    let dom = document.getElementById(props.id);
+    if (dom && dom.parentNode) {
+      const parent = dom.parentNode as Element;
+      if ('n-form-item-blank' === parent.className) {
+        parent.setAttribute('style', 'display: block;');
+      }
+    }
+  });
+
+  const modules = [
+    {
+      name: 'imageUploader',
+      module: ImageUploader,
+      options: {
+        upload: (file) => {
+          return new Promise((resolve, reject) => {
+            if (!checkFileType(componentSetting.upload.imageType, file.type)) {
+              message.error(`只能上传图片类型为${componentSetting.upload.imageType.join(',')}`);
+              reject('Upload failed');
+              return;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+            UploadImage(formData)
+              .then((res) => {
+                console.log(res);
+                resolve(res.fileUrl);
+              })
+              .catch((err) => {
+                reject('Upload failed');
+                console.error('Error:', err);
+              });
+          });
+        },
+      },
+    },
+    {
+      name: 'magicUrl',
+      module: MagicUrl,
+    },
+  ];
+</script>
+
+<style lang="less" scoped>
+  :deep(.ql-container) {
+    height: auto;
+  }
+  :deep(.ql-container.ql-snow) {
+    border: none;
+  }
+  :deep(.ql-toolbar.ql-snow) {
+    border: none;
+    border-bottom: 1px solid #ccc;
+  }
+  :deep(.ql-editor.ql-blank::before) {
+    color: #afb4bd;
+    font-size: 14px;
+    font-style: normal;
+  }
+  .dark .priview-content {
+    background: #5a5a5a;
+    color: #fff;
+  }
+  .light .priview-content {
+    background: #fff;
+    color: #333;
+  }
+</style>
diff --git a/web/src/components/FileChooser/index.vue b/web/src/components/FileChooser/index.vue
new file mode 100644
index 0000000..3a6abcb
--- /dev/null
+++ b/web/src/components/FileChooser/index.vue
@@ -0,0 +1,366 @@
+<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 dialog = useDialog();
+  const showModal = ref(false);
+  const chooserRef = ref();
+  const previewRef = ref();
+  const fileList = ref<string[]>([]);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(1080);
+  });
+
+  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.'
+        );
+      }
+      if (!value) {
+        fileList.value = [];
+      } else {
+        fileList.value = value as string[];
+      }
+    }
+  }
+
+  watch(
+    () => props.value,
+    () => {
+      loadImage();
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+
+  onMounted(async () => {
+    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>
diff --git a/web/src/components/FileChooser/src/Chooser.vue b/web/src/components/FileChooser/src/Chooser.vue
new file mode 100644
index 0000000..bcf8993
--- /dev/null
+++ b/web/src/components/FileChooser/src/Chooser.vue
@@ -0,0 +1,413 @@
+<template>
+  <n-grid :x-gap="5" :y-gap="5" :cols="pageGridCols" responsive="screen">
+    <n-gi :span="2">
+      <n-menu
+        :options="generateKindOptions()"
+        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>
+                    <n-space justify="center" style="padding: 5px">
+                      <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 { 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 } from './model';
+  import Preview from './Preview.vue';
+  import { VNode } from 'vue';
+  import { Option, useDictStore } from '@/store/modules/dict';
+
+  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 dict = useDictStore();
+  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: dict.getOption('config_upload_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();
+        });
+      },
+    });
+  }
+
+  function handlePreview(item: Attachment) {
+    previewRef.value.openPreview(item.fileUrl);
+  }
+
+  function handleDown(item: Attachment) {
+    window.open(item.fileUrl);
+  }
+
+  function handleSelect(item: Attachment) {
+    if (!selectList.value || 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) {
+      return false;
+    }
+    return selectList.value.some((selected) => selected === item.fileUrl);
+  }
+
+  function generateKindOptions(): any {
+    const option: KindOption[] = [];
+    dict.getOptionUnRef('AttachmentKindOption').forEach((item: Option) => {
+      const data: KindOption = {
+        label: () => h(NEllipsis, null, { default: () => item.label }),
+        key: item.key.toString(),
+        extra: () => (item.key !== '' ? createExtraContent(item) : null),
+        icon: constantRouterIcon[item.extra] || null,
+        disabled: isDisabledKindOption(item),
+      };
+      option.push(data);
+    });
+    return option;
+  }
+
+  function isDisabledKindOption(item: Option): boolean {
+    if (props.fileType === 'default') {
+      return false;
+    }
+    return item.key !== props.fileType;
+  }
+
+  function createExtraContent(item: Option): 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();
+              });
+            },
+          });
+        },
+      },
+      { icon: renderIcon(ClearOutlined) }
+    );
+  }
+
+  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();
+  }
+
+  function loadOptions() {
+    dict.loadOptions(['AttachmentKindOption', 'config_upload_drive']);
+  }
+
+  onMounted(async () => {
+    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>
diff --git a/web/src/components/FileChooser/src/Preview.vue b/web/src/components/FileChooser/src/Preview.vue
new file mode 100644
index 0000000..f00a3cf
--- /dev/null
+++ 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>
diff --git a/web/src/components/FileChooser/src/Upload.vue b/web/src/components/FileChooser/src/Upload.vue
new file mode 100644
index 0000000..23eed3a
--- /dev/null
+++ b/web/src/components/FileChooser/src/Upload.vue
@@ -0,0 +1,114 @@
+<template>
+  <n-modal
+    v-model:show="showFileModal"
+    :show-icon="false"
+    :mask-closable="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 } 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 = JSON.parse(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>
diff --git a/web/src/components/FileChooser/src/model.ts b/web/src/components/FileChooser/src/model.ts
new file mode 100644
index 0000000..597a109
--- /dev/null
+++ b/web/src/components/FileChooser/src/model.ts
@@ -0,0 +1,51 @@
+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 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 '文件';
+}
diff --git a/web/src/components/Form/index.ts b/web/src/components/Form/index.ts
new file mode 100644
index 0000000..0f37df5
--- /dev/null
+++ b/web/src/components/Form/index.ts
@@ -0,0 +1,4 @@
+export { default as BasicForm } from './src/BasicForm.vue';
+export { useForm } from './src/hooks/useForm';
+export * from './src/types/form';
+export * from './src/types/index';
diff --git a/web/src/components/Form/src/BasicForm.vue b/web/src/components/Form/src/BasicForm.vue
new file mode 100644
index 0000000..783ea60
--- /dev/null
+++ b/web/src/components/Form/src/BasicForm.vue
@@ -0,0 +1,378 @@
+<template>
+  <n-form v-bind="getBindValue" :model="formModel" ref="formElRef">
+    <n-grid v-bind="getGrid">
+      <n-gi v-bind="schema.giProps" v-for="schema in getSchema" :key="schema.field">
+        <n-form-item :label="schema.label" :path="schema.field">
+          <!--标签名右侧温馨提示-->
+          <template #label v-if="schema.labelMessage">
+            {{ schema.label }}
+            <n-tooltip trigger="hover" :style="schema.labelMessageStyle">
+              <template #trigger>
+                <n-icon size="18" class="text-gray-400 cursor-pointer">
+                  <QuestionCircleOutlined />
+                </n-icon>
+              </template>
+              {{ schema.labelMessage }}
+            </n-tooltip>
+          </template>
+
+          <!--判断插槽-->
+          <template v-if="schema.slot">
+            <slot
+              :name="schema.slot"
+              :model="formModel"
+              :field="schema.field"
+              :value="formModel[schema.field]"
+            ></slot>
+          </template>
+
+          <!--NCheckbox-->
+          <template v-else-if="schema.component === 'NCheckbox'">
+            <n-checkbox-group v-model:value="formModel[schema.field]">
+              <n-space>
+                <n-checkbox
+                  v-for="item in schema.componentProps.options"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                />
+              </n-space>
+            </n-checkbox-group>
+          </template>
+
+          <!--NRadioGroup-->
+          <template v-else-if="schema.component === 'NRadioGroup'">
+            <n-radio-group v-model:value="formModel[schema.field]">
+              <n-radio-button
+                v-for="item in schema.componentProps.options"
+                :key="item.value"
+                :value="item.value"
+              >
+                {{ item.label }}
+              </n-radio-button>
+            </n-radio-group>
+          </template>
+          <template v-else-if="schema.component === 'NTreeSelect'">
+            <n-tree-select
+              :class="{ isFull: schema.isFull !== false && getProps.isFull }"
+              v-model:value="formModel[schema.field]"
+              v-bind="getComponentProps(schema)"
+            />
+          </template>
+          <template v-else-if="schema.component === 'NCascader'">
+            <n-cascader
+              :class="{ isFull: schema.isFull !== false && getProps.isFull }"
+              v-model:value="formModel[schema.field]"
+              v-bind="getComponentProps(schema)"
+            />
+          </template>
+          <template v-else-if="schema.component === 'ComplexMemberPicker'">
+            <ComplexMemberPicker
+              :class="{ isFull: schema.isFull !== false && getProps.isFull }"
+              v-model:value="formModel[schema.field]"
+              v-bind="getComponentProps(schema)"
+            />
+          </template>
+          <!--动态渲染表单组件-->
+          <component
+            v-else
+            v-bind="getComponentProps(schema)"
+            :is="schema.component"
+            v-model:value="formModel[schema.field]"
+            :class="{ isFull: schema.isFull !== false && getProps.isFull }"
+          />
+          <!--组件后面的内容-->
+          <template v-if="schema.suffix">
+            <slot
+              :name="schema.suffix"
+              :model="formModel"
+              :field="schema.field"
+              :value="formModel[schema.field]"
+            ></slot>
+          </template>
+        </n-form-item>
+      </n-gi>
+      <!--提交 重置 展开 收起 按钮-->
+      <n-gi
+        :span="isInline ? 1 : 24"
+        :suffix="!!isInline"
+        #="{ overflow }"
+        v-if="getProps.showActionButtonGroup"
+      >
+        <n-space
+          align="center"
+          :justify="isInline ? 'end' : 'start'"
+          :style="{ 'margin-left': `${isInline ? 12 : getProps.labelWidth}px` }"
+        >
+          <n-button
+            v-if="getProps.showSubmitButton"
+            v-bind="getSubmitBtnOptions"
+            @click="handleSubmit"
+            :loading="loadingSub"
+            >{{ getProps.submitButtonText }}</n-button
+          >
+          <n-button
+            v-if="getProps.showResetButton"
+            v-bind="getResetBtnOptions"
+            @click="resetFields"
+            >{{ getProps.resetButtonText }}</n-button
+          >
+          <n-button
+            type="primary"
+            text
+            icon-placement="right"
+            v-if="isInline && getProps.showAdvancedButton"
+            @click="unfoldToggle"
+          >
+            <template #icon>
+              <n-icon size="14" class="unfold-icon" v-if="overflow">
+                <DownOutlined />
+              </n-icon>
+              <n-icon size="14" class="unfold-icon" v-else>
+                <UpOutlined />
+              </n-icon>
+            </template>
+            {{ overflow ? '展开' : '收起' }}
+          </n-button>
+        </n-space>
+      </n-gi>
+    </n-grid>
+  </n-form>
+</template>
+
+<script lang="ts">
+  import {
+    defineComponent,
+    reactive,
+    ref,
+    computed,
+    unref,
+    onMounted,
+    watch,
+    defineExpose,
+  } from 'vue';
+  import { createPlaceholderMessage } from './helper';
+  import { useFormEvents } from './hooks/useFormEvents';
+  import { useFormValues } from './hooks/useFormValues';
+  import ComplexMemberPicker from '../../ComplexMemberPicker/index.vue';
+  import { basicProps } from './props';
+  import { DownOutlined, UpOutlined, QuestionCircleOutlined } from '@vicons/antd';
+  import type { Ref } from 'vue';
+  import type { GridProps } from 'naive-ui/lib/grid';
+  import type { FormSchema, FormProps, FormActionType } from './types/form';
+  import { isArray, isBoolean, isFunction } from '@/utils/is';
+  import { deepMerge } from '@/utils';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { ActionItem } from '@/components/Table';
+
+  export default defineComponent({
+    name: 'BasicForm',
+    components: { DownOutlined, UpOutlined, QuestionCircleOutlined },
+    props: {
+      ...basicProps,
+    },
+    emits: ['reset', 'submit', 'register'],
+    setup(props, { emit, attrs }) {
+      const defaultFormModel = ref<Recordable>({});
+      const formModel = reactive<Recordable>({});
+      const propsRef = ref<Partial<FormProps>>({});
+      const schemaRef = ref<Nullable<FormSchema[]>>(null);
+      const formElRef = ref<Nullable<FormActionType>>(null);
+      const gridCollapsed = ref(true);
+      const loadingSub = ref(false);
+      const isUpdateDefaultRef = ref(false);
+      const { hasPermission } = usePermission();
+
+      const getSubmitBtnOptions = computed(() => {
+        return Object.assign(
+          {
+            size: props.size,
+            type: 'primary',
+          },
+          props.submitButtonOptions
+        );
+      });
+
+      const getResetBtnOptions = computed(() => {
+        return Object.assign(
+          {
+            size: props.size,
+            type: 'default',
+          },
+          props.resetButtonOptions
+        );
+      });
+
+      function getComponentProps(schema) {
+        const compProps = schema.componentProps ?? {};
+        const component = schema.component;
+        return {
+          clearable: true,
+          placeholder: createPlaceholderMessage(unref(component)),
+          ...compProps,
+        };
+      }
+
+      const getProps = computed((): FormProps => {
+        const formProps = { ...props, ...unref(propsRef) } as FormProps;
+        const rulesObj: any = {
+          rules: {},
+        };
+        const schemas: any = formProps.schemas || [];
+        schemas.forEach((item) => {
+          if (item.rules && isArray(item.rules)) {
+            rulesObj.rules[item.field] = item.rules;
+          }
+        });
+        return { ...formProps, ...unref(rulesObj) };
+      });
+
+      const isInline = computed(() => {
+        const { layout } = unref(getProps);
+        return layout === 'inline';
+      });
+
+      const getGrid = computed((): GridProps => {
+        const { gridProps } = unref(getProps);
+        return {
+          ...gridProps,
+          collapsed: isInline.value ? gridCollapsed.value : false,
+          responsive: 'screen',
+        };
+      });
+
+      const getBindValue = computed(
+        () => ({ ...attrs, ...props, ...unref(getProps) }) as Recordable
+      );
+
+      const getSchema = computed((): FormSchema[] => {
+        const rawSchemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
+
+        const schemas = rawSchemas.filter((schema) => {
+          return hasPermission(schema.auth as string[]) && isIfShow(schema);
+        });
+
+        for (const schema of schemas) {
+          const { defaultValue } = schema;
+          // handle date type
+          // dateItemType.includes(component as string)
+          if (defaultValue) {
+            schema.defaultValue = defaultValue;
+          }
+        }
+        return schemas as FormSchema[];
+      });
+
+      const { handleFormValues, initDefault } = useFormValues({
+        defaultFormModel,
+        getSchema,
+        formModel,
+      });
+
+      function isIfShow(action: ActionItem): boolean {
+        const ifShow = action.ifShow;
+
+        let isIfShow = true;
+
+        if (isBoolean(ifShow)) {
+          isIfShow = ifShow;
+        }
+        if (isFunction(ifShow)) {
+          isIfShow = ifShow(action);
+        }
+        return isIfShow;
+      }
+
+      const { handleSubmit, validate, resetFields, getFieldsValue, clearValidate, setFieldsValue } =
+        useFormEvents({
+          emit,
+          getProps,
+          formModel,
+          getSchema,
+          formElRef: formElRef as Ref<FormActionType>,
+          defaultFormModel,
+          loadingSub,
+          handleFormValues,
+        });
+
+      function unfoldToggle() {
+        gridCollapsed.value = !gridCollapsed.value;
+      }
+
+      async function setProps(formProps: Partial<FormProps>): Promise<void> {
+        propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
+      }
+
+      const formActionType: Partial<FormActionType> = {
+        getFieldsValue,
+        setFieldsValue,
+        resetFields,
+        validate,
+        clearValidate,
+        setProps,
+        submit: handleSubmit,
+      };
+
+      // 当showAdvancedButton为false时所有列表项应为全部显示
+      watch(
+        () => getProps.value.showAdvancedButton,
+        (show) => {
+          if (!show) gridCollapsed.value = false;
+        },
+        {
+          immediate: true,
+        }
+      );
+
+      watch(
+        () => getSchema.value,
+        (schema) => {
+          if (unref(isUpdateDefaultRef)) {
+            return;
+          }
+          if (schema?.length) {
+            initDefault();
+            isUpdateDefaultRef.value = true;
+          }
+        }
+      );
+
+      onMounted(() => {
+        initDefault();
+        emit('register', formActionType);
+      });
+
+      return {
+        formElRef,
+        formModel,
+        getGrid,
+        getProps,
+        getBindValue,
+        getSchema,
+        getSubmitBtnOptions,
+        getResetBtnOptions,
+        handleSubmit,
+        resetFields,
+        loadingSub,
+        isInline,
+        getComponentProps,
+        unfoldToggle,
+        setFieldsValue,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .isFull {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .unfold-icon {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin-left: -3px;
+  }
+</style>
diff --git a/web/src/components/Form/src/helper.ts b/web/src/components/Form/src/helper.ts
new file mode 100644
index 0000000..5db0e32
--- /dev/null
+++ b/web/src/components/Form/src/helper.ts
@@ -0,0 +1,42 @@
+import { ComponentType } from './types/index';
+
+/**
+ * @description: 生成placeholder
+ */
+export function createPlaceholderMessage(component: ComponentType) {
+  if (component === 'NInput') return '请输入';
+  if (
+    ['NPicker', 'NSelect', 'NCheckbox', 'NRadio', 'NSwitch', 'NDatePicker', 'NTimePicker'].includes(
+      component
+    )
+  )
+    return '请选择';
+  return '';
+}
+
+const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'];
+
+function genType() {
+  return [...DATE_TYPE, 'RangePicker'];
+}
+
+/**
+ * 时间字段
+ */
+export const dateItemType = genType();
+
+export function defaultType(component) {
+  if (component === 'NInput') return '';
+  if (component === 'NInputNumber') return null;
+  return [
+    'NPicker',
+    'NSelect',
+    'NCheckbox',
+    'NRadio',
+    'NSwitch',
+    'NDatePicker',
+    'NTimePicker',
+  ].includes(component)
+    ? ''
+    : undefined;
+}
diff --git a/web/src/components/Form/src/hooks/useForm.ts b/web/src/components/Form/src/hooks/useForm.ts
new file mode 100644
index 0000000..601ac5e
--- /dev/null
+++ b/web/src/components/Form/src/hooks/useForm.ts
@@ -0,0 +1,86 @@
+import type { FormProps, FormActionType, UseFormReturnType } from '../types/form';
+import type { DynamicProps } from '/#/utils';
+
+import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
+import { isProdMode } from '@/utils/env';
+import { getDynamicProps } from '@/utils';
+
+type Props = Partial<DynamicProps<FormProps>>;
+
+export function useForm(props?: Props): UseFormReturnType {
+  const formRef = ref<Nullable<FormActionType>>(null);
+  const loadedRef = ref<Nullable<boolean>>(false);
+
+  async function getForm() {
+    const form = unref(formRef);
+    if (!form) {
+      console.error(
+        'The form instance has not been obtained, please make sure that the form has been rendered when performing the form operation!'
+      );
+    }
+    await nextTick();
+    return form as FormActionType;
+  }
+
+  function register(instance: FormActionType) {
+    isProdMode() &&
+      onUnmounted(() => {
+        formRef.value = null;
+        loadedRef.value = null;
+      });
+    if (unref(loadedRef) && isProdMode() && instance === unref(formRef)) return;
+
+    formRef.value = instance;
+    loadedRef.value = true;
+
+    watch(
+      () => props,
+      () => {
+        props && instance.setProps(getDynamicProps(props));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  }
+
+  const methods: FormActionType = {
+    setProps: async (formProps: Partial<FormProps>) => {
+      const form = await getForm();
+      await form.setProps(formProps);
+    },
+
+    resetFields: async () => {
+      getForm().then(async (form) => {
+        await form.resetFields();
+      });
+    },
+
+    clearValidate: async (name?: string | string[]) => {
+      const form = await getForm();
+      await form.clearValidate(name);
+    },
+
+    getFieldsValue: <T>() => {
+      return unref(formRef)?.getFieldsValue() as T;
+    },
+
+    setFieldsValue: async <T>(values: T) => {
+      const form = await getForm();
+      await form.setFieldsValue<T>(values);
+    },
+
+    submit: async (): Promise<any> => {
+      const form = await getForm();
+      return form.submit();
+    },
+
+    validate: async (nameList?: any[]): Promise<Recordable> => {
+      const form = await getForm();
+      return form.validate(nameList);
+    },
+  };
+
+  return [register, methods];
+}
diff --git a/web/src/components/Form/src/hooks/useFormContext.ts b/web/src/components/Form/src/hooks/useFormContext.ts
new file mode 100644
index 0000000..2d2a212
--- /dev/null
+++ b/web/src/components/Form/src/hooks/useFormContext.ts
@@ -0,0 +1,11 @@
+import { provide, inject } from 'vue';
+
+const key = Symbol('formElRef');
+
+export function createFormContext(instance) {
+  provide(key, instance);
+}
+
+export function useFormContext() {
+  return inject(key);
+}
diff --git a/web/src/components/Form/src/hooks/useFormEvents.ts b/web/src/components/Form/src/hooks/useFormEvents.ts
new file mode 100644
index 0000000..992a393
--- /dev/null
+++ b/web/src/components/Form/src/hooks/useFormEvents.ts
@@ -0,0 +1,107 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { FormProps, FormSchema, FormActionType } from '../types/form';
+import { unref, toRaw } from 'vue';
+import { isFunction } from '@/utils/is';
+
+declare type EmitType = (event: string, ...args: any[]) => void;
+
+interface UseFormActionContext {
+  emit: EmitType;
+  getProps: ComputedRef<FormProps>;
+  getSchema: ComputedRef<FormSchema[]>;
+  formModel: Recordable;
+  formElRef: Ref<FormActionType>;
+  defaultFormModel: Recordable;
+  loadingSub: Ref<boolean>;
+  handleFormValues: Function;
+}
+
+export function useFormEvents({
+  emit,
+  getProps,
+  formModel,
+  getSchema,
+  formElRef,
+  defaultFormModel,
+  loadingSub,
+  handleFormValues,
+}: UseFormActionContext) {
+  // 验证
+  async function validate() {
+    return unref(formElRef)?.validate();
+  }
+
+  // 提交
+  async function handleSubmit(e?: Event): Promise<void> {
+    e && e.preventDefault();
+    loadingSub.value = true;
+    const { submitFunc } = unref(getProps);
+    if (submitFunc && isFunction(submitFunc)) {
+      await submitFunc();
+      return;
+    }
+    const formEl = unref(formElRef);
+    if (!formEl) return;
+    try {
+      await validate();
+      loadingSub.value = false;
+      emit('submit', formModel);
+      return;
+    } catch (error) {
+      loadingSub.value = false;
+      return;
+    }
+  }
+
+  //清空校验
+  async function clearValidate() {
+    // @ts-ignore
+    await unref(formElRef)?.restoreValidation();
+  }
+
+  //重置
+  async function resetFields(): Promise<void> {
+    const { resetFunc, submitOnReset } = unref(getProps);
+    resetFunc && isFunction(resetFunc) && (await resetFunc());
+
+    const formEl = unref(formElRef);
+    if (!formEl) return;
+    Object.keys(formModel).forEach((key) => {
+      formModel[key] = unref(defaultFormModel)[key] || null;
+    });
+    await clearValidate();
+    const fromValues = handleFormValues(toRaw(unref(formModel)));
+    emit('reset', fromValues);
+    submitOnReset && (await handleSubmit());
+  }
+
+  //获取表单值
+  function getFieldsValue(): Recordable {
+    const formEl = unref(formElRef);
+    if (!formEl) return {};
+    return handleFormValues(toRaw(unref(formModel)));
+  }
+
+  //设置表单字段值
+  async function setFieldsValue(values: Recordable): Promise<void> {
+    const fields = unref(getSchema)
+      .map((item) => item.field)
+      .filter(Boolean);
+
+    Object.keys(values).forEach((key) => {
+      const value = values[key];
+      if (fields.includes(key)) {
+        formModel[key] = value;
+      }
+    });
+  }
+
+  return {
+    handleSubmit,
+    validate,
+    resetFields,
+    getFieldsValue,
+    clearValidate,
+    setFieldsValue,
+  };
+}
diff --git a/web/src/components/Form/src/hooks/useFormValues.ts b/web/src/components/Form/src/hooks/useFormValues.ts
new file mode 100644
index 0000000..2d45bbe
--- /dev/null
+++ b/web/src/components/Form/src/hooks/useFormValues.ts
@@ -0,0 +1,54 @@
+import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '@/utils/is';
+import { unref } from 'vue';
+import type { Ref, ComputedRef } from 'vue';
+import type { FormSchema } from '../types/form';
+import { set } from 'lodash-es';
+
+interface UseFormValuesContext {
+  defaultFormModel: Ref<any>;
+  getSchema: ComputedRef<FormSchema[]>;
+  formModel: Recordable;
+}
+export function useFormValues({ defaultFormModel, getSchema, formModel }: UseFormValuesContext) {
+  // 加工 form values
+  function handleFormValues(values: Recordable) {
+    if (!isObject(values)) {
+      return {};
+    }
+    const res: Recordable = {};
+    for (const item of Object.entries(values)) {
+      let [, value] = item;
+      const [key] = item;
+      if (
+        !key ||
+        (isArray(value) && value.length === 0) ||
+        isFunction(value) ||
+        isNullOrUnDef(value)
+      ) {
+        continue;
+      }
+      // 删除空格
+      if (isString(value)) {
+        value = value.trim();
+      }
+      set(res, key, value);
+    }
+    return res;
+  }
+
+  //初始化默认值
+  function initDefault() {
+    const schemas = unref(getSchema);
+    const obj: Recordable = {};
+    schemas.forEach((item) => {
+      const { defaultValue } = item;
+      if (!isNullOrUnDef(defaultValue)) {
+        obj[item.field] = defaultValue;
+        formModel[item.field] = defaultValue;
+      }
+    });
+    defaultFormModel.value = obj;
+  }
+
+  return { handleFormValues, initDefault };
+}
diff --git a/web/src/components/Form/src/props.ts b/web/src/components/Form/src/props.ts
new file mode 100644
index 0000000..46582e7
--- /dev/null
+++ b/web/src/components/Form/src/props.ts
@@ -0,0 +1,82 @@
+import type { CSSProperties, PropType } from 'vue';
+import { FormSchema } from './types/form';
+import type { GridProps, GridItemProps } from 'naive-ui/lib/grid';
+import type { ButtonProps } from 'naive-ui/lib/button';
+import { propTypes } from '@/utils/propTypes';
+export const basicProps = {
+  // 标签宽度  固定宽度
+  labelWidth: {
+    type: [Number, String] as PropType<number | string>,
+    default: 80,
+  },
+  // 表单配置规则
+  schemas: {
+    type: [Array] as PropType<FormSchema[]>,
+    default: () => [],
+  },
+  //布局方式
+  layout: {
+    type: String,
+    default: 'inline',
+  },
+  //是否展示为行内表单
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  //大小
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  //标签位置
+  labelPlacement: {
+    type: String,
+    default: 'left',
+  },
+  //组件是否width 100%
+  isFull: {
+    type: Boolean,
+    default: true,
+  },
+  //是否显示操作按钮（查询/重置）
+  showActionButtonGroup: propTypes.bool.def(true),
+  // 显示重置按钮
+  showResetButton: propTypes.bool.def(true),
+  //重置按钮配置
+  resetButtonOptions: Object as PropType<Partial<ButtonProps>>,
+  // 显示确认按钮
+  showSubmitButton: propTypes.bool.def(true),
+  // 确认按钮配置
+  submitButtonOptions: Object as PropType<Partial<ButtonProps>>,
+  //展开收起按钮
+  showAdvancedButton: propTypes.bool.def(true),
+  // 确认按钮文字
+  submitButtonText: {
+    type: String,
+    default: '查询',
+  },
+  //重置按钮文字
+  resetButtonText: {
+    type: String,
+    default: '重置',
+  },
+  //grid 配置
+  gridProps: Object as PropType<GridProps>,
+  //gi配置
+  giProps: Object as PropType<GridItemProps>,
+  //grid 样式
+  baseGridStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  //是否折叠
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+  //默认展示的行数
+  collapsedRows: {
+    type: Number,
+    default: 1,
+  },
+};
diff --git a/web/src/components/Form/src/types/form.ts b/web/src/components/Form/src/types/form.ts
new file mode 100644
index 0000000..eaa2e4a
--- /dev/null
+++ b/web/src/components/Form/src/types/form.ts
@@ -0,0 +1,63 @@
+import { ComponentType } from './index';
+import type { CSSProperties } from 'vue';
+import type { GridProps, GridItemProps } from 'naive-ui/lib/grid';
+import type { ButtonProps } from 'naive-ui/lib/button';
+import {PermissionsEnum} from "@/enums/permissionsEnum";
+import { ActionItem } from '@/components/Table';
+
+export interface FormSchema {
+  field: string;
+  label: string;
+  labelMessage?: string;
+  labelMessageStyle?: object | string;
+  defaultValue?: any;
+  component?: ComponentType;
+  componentProps?: object | any;
+  slot?: string;
+  rules?: object | object[];
+  giProps?: GridItemProps;
+  isFull?: boolean;
+  suffix?: string;
+  auth?: PermissionsEnum | PermissionsEnum[] | string | string[];
+  ifShow?: boolean | ((action: ActionItem) => boolean);
+}
+
+export interface FormProps {
+  model?: Recordable;
+  labelWidth?: number | string;
+  schemas?: FormSchema[];
+  inline: boolean;
+  layout?: string;
+  size: string;
+  labelPlacement: string;
+  isFull: boolean;
+  showActionButtonGroup?: boolean;
+  showResetButton?: boolean;
+  resetButtonOptions?: Partial<ButtonProps>;
+  showSubmitButton?: boolean;
+  showAdvancedButton?: boolean;
+  submitButtonOptions?: Partial<ButtonProps>;
+  submitButtonText?: string;
+  resetButtonText?: string;
+  gridProps?: GridProps;
+  giProps?: GridItemProps;
+  resetFunc?: () => Promise<void>;
+  submitFunc?: () => Promise<void>;
+  submitOnReset?: boolean;
+  baseGridStyle?: CSSProperties;
+  collapsedRows?: number;
+}
+
+export interface FormActionType {
+  submit: () => Promise<any>;
+  setProps: (formProps: Partial<FormProps>) => Promise<void>;
+  setFieldsValue: <T>(values: T) => Promise<void>;
+  clearValidate: (name?: string | string[]) => Promise<void>;
+  getFieldsValue: () => Recordable;
+  resetFields: () => Promise<void>;
+  validate: (nameList?: any[]) => Promise<any>;
+}
+
+export type RegisterFn = (formInstance: FormActionType) => void;
+
+export type UseFormReturnType = [RegisterFn, FormActionType];
diff --git a/web/src/components/Form/src/types/index.ts b/web/src/components/Form/src/types/index.ts
new file mode 100644
index 0000000..6a12ff7
--- /dev/null
+++ b/web/src/components/Form/src/types/index.ts
@@ -0,0 +1,29 @@
+export type ComponentType =
+  | 'NInput'
+  | 'NInputGroup'
+  | 'NInputPassword'
+  | 'NInputSearch'
+  | 'NInputTextArea'
+  | 'NInputNumber'
+  | 'NInputCountDown'
+  | 'NSelect'
+  | 'NTreeSelect'
+  | 'NRadioButtonGroup'
+  | 'NRadioGroup'
+  | 'NCheckbox'
+  | 'NCheckboxGroup'
+  | 'NAutoComplete'
+  | 'NCascader'
+  | 'NDatePicker'
+  | 'NMonthPicker'
+  | 'NRangePicker'
+  | 'NWeekPicker'
+  | 'NTimePicker'
+  | 'NSwitch'
+  | 'NStrengthMeter'
+  | 'NUpload'
+  | 'NIconPicker'
+  | 'NRender'
+  | 'NSlider'
+  | 'NRate'
+  | 'ComplexMemberPicker';
diff --git a/web/src/components/IconSelector/AntdSelector.vue b/web/src/components/IconSelector/AntdSelector.vue
new file mode 100644
index 0000000..fb034c1
--- /dev/null
+++ b/web/src/components/IconSelector/AntdSelector.vue
@@ -0,0 +1,97 @@
+<template>
+  <n-popover trigger="click" placement="bottom" width="400">
+    <template #trigger>
+      <n-button>
+        <template #icon>
+          <n-icon size="20">
+            <component :is="formValue !== '' ? formValue : AntDesignOutlined" />
+          </n-icon>
+        </template>
+      </n-button>
+    </template>
+    <n-scrollbar class="grid-wrapper">
+      <n-grid :cols="8" :collapsed="false" responsive="screen" style="height: 300px">
+        <n-grid-item v-for="(item, index) of icons" :key="index">
+          <div
+            class="flex flex-col items-center justify-center p-3 icon-wrapper"
+            @click="onIconClick(item)"
+          >
+            <n-icon size="20">
+              <component :is="item" />
+            </n-icon>
+          </div>
+        </n-grid-item>
+      </n-grid>
+    </n-scrollbar>
+    <div class="flex justify-end mt-2 mb-2">
+      <n-pagination
+        :page="currentPage"
+        :page-size="pageSize"
+        :page-slot="8"
+        :item-count="itemCount"
+        @update-page="onUpdatePage"
+      />
+    </div>
+  </n-popover>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, ref, shallowReactive } from 'vue';
+  import * as AntdIcons from '@vicons/antd';
+  import { AntDesignOutlined } from '@vicons/antd';
+
+  export default defineComponent({
+    name: 'AntdSelector',
+    components: AntdIcons,
+    props: {
+      value: String,
+      option: String,
+    },
+    emits: ['update:value'],
+    setup(props, { emit }) {
+      const formValue = computed({
+        get() {
+          return props.value;
+        },
+        set(value) {
+          emit('update:value', value);
+        },
+      });
+
+      const iconArray = Object.keys(AntdIcons);
+      const pageSize = 40;
+      const icons = shallowReactive(iconArray.slice(0, 40));
+      const currentPage = ref(1);
+      const itemCount = computed(() => iconArray.length);
+
+      function onUpdatePage(page: number) {
+        currentPage.value = page;
+        icons.length = 0;
+        const start = (currentPage.value - 1) * pageSize;
+        icons.push(...iconArray.slice(start, start + pageSize));
+      }
+
+      function onIconClick(item: any) {
+        formValue.value = item;
+      }
+      return {
+        icons,
+        currentPage,
+        pageSize,
+        itemCount,
+        onUpdatePage,
+        onIconClick,
+        formValue,
+        AntDesignOutlined,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .grid-wrapper {
+    .icon-wrapper {
+      cursor: pointer;
+      border: 1px solid #f5f5f5;
+    }
+  }
+</style>
diff --git a/web/src/components/IconSelector/Ionicons5Selector.vue b/web/src/components/IconSelector/Ionicons5Selector.vue
new file mode 100644
index 0000000..f6d6b38
--- /dev/null
+++ b/web/src/components/IconSelector/Ionicons5Selector.vue
@@ -0,0 +1,94 @@
+<template>
+  <n-popover trigger="click" placement="bottom" width="400">
+    <template #trigger>
+      <n-button>
+        <template #icon>
+          <n-icon size="20">
+            <component :is="formValue !== '' ? formValue : 'LogoIonic'" />
+          </n-icon>
+        </template>
+      </n-button>
+    </template>
+    <n-scrollbar class="grid-wrapper">
+      <n-grid :cols="8" :collapsed="false" responsive="screen" style="height: 300px">
+        <n-grid-item v-for="(item, index) of icons" :key="index">
+          <div
+            class="flex flex-col items-center justify-center p-3 icon-wrapper"
+            @click="onIconClick(item)"
+          >
+            <n-icon size="20">
+              <component :is="item" />
+            </n-icon>
+          </div>
+        </n-grid-item>
+      </n-grid>
+    </n-scrollbar>
+    <div class="flex justify-end mt-2 mb-2">
+      <n-pagination
+        :page="currentPage"
+        :page-size="pageSize"
+        :page-slot="8"
+        :item-count="itemCount"
+        @update-page="onUpdatePage"
+      />
+    </div>
+  </n-popover>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, ref, shallowReactive } from 'vue';
+  import * as Ionicons5Icons from '@vicons/ionicons5';
+  export default defineComponent({
+    name: 'Ionicons5Selector',
+    components: Ionicons5Icons,
+    props: {
+      value: String,
+      option: String,
+    },
+    emits: ['update:value'],
+    setup(props, { emit }) {
+      const formValue = computed({
+        get() {
+          return props.value;
+        },
+        set(value) {
+          emit('update:value', value);
+        },
+      });
+
+      const iconArray = Object.keys(Ionicons5Icons);
+      const pageSize = 40;
+      const icons = shallowReactive(iconArray.slice(0, 40));
+      const currentPage = ref(1);
+      const itemCount = computed(() => iconArray.length);
+
+      function onUpdatePage(page: number) {
+        currentPage.value = page;
+        icons.length = 0;
+        const start = (currentPage.value - 1) * pageSize;
+        icons.push(...iconArray.slice(start, start + pageSize));
+      }
+
+      function onIconClick(item: any) {
+        formValue.value = item;
+      }
+      return {
+        icons,
+        currentPage,
+        pageSize,
+        itemCount,
+        onUpdatePage,
+        onIconClick,
+        formValue,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .grid-wrapper {
+    .icon-wrapper {
+      cursor: pointer;
+      border: 1px solid #f5f5f5;
+    }
+  }
+</style>
diff --git a/web/src/components/IconSelector/index.vue b/web/src/components/IconSelector/index.vue
new file mode 100644
index 0000000..94356e8
--- /dev/null
+++ b/web/src/components/IconSelector/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <n-input-group>
+      <template v-if="option === 'ionicons5'">
+        <Ionicons5Selector v-model:value="formValue" />
+      </template>
+      <template v-else>
+        <AntdSelector v-model:value="formValue" />
+      </template>
+      <n-input v-bind="$props" :value="formValue" placeholder="请选择图标" />
+    </n-input-group>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import { basicProps } from '@/components/IconSelector/props';
+  import Ionicons5Selector from '@/components/IconSelector/Ionicons5Selector.vue';
+  import AntdSelector from '@/components/IconSelector/AntdSelector.vue';
+  export default defineComponent({
+    name: 'BasicUpload',
+    components: { Ionicons5Selector, AntdSelector },
+    props: {
+      ...basicProps,
+    },
+    emits: ['update:value'],
+    setup(props, { emit }) {
+      const formValue = computed({
+        get() {
+          return props.value;
+        },
+        set(value) {
+          emit('update:value', value);
+        },
+      });
+
+      return {
+        formValue,
+      };
+    },
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/components/IconSelector/props.ts b/web/src/components/IconSelector/props.ts
new file mode 100644
index 0000000..6ef95c7
--- /dev/null
+++ b/web/src/components/IconSelector/props.ts
@@ -0,0 +1,14 @@
+import type { PropType } from 'vue';
+import { NInput } from 'naive-ui';
+
+export const basicProps = {
+  ...NInput.props,
+  option: {
+    type: String as PropType<string>,
+    default: 'antd', // ionicons5 | antd
+  },
+  value: {
+    type: String as PropType<string>,
+    default: () => '',
+  },
+};
diff --git a/web/src/components/LoadingContent/index.ts b/web/src/components/LoadingContent/index.ts
new file mode 100644
index 0000000..d557abc
--- /dev/null
+++ b/web/src/components/LoadingContent/index.ts
@@ -0,0 +1,3 @@
+import LoadingContent from './index.vue';
+
+export { LoadingContent };
diff --git a/web/src/components/LoadingContent/index.vue b/web/src/components/LoadingContent/index.vue
new file mode 100644
index 0000000..1312a08
--- /dev/null
+++ b/web/src/components/LoadingContent/index.vue
@@ -0,0 +1,12 @@
+<template></template>
+<script lang="ts">
+  import { useLoadingBar } from 'naive-ui';
+
+  export default {
+    name: 'LoadingContent',
+    setup() {
+      //挂载在 window 方便与在js中使用
+      window['$loading'] = useLoadingBar();
+    },
+  };
+</script>
diff --git a/web/src/components/Lockscreen/Lockscreen.vue b/web/src/components/Lockscreen/Lockscreen.vue
new file mode 100644
index 0000000..1c2fec3
--- /dev/null
+++ b/web/src/components/Lockscreen/Lockscreen.vue
@@ -0,0 +1,315 @@
+<template>
+  <div
+    :class="{ onLockLogin: showLogin }"
+    class="lockscreen"
+    @keyup="onLockLogin(true)"
+    @mousedown.stop
+    @contextmenu.prevent
+  >
+    <template v-if="!showLogin">
+      <div class="lock-box">
+        <div class="lock">
+          <span class="lock-icon" title="解锁屏幕" @click="onLockLogin(true)">
+            <n-icon>
+              <lock-outlined />
+            </n-icon>
+          </span>
+        </div>
+      </div>
+      <!--充电-->
+      <recharge
+        :battery="battery"
+        :battery-status="batteryStatus"
+        :calc-discharging-time="calcDischargingTime"
+        :calc-charging-time="calcChargingTime"
+      />
+
+      <div class="local-time">
+        <div class="time">{{ hour }}:{{ minute }}</div>
+        <div class="date">{{ month }}月{{ day }}号，星期{{ week }}</div>
+      </div>
+      <div class="computer-status">
+        <span :class="{ offline: !online }" class="network">
+          <wifi-outlined class="network" />
+        </span>
+        <api-outlined />
+      </div>
+    </template>
+
+    <!--登录-->
+    <template v-if="showLogin">
+      <div class="login-box">
+        <n-avatar :size="128">
+          <n-icon>
+            <user-outlined />
+          </n-icon>
+        </n-avatar>
+        <div class="username">{{ loginParams.username }}</div>
+        <n-input
+          type="password"
+          autofocus
+          v-model:value="loginParams.password"
+          @keyup.enter="onLogin"
+          placeholder="请输入登录密码"
+        >
+          <template #suffix>
+            <n-icon @click="onLogin" style="cursor: pointer">
+              <LoadingOutlined v-if="loginLoading" />
+              <arrow-right-outlined v-else />
+            </n-icon>
+          </template>
+        </n-input>
+
+        <div class="w-full flex" v-if="isLoginError">
+          <span class="text-red-500">{{ errorMsg }}</span>
+        </div>
+
+        <div class="w-full mt-1 flex justify-around">
+          <div><a @click="showLogin = false">返回</a></div>
+          <div><a @click="goLogin">重新登录</a></div>
+          <div><a @click="onLogin">进入系统</a></div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import recharge from './Recharge.vue';
+  import {
+    LockOutlined,
+    LoadingOutlined,
+    UserOutlined,
+    ApiOutlined,
+    ArrowRightOutlined,
+    WifiOutlined,
+  } from '@vicons/antd';
+
+  import { useRouter, useRoute } from 'vue-router';
+  import { useOnline } from '@/hooks/useOnline';
+  import { useTime } from '@/hooks/useTime';
+  import { useBattery } from '@/hooks/useBattery';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import { useUserStore } from '@/store/modules/user';
+  import { aesEcb } from '@/utils/encrypt';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+
+  export default defineComponent({
+    name: 'Lockscreen',
+    components: {
+      LockOutlined,
+      LoadingOutlined,
+      UserOutlined,
+      ArrowRightOutlined,
+      ApiOutlined,
+      WifiOutlined,
+      recharge,
+    },
+    setup() {
+      const useLockscreen = useLockscreenStore();
+      const userStore = useUserStore();
+
+      // 获取时间
+      const { month, day, hour, minute, second, week } = useTime();
+      const { online } = useOnline();
+
+      const router = useRouter();
+      const route = useRoute();
+
+      const { battery, batteryStatus, calcDischargingTime, calcChargingTime } = useBattery();
+      const userInfo: object = userStore.getUserInfo || {};
+      const username = userInfo['username'] || '';
+      const state = reactive({
+        showLogin: false,
+        loginLoading: false, // 正在登录
+        isLoginError: false, //密码错误
+        errorMsg: '密码错误',
+        loginParams: {
+          username: username || '',
+          password: '',
+        },
+      });
+
+      // 解锁登录
+      const onLockLogin = (value: boolean) => (state.showLogin = value);
+
+      // 登录
+      const onLogin = async () => {
+        if (!state.loginParams.password.trim()) {
+          return;
+        }
+        const params = {
+          isLock: true,
+          username: state.loginParams.username,
+          password: aesEcb.encrypt(state.loginParams.password),
+        };
+        state.loginLoading = true;
+        const { code, message } = await userStore.login(params);
+        if (code === ResultEnum.SUCCESS) {
+          onLockLogin(false);
+          useLockscreen.setLock(false);
+          window.location.reload();
+        } else {
+          state.errorMsg = message;
+          state.isLoginError = true;
+        }
+        state.loginLoading = false;
+      };
+
+      //重新登录
+      const goLogin = () => {
+        onLockLogin(false);
+        useLockscreen.setLock(false);
+
+        userStore.logout().then(() => {
+          // 移除标签页
+          localStorage.removeItem(TABS_ROUTES);
+          router
+            .replace({
+              name: 'Login',
+              query: {
+                redirect: route.fullPath,
+              },
+            })
+            .finally(() => location.reload());
+        });
+      };
+
+      return {
+        ...toRefs(state),
+        online,
+        month,
+        day,
+        hour,
+        minute,
+        second,
+        week,
+        battery,
+        batteryStatus,
+        calcDischargingTime,
+        calcChargingTime,
+        onLockLogin,
+        onLogin,
+        goLogin,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .lockscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    background: #000;
+    color: white;
+    overflow: hidden;
+    z-index: 9999;
+
+    &.onLockLogin {
+      background-color: rgba(25, 28, 34, 0.88);
+      backdrop-filter: blur(7px);
+    }
+
+    .login-box {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      > * {
+        margin-bottom: 14px;
+      }
+
+      .username {
+        font-size: 30px;
+      }
+    }
+
+    .lock-box {
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 34px;
+      z-index: 100;
+
+      .tips {
+        color: white;
+        cursor: text;
+      }
+
+      .lock {
+        display: flex;
+        justify-content: center;
+
+        .lock-icon {
+          cursor: pointer;
+
+          .anticon-unlock {
+            display: none;
+          }
+
+          &:hover .anticon-unlock {
+            display: initial;
+          }
+
+          &:hover .anticon-lock {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .local-time {
+      position: absolute;
+      bottom: 60px;
+      left: 60px;
+      font-family: helvetica;
+
+      .time {
+        font-size: 70px;
+      }
+
+      .date {
+        font-size: 40px;
+      }
+    }
+
+    .computer-status {
+      position: absolute;
+      bottom: 60px;
+      right: 60px;
+      font-size: 24px;
+
+      > * {
+        margin-left: 14px;
+      }
+
+      .network {
+        position: relative;
+
+        &.offline::before {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 2px;
+          height: 28px;
+          transform: translate(-50%, -50%) rotate(45deg);
+          background-color: red;
+          z-index: 10;
+        }
+      }
+    }
+  }
+</style>
diff --git a/web/src/components/Lockscreen/Recharge.vue b/web/src/components/Lockscreen/Recharge.vue
new file mode 100644
index 0000000..4eef443
--- /dev/null
+++ b/web/src/components/Lockscreen/Recharge.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="container">
+    <div class="number">{{ battery.level }}%</div>
+    <div class="contrast">
+      <div class="circle"></div>
+      <ul class="bubbles">
+        <li v-for="i in 15" :key="i"></li>
+      </ul>
+    </div>
+    <div class="charging">
+      <div>{{ batteryStatus }}</div>
+      <div v-show="Number.isFinite(battery.dischargingTime) && battery.dischargingTime != 0">
+        剩余可使用时间：{{ calcDischargingTime }}
+      </div>
+      <span v-show="Number.isFinite(battery.chargingTime) && battery.chargingTime != 0">
+        距离电池充满需要：{{ calcChargingTime }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'HuaweiCharge',
+    // props: ['batteryStatus', 'battery', 'calcDischargingTime'],
+    props: {
+      battery: {
+        // 电池对象
+        type: Object,
+        default: () => ({}),
+      },
+      calcDischargingTime: {
+        // 电池剩余时间可用时间
+        type: String,
+        default: '',
+      },
+      calcChargingTime: {
+        type: String,
+        default: '',
+      },
+      batteryStatus: {
+        // 电池状态
+        type: String,
+        validator: (val: string) => ['充电中', '已充满', '已断开电源'].includes(val),
+      },
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .container {
+    position: absolute;
+    bottom: 20vh;
+    left: 50vw;
+    width: 300px;
+    height: 500px;
+    transform: translateX(-50%);
+
+    .number {
+      position: absolute;
+      top: 20%;
+      z-index: 10;
+      width: 300px;
+      font-size: 32px;
+      color: #fff;
+      text-align: center;
+    }
+
+    .contrast {
+      width: 300px;
+      height: 400px;
+      overflow: hidden;
+      background-color: #000;
+      filter: contrast(15) hue-rotate(0);
+      animation: hueRotate 10s infinite linear;
+
+      .circle {
+        position: relative;
+        width: 300px;
+        height: 300px;
+        filter: blur(8px);
+        box-sizing: border-box;
+
+        &::after {
+          position: absolute;
+          top: 40%;
+          left: 50%;
+          width: 200px;
+          height: 200px;
+          background-color: #00ff6f;
+          border-radius: 42% 38% 62% 49% / 45%;
+          content: '';
+          transform: translate(-50%, -50%) rotate(0);
+          animation: rotate 10s infinite linear;
+        }
+
+        &::before {
+          position: absolute;
+          top: 40%;
+          left: 50%;
+          z-index: 10;
+          width: 176px;
+          height: 176px;
+          background-color: #000;
+          border-radius: 50%;
+          content: '';
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      .bubbles {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 100px;
+        height: 40px;
+        background-color: #00ff6f;
+        border-radius: 100px 100px 0 0;
+        filter: blur(5px);
+        transform: translate(-50%, 0);
+
+        li {
+          position: absolute;
+          background: #00ff6f;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .charging {
+      font-size: 20px;
+      text-align: center;
+    }
+  }
+
+  @keyframes rotate {
+    50% {
+      border-radius: 45% / 42% 38% 58% 49%;
+    }
+
+    100% {
+      transform: translate(-50%, -50%) rotate(720deg);
+    }
+  }
+
+  @keyframes moveToTop {
+    90% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0.1;
+      transform: translate(-50%, -180px);
+    }
+  }
+
+  @keyframes hueRotate {
+    100% {
+      filter: contrast(15) hue-rotate(360deg);
+    }
+  }
+</style>
diff --git a/web/src/components/Lockscreen/index.ts b/web/src/components/Lockscreen/index.ts
new file mode 100644
index 0000000..7e086dc
--- /dev/null
+++ b/web/src/components/Lockscreen/index.ts
@@ -0,0 +1,3 @@
+import LockScreen from './Lockscreen.vue';
+
+export { LockScreen };
diff --git a/web/src/components/MessageContent/index.ts b/web/src/components/MessageContent/index.ts
new file mode 100644
index 0000000..b1f036b
--- /dev/null
+++ b/web/src/components/MessageContent/index.ts
@@ -0,0 +1,3 @@
+import MessageContent from './index.vue';
+
+export { MessageContent };
diff --git a/web/src/components/MessageContent/index.vue b/web/src/components/MessageContent/index.vue
new file mode 100644
index 0000000..1ad18ec
--- /dev/null
+++ b/web/src/components/MessageContent/index.vue
@@ -0,0 +1,12 @@
+<template></template>
+<script lang="ts">
+  import { useMessage } from 'naive-ui';
+
+  export default {
+    name: 'MessageContent',
+    setup() {
+      //挂载在 window 方便与在js中使用
+      window['$message'] = useMessage();
+    },
+  };
+</script>
diff --git a/web/src/components/Modal/index.ts b/web/src/components/Modal/index.ts
new file mode 100644
index 0000000..586a945
--- /dev/null
+++ b/web/src/components/Modal/index.ts
@@ -0,0 +1,3 @@
+export { default as basicModal } from './src/basicModal.vue';
+export { useModal } from './src/hooks/useModal';
+export * from './src/type';
diff --git a/web/src/components/Modal/src/basicModal.vue b/web/src/components/Modal/src/basicModal.vue
new file mode 100644
index 0000000..8b1f9b1
--- /dev/null
+++ b/web/src/components/Modal/src/basicModal.vue
@@ -0,0 +1,108 @@
+<template>
+  <n-modal id="basic-modal" v-bind="getBindValue" v-model:show="isModal" @close="onCloseModal">
+    <template #header>
+      <div class="w-full cursor-move" id="basic-modal-bar">{{ getBindValue.title }}</div>
+    </template>
+    <template #default>
+      <slot name="default"></slot>
+    </template>
+    <template #action v-if="!$slots.action">
+      <n-space>
+        <n-button @click="closeModal">取消</n-button>
+        <n-button type="primary" :loading="subLoading" @click="handleSubmit">{{
+          subBtuText
+        }}</n-button>
+      </n-space>
+    </template>
+    <template v-else #action>
+      <slot name="action"></slot>
+    </template>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+  import { getCurrentInstance, ref, nextTick, unref, computed, useAttrs } from 'vue';
+  import { basicProps } from './props';
+  import startDrag from '@/utils/Drag';
+  import { deepMerge } from '@/utils';
+  import { FormProps } from '@/components/Form';
+  import { ModalProps, ModalMethods } from './type';
+
+  const attrs = useAttrs();
+  const props = defineProps({ ...basicProps });
+  const emit = defineEmits(['on-close', 'on-ok', 'register']);
+
+  const propsRef = ref<Partial<ModalProps> | null>(null);
+
+  const isModal = ref(false);
+  const subLoading = ref(false);
+
+  const getProps = computed((): FormProps => {
+    return { ...props, ...(unref(propsRef) as any) };
+  });
+
+  const subBtuText = computed(() => {
+    const { subBtuText } = propsRef.value as any;
+    return subBtuText || props.subBtuText;
+  });
+
+  async function setProps(modalProps: Partial<ModalProps>): Promise<void> {
+    propsRef.value = deepMerge(unref(propsRef) || ({} as any), modalProps);
+  }
+
+  const getBindValue = computed(() => {
+    return {
+      ...attrs,
+      ...unref(getProps),
+      ...unref(propsRef),
+    };
+  });
+
+  function setSubLoading(status: boolean) {
+    subLoading.value = status;
+  }
+
+  function openModal() {
+    isModal.value = true;
+    nextTick(() => {
+      const oBox = document.getElementById('basic-modal');
+      const oBar = document.getElementById('basic-modal-bar');
+      startDrag(oBar, oBox);
+    });
+  }
+
+  function closeModal() {
+    isModal.value = false;
+    subLoading.value = false;
+    emit('on-close');
+  }
+
+  function onCloseModal() {
+    isModal.value = false;
+    emit('on-close');
+  }
+
+  function handleSubmit() {
+    subLoading.value = true;
+    console.log(subLoading.value);
+    emit('on-ok');
+  }
+
+  const modalMethods: ModalMethods = {
+    setProps,
+    openModal,
+    closeModal,
+    setSubLoading,
+  };
+
+  const instance = getCurrentInstance();
+  if (instance) {
+    emit('register', modalMethods);
+  }
+</script>
+
+<style lang="less">
+  .cursor-move {
+    cursor: move;
+  }
+</style>
diff --git a/web/src/components/Modal/src/hooks/useModal.ts b/web/src/components/Modal/src/hooks/useModal.ts
new file mode 100644
index 0000000..0b737d6
--- /dev/null
+++ b/web/src/components/Modal/src/hooks/useModal.ts
@@ -0,0 +1,54 @@
+import { ref, unref, getCurrentInstance, watch } from 'vue';
+import { isProdMode } from '@/utils/env';
+import { ModalMethods, UseModalReturnType } from '../type';
+import { getDynamicProps } from '@/utils';
+import { tryOnUnmounted } from '@vueuse/core';
+export function useModal(props): UseModalReturnType {
+  const modalRef = ref<Nullable<ModalMethods>>(null);
+  const currentInstance = getCurrentInstance();
+
+  const getInstance = () => {
+    const instance = unref(modalRef.value);
+    if (!instance) {
+      console.error('useModal instance is undefined!');
+    }
+    return instance;
+  };
+
+  const register = (modalInstance: ModalMethods) => {
+    isProdMode() &&
+      tryOnUnmounted(() => {
+        modalRef.value = null;
+      });
+    modalRef.value = modalInstance;
+    currentInstance?.emit('register', modalInstance);
+
+    watch(
+      () => props,
+      () => {
+        props && modalInstance.setProps(getDynamicProps(props));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  };
+
+  const methods: ModalMethods = {
+    setProps: (props): void => {
+      getInstance()?.setProps(props);
+    },
+    openModal: () => {
+      getInstance()?.openModal();
+    },
+    closeModal: () => {
+      getInstance()?.closeModal();
+    },
+    setSubLoading: (status) => {
+      getInstance()?.setSubLoading(status);
+    },
+  };
+
+  return [register, methods];
+}
diff --git a/web/src/components/Modal/src/props.ts b/web/src/components/Modal/src/props.ts
new file mode 100644
index 0000000..9fafa12
--- /dev/null
+++ b/web/src/components/Modal/src/props.ts
@@ -0,0 +1,30 @@
+import { NModal } from 'naive-ui';
+
+export const basicProps = {
+  ...NModal.props,
+  // 确认按钮文字
+  subBtuText: {
+    type: String,
+    default: '确认',
+  },
+  showIcon: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: Number,
+    default: 446,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  maskClosable: {
+    type: Boolean,
+    default: false,
+  },
+  preset: {
+    type: String,
+    default: 'dialog',
+  },
+};
diff --git a/web/src/components/Modal/src/type/index.ts b/web/src/components/Modal/src/type/index.ts
new file mode 100644
index 0000000..804e741
--- /dev/null
+++ b/web/src/components/Modal/src/type/index.ts
@@ -0,0 +1,19 @@
+import type { DialogOptions } from 'naive-ui/lib/dialog';
+/**
+ * @description: 弹窗对外暴露的方法
+ */
+export interface ModalMethods {
+  setProps: (props) => void;
+  openModal: () => void;
+  closeModal: () => void;
+  setSubLoading: (status) => void;
+}
+
+/**
+ * 支持修改，DialogOptions 參數
+ */
+export type ModalProps = DialogOptions;
+
+export type RegisterFn = (ModalInstance: ModalMethods) => void;
+
+export type UseModalReturnType = [RegisterFn, ModalMethods];
diff --git a/web/src/components/SvgIcon/index.vue b/web/src/components/SvgIcon/index.vue
new file mode 100644
index 0000000..db6d71e
--- /dev/null
+++ b/web/src/components/SvgIcon/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <component :is="component" :class="className" aria-hidden="true">
+    <use :href="iconName" />
+  </component>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'SvgIcon',
+    props: {
+      prefix: {
+        type: String,
+        default: 'icon',
+      },
+      name: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      component(): string {
+        return this.prefix === 'icon' ? 'svg' : 'i';
+      },
+      iconName(): string {
+        return `#${this.prefix}-${this.name}`;
+      },
+      className(): string {
+        if (this.prefix === 'icon') {
+          return 'svg-icon';
+        } else if (this.prefix === 'iconfont') {
+          return 'iconfont icon-' + this.name;
+        } else {
+          return '';
+        }
+      },
+    },
+  });
+</script>
+
+<style scoped>
+  .svg-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
+  .svg-icon:hover {
+    fill: var(--primary-color-hover);
+  }
+
+  .svg-external-icon {
+    background-color: currentColor;
+    mask-size: cover !important;
+    display: inline-block;
+  }
+</style>
diff --git a/web/src/components/Table/index.ts b/web/src/components/Table/index.ts
new file mode 100644
index 0000000..38725ad
--- /dev/null
+++ b/web/src/components/Table/index.ts
@@ -0,0 +1,4 @@
+export { default as BasicTable } from './src/Table.vue';
+export { default as TableAction } from './src/components/TableAction.vue';
+export * from './src/types/table';
+export * from './src/types/tableAction';
diff --git a/web/src/components/Table/src/Table.vue b/web/src/components/Table/src/Table.vue
new file mode 100644
index 0000000..ebd7585
--- /dev/null
+++ b/web/src/components/Table/src/Table.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="table-toolbar">
+    <!--顶部左侧区域-->
+    <div class="flex items-center table-toolbar-left">
+      <template v-if="title">
+        <div class="table-toolbar-left-title">
+          {{ title }}
+          <n-tooltip trigger="hover" v-if="titleTooltip">
+            <template #trigger>
+              <n-icon size="18" class="ml-1 text-gray-400 cursor-pointer">
+                <QuestionCircleOutlined />
+              </n-icon>
+            </template>
+            {{ titleTooltip }}
+          </n-tooltip>
+        </div>
+      </template>
+      <slot name="tableTitle"></slot>
+    </div>
+
+    <div class="flex items-center table-toolbar-right" v-show="showTopRight">
+      <!--顶部右侧区域-->
+      <slot name="toolbar"></slot>
+
+      <!--斑马纹-->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <div class="mr-2 table-toolbar-right-icon">
+            <n-switch v-model:value="isStriped" @update:value="setStriped" />
+          </div>
+        </template>
+        <span>表格斑马纹</span>
+      </n-tooltip>
+      <n-divider vertical />
+
+      <!--刷新-->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <div class="table-toolbar-right-icon" @click="reload">
+            <n-icon size="18">
+              <ReloadOutlined />
+            </n-icon>
+          </div>
+        </template>
+        <span>刷新</span>
+      </n-tooltip>
+
+      <!--密度-->
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <div class="table-toolbar-right-icon">
+            <n-dropdown
+              @select="densitySelect"
+              trigger="click"
+              :options="densityOptions"
+              v-model:value="tableSize"
+            >
+              <n-icon size="18">
+                <ColumnHeightOutlined />
+              </n-icon>
+            </n-dropdown>
+          </div>
+        </template>
+        <span>密度</span>
+      </n-tooltip>
+
+      <!--表格设置单独抽离成组件-->
+      <ColumnSetting :openChecked="openChecked" />
+    </div>
+  </div>
+  <div class="s-table">
+    <n-data-table
+      ref="tableElRef"
+      v-bind="getBindValues"
+      :striped="isStriped"
+      :pagination="pagination"
+      @update:page="updatePage"
+      @update:page-size="updatePageSize"
+    >
+      <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+        <slot :name="item" v-bind="data"></slot>
+      </template>
+    </n-data-table>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ref,
+    defineComponent,
+    reactive,
+    unref,
+    toRaw,
+    computed,
+    toRefs,
+    onMounted,
+    nextTick,
+  } from 'vue';
+  import { ReloadOutlined, ColumnHeightOutlined, QuestionCircleOutlined } from '@vicons/antd';
+  import { createTableContext } from './hooks/useTableContext';
+
+  import ColumnSetting from './components/settings/ColumnSetting.vue';
+
+  import { useLoading } from './hooks/useLoading';
+  import { useColumns } from './hooks/useColumns';
+  import { useDataSource } from './hooks/useDataSource';
+  import { usePagination } from './hooks/usePagination';
+
+  import { basicProps } from './props';
+
+  import { BasicTableProps } from './types/table';
+
+  import { getViewportOffset } from '@/utils/domUtils';
+  import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
+  import { isBoolean } from '@/utils/is';
+
+  const densityOptions = [
+    {
+      type: 'menu',
+      label: '紧凑',
+      key: 'small',
+    },
+    {
+      type: 'menu',
+      label: '默认',
+      key: 'medium',
+    },
+    {
+      type: 'menu',
+      label: '宽松',
+      key: 'large',
+    },
+  ];
+
+  export default defineComponent({
+    components: {
+      ReloadOutlined,
+      ColumnHeightOutlined,
+      ColumnSetting,
+      QuestionCircleOutlined,
+    },
+    props: {
+      ...basicProps,
+    },
+    emits: [
+      'fetch-success',
+      'fetch-error',
+      'update:checked-row-keys',
+      'edit-end',
+      'edit-cancel',
+      'edit-row-end',
+      'edit-change',
+    ],
+    setup(props, { emit }) {
+      const deviceHeight = ref(150);
+      const tableElRef = ref<ComponentRef>(null);
+      const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+      let paginationEl: HTMLElement | null;
+      const isStriped = ref(false);
+      const tableData = ref<Recordable[]>([]);
+      const innerPropsRef = ref<Partial<BasicTableProps>>();
+
+      const getProps = computed(() => {
+        return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
+      });
+
+      const { getLoading, setLoading } = useLoading(getProps);
+
+      const { getPaginationInfo, setPagination } = usePagination(getProps);
+
+      const { getDataSourceRef, getDataSource, getRowKey, reload } = useDataSource(
+        getProps,
+        {
+          getPaginationInfo,
+          setPagination,
+          tableData,
+          setLoading,
+        },
+        emit
+      );
+
+      const { getPageColumns, setColumns, getColumns, getCacheColumns, setCacheColumnsField } =
+        useColumns(getProps);
+
+      const state = reactive({
+        tableSize: unref(getProps as any).size || 'medium',
+        isColumnSetting: false,
+      });
+
+      //页码切换
+      function updatePage(page) {
+        setPagination({ page: page });
+        reload();
+      }
+
+      //分页数量切换
+      function updatePageSize(size) {
+        setPagination({ page: 1, pageSize: size });
+        reload();
+      }
+
+      //密度切换
+      function densitySelect(e) {
+        state.tableSize = e;
+      }
+
+      //选中行
+      function updateCheckedRowKeys(rowKeys) {
+        emit('update:checked-row-keys', rowKeys);
+      }
+
+      //获取表格大小
+      const getTableSize = computed(() => state.tableSize);
+
+      //组装表格信息
+      const getBindValues = computed(() => {
+        const tableData = unref(getDataSourceRef);
+        const maxHeight = tableData.length ? `${unref(deviceHeight)}px` : 'auto';
+        return {
+          ...unref(getProps),
+          loading: unref(getLoading),
+          columns: toRaw(unref(getPageColumns)),
+          rowKey: unref(getRowKey),
+          data: tableData,
+          size: unref(getTableSize),
+          remote: true,
+          'max-height': maxHeight,
+        };
+      });
+
+      //获取分页信息
+      const pagination = computed(() => toRaw(unref(getPaginationInfo)));
+
+      function setProps(props: Partial<BasicTableProps>) {
+        innerPropsRef.value = { ...unref(innerPropsRef), ...props };
+      }
+
+      const setStriped = (value: boolean) => (isStriped.value = value);
+
+      const tableAction = {
+        reload,
+        setColumns,
+        setLoading,
+        setProps,
+        getColumns,
+        getPageColumns,
+        getCacheColumns,
+        setCacheColumnsField,
+        emit,
+      };
+
+      const getCanResize = computed(() => {
+        const { canResize } = unref(getProps);
+        return canResize;
+      });
+
+      async function computeTableHeight() {
+        const table = unref(tableElRef);
+        if (!table) return;
+        if (!unref(getCanResize)) return;
+        const tableEl: any = table?.$el;
+        const headEl = tableEl.querySelector('.n-data-table-thead ');
+        const { bottomIncludeBody } = getViewportOffset(headEl);
+        const headerH = 64;
+        let paginationH = 2;
+        let marginH = 24;
+        if (!isBoolean(unref(pagination))) {
+          paginationEl = tableEl.querySelector('.n-data-table__pagination') as HTMLElement;
+          if (paginationEl) {
+            const offsetHeight = paginationEl.offsetHeight;
+            paginationH += offsetHeight || 0;
+          } else {
+            paginationH += 28;
+          }
+        }
+        let height =
+          bottomIncludeBody - (headerH + paginationH + marginH + (props.resizeHeightOffset || 0));
+        const maxHeight = props.maxHeight;
+        height = maxHeight && maxHeight < height ? maxHeight : height;
+        deviceHeight.value = height;
+      }
+
+      useWindowSizeFn(computeTableHeight, 280);
+
+      onMounted(() => {
+        nextTick(() => {
+          computeTableHeight();
+        });
+      });
+
+      createTableContext({ ...tableAction, wrapRef, getBindValues });
+
+      return {
+        ...toRefs(state),
+        tableElRef,
+        getBindValues,
+        getDataSource,
+        densityOptions,
+        reload,
+        densitySelect,
+        updatePage,
+        updatePageSize,
+        pagination,
+        tableAction,
+        setStriped,
+        isStriped,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .table-toolbar {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 0 16px 0;
+
+    &-left {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      flex: 1;
+
+      &-title {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+
+    &-right {
+      display: flex;
+      justify-content: flex-end;
+      flex: 1;
+
+      &-icon {
+        margin-left: 12px;
+        font-size: 16px;
+        cursor: pointer;
+        color: var(--text-color);
+
+        :hover {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+
+  .table-toolbar-inner-popover-title {
+    padding: 2px 0;
+  }
+</style>
diff --git a/web/src/components/Table/src/componentMap.ts b/web/src/components/Table/src/componentMap.ts
new file mode 100644
index 0000000..9fbb3fd
--- /dev/null
+++ b/web/src/components/Table/src/componentMap.ts
@@ -0,0 +1,41 @@
+import type { Component } from 'vue';
+import {
+  NInput,
+  NSelect,
+  NCheckbox,
+  NInputNumber,
+  NSwitch,
+  NDatePicker,
+  NTimePicker,
+} from 'naive-ui';
+import type { ComponentType } from './types/componentType';
+
+export enum EventEnum {
+  NInput = 'on-input',
+  NInputNumber = 'on-input',
+  NSelect = 'on-update:value',
+  NSwitch = 'on-update:value',
+  NCheckbox = 'on-update:value',
+  NDatePicker = 'on-update:value',
+  NTimePicker = 'on-update:value',
+}
+
+const componentMap = new Map<ComponentType, Component>();
+
+componentMap.set('NInput', NInput);
+componentMap.set('NInputNumber', NInputNumber);
+componentMap.set('NSelect', NSelect);
+componentMap.set('NSwitch', NSwitch);
+componentMap.set('NCheckbox', NCheckbox);
+componentMap.set('NDatePicker', NDatePicker);
+componentMap.set('NTimePicker', NTimePicker);
+
+export function add(compName: ComponentType, component: Component) {
+  componentMap.set(compName, component);
+}
+
+export function del(compName: ComponentType) {
+  componentMap.delete(compName);
+}
+
+export { componentMap };
diff --git a/web/src/components/Table/src/components/TableAction.vue b/web/src/components/Table/src/components/TableAction.vue
new file mode 100644
index 0000000..d0f30b8
--- /dev/null
+++ b/web/src/components/Table/src/components/TableAction.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="tableAction">
+    <div class="flex items-center justify-center">
+      <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
+        <n-button v-bind="action" class="mx-1">
+          {{ action.label }}
+          <template #icon v-if="action.hasOwnProperty('icon')">
+            <n-icon :component="action.icon" />
+          </template>
+        </n-button>
+      </template>
+      <n-dropdown
+        v-if="dropDownActions && getDropdownList.length"
+        trigger="hover"
+        :options="getDropdownList"
+        @select="select"
+      >
+        <slot name="more"></slot>
+        <n-button v-bind="getMoreProps" class="mx-1" v-if="!$slots.more" icon-placement="right">
+          <div class="flex items-center">
+            <span>更多</span>
+            <n-icon size="14" class="ml-1">
+              <DownOutlined />
+            </n-icon>
+          </div>
+          <!--          <template #icon> </template>-->
+        </n-button>
+      </n-dropdown>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, PropType, toRaw } from 'vue';
+  import { ActionItem } from '@/components/Table';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { isBoolean, isFunction } from '@/utils/is';
+  import { DownOutlined } from '@vicons/antd';
+
+  export default defineComponent({
+    name: 'TableAction',
+    components: { DownOutlined },
+    props: {
+      actions: {
+        type: Array as PropType<ActionItem[]>,
+        default: null,
+        required: true,
+      },
+      dropDownActions: {
+        type: Array as PropType<ActionItem[]>,
+        default: null,
+      },
+      style: {
+        type: String as PropType<String>,
+        default: 'button',
+      },
+      select: {
+        type: Function as PropType<Function>,
+        default: () => {},
+      },
+    },
+    setup(props) {
+      const { hasPermission } = usePermission();
+
+      const actionType =
+        props.style === 'button' ? 'default' : props.style === 'text' ? 'primary' : 'default';
+      const actionText =
+        props.style === 'button' ? undefined : props.style === 'text' ? true : undefined;
+
+      const getMoreProps = computed(() => {
+        return {
+          text: actionText,
+          type: actionType,
+          size: 'small',
+        };
+      });
+
+      const getDropdownList = computed(() => {
+        return (toRaw(props.dropDownActions) || [])
+          .filter((action) => {
+            return hasPermission(action.auth as string[]) && isIfShow(action);
+          })
+          .map((action) => {
+            const { popConfirm } = action;
+            return {
+              size: 'small',
+              text: actionText,
+              type: getBtnType(action), //actionType,
+              ...action,
+              ...popConfirm,
+              onConfirm: popConfirm?.confirm,
+              onCancel: popConfirm?.cancel,
+            };
+          });
+      });
+
+      function isIfShow(action: ActionItem): boolean {
+        const ifShow = action.ifShow;
+
+        let isIfShow = true;
+
+        if (isBoolean(ifShow)) {
+          isIfShow = ifShow;
+        }
+        if (isFunction(ifShow)) {
+          isIfShow = ifShow(action);
+        }
+        return isIfShow;
+      }
+
+      function getBtnType(action) {
+        if (action.type !== undefined && action.type !== '') {
+          return action.type;
+        }
+        switch (action.label) {
+          case '编辑':
+            return 'primary';
+          case '启用':
+          case '已禁用':
+            return 'warning';
+          case '已启用':
+          case '禁用':
+            return 'success';
+          case '删除':
+            return 'error';
+          case '查看详情':
+            return 'default';
+          default:
+            return 'primary';
+        }
+      }
+
+      const getActions = computed(() => {
+        return (toRaw(props.actions) || [])
+          .filter((action) => {
+            return hasPermission(action.auth as string[]) && isIfShow(action);
+          })
+          .map((action) => {
+            const { popConfirm } = action;
+            //需要展示什么风格，自己修改一下参数
+            return {
+              size: 'small',
+              text: actionText,
+              type: getBtnType(action), //actionType,
+              ...action,
+              ...(popConfirm || {}),
+              onConfirm: popConfirm?.confirm,
+              onCancel: popConfirm?.cancel,
+              enable: !!popConfirm,
+            };
+          });
+      });
+
+      return {
+        getActions,
+        getDropdownList,
+        getMoreProps,
+      };
+    },
+  });
+</script>
diff --git a/web/src/components/Table/src/components/editable/CellComponent.ts b/web/src/components/Table/src/components/editable/CellComponent.ts
new file mode 100644
index 0000000..8085e0c
--- /dev/null
+++ b/web/src/components/Table/src/components/editable/CellComponent.ts
@@ -0,0 +1,47 @@
+import type { FunctionalComponent, defineComponent } from 'vue';
+import type { ComponentType } from '../../types/componentType';
+import { componentMap } from '@/components/Table/src/componentMap';
+
+import { h } from 'vue';
+
+import { NPopover } from 'naive-ui';
+
+export interface ComponentProps {
+  component: ComponentType;
+  rule: boolean;
+  popoverVisible: boolean;
+  ruleMessage: string;
+}
+
+export const CellComponent: FunctionalComponent = (
+  { component = 'NInput', rule = true, ruleMessage, popoverVisible }: ComponentProps,
+  { attrs }
+) => {
+  const Comp = componentMap.get(component) as typeof defineComponent;
+
+  const DefaultComp = h(Comp, attrs);
+  if (!rule) {
+    return DefaultComp;
+  }
+  return h(
+    NPopover,
+    { 'display-directive': 'show', show: !!popoverVisible, manual: 'manual' },
+    {
+      trigger: () => DefaultComp,
+      default: () =>
+        h(
+          'span',
+          {
+            style: {
+              color: 'red',
+              width: '90px',
+              display: 'inline-block',
+            },
+          },
+          {
+            default: () => ruleMessage,
+          }
+        ),
+    }
+  );
+};
diff --git a/web/src/components/Table/src/components/editable/EditableCell.vue b/web/src/components/Table/src/components/editable/EditableCell.vue
new file mode 100644
index 0000000..e8fdd8e
--- /dev/null
+++ b/web/src/components/Table/src/components/editable/EditableCell.vue
@@ -0,0 +1,418 @@
+<template>
+  <div class="editable-cell">
+    <div v-show="!isEdit" class="editable-cell-content" @click="handleEdit">
+      {{ getValues }}
+      <n-icon class="edit-icon" v-if="!column.editRow">
+        <FormOutlined />
+      </n-icon>
+    </div>
+    <div class="flex editable-cell-content" v-show="isEdit" v-click-outside="onClickOutside">
+      <div class="editable-cell-content-comp">
+        <CellComponent
+          v-bind="getComponentProps"
+          :component="getComponent"
+          :popoverVisible="getRuleVisible"
+          :ruleMessage="ruleMessage"
+          :rule="getRule"
+          :class="getWrapperClass"
+          ref="elRef"
+          @options-change="handleOptionsChange"
+          @pressEnter="handleEnter"
+        />
+      </div>
+      <div class="editable-cell-action" v-if="!getRowEditable">
+        <n-icon class="mx-2 cursor-pointer">
+          <CheckOutlined @click="handleSubmit" />
+        </n-icon>
+        <n-icon class="mx-2 cursor-pointer">
+          <CloseOutlined @click="handleCancel" />
+        </n-icon>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import type { BasicColumn } from '../../types/table';
+  import type { EditRecordRow } from './index';
+
+  import { defineComponent, ref, unref, nextTick, computed, watchEffect, toRaw } from 'vue';
+  import { FormOutlined, CloseOutlined, CheckOutlined } from '@vicons/antd';
+  import { CellComponent } from './CellComponent';
+
+  import { useTableContext } from '../../hooks/useTableContext';
+
+  import clickOutside from '@/directives/clickOutside';
+
+  import { propTypes } from '@/utils/propTypes';
+  import { isString, isBoolean, isFunction, isNumber, isArray } from '@/utils/is';
+  import { createPlaceholderMessage } from './helper';
+  import { set, omit } from 'lodash-es';
+  import { EventEnum } from '@/components/Table/src/componentMap';
+
+  import { parseISO, format } from 'date-fns';
+
+  export default defineComponent({
+    name: 'EditableCell',
+    components: { FormOutlined, CloseOutlined, CheckOutlined, CellComponent },
+    directives: {
+      clickOutside,
+    },
+    props: {
+      value: {
+        type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
+        default: '',
+      },
+      record: {
+        type: Object as PropType<EditRecordRow>,
+      },
+      column: {
+        type: Object as PropType<BasicColumn>,
+        default: () => ({}),
+      },
+      index: propTypes.number,
+    },
+    setup(props) {
+      const table = useTableContext();
+      const isEdit = ref(false);
+      const elRef = ref();
+      const ruleVisible = ref(false);
+      const ruleMessage = ref('');
+      const optionsRef = ref<LabelValueOptions>([]);
+      const currentValueRef = ref<any>(props.value);
+      const defaultValueRef = ref<any>(props.value);
+
+      // const { prefixCls } = useDesign('editable-cell');
+
+      const getComponent = computed(() => props.column?.editComponent || 'NInput');
+      const getRule = computed(() => props.column?.editRule);
+
+      const getRuleVisible = computed(() => {
+        return unref(ruleMessage) && unref(ruleVisible);
+      });
+
+      const getIsCheckComp = computed(() => {
+        const component = unref(getComponent);
+        return ['NCheckbox', 'NRadio'].includes(component);
+      });
+
+      const getComponentProps = computed(() => {
+        const compProps = props.column?.editComponentProps ?? {};
+        const editComponent = props.column?.editComponent ?? null;
+        const component = unref(getComponent);
+        const apiSelectProps: Recordable = {};
+
+        const isCheckValue = unref(getIsCheckComp);
+
+        let valueField = isCheckValue ? 'checked' : 'value';
+        const val = unref(currentValueRef);
+
+        let value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
+
+        //TODO 特殊处理 NDatePicker 可能要根据项目 规范自行调整代码
+        if (component === 'NDatePicker') {
+          if (isString(value)) {
+            if (compProps.valueFormat) {
+              valueField = 'formatted-value';
+            } else {
+              value = parseISO(value as any).getTime();
+            }
+          } else if (isArray(value)) {
+            if (compProps.valueFormat) {
+              valueField = 'formatted-value';
+            } else {
+              value = value.map((item) => parseISO(item).getTime());
+            }
+          }
+        }
+
+        const onEvent: any = editComponent ? EventEnum[editComponent] : undefined;
+
+        return {
+          placeholder: createPlaceholderMessage(unref(getComponent)),
+          ...apiSelectProps,
+          ...omit(compProps, 'onChange'),
+          [onEvent]: handleChange,
+          [valueField]: value,
+        };
+      });
+
+      const getValues = computed(() => {
+        const { editComponentProps, editValueMap } = props.column;
+
+        const value = unref(currentValueRef);
+
+        if (editValueMap && isFunction(editValueMap)) {
+          return editValueMap(value);
+        }
+
+        const component = unref(getComponent);
+        if (!component.includes('NSelect')) {
+          return value;
+        }
+
+        const options: LabelValueOptions = editComponentProps?.options ?? (unref(optionsRef) || []);
+        const option = options.find((item) => `${item.value}` === `${value}`);
+
+        return option?.label ?? value;
+      });
+
+      const getWrapperClass = computed(() => {
+        const { align = 'center' } = props.column;
+        return `edit-cell-align-${align}`;
+      });
+
+      const getRowEditable = computed(() => {
+        const { editable } = props.record || {};
+        return !!editable;
+      });
+
+      watchEffect(() => {
+        defaultValueRef.value = props.value;
+      });
+
+      watchEffect(() => {
+        const { editable } = props.column;
+        if (isBoolean(editable) || isBoolean(unref(getRowEditable))) {
+          isEdit.value = !!editable || unref(getRowEditable);
+        }
+      });
+
+      function handleEdit() {
+        if (unref(getRowEditable) || unref(props.column?.editRow)) return;
+        ruleMessage.value = '';
+        isEdit.value = true;
+        nextTick(() => {
+          const el = unref(elRef);
+          el?.focus?.();
+        });
+      }
+
+      async function handleChange(e: any) {
+        const component = unref(getComponent);
+        const compProps = props.column?.editComponentProps ?? {};
+        if (!e) {
+          currentValueRef.value = e;
+        } else if (e?.target && Reflect.has(e.target, 'value')) {
+          currentValueRef.value = (e as ChangeEvent).target.value;
+        } else if (component === 'NCheckbox') {
+          currentValueRef.value = (e as ChangeEvent).target.checked;
+        } else if (isString(e) || isBoolean(e) || isNumber(e)) {
+          currentValueRef.value = e;
+        }
+
+        //TODO 特殊处理 NDatePicker 可能要根据项目 规范自行调整代码
+        if (component === 'NDatePicker') {
+          if (isNumber(currentValueRef.value)) {
+            if (compProps.valueFormat) {
+              currentValueRef.value = format(currentValueRef.value, compProps.valueFormat);
+            }
+          } else if (isArray(currentValueRef.value)) {
+            if (compProps.valueFormat) {
+              currentValueRef.value = currentValueRef.value.map((item) => {
+                format(item, compProps.valueFormat);
+              });
+            }
+          }
+        }
+
+        const onChange = props.column?.editComponentProps?.onChange;
+        if (onChange && isFunction(onChange)) onChange(...arguments);
+
+        table.emit?.('edit-change', {
+          column: props.column,
+          value: unref(currentValueRef),
+          record: toRaw(props.record),
+        });
+        await handleSubmiRule();
+      }
+
+      async function handleSubmiRule() {
+        const { column, record } = props;
+        const { editRule } = column;
+        const currentValue = unref(currentValueRef);
+
+        if (editRule) {
+          if (isBoolean(editRule) && !currentValue && !isNumber(currentValue)) {
+            ruleVisible.value = true;
+            const component = unref(getComponent);
+            ruleMessage.value = createPlaceholderMessage(component);
+            return false;
+          }
+          if (isFunction(editRule)) {
+            const res = await editRule(currentValue, record as Recordable);
+            if (!!res) {
+              ruleMessage.value = res;
+              ruleVisible.value = true;
+              return false;
+            } else {
+              ruleMessage.value = '';
+              return true;
+            }
+          }
+        }
+        ruleMessage.value = '';
+        return true;
+      }
+
+      async function handleSubmit(needEmit = true, valid = true) {
+        if (valid) {
+          const isPass = await handleSubmiRule();
+          if (!isPass) return false;
+        }
+
+        const { column, index, record } = props;
+        if (!record) return false;
+        const { key } = column;
+        const value = unref(currentValueRef);
+        if (!key) return;
+
+        const dataKey = key as string;
+
+        set(record, dataKey, value);
+        //const record = await table.updateTableData(index, dataKey, value);
+        needEmit && table.emit?.('edit-end', { record, index, key, value });
+        isEdit.value = false;
+      }
+
+      async function handleEnter() {
+        if (props.column?.editRow) {
+          return;
+        }
+        await handleSubmit();
+      }
+
+      function handleCancel() {
+        isEdit.value = false;
+        currentValueRef.value = defaultValueRef.value;
+        const { column, index, record } = props;
+        const { key } = column;
+        ruleVisible.value = true;
+        ruleMessage.value = '';
+        table.emit?.('edit-cancel', {
+          record,
+          index,
+          key: key,
+          value: unref(currentValueRef),
+        });
+      }
+
+      function onClickOutside() {
+        if (props.column?.editable || unref(getRowEditable)) {
+          return;
+        }
+        const component = unref(getComponent);
+
+        if (component.includes('NInput')) {
+          handleCancel();
+        }
+      }
+
+      // only ApiSelect
+      function handleOptionsChange(options: LabelValueOptions) {
+        optionsRef.value = options;
+      }
+
+      function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) {
+        if (props.record) {
+          /* eslint-disable  */
+          isArray(props.record[cbs])
+            ? props.record[cbs]?.push(handle)
+            : (props.record[cbs] = [handle]);
+        }
+      }
+
+      if (props.record) {
+        initCbs('submitCbs', handleSubmit);
+        initCbs('validCbs', handleSubmiRule);
+        initCbs('cancelCbs', handleCancel);
+
+        if (props.column.key) {
+          if (!props.record.editValueRefs) props.record.editValueRefs = {};
+          props.record.editValueRefs[props.column.key] = currentValueRef;
+        }
+        /* eslint-disable  */
+        props.record.onCancelEdit = () => {
+          isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
+        };
+        /* eslint-disable */
+        props.record.onSubmitEdit = async () => {
+          if (isArray(props.record?.submitCbs)) {
+            const validFns = (props.record?.validCbs || []).map((fn) => fn());
+
+            const res = await Promise.all(validFns);
+
+            const pass = res.every((item) => !!item);
+
+            if (!pass) return;
+            const submitFns = props.record?.submitCbs || [];
+            submitFns.forEach((fn) => fn(false, false));
+            table.emit?.('edit-row-end');
+            return true;
+          }
+        };
+      }
+
+      return {
+        isEdit,
+        handleEdit,
+        currentValueRef,
+        handleSubmit,
+        handleChange,
+        handleCancel,
+        elRef,
+        getComponent,
+        getRule,
+        onClickOutside,
+        ruleMessage,
+        getRuleVisible,
+        getComponentProps,
+        handleOptionsChange,
+        getWrapperClass,
+        getRowEditable,
+        getValues,
+        handleEnter,
+        // getSize,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  .editable-cell {
+    &-content {
+      position: relative;
+      overflow-wrap: break-word;
+      word-break: break-word;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      &-comp {
+        flex: 1;
+      }
+
+      .edit-icon {
+        font-size: 14px;
+        //position: absolute;
+        //top: 4px;
+        //right: 0;
+        display: none;
+        width: 20px;
+        cursor: pointer;
+      }
+
+      &:hover {
+        .edit-icon {
+          display: inline-block;
+        }
+      }
+    }
+
+    &-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/web/src/components/Table/src/components/editable/helper.ts b/web/src/components/Table/src/components/editable/helper.ts
new file mode 100644
index 0000000..48e7682
--- /dev/null
+++ b/web/src/components/Table/src/components/editable/helper.ts
@@ -0,0 +1,15 @@
+import { ComponentType } from '../../types/componentType';
+
+/**
+ * @description: 生成placeholder
+ */
+export function createPlaceholderMessage(component: ComponentType) {
+  if (component === 'NInput') return '请输入';
+  if (
+    ['NPicker', 'NSelect', 'NCheckbox', 'NRadio', 'NSwitch', 'NDatePicker', 'NTimePicker'].includes(
+      component
+    )
+  )
+    return '请选择';
+  return '';
+}
diff --git a/web/src/components/Table/src/components/editable/index.ts b/web/src/components/Table/src/components/editable/index.ts
new file mode 100644
index 0000000..064763d
--- /dev/null
+++ b/web/src/components/Table/src/components/editable/index.ts
@@ -0,0 +1,49 @@
+import type { BasicColumn } from '@/components/Table/src/types/table';
+import { h, Ref } from 'vue';
+
+import EditableCell from './EditableCell.vue';
+
+export function renderEditCell(column: BasicColumn) {
+  return (record, index) => {
+    const _key = column.key;
+    const value = record[_key];
+    record.onEdit = async (edit: boolean, submit = false) => {
+      if (!submit) {
+        record.editable = edit;
+      }
+
+      if (!edit && submit) {
+        const res = await record.onSubmitEdit?.();
+        if (res) {
+          record.editable = false;
+          return true;
+        }
+        return false;
+      }
+      // cancel
+      if (!edit && !submit) {
+        record.onCancelEdit?.();
+      }
+      return true;
+    };
+    return h(EditableCell, {
+      value,
+      record,
+      column,
+      index,
+    });
+  };
+}
+
+export type EditRecordRow<T = Recordable> = Partial<
+  {
+    onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
+    editable: boolean;
+    onCancel: Fn;
+    onSubmit: Fn;
+    submitCbs: Fn[];
+    cancelCbs: Fn[];
+    validCbs: Fn[];
+    editValueRefs: Recordable<Ref>;
+  } & T
+>;
diff --git a/web/src/components/Table/src/components/settings/ColumnSetting.vue b/web/src/components/Table/src/components/settings/ColumnSetting.vue
new file mode 100644
index 0000000..6923973
--- /dev/null
+++ b/web/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -0,0 +1,318 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <div class="cursor-pointer table-toolbar-right-icon">
+        <n-popover trigger="click" :width="230" class="toolbar-popover" placement="bottom-end">
+          <template #trigger>
+            <n-icon size="18">
+              <SettingOutlined />
+            </n-icon>
+          </template>
+          <template #header>
+            <div class="table-toolbar-inner-popover-title">
+              <n-space>
+                <n-checkbox v-model:checked="checkAll" @update:checked="onCheckAll"
+                  >列展示</n-checkbox
+                >
+                <n-checkbox v-model:checked="selection" @update:checked="onSelection"
+                  >勾选列</n-checkbox
+                >
+                <n-button text type="info" size="small" class="mt-1" @click="resetColumns"
+                  >重置</n-button
+                >
+              </n-space>
+            </div>
+          </template>
+          <div class="table-toolbar-inner">
+            <n-checkbox-group v-model:value="checkList" @update:value="onChange">
+              <Draggable
+                v-model="columnsList"
+                animation="300"
+                item-key="key"
+                filter=".no-draggable"
+                :move="onMove"
+                @end="draggableEnd"
+              >
+                <template #item="{ element }">
+                  <div
+                    class="table-toolbar-inner-checkbox"
+                    :class="{
+                      'table-toolbar-inner-checkbox-dark': getDarkTheme === true,
+                      'no-draggable': element.draggable === false,
+                    }"
+                  >
+                    <span
+                      class="drag-icon"
+                      :class="{ 'drag-icon-hidden': element.draggable === false }"
+                    >
+                      <n-icon size="18">
+                        <DragOutlined />
+                      </n-icon>
+                    </span>
+                    <n-checkbox :value="element.key" :label="element.title" />
+                    <div class="fixed-item">
+                      <n-tooltip trigger="hover" placement="bottom">
+                        <template #trigger>
+                          <n-icon
+                            size="18"
+                            :color="element.fixed === 'left' ? '#2080f0' : undefined"
+                            class="cursor-pointer"
+                            @click="fixedColumn(element, 'left')"
+                          >
+                            <VerticalRightOutlined />
+                          </n-icon>
+                        </template>
+                        <span>固定到左侧</span>
+                      </n-tooltip>
+                      <n-divider vertical />
+                      <n-tooltip trigger="hover" placement="bottom">
+                        <template #trigger>
+                          <n-icon
+                            size="18"
+                            :color="element.fixed === 'right' ? '#2080f0' : undefined"
+                            class="cursor-pointer"
+                            @click="fixedColumn(element, 'right')"
+                          >
+                            <VerticalLeftOutlined />
+                          </n-icon>
+                        </template>
+                        <span>固定到右侧</span>
+                      </n-tooltip>
+                    </div>
+                  </div>
+                </template>
+              </Draggable>
+            </n-checkbox-group>
+          </div>
+        </n-popover>
+      </div>
+    </template>
+    <span>列设置</span>
+  </n-tooltip>
+</template>
+
+<script lang="ts">
+  import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEffect } from 'vue';
+  import { useTableContext } from '../../hooks/useTableContext';
+  import { cloneDeep } from 'lodash-es';
+  import {
+    SettingOutlined,
+    DragOutlined,
+    VerticalRightOutlined,
+    VerticalLeftOutlined,
+  } from '@vicons/antd';
+  import Draggable from 'vuedraggable';
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  interface Options {
+    title: string;
+    key: string;
+    fixed?: boolean | 'left' | 'right';
+  }
+  export default defineComponent({
+    name: 'ColumnSetting',
+    components: {
+      SettingOutlined,
+      DragOutlined,
+      Draggable,
+      VerticalRightOutlined,
+      VerticalLeftOutlined,
+    },
+    props: {
+      openChecked: {
+        type: Boolean as PropType<Boolean>,
+        default: false,
+      },
+    },
+    setup(props) {
+      const { getDarkTheme } = useDesignSetting();
+      const table: any = useTableContext();
+      const columnsList = ref<Options[]>([]);
+      const cacheColumnsList = ref<Options[]>([]);
+      const state = reactive({
+        selection: false,
+        checkAll: true,
+        checkList: [],
+        defaultCheckList: [],
+      });
+      const getSelection = computed(() => {
+        return state.selection;
+      });
+      watchEffect(() => {
+        const columns = table.getColumns();
+        if (columns.length) {
+          init();
+        }
+      });
+      //初始化
+      function init() {
+        const columns: any[] = getColumns();
+        const checkList: any = columns.map((item) => item.key);
+        state.checkList = checkList;
+        state.defaultCheckList = checkList;
+        const newColumns = columns.filter((item) => item.key != 'action' && item.title != '操作');
+        if (!columnsList.value.length) {
+          columnsList.value = cloneDeep(newColumns);
+          cacheColumnsList.value = cloneDeep(newColumns);
+          // 只有首次加载时需要执行，重复执行会导致生成多个选项
+          if (props.openChecked) {
+            state.selection = true;
+            if (newColumns[0].type != 'selection' && newColumns[0].key != 'selection') {
+              onSelection(true);
+            }
+          }
+        }
+      }
+      //切换
+      function onChange(checkList) {
+        if (state.selection) {
+          checkList.unshift('selection');
+        }
+        setColumns(checkList);
+      }
+      //设置
+      function setColumns(columns) {
+        table.setColumns(columns);
+      }
+      //获取
+      function getColumns() {
+        let newRet: any[] = [];
+        table.getColumns().forEach((item) => {
+          newRet.push({ ...item });
+        });
+        return newRet;
+      }
+      //重置
+      function resetColumns() {
+        state.checkList = [...state.defaultCheckList];
+        state.checkAll = true;
+        let cacheColumnsKeys: any[] = table.getCacheColumns();
+        let newColumns = cacheColumnsKeys.map((item) => {
+          return {
+            ...item,
+            fixed: undefined,
+          };
+        });
+        setColumns(newColumns);
+        columnsList.value = newColumns;
+      }
+      //全选
+      function onCheckAll(e) {
+        let checkList = table.getCacheColumns(true);
+        if (e) {
+          setColumns(checkList);
+          state.checkList = checkList;
+        } else {
+          setColumns([]);
+          state.checkList = [];
+        }
+      }
+      //拖拽排序
+      function draggableEnd() {
+        const newColumns = toRaw(unref(columnsList));
+        columnsList.value = newColumns;
+        setColumns(newColumns);
+      }
+      //勾选列
+      function onSelection(e) {
+        let checkList = table.getCacheColumns();
+        if (e) {
+          checkList.unshift({ type: 'selection', key: 'selection' });
+          setColumns(checkList);
+        } else {
+          checkList.splice(0, 1);
+          setColumns(checkList);
+        }
+      }
+      function onMove(e) {
+        if (e.draggedContext.element.draggable === false) return false;
+        return true;
+      }
+      //固定
+      function fixedColumn(item, fixed) {
+        if (!state.checkList.includes(item.key)) return;
+        let columns = getColumns();
+        const isFixed = item.fixed === fixed ? undefined : fixed;
+        let index = columns.findIndex((res) => res.key === item.key);
+        if (index !== -1) {
+          columns[index].fixed = isFixed;
+        }
+        table.setCacheColumnsField(item.key, { fixed: isFixed });
+        columnsList.value[index].fixed = isFixed;
+        setColumns(columns);
+      }
+      return {
+        ...toRefs(state),
+        columnsList,
+        getDarkTheme,
+        onChange,
+        onCheckAll,
+        onSelection,
+        onMove,
+        resetColumns,
+        fixedColumn,
+        draggableEnd,
+        getSelection,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  .table-toolbar {
+    &-inner-popover-title {
+      padding: 3px 0;
+    }
+    &-right {
+      &-icon {
+        margin-left: 12px;
+        font-size: 16px;
+        color: var(--text-color);
+        cursor: pointer;
+        :hover {
+          color: #1890ff;
+        }
+      }
+    }
+  }
+  .table-toolbar-inner {
+    &-checkbox {
+      display: flex;
+      align-items: center;
+      padding: 10px 14px;
+      &:hover {
+        background: #e6f7ff;
+      }
+      .drag-icon {
+        display: inline-flex;
+        margin-right: 8px;
+        cursor: move;
+        &-hidden {
+          visibility: hidden;
+          cursor: default;
+        }
+      }
+      .fixed-item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-left: auto;
+      }
+      .ant-checkbox-wrapper {
+        flex: 1;
+        &:hover {
+          color: #1890ff !important;
+        }
+      }
+    }
+    &-checkbox-dark {
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.08);
+      }
+    }
+  }
+  .toolbar-popover {
+    .n-popover__content {
+      padding: 0;
+    }
+  }
+</style>
diff --git a/web/src/components/Table/src/const.ts b/web/src/components/Table/src/const.ts
new file mode 100644
index 0000000..82ebca6
--- /dev/null
+++ b/web/src/components/Table/src/const.ts
@@ -0,0 +1,11 @@
+import componentSetting from '@/settings/componentSetting';
+
+const { table } = componentSetting;
+
+const { apiSetting, defaultPageSize, pageSizes } = table;
+
+export const DEFAULTPAGESIZE = defaultPageSize;
+
+export const APISETTING = apiSetting;
+
+export const PAGESIZES = pageSizes;
diff --git a/web/src/components/Table/src/hooks/useColumns.ts b/web/src/components/Table/src/hooks/useColumns.ts
new file mode 100644
index 0000000..8ff93fa
--- /dev/null
+++ b/web/src/components/Table/src/hooks/useColumns.ts
@@ -0,0 +1,171 @@
+import { ref, Ref, ComputedRef, unref, computed, watch, toRaw, h } from 'vue';
+import type { BasicColumn, BasicTableProps } from '../types/table';
+import { isEqual, cloneDeep } from 'lodash-es';
+import { isArray, isString, isBoolean, isFunction } from '@/utils/is';
+import { usePermission } from '@/hooks/web/usePermission';
+import { ActionItem } from '@/components/Table';
+import { renderEditCell } from '../components/editable';
+import { NTooltip, NIcon } from 'naive-ui';
+import { FormOutlined } from '@vicons/antd';
+
+export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
+  const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
+  let cacheColumns = unref(propsRef).columns;
+
+  const getColumnsRef = computed(() => {
+    const columns = cloneDeep(unref(columnsRef));
+
+    handleActionColumn(propsRef, columns);
+    if (!columns) return [];
+    return columns;
+  });
+
+  const { hasPermission } = usePermission();
+
+  function isIfShow(action: ActionItem): boolean {
+    const ifShow = action.ifShow;
+
+    let isIfShow = true;
+
+    if (isBoolean(ifShow)) {
+      isIfShow = ifShow;
+    }
+    if (isFunction(ifShow)) {
+      isIfShow = ifShow(action);
+    }
+    return isIfShow;
+  }
+
+  const renderTooltip = (trigger, content) => {
+    return h(NTooltip, null, {
+      trigger: () => trigger,
+      default: () => content,
+    });
+  };
+
+  const getPageColumns = computed(() => {
+    const pageColumns = unref(getColumnsRef);
+    const columns = cloneDeep(pageColumns);
+    return columns
+      .filter((column) => {
+        return hasPermission(column.auth as string[]) && isIfShow(column);
+      })
+      .map((column) => {
+        //默认 ellipsis 为true
+        column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
+        const { edit } = column;
+        if (edit) {
+          column.render = renderEditCell(column);
+          if (edit) {
+            const title: any = column.title;
+            column.title = () => {
+              return renderTooltip(
+                h('span', {}, [
+                  h('span', { style: { 'margin-right': '5px' } }, title),
+                  h(
+                    NIcon,
+                    {
+                      size: 14,
+                    },
+                    {
+                      default: () => h(FormOutlined),
+                    }
+                  ),
+                ]),
+                '该列可编辑'
+              );
+            };
+          }
+        }
+        return column;
+      });
+  });
+
+  watch(
+    () => unref(propsRef).columns,
+    (columns) => {
+      columnsRef.value = columns;
+      cacheColumns = columns;
+    }
+  );
+
+  function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: BasicColumn[]) {
+    const { actionColumn } = unref(propsRef);
+    if (!actionColumn) return;
+    if (!columns.find((col) => col.key === 'action')) {
+      if ((actionColumn as any).fixed && (actionColumn as any).fixed === 'left') {
+        columns.unshift({
+          ...(actionColumn as any),
+        });
+      } else {
+        columns.push({
+          ...(actionColumn as any),
+        });
+      }
+    }
+  }
+
+  //设置
+  function setColumns(columnList: string[]) {
+    const columns: any[] = cloneDeep(columnList);
+    if (!isArray(columns)) return;
+
+    if (!columns.length) {
+      columnsRef.value = [];
+      return;
+    }
+    const cacheKeys = cacheColumns.map((item) => item.key);
+    //针对拖拽排序
+    if (!isString(columns[0])) {
+      columnsRef.value = columns;
+    } else {
+      const newColumns: any[] = [];
+      cacheColumns.forEach((item) => {
+        if (columnList.includes(item.key)) {
+          newColumns.push({ ...item });
+        }
+      });
+      if (!isEqual(cacheKeys, columns)) {
+        newColumns.sort((prev, next) => {
+          return cacheKeys.indexOf(prev.key) - cacheKeys.indexOf(next.key);
+        });
+      }
+      columnsRef.value = newColumns;
+    }
+  }
+
+  //获取
+  function getColumns(): BasicColumn[] {
+    const columns = toRaw(unref(getColumnsRef));
+    return columns.map((item) => {
+      return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined };
+    });
+  }
+
+  //获取原始
+  function getCacheColumns(isKey?: boolean): any[] {
+    return isKey ? cacheColumns.map((item) => item.key) : cacheColumns;
+  }
+
+  //更新原始数据单个字段
+  function setCacheColumnsField(key: string | undefined, value: Partial<BasicColumn>) {
+    if (!key || !value) {
+      return;
+    }
+    cacheColumns.forEach((item) => {
+      if (item.key === key) {
+        Object.assign(item, value);
+        return;
+      }
+    });
+  }
+
+  return {
+    getColumnsRef,
+    getCacheColumns,
+    setCacheColumnsField,
+    setColumns,
+    getColumns,
+    getPageColumns,
+  };
+}
diff --git a/web/src/components/Table/src/hooks/useDataSource.ts b/web/src/components/Table/src/hooks/useDataSource.ts
new file mode 100644
index 0000000..79e46cf
--- /dev/null
+++ b/web/src/components/Table/src/hooks/useDataSource.ts
@@ -0,0 +1,179 @@
+import { ref, ComputedRef, unref, computed, onMounted, watchEffect, watch } from 'vue';
+import type { BasicTableProps } from '../types/table';
+import type { PaginationProps } from '../types/pagination';
+import { isBoolean, isFunction } from '@/utils/is';
+import { APISETTING } from '../const';
+
+export function useDataSource(
+  propsRef: ComputedRef<BasicTableProps>,
+  { getPaginationInfo, setPagination, setLoading, tableData },
+  emit
+) {
+  const dataSourceRef = ref<Recordable[]>([]);
+
+  watchEffect(() => {
+    tableData.value = unref(dataSourceRef);
+  });
+
+  watch(
+    () => unref(propsRef).dataSource,
+    () => {
+      const { dataSource }: any = unref(propsRef);
+      dataSource && (dataSourceRef.value = dataSource);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  const getRowKey = computed(() => {
+    const { rowKey }: any = unref(propsRef);
+    return rowKey
+      ? rowKey
+      : () => {
+          return 'key';
+        };
+  });
+
+  const getDataSourceRef = computed(() => {
+    const dataSource = unref(dataSourceRef);
+    if (!dataSource || dataSource.length === 0) {
+      return unref(dataSourceRef);
+    }
+    return unref(dataSourceRef);
+  });
+
+  async function fetch(opt?) {
+    try {
+      setLoading(true);
+      const { request, pagination, beforeRequest, afterRequest }: any = unref(propsRef);
+      if (!request) return;
+      //组装分页信息
+      const pageField = APISETTING.pageField;
+      const sizeField = APISETTING.sizeField;
+      const totalField = APISETTING.totalField;
+      const listField = APISETTING.listField;
+      const itemCountField = APISETTING.itemCountField;
+
+      let pageParams = {};
+      const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;
+
+      if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
+        pageParams = {};
+      } else {
+        pageParams[pageField] = (opt && opt[pageField]) || page;
+        pageParams[sizeField] = pageSize;
+      }
+
+      let params = {
+        ...pageParams,
+      };
+      if (beforeRequest && isFunction(beforeRequest)) {
+        // The params parameter can be modified by outsiders
+        params = (await beforeRequest(params)) || params;
+      }
+      const res = await request(params);
+
+      const resultTotal = res[totalField] || 0;
+      const currentPage = res[pageField];
+      const itemCount = res[itemCountField] || 0;
+
+      // 如果数据异常，需获取正确的页码再次执行
+      if (resultTotal) {
+        if (page > resultTotal) {
+          setPagination({
+            [pageField]: resultTotal,
+          });
+          fetch(opt);
+        }
+      }
+      let resultInfo = res[listField] ? res[listField] : [];
+      if (afterRequest && isFunction(afterRequest)) {
+        // can modify the data returned by the interface for processing
+        resultInfo = (await afterRequest(resultInfo)) || resultInfo;
+      }
+
+      // 表数据加载
+      setTimeout(function () {
+        const once = 20;
+        if (resultInfo.length < once) {
+          // once = resultInfo.length;
+          // 直接加载
+          dataSourceRef.value = resultInfo;
+        } else {
+          // 分次加载
+          dataSourceRef.value = [];
+          insert(resultInfo, once, resultInfo.length, 0);
+        }
+      }, 0);
+
+      setPagination({
+        [pageField]: currentPage,
+        [totalField]: resultTotal,
+        prefix: () => {
+          return `共 ${itemCount} 条`;
+        },
+      });
+      if (opt && opt[pageField]) {
+        setPagination({
+          [pageField]: opt[pageField] || 1,
+        });
+      }
+      emit('fetch-success', {
+        items: unref(resultInfo),
+        resultTotal,
+      });
+    } catch (error) {
+      console.error(error);
+      emit('fetch-error', error);
+      dataSourceRef.value = [];
+      // setPagination({
+      //   pageCount: 0,
+      // });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      fetch();
+    }, 16);
+  });
+
+  function insert(resultInfo, once, curTotal, curIndex) {
+    if (curTotal <= 0) {
+      return;
+    }
+    if (once > curTotal) {
+      once = curTotal;
+    }
+    window.requestAnimationFrame(() => {
+      for (let i = 0; i < once; i++) {
+        dataSourceRef.value.push(resultInfo[curIndex + i]);
+      }
+      insert(resultInfo, once, curTotal - once, curIndex + once);
+    });
+  }
+
+  function setTableData(values) {
+    dataSourceRef.value = values;
+  }
+
+  function getDataSource(): any[] {
+    return getDataSourceRef.value;
+  }
+
+  async function reload(opt?) {
+    await fetch(opt);
+  }
+
+  return {
+    fetch,
+    getRowKey,
+    getDataSourceRef,
+    getDataSource,
+    setTableData,
+    reload,
+  };
+}
diff --git a/web/src/components/Table/src/hooks/useLoading.ts b/web/src/components/Table/src/hooks/useLoading.ts
new file mode 100644
index 0000000..0a670b0
--- /dev/null
+++ b/web/src/components/Table/src/hooks/useLoading.ts
@@ -0,0 +1,21 @@
+import { ref, ComputedRef, unref, computed, watch } from 'vue';
+import type { BasicTableProps } from '../types/table';
+
+export function useLoading(props: ComputedRef<BasicTableProps>) {
+  const loadingRef = ref(unref(props).loading);
+
+  watch(
+    () => unref(props).loading,
+    (loading) => {
+      loadingRef.value = loading;
+    }
+  );
+
+  const getLoading = computed(() => unref(loadingRef));
+
+  function setLoading(loading: boolean) {
+    loadingRef.value = loading;
+  }
+
+  return { getLoading, setLoading };
+}
diff --git a/web/src/components/Table/src/hooks/usePagination.ts b/web/src/components/Table/src/hooks/usePagination.ts
new file mode 100644
index 0000000..cf37b98
--- /dev/null
+++ b/web/src/components/Table/src/hooks/usePagination.ts
@@ -0,0 +1,50 @@
+import type { PaginationProps } from '../types/pagination';
+import type { BasicTableProps } from '../types/table';
+import { computed, unref, ref, ComputedRef } from 'vue';
+
+import { isBoolean } from '@/utils/is';
+import { APISETTING, DEFAULTPAGESIZE, PAGESIZES } from '../const';
+
+export function usePagination(refProps: ComputedRef<BasicTableProps>) {
+  const configRef = ref<PaginationProps>({});
+  const show = ref(true);
+
+  const getPaginationInfo = computed((): PaginationProps | boolean => {
+    const { pagination } = unref(refProps);
+    if (!unref(show) || (isBoolean(pagination) && !pagination)) {
+      return false;
+    }
+    const { totalField } = APISETTING;
+    return {
+      pageSize: DEFAULTPAGESIZE,
+      pageSizes: PAGESIZES,
+      showSizePicker: true,
+      showQuickJumper: true,
+      ...(isBoolean(pagination) ? {} : pagination),
+      ...unref(configRef),
+      pageCount: unref(configRef)[totalField],
+    };
+  });
+
+  function setPagination(info: Partial<PaginationProps>) {
+    const paginationInfo = unref(getPaginationInfo);
+    configRef.value = {
+      ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
+      ...info,
+    };
+  }
+
+  function getPagination() {
+    return unref(getPaginationInfo);
+  }
+
+  function getShowPagination() {
+    return unref(show);
+  }
+
+  async function setShowPagination(flag: boolean) {
+    show.value = flag;
+  }
+
+  return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination };
+}
diff --git a/web/src/components/Table/src/hooks/useTableContext.ts b/web/src/components/Table/src/hooks/useTableContext.ts
new file mode 100644
index 0000000..e975ac3
--- /dev/null
+++ b/web/src/components/Table/src/hooks/useTableContext.ts
@@ -0,0 +1,22 @@
+import type { Ref } from 'vue';
+import type { BasicTableProps, TableActionType } from '../types/table';
+import { provide, inject, ComputedRef } from 'vue';
+
+const key = Symbol('s-table');
+
+type Instance = TableActionType & {
+  wrapRef: Ref<Nullable<HTMLElement>>;
+  getBindValues: ComputedRef<Recordable>;
+};
+
+type RetInstance = Omit<Instance, 'getBindValues'> & {
+  getBindValues: ComputedRef<BasicTableProps>;
+};
+
+export function createTableContext(instance: Instance) {
+  provide(key, instance);
+}
+
+export function useTableContext(): RetInstance {
+  return inject(key) as RetInstance;
+}
diff --git a/web/src/components/Table/src/props.ts b/web/src/components/Table/src/props.ts
new file mode 100644
index 0000000..87a2026
--- /dev/null
+++ b/web/src/components/Table/src/props.ts
@@ -0,0 +1,67 @@
+import type { PropType } from 'vue';
+import { propTypes } from '@/utils/propTypes';
+import { BasicColumn } from './types/table';
+import { NDataTable } from 'naive-ui';
+export const basicProps = {
+  ...NDataTable.props, // 这里继承原 UI 组件的 props
+  title: {
+    type: String,
+    default: null,
+  },
+  titleTooltip: {
+    type: String,
+    default: null,
+  },
+  showTopRight: {
+    type: Boolean,
+    default: true,
+  },
+  openChecked: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  dataSource: {
+    type: [Object],
+    default: () => [],
+  },
+  columns: {
+    type: [Array] as PropType<BasicColumn[]>,
+    default: () => [],
+    required: true,
+  },
+  beforeRequest: {
+    type: Function as PropType<(...arg: any[]) => void | Promise<any>>,
+    default: null,
+  },
+  request: {
+    type: Function as PropType<(...arg: any[]) => Promise<any>>,
+    default: null,
+  },
+  afterRequest: {
+    type: Function as PropType<(...arg: any[]) => void | Promise<any>>,
+    default: null,
+  },
+  rowKey: {
+    type: [String, Function] as PropType<string | ((record) => string)>,
+    default: undefined,
+  },
+  pagination: {
+    type: [Object, Boolean],
+    default: () => {},
+  },
+  //废弃
+  showPagination: {
+    type: [String, Boolean],
+    default: 'auto',
+  },
+  actionColumn: {
+    type: Object as PropType<BasicColumn>,
+    default: null,
+  },
+  canResize: propTypes.bool.def(true),
+  resizeHeightOffset: propTypes.number.def(0),
+};
diff --git a/web/src/components/Table/src/types/componentType.ts b/web/src/components/Table/src/types/componentType.ts
new file mode 100644
index 0000000..e926748
--- /dev/null
+++ b/web/src/components/Table/src/types/componentType.ts
@@ -0,0 +1,8 @@
+export type ComponentType =
+  | 'NInput'
+  | 'NInputNumber'
+  | 'NSelect'
+  | 'NCheckbox'
+  | 'NSwitch'
+  | 'NDatePicker'
+  | 'NTimePicker';
diff --git a/web/src/components/Table/src/types/pagination.ts b/web/src/components/Table/src/types/pagination.ts
new file mode 100644
index 0000000..e4ab053
--- /dev/null
+++ b/web/src/components/Table/src/types/pagination.ts
@@ -0,0 +1,8 @@
+export interface PaginationProps {
+  page?: number;
+  pageCount?: number;
+  pageSize?: number;
+  pageSizes?: number[];
+  showSizePicker?: boolean;
+  showQuickJumper?: boolean;
+}
diff --git a/web/src/components/Table/src/types/table.ts b/web/src/components/Table/src/types/table.ts
new file mode 100644
index 0000000..edbb48f
--- /dev/null
+++ b/web/src/components/Table/src/types/table.ts
@@ -0,0 +1,38 @@
+import type { TableBaseColumn } from 'naive-ui/lib/data-table/src/interface';
+import { ComponentType } from './componentType';
+export interface BasicColumn extends TableBaseColumn {
+  //编辑表格
+  edit?: boolean;
+  editRow?: boolean;
+  editable?: boolean;
+  editComponent?: ComponentType;
+  editComponentProps?: Recordable;
+  editRule?: boolean | ((text: string, record: Recordable) => Promise<string>);
+  editValueMap?: (value: any) => string;
+  onEditRow?: () => void;
+  // 权限编码控制是否显示
+  auth?: string[];
+  // 业务控制是否显示
+  ifShow?: boolean | ((column: BasicColumn) => boolean);
+  // 控制是否支持拖拽，默认支持
+  draggable?: boolean;
+}
+
+export interface TableActionType {
+  reload: (opt) => Promise<void>;
+  emit?: any;
+  getColumns: (opt?) => BasicColumn[];
+  setColumns: (columns: BasicColumn[] | string[]) => void;
+}
+
+export interface BasicTableProps {
+  title?: string;
+  dataSource: Function;
+  columns: any[];
+  pagination: object;
+  showPagination: boolean;
+  actionColumn: any[];
+  canResize: boolean;
+  resizeHeightOffset: number;
+  loading: boolean;
+}
diff --git a/web/src/components/Table/src/types/tableAction.ts b/web/src/components/Table/src/types/tableAction.ts
new file mode 100644
index 0000000..27d483f
--- /dev/null
+++ b/web/src/components/Table/src/types/tableAction.ts
@@ -0,0 +1,27 @@
+import { NButton } from 'naive-ui';
+import type { Component } from 'vue';
+import { PermissionsEnum } from '@/enums/permissionsEnum';
+export interface ActionItem extends Partial<InstanceType<typeof NButton>> {
+  onClick?: Fn;
+  label?: string;
+  type?: 'success' | 'error' | 'warning' | 'info' | 'primary' | 'default';
+  // 设定 color 后会覆盖 type 的样式
+  color?: string;
+  icon?: Component;
+  popConfirm?: PopConfirm;
+  disabled?: boolean;
+  divider?: boolean;
+  // 权限编码控制是否显示
+  auth?: PermissionsEnum | PermissionsEnum[] | string | string[];
+  // 业务控制是否显示
+  ifShow?: boolean | ((action: ActionItem) => boolean);
+}
+
+export interface PopConfirm {
+  title: string;
+  okText?: string;
+  cancelText?: string;
+  confirm: Fn;
+  cancel?: Fn;
+  icon?: Component;
+}
diff --git a/web/src/components/Upload/index.ts b/web/src/components/Upload/index.ts
new file mode 100644
index 0000000..10a2c43
--- /dev/null
+++ b/web/src/components/Upload/index.ts
@@ -0,0 +1 @@
+export { default as BasicUpload } from './src/BasicUpload.vue';
diff --git a/web/src/components/Upload/multipartUpload.vue b/web/src/components/Upload/multipartUpload.vue
new file mode 100644
index 0000000..3937b6f
--- /dev/null
+++ b/web/src/components/Upload/multipartUpload.vue
@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      :on-after-leave="handleRemove"
+      :style="{
+        width: width,
+      }"
+      title="上传大文件"
+    >
+      <n-upload
+        directory-dnd
+        :custom-request="handleUpload"
+        :on-remove="handleRemove"
+        name="file"
+        :disabled="uploadStatus != 0 && uploadStatus != 3"
+      >
+        <n-upload-dragger>
+          <div style="margin-bottom: 12px">
+            <n-icon size="48" :depth="3">
+              <FileAddOutlined />
+            </n-icon>
+          </div>
+          <template v-if="uploadStatus == 0 || uploadStatus == 3">
+            <n-text style="font-size: 16px">点击或者拖动{{ typeTag }}到该区域来上传</n-text>
+            <n-p depth="3" style="margin: 8px 0 0 0">支持大文件分片上传，支持断点续传</n-p>
+          </template>
+          <template v-else-if="uploadStatus == 1">
+            <span style="font-weight: 600">解析中，请稍候...</span>
+          </template>
+          <template v-else-if="uploadStatus == 2">
+            <span style="font-weight: 600">正在上传({{ progress }}%)...</span>
+            <n-p depth="3" style="margin: 8px 0 0 0">文件大小：{{ sizeFormat }}</n-p>
+          </template>
+        </n-upload-dragger>
+      </n-upload>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { NModal, UploadCustomRequestOptions, useMessage, useDialog } from 'naive-ui';
+  import { FileAddOutlined } from '@vicons/antd';
+  import SparkMD5 from 'spark-md5';
+  import { Attachment, FileType, getFileType } from '@/components/FileChooser/src/model';
+  import { CheckMultipart, UploadPart } from '@/api/base';
+  import type { UploadFileParams } from '@/utils/http/axios/types';
+
+  export interface Props {
+    width?: string;
+    uploadType?: FileType;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    width: '60%',
+    uploadType: 'default',
+  });
+
+  const emit = defineEmits(['onFinish']);
+  const message = useMessage();
+  const dialog = useDialog();
+  const showModal = ref(false);
+  const chunkSize = 2 * 1024 * 1024; // 每个分片大小限制，默认2M
+  const uploadStatus = ref(0); // 上传状态 0等待上传 1解析中 2上传中 3已取消
+  const progress = ref(0);
+  const sizeFormat = ref('0B');
+  const typeTag = computed(() => {
+    return getFileType(props.uploadType);
+  });
+
+  // 取消上传
+  function handleRemove() {
+    if (uploadStatus.value == 1 || uploadStatus.value == 2) {
+      uploadStatus.value = 3;
+      dialog.info({
+        title: '提示',
+        content: '已取消大文件上传，已上传的文件不会自动删除，重新操作可进行断点续传',
+        positiveText: '确定',
+      });
+    }
+  }
+
+  // 开始上传
+  function handleUpload(options: UploadCustomRequestOptions) {
+    uploadStatus.value = 1;
+
+    // 初始化上传进度
+    updateProgress(options, 0);
+
+    const file = options.file.file as File;
+    const fileReader = new FileReader();
+    fileReader.readAsArrayBuffer(file);
+    fileReader.onload = async (e) => {
+      const spark = new SparkMD5.ArrayBuffer();
+      spark.append(e.target.result);
+      let md5 = spark.end();
+      let start = 0;
+      let end = 0;
+      let index = 0;
+      let shards: any[] = [];
+      while (end < file.size) {
+        start = index * chunkSize;
+        end = (index + 1) * chunkSize;
+
+        const params: UploadFileParams = {
+          uploadType: props.uploadType,
+          md5: md5,
+          index: index + 1,
+          fileName: file.name,
+          file: file.slice(start, end),
+        };
+
+        const shard = { index: index + 1, params: params };
+        shards.push(shard);
+        index++;
+      }
+
+      uploadStatus.value = 2;
+
+      const params = {
+        uploadType: props.uploadType,
+        fileName: file.name,
+        size: file.size,
+        md5: md5,
+        shardCount: shards.length,
+      };
+
+      CheckMultipart(params)
+        .then(async (res) => {
+          // 已存在
+          if (!res.waitUploadIndex || res.waitUploadIndex.length == 0) {
+            onFinish(options, res.attachment);
+            return;
+          }
+
+          // 断点续传，过滤掉已上传成功的分片文件
+          shards = shards.filter((shard) => res.waitUploadIndex.includes(shard.index));
+          if (shards.length == 0) {
+            onFinish(options, res.attachment);
+            return;
+          }
+
+          // 导入断点续传进度
+          updateProgress(options, res.progress);
+          sizeFormat.value = res.sizeFormat;
+
+          for (const item of shards) {
+            if (uploadStatus.value == 3) {
+              break;
+            }
+            item.params.uploadId = res.uploadId;
+            await handleUploadPart(options, item);
+          }
+        })
+        .catch(() => {
+          uploadStatus.value = 0;
+          options.onError();
+        });
+    };
+  }
+
+  // 上传分片文件
+  async function handleUploadPart(options: UploadCustomRequestOptions, item) {
+    const res = await UploadPart(item.params);
+    updateProgress(options, res.progress);
+    if (res.finish) {
+      onFinish(options, res.attachment);
+    }
+  }
+
+  // 更新上传进度
+  function updateProgress(options: UploadCustomRequestOptions, value: number) {
+    options.onProgress({ percent: value });
+    progress.value = value;
+  }
+
+  // 上传成功后的回调
+  function onFinish(options: UploadCustomRequestOptions, result: Attachment) {
+    options.onFinish();
+    message.success('上传成功');
+    uploadStatus.value = 0;
+    emit('onFinish', result, true);
+  }
+
+  function openModal() {
+    showModal.value = true;
+    uploadStatus.value = 0;
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
diff --git a/web/src/components/Upload/src/BasicUpload.vue b/web/src/components/Upload/src/BasicUpload.vue
new file mode 100644
index 0000000..2936ad5
--- /dev/null
+++ b/web/src/components/Upload/src/BasicUpload.vue
@@ -0,0 +1,412 @@
+<template>
+  <div>
+    <div class="w-full">
+      <div class="upload">
+        <div class="upload-card">
+          <!--图片列表-->
+          <div
+            class="upload-card-item"
+            :style="getCSSProperties"
+            v-for="(item, index) in imgList"
+            :key="`img_${index}`"
+          >
+            <div class="upload-card-item-info">
+              <div class="img-box">
+                <template v-if="fileType === 'image'">
+                  <img :src="item" @error="errorImg($event)" />
+                </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="preview(item)">
+                    <EyeOutlined />
+                  </n-icon>
+                </template>
+                <template v-else>
+                  <n-icon size="18" class="mx-2 action-icon" @click="download(item)">
+                    <CloudDownloadOutlined />
+                  </n-icon>
+                </template>
+                <n-icon size="18" class="mx-2 action-icon" @click="remove(index)">
+                  <DeleteOutlined />
+                </n-icon>
+              </div>
+            </div>
+          </div>
+
+          <!--上传图片-->
+          <div
+            class="upload-card-item upload-card-item-select-picture"
+            :style="getCSSProperties"
+            v-if="imgList.length < maxNumber"
+          >
+            <n-upload
+              v-bind="$props"
+              :file-list-style="{ display: 'none' }"
+              @before-upload="beforeUpload"
+              @finish="finish"
+            >
+              <div class="flex flex-col justify-center">
+                <n-icon size="18" class="m-auto">
+                  <PlusOutlined />
+                </n-icon>
+                <span class="upload-title">{{ uploadTitle }}</span>
+              </div>
+            </n-upload>
+          </div>
+        </div>
+      </div>
+
+      <!--上传图片-->
+      <n-space>
+        <n-alert title="提示" type="info" v-if="helpText" class="flex w-full">
+          {{ helpText }}
+        </n-alert>
+      </n-space>
+    </div>
+
+    <Preview ref="previewRef" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, toRefs, reactive, computed, watch, onMounted, ref } from 'vue';
+  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';
+  import { isArray, isJsonString, isNullOrUnDef, isUrl } from '@/utils/is';
+  import { getFileExt } from '@/utils/urlUtils';
+  import { errorImg } from '@/utils/hotgo';
+  const globSetting = useGlobSetting();
+
+  export default defineComponent({
+    name: 'BasicUpload',
+
+    components: { EyeOutlined, DeleteOutlined, PlusOutlined, CloudDownloadOutlined },
+    props: {
+      ...basicProps,
+    },
+    emits: ['uploadChange', 'delete'],
+    setup(props, { emit }) {
+      const getCSSProperties = computed(() => {
+        return {
+          width: `${props.width}px`,
+          height: `${props.height}px`,
+        };
+      });
+
+      const previewRef = ref();
+      const message = useMessage();
+      const dialog = useDialog();
+      const uploadTitle = ref(props.fileType === 'image' ? '上传图片' : '上传附件');
+      const maxNumber = computed(() => {
+        return props.maxNumber;
+      });
+      const fileAvatarCSS = computed(() => {
+        return {
+          '--n-merged-size': `var(--n-avatar-size-override, ${props.width * 0.8}px)`,
+          '--n-font-size': `18px`,
+        };
+      });
+
+      const state = reactive({
+        showModal: false,
+        previewUrl: '',
+        originalImgList: [] as string[],
+        imgList: [] as string[],
+      });
+
+      //赋值默认图片显示
+      watch(
+        () => props.value,
+        () => {
+          loadValue(props.value);
+          return;
+        },
+        {
+          immediate: true,
+          deep: true,
+        }
+      );
+
+      watch(
+        () => props.values,
+        () => {
+          loadValue(props.values);
+          return;
+        },
+        {
+          immediate: true,
+          deep: true,
+        }
+      );
+
+      // 加载默认
+      function loadValue(value: any) {
+        if (value === undefined || value === null) {
+          return;
+        }
+
+        let data: string[] = [];
+        if (isJsonString(value)) {
+          value = JSON.parse(value);
+        }
+
+        // 单图模式
+        if (typeof value === 'string') {
+          if (value !== '') {
+            data.push(value);
+          }
+        } else {
+          // 多图模式
+          data = value;
+        }
+
+        if (!isArray(data) || data.length === 0) {
+          return;
+        }
+
+        state.imgList = data.map((item) => {
+          return getImgUrl(item);
+        });
+        state.originalImgList = state.imgList;
+      }
+
+      //预览
+      function preview(url: string) {
+        previewRef.value.openPreview(url);
+      }
+
+      //下载
+      function download(url: string) {
+        window.open(url);
+      }
+
+      //删除
+      function remove(index: number) {
+        dialog.info({
+          title: '提示',
+          content: '你确定要删除吗？',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            state.imgList.splice(index, 1);
+            state.originalImgList.splice(index, 1);
+            if (props.maxNumber === 1) {
+              emit('uploadChange', '');
+            } else {
+              emit('uploadChange', state.originalImgList);
+            }
+            emit('delete', state.originalImgList);
+          },
+          onNegativeClick: () => {},
+        });
+      }
+
+      //组装完整图片地址
+      function getImgUrl(url: string): string {
+        const { imgUrl } = globSetting;
+        return isUrl(url) ? url : `${imgUrl}${url}`;
+      }
+
+      function checkFileType(map: string[], fileType: string) {
+        if (isNullOrUnDef(map)) {
+          return true;
+        }
+        return map.includes(fileType);
+      }
+
+      //上传之前
+      function beforeUpload({ file }) {
+        const fileInfo = file.file;
+        // 设置最大值，则判断
+        if (props.maxSize && fileInfo.size / 1024 / 1024 >= props.maxSize) {
+          message.error(`上传文件最大值不能超过${props.maxSize}M`);
+          return false;
+        }
+
+        // 设置类型,则判断
+        const fileType =
+          props.fileType === 'image'
+            ? componentSetting.upload.imageType
+            : componentSetting.upload.fileType;
+        if (!checkFileType(fileType, fileInfo.type)) {
+          console.log('checkFileType fileInfo.type:' + fileInfo.type);
+          message.error(`只能上传文件类型为${fileType.join(',')}`);
+          return false;
+        }
+
+        return true;
+      }
+
+      //上传结束
+      function finish({ event: Event }) {
+        const res = JSON.parse(Event.target.response);
+        const infoField = componentSetting.upload.apiSetting.infoField;
+        const imgField = componentSetting.upload.apiSetting.imgField;
+        const { code } = res;
+        const msg = res.msg || res.message || '上传失败';
+        const result = res[infoField];
+        //成功
+        if (code === ResultEnum.SUCCESS) {
+          let imgUrl: string = getImgUrl(result[imgField]);
+          state.imgList.push(imgUrl);
+          state.originalImgList = state.imgList;
+          if (props.maxNumber === 1) {
+            emit('uploadChange', imgUrl);
+          } else {
+            emit('uploadChange', state.originalImgList);
+          }
+        } else {
+          message.error(msg);
+        }
+      }
+
+      onMounted(async () => {
+        setTimeout(function () {
+          if (props.maxNumber === 1) {
+            loadValue(props.value);
+          } else {
+            loadValue(props.values);
+          }
+        }, 50);
+      });
+      return {
+        errorImg,
+        ...toRefs(state),
+        finish,
+        preview,
+        download,
+        remove,
+        beforeUpload,
+        getCSSProperties,
+        uploadTitle,
+        fileAvatarCSS,
+        getFileExt,
+        Preview,
+        previewRef,
+        maxNumber,
+      };
+    },
+  });
+</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>
diff --git a/web/src/components/Upload/src/props.ts b/web/src/components/Upload/src/props.ts
new file mode 100644
index 0000000..ba14647
--- /dev/null
+++ b/web/src/components/Upload/src/props.ts
@@ -0,0 +1,42 @@
+import type { PropType } from 'vue';
+import { NUpload } from 'naive-ui';
+
+export const basicProps = {
+  ...NUpload.props,
+  fileType: {
+    type: String,
+    default: 'image',
+  },
+  accept: {
+    type: String,
+    default: '.jpg,.png,.jpeg,.svg,.gif,.webp',
+  },
+  helpText: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  maxSize: {
+    type: Number as PropType<number>,
+    default: 2,
+  },
+  maxNumber: {
+    type: Number as PropType<number>,
+    default: Infinity,
+  },
+  value: {
+    type: String as PropType<string>,
+    default: () => '',
+  },
+  values: {
+    type: (Array as PropType<string[]>) || (Object as PropType<object>),
+    default: () => [],
+  },
+  width: {
+    type: Number as PropType<number>,
+    default: 104,
+  },
+  height: {
+    type: Number as PropType<number>,
+    default: 104, //建议不小于这个尺寸 太小页面可能显示有异常
+  },
+};
diff --git a/web/src/components/Upload/src/type/index.ts b/web/src/components/Upload/src/type/index.ts
new file mode 100644
index 0000000..b2ea97f
--- /dev/null
+++ b/web/src/components/Upload/src/type/index.ts
@@ -0,0 +1,7 @@
+export interface BasicProps {
+  title?: string;
+  dataSource: Function;
+  columns: any[];
+  pagination: object;
+  showPagination: boolean;
+}
diff --git a/web/src/components/Upload/uploadFile.vue b/web/src/components/Upload/uploadFile.vue
new file mode 100644
index 0000000..a20ff2f
--- /dev/null
+++ b/web/src/components/Upload/uploadFile.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <BasicUpload
+      :action="`${uploadUrl}${urlPrefix}/upload/file`"
+      :headers="uploadHeaders"
+      :data="{ type: 0 }"
+      accept="*"
+      name="file"
+      :width="100"
+      :height="100"
+      fileType="file"
+      :maxNumber="maxNumber"
+      :helpText="helpText"
+      @uploadChange="uploadChange"
+      v-model:value="image"
+      v-model:values="images"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, unref, reactive, watch } from 'vue';
+  import { BasicUpload } from '@/components/Upload';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useUserStoreWidthOut } from '@/store/modules/user';
+
+  export interface Props {
+    value: string | string[] | null;
+    maxNumber: number;
+    helpText?: string;
+  }
+
+  const globSetting = useGlobSetting();
+  const urlPrefix = globSetting.urlPrefix || '';
+  const { uploadUrl } = globSetting;
+  const useUserStore = useUserStoreWidthOut();
+  const uploadHeaders = reactive({
+    Authorization: useUserStore.token,
+    uploadType: 'default',
+  });
+  const emit = defineEmits(['update:value']);
+  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
+  const image = ref<string>('');
+  const images = ref<string[] | object>([]);
+
+  function uploadChange(list: string | string[]) {
+    if (props.maxNumber === 1) {
+      image.value = unref(list as string);
+      emit('update:value', image.value);
+    } else {
+      images.value = unref(list as string[]);
+      emit('update:value', images.value);
+    }
+  }
+
+  function loadImage() {
+    if (props.maxNumber === 1) {
+      image.value = props.value as string;
+    } else {
+      images.value = props.value as string[];
+    }
+  }
+
+  watch(
+    () => props.value,
+    () => {
+      loadImage();
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+
+  onMounted(async () => {
+    loadImage();
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/components/Upload/uploadImage.vue b/web/src/components/Upload/uploadImage.vue
new file mode 100644
index 0000000..0279e9c
--- /dev/null
+++ b/web/src/components/Upload/uploadImage.vue
@@ -0,0 +1,76 @@
+<template>
+  <BasicUpload
+    :action="`${uploadUrl}${urlPrefix}/upload/file`"
+    :headers="uploadHeaders"
+    :data="{ type: 0 }"
+    name="file"
+    :width="100"
+    :height="100"
+    :maxNumber="maxNumber"
+    :helpText="helpText"
+    @uploadChange="uploadChange"
+    v-model:value="image"
+    v-model:values="images"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, reactive, ref, unref, watch } from 'vue';
+  import { BasicUpload } from '@/components/Upload';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useUserStoreWidthOut } from '@/store/modules/user';
+
+  export interface Props {
+    value: string | string[] | null;
+    maxNumber: number;
+    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;
+  const useUserStore = useUserStoreWidthOut();
+  const uploadHeaders = reactive({
+    Authorization: useUserStore.token,
+    uploadType: 'image',
+  });
+
+  function uploadChange(list: string | string[]) {
+    if (props.maxNumber === 1) {
+      image.value = unref(list as string);
+      emit('update:value', image.value);
+    } else {
+      images.value = unref(list as string[]);
+      emit('update:value', images.value);
+    }
+  }
+
+  function loadImage() {
+    if (props.maxNumber === 1) {
+      image.value = props.value as string;
+    } else {
+      images.value = props.value as string[];
+    }
+  }
+
+  watch(
+    () => props.value,
+    () => {
+      loadImage();
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+
+  onMounted(async () => {
+    loadImage();
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/components/YamlEditor/index.vue b/web/src/components/YamlEditor/index.vue
new file mode 100644
index 0000000..9075f62
--- /dev/null
+++ b/web/src/components/YamlEditor/index.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="yaml-editor-container">
+    <div
+      ref="editorRef"
+      class="yaml-editor"
+      :class="{ 'error-state': hasError }"
+    />
+    <div v-if="errorMessage" class="error-message">
+      <n-alert type="error" closable @close="clearError">
+        {{ errorMessage }}
+      </n-alert>
+    </div>
+    <div v-if="showStats" class="editor-stats">
+      <n-space size="small">
+        <n-tag size="small" type="info">
+          行数: {{ lineCount }}
+        </n-tag>
+        <n-tag size="small" type="success" v-if="!hasError">
+          ✓ 语法正确
+        </n-tag>
+        <n-tag size="small" type="error" v-if="hasError">
+          ✗ 语法错误
+        </n-tag>
+      </n-space>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, onBeforeUnmount, watch, nextTick, computed } from 'vue';
+  import { NAlert, NSpace, NTag, useMessage } from 'naive-ui';
+  import { EditorView, basicSetup } from 'codemirror';
+  import { EditorState } from '@codemirror/state';
+  import { yaml } from '@codemirror/lang-yaml';
+  import { oneDark } from '@codemirror/theme-one-dark';
+  import * as yamlParser from 'js-yaml';
+
+  export interface Props {
+    value?: string;
+    placeholder?: string;
+    height?: string | number;
+    disabled?: boolean;
+    readonly?: boolean;
+    darkTheme?: boolean;
+    showStats?: boolean;
+    validateOnChange?: boolean;
+    validateOnBlur?: boolean;
+    preventInvalidSubmit?: boolean;
+  }
+
+  const emit = defineEmits(['update:value', 'blur', 'focus', 'error', 'valid', 'change', 'validation-change']);
+  const message = useMessage();
+
+  const props = withDefaults(defineProps<Props>(), {
+    value: '',
+    placeholder: '# YAML 配置示例\n# 支持注释\nkey: value\nlist:\n  - item1\n  - item2\nconfig:\n  enabled: true\n  timeout: 30',
+    height: 300,
+    disabled: false,
+    readonly: false,
+    darkTheme: false,
+    showStats: true,
+    validateOnChange: false,
+    validateOnBlur: true,
+    preventInvalidSubmit: true,
+  });
+
+  const editorRef = ref<HTMLElement>();
+  const editorView = ref<EditorView>();
+  const errorMessage = ref('');
+  const hasError = ref(false);
+  const currentValue = ref(props.value || '');
+
+  // 计算属性
+  const lineCount = computed(() => {
+    return currentValue.value.split('\n').length;
+  });
+
+  const isValid = computed(() => {
+    return !hasError.value || !currentValue.value.trim();
+  });
+
+  // 监听外部value变化
+  watch(
+    () => props.value,
+    (newValue) => {
+      if (newValue !== currentValue.value && editorView.value) {
+        currentValue.value = newValue || '';
+        editorView.value.dispatch({
+          changes: {
+            from: 0,
+            to: editorView.value.state.doc.length,
+            insert: newValue || ''
+          }
+        });
+        clearError();
+      }
+    },
+    { immediate: false }
+  );
+
+  // 验证YAML格式
+  function validateYaml(content: string): boolean {
+    if (!content.trim()) {
+      clearError();
+      return true;
+    }
+
+    try {
+      yamlParser.load(content);
+      clearError();
+      return true;
+    } catch (error: any) {
+      const errorMsg = `YAML语法错误: ${error.message}`;
+      errorMessage.value = errorMsg;
+      hasError.value = true;
+      emit('error', { message: errorMsg, error });
+      return false;
+    }
+  }
+
+  function clearError() {
+    errorMessage.value = '';
+    hasError.value = false;
+  }
+
+  // 内容变化处理
+  function onContentChange(content: string) {
+    currentValue.value = content;
+    
+    // 验证 YAML 格式
+    const valid = validateYaml(content);
+    
+    // 总是更新外部值
+    emit('update:value', content);
+    emit('change', content);
+    
+    // 发出验证状态变化事件
+    emit('validation-change', valid);
+    
+    if (props.validateOnChange && valid) {
+      emit('valid', content);
+    }
+  }
+
+  // 强制添加选中样式
+  function addSelectionStyles() {
+    const styleId = 'yaml-editor-selection-styles';
+    let existingStyle = document.getElementById(styleId);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+    
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .yaml-editor .cm-selectionBackground {
+        background-color: rgba(64, 152, 252, 0.4) !important;
+      }
+      .yaml-editor .cm-focused .cm-selectionBackground {
+        background-color: rgba(64, 152, 252, 0.5) !important;
+      }
+      .yaml-editor .cm-selectionLayer .cm-selectionBackground {
+        background-color: rgba(64, 152, 252, 0.4) !important;
+      }
+      .yaml-editor .cm-content ::selection {
+        background-color: rgba(64, 152, 252, 0.4) !important;
+      }
+      .yaml-editor .cm-line::selection {
+        background-color: rgba(64, 152, 252, 0.4) !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  // 创建编辑器
+  function createEditor() {
+    if (!editorRef.value) return;
+    
+    // 强制添加选中样式
+    addSelectionStyles();
+
+    const extensions = [
+      basicSetup,
+      yaml(),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          const content = update.state.doc.toString();
+          onContentChange(content);
+        }
+        
+        if (update.focusChanged) {
+          if (update.view.hasFocus) {
+            emit('focus');
+          } else {
+            emit('blur');
+            if (props.validateOnBlur) {
+              const content = update.state.doc.toString();
+              const isValid = validateYaml(content);
+              if (isValid) {
+                emit('valid', content);
+              }
+            }
+          }
+        }
+      }),
+      EditorView.theme({
+        '&': {
+          fontSize: '14px',
+          border: '1px solid #d9d9d9',
+          borderRadius: '6px',
+        },
+        '&.cm-focused': {
+          outline: 'none',
+          borderColor: '#4098fc',
+          boxShadow: '0 0 0 2px rgba(64, 152, 252, 0.2)',
+        },
+        '.cm-content': {
+          padding: '12px',
+          minHeight: typeof props.height === 'number' ? `${props.height}px` : props.height,
+          fontFamily: '"SF Mono", Monaco, Inconsolata, "Roboto Mono", Consolas, "Courier New", monospace',
+          lineHeight: '1.6',
+        },
+        '.cm-focused .cm-cursor': {
+          borderColor: '#4098fc',
+        },
+        '&.error-state': {
+          borderColor: '#ff4757',
+        },
+        '&.error-state.cm-focused': {
+          borderColor: '#ff4757',
+          boxShadow: '0 0 0 2px rgba(255, 71, 87, 0.2)',
+        }
+      }),
+      EditorState.readOnly.of(props.readonly),
+    ];
+
+    // 添加暗色主题支持
+    if (props.darkTheme) {
+      extensions.push(oneDark);
+    }
+
+    const initialState = EditorState.create({
+      doc: currentValue.value || props.placeholder,
+      extensions,
+    });
+
+    editorView.value = new EditorView({
+      state: initialState,
+      parent: editorRef.value,
+    });
+
+    // 如果是占位符，选中所有文本
+    if (!currentValue.value && props.placeholder) {
+      nextTick(() => {
+        if (editorView.value) {
+          editorView.value.dispatch({
+            selection: { anchor: 0, head: editorView.value.state.doc.length }
+          });
+        }
+      });
+    }
+  }
+
+  // 提供外部调用的验证方法
+  function validate(): boolean {
+    return validateYaml(currentValue.value);
+  }
+
+  // 提供外部调用的获取解析后的数据方法
+  function getParsedData(): any {
+    try {
+      return yamlParser.load(currentValue.value);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  // 提供外部调用的设置数据方法
+  function setData(data: any) {
+    try {
+      const yamlString = yamlParser.dump(data, {
+        indent: 2,
+        lineWidth: -1,
+        noRefs: true,
+        sortKeys: false,
+        quotingType: '"',
+        forceQuotes: false,
+      });
+      
+      if (editorView.value) {
+        editorView.value.dispatch({
+          changes: {
+            from: 0,
+            to: editorView.value.state.doc.length,
+            insert: yamlString
+          }
+        });
+      }
+      currentValue.value = yamlString;
+      emit('update:value', yamlString);
+      clearError();
+    } catch (error: any) {
+      const errorMsg = `数据转换YAML失败: ${error.message}`;
+      errorMessage.value = errorMsg;
+      hasError.value = true;
+      emit('error', { message: errorMsg, error });
+    }
+  }
+
+  // 获取当前值
+  function getValue(): string {
+    return currentValue.value;
+  }
+
+  // 设置焦点
+  function focus() {
+    editorView.value?.focus();
+  }
+
+  // 插入文本
+  function insertText(text: string) {
+    if (editorView.value) {
+      const selection = editorView.value.state.selection.main;
+      editorView.value.dispatch({
+        changes: {
+          from: selection.from,
+          to: selection.to,
+          insert: text
+        }
+      });
+    }
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      createEditor();
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (editorView.value) {
+      editorView.value.destroy();
+    }
+    
+    // 清理动态样式
+    const existingStyle = document.getElementById('yaml-editor-selection-styles');
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+  });
+
+  // 暴露方法给父组件
+  defineExpose({
+    validate,
+    getParsedData,
+    setData,
+    getValue,
+    focus,
+    insertText,
+    clearError,
+    hasError: () => hasError.value,
+    isValid: () => isValid.value,
+  });
+</script>
+
+<style lang="less" scoped>
+  .yaml-editor-container {
+    width: 100%;
+    
+    .yaml-editor {
+      border-radius: 6px;
+      transition: all 0.2s;
+      
+      &.error-state {
+        border-color: #ff4757;
+      }
+      
+      :deep(.cm-editor) {
+        outline: none;
+      }
+      
+      :deep(.cm-content) {
+        background: #fafafa;
+      }
+      
+      :deep(.cm-line) {
+        line-height: 1.6;
+      }
+      
+      // YAML 语法高亮样式增强
+      :deep(.cm-comment) {
+        color: #8e8e93;
+        font-style: italic;
+      }
+      
+      :deep(.cm-string) {
+        color: #0c7d9d;
+      }
+      
+      :deep(.cm-number) {
+        color: #1c00cf;
+      }
+      
+      :deep(.cm-keyword) {
+        color: #ad3da4;
+        font-weight: 600;
+      }
+      
+      :deep(.cm-property) {
+        color: #3f6ec7;
+        font-weight: 500;
+      }
+    }
+    
+    .error-message {
+      margin-top: 8px;
+    }
+    
+    .editor-stats {
+      margin-top: 8px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  // 暗色主题支持
+  .dark {
+    .yaml-editor-container {
+      .yaml-editor {
+        :deep(.cm-content) {
+          background: #1f1f1f;
+          color: #d4d4d4;
+        }
+        
+        :deep(.cm-selectionBackground) {
+          background-color: rgba(64, 152, 252, 0.6) !important;
+        }
+        
+        :deep(.cm-focused .cm-selectionBackground) {
+          background-color: rgba(64, 152, 252, 0.7) !important;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/web/src/debug/account.ts b/web/src/debug/account.ts
new file mode 100644
index 0000000..df545ee
--- /dev/null
+++ b/web/src/debug/account.ts
@@ -0,0 +1,43 @@
+import { isArray } from "@/utils/is";
+
+interface Account {
+  /**
+   * 账号名称
+   */
+  name: string;
+  /**
+   * 用户名
+   */
+  username: string;
+  /**
+   * 密码
+   */
+  password: string;
+}
+/**
+ * 获取配置的账号信息
+ * @returns {[]Account} 返回账号信息数组
+ */
+export function getDemoAccounts() {
+  
+  let envConf = import.meta.env.VITE_APP_DEMO_ACCOUNT || "";
+  // 帐号密码一样
+  // [["username"],["username","password"],["username","password","name"]]
+  try {
+    let accounts = JSON.parse(envConf);
+    if (accounts && isArray(accounts)) {
+      return accounts.map((item: String[]) => {
+        let [username = "", password = "", name = ""] = item;
+        username = username;
+        password = password || username;
+        name = name || username;
+        return {
+          name,
+          username,
+          password,
+        } as Account;
+      });
+    }
+  } catch (error) {}
+  return [] as Account[];
+}
diff --git a/web/src/directives/clickOutside.ts b/web/src/directives/clickOutside.ts
new file mode 100644
index 0000000..2758a9d
--- /dev/null
+++ b/web/src/directives/clickOutside.ts
@@ -0,0 +1,86 @@
+import { on } from '@/utils/domUtils';
+import { isServer } from '@/utils/is';
+import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue';
+
+type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void;
+
+type FlushList = Map<
+  HTMLElement,
+  {
+    documentHandler: DocumentHandler;
+    bindingFn: (...args: unknown[]) => unknown;
+  }
+>;
+
+const nodeList: FlushList = new Map();
+
+let startClick: MouseEvent;
+
+if (!isServer) {
+  on(document, 'mousedown', (e: MouseEvent) => (startClick = e));
+  on(document, 'mouseup', (e: MouseEvent) => {
+    for (const { documentHandler } of nodeList.values()) {
+      documentHandler(e, startClick);
+    }
+  });
+}
+
+function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): DocumentHandler {
+  let excludes: HTMLElement[] = [];
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg;
+  } else {
+    // due to current implementation on binding type is wrong the type casting is necessary here
+    excludes.push(binding.arg as unknown as HTMLElement);
+  }
+  return function (mouseup, mousedown) {
+    const popperRef = (
+      binding.instance as ComponentPublicInstance<{
+        popperRef: Nullable<HTMLElement>;
+      }>
+    ).popperRef;
+    const mouseUpTarget = mouseup.target as Node;
+    const mouseDownTarget = mousedown.target as Node;
+    const isBound = !binding || !binding.instance;
+    const isTargetExists = !mouseUpTarget || !mouseDownTarget;
+    const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
+    const isSelf = el === mouseUpTarget;
+
+    const isTargetExcluded =
+      (excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) ||
+      (excludes.length && excludes.includes(mouseDownTarget as HTMLElement));
+    const isContainedByPopper =
+      popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
+    if (
+      isBound ||
+      isTargetExists ||
+      isContainedByEl ||
+      isSelf ||
+      isTargetExcluded ||
+      isContainedByPopper
+    ) {
+      return;
+    }
+    binding.value();
+  };
+}
+
+const ClickOutside: ObjectDirective = {
+  beforeMount(el, binding) {
+    nodeList.set(el, {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+  updated(el, binding) {
+    nodeList.set(el, {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+  unmounted(el) {
+    nodeList.delete(el);
+  },
+};
+
+export default ClickOutside;
diff --git a/web/src/directives/copy.ts b/web/src/directives/copy.ts
new file mode 100644
index 0000000..d5f0b9f
--- /dev/null
+++ b/web/src/directives/copy.ts
@@ -0,0 +1,33 @@
+/**
+ * v-copy
+ * 复制某个值至剪贴板
+ * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
+ */
+import type { Directive, DirectiveBinding } from 'vue';
+interface ElType extends HTMLElement {
+  copyData: string | number;
+  __handleClick__: any;
+}
+const copy: Directive = {
+  mounted(el: ElType, binding: DirectiveBinding) {
+    el.copyData = binding.value;
+    el.addEventListener('click', handleClick);
+  },
+  updated(el: ElType, binding: DirectiveBinding) {
+    el.copyData = binding.value;
+  },
+  beforeUnmount(el: ElType) {
+    el.removeEventListener('click', el.__handleClick__);
+  },
+};
+function handleClick(this: any) {
+  const input = document.createElement('input');
+  input.value = this.copyData.toLocaleString();
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand('Copy');
+  document.body.removeChild(input);
+  console.log('复制成功', this.copyData);
+}
+
+export default copy;
diff --git a/web/src/directives/debounce.ts b/web/src/directives/debounce.ts
new file mode 100644
index 0000000..a1889c7
--- /dev/null
+++ b/web/src/directives/debounce.ts
@@ -0,0 +1,31 @@
+/**
+ * v-debounce
+ * 按钮防抖指令，可自行扩展至input
+ * 接收参数：function类型
+ */
+import type { Directive, DirectiveBinding } from 'vue';
+interface ElType extends HTMLElement {
+  __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__);
+  },
+};
+
+export default debounce;
diff --git a/web/src/directives/draggable.ts b/web/src/directives/draggable.ts
new file mode 100644
index 0000000..1c05c76
--- /dev/null
+++ b/web/src/directives/draggable.ts
@@ -0,0 +1,49 @@
+/*
+	需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
+
+	思路：
+		1、设置需要拖拽的元素为absolute，其父元素为relative。
+		2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
+		3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
+		4、鼠标松开(onmouseup)时完成一次拖拽
+
+	使用：在 Dom 上加上 v-draggable 即可
+	<div class="dialog-model" v-draggable></div>
+*/
+import type { Directive } from 'vue';
+interface ElType extends HTMLElement {
+  parentNode: any;
+}
+const draggable: Directive = {
+  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;
+      };
+    };
+  },
+};
+export default draggable;
diff --git a/web/src/directives/permission.ts b/web/src/directives/permission.ts
new file mode 100644
index 0000000..d41c46a
--- /dev/null
+++ b/web/src/directives/permission.ts
@@ -0,0 +1,19 @@
+import { ObjectDirective } from 'vue';
+import { usePermission } from '@/hooks/web/usePermission';
+
+export const permission: ObjectDirective = {
+  mounted(el: HTMLButtonElement, binding) {
+    if (binding.value == undefined) return;
+    const { action, effect } = binding.value;
+    const { hasPermission } = usePermission();
+    if (!hasPermission(action)) {
+      if (effect == 'disabled') {
+        el.disabled = true;
+        el.style['disabled'] = 'disabled';
+        el.classList.add('n-button--disabled');
+      } else {
+        el.remove();
+      }
+    }
+  },
+};
diff --git a/web/src/directives/throttle.ts b/web/src/directives/throttle.ts
new file mode 100644
index 0000000..d407f8e
--- /dev/null
+++ b/web/src/directives/throttle.ts
@@ -0,0 +1,41 @@
+/*
+  需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。
+
+  思路：
+    1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮
+    2、将需要触发的方法绑定在指令上
+  
+  使用：给 Dom 加上 v-throttle 及回调函数即可
+  <button v-throttle="debounceClick">节流提交</button>
+*/
+import type { Directive, DirectiveBinding } from 'vue';
+interface ElType extends HTMLElement {
+  __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__);
+  },
+};
+
+export default throttle;
diff --git a/web/src/enums/apiEnum.ts b/web/src/enums/apiEnum.ts
new file mode 100644
index 0000000..13aa3a9
--- /dev/null
+++ b/web/src/enums/apiEnum.ts
@@ -0,0 +1,18 @@
+export enum ApiEnum {
+  // api前缀
+  Prefix = '/api',
+
+  // 基础
+  SiteRegister = '/site/register', // 账号注册
+  SiteAccountLogin = '/site/accountLogin', // 账号登录
+  SiteMobileLogin = '/site/mobileLogin', // 手机号登录
+  SiteLoginConfig = '/site/loginConfig', // 登录配置
+  SiteLogout = '/site/logout', // 注销
+  SiteConfig = '/site/config', // 配置信息
+
+  // 用户
+  MemberInfo = '/member/info', // 登录用户信息
+
+  // 角色
+  RoleDynamic = '/role/dynamic', // 动态路由
+}
diff --git a/web/src/enums/breakpointEnum.ts b/web/src/enums/breakpointEnum.ts
new file mode 100644
index 0000000..93acc1a
--- /dev/null
+++ b/web/src/enums/breakpointEnum.ts
@@ -0,0 +1,28 @@
+export enum sizeEnum {
+  XS = 'XS',
+  SM = 'SM',
+  MD = 'MD',
+  LG = 'LG',
+  XL = 'XL',
+  XXL = 'XXL',
+}
+
+export enum screenEnum {
+  XS = 480,
+  SM = 576,
+  MD = 768,
+  LG = 992,
+  XL = 1200,
+  XXL = 1600,
+}
+
+const screenMap = new Map<sizeEnum, number>();
+
+screenMap.set(sizeEnum.XS, screenEnum.XS);
+screenMap.set(sizeEnum.SM, screenEnum.SM);
+screenMap.set(sizeEnum.MD, screenEnum.MD);
+screenMap.set(sizeEnum.LG, screenEnum.LG);
+screenMap.set(sizeEnum.XL, screenEnum.XL);
+screenMap.set(sizeEnum.XXL, screenEnum.XXL);
+
+export { screenMap };
diff --git a/web/src/enums/cacheEnum.ts b/web/src/enums/cacheEnum.ts
new file mode 100644
index 0000000..db4d1d0
--- /dev/null
+++ b/web/src/enums/cacheEnum.ts
@@ -0,0 +1,20 @@
+// token key
+export const TOKEN_KEY = 'TOKEN';
+
+// member info key
+export const USER_INFO_KEY = 'USER__INFO__';
+
+// role info key
+export const ROLES_KEY = 'ROLES__KEY__';
+
+// project config key
+export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__';
+
+// lock info
+export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__';
+
+// base global local key
+export const BASE_LOCAL_CACHE_KEY = 'LOCAL__CACHE__KEY__';
+
+// base global session key
+export const BASE_SESSION_CACHE_KEY = 'SESSION__CACHE__KEY__';
diff --git a/web/src/enums/deptEnum.ts b/web/src/enums/deptEnum.ts
new file mode 100644
index 0000000..9beb4c7
--- /dev/null
+++ b/web/src/enums/deptEnum.ts
@@ -0,0 +1,14 @@
+// 部门类型
+export enum DeptTypeEnum {
+  // 公司
+  Company = 'company',
+
+  // 租户
+  Tenant = 'tenant',
+
+  // 商户
+  Merchant = 'merchant',
+
+  // 用户
+  User = 'user',
+}
diff --git a/web/src/enums/httpEnum.ts b/web/src/enums/httpEnum.ts
new file mode 100644
index 0000000..891c2be
--- /dev/null
+++ b/web/src/enums/httpEnum.ts
@@ -0,0 +1,34 @@
+/**
+ * @description: 请求结果集
+ */
+export enum ResultEnum {
+  SUCCESS = 0,
+  ERROR = -1,
+  TIMEOUT = 61,
+  TYPE = 'success',
+}
+
+/**
+ * @description: 请求方法
+ */
+export enum RequestEnum {
+  GET = 'GET',
+  POST = 'POST',
+  PATCH = 'PATCH',
+  PUT = 'PUT',
+  DELETE = 'DELETE',
+}
+
+/**
+ * @description:  常用的contentTyp类型
+ */
+export enum ContentTypeEnum {
+  // json
+  JSON = 'application/json;charset=UTF-8',
+  // json
+  TEXT = 'text/plain;charset=UTF-8',
+  // form-data 一般配合qs
+  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+  // form-data  上传
+  FORM_DATA = 'multipart/form-data;charset=UTF-8',
+}
diff --git a/web/src/enums/localDictEnum.ts b/web/src/enums/localDictEnum.ts
new file mode 100644
index 0000000..681be7e
--- /dev/null
+++ b/web/src/enums/localDictEnum.ts
@@ -0,0 +1,124 @@
+// 本地字典
+// 一些不需要放在服务端注册的字典，也可以在这里进行注册
+
+import { DictOptions, Option } from '@/store/modules/dict';
+
+export const noticeTypeOptions: Option[] = [
+  {
+    key: 1,
+    value: 1,
+    label: '通知',
+    listClass: 'warning',
+    extra: null,
+  },
+  {
+    key: 2,
+    value: 2,
+    label: '公告',
+    listClass: 'error',
+    extra: null,
+  },
+  {
+    key: 3,
+    value: 3,
+    label: '私信',
+    listClass: 'info',
+    extra: null,
+  },
+];
+
+export const noticeTagOptions: Option[] = [
+  {
+    value: 0,
+    label: '无标签',
+    key: 0,
+    listClass: 'default',
+    extra: null,
+  },
+  {
+    value: 1,
+    label: '一般',
+    key: 1,
+    listClass: 'info',
+    extra: null,
+  },
+  {
+    value: 2,
+    label: '紧急',
+    key: 2,
+    listClass: 'error',
+    extra: null,
+  },
+  {
+    value: 3,
+    label: '重要',
+    key: 3,
+    listClass: 'warning',
+    extra: null,
+  },
+  {
+    value: 4,
+    label: '提醒',
+    key: 4,
+    listClass: 'success',
+    extra: null,
+  },
+  {
+    value: 5,
+    label: '次要',
+    key: 5,
+    listClass: 'default',
+    extra: null,
+  },
+];
+
+export const tagTypeOptions: Option[] = [
+  {
+    value: 'success',
+    label: '绿色',
+    key: 'success',
+    listClass: 'success',
+    extra: null,
+  },
+  {
+    value: 'warning',
+    label: '橙色',
+    key: 'warning',
+    listClass: 'warning',
+    extra: null,
+  },
+  {
+    value: 'error',
+    label: '红色',
+    key: 'error',
+    listClass: 'error',
+    extra: null,
+  },
+  {
+    value: 'info',
+    label: '蓝色',
+    key: 'info',
+    listClass: 'info',
+    extra: null,
+  },
+  {
+    value: 'default',
+    label: '灰色',
+    key: 'default',
+    listClass: 'default',
+    extra: null,
+  },
+  {
+    value: 'primary',
+    label: '主题色',
+    key: 'primary',
+    listClass: 'primary',
+    extra: null,
+  },
+];
+
+export const localDict: DictOptions = {
+  noticeTypeOptions: noticeTypeOptions, // 消息通知类型
+  noticeTagOptions: noticeTagOptions, // 消息标签类型
+  tagTypeOptions: tagTypeOptions, // 标签类型选项
+};
diff --git a/web/src/enums/optionsiEnum.ts b/web/src/enums/optionsiEnum.ts
new file mode 100644
index 0000000..e2d89be
--- /dev/null
+++ b/web/src/enums/optionsiEnum.ts
@@ -0,0 +1,22 @@
+export const statusOptions = [
+  {
+    value: 1,
+    label: '正常',
+  },
+  {
+    value: 2,
+    label: '停用',
+  },
+];
+
+// 操作类
+export const statusActions = [
+  {
+    label: '设为启用',
+    key: 1,
+  },
+  {
+    label: '设为禁用',
+    key: 2,
+  },
+];
diff --git a/web/src/enums/pageEnum.ts b/web/src/enums/pageEnum.ts
new file mode 100644
index 0000000..d08ada9
--- /dev/null
+++ b/web/src/enums/pageEnum.ts
@@ -0,0 +1,14 @@
+export enum PageEnum {
+  // 登录
+  BASE_LOGIN = '/login',
+  BASE_LOGIN_NAME = 'Login',
+  //重定向
+  REDIRECT = '/redirect',
+  REDIRECT_NAME = 'Redirect',
+  // 首页
+  BASE_HOME = '/dashboard',
+  //首页跳转默认路由
+  BASE_HOME_REDIRECT = '/dashboard/console',
+  // 错误
+  ERROR_PAGE_NAME = 'ErrorPage',
+}
diff --git a/web/src/enums/permissionsEnum.ts b/web/src/enums/permissionsEnum.ts
new file mode 100644
index 0000000..bf3f53a
--- /dev/null
+++ b/web/src/enums/permissionsEnum.ts
@@ -0,0 +1,4 @@
+export interface PermissionsEnum {
+  value: string;
+  label: string;
+}
diff --git a/web/src/enums/socketEnum.ts b/web/src/enums/socketEnum.ts
new file mode 100644
index 0000000..d3baddc
--- /dev/null
+++ b/web/src/enums/socketEnum.ts
@@ -0,0 +1,12 @@
+export enum SocketEnum {
+  EventPing = 'ping',
+  EventKick = 'kick',
+  EventNotice = 'notice',
+  EventConnected = 'connected',
+  EventAdminMonitorTrends = 'admin/monitor/trends',
+  EventAdminMonitorRunInfo = 'admin/monitor/runInfo',
+  EventAdminOrderNotify = 'admin/order/notify',
+  HeartBeatInterval = 1000,
+  CodeSuc = 0,
+  CodeErr = -1,
+}
diff --git a/web/src/enums/systemMessageEnum.ts b/web/src/enums/systemMessageEnum.ts
new file mode 100644
index 0000000..221e88c
--- /dev/null
+++ b/web/src/enums/systemMessageEnum.ts
@@ -0,0 +1,179 @@
+import { NAvatar, NTag, NText, SelectRenderLabel, SelectRenderTag } from 'naive-ui';
+import { Component, h } from 'vue';
+import { BellOutlined, NotificationOutlined, SendOutlined } from '@vicons/antd';
+import { useDictStore } from '@/store/modules/dict';
+
+export interface personOption {
+  value: number;
+  label: string;
+  username: string;
+  avatar: string;
+}
+
+export const renderMultipleSelectTag: SelectRenderTag = ({ option, handleClose }) => {
+  // @ts-ignore
+  return h(
+    NTag,
+    {
+      style: {
+        padding: '0 6px 0 4px',
+      },
+      round: true,
+      closable: true,
+      onClose: (e) => {
+        e.stopPropagation();
+        handleClose();
+      },
+    },
+    {
+      default: () =>
+        h(
+          'div',
+          {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+            },
+          },
+          [
+            option.avatar !== ''
+              ? h(NAvatar, {
+                  src: option.avatar as string,
+                  round: true,
+                  size: 22,
+                  style: {
+                    marginRight: '4px',
+                  },
+                })
+              : h(
+                  NAvatar,
+                  {
+                    round: true,
+                    size: 22,
+                    style: {
+                      marginRight: '4px',
+                    },
+                  },
+                  {
+                    default: () =>
+                      option.label !== ''
+                        ? ((option?.label as string).substring(0, 1) as string)
+                        : ((option?.username as string).substring(0, 1) as string),
+                  }
+                ),
+            option.label as string,
+          ]
+        ),
+    }
+  );
+};
+
+export const renderLabel: SelectRenderLabel = (option) => {
+  return h(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    [
+      option.avatar !== ''
+        ? h(NAvatar, {
+            src: option.avatar as string,
+            round: true,
+            size: 'small',
+          })
+        : h(
+            NAvatar,
+            {
+              round: true,
+              size: 'small',
+            },
+            {
+              default: () =>
+                option.label !== ''
+                  ? ((option?.label as string).substring(0, 1) as string)
+                  : ((option?.username as string).substring(0, 2) as string),
+            }
+          ),
+      h(
+        'div',
+        {
+          style: {
+            marginLeft: '12px',
+            padding: '4px 0',
+          },
+        },
+        [
+          h('div', null, [option.label as string]),
+          h(
+            NText,
+            { depth: 3, tag: 'div' },
+            {
+              default: () => option.username,
+            }
+          ),
+        ]
+      ),
+    ]
+  );
+};
+
+export interface MessageTab {
+  /** tab的key */
+  key: number;
+  /** tab名称 */
+  name: string;
+  /** badge类型 */
+  badgeProps?: import('naive-ui').BadgeProps;
+  /** 消息数据 */
+  list: MessageRow[];
+}
+
+export interface MessageRow {
+  /** 消息ID */
+  id: number;
+  /** 消息类型 */
+  type: number;
+  /** 消息标题 */
+  title: string;
+  /** 消息内容 */
+  content: string;
+  /** 发送时间 */
+  createdAt: string;
+  /** 是否已读 */
+  isRead: boolean;
+  /** 发送者头像 */
+  senderAvatar: string;
+  /** 标签ID */
+  tag: number;
+  /** 标签名称 */
+  tagTitle?: string;
+  /** 标签props */
+  tagProps?: import('naive-ui').TagProps;
+}
+
+// 获取消息的展示图标
+export function getIcon(row: MessageRow): Component {
+  if (row.type === 1) {
+    return NotificationOutlined;
+  }
+  if (row.type === 2) {
+    return BellOutlined;
+  }
+  return SendOutlined;
+}
+
+// 解析消息
+export function parseMessage(row): MessageRow {
+  row = row as MessageRow;
+  if (row.tag <= 0) {
+    return row;
+  }
+  const dict = useDictStore();
+  const label = dict.getLabel('noticeTagOptions', row.tag);
+  row.tagTitle = label;
+  row.tagProps = { type: label };
+  return row;
+}
diff --git a/web/src/hooks/common/index.ts b/web/src/hooks/common/index.ts
new file mode 100644
index 0000000..438ede1
--- /dev/null
+++ b/web/src/hooks/common/index.ts
@@ -0,0 +1,8 @@
+import useContext from './useContext';
+import useBoolean from './useBoolean';
+import useLoading from './useLoading';
+import useLoadingEmpty from './useLoadingEmpty';
+import useSendCode from './useSendCode';
+import useSorter from './useSorter';
+
+export { useContext, useBoolean, useLoading, useLoadingEmpty, useSendCode, useSorter };
diff --git a/web/src/hooks/common/useBoolean.ts b/web/src/hooks/common/useBoolean.ts
new file mode 100644
index 0000000..645d471
--- /dev/null
+++ b/web/src/hooks/common/useBoolean.ts
@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+
+export default function useBoolean(initValue = false) {
+  const bool = ref(initValue);
+
+  function setBool(value: boolean) {
+    bool.value = value;
+  }
+  function setTrue() {
+    setBool(true);
+  }
+  function setFalse() {
+    setBool(false);
+  }
+  function toggle() {
+    setBool(!bool.value);
+  }
+
+  return {
+    bool,
+    setBool,
+    setTrue,
+    setFalse,
+    toggle,
+  };
+}
diff --git a/web/src/hooks/common/useContext.ts b/web/src/hooks/common/useContext.ts
new file mode 100644
index 0000000..cc826b9
--- /dev/null
+++ b/web/src/hooks/common/useContext.ts
@@ -0,0 +1,20 @@
+import { inject, provide } from 'vue';
+import type { InjectionKey } from 'vue';
+
+export default function useContext<T>(contextName = 'context') {
+  const injectKey: InjectionKey<T> = Symbol(contextName);
+
+  function useProvide(context: T) {
+    provide(injectKey, context);
+    return context;
+  }
+
+  function useInject() {
+    return inject(injectKey) as T;
+  }
+
+  return {
+    useProvide,
+    useInject,
+  };
+}
diff --git a/web/src/hooks/common/useCountDown.ts b/web/src/hooks/common/useCountDown.ts
new file mode 100644
index 0000000..6a58845
--- /dev/null
+++ b/web/src/hooks/common/useCountDown.ts
@@ -0,0 +1,54 @@
+import { computed, onScopeDispose, ref } from 'vue';
+import useBoolean from './useBoolean';
+
+/**
+ * 倒计时
+ * @param second - 倒计时的时间(s)
+ */
+export default function useCountDown(second: number) {
+  if (second <= 0 && second % 1 !== 0) {
+    throw new Error('倒计时的时间应该为一个正整数！');
+  }
+  const { bool: isComplete, setTrue, setFalse } = useBoolean(false);
+
+  const counts = ref(0);
+  const isCounting = computed(() => Boolean(counts.value));
+
+  let intervalId: any;
+
+  /**
+   * 开始计时
+   * @param updateSecond - 更改初时传入的倒计时时间
+   */
+  function start(updateSecond: number = second) {
+    if (!counts.value) {
+      setFalse();
+      counts.value = updateSecond;
+      intervalId = setInterval(() => {
+        counts.value -= 1;
+        if (counts.value <= 0) {
+          clearInterval(intervalId);
+          setTrue();
+        }
+      }, 1000);
+    }
+  }
+
+  /**
+   * 停止计时
+   */
+  function stop() {
+    intervalId = clearInterval(intervalId);
+    counts.value = 0;
+  }
+
+  onScopeDispose(stop);
+
+  return {
+    counts,
+    isCounting,
+    start,
+    stop,
+    isComplete,
+  };
+}
diff --git a/web/src/hooks/common/useLoading.ts b/web/src/hooks/common/useLoading.ts
new file mode 100644
index 0000000..86c2242
--- /dev/null
+++ b/web/src/hooks/common/useLoading.ts
@@ -0,0 +1,11 @@
+import useBoolean from './useBoolean';
+
+export default function useLoading(initValue = false) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue);
+
+  return {
+    loading,
+    startLoading,
+    endLoading,
+  };
+}
diff --git a/web/src/hooks/common/useLoadingEmpty.ts b/web/src/hooks/common/useLoadingEmpty.ts
new file mode 100644
index 0000000..1397fad
--- /dev/null
+++ b/web/src/hooks/common/useLoadingEmpty.ts
@@ -0,0 +1,14 @@
+import useBoolean from './useBoolean';
+
+export default function useLoadingEmpty(initLoading = false, initEmpty = false) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initLoading);
+  const { bool: empty, setBool: setEmpty } = useBoolean(initEmpty);
+
+  return {
+    loading,
+    startLoading,
+    endLoading,
+    empty,
+    setEmpty,
+  };
+}
diff --git a/web/src/hooks/common/useSendCode.ts b/web/src/hooks/common/useSendCode.ts
new file mode 100644
index 0000000..2314f0e
--- /dev/null
+++ b/web/src/hooks/common/useSendCode.ts
@@ -0,0 +1,43 @@
+import { computed } from 'vue';
+import useLoading from './useLoading';
+import useCountDown from './useCountDown';
+
+export default function useSmsCode() {
+  const { loading, startLoading, endLoading } = useLoading();
+  const { counts, start, isCounting } = useCountDown(60);
+  const initLabel = '获取验证码';
+  const countingLabel = (second: number) => `重新获取(${second})`;
+  const sendLabel = computed(() => {
+    let text = initLabel;
+    if (loading.value) {
+      text = '';
+    }
+    if (isCounting.value) {
+      text = countingLabel(counts.value);
+    }
+    return text;
+  });
+
+  /**
+   * 激活发送
+   */
+  function activateSend(request: Promise<any>) {
+    startLoading();
+    request
+      .then((_res) => {
+        window['$message']?.success('验证码发送成功！');
+        start();
+      })
+      .finally(() => {
+        endLoading();
+      });
+  }
+
+  return {
+    sendLabel,
+    start,
+    isCounting,
+    activateSend,
+    loading,
+  };
+}
diff --git a/web/src/hooks/common/useSorter.ts b/web/src/hooks/common/useSorter.ts
new file mode 100644
index 0000000..6cdd733
--- /dev/null
+++ b/web/src/hooks/common/useSorter.ts
@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+import { DataTableSortState } from 'naive-ui';
+import { SorterMultiple } from 'naive-ui/es/data-table/src/interface';
+
+export default function useSorter(callback: Function = function () {}) {
+  const sortStatesRef = ref<DataTableSortState[]>([]);
+
+  function updateSorter(sorter: DataTableSortState | DataTableSortState[] | null) {
+    if (sorter === null) {
+      // 默认排序
+      sortStatesRef.value = [];
+    } else if (Array.isArray(sorter)) {
+      // 多字段排序
+      sortStatesRef.value = filterMultipleSorters(sorter);
+    } else {
+      // 单字段排序
+      sortStatesRef.value = [];
+      sortStatesRef.value.push(sorter);
+    }
+    callback();
+  }
+
+  // 多字段排序，将不参与排序的字段过滤掉，再根据设置的优先级对排序器重新排列
+  function filterMultipleSorters(sorters: DataTableSortState[]): DataTableSortState[] {
+    const filter = sorters.filter((item) => item.order !== false);
+    return filter.sort((a, b) => {
+      if (typeof a.sorter === 'object' && typeof b.sorter === 'object') {
+        const aSorter = a.sorter as SorterMultiple;
+        const bSorter = b.sorter as SorterMultiple;
+        return bSorter.multiple - aSorter.multiple;
+      }
+      return 0;
+    });
+  }
+
+  return {
+    updateSorter,
+    sortStatesRef,
+  };
+}
diff --git a/web/src/hooks/core/useTimeout.ts b/web/src/hooks/core/useTimeout.ts
new file mode 100644
index 0000000..dc352c9
--- /dev/null
+++ b/web/src/hooks/core/useTimeout.ts
@@ -0,0 +1,47 @@
+import { ref, watch } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
+import { isFunction } from '@/utils/is';
+
+export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
+  if (!isFunction(handle)) {
+    throw new Error('handle is not Function!');
+  }
+
+  const { readyRef, stop, start } = useTimeoutRef(wait);
+  if (native) {
+    handle();
+  } else {
+    watch(
+      readyRef,
+      (maturity) => {
+        maturity && handle();
+      },
+      { immediate: false }
+    );
+  }
+  return { readyRef, stop, start };
+}
+
+export function useTimeoutRef(wait: number) {
+  const readyRef = ref(false);
+
+  let timer: TimeoutHandle;
+
+  function stop(): void {
+    readyRef.value = false;
+    timer && window.clearTimeout(timer);
+  }
+
+  function start(): void {
+    stop();
+    timer = setTimeout(() => {
+      readyRef.value = true;
+    }, wait);
+  }
+
+  start();
+
+  tryOnUnmounted(stop);
+
+  return { readyRef, stop, start };
+}
diff --git a/web/src/hooks/event/useBreakpoint.ts b/web/src/hooks/event/useBreakpoint.ts
new file mode 100644
index 0000000..4b2d29c
--- /dev/null
+++ b/web/src/hooks/event/useBreakpoint.ts
@@ -0,0 +1,89 @@
+import { ref, computed, ComputedRef, unref } from 'vue';
+import { useEventListener } from '@/hooks/event/useEventListener';
+import { screenMap, sizeEnum, screenEnum } from '@/enums/breakpointEnum';
+
+let globalScreenRef: ComputedRef<sizeEnum | undefined>;
+let globalWidthRef: ComputedRef<number>;
+let globalRealWidthRef: ComputedRef<number>;
+
+export interface CreateCallbackParams {
+  screen: ComputedRef<sizeEnum | undefined>;
+  width: ComputedRef<number>;
+  realWidth: ComputedRef<number>;
+  screenEnum: typeof screenEnum;
+  screenMap: Map<sizeEnum, number>;
+  sizeEnum: typeof sizeEnum;
+}
+
+export function useBreakpoint() {
+  return {
+    screenRef: computed(() => unref(globalScreenRef)),
+    widthRef: globalWidthRef,
+    screenEnum,
+    realWidthRef: globalRealWidthRef,
+  };
+}
+
+// Just call it once
+export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void) {
+  const screenRef = ref<sizeEnum>(sizeEnum.XL);
+  const realWidthRef = ref(window.innerWidth);
+
+  function getWindowWidth() {
+    const width = document.body.clientWidth;
+    const xs = screenMap.get(sizeEnum.XS)!;
+    const sm = screenMap.get(sizeEnum.SM)!;
+    const md = screenMap.get(sizeEnum.MD)!;
+    const lg = screenMap.get(sizeEnum.LG)!;
+    const xl = screenMap.get(sizeEnum.XL)!;
+    if (width < xs) {
+      screenRef.value = sizeEnum.XS;
+    } else if (width < sm) {
+      screenRef.value = sizeEnum.SM;
+    } else if (width < md) {
+      screenRef.value = sizeEnum.MD;
+    } else if (width < lg) {
+      screenRef.value = sizeEnum.LG;
+    } else if (width < xl) {
+      screenRef.value = sizeEnum.XL;
+    } else {
+      screenRef.value = sizeEnum.XXL;
+    }
+    realWidthRef.value = width;
+  }
+
+  useEventListener({
+    el: window,
+    name: 'resize',
+
+    listener: () => {
+      getWindowWidth();
+      resizeFn();
+    },
+    // wait: 100,
+  });
+
+  getWindowWidth();
+  globalScreenRef = computed(() => unref(screenRef));
+  globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
+  globalRealWidthRef = computed((): number => unref(realWidthRef));
+
+  function resizeFn() {
+    fn?.({
+      screen: globalScreenRef,
+      width: globalWidthRef,
+      realWidth: globalRealWidthRef,
+      screenEnum,
+      screenMap,
+      sizeEnum,
+    });
+  }
+
+  resizeFn();
+  return {
+    screenRef: globalScreenRef,
+    screenEnum,
+    widthRef: globalWidthRef,
+    realWidthRef: globalRealWidthRef,
+  };
+}
diff --git a/web/src/hooks/event/useEventListener.ts b/web/src/hooks/event/useEventListener.ts
new file mode 100644
index 0000000..600afab
--- /dev/null
+++ b/web/src/hooks/event/useEventListener.ts
@@ -0,0 +1,62 @@
+import type { Ref } from 'vue';
+
+import { ref, watch, unref } from 'vue';
+import { useThrottleFn, useDebounceFn } from '@vueuse/core';
+
+export type RemoveEventFn = () => void;
+
+export interface UseEventParams {
+  el?: Element | Ref<Element | undefined> | Window | any;
+  name: string;
+  listener: EventListener;
+  options?: boolean | AddEventListenerOptions;
+  autoRemove?: boolean;
+  isDebounce?: boolean;
+  wait?: number;
+}
+
+export function useEventListener({
+  el = window,
+  name,
+  listener,
+  options,
+  autoRemove = true,
+  isDebounce = true,
+  wait = 80,
+}: UseEventParams): { removeEvent: RemoveEventFn } {
+  /* eslint-disable-next-line */
+    let remove: RemoveEventFn = () => {
+    };
+  const isAddRef = ref(false);
+
+  if (el) {
+    const element: Ref<Element> = ref(el as Element);
+
+    const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
+    const realHandler = wait ? handler : listener;
+    const removeEventListener = (e: Element) => {
+      isAddRef.value = true;
+      e.removeEventListener(name, realHandler, options);
+    };
+    const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
+
+    const removeWatch = watch(
+      element,
+      (v, _ov, cleanUp) => {
+        if (v) {
+          !unref(isAddRef) && addEventListener(v);
+          cleanUp(() => {
+            autoRemove && removeEventListener(v);
+          });
+        }
+      },
+      { immediate: true }
+    );
+
+    remove = () => {
+      removeEventListener(element.value);
+      removeWatch();
+    };
+  }
+  return { removeEvent: remove };
+}
diff --git a/web/src/hooks/event/useWindowSizeFn.ts b/web/src/hooks/event/useWindowSizeFn.ts
new file mode 100644
index 0000000..7b18ca0
--- /dev/null
+++ b/web/src/hooks/event/useWindowSizeFn.ts
@@ -0,0 +1,36 @@
+import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
+import { useDebounceFn } from '@vueuse/core';
+
+interface WindowSizeOptions {
+  once?: boolean;
+  immediate?: boolean;
+  listenerOptions?: AddEventListenerOptions | boolean;
+}
+
+export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) {
+  let handler = () => {
+    fn();
+  };
+  const handleSize = useDebounceFn(handler, wait);
+  handler = handleSize;
+
+  const start = () => {
+    if (options && options.immediate) {
+      handler();
+    }
+    window.addEventListener('resize', handler);
+  };
+
+  const stop = () => {
+    window.removeEventListener('resize', handler);
+  };
+
+  tryOnMounted(() => {
+    start();
+  });
+
+  tryOnUnmounted(() => {
+    stop();
+  });
+  return [start, stop];
+}
diff --git a/web/src/hooks/index.ts b/web/src/hooks/index.ts
new file mode 100644
index 0000000..81c4556
--- /dev/null
+++ b/web/src/hooks/index.ts
@@ -0,0 +1,3 @@
+import { useAsync } from './use-async';
+
+export { useAsync };
diff --git a/web/src/hooks/setting/index.ts b/web/src/hooks/setting/index.ts
new file mode 100644
index 0000000..0c27b3f
--- /dev/null
+++ b/web/src/hooks/setting/index.ts
@@ -0,0 +1,31 @@
+import type { GlobConfig } from '/#/config';
+import { warn } from '@/utils/log';
+import { getAppEnvConfig } from '@/utils/env';
+
+export const useGlobSetting = (): Readonly<GlobConfig> => {
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_IMG_URL,
+  } = getAppEnvConfig();
+
+  if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+    );
+  }
+
+  // Take global configuration
+  const glob: Readonly<GlobConfig> = {
+    title: VITE_GLOB_APP_TITLE,
+    apiUrl: VITE_GLOB_API_URL,
+    shortName: VITE_GLOB_APP_SHORT_NAME,
+    urlPrefix: VITE_GLOB_API_URL_PREFIX,
+    uploadUrl: VITE_GLOB_UPLOAD_URL,
+    imgUrl: VITE_GLOB_IMG_URL,
+  };
+  return glob as Readonly<GlobConfig>;
+};
diff --git a/web/src/hooks/setting/useDesignSetting.ts b/web/src/hooks/setting/useDesignSetting.ts
new file mode 100644
index 0000000..0a873b5
--- /dev/null
+++ b/web/src/hooks/setting/useDesignSetting.ts
@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+import { useDesignSettingStore } from '@/store/modules/designSetting';
+
+export function useDesignSetting() {
+  const designStore = useDesignSettingStore();
+
+  const getDarkTheme = computed(() => designStore.darkTheme);
+
+  const getAppTheme = computed(() => designStore.appTheme);
+
+  const getAppThemeList = computed(() => designStore.appThemeList);
+
+  return {
+    getDarkTheme,
+    getAppTheme,
+    getAppThemeList,
+  };
+}
diff --git a/web/src/hooks/setting/useProjectSetting.ts b/web/src/hooks/setting/useProjectSetting.ts
new file mode 100644
index 0000000..1a08980
--- /dev/null
+++ b/web/src/hooks/setting/useProjectSetting.ts
@@ -0,0 +1,42 @@
+import { computed } from 'vue';
+import { useProjectSettingStore } from '@/store/modules/projectSetting';
+
+export function useProjectSetting() {
+  const projectStore = useProjectSettingStore();
+
+  const getNavMode = computed(() => projectStore.navMode);
+
+  const getNavTheme = computed(() => projectStore.navTheme);
+
+  const getIsMobile = computed(() => projectStore.isMobile);
+
+  const getHeaderSetting = computed(() => projectStore.headerSetting);
+
+  const getMultiTabsSetting = computed(() => projectStore.multiTabsSetting);
+
+  const getMenuSetting = computed(() => projectStore.menuSetting);
+
+  const getCrumbsSetting = computed(() => projectStore.crumbsSetting);
+
+  const getPermissionMode = computed(() => projectStore.permissionMode);
+
+  const getShowFooter = computed(() => projectStore.showFooter);
+
+  const getIsPageAnimate = computed(() => projectStore.isPageAnimate);
+
+  const getPageAnimateType = computed(() => projectStore.pageAnimateType);
+
+  return {
+    getNavMode,
+    getNavTheme,
+    getIsMobile,
+    getHeaderSetting,
+    getMultiTabsSetting,
+    getMenuSetting,
+    getCrumbsSetting,
+    getPermissionMode,
+    getShowFooter,
+    getIsPageAnimate,
+    getPageAnimateType,
+  };
+}
diff --git a/web/src/hooks/use-async.ts b/web/src/hooks/use-async.ts
new file mode 100644
index 0000000..277e086
--- /dev/null
+++ b/web/src/hooks/use-async.ts
@@ -0,0 +1,15 @@
+import { isReactive, isRef } from 'vue';
+
+function setLoading(loading, val) {
+  if (loading != undefined && isRef(loading)) {
+    loading.value = val;
+  } else if (loading != undefined && isReactive(loading)) {
+    loading.loading = val;
+  }
+}
+
+export const useAsync = async (func: Promise<any>, loading: any): Promise<any> => {
+  setLoading(loading, true);
+
+  return await func.finally(() => setLoading(loading, false));
+};
diff --git a/web/src/hooks/useBattery.ts b/web/src/hooks/useBattery.ts
new file mode 100644
index 0000000..1728a73
--- /dev/null
+++ b/web/src/hooks/useBattery.ts
@@ -0,0 +1,93 @@
+import { computed, onMounted, reactive, toRefs } from 'vue';
+
+interface Battery {
+  charging: boolean; // 当前电池是否正在充电
+  chargingTime: number; // 距离充电完毕还需多少秒，如果为0则充电完毕
+  dischargingTime: number; // 代表距离电池耗电至空且挂起需要多少秒
+  level: number; // 代表电量的放大等级，这个值在 0.0 至 1.0 之间
+  [key: string]: any;
+}
+
+export const useBattery = () => {
+  const state = reactive({
+    battery: {
+      charging: false,
+      chargingTime: 0,
+      dischargingTime: 0,
+      level: 100,
+    },
+  });
+
+  // 更新电池使用状态
+  const updateBattery = (target) => {
+    for (const key in state.battery) {
+      state.battery[key] = target[key];
+    }
+    state.battery.level = state.battery.level * 100;
+  };
+
+  // 计算电池剩余可用时间
+  const calcDischargingTime = computed(() => {
+    const hour = state.battery.dischargingTime / 3600;
+    const minute = (state.battery.dischargingTime / 60) % 60;
+    return `${~~hour}小时${~~minute}分钟`;
+  });
+
+  // 计算电池充满剩余时间
+  const calcChargingTime = computed(() => {
+    console.log(state.battery);
+    const hour = state.battery.chargingTime / 3600;
+    const minute = (state.battery.chargingTime / 60) % 60;
+    return `${~~hour}小时${~~minute}分钟`;
+  });
+
+  // 电池状态
+  const batteryStatus = computed(() => {
+    if (state.battery.charging && state.battery.level >= 100) {
+      return '已充满';
+    } else if (state.battery.charging) {
+      return '充电中';
+    } else {
+      return '已断开电源';
+    }
+  });
+
+  onMounted(async () => {
+    const BatteryManager: Battery = await (window.navigator as any).getBattery();
+    updateBattery(BatteryManager);
+
+    // 电池充电状态更新时被调用
+    BatteryManager.onchargingchange = ({ target }) => {
+      updateBattery(target);
+    };
+    // 电池充电时间更新时被调用
+    BatteryManager.onchargingtimechange = ({ target }) => {
+      updateBattery(target);
+    };
+    // 电池断开充电时间更新时被调用
+    BatteryManager.ondischargingtimechange = ({ target }) => {
+      updateBattery(target);
+    };
+    // 电池电量更新时被调用
+    BatteryManager.onlevelchange = ({ target }) => {
+      updateBattery(target);
+    };
+
+    // new Intl.DateTimeFormat('zh', {
+    //   year: 'numeric',
+    //   month: '2-digit',
+    //   day: '2-digit',
+    //   hour: '2-digit',
+    //   minute: '2-digit',
+    //   second: '2-digit',
+    //   hour12: false
+    // }).format(new Date())
+  });
+
+  return {
+    ...toRefs(state),
+    batteryStatus,
+    calcDischargingTime,
+    calcChargingTime,
+  };
+};
diff --git a/web/src/hooks/useBoolean.ts b/web/src/hooks/useBoolean.ts
new file mode 100644
index 0000000..1646ffa
--- /dev/null
+++ b/web/src/hooks/useBoolean.ts
@@ -0,0 +1,49 @@
+import { ref, Ref } from "vue";
+
+type Resettable =
+  /**
+   * 基础形式为一个元组，包含：
+   * 1. `Ref<boolean>`：状态引用，可以直接访问和修改状态值
+   * 2. `() => void`：切换真假
+   * 3. `(value: boolean) => void`：设置状态
+   * 4.`() => void`：设置为`true`方法
+   * 5.`() => void`：设置为`false`方法
+   */
+  [Ref<boolean>, () => void, () => void] & /**
+   * 同时扩展为一个对象形式，提供以下属性和方法：
+   * - `loading: Ref<T>`：状态引用，与元组中的第一个元素相同
+   * - `startLoading: () => void`：开始加载方法，与元组中的第二个元素相同
+   * - `endLoading: () => void`：结束加载方法，与元组中的第三个元素相同
+   */ {
+    /** 加载状态引用 */
+    bool: Ref<boolean>;
+    toggle: () => void;
+    setBool: (value: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+  };
+export default function useBoolean(initValue = false): Resettable {
+  const bool = ref(initValue);
+
+  function setBool(value: boolean) {
+    bool.value = value;
+  }
+  function setTrue() {
+    setBool(true);
+  }
+  function setFalse() {
+    setBool(false);
+  }
+  function toggle() {
+    setBool(!bool.value);
+  }
+
+  // 返回带加载状态引用、开始加载和结束加载方法的扩展数组
+  return (Object.assign([bool, toggle, setBool, setTrue, setFalse], {
+    bool,
+    toggle,
+    setBool,
+    setTrue,
+    setFalse,
+  }) as unknown) as Resettable;
+}
diff --git a/web/src/hooks/useCreateScript.ts b/web/src/hooks/useCreateScript.ts
new file mode 100644
index 0000000..a8c6632
--- /dev/null
+++ b/web/src/hooks/useCreateScript.ts
@@ -0,0 +1,21 @@
+import { onMounted } from 'vue';
+
+export default function userCreateScript(src: string) {
+  const createScriptPromise = new Promise((resolve, reject) => {
+    onMounted(() => {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.onload = () => {
+        resolve('');
+      };
+      script.onerror = (error) => {
+        reject(error);
+      };
+      script.src = src;
+      document.head.appendChild(script);
+    });
+  });
+  return {
+    createScriptPromise,
+  };
+}
diff --git a/web/src/hooks/useDomWidth.ts b/web/src/hooks/useDomWidth.ts
new file mode 100644
index 0000000..1a0bc5a
--- /dev/null
+++ b/web/src/hooks/useDomWidth.ts
@@ -0,0 +1,23 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+import { debounce } from 'lodash-es';
+
+/**
+ * description: 获取页面宽度
+ */
+
+export function useDomWidth() {
+  const domWidth = ref(window.innerWidth);
+
+  function resize() {
+    domWidth.value = document.body.clientWidth;
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', debounce(resize, 80));
+  });
+  onUnmounted(() => {
+    window.removeEventListener('resize', resize);
+  });
+
+  return domWidth;
+}
diff --git a/web/src/hooks/useEcharts.ts b/web/src/hooks/useEcharts.ts
new file mode 100644
index 0000000..91d0022
--- /dev/null
+++ b/web/src/hooks/useEcharts.ts
@@ -0,0 +1,8 @@
+import * as echarts from 'echarts';
+export default function useEcharts(dom: HTMLElement, theme?: string) {
+  let instance = echarts.getInstanceByDom(dom);
+  if (!instance) {
+    instance = echarts.init(dom, theme);
+  }
+  return instance;
+}
diff --git a/web/src/hooks/useOnline.ts b/web/src/hooks/useOnline.ts
new file mode 100644
index 0000000..f55f31f
--- /dev/null
+++ b/web/src/hooks/useOnline.ts
@@ -0,0 +1,30 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/**
+ * @description 用户网络是否可用
+ * */
+export function useOnline() {
+  const online = ref(true);
+
+  const showStatus = (val) => {
+    online.value = typeof val == 'boolean' ? val : val.target.online;
+  };
+
+  // 在页面加载后，设置正确的网络状态
+  navigator.onLine ? showStatus(true) : showStatus(false);
+
+  onMounted(() => {
+    // 开始监听网络状态的变化
+    window.addEventListener('online', showStatus);
+
+    window.addEventListener('offline', showStatus);
+  });
+  onUnmounted(() => {
+    // 移除监听网络状态的变化
+    window.removeEventListener('online', showStatus);
+
+    window.removeEventListener('offline', showStatus);
+  });
+
+  return { online };
+}
diff --git a/web/src/hooks/useTime.ts b/web/src/hooks/useTime.ts
new file mode 100644
index 0000000..9ff66c7
--- /dev/null
+++ b/web/src/hooks/useTime.ts
@@ -0,0 +1,44 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/**
+ * @description 获取本地时间
+ */
+export function useTime() {
+  let timer; // 定时器
+  const year = ref(0); // 年份
+  const month = ref(0); // 月份
+  const week = ref(''); // 星期几
+  const day = ref(0); // 天数
+  const hour = ref<number | string>(0); // 小时
+  const minute = ref<number | string>(0); // 分钟
+  const second = ref(0); // 秒
+
+  // 更新时间
+  const updateTime = () => {
+    const date = new Date();
+    year.value = date.getFullYear();
+    month.value = date.getMonth() + 1;
+    week.value = '日一二三四五六'.charAt(date.getDay());
+    day.value = date.getDate();
+    hour.value =
+      (date.getHours() + '').padStart(2, '0') ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours());
+    minute.value =
+      (date.getMinutes() + '').padStart(2, '0') ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes());
+    second.value = date.getSeconds();
+  };
+
+  updateTime();
+
+  onMounted(() => {
+    clearInterval(timer);
+    timer = setInterval(() => updateTime(), 1000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(timer);
+  });
+
+  return { month, day, hour, minute, second, week };
+}
diff --git a/web/src/hooks/web/useECharts.ts b/web/src/hooks/web/useECharts.ts
new file mode 100644
index 0000000..bd008a8
--- /dev/null
+++ b/web/src/hooks/web/useECharts.ts
@@ -0,0 +1,117 @@
+import type { EChartsOption } from 'echarts';
+import type { Ref } from 'vue';
+import { useTimeoutFn } from '@/hooks/core/useTimeout';
+import { tryOnUnmounted } from '@vueuse/core';
+import { unref, nextTick, watch, computed, ref } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { useEventListener } from '@/hooks/event/useEventListener';
+import { useBreakpoint } from '@/hooks/event/useBreakpoint';
+import echarts from '@/utils/lib/echarts';
+import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+
+export function useECharts(
+  elRef: Ref<HTMLDivElement>,
+  theme: 'light' | 'dark' | 'default' = 'default'
+) {
+  const { getDarkTheme: getSysDarkTheme } = useDesignSetting();
+
+  const getDarkTheme = computed(() => {
+    const sysTheme: string = getSysDarkTheme.value ? 'dark' : 'light';
+    return theme === 'default' ? sysTheme : theme;
+  });
+
+  let chartInstance: echarts.ECharts | null = null;
+  let resizeFn: Fn = resize;
+  const cacheOptions = ref({});
+  let removeResizeFn: Fn = () => {};
+  resizeFn = useDebounceFn(resize, 200);
+
+  const getOptions = computed((): EChartsOption => {
+    if (getDarkTheme.value !== 'dark') {
+      return cacheOptions.value;
+    }
+    return {
+      backgroundColor: 'transparent',
+      ...cacheOptions.value,
+    };
+  });
+
+  function initCharts(t = theme) {
+    const el = unref(elRef);
+    if (!el || !unref(el)) {
+      return;
+    }
+
+    chartInstance = echarts.init(el, t);
+    const { removeEvent } = useEventListener({
+      el: window,
+      name: 'resize',
+      listener: resizeFn,
+    });
+    removeResizeFn = removeEvent;
+    const { widthRef, screenEnum } = useBreakpoint();
+    if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
+      useTimeoutFn(() => {
+        resizeFn();
+      }, 30);
+    }
+  }
+
+  function setOptions(options: EChartsOption, clear = true) {
+    cacheOptions.value = options;
+    if (unref(elRef)?.offsetHeight === 0) {
+      useTimeoutFn(() => {
+        setOptions(unref(getOptions));
+      }, 30);
+      return;
+    }
+    nextTick(() => {
+      useTimeoutFn(() => {
+        if (!chartInstance) {
+          initCharts(getDarkTheme.value as 'default');
+
+          if (!chartInstance) return;
+        }
+        clear && chartInstance?.clear();
+
+        chartInstance?.setOption(unref(getOptions));
+      }, 30);
+    });
+  }
+
+  function resize() {
+    chartInstance?.resize();
+  }
+
+  watch(
+    () => getDarkTheme.value,
+    (theme) => {
+      if (chartInstance) {
+        chartInstance.dispose();
+        initCharts(theme as 'default');
+        setOptions(cacheOptions.value);
+      }
+    }
+  );
+
+  tryOnUnmounted(() => {
+    if (!chartInstance) return;
+    removeResizeFn();
+    chartInstance.dispose();
+    chartInstance = null;
+  });
+
+  function getInstance(): echarts.ECharts | null {
+    if (!chartInstance) {
+      initCharts(getDarkTheme.value as 'default');
+    }
+    return chartInstance;
+  }
+
+  return {
+    setOptions,
+    resize,
+    echarts,
+    getInstance,
+  };
+}
diff --git a/web/src/hooks/web/usePage.ts b/web/src/hooks/web/usePage.ts
new file mode 100644
index 0000000..c11b1d8
--- /dev/null
+++ b/web/src/hooks/web/usePage.ts
@@ -0,0 +1,62 @@
+import type { RouteLocationRaw, Router } from 'vue-router';
+
+import { PageEnum } from '@/enums/pageEnum';
+import { RedirectName } from '@/router/constant';
+
+import { useRouter } from 'vue-router';
+import { isString } from '@/utils/is';
+import { unref } from 'vue';
+
+export type RouteLocationRawEx = Omit<RouteLocationRaw, 'path'> & { path: PageEnum };
+
+function handleError(e: Error) {
+  console.error(e);
+}
+
+/**
+ * 页面切换
+ */
+export function useGo(_router?: Router) {
+  let router;
+  if (!_router) {
+    router = useRouter();
+  }
+  const { push, replace } = _router || router;
+  function go(opt: PageEnum | RouteLocationRawEx | string = PageEnum.BASE_HOME, isReplace = false) {
+    if (!opt) {
+      return;
+    }
+    if (isString(opt)) {
+      isReplace ? replace(opt).catch(handleError) : push(opt).catch(handleError);
+    } else {
+      const o = opt as RouteLocationRaw;
+      isReplace ? replace(o).catch(handleError) : push(o).catch(handleError);
+    }
+  }
+  return go;
+}
+
+/**
+ * 重做当前页面
+ */
+export const useRedo = (_router?: Router) => {
+  const { push, currentRoute } = _router || useRouter();
+  const { query, params = {}, name, fullPath } = unref(currentRoute.value);
+  function redo(): Promise<boolean> {
+    return new Promise((resolve) => {
+      if (name === RedirectName) {
+        resolve(false);
+        return;
+      }
+      if (name && Object.keys(params).length > 0) {
+        params['_redirect_type'] = 'name';
+        params['path'] = String(name);
+      } else {
+        params['_redirect_type'] = 'path';
+        params['path'] = fullPath;
+      }
+      push({ name: RedirectName, params, query }).then(() => resolve(true));
+    });
+  }
+  return redo;
+};
diff --git a/web/src/hooks/web/usePermission.ts b/web/src/hooks/web/usePermission.ts
new file mode 100644
index 0000000..3a03e74
--- /dev/null
+++ b/web/src/hooks/web/usePermission.ts
@@ -0,0 +1,52 @@
+import { useUserStore } from '@/store/modules/user';
+
+export function usePermission() {
+  const userStore = useUserStore();
+
+  /**
+   * 检查权限
+   * @param accesses
+   */
+  function _somePermissions(accesses: string[]) {
+    return userStore.getPermissions.some((item) => {
+      // @ts-ignore
+      return accesses.includes(item);
+    });
+  }
+
+  /**
+   * 判断是否存在权限
+   * 可用于 v-if 显示逻辑
+   * */
+  function hasPermission(accesses: string[]): boolean {
+    if (!accesses || !accesses.length) return true;
+    return _somePermissions(accesses);
+  }
+
+  /**
+   * 是否包含指定的所有权限
+   * @param accesses
+   */
+  function hasEveryPermission(accesses: string[]): boolean {
+    const permissionsList = userStore.getPermissions;
+    if (Array.isArray(accesses)) {
+      return permissionsList.every((access: any) => accesses.includes(access));
+    }
+    throw new Error(`[hasEveryPermission]: ${accesses} should be a array !`);
+  }
+
+  /**
+   * 是否包含其中某个权限
+   * @param accesses
+   * @param accessMap
+   */
+  function hasSomePermission(accesses: string[]): boolean {
+    const permissionsList = userStore.getPermissions;
+    if (Array.isArray(accesses)) {
+      return permissionsList.some((access: any) => accesses.includes(access));
+    }
+    throw new Error(`[hasSomePermission]: ${accesses} should be a array !`);
+  }
+
+  return { hasPermission, hasEveryPermission, hasSomePermission };
+}
diff --git a/web/src/layout/components/Header/MessageList.vue b/web/src/layout/components/Header/MessageList.vue
new file mode 100644
index 0000000..2bb638b
--- /dev/null
+++ b/web/src/layout/components/Header/MessageList.vue
@@ -0,0 +1,74 @@
+<template>
+  <n-scrollbar style="max-height: 360px">
+    <n-list>
+      <n-list-item v-for="(item, index) in list" :key="item.id" @click="handleRead(index)">
+        <n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">
+          <template #avatar>
+            <n-avatar round v-if="item.senderAvatar" :size="28" :src="item.senderAvatar" />
+            <n-icon-wrapper v-else :size="28" :border-radius="10">
+              <n-icon :size="20" :component="getIcon(item)" />
+            </n-icon-wrapper>
+          </template>
+          <template #header>
+            <n-ellipsis :line-clamp="1">
+              {{ item.title }}
+              <template #tooltip>
+                {{ item.title }}
+              </template>
+            </n-ellipsis>
+          </template>
+          <template v-if="item.tagTitle" #header-extra>
+            <n-tag v-bind="item.tagProps" size="small">{{ item.tagTitle }}</n-tag>
+          </template>
+          <template #description>
+            <div v-if="item.content" class="description-box">
+              <span v-html="item.content" class="description-html"> </span>
+            </div>
+
+            <p>{{ item.createdAt }}</p>
+          </template>
+        </n-thing>
+      </n-list-item>
+    </n-list>
+  </n-scrollbar>
+</template>
+<script lang="ts" setup>
+  import { MessageRow, getIcon } from '@/enums/systemMessageEnum';
+  interface Props {
+    list?: MessageRow[];
+  }
+
+  withDefaults(defineProps<Props>(), {
+    list: () => [],
+  });
+
+  interface Emits {
+    (e: 'read', val: number): void;
+  }
+
+  const emit = defineEmits<Emits>();
+
+  function handleRead(index: number) {
+    emit('read', index);
+  }
+</script>
+
+<style lang="less" scoped>
+  :deep(.description-box) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+  }
+  :deep(.description-html) {
+    height: 100%;
+  }
+  :deep(.px-15px) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  :deep(.text-34px) {
+    font-size: 34px;
+  }
+</style>
diff --git a/web/src/layout/components/Header/ProjectSetting.vue b/web/src/layout/components/Header/ProjectSetting.vue
new file mode 100644
index 0000000..e6aaf7a
--- /dev/null
+++ b/web/src/layout/components/Header/ProjectSetting.vue
@@ -0,0 +1,384 @@
+<template>
+  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
+    <n-drawer-content :title="title" :native-scrollbar="false">
+      <div class="drawer">
+        <n-divider title-placement="center">主题</n-divider>
+
+        <div class="justify-center drawer-setting-item dark-switch">
+          <n-tooltip placement="bottom">
+            <template #trigger>
+              <n-switch v-model:value="designStore.darkTheme" class="dark-theme-switch">
+                <template #checked>
+                  <n-icon size="14" color="#ffd93b">
+                    <SunnySharp />
+                  </n-icon>
+                </template>
+                <template #unchecked>
+                  <n-icon size="14" color="#ffd93b">
+                    <Moon />
+                  </n-icon>
+                </template>
+              </n-switch>
+            </template>
+            <span>{{ designStore.darkTheme ? '深' : '浅' }}色主题</span>
+          </n-tooltip>
+        </div>
+
+        <n-divider title-placement="center">系统主题</n-divider>
+
+        <div class="drawer-setting-item align-items-top">
+          <span
+            class="theme-item"
+            v-for="(item, index) in appThemeList"
+            :key="index"
+            :style="{ 'background-color': item }"
+            @click="togTheme(item)"
+          >
+            <n-icon size="12" v-if="item === designStore.appTheme">
+              <CheckOutlined />
+            </n-icon>
+          </span>
+        </div>
+
+        <n-divider title-placement="center">导航栏模式</n-divider>
+
+        <div class="drawer-setting-item align-items-top">
+          <div class="drawer-setting-item-style align-items-top">
+            <n-tooltip placement="top">
+              <template #trigger>
+                <img
+                  src="~@/assets/images/nav-theme-dark.svg"
+                  @click="togNavMode('vertical')"
+                  alt="左侧菜单模式"
+                />
+              </template>
+              <span>左侧菜单模式</span>
+            </n-tooltip>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'vertical'" />
+          </div>
+
+          <div class="drawer-setting-item-style">
+            <n-tooltip placement="top">
+              <template #trigger>
+                <img
+                  src="~@/assets/images/nav-horizontal.svg"
+                  alt="顶部菜单模式"
+                  @click="togNavMode('horizontal')"
+                />
+              </template>
+              <span>顶部菜单模式</span>
+            </n-tooltip>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'" />
+          </div>
+
+          <div class="drawer-setting-item-style">
+            <n-tooltip placement="top">
+              <template #trigger>
+                <img
+                  src="~@/assets/images/nav-horizontal-mix.svg"
+                  @click="togNavMode('horizontal-mix')"
+                  alt="顶部菜单混合模式"
+                />
+              </template>
+              <span>顶部菜单混合模式</span>
+            </n-tooltip>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal-mix'" />
+          </div>
+        </div>
+
+        <n-divider title-placement="center">导航栏风格</n-divider>
+
+        <div class="drawer-setting-item align-items-top">
+          <div class="drawer-setting-item-style align-items-top">
+            <n-tooltip placement="top">
+              <template #trigger>
+                <img
+                  src="~@/assets/images/nav-theme-dark.svg"
+                  alt="暗色侧边栏"
+                  @click="togNavTheme('dark')"
+                />
+              </template>
+              <span>暗色侧边栏</span>
+            </n-tooltip>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'dark'" />
+          </div>
+
+          <div class="drawer-setting-item-style">
+            <n-tooltip placement="top">
+              <template #trigger>
+                <img
+                  src="~@/assets/images/nav-theme-light.svg"
+                  alt="白色侧边栏"
+                  @click="togNavTheme('light')"
+                />
+              </template>
+              <span>白色侧边栏</span>
+            </n-tooltip>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'" />
+          </div>
+
+          <div class="drawer-setting-item-style">
+            <n-tooltip placement="top">
+              <template #trigger>
+                <img
+                  src="~@/assets/images/header-theme-dark.svg"
+                  @click="togNavTheme('header-dark')"
+                  alt="暗色顶栏"
+                />
+              </template>
+              <span>暗色顶栏</span>
+            </n-tooltip>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'header-dark'" />
+          </div>
+        </div>
+        <n-divider title-placement="center">界面功能</n-divider>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 分割菜单 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch
+              :disabled="settingStore.navMode !== 'horizontal-mix'"
+              v-model:value="settingStore.menuSetting.mixMenu"
+            />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 固定顶栏 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.headerSetting.fixed" />
+          </div>
+        </div>
+
+        <!--        <div class="drawer-setting-item">-->
+        <!--          <div class="drawer-setting-item-title">-->
+        <!--            固定侧边栏-->
+        <!--          </div>-->
+        <!--          <div class="drawer-setting-item-action">-->
+        <!--            <n-switch v-model:value="settingStore.menuSetting.fixed" />-->
+        <!--          </div>-->
+        <!--        </div>-->
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 固定多页签 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.multiTabsSetting.fixed" />
+          </div>
+        </div>
+
+        <n-divider title-placement="center">界面显示</n-divider>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 显示重载页面按钮 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.headerSetting.isReload" />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 显示面包屑导航 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.crumbsSetting.show" />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 显示面包屑显示图标 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.crumbsSetting.showIcon" />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 显示多页签 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.multiTabsSetting.show" />
+          </div>
+        </div>
+        <!--1.15废弃，没啥用，占用操作空间-->
+        <!--        <div class="drawer-setting-item">-->
+        <!--          <div class="drawer-setting-item-title"> 显示页脚 </div>-->
+        <!--          <div class="drawer-setting-item-action">-->
+        <!--            <n-switch v-model:value="settingStore.showFooter" />-->
+        <!--          </div>-->
+        <!--        </div>-->
+
+        <n-divider title-placement="center">动画</n-divider>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 禁用动画 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.isPageAnimate" />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 动画类型 </div>
+          <div class="drawer-setting-item-select">
+            <n-select v-model:value="settingStore.pageAnimateType" :options="animateOptions" />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <n-alert type="warning" :showIcon="false">
+            <p>{{ alertText }}</p>
+          </n-alert>
+        </div>
+      </div>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, toRefs, unref, watch, computed } from 'vue';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useDesignSettingStore } from '@/store/modules/designSetting';
+  import { CheckOutlined } from '@vicons/antd';
+  import { Moon, SunnySharp } from '@vicons/ionicons5';
+  import { darkTheme } from 'naive-ui';
+  import { animates as animateOptions } from '@/settings/animateSetting';
+
+  export default defineComponent({
+    name: 'ProjectSetting',
+    components: { CheckOutlined, Moon, SunnySharp },
+    props: {
+      title: {
+        type: String,
+        default: '项目配置',
+      },
+      width: {
+        type: Number,
+        default: 280,
+      },
+    },
+    setup(props) {
+      const settingStore = useProjectSettingStore();
+      const designStore = useDesignSettingStore();
+      const state = reactive({
+        width: props.width,
+        title: props.title,
+        isDrawer: false,
+        placement: 'right',
+        alertText:
+          '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
+        appThemeList: designStore.appThemeList,
+      });
+
+      watch(
+        () => designStore.darkTheme,
+        (to) => {
+          settingStore.navTheme = to ? 'header-dark' : 'dark';
+        }
+      );
+
+      const directionsOptions = computed(() => {
+        return animateOptions.find((item) => item.value == unref(settingStore.pageAnimateType));
+      });
+
+      function openDrawer() {
+        state.isDrawer = true;
+      }
+
+      function closeDrawer() {
+        state.isDrawer = false;
+      }
+
+      function togNavTheme(theme) {
+        settingStore.navTheme = theme;
+        if (settingStore.navMode === 'horizontal' && ['light'].includes(theme)) {
+          settingStore.navTheme = 'dark';
+        }
+      }
+
+      function togTheme(color) {
+        designStore.appTheme = color;
+      }
+
+      function togNavMode(mode) {
+        settingStore.navMode = mode;
+        settingStore.menuSetting.mixMenu = false;
+      }
+
+      return {
+        ...toRefs(state),
+        settingStore,
+        designStore,
+        togNavTheme,
+        togNavMode,
+        togTheme,
+        darkTheme,
+        openDrawer,
+        closeDrawer,
+        animateOptions,
+        directionsOptions,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .drawer {
+    .n-divider:not(.n-divider--vertical) {
+      margin: 10px 0;
+    }
+
+    &-setting-item {
+      display: flex;
+      align-items: center;
+      padding: 12px 0;
+      flex-wrap: wrap;
+
+      &-style {
+        display: inline-block;
+        position: relative;
+        margin-right: 16px;
+        cursor: pointer;
+        text-align: center;
+      }
+
+      &-title {
+        flex: 1 1;
+        font-size: 14px;
+      }
+
+      &-action {
+        flex: 0 0 auto;
+      }
+
+      &-select {
+        flex: 1;
+      }
+
+      .theme-item {
+        width: 20px;
+        min-width: 20px;
+        height: 20px;
+        cursor: pointer;
+        border: 1px solid #eee;
+        border-radius: 2px;
+        margin: 0 5px 5px 0;
+        text-align: center;
+        line-height: 14px;
+
+        .n-icon {
+          color: #fff;
+        }
+      }
+    }
+
+    .align-items-top {
+      align-items: flex-start;
+      padding: 2px 0;
+    }
+
+    .justify-center {
+      justify-content: center;
+    }
+
+    .dark-switch .n-switch {
+      ::v-deep(.n-switch__rail) {
+        background-color: #000e1c;
+      }
+    }
+  }
+</style>
diff --git a/web/src/layout/components/Header/Search.vue b/web/src/layout/components/Header/Search.vue
new file mode 100644
index 0000000..05cdee1
--- /dev/null
+++ b/web/src/layout/components/Header/Search.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { watchEffect, computed, nextTick, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import useBoolean from "@/hooks/useBoolean";
+import { useMagicKeys  } from "@vueuse/core";
+import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+import { adaModalWidth } from '@/utils/hotgo';
+import { tree2FlatArray } from '@/utils/tree';
+import { cloneDeep, debounce } from 'lodash-es';
+
+const routeStore = useAsyncRouteStore();
+const meun = routeStore.getMenus
+const menusFlat = computed(()=>{
+  const copyMeun = cloneDeep(meun)
+  // 菜单打平
+  return tree2FlatArray(copyMeun)
+})
+// 搜索值
+const searchValue = ref('')
+
+// 选中索引
+const selectedIndex = ref<number>(0)
+
+const { bool: showModal, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean(false)
+
+// 鼠标和键盘操作切换锁，防止鼠标和键盘操作冲突
+const { bool: keyboardFlag, setTrue: setKeyboardTrue, setFalse: setKeyboardFalse } = useBoolean(false)
+
+const { ctrl_k, arrowup, arrowdown, enter } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown')
+      e.preventDefault()
+  },
+})
+
+// 监听全局热键
+watchEffect(() => {
+  if (ctrl_k.value)
+    toggleModal()
+})
+
+
+// 计算符合条件的菜单选项
+const options = ref([])
+const getFilterMenuOptions = debounce(()=> {
+  selectedIndex.value = 0
+  if (!searchValue.value){
+    options.value = []
+    return
+  }
+  
+  const list = menusFlat.value.filter((item) => {
+    const conditions = [
+      item.name?.includes(searchValue.value),
+      (item?.meta?.title || '')?.includes(searchValue.value),
+      item.path?.includes(searchValue.value),
+    ]
+    return conditions.some(condition => condition)
+  }).map((item) => {
+    return {
+      label: item?.meta?.title || item.name,
+      icon: item.icon,
+      value: item.path
+    }
+  })
+
+  options.value = list
+}, 200)
+
+const router = useRouter()
+
+const dialogWidth = computed(() => {
+  return adaModalWidth(600);
+});
+
+// 关闭回调
+function handleClose() {
+  searchValue.value = ''
+  selectedIndex.value = 0
+  closeModal()
+}
+
+// 输入框改变，索引重置
+function handleInputChange() {
+  
+  getFilterMenuOptions()
+  
+}
+
+// 选择菜单选项
+function handleSelect(value: string) {
+  handleClose()
+  router.push(value)
+  nextTick(() => {
+    searchValue.value = ''
+  })
+}
+
+watchEffect(() => {
+  // 没有打开弹窗或没有搜索结果时，不操作
+  if (!showModal.value || !options.value.length)
+    return
+
+  // 设置键盘操作锁，设置后不会被动触发mouseover
+  setKeyboardTrue()
+  if (arrowup.value)
+    handleArrowup()
+
+  if (arrowdown.value)
+    handleArrowdown()
+
+  if (enter.value)
+    handleEnter()
+})
+
+const scrollbarRef = ref()
+
+// 上箭头操作
+function handleArrowup() {
+  if (selectedIndex.value === 0)
+    selectedIndex.value = options.value.length - 1
+
+  else
+    selectedIndex.value--
+
+  handleScroll(selectedIndex.value)
+}
+
+// 下箭头操作
+function handleArrowdown() {
+  if (selectedIndex.value === options.value.length - 1)
+    selectedIndex.value = 0
+
+  else
+    selectedIndex.value++
+
+  handleScroll(selectedIndex.value)
+}
+
+function handleScroll(currentIndex: number) {
+  // 保持6个选项在可视区域内,6个后开始滚动
+  const keepIndex = 5
+  // 单个元素的高度，包括了元素的gap和容器的padding
+  const elHeight = 70
+  const distance = currentIndex * elHeight > keepIndex * elHeight ? currentIndex * elHeight - keepIndex * elHeight : 0
+  scrollbarRef.value?.scrollTo({
+    top: distance,
+  })
+}
+// 回车键操作
+function handleEnter() {
+  const target = options.value[selectedIndex.value]
+  if (target)
+    handleSelect(target.value)
+}
+
+// 鼠标移入操作
+function handleMouseEnter(index: number) {
+  if (keyboardFlag.value)
+    return
+
+  selectedIndex.value = index
+}
+</script>
+
+<template>
+  <div class="flex items-center" @click="openModal" title="点击搜索菜单">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg>
+    <n-tag round size="small" class="font-mono cursor-pointer">
+      Ctrl K
+    </n-tag>
+  </div>
+  <n-modal
+    v-model:show="showModal"
+    class="fixed top-[60px] inset-x-0"
+    size="small"
+    preset="card"
+    :segmented="{
+      content: true,
+      footer: true,
+    }"
+    :style="{
+      width: dialogWidth,
+    }"
+    :closable="false"
+    @after-leave="handleClose"
+  >
+    <template #header>
+      <n-input v-model:value="searchValue" placeholder="搜索页面/路径" clearable size="large" @input="handleInputChange">
+        <template #prefix>
+          <n-icon>
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#6f6a6a" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg>
+          </n-icon>
+        </template>
+      </n-input>
+    </template>
+    <n-scrollbar ref="scrollbarRef" class="h-[450px]">
+      <ul
+        v-if="options.length"
+        class="flex flex-col gap-[8px] p-[8px] p-r-3"
+      >
+        <n-el
+          v-for="(option, index) in options"
+          :key="option.value" tag="li" role="option"
+          class="cursor-pointer shadow h-[62px]"
+          :class="{ 'text-[var(--base-color)] bg-[var(--primary-color-hover)]': index === selectedIndex }"
+          @click="handleSelect(option.value)"
+          @mouseenter="handleMouseEnter(index)"
+          @mousemove="setKeyboardFalse"
+        >
+          <div class="grid grid-cols-[1fr_30px] h-full p-2">
+            <span>{{ option.label }}</span>
+            <svg class="row-span-2 place-self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#6f6a6a" d="m13.292 12l-4.6-4.6l.708-.708L14.708 12L9.4 17.308l-.708-.708z"/></svg>
+            <span class="op-70">{{ option.value }}</span>
+          </div>
+        </n-el>
+      </ul>
+
+      <n-empty v-else size="large" class="h-[450px] flex-center" />
+    </n-scrollbar>
+
+    <template #footer>
+      <n-flex>
+        <div class="flex items-center gap-1">
+          <svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" /></g></svg>
+          <span>选择</span>
+        </div>
+        <div class="flex items-center gap-1">
+          <svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" /></g></svg>
+          <svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" /></g></svg>
+          <span>切换</span>
+        </div>
+        <div class="flex items-center gap-1">
+          <svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" /></g></svg>
+          <span>关闭</span>
+        </div>
+      </n-flex>
+    </template>
+  </n-modal>
+</template>
diff --git a/web/src/layout/components/Header/SystemMessage.vue b/web/src/layout/components/Header/SystemMessage.vue
new file mode 100644
index 0000000..943bbf2
--- /dev/null
+++ b/web/src/layout/components/Header/SystemMessage.vue
@@ -0,0 +1,129 @@
+<template>
+  <n-tabs v-model:value="currentTab" type="line" justify-content="space-evenly">
+    <n-tab-pane
+      v-for="(item, index) in notificationStore.getMessages"
+      :key="item.key"
+      :name="index"
+    >
+      <template #tab>
+        <div>
+          <span>{{ item.name }}</span>
+          <n-badge
+            v-bind="item.badgeProps"
+            :value="item.list.filter((message) => !message.isRead).length"
+            :max="99"
+            show-zero
+          />
+        </div>
+      </template>
+      <n-spin :show="loading">
+        <n-empty v-show="item.list.length === 0" description="无数据" :show-icon="false">
+          <template #extra>
+            <n-button size="small" @click="handleLoadMore"> 查看更多</n-button>
+          </template>
+        </n-empty>
+
+        <message-list :list="item.list" @read="handleRead" />
+      </n-spin>
+    </n-tab-pane>
+  </n-tabs>
+  <n-space v-if="showAction" justify="center" size="large" class="flex border-t">
+    <n-button class="act-btn" size="small" @click="handleClear">清空</n-button>
+    <n-button class="act-btn" size="small" @click="handleAllRead">全部已读</n-button>
+    <n-button class="act-btn" size="small" @click="handleLoadMore">查看更多</n-button>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import MessageList from './MessageList.vue';
+  import { notificationStoreWidthOut } from '@/store/modules/notification';
+  import { ReadAll, UpRead } from '@/api/apply/notice';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+  const notificationStore = notificationStoreWidthOut();
+  const loading = ref(false);
+  const currentTab = ref(0);
+  const showAction = computed(
+    () => notificationStore.getMessages[currentTab.value].list.length > 0
+  );
+
+  function handleRead(index: number) {
+    loading.value = true;
+    const message = notificationStore.getMessages[currentTab.value].list[index];
+    UpRead({ id: message.id })
+      .then(() => {
+        message.isRead = true;
+        if (!message.isRead) {
+          switch (message.type) {
+            case 1:
+              notificationStore.notifyUnread--;
+              break;
+            case 2:
+              notificationStore.noticeUnread--;
+              break;
+            case 3:
+              notificationStore.letterUnread--;
+              break;
+          }
+        }
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  function handleAllRead() {
+    loading.value = true;
+    ReadAll({ type: notificationStore.getMessages[currentTab.value].key })
+      .then(() => {
+        notificationStore.getMessages[currentTab.value].list.forEach((item) =>
+          Object.assign(item, { isRead: true })
+        );
+        switch (notificationStore.getMessages[currentTab.value].key) {
+          case 1:
+            notificationStore.notifyUnread = 0;
+            break;
+          case 2:
+            notificationStore.noticeUnread = 0;
+            break;
+          case 3:
+            notificationStore.letterUnread = 0;
+            break;
+        }
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  function handleClear() {
+    notificationStore.getMessages[currentTab.value].list = [];
+    switch (notificationStore.getMessages[currentTab.value].key) {
+      case 1:
+        notificationStore.notifyUnread = 0;
+        break;
+      case 2:
+        notificationStore.noticeUnread = 0;
+        break;
+      case 3:
+        notificationStore.letterUnread = 0;
+        break;
+    }
+  }
+
+  function handleLoadMore() {
+    router.push({
+      name: 'home_message',
+      query: {
+        type: notificationStore.getMessages[currentTab.value].key,
+      },
+    });
+  }
+</script>
+<style scoped>
+  .act-btn {
+    margin-top: 8px;
+  }
+</style>
diff --git a/web/src/layout/components/Header/components.ts b/web/src/layout/components/Header/components.ts
new file mode 100644
index 0000000..6014cbb
--- /dev/null
+++ b/web/src/layout/components/Header/components.ts
@@ -0,0 +1,37 @@
+import {
+  SettingOutlined,
+  SearchOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+  PoweroffOutlined,
+  GithubOutlined,
+  LockOutlined,
+  ReloadOutlined,
+  LogoutOutlined,
+  UserOutlined,
+  CheckOutlined,
+  BellOutlined,
+} from '@vicons/antd';
+
+import { Refresh, LanguageOutline } from '@vicons/ionicons5';
+
+export default {
+  SettingOutlined,
+  LockOutlined,
+  GithubOutlined,
+  SearchOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+  PoweroffOutlined,
+  ReloadOutlined,
+  LogoutOutlined,
+  UserOutlined,
+  CheckOutlined,
+  BellOutlined,
+  Refresh,
+  LanguageOutline,
+};
diff --git a/web/src/layout/components/Header/index.ts b/web/src/layout/components/Header/index.ts
new file mode 100644
index 0000000..6a454ed
--- /dev/null
+++ b/web/src/layout/components/Header/index.ts
@@ -0,0 +1,3 @@
+import PageHeader from './index.vue';
+
+export { PageHeader };
diff --git a/web/src/layout/components/Header/index.vue b/web/src/layout/components/Header/index.vue
new file mode 100644
index 0000000..8fd072a
--- /dev/null
+++ b/web/src/layout/components/Header/index.vue
@@ -0,0 +1,764 @@
+<template>
+  <div class="layout-header">
+    <!--顶部菜单-->
+    <div
+      class="layout-header-left"
+      v-if="navMode === 'horizontal' || (navMode === 'horizontal-mix' && mixMenu)"
+    >
+      <div class="logo" v-if="navMode === 'horizontal'">
+        <img src="~@/assets/images/logo.png" alt="" />
+        <h2 v-show="!collapsed" class="title">{{ projectName }}</h2>
+      </div>
+      <AsideMenu
+        @update:collapsed="updateMenu"
+        v-model:location="getMenuLocation"
+        :inverted="getInverted"
+        mode="horizontal"
+      />
+    </div>
+    <!--左侧菜单-->
+    <div class="layout-header-left" v-else>
+      <!-- 菜单收起 -->
+      <div
+        class="ml-1 layout-header-trigger layout-header-trigger-min"
+        @click="() => $emit('update:collapsed', !collapsed)"
+      >
+        <n-icon size="18" v-if="collapsed">
+          <MenuUnfoldOutlined />
+        </n-icon>
+        <n-icon size="18" v-else>
+          <MenuFoldOutlined />
+        </n-icon>
+      </div>
+      <!-- 刷新 -->
+      <div
+        class="mr-1 layout-header-trigger layout-header-trigger-min"
+        v-if="headerSetting.isReload"
+        @click="reloadPage"
+      >
+        <n-icon size="18">
+          <ReloadOutlined />
+        </n-icon>
+      </div>
+      <!-- 面包屑 -->
+      <n-breadcrumb v-if="crumbsSetting.show">
+        <template v-for="routeItem in breadcrumbList" :key="routeItem.name">
+          <n-breadcrumb-item>
+            <n-dropdown
+              v-if="routeItem.children.length"
+              :options="routeItem.children"
+              @select="dropdownSelect"
+            >
+              <span class="link-text">
+                <component
+                  v-if="crumbsSetting.showIcon && routeItem.meta.icon"
+                  :is="routeItem.meta.icon"
+                />
+                {{ routeItem.meta.title }}
+              </span>
+            </n-dropdown>
+            <span class="link-text" v-else>
+              <component
+                v-if="crumbsSetting.showIcon && routeItem.meta.icon"
+                :is="routeItem.meta.icon"
+              />
+              {{ routeItem.meta.title }}
+            </span>
+          </n-breadcrumb-item>
+        </template>
+      </n-breadcrumb>
+    </div>
+    <div class="layout-header-right">
+      <Search />
+      <!--      <div-->
+      <!--        class="layout-header-trigger layout-header-trigger-min"-->
+      <!--        v-for="item in iconList"-->
+      <!--        :key="item.icon.name"-->
+      <!--      >-->
+      <!--        <n-tooltip placement="bottom">-->
+      <!--          <template #trigger>-->
+      <!--            <n-icon size="18">-->
+      <!--              <component :is="item.icon" v-on="item.eventObject || {}" />-->
+      <!--            </n-icon>-->
+      <!--          </template>-->
+      <!--          <span>{{ item.tips }}</span>-->
+      <!--        </n-tooltip>-->
+      <!--      </div>-->
+
+      <div
+        class="layout-header-trigger layout-header-trigger-min"
+        v-for="item in iconList"
+        :key="item.icon.name"
+      >
+        <n-popover
+          placement="bottom"
+          v-if="item.icon === 'BellOutlined'"
+          trigger="click"
+          :width="getIsMobile ? 276 : 420"
+        >
+          <template #trigger>
+            <n-tooltip placement="bottom">
+              <template #trigger>
+                <n-badge :value="notificationStore.getUnreadCount()" :max="99" processing>
+                  <n-icon size="18">
+                    <BellOutlined />
+                  </n-icon>
+                </n-badge>
+              </template>
+              <span>{{ item.tips }}</span>
+            </n-tooltip>
+          </template>
+
+          <SystemMessage />
+        </n-popover>
+
+        <div v-else>
+          <n-tooltip placement="bottom">
+            <template #trigger>
+              <n-icon size="18">
+                <component :is="item.icon" v-on="item.eventObject || {}" />
+              </n-icon>
+            </template>
+            <span>{{ item.tips }}</span>
+          </n-tooltip>
+        </div>
+      </div>
+      <!--切换全屏-->
+      <div class="layout-header-trigger layout-header-trigger-min">
+        <n-tooltip placement="bottom">
+          <template #trigger>
+            <n-icon size="18">
+              <component :is="fullscreenIcon" @click="toggleFullScreen" />
+            </n-icon>
+          </template>
+          <span>全屏</span>
+        </n-tooltip>
+      </div>
+
+      <!-- 国际化 -->
+      <div
+        class="layout-header-trigger layout-header-trigger-min"
+        v-if="userStore.loginConfig?.i18nSwitch"
+      >
+        <n-dropdown
+          :value="i18nStore.getLocale()"
+          trigger="click"
+          @select="localeSelect"
+          :options="availableLocales"
+          show-arrow
+        >
+          <n-tooltip placement="bottom">
+            <template #trigger>
+              <n-icon size="18">
+                <LanguageOutline />
+              </n-icon>
+            </template>
+            <span>切换语言</span>
+          </n-tooltip>
+        </n-dropdown>
+      </div>
+
+      <!-- 个人中心 -->
+      <div class="layout-header-trigger layout-header-trigger-min">
+        <n-dropdown trigger="click" @select="avatarSelect" :options="avatarOptions" show-arrow>
+          <div class="avatar">
+            <n-avatar v-if="userStore.avatar" round :size="30" :src="userStore.avatar" />
+            <n-avatar v-else round :size="30">{{ userStore.realName }}</n-avatar>
+          </div>
+        </n-dropdown>
+      </div>
+      <!--设置-->
+      <div class="layout-header-trigger layout-header-trigger-min" @click="openSetting">
+        <n-tooltip placement="bottom-end">
+          <template #trigger>
+            <n-icon size="18" style="font-weight: bold">
+              <SettingOutlined />
+            </n-icon>
+          </template>
+          <span>项目配置</span>
+        </n-tooltip>
+      </div>
+    </div>
+  </div>
+  <!--项目配置-->
+  <ProjectSetting ref="drawerSetting" />
+
+  <template>
+    <n-notification-provider :max="3" />
+  </template>
+</template>
+
+<script lang="ts">
+  import {
+    defineComponent,
+    reactive,
+    toRefs,
+    ref,
+    computed,
+    unref,
+    watch,
+    h,
+    onMounted,
+  } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import components from './components';
+  import {
+    NDialogProvider,
+    useDialog,
+    useMessage,
+    NAvatar,
+    NTag,
+    NIcon,
+    useNotification,
+    NotificationReactive,
+    NButton,
+    NText,
+  } from 'naive-ui';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+  import { useUserStore } from '@/store/modules/user';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import ProjectSetting from './ProjectSetting.vue';
+  import { AsideMenu } from '@/layout/components/Menu';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { NotificationsOutline as NotificationsIcon } from '@vicons/ionicons5';
+  import SystemMessage from './SystemMessage.vue';
+  import { notificationStoreWidthOut } from '@/store/modules/notification';
+  import { getIcon } from '@/enums/systemMessageEnum';
+  import { availableLocales, useI18nStore } from '@/store/modules/i18n';
+  import Search from './Search.vue';
+
+  export default defineComponent({
+    name: 'PageHeader',
+    components: {
+      ...components,
+      NDialogProvider,
+      ProjectSetting,
+      AsideMenu,
+      SystemMessage,
+      Search,
+    },
+    props: {
+      collapsed: {
+        type: Boolean,
+      },
+      inverted: {
+        type: Boolean,
+      },
+    },
+    setup(props, { emit }) {
+      const i18nStore = useI18nStore();
+      const userStore = useUserStore();
+      const notificationStore = notificationStoreWidthOut();
+      const useLockscreen = useLockscreenStore();
+      const message = useMessage();
+      const dialog = useDialog();
+      const {
+        getNavMode,
+        getNavTheme,
+        getHeaderSetting,
+        getMenuSetting,
+        getCrumbsSetting,
+        getIsMobile,
+      } = useProjectSetting();
+
+      // const { username, avatar } = userStore?.info || {};
+      const drawerSetting = ref();
+      const projectName = userStore.loginConfig?.projectName;
+
+      const state = reactive({
+        // username: username || '',
+        // avatar: avatar || '',
+        fullscreenIcon: 'FullscreenOutlined',
+        navMode: getNavMode,
+        navTheme: getNavTheme,
+        headerSetting: getHeaderSetting,
+        crumbsSetting: getCrumbsSetting,
+      });
+
+      const getInverted = computed(() => {
+        const navTheme = unref(getNavTheme);
+        return ['light', 'header-dark'].includes(navTheme) ? props.inverted : !props.inverted;
+      });
+
+      const mixMenu = computed(() => {
+        return unref(getMenuSetting).mixMenu;
+      });
+
+      const getChangeStyle = computed(() => {
+        const { collapsed } = props;
+        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
+        return {
+          left: collapsed ? `${minMenuWidth}px` : `${menuWidth}px`,
+          width: `calc(100% - ${collapsed ? `${minMenuWidth}px` : `${menuWidth}px`})`,
+        };
+      });
+
+      const getMenuLocation = computed(() => {
+        return 'header';
+      });
+
+      const router = useRouter();
+      const route = useRoute();
+
+      const generator: any = (routerMap) => {
+        return routerMap.map((item) => {
+          const currentMenu = {
+            ...item,
+            label: item.meta.title,
+            key: item.name,
+            disabled: item.path === '/',
+          };
+          // 是否有子菜单，并递归处理
+          if (item.children && item.children.length > 0) {
+            // Recursion
+            currentMenu.children = generator(item.children, currentMenu);
+          }
+          return currentMenu;
+        });
+      };
+
+      const breadcrumbList = computed(() => {
+        return generator(route.matched);
+      });
+
+      const dropdownSelect = (key) => {
+        router.push({ name: key });
+      };
+
+      // 刷新页面
+      const reloadPage = () => {
+        const full = unref(route);
+        router.push({
+          path: '/redirect' + full.path,
+          query: full.query,
+        });
+      };
+
+      // 注销登录
+      const doLogout = () => {
+        dialog.info({
+          title: '提示',
+          content: '您确定要注销登录吗',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            userStore.logout().then(() => {
+              message.success('成功注销登录');
+              // 移除标签页
+              localStorage.removeItem(TABS_ROUTES);
+              router
+                .replace({
+                  name: 'Login',
+                  query: {
+                    redirect: route.fullPath,
+                  },
+                })
+                .finally(() => location.reload());
+            });
+          },
+          onNegativeClick: () => {},
+        });
+      };
+
+      // 切换全屏图标
+      const toggleFullscreenIcon = () =>
+        (state.fullscreenIcon =
+          document.fullscreenElement !== null ? 'FullscreenExitOutlined' : 'FullscreenOutlined');
+
+      // 监听全屏切换事件
+      document.addEventListener('fullscreenchange', toggleFullscreenIcon);
+
+      // 全屏切换
+      const toggleFullScreen = () => {
+        if (!document.fullscreenElement) {
+          document.documentElement.requestFullscreen();
+        } else {
+          if (document.exitFullscreen) {
+            document.exitFullscreen();
+          }
+        }
+      };
+
+      // 图标列表
+      const iconList = [
+        // {
+        //   icon: 'SearchOutlined',
+        //   tips: '搜索',
+        // },
+        {
+          icon: 'GithubOutlined',
+          tips: 'github',
+          eventObject: {
+            click: () => window.open('https://github.com/bufanyun/hotgo'),
+          },
+        },
+        {
+          icon: 'BellOutlined',
+          tips: '我的消息',
+        },
+        {
+          icon: 'LockOutlined',
+          tips: '锁屏',
+          eventObject: {
+            click: () => useLockscreen.setLock(true),
+          },
+        },
+      ];
+
+      function renderCustomHeader() {
+        return h(
+          'div',
+          {
+            style: 'display: flex; align-items: center; padding: 8px 12px;',
+          },
+          [
+            h('div', null, [
+              h('div', null, [
+                h(NText, { depth: 2 }, { default: () => userStore?.info?.username }),
+              ]),
+              h('div', { style: 'font-size: 12px;' }, [
+                h(NText, { depth: 3 }, { default: () => userStore?.info?.roleName }),
+              ]),
+            ]),
+          ]
+        );
+      }
+
+      const avatarOptions = [
+        {
+          key: 'header',
+          type: 'render',
+          render: renderCustomHeader,
+        },
+        {
+          type: 'divider',
+          key: 'd1',
+        },
+        {
+          label: '个人设置',
+          key: 1,
+        },
+        {
+          label: '注销登录',
+          key: 2,
+        },
+      ];
+
+      //头像下拉菜单
+      const avatarSelect = (key) => {
+        switch (key) {
+          case 1:
+            router.push({ name: 'home_account' });
+            break;
+          case 2:
+            doLogout();
+            break;
+        }
+      };
+
+      // 多久下拉菜单
+      const localeSelect = (key) => {
+        i18nStore.setLocale(key);
+        message.success('切换成功');
+        setTimeout(function () {
+          location.reload();
+        }, 800);
+      };
+
+      function openSetting() {
+        const { openDrawer } = drawerSetting.value;
+        openDrawer();
+      }
+
+      const notification = useNotification();
+      const getMessages = computed(() => {
+        return notificationStore.newMessage;
+      });
+      const nRef = ref<NotificationReactive | null>(null);
+      // 监听新消息，推送通知
+      watch(
+        getMessages,
+        (newVal, _oldVal) => {
+          if (newVal === null || newVal === undefined) {
+            return;
+          }
+
+          nRef.value = notification.create({
+            title: newVal.title,
+            description:
+              newVal.tagTitle === '' || newVal.tagTitle === undefined
+                ? undefined
+                : () =>
+                    h(
+                      NTag,
+                      {
+                        style: {
+                          marginRight: '6px',
+                        },
+                        type: newVal.tagProps?.type,
+                        bordered: false,
+                      },
+                      {
+                        default: () => newVal.tagTitle,
+                      }
+                    ),
+
+            content: () =>
+              newVal.content === '' || newVal.content === undefined
+                ? undefined
+                : h('div', { innerHTML: '<div>' + newVal.content + '</div>' }),
+            meta: newVal.createdAt,
+            avatar: () =>
+              newVal.senderAvatar !== '' || newVal.senderAvatar === undefined
+                ? h(NAvatar, {
+                    size: 'small',
+                    round: true,
+                    src: newVal.senderAvatar,
+                  })
+                : h(NIcon, null, { default: () => h(getIcon(newVal)) }),
+            action: () =>
+              h(
+                NButton,
+                {
+                  text: true,
+                  type: 'info',
+                  onClick: () => {
+                    (nRef.value as NotificationReactive).destroy();
+                    router.push({
+                      name: 'home_message',
+                      query: {
+                        type: newVal.type,
+                      },
+                    });
+                  },
+                },
+                {
+                  default: () => '查看详情',
+                }
+              ),
+            onClose: () => {
+              nRef.value = null;
+            },
+          });
+        },
+        { immediate: true, deep: true }
+      );
+
+      const updateMenu = () => {
+        emit('update:collapsed', !props.collapsed);
+      };
+
+      onMounted(() => {
+        if (notificationStore.getUnreadCount() === 0) {
+          notificationStore.pullMessages();
+        }
+      });
+      return {
+        ...toRefs(state),
+        iconList,
+        toggleFullScreen,
+        doLogout,
+        route,
+        dropdownSelect,
+        avatarOptions,
+        getChangeStyle,
+        avatarSelect,
+        breadcrumbList,
+        reloadPage,
+        drawerSetting,
+        openSetting,
+        getInverted,
+        getMenuLocation,
+        mixMenu,
+        NotificationsIcon,
+        SystemMessage,
+        notificationStore,
+        getIsMobile,
+        userStore,
+        updateMenu,
+        projectName,
+        localeSelect,
+        i18nStore,
+        availableLocales,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .layout-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+    height: @header-height;
+    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+    transition: all 0.2s ease-in-out;
+    width: 100%;
+    z-index: 11;
+
+    &-left {
+      display: flex;
+      align-items: center;
+
+      .logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 64px;
+        line-height: 64px;
+        overflow: hidden;
+        white-space: nowrap;
+        padding-left: 10px;
+        min-width: 200px;
+
+        img {
+          width: auto;
+          height: 32px;
+          margin-right: 10px;
+        }
+
+        .title {
+          margin-bottom: 0;
+          min-width: 132px;
+        }
+      }
+
+      ::v-deep(.ant-breadcrumb span:last-child .link-text) {
+        color: #515a6e;
+      }
+
+      .n-breadcrumb {
+        display: inline-block;
+      }
+
+      &-menu {
+        color: var(--text-color);
+      }
+    }
+
+    &-right {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+
+      .avatar {
+        display: flex;
+        align-items: center;
+        height: 64px;
+      }
+
+      > * {
+        cursor: pointer;
+      }
+    }
+
+    &-trigger {
+      display: inline-block;
+      width: 64px;
+      height: 64px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+
+      .n-icon {
+        display: flex;
+        align-items: center;
+        height: 64px;
+        line-height: 64px;
+      }
+
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.08);
+      }
+
+      .anticon {
+        font-size: 16px;
+        color: #515a6e;
+      }
+    }
+
+    &-trigger-min {
+      width: auto;
+      padding: 0 12px;
+    }
+  }
+
+  .layout-header-light {
+    background: #fff;
+    color: #515a6e;
+
+    .n-icon {
+      color: #515a6e;
+    }
+
+    .layout-header-left {
+      ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
+        color: #515a6e;
+      }
+    }
+
+    .layout-header-trigger {
+      &:hover {
+        background: #f8f8f9;
+      }
+    }
+  }
+
+  .layout-header-fix {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 200px;
+    z-index: 11;
+  }
+
+  ::v-deep(.menu-server-link) {
+    color: #515a6e;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  .action-items-wrapper {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+
+    .action-item {
+      min-width: 40px;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        cursor: pointer;
+        color: var(--primary-color-hover);
+      }
+    }
+
+    .badge-action-item {
+      cursor: pointer;
+      margin-right: 30px;
+    }
+  }
+
+  :deep(.n-input .n-input__border, .n-input .n-input__state-border) {
+    border: none;
+    border-bottom: 1px solid currentColor;
+  }
+
+  :deep(.el-input__inner) {
+    border: none !important;
+    height: 35px;
+    line-height: 35px;
+    color: currentColor !important;
+    background-color: transparent !important;
+  }
+
+  :deep(sup) {
+    top: 1.3em;
+  }
+</style>
diff --git a/web/src/layout/components/Logo/index.ts b/web/src/layout/components/Logo/index.ts
new file mode 100644
index 0000000..1a63b71
--- /dev/null
+++ b/web/src/layout/components/Logo/index.ts
@@ -0,0 +1,3 @@
+import Logo from './index.vue';
+
+export { Logo };
diff --git a/web/src/layout/components/Logo/index.vue b/web/src/layout/components/Logo/index.vue
new file mode 100644
index 0000000..06b0ad6
--- /dev/null
+++ b/web/src/layout/components/Logo/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="logo">
+    <img src="~@/assets/images/logo.png" alt="" :class="{ 'mr-2': !collapsed }" />
+    <h2 v-show="!collapsed" class="title">{{ projectName }}</h2>
+  </div>
+</template>
+
+<script>
+  import { useUserStore } from '@/store/modules/user';
+
+  export default {
+    name: 'Index',
+    props: {
+      collapsed: {
+        type: Boolean,
+      },
+    },
+    setup() {
+      const userStore = useUserStore();
+      const projectName = userStore.loginConfig?.projectName;
+      return {
+        projectName,
+      };
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 64px;
+    line-height: 64px;
+    overflow: hidden;
+    white-space: nowrap;
+
+    img {
+      width: auto;
+      height: 30px;
+      border-radius: 20px;
+    }
+
+    .title {
+      margin-bottom: 0px;
+    }
+  }
+</style>
diff --git a/web/src/layout/components/Main/index.ts b/web/src/layout/components/Main/index.ts
new file mode 100644
index 0000000..f63218e
--- /dev/null
+++ b/web/src/layout/components/Main/index.ts
@@ -0,0 +1,3 @@
+import MainView from './index.vue';
+
+export { MainView };
diff --git a/web/src/layout/components/Main/index.vue b/web/src/layout/components/Main/index.vue
new file mode 100644
index 0000000..5600c9a
--- /dev/null
+++ b/web/src/layout/components/Main/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <RouterView>
+    <template #default="{ Component, route }">
+      {{ setKeepAlive(route) }}
+      <template v-if="mode === 'production'">
+        <transition :name="getTransitionName" appear mode="out-in">
+          <div>
+            <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
+              <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+            <component :is="Component" v-else :key="route.fullPath" />
+          </div>
+        </transition>
+      </template>
+      <template v-else>
+        <keep-alive v-if="keepAliveComponents.length" :include="keepAliveComponents">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+        <component :is="Component" v-else :key="route.fullPath" />
+      </template>
+    </template>
+  </RouterView>
+</template>
+
+<script>
+  import { computed, defineComponent, unref } from 'vue';
+  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { useRouter } from 'vue-router';
+
+  export default defineComponent({
+    name: 'MainView',
+    components: {},
+    props: {
+      notNeedKey: {
+        type: Boolean,
+        default: false,
+      },
+      animate: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    setup() {
+      const mode = import.meta.env.MODE;
+      const router = useRouter();
+      const { getIsPageAnimate, getPageAnimateType } = useProjectSetting();
+      const asyncRouteStore = useAsyncRouteStore();
+      const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);
+      const getTransitionName = computed(() => {
+        return unref(getIsPageAnimate) ? unref(getPageAnimateType) : '';
+      });
+
+      function getCurrentComponentName() {
+        const currentMatched = router.currentRoute.value.matched;
+        const currentComponent = currentMatched[currentMatched.length - 1].components.default;
+        return currentComponent.name || currentComponent.__name;
+      }
+
+      function setKeepAlive(route) {
+        if (!route?.meta?.keepAlive) {
+          return;
+        }
+
+        const currentName = getCurrentComponentName();
+        if (currentName === undefined || route.name === undefined) {
+          return;
+        }
+        if (!keepAliveComponents.value.includes(currentName)) {
+          asyncRouteStore.keepAliveComponents.push(currentName);
+        }
+      }
+
+      return {
+        keepAliveComponents,
+        getTransitionName,
+        setKeepAlive,
+        mode,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/layout/components/Menu/index.ts b/web/src/layout/components/Menu/index.ts
new file mode 100644
index 0000000..0e4f00f
--- /dev/null
+++ b/web/src/layout/components/Menu/index.ts
@@ -0,0 +1,3 @@
+import AsideMenu from './index.vue';
+
+export { AsideMenu };
diff --git a/web/src/layout/components/Menu/index.vue b/web/src/layout/components/Menu/index.vue
new file mode 100644
index 0000000..3b52932
--- /dev/null
+++ b/web/src/layout/components/Menu/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <NMenu
+    :options="menus"
+    :inverted="inverted"
+    :mode="mode"
+    :collapsed="collapsed"
+    :collapsed-width="64"
+    :collapsed-icon-size="20"
+    :indent="24"
+    :expanded-keys="openKeys"
+    :value="getSelectedKeys"
+    @update:value="clickMenuItem"
+    @update:expanded-keys="menuExpanded"
+  />
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { generatorMenu, generatorMenuMix } from '@/utils';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+
+  export default defineComponent({
+    name: 'Menu',
+    components: {},
+    props: {
+      mode: {
+        // 菜单模式
+        type: String,
+        default: 'vertical',
+      },
+      collapsed: {
+        // 侧边栏菜单是否收起
+        type: Boolean,
+      },
+      //位置
+      location: {
+        type: String,
+        default: 'left',
+      },
+    },
+    emits: ['update:collapsed', 'clickMenuItem'],
+    setup(props, { emit }) {
+      // 当前路由
+      const currentRoute = useRoute();
+      const router = useRouter();
+      const asyncRouteStore = useAsyncRouteStore();
+      const settingStore = useProjectSettingStore();
+      const menus = ref<any[]>([]);
+      const selectedKeys = ref<string>(currentRoute.name as string);
+      const headerMenuSelectKey = ref<string>('');
+
+      const { getNavMode } = useProjectSetting();
+
+      const navMode = getNavMode;
+
+      // 获取当前打开的子菜单
+      const matched = currentRoute.matched;
+
+      const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
+
+      const state = reactive({
+        openKeys: getOpenKeys,
+      });
+
+      const inverted = computed(() => {
+        return ['dark', 'header-dark'].includes(settingStore.navTheme);
+      });
+
+      const getSelectedKeys = computed(() => {
+        let location = props.location;
+        return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
+          ? unref(selectedKeys)
+          : unref(headerMenuSelectKey);
+      });
+
+      // 监听分割菜单
+      watch(
+        () => settingStore.menuSetting.mixMenu,
+        () => {
+          updateMenu();
+          if (props.collapsed) {
+            emit('update:collapsed', !props.collapsed);
+          }
+        }
+      );
+
+      // 监听菜单收缩状态
+      // watch(
+      //   () => props.collapsed,
+      //   (newVal) => {
+      //   }
+      // );
+
+      // 跟随页面路由变化，切换菜单选中状态
+      watch(
+        () => currentRoute.fullPath,
+        () => {
+          updateMenu();
+          const matched = currentRoute.matched;
+          state.openKeys = matched.map((item) => item.name);
+          const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
+          selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
+        }
+      );
+
+      function updateMenu() {
+        if (!settingStore.menuSetting.mixMenu) {
+          menus.value = generatorMenu(asyncRouteStore.getMenus);
+        } else {
+          //混合菜单
+          const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
+          menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
+          const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
+          headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
+        }
+      }
+
+      // 点击菜单
+      function clickMenuItem(key: string) {
+        if (/http(s)?:/.test(key)) {
+          window.open(key);
+        } else {
+          if (getSelectedKeys.value !== key){
+            router.push({ name: key });
+          }
+        }
+        emit('clickMenuItem' as any, key);
+      }
+
+      //展开菜单
+      function menuExpanded(openKeys: string[]) {
+        if (!openKeys) return;
+        const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
+        const isExistChildren = findChildrenLen(latestOpenKey as string);
+        state.openKeys = isExistChildren ? (latestOpenKey ? [latestOpenKey] : []) : openKeys;
+      }
+
+      //查找是否存在子路由
+      function findChildrenLen(key: string) {
+        if (!key) return false;
+        const subRouteChildren: string[] = [];
+        for (const { children, key } of unref(menus)) {
+          if (children && children.length) {
+            subRouteChildren.push(key as string);
+          }
+        }
+        return subRouteChildren.includes(key);
+      }
+
+      onMounted(() => {
+        updateMenu();
+        const matched = currentRoute.matched;
+        state.openKeys = matched.map((item) => item.name);
+        const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
+        selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
+      });
+
+      return {
+        ...toRefs(state),
+        inverted,
+        menus,
+        selectedKeys,
+        headerMenuSelectKey,
+        getSelectedKeys,
+        clickMenuItem,
+        menuExpanded,
+      };
+    },
+  });
+</script>
diff --git a/web/src/layout/components/TagsView/index.ts b/web/src/layout/components/TagsView/index.ts
new file mode 100644
index 0000000..66ff085
--- /dev/null
+++ b/web/src/layout/components/TagsView/index.ts
@@ -0,0 +1,3 @@
+import TabsView from './index.vue';
+
+export { TabsView };
diff --git a/web/src/layout/components/TagsView/index.vue b/web/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..23e037a
--- /dev/null
+++ b/web/src/layout/components/TagsView/index.vue
@@ -0,0 +1,686 @@
+<template>
+  <div
+    class="tabs-view"
+    :class="{
+      'tabs-view-fix': multiTabsSetting.fixed,
+      'tabs-view-fixed-header': isMultiHeaderFixed,
+      'tabs-view-default-background': getDarkTheme === false,
+      'tabs-view-dark-background': getDarkTheme === true,
+    }"
+    :style="getChangeStyle"
+  >
+    <div class="tabs-view-main">
+      <div ref="navWrap" class="tabs-card" :class="{ 'tabs-card-scrollable': scrollable }">
+        <span
+          class="tabs-card-prev"
+          :class="{ 'tabs-card-prev-hide': !scrollable }"
+          @click="scrollPrev"
+        >
+          <n-icon size="16" color="#515a6e">
+            <LeftOutlined />
+          </n-icon>
+        </span>
+        <span
+          class="tabs-card-next"
+          :class="{ 'tabs-card-next-hide': !scrollable }"
+          @click="scrollNext"
+        >
+          <n-icon size="16" color="#515a6e">
+            <RightOutlined />
+          </n-icon>
+        </span>
+        <div ref="navScroll" class="tabs-card-scroll">
+          <Draggable :list="tabsList" animation="300" item-key="fullPath" class="flex">
+            <template #item="{ element }">
+              <div
+                :id="`tag${element.fullPath.split('/').join('\/')}`"
+                class="tabs-card-scroll-item"
+                :class="{ 'active-item': activeKey === element.fullPath }"
+                @click.stop="goPage(element)"
+                @contextmenu="handleContextMenu($event, element)"
+              >
+                <span>{{ element.meta.title }}</span>
+                <n-icon size="14" @click.stop="closeTabItem(element)" v-if="!element.meta.affix">
+                  <CloseOutlined />
+                </n-icon>
+              </div>
+            </template>
+          </Draggable>
+        </div>
+      </div>
+      <div class="tabs-close">
+        <n-dropdown
+          trigger="hover"
+          @select="closeHandleSelect"
+          placement="bottom-end"
+          :options="TabsMenuOptions"
+        >
+          <div class="tabs-close-btn">
+            <n-icon size="16" color="#515a6e">
+              <DownOutlined />
+            </n-icon>
+          </div>
+        </n-dropdown>
+      </div>
+      <n-dropdown
+        :show="showDropdown"
+        :x="dropdownX"
+        :y="dropdownY"
+        @clickoutside="onClickOutside"
+        placement="bottom-start"
+        @select="closeHandleSelect"
+        :options="TabsMenuOptions"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    defineComponent,
+    reactive,
+    computed,
+    ref,
+    toRefs,
+    unref,
+    provide,
+    watch,
+    onMounted,
+    nextTick,
+  } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { storage } from '@/utils/Storage';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+  import { useTabsViewStore } from '@/store/modules/tabsView';
+  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { RouteItem } from '@/store/modules/tabsView';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { useMessage } from 'naive-ui';
+  import Draggable from 'vuedraggable';
+  import { PageEnum } from '@/enums/pageEnum';
+  import {
+    DownOutlined,
+    ReloadOutlined,
+    CloseOutlined,
+    ColumnWidthOutlined,
+    MinusOutlined,
+    LeftOutlined,
+    RightOutlined,
+  } from '@vicons/antd';
+  import { renderIcon } from '@/utils';
+  import elementResizeDetectorMaker from 'element-resize-detector';
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useThemeVars } from 'naive-ui';
+  import { useGo } from '@/hooks/web/usePage';
+
+  export default defineComponent({
+    name: 'TabsView',
+    components: {
+      DownOutlined,
+      CloseOutlined,
+      LeftOutlined,
+      RightOutlined,
+      Draggable,
+    },
+    props: {
+      collapsed: {
+        type: Boolean,
+      },
+    },
+    setup(props) {
+      const { getDarkTheme, getAppTheme } = useDesignSetting();
+      const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting, getIsMobile } =
+        useProjectSetting();
+      const settingStore = useProjectSettingStore();
+
+      const message = useMessage();
+      const route = useRoute();
+      const router = useRouter();
+      const tabsViewStore = useTabsViewStore();
+      const asyncRouteStore = useAsyncRouteStore();
+      const navScroll: any = ref(null);
+      const navWrap: any = ref(null);
+      const isCurrent = ref(false);
+      const go = useGo();
+
+      const themeVars = useThemeVars();
+
+      const getCardColor = computed(() => {
+        return themeVars.value.cardColor;
+      });
+
+      const getBaseColor = computed(() => {
+        return themeVars.value.textColor1;
+      });
+
+      const state = reactive({
+        activeKey: route.fullPath,
+        scrollable: false,
+        dropdownX: 0,
+        dropdownY: 0,
+        showDropdown: false,
+        isMultiHeaderFixed: false,
+        multiTabsSetting: getMultiTabsSetting,
+      });
+
+      // 获取简易的路由对象
+      const getSimpleRoute = (route): RouteItem => {
+        const { fullPath, hash, meta, name, params, path, query } = route;
+        return { fullPath, hash, meta, name, params, path, query };
+      };
+
+      const isMixMenuNoneSub = computed(() => {
+        const mixMenu = settingStore.menuSetting.mixMenu;
+        const navMode = unref(getNavMode);
+        if (unref(navMode) != 'horizontal-mix') return true;
+        return !(unref(navMode) === 'horizontal-mix' && mixMenu && route.meta.isRoot);
+      });
+
+      //动态组装样式 菜单缩进
+      const getChangeStyle = computed(() => {
+        const { collapsed } = props;
+        const navMode = unref(getNavMode);
+        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
+        const { fixed }: any = unref(getMultiTabsSetting);
+        let lenNum =
+          navMode === 'horizontal' || !isMixMenuNoneSub.value
+            ? '0px'
+            : collapsed
+            ? `${minMenuWidth}px`
+            : `${menuWidth}px`;
+
+        if (getIsMobile.value) {
+          return {
+            left: '0px',
+            width: '100%',
+          };
+        }
+        return {
+          left: lenNum,
+          width: `calc(100% - ${!fixed ? '0px' : lenNum})`,
+        };
+      });
+
+      //tags 右侧下拉菜单
+      const TabsMenuOptions = computed(() => {
+        const isDisabled = unref(tabsList).length <= 1;
+        return [
+          {
+            label: '刷新当前',
+            key: '1',
+            icon: renderIcon(ReloadOutlined),
+          },
+          {
+            label: `关闭当前`,
+            key: '2',
+            disabled: unref(isCurrent) || isDisabled,
+            icon: renderIcon(CloseOutlined),
+          },
+          {
+            label: '关闭其他',
+            key: '3',
+            disabled: isDisabled,
+            icon: renderIcon(ColumnWidthOutlined),
+          },
+          {
+            label: '关闭全部',
+            key: '4',
+            disabled: isDisabled,
+            icon: renderIcon(MinusOutlined),
+          },
+        ];
+      });
+
+      let cacheRoutes: RouteItem[] = [];
+      const simpleRoute = getSimpleRoute(route);
+      try {
+        const routesStr = storage.get(TABS_ROUTES) as string | null | undefined;
+        cacheRoutes = routesStr ? JSON.parse(routesStr) : [simpleRoute];
+      } catch (e) {
+        cacheRoutes = [simpleRoute];
+      }
+
+      // 将最新的路由信息同步到 localStorage 中
+      const routes = router.getRoutes();
+      cacheRoutes.forEach((cacheRoute) => {
+        const route = routes.find((route) => route.path === cacheRoute.path);
+        if (route) {
+          cacheRoute.meta = route.meta || cacheRoute.meta;
+          cacheRoute.name = (route.name || cacheRoute.name) as string;
+        }
+      });
+
+      // 初始化标签页
+      tabsViewStore.initTabs(cacheRoutes);
+
+      //监听滚动条
+      function onScroll(e) {
+        let scrollTop =
+          e.target.scrollTop ||
+          document.documentElement.scrollTop ||
+          window.pageYOffset ||
+          document.body.scrollTop; // 滚动条偏移量
+        state.isMultiHeaderFixed = !!(
+          !getHeaderSetting.value.fixed &&
+          getMultiTabsSetting.value.fixed &&
+          scrollTop >= 64
+        );
+      }
+
+      window.addEventListener('scroll', onScroll, true);
+
+      // 移除缓存组件名称
+      const delKeepAliveCompName = () => {
+        if (route.meta.keepAlive) {
+          const name = router.currentRoute.value.matched.find((item) => item.name == route.name)
+            ?.components?.default.name;
+          if (name) {
+            asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter(
+              (item) => item != name
+            );
+          }
+        }
+      };
+
+      // 标签页列表
+      const tabsList: any = computed(() => tabsViewStore.tabsList);
+      const whiteList: string[] = [
+        PageEnum.BASE_LOGIN_NAME,
+        PageEnum.REDIRECT_NAME,
+        PageEnum.ERROR_PAGE_NAME,
+      ];
+
+      watch(
+        () => route.fullPath,
+        (to) => {
+          if (whiteList.includes(route.name as string)) return;
+          state.activeKey = to;
+          tabsViewStore.addTabs(getSimpleRoute(route));
+          updateNavScroll(true);
+        },
+        { immediate: true }
+      );
+
+      // 在页面关闭或刷新之前，保存数据
+      window.addEventListener('beforeunload', () => {
+        storage.set(TABS_ROUTES, JSON.stringify(tabsList.value));
+      });
+
+      // 关闭当前页面
+      const removeTab = (route) => {
+        if (tabsList.value.length === 1) {
+          return message.warning('这已经是最后一页，不能再关闭了！');
+        }
+        delKeepAliveCompName();
+        tabsViewStore.closeCurrentTab(route);
+        // 如果关闭的是当前页
+        if (state.activeKey === route.fullPath) {
+          const currentRoute = tabsList.value[Math.max(0, tabsList.value.length - 1)];
+          state.activeKey = currentRoute.fullPath;
+          router.push(currentRoute);
+        }
+        updateNavScroll();
+      };
+
+      // 刷新页面
+      const reloadPage = () => {
+        delKeepAliveCompName();
+        const full = unref(route);
+        router.push({
+          path: '/redirect' + full.path,
+          query: full.query,
+        });
+      };
+
+      // 注入刷新页面方法
+      provide('reloadPage', reloadPage);
+
+      // 关闭左侧
+      const closeLeft = (route) => {
+        tabsViewStore.closeLeftTabs(route);
+        state.activeKey = route.fullPath;
+        router.replace(route.fullPath);
+        updateNavScroll();
+      };
+
+      // 关闭右侧
+      const closeRight = (route) => {
+        tabsViewStore.closeRightTabs(route);
+        state.activeKey = route.fullPath;
+        router.replace(route.fullPath);
+        updateNavScroll();
+      };
+
+      // 关闭其他
+      const closeOther = (route) => {
+        tabsViewStore.closeOtherTabs(route);
+        state.activeKey = route.fullPath;
+        router.replace(route.fullPath);
+        updateNavScroll();
+      };
+
+      // 关闭全部
+      const closeAll = () => {
+        tabsViewStore.closeAllTabs();
+        router.replace(PageEnum.BASE_HOME);
+        updateNavScroll();
+      };
+
+      //tab 操作
+      const closeHandleSelect = (key) => {
+        switch (key) {
+          //刷新
+          case '1':
+            reloadPage();
+            break;
+          //关闭
+          case '2':
+            removeTab(route);
+            break;
+          //关闭其他
+          case '3':
+            closeOther(route);
+            break;
+          //关闭所有
+          case '4':
+            closeAll();
+            break;
+        }
+        updateNavScroll();
+        state.showDropdown = false;
+      };
+
+      /**
+       * @param value 要滚动到的位置
+       * @param amplitude 每次滚动的长度
+       */
+      function scrollTo(value: number, amplitude: number) {
+        const currentScroll = navScroll.value.scrollLeft;
+        const scrollWidth =
+          (amplitude > 0 && currentScroll + amplitude >= value) ||
+          (amplitude < 0 && currentScroll + amplitude <= value)
+            ? value
+            : currentScroll + amplitude;
+        navScroll.value && navScroll.value.scrollTo(scrollWidth, 0);
+        if (scrollWidth === value) return;
+        return window.requestAnimationFrame(() => scrollTo(value, amplitude));
+      }
+
+      function scrollPrev() {
+        const containerWidth = navScroll.value.offsetWidth;
+        const currentScroll = navScroll.value.scrollLeft;
+
+        if (!currentScroll) return;
+        const scrollLeft = currentScroll > containerWidth ? currentScroll - containerWidth : 0;
+        scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
+      }
+
+      function scrollNext() {
+        const containerWidth = navScroll.value.offsetWidth;
+        const navWidth = navScroll.value.scrollWidth;
+        const currentScroll = navScroll.value.scrollLeft;
+
+        if (navWidth - currentScroll <= containerWidth) return;
+        const scrollLeft =
+          navWidth - currentScroll > containerWidth * 2
+            ? currentScroll + containerWidth
+            : navWidth - containerWidth;
+        scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
+      }
+
+      /**
+       * @param autoScroll 是否开启自动滚动功能
+       */
+      async function updateNavScroll(autoScroll?: boolean) {
+        await nextTick();
+        if (!navScroll.value) return;
+        const containerWidth = navScroll.value.offsetWidth;
+        const navWidth = navScroll.value.scrollWidth;
+
+        if (containerWidth < navWidth) {
+          state.scrollable = true;
+          if (autoScroll) {
+            let tagList = navScroll.value.querySelectorAll('.tabs-card-scroll-item') || [];
+            [...tagList].forEach((tag: HTMLElement) => {
+              // fix SyntaxError
+              if (tag.id === `tag${state.activeKey.split('/').join('\/')}`) {
+                tag.scrollIntoView && tag.scrollIntoView();
+              }
+            });
+          }
+        } else {
+          state.scrollable = false;
+        }
+      }
+
+      function handleResize() {
+        updateNavScroll(true);
+      }
+
+      function handleContextMenu(e, item) {
+        e.preventDefault();
+        isCurrent.value = PageEnum.BASE_HOME_REDIRECT === item.path;
+        state.showDropdown = false;
+        nextTick().then(() => {
+          state.showDropdown = true;
+          state.dropdownX = e.clientX;
+          state.dropdownY = e.clientY;
+        });
+      }
+
+      function onClickOutside() {
+        state.showDropdown = false;
+      }
+
+      //tags 跳转页面
+      function goPage(e) {
+        const { fullPath } = e;
+        if (fullPath === route.fullPath) return;
+        state.activeKey = fullPath;
+        go(e, true);
+      }
+
+      //删除tab
+      function closeTabItem(e) {
+        const { fullPath } = e;
+        const routeInfo = tabsList.value.find((item) => item.fullPath == fullPath);
+        removeTab(routeInfo);
+      }
+
+      onMounted(() => {
+        onElementResize();
+      });
+
+      function onElementResize() {
+        let observer;
+        observer = elementResizeDetectorMaker();
+        observer.listenTo(navWrap.value, handleResize);
+      }
+
+      watch(
+        () => tabsViewStore.signal,
+        (key) => {
+          if (key !== '') {
+            closeHandleSelect(key);
+            tabsViewStore.closeSignal('');
+          }
+        }
+      );
+
+      return {
+        ...toRefs(state),
+        navWrap,
+        navScroll,
+        route,
+        tabsList,
+        goPage,
+        closeTabItem,
+        closeLeft,
+        closeRight,
+        closeOther,
+        closeAll,
+        reloadPage,
+        getChangeStyle,
+        TabsMenuOptions,
+        closeHandleSelect,
+        scrollNext,
+        scrollPrev,
+        handleContextMenu,
+        onClickOutside,
+        getDarkTheme,
+        getAppTheme,
+        getCardColor,
+        getBaseColor,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .tabs-view {
+    width: 100%;
+    padding: 6px 0;
+    display: flex;
+    transition: all 0.2s ease-in-out;
+
+    &-main {
+      height: 32px;
+      display: flex;
+      max-width: 100%;
+      min-width: 100%;
+
+      .tabs-card {
+        -webkit-box-flex: 1;
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow: hidden;
+        position: relative;
+
+        .tabs-card-prev,
+        .tabs-card-next {
+          width: 32px;
+          text-align: center;
+          position: absolute;
+          line-height: 32px;
+          cursor: pointer;
+
+          .n-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 32px;
+            width: 32px;
+          }
+        }
+
+        .tabs-card-prev {
+          left: 0;
+        }
+
+        .tabs-card-next {
+          right: 0;
+        }
+
+        .tabs-card-next-hide,
+        .tabs-card-prev-hide {
+          display: none;
+        }
+
+        &-scroll {
+          white-space: nowrap;
+          overflow: hidden;
+
+          &-item {
+            background: v-bind(getCardColor);
+            color: v-bind(getBaseColor);
+            height: 32px;
+            padding: 6px 16px 4px;
+            border-radius: 3px;
+            margin-right: 6px;
+            cursor: pointer;
+            display: inline-block;
+            position: relative;
+            flex: 0 0 auto;
+
+            span {
+              float: left;
+              vertical-align: middle;
+            }
+
+            &:hover {
+              color: #515a6e;
+            }
+
+            .n-icon {
+              height: 22px;
+              width: 21px;
+              margin-right: -6px;
+              position: relative;
+              vertical-align: middle;
+              text-align: center;
+              color: #808695;
+
+              &:hover {
+                color: #515a6e !important;
+              }
+
+              svg {
+                height: 21px;
+                display: inline-block;
+              }
+            }
+          }
+
+          .active-item {
+            color: v-bind(getAppTheme);
+          }
+        }
+      }
+
+      .tabs-card-scrollable {
+        padding: 0 32px;
+        overflow: hidden;
+      }
+    }
+
+    .tabs-close {
+      min-width: 32px;
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      background: var(--color);
+      border-radius: 2px;
+      cursor: pointer;
+      //margin-right: 10px;
+
+      &-btn {
+        color: var(--color);
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .tabs-view-default-background {
+    background: #f5f7f9;
+  }
+
+  .tabs-view-dark-background {
+    background: #101014;
+  }
+
+  .tabs-view-fix {
+    position: fixed;
+    z-index: 5;
+    padding: 6px 19px 6px 10px;
+    left: 200px;
+  }
+
+  .tabs-view-fixed-header {
+    top: 0;
+  }
+</style>
diff --git a/web/src/layout/index.vue b/web/src/layout/index.vue
new file mode 100644
index 0000000..b6f4352
--- /dev/null
+++ b/web/src/layout/index.vue
@@ -0,0 +1,278 @@
+<template>
+  <n-layout class="layout" :position="fixedMenu" has-sider>
+    <n-layout-sider
+      v-if="
+        !isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')
+      "
+      show-trigger="bar"
+      @collapse="collapsed = true"
+      :position="fixedMenu"
+      @expand="collapsed = false"
+      :collapsed="collapsed"
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="leftMenuWidth"
+      :native-scrollbar="false"
+      :inverted="inverted"
+      class="layout-sider"
+    >
+      <Logo :collapsed="collapsed" />
+      <AsideMenu v-model:collapsed="collapsed" v-model:location="getMenuLocation" />
+    </n-layout-sider>
+
+    <n-drawer
+      v-model:show="showSideDrawder"
+      :width="menuWidth"
+      :placement="'left'"
+      class="layout-side-drawer"
+    >
+      <Logo :collapsed="collapsed" />
+      <AsideMenu @clickMenuItem="collapsed = false" />
+    </n-drawer>
+
+    <n-layout :inverted="inverted">
+      <n-layout-header :inverted="getHeaderInverted" :position="fixedHeader">
+        <PageHeader v-model:collapsed="collapsed" :inverted="inverted" />
+      </n-layout-header>
+
+      <n-layout-content
+        class="layout-content"
+        :class="{ 'layout-default-background': getDarkTheme === false }"
+      >
+        <div
+          class="layout-content-main"
+          :class="{
+            'layout-content-main-fix': fixedMulti,
+            'fluid-header': fixedHeader === 'static',
+          }"
+        >
+          <TabsView v-if="isMultiTabs" v-model:collapsed="collapsed" />
+          <div
+            class="main-view"
+            :class="{
+              'main-view-fix': fixedMulti,
+              noMultiTabs: !isMultiTabs,
+              'mt-3': !isMultiTabs,
+            }"
+          >
+            <MainView />
+          </div>
+        </div>
+      </n-layout-content>
+      <n-back-top :right="100" />
+    </n-layout>
+  </n-layout>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, computed, onMounted } from 'vue';
+  import { Logo } from './components/Logo';
+  import { TabsView } from './components/TagsView';
+  import { MainView } from './components/Main';
+  import { AsideMenu } from './components/Menu';
+  import { PageHeader } from './components/Header';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useLoadingBar } from 'naive-ui';
+  import { useRoute } from 'vue-router';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useI18nStore } from '@/store/modules/i18n';
+
+  const { getDarkTheme } = useDesignSetting();
+  const {
+    // getShowFooter,
+    getNavMode,
+    getNavTheme,
+    getHeaderSetting,
+    getMenuSetting,
+    getMultiTabsSetting,
+  } = useProjectSetting();
+
+  const route = useRoute();
+  const settingStore = useProjectSettingStore();
+  const i18nStore = useI18nStore();
+
+  const navMode = getNavMode;
+
+  const collapsed = ref<boolean>(false);
+
+  const { mobileWidth, menuWidth } = unref(getMenuSetting);
+
+  const isMobile = computed<boolean>({
+    get: () => settingStore.getIsMobile,
+    set: (val) => settingStore.setIsMobile(val),
+  });
+
+  const fixedHeader = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
+  });
+
+
+  const isMixMenuNoneSub = computed(() => {
+    const mixMenu = settingStore.menuSetting.mixMenu;
+    // const currentRoute = useRoute();
+    if (unref(navMode) != 'horizontal-mix') return true;
+    if (unref(navMode) === 'horizontal-mix' && mixMenu && route.meta.isRoot) {
+      return false;
+    }
+    return true;
+  });
+
+  const fixedMenu = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
+  });
+
+  const isMultiTabs = computed(() => {
+    return unref(getMultiTabsSetting).show;
+  });
+
+  const fixedMulti = computed(() => {
+    return unref(getMultiTabsSetting).fixed;
+  });
+
+  const inverted = computed(() => {
+    return ['dark', 'header-dark'].includes(unref(getNavTheme));
+  });
+
+  const getHeaderInverted = computed(() => {
+    const navTheme = unref(getNavTheme);
+    return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+  });
+
+  const leftMenuWidth = computed(() => {
+    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    return collapsed.value ? minMenuWidth : menuWidth;
+  });
+
+  // const getChangeStyle = computed(() => {
+  //   const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+  //   return {
+  //     'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
+  //   };
+  // });
+
+  const getMenuLocation = computed(() => {
+    return 'left';
+  });
+
+  // 控制显示或隐藏移动端侧边栏
+  const showSideDrawder = computed({
+    get: () => isMobile.value && collapsed.value,
+    set: (val) => (collapsed.value = val),
+  });
+
+  //判断是否触发移动端模式
+  const checkMobileMode = () => {
+    if (document.body.clientWidth <= mobileWidth) {
+      isMobile.value = true;
+    } else {
+      isMobile.value = false;
+    }
+    collapsed.value = false;
+  };
+
+  const watchWidth = () => {
+    const Width = document.body.clientWidth;
+    if (Width <= 950) {
+      collapsed.value = true;
+    } else collapsed.value = false;
+
+    checkMobileMode();
+  };
+
+  onMounted(() => {
+    checkMobileMode();
+    window.addEventListener('resize', watchWidth);
+    i18nStore.initLocale();
+    //挂载在 window 方便与在js中使用
+    window['$loading'] = useLoadingBar();
+    window['$loading'].finish();
+  });
+</script>
+
+<style lang="less">
+  .layout-side-drawer {
+    background-color: rgb(0, 20, 40);
+
+    .layout-sider {
+      min-height: 100vh;
+      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+      position: relative;
+      z-index: 13;
+      transition: all 0.2s ease-in-out;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .layout {
+    display: flex;
+    flex-direction: row;
+    flex: auto;
+
+    &-default-background {
+      background: #f5f7f9;
+    }
+
+    .layout-sider {
+      min-height: 100vh;
+      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+      position: relative;
+      z-index: 13;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .layout-sider-fix {
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+
+    .ant-layout {
+      overflow: hidden;
+    }
+
+    .layout-right-fix {
+      overflow-x: hidden;
+      padding-left: 200px;
+      min-height: 100vh;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .layout-content {
+      flex: auto;
+      min-height: 100vh;
+    }
+
+    .n-layout-header.n-layout-header--absolute-positioned {
+      z-index: 11;
+    }
+
+    .n-layout-footer {
+      background: none;
+    }
+  }
+
+  .layout-content-main {
+    margin: 0 10px 10px;
+    position: relative;
+    padding-top: 64px;
+  }
+
+  .layout-content-main-fix {
+    padding-top: 64px;
+  }
+
+  .fluid-header {
+    padding-top: 0;
+  }
+
+  .main-view-fix {
+    padding-top: 44px;
+  }
+
+  .noMultiTabs {
+    padding-top: 0;
+  }
+</style>
diff --git a/web/src/layout/parentLayout.vue b/web/src/layout/parentLayout.vue
new file mode 100644
index 0000000..98240ae
--- /dev/null
+++ b/web/src/layout/parentLayout.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/web/src/locale/en.json b/web/src/locale/en.json
new file mode 100644
index 0000000..e1cb0d2
--- /dev/null
+++ b/web/src/locale/en.json
@@ -0,0 +1,28 @@
+{
+  "你好，美丽世界": "Hello, Beautiful World",
+  "剩余{num}余额": "Remaining {num} Balance",
+  "卡板量": "Total Card",
+  "日": "Day",
+  "日同比": "Than Yesterday",
+  "周同比": "Than LastWeek",
+  "总卡板量：": "ALL Card:",
+  "激活卡板": "Activate Card",
+  "周": "Week",
+  "总激活卡板：": "Total Activate Card:",
+  "代理商": "Agent",
+  "总代理商量：": "Total Agent:",
+  "提现佣金": "Withdrawal Commission",
+  "月": "Month",
+  "月同比": "Than LastMonth",
+  "总提现额：": "Total Withdrawal Amount:",
+  "用户": "Users",
+  "分析": "Analysis",
+  "商品": "Goods",
+  "订单": "Order",
+  "票据": "Receipt",
+  "消息": "Message",
+  "标签": "Label",
+  "配置": "Configure",
+  "流量消耗趋势": "Trend Of Traffic Consumption",
+  "客户端访问量": "Client Traffic"
+}
diff --git a/web/src/locale/index.ts b/web/src/locale/index.ts
new file mode 100644
index 0000000..01dac82
--- /dev/null
+++ b/web/src/locale/index.ts
@@ -0,0 +1,37 @@
+import { createI18n } from 'vue-i18n';
+import type { I18nOptions } from 'vue-i18n';
+import en from './en.json';
+import zhHant from './zh-Hant.json';
+import zhHans from './zh-Hans.json';
+
+const messages = {
+  en,
+  'zh-TW': zhHant,
+  'zh-CN': zhHans,
+};
+
+// 创建 i18n 实例配置
+const i18nConfig: I18nOptions = {
+  legacy: false, // 使用 Composition API 模式
+  locale: 'zh-CN', // 默认语言
+  fallbackLocale: 'zh-CN', // 回退语言
+  messages, // 语言包
+  missingWarn: false, // 关闭找不到 key 的警告
+  fallbackWarn: false, // 关闭回退警告
+  // 当找不到翻译时，返回 key 本身
+  missing: (_locale, key) => {
+    return key;
+  },
+};
+
+const i18n = createI18n(i18nConfig);
+
+export default i18n;
+
+// 导出 t 函数，支持多种参数形式
+export const t = (key: string, named?: Record<string, unknown>, options?: any): string => {
+  if (named !== undefined) {
+    return i18n.global.t(key, named, options) as string;
+  }
+  return i18n.global.t(key) as string;
+};
diff --git a/web/src/locale/zh-Hans.json b/web/src/locale/zh-Hans.json
new file mode 100644
index 0000000..2192606
--- /dev/null
+++ b/web/src/locale/zh-Hans.json
@@ -0,0 +1,3 @@
+{
+  "剩余{num}余额": "剩余{num}余额"
+}
diff --git a/web/src/locale/zh-Hant.json b/web/src/locale/zh-Hant.json
new file mode 100644
index 0000000..7a3a4a2
--- /dev/null
+++ b/web/src/locale/zh-Hant.json
@@ -0,0 +1,28 @@
+{
+  "你好，美丽世界": "你好，美麗世界",
+  "剩余{num}余额": "剩餘{num}餘額",
+  "卡板量": "卡板量",
+  "日": "日",
+  "日同比": "日同比",
+  "周同比": "週同比",
+  "总卡板量：": "總卡板量：",
+  "激活卡板": "激活卡板",
+  "周": "週",
+  "总激活卡板：": "總激活卡板：",
+  "代理商": "代理商",
+  "总代理商量：": "總代理商數：",
+  "提现佣金": "提現傭金",
+  "月": "月",
+  "月同比": "月同比",
+  "总提现额：": "總提現額：",
+  "用户": "使用者",
+  "分析": "分析",
+  "商品": "商品",
+  "订单": "訂單",
+  "票据": "票據",
+  "消息": "訊息",
+  "标签": "標籤",
+  "配置": "設定",
+  "流量消耗趋势": "流量消耗趨勢",
+  "客户端访问量": "用戶端訪問量"
+}
diff --git a/web/src/main.ts b/web/src/main.ts
new file mode 100644
index 0000000..47f12de
--- /dev/null
+++ b/web/src/main.ts
@@ -0,0 +1,49 @@
+import './styles/tailwind.css';
+import { createApp } from 'vue';
+import App from './App.vue';
+import router, { setupRouter } from './router';
+import { setupStore } from '@/store';
+import { setupNaive, setupDirectives } from '@/plugins';
+import { AppProvider } from '@/components/Application';
+import setupWebsocket from '@/utils/websocket/index';
+import i18n from '@/locale/index';
+
+async function bootstrap() {
+  const appProvider = createApp(AppProvider);
+
+  const app = createApp(App);
+
+  // 国际化
+  app.use(i18n);
+  app.config.globalProperties.t = i18n.global.t;
+
+  // 注册全局常用的 naive-ui 组件
+  setupNaive(app);
+
+  // 注册全局自定义组件
+  //setupCustomComponents();
+
+  // 注册全局自定义指令，如：v-permission权限指令
+  setupDirectives(app);
+
+  // 注册全局方法，如：app.config.globalProperties.$message = message
+  //setupGlobalMethods(app);
+
+  // 挂载状态管理
+  setupStore(app);
+
+  //优先挂载一下 Provider 解决路由守卫，Axios中可使用，Dialog，Message 等之类组件
+  appProvider.mount('#appProvider', true);
+
+  // 挂载路由
+  await setupRouter(app);
+
+  // 路由准备就绪后挂载APP实例
+  await router.isReady();
+
+  setupWebsocket();
+
+  app.mount('#app', true);
+}
+
+void bootstrap();
diff --git a/web/src/plugins/customComponents.ts b/web/src/plugins/customComponents.ts
new file mode 100644
index 0000000..496717c
--- /dev/null
+++ b/web/src/plugins/customComponents.ts
@@ -0,0 +1,7 @@
+/**
+ * 全局注册自定义组件 待完善
+ * @param app
+ */
+export function setupCustomComponents() {
+  // app.component()
+}
diff --git a/web/src/plugins/directives.ts b/web/src/plugins/directives.ts
new file mode 100644
index 0000000..6323b1b
--- /dev/null
+++ b/web/src/plugins/directives.ts
@@ -0,0 +1,24 @@
+import { App } from 'vue';
+
+import { permission } from '@/directives/permission';
+import copy from '@/directives/copy';
+import debounce from '@/directives/debounce';
+import throttle from '@/directives/throttle';
+import draggable from '@/directives/draggable';
+
+/**
+ * 注册全局自定义指令
+ * @param app
+ */
+export function setupDirectives(app: App) {
+  // 权限控制指令（演示）
+  app.directive('permission', permission);
+  // 复制指令
+  app.directive('copy', copy);
+  // 防抖指令
+  app.directive('debounce', debounce);
+  // 节流指令
+  app.directive('throttle', throttle);
+  // 拖拽指令
+  app.directive('draggable', draggable);
+}
diff --git a/web/src/plugins/globalMethods.ts b/web/src/plugins/globalMethods.ts
new file mode 100644
index 0000000..4cc3a9b
--- /dev/null
+++ b/web/src/plugins/globalMethods.ts
@@ -0,0 +1,5 @@
+/**
+ * 注册全局方法 待完善
+ * @param app
+ */
+export function setupGlobalMethods() {}
diff --git a/web/src/plugins/index.ts b/web/src/plugins/index.ts
new file mode 100644
index 0000000..e5e4ec9
--- /dev/null
+++ b/web/src/plugins/index.ts
@@ -0,0 +1,4 @@
+export { setupNaive } from '@/plugins/naive';
+export { setupDirectives } from '@/plugins/directives';
+export { setupCustomComponents } from '@/plugins/customComponents';
+export { setupGlobalMethods } from '@/plugins/globalMethods';
diff --git a/web/src/plugins/naive.ts b/web/src/plugins/naive.ts
new file mode 100644
index 0000000..bdbbce9
--- /dev/null
+++ b/web/src/plugins/naive.ts
@@ -0,0 +1,143 @@
+import type { App } from 'vue';
+import {
+  create,
+  NConfigProvider,
+  NMessageProvider,
+  NDialogProvider,
+  NInput,
+  NButton,
+  NForm,
+  NFormItem,
+  NCheckboxGroup,
+  NCheckbox,
+  NIcon,
+  NLayout,
+  NLayoutHeader,
+  NLayoutContent,
+  NLayoutFooter,
+  NLayoutSider,
+  NMenu,
+  NBreadcrumb,
+  NBreadcrumbItem,
+  NDropdown,
+  NSpace,
+  NTooltip,
+  NAvatar,
+  NTabs,
+  NTabPane,
+  NCard,
+  NRow,
+  NCol,
+  NDrawer,
+  NDrawerContent,
+  NDivider,
+  NSwitch,
+  NBadge,
+  NAlert,
+  NElement,
+  NTag,
+  NNotificationProvider,
+  NProgress,
+  NDatePicker,
+  NGrid,
+  NGridItem,
+  NList,
+  NListItem,
+  NThing,
+  NDataTable,
+  NPopover,
+  NPagination,
+  NSelect,
+  NRadioGroup,
+  NRadio,
+  NSteps,
+  NStep,
+  NInputGroup,
+  NResult,
+  NDescriptions,
+  NDescriptionsItem,
+  NTable,
+  NInputNumber,
+  NLoadingBarProvider,
+  NModal,
+  NUpload,
+  NTree,
+  NSpin,
+  NTimePicker,
+  NBackTop,
+  NSkeleton,
+} from 'naive-ui';
+
+const naive = create({
+  components: [
+    NMessageProvider,
+    NDialogProvider,
+    NConfigProvider,
+    NInput,
+    NButton,
+    NForm,
+    NFormItem,
+    NCheckboxGroup,
+    NCheckbox,
+    NIcon,
+    NLayout,
+    NLayoutHeader,
+    NLayoutContent,
+    NLayoutFooter,
+    NLayoutSider,
+    NMenu,
+    NBreadcrumb,
+    NBreadcrumbItem,
+    NDropdown,
+    NSpace,
+    NTooltip,
+    NAvatar,
+    NTabs,
+    NTabPane,
+    NCard,
+    NRow,
+    NCol,
+    NDrawer,
+    NDrawerContent,
+    NDivider,
+    NSwitch,
+    NBadge,
+    NAlert,
+    NElement,
+    NTag,
+    NNotificationProvider,
+    NProgress,
+    NDatePicker,
+    NGrid,
+    NGridItem,
+    NList,
+    NListItem,
+    NThing,
+    NDataTable,
+    NPopover,
+    NPagination,
+    NSelect,
+    NRadioGroup,
+    NRadio,
+    NSteps,
+    NStep,
+    NInputGroup,
+    NResult,
+    NDescriptions,
+    NDescriptionsItem,
+    NTable,
+    NInputNumber,
+    NLoadingBarProvider,
+    NModal,
+    NUpload,
+    NTree,
+    NSpin,
+    NTimePicker,
+    NBackTop,
+    NSkeleton,
+  ],
+});
+
+export function setupNaive(app: App<Element>) {
+  app.use(naive);
+}
diff --git a/web/src/router/base.ts b/web/src/router/base.ts
new file mode 100644
index 0000000..4e5e8c4
--- /dev/null
+++ b/web/src/router/base.ts
@@ -0,0 +1,45 @@
+import type { AppRouteRecordRaw } from '@/router/types';
+import { ErrorPage, RedirectName, Layout } from '@/router/constant';
+
+// 404 on a page
+export const ErrorPageRoute: AppRouteRecordRaw = {
+  path: '/:path(.*)*',
+  name: 'ErrorPage',
+  component: Layout,
+  meta: {
+    title: 'ErrorPage',
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      name: 'ErrorPageSon',
+      component: ErrorPage,
+      meta: {
+        title: 'ErrorPage',
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
+
+export const RedirectRoute: AppRouteRecordRaw = {
+  path: '/redirect',
+  name: RedirectName,
+  component: Layout,
+  meta: {
+    title: RedirectName,
+    hideBreadcrumb: true,
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: `${RedirectName}Son`,
+      component: () => import('@/views/redirect/index.vue'),
+      meta: {
+        title: RedirectName,
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+};
diff --git a/web/src/router/constant.ts b/web/src/router/constant.ts
new file mode 100644
index 0000000..ead009d
--- /dev/null
+++ b/web/src/router/constant.ts
@@ -0,0 +1,4 @@
+export const RedirectName = 'Redirect';
+export const ErrorPage = () => import('@/views/exception/404.vue');
+export const Layout = () => import('@/layout/index.vue');
+export const ParentLayout = () => import('@/layout/parentLayout.vue');
diff --git a/web/src/router/generator-routers.ts b/web/src/router/generator-routers.ts
new file mode 100644
index 0000000..1f107ee
--- /dev/null
+++ b/web/src/router/generator-routers.ts
@@ -0,0 +1,151 @@
+import { adminMenus } from '@/api/system/menu';
+import { constantRouterIcon } from './router-icons';
+import { RouteRecordRaw } from 'vue-router';
+import { Layout, ParentLayout } from '@/router/constant';
+import type { AppRouteRecordRaw } from '@/router/types';
+
+const Iframe = () => import('@/views/iframe/index.vue');
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
+
+LayoutMap.set('LAYOUT', Layout);
+LayoutMap.set('IFRAME', Iframe);
+
+/**
+ * 格式化 后端 结构信息并递归生成层级路由表
+ * @param routerMap
+ * @param parent
+ * @returns {*}
+ */
+export const routerGenerator = (routerMap, parent?): any[] => {
+  return routerMap.map((item) => {
+    const currentRouter: any = {
+      // 路由地址 动态拼接生成如 /dashboard/workplace
+      path: `${(parent && parent.path) || ''}/${item.path}`,
+      // 路由名称，建议唯一
+      name: item.name || '',
+      // 该路由对应页面的 组件
+      component: item.component,
+      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
+      meta: {
+        ...item.meta,
+        label: item.meta.title,
+        icon: constantRouterIcon[item.meta.icon] || null,
+        permissions: item.meta.permissions || null,
+      },
+    };
+
+    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
+    currentRouter.path = currentRouter.path.replace('//', '/');
+    // 重定向 ,菜单类型为目录默认默认跳转
+    if(item.meta.type === 1){
+      item.redirect && (currentRouter.redirect = item.redirect);
+    }
+    // 是否有子菜单，并递归处理
+    if (item.children && item.children.length > 0) {
+      //如果未定义 redirect 默认第一个子路由为 redirect
+      if(item.meta.type === 1) {
+        !item.redirect && (currentRouter.redirect = `${item.path}/${item.children[0].path}`);
+      }
+      // Recursion
+      currentRouter.children = routerGenerator(item.children, currentRouter);
+    }
+
+    return currentRouter;
+  });
+};
+
+/**
+ * 动态生成菜单
+ */
+export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
+  return new Promise((resolve, reject) => {
+    adminMenus()
+      .then((result) => {
+        const routeList = routerGenerator(result.list);
+        asyncImportRoute(routeList);
+
+        resolve(routeList);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * 查找views中对应的组件文件
+ * */
+let viewsModules: Record<string, () => Promise<Recordable>>;
+export const asyncImportRoute = (routes: AppRouteRecordRaw[] | undefined): void => {
+  viewsModules = viewsModules || import.meta.glob('../views/**/*.{vue,tsx}');
+  if (!routes) return;
+  routes.forEach((item) => {
+    if (!item.component && item.meta?.frameSrc) {
+      item.component = 'IFRAME';
+    }
+    const { component, name } = item;
+    const { children } = item;
+    if (component) {
+      const layoutFound = LayoutMap.get(component as string);
+      if (layoutFound) {
+        item.component = layoutFound;
+      } else {
+        item.component = dynamicImport(viewsModules, component as string);
+      }
+    } else if (name) {
+      item.component = ParentLayout;
+    }
+    children && asyncImportRoute(children);
+  });
+};
+
+/**
+ * 动态导入
+ * */
+export const dynamicImport = (
+  viewsModules: Record<string, () => Promise<Recordable>>,
+  component: string
+) => {
+  const keys = Object.keys(viewsModules);
+  const matchKeys = keys.filter((key) => {
+    let k = key.replace('../views', '');
+    const lastIndex = k.lastIndexOf('.');
+    k = k.substring(0, lastIndex);
+    return k === component;
+  });
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0];
+    return viewsModules[matchKey];
+  }
+  if (matchKeys?.length > 1) {
+    console.warn(
+      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure'
+    );
+    return;
+  }
+};
+
+/**
+ * 移除隐藏的菜单
+ * @param menus
+ */
+export const removeHiddenMenus = (menus: any[]) => {
+  const arr: any[] = [];
+  for (let j = 0; j < menus.length; j++) {
+    if (menus[j].meta?.type === 3) {
+      continue;
+    }
+    if (menus[j].meta?.hidden === true) {
+      continue;
+    }
+
+    if (menus[j].children?.length > 0) {
+      menus[j].children = removeHiddenMenus(menus[j].children);
+      if (menus[j].children?.length === 0) {
+        delete menus[j].children;
+      }
+    }
+    arr.push(menus[j]);
+  }
+  return arr;
+};
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
new file mode 100644
index 0000000..bfae36f
--- /dev/null
+++ b/web/src/router/index.ts
@@ -0,0 +1,62 @@
+import { App } from 'vue';
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import { RedirectRoute } from '@/router/base';
+import { PageEnum } from '@/enums/pageEnum';
+import { createRouterGuards } from './router-guards';
+import { createRouterIcon } from './router-icons';
+
+// @ts-ignore
+const modules = import.meta.glob('./modules/**/*.ts');
+const routeModuleList: RouteRecordRaw[] = [];
+
+Object.keys(modules).forEach((key) => {
+  const mod = modules[key].default || {};
+  const modList = Array.isArray(mod) ? [...mod] : [mod];
+  routeModuleList.push(...modList);
+});
+
+function sortRoute(a, b) {
+  return (a.meta?.sort || 0) - (b.meta?.sort || 0);
+}
+
+routeModuleList.sort(sortRoute);
+
+export const RootRoute: RouteRecordRaw = {
+  path: '/',
+  name: 'Root',
+  redirect: PageEnum.BASE_HOME,
+  meta: {
+    title: 'Root',
+  },
+};
+
+export const LoginRoute: RouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+  },
+};
+
+//需要验证权限
+export const asyncRoutes = [...routeModuleList];
+
+//普通路由 无需验证权限
+export const constantRouter: any[] = [LoginRoute, RootRoute, RedirectRoute];
+
+const router = createRouter({
+  history: createWebHashHistory(''),
+  routes: constantRouter,
+  strict: true,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+});
+
+export function setupRouter(app: App) {
+  app.use(router);
+  // 创建路由守卫
+  createRouterGuards(router);
+  createRouterIcon();
+}
+
+export default router;
diff --git a/web/src/router/router-guards.ts b/web/src/router/router-guards.ts
new file mode 100644
index 0000000..d1cd778
--- /dev/null
+++ b/web/src/router/router-guards.ts
@@ -0,0 +1,112 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { isNavigationFailure, Router } from 'vue-router';
+import { useUserStoreWidthOut } from '@/store/modules/user';
+import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
+import { storage } from '@/utils/Storage';
+import { PageEnum } from '@/enums/pageEnum';
+import { ErrorPageRoute } from '@/router/base';
+import { jump } from '@/utils/http/axios';
+import { getNowUrl } from '@/utils/urlUtils';
+
+const LOGIN_PATH = PageEnum.BASE_LOGIN;
+const whitePathList = [LOGIN_PATH]; // no redirect whitelist
+
+export function createRouterGuards(router: Router) {
+  const userStore = useUserStoreWidthOut();
+  const asyncRouteStore = useAsyncRouteStoreWidthOut();
+  router.beforeEach(async (to, from, next) => {
+    const Loading = window['$loading'] || null;
+    Loading && Loading.start();
+
+    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
+      next(PageEnum.BASE_HOME);
+      return;
+    }
+
+    // Whitelist can be directly entered
+    if (whitePathList.includes(to.path as PageEnum)) {
+      await userStore.LoadLoginConfig();
+      next();
+      return;
+    }
+
+    const token = storage.get(ACCESS_TOKEN);
+
+    if (!token) {
+      // You can access without permissions. You need to set the routing meta.ignoreAuth to true
+      if (to.meta.ignoreAuth) {
+        next();
+        return;
+      }
+
+      // redirect login page
+      const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
+        path: LOGIN_PATH,
+        replace: true,
+      };
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path,
+        };
+      }
+      next(redirectData);
+      return;
+    }
+
+    if (asyncRouteStore.getIsDynamicAddedRoute) {
+      next();
+      return;
+    }
+
+    const redirectPath = (from.query.redirect || to.path) as string;
+    const redirect = decodeURIComponent(redirectPath);
+    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+    const userInfo = await userStore.GetInfo();
+    await userStore.LoadLoginConfig();
+
+    // 是否允许获取微信openid
+    if (userStore.allowWxOpenId()) {
+      let path = nextData.path;
+      if (path === LOGIN_PATH) {
+        path = PageEnum.BASE_HOME_REDIRECT;
+      }
+
+      const URI = getNowUrl() + '#' + path;
+      jump('/wechat/authorize', { type: 'openId', syncRedirect: URI });
+      return;
+    }
+
+    await userStore.GetConfig();
+    const routes = await asyncRouteStore.generateRoutes(userInfo);
+
+    // 动态添加可访问路由表
+    routes.forEach((item) => {
+      router.addRoute(item as unknown as RouteRecordRaw);
+    });
+
+    //添加404
+    const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name);
+    if (isErrorPage === -1) {
+      router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw);
+    }
+
+    asyncRouteStore.setDynamicAddedRoute(true);
+    next(nextData);
+    Loading && Loading.finish();
+  });
+
+  router.afterEach((to, _, failure) => {
+    document.title = (to?.meta?.title as string) || document.title;
+    if (isNavigationFailure(failure)) {
+      //console.log('failed navigation', failure)
+    }
+    const Loading = window['$loading'] || null;
+    Loading && Loading.finish();
+  });
+
+  router.onError((error) => {
+    console.log(error, '路由错误');
+  });
+}
diff --git a/web/src/router/router-icons.ts b/web/src/router/router-icons.ts
new file mode 100644
index 0000000..a72e4d1
--- /dev/null
+++ b/web/src/router/router-icons.ts
@@ -0,0 +1,15 @@
+import { renderIcon } from '@/utils';
+import * as antdIcons from '@vicons/antd';
+// import * as x5Icons from '@vicons/ionicons5';
+
+export const constantRouterIcon = {};
+
+export function createRouterIcon() {
+  for (const element of Object.keys(antdIcons)) {
+    constantRouterIcon[element] = renderIcon(antdIcons[element]);
+  }
+
+  // for (const element of Object.keys(x5Icons)) {
+  //   constantRouterIcon[element] = renderIcon(x5Icons[element]);
+  // }
+}
diff --git a/web/src/router/types.ts b/web/src/router/types.ts
new file mode 100644
index 0000000..2fc8aad
--- /dev/null
+++ b/web/src/router/types.ts
@@ -0,0 +1,56 @@
+import type { RouteRecordRaw, RouteMeta } from 'vue-router';
+import { defineComponent } from 'vue';
+
+export type Component<T extends any = any> =
+  | ReturnType<typeof defineComponent>
+  | (() => Promise<typeof import('*.vue')>)
+  | (() => Promise<T>);
+
+// @ts-ignore
+export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+  name: string;
+  meta: RouteMeta;
+  component?: Component | string;
+  components?: Component;
+  children?: AppRouteRecordRaw[];
+  props?: Recordable;
+  fullPath?: string;
+}
+
+export interface Meta {
+  // 名称
+  title: string;
+  // 是否忽略权限
+  ignoreAuth?: boolean;
+  permissions?: string[];
+  // 是否不缓存
+  noKeepAlive?: boolean;
+  // 是否固定在tab上
+  affix?: boolean;
+  // tab上的图标
+  icon?: string;
+  // 跳转地址
+  frameSrc?: string;
+  // 外链跳转地址
+  externalLink?: string;
+  //隐藏
+  hidden?: boolean;
+}
+
+export interface Menu {
+  title: string;
+  label: string;
+  key: string;
+  meta: RouteMeta;
+  name: string;
+  component?: Component | string;
+  components?: Component;
+  children?: AppRouteRecordRaw[];
+  props?: Recordable;
+  fullPath?: string;
+  icon?: any;
+  path: string;
+  permissions?: string[];
+  redirect?: string;
+  sort?: number;
+}
diff --git a/web/src/settings/animateSetting.ts b/web/src/settings/animateSetting.ts
new file mode 100644
index 0000000..05dc0be
--- /dev/null
+++ b/web/src/settings/animateSetting.ts
@@ -0,0 +1,8 @@
+export const animates = [
+  { value: 'zoom-fade', label: '渐变' },
+  { value: 'zoom-out', label: '闪现' },
+  { value: 'fade-slide', label: '滑动' },
+  { value: 'fade', label: '消退' },
+  { value: 'fade-bottom', label: '底部消退' },
+  { value: 'fade-scale', label: '缩放消退' },
+];
diff --git a/web/src/settings/componentSetting.ts b/web/src/settings/componentSetting.ts
new file mode 100644
index 0000000..ce282e2
--- /dev/null
+++ b/web/src/settings/componentSetting.ts
@@ -0,0 +1,57 @@
+export default {
+  table: {
+    apiSetting: {
+      // 当前页的字段名
+      pageField: 'page',
+      // 每页数量字段名
+      sizeField: 'pageSize',
+      // 接口返回的数据字段名
+      listField: 'list',
+      // 接口返回总页数字段名
+      totalField: 'pageCount',
+      // 接口返回总行数字段名
+      itemCountField: 'totalCount',
+    },
+    //默认分页数量
+    defaultPageSize: 10,
+    //可切换每页数量集合
+    pageSizes: [10, 15, 20, 30, 50, 100],
+  },
+  upload: {
+    //考虑接口规范不同
+    apiSetting: {
+      // 集合字段名
+      infoField: 'data',
+      // 图片地址字段名
+      imgField: 'fileUrl',
+    },
+    //最大上传图片大小
+    maxSize: 10,
+    //图片上传类型
+    imageType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/svg+xml', 'image/webp'],
+    //文件上传类型
+    fileType: [
+      // 图片
+      'image/png',
+      'image/jpg',
+      'image/jpeg',
+      'image/gif',
+      'image/svg+xml',
+      'image/webp',
+      // 文档
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      'application/vnd.ms-powerpoint',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      // 音频
+      'audio/mpeg',
+      'audio/midi',
+      // 视频
+      'audio/mp4',
+      'video/webm',
+      'video/x-flv',
+    ],
+  },
+};
diff --git a/web/src/settings/designSetting.ts b/web/src/settings/designSetting.ts
new file mode 100644
index 0000000..566934d
--- /dev/null
+++ b/web/src/settings/designSetting.ts
@@ -0,0 +1,32 @@
+// app theme preset color
+export const appThemeList: string[] = [
+  '#2d8cf0',
+  '#0960bd',
+  '#0084f4',
+  '#009688',
+  '#536dfe',
+  '#ff5c93',
+  '#ee4f12',
+  '#0096c7',
+  '#9c27b0',
+  '#ff9800',
+  '#FF3D68',
+  '#00C1D4',
+  '#71EFA3',
+  '#171010',
+  '#78DEC7',
+  '#1768AC',
+  '#FB9300',
+  '#FC5404',
+];
+
+const setting = {
+  //深色主题
+  darkTheme: false,
+  //系统主题色
+  appTheme: '#2d8cf0',
+  //系统内置主题色列表
+  appThemeList,
+};
+
+export default setting;
diff --git a/web/src/settings/projectSetting.ts b/web/src/settings/projectSetting.ts
new file mode 100644
index 0000000..5ac1e5b
--- /dev/null
+++ b/web/src/settings/projectSetting.ts
@@ -0,0 +1,57 @@
+const setting = {
+  //导航模式 vertical 左侧菜单模式 horizontal 顶部菜单模式
+  navMode: 'vertical',
+  //导航风格 dark 暗色侧边栏 light 白色侧边栏 header-dark 暗色顶栏
+  navTheme: 'dark',
+  // 是否处于移动端模式
+  isMobile: false,
+  //顶部
+  headerSetting: {
+    //背景色
+    bgColor: '#fff',
+    //固定顶部
+    fixed: true,
+    //显示重载按钮
+    isReload: true,
+  },
+  //页脚
+  showFooter: true,
+  //多标签
+  multiTabsSetting: {
+    //背景色
+    bgColor: '#fff',
+    //是否显示
+    show: true,
+    //固定多标签
+    fixed: true,
+  },
+  //菜单
+  menuSetting: {
+    //最小宽度
+    minMenuWidth: 64,
+    //菜单宽度
+    menuWidth: 200,
+    //固定菜单
+    fixed: true,
+    //分割菜单
+    mixMenu: false,
+    //触发移动端侧边栏的宽度
+    mobileWidth: 800,
+    // 折叠菜单
+    collapsed: false,
+  },
+  //面包屑
+  crumbsSetting: {
+    //是否显示
+    show: true,
+    //显示图标
+    showIcon: false,
+  },
+  //菜单权限模式 FIXED 前端固定路由  BACK 动态获取
+  permissionMode: 'BACK',
+  //是否开启路由动画
+  isPageAnimate: true,
+  //路由动画类型
+  pageAnimateType: 'zoom-fade',
+};
+export default setting;
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
new file mode 100644
index 0000000..efaf6c9
--- /dev/null
+++ b/web/src/store/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import { createPinia } from 'pinia';
+
+const store = createPinia();
+
+export function setupStore(app: App<Element>) {
+  app.use(store);
+}
+
+export { store };
diff --git a/web/src/store/modules/asyncRoute.ts b/web/src/store/modules/asyncRoute.ts
new file mode 100644
index 0000000..ac625ec
--- /dev/null
+++ b/web/src/store/modules/asyncRoute.ts
@@ -0,0 +1,141 @@
+import { toRaw, unref } from 'vue';
+import { defineStore } from 'pinia';
+import { RouteRecordRaw } from 'vue-router';
+import { store } from '@/store';
+import { asyncRoutes, constantRouter } from '@/router';
+import { generatorDynamicRouter } from '@/router/generator-routers';
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+
+interface TreeHelperConfig {
+  id: string;
+  children: string;
+  pid: string;
+}
+
+const DEFAULT_CONFIG: TreeHelperConfig = {
+  id: 'id',
+  children: 'children',
+  pid: 'pid',
+};
+
+const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);
+
+export interface IAsyncRouteState {
+  menus: RouteRecordRaw[];
+  routers: any[];
+  addRouters: any[];
+  keepAliveComponents: string[];
+  isDynamicAddedRoute: boolean;
+}
+
+function filter<T = any>(
+  tree: T[],
+  func: (n: T) => boolean,
+  config: Partial<TreeHelperConfig> = {}
+): T[] {
+  config = getConfig(config);
+  const children = config.children as string;
+
+  function listFilter(list: T[]) {
+    return list
+      .map((node: any) => ({ ...node }))
+      .filter((node) => {
+        node[children] = node[children] && listFilter(node[children]);
+        return func(node) || (node[children] && node[children].length);
+      });
+  }
+
+  return listFilter(tree);
+}
+
+export const useAsyncRouteStore = defineStore({
+  id: 'app-async-route',
+  state: (): IAsyncRouteState => ({
+    menus: [],
+    routers: constantRouter,
+    addRouters: [],
+    keepAliveComponents: [],
+    // Whether the route has been dynamically added
+    isDynamicAddedRoute: false,
+  }),
+  getters: {
+    getMenus(): RouteRecordRaw[] {
+      return this.menus;
+    },
+    getIsDynamicAddedRoute(): boolean {
+      return this.isDynamicAddedRoute;
+    },
+  },
+  actions: {
+    getRouters() {
+      return toRaw(this.addRouters);
+    },
+    setDynamicAddedRoute(added: boolean) {
+      this.isDynamicAddedRoute = added;
+    },
+    // 设置动态路由
+    setRouters(routers) {
+      this.addRouters = routers;
+      this.routers = constantRouter.concat(routers);
+    },
+    setMenus(menus) {
+      // 设置动态路由
+      this.menus = menus;
+    },
+    setKeepAliveComponents(compNames) {
+      // 设置需要缓存的组件
+      this.keepAliveComponents = compNames;
+    },
+    async generateRoutes(data) {
+      let accessedRouters;
+      const permissionsList = data.permissions || [];
+      const routeFilter = (route) => {
+        const { meta } = route;
+        const { permissions } = meta || {};
+        if (!permissions) return true;
+        return permissionsList.some((item) => permissions.includes(item));
+      };
+      const { getPermissionMode } = useProjectSetting();
+      const permissionMode = unref(getPermissionMode);
+      const $dialog = window['$dialog'];
+      if (permissionMode === 'BACK') {
+        // 动态获取菜单
+        try {
+          accessedRouters = await generatorDynamicRouter();
+        } catch (error) {
+          console.log(error);
+          $dialog.info({
+            title: '提示',
+            content: '获取动态路由失败，管理员请确认是否为角色分配菜单权限？',
+            positiveText: '确定',
+            onPositiveClick: () => {},
+          });
+        }
+      } else {
+        try {
+          //过滤账户是否拥有某一个权限，并将菜单从加载列表移除
+          accessedRouters = filter(asyncRoutes, routeFilter);
+        } catch (error) {
+          console.log(error);
+          $dialog.info({
+            title: '提示',
+            content: '过滤动态路由失败，请联系管理员解决！',
+            positiveText: '确定',
+            onPositiveClick: () => {},
+          });
+        }
+      }
+
+      accessedRouters = accessedRouters.filter(routeFilter);
+
+      this.setRouters(accessedRouters);
+      this.setMenus(accessedRouters);
+      return toRaw(accessedRouters);
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useAsyncRouteStoreWidthOut() {
+  return useAsyncRouteStore(store);
+}
diff --git a/web/src/store/modules/designSetting.ts b/web/src/store/modules/designSetting.ts
new file mode 100644
index 0000000..b0b5555
--- /dev/null
+++ b/web/src/store/modules/designSetting.ts
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import designSetting from '@/settings/designSetting';
+
+const { darkTheme, appTheme, appThemeList } = designSetting;
+
+interface DesignSettingState {
+  //深色主题
+  darkTheme: boolean;
+  //系统风格
+  appTheme: string;
+  //系统内置风格
+  appThemeList: string[];
+}
+
+export const useDesignSettingStore = defineStore({
+  id: 'app-design-setting',
+  state: (): DesignSettingState => ({
+    darkTheme,
+    appTheme,
+    appThemeList,
+  }),
+  getters: {
+    getDarkTheme(): boolean {
+      return this.darkTheme;
+    },
+    getAppTheme(): string {
+      return this.appTheme;
+    },
+    getAppThemeList(): string[] {
+      return this.appThemeList;
+    },
+  },
+  actions: {},
+});
+
+// Need to be used outside the setup
+export function useDesignSettingWithOut() {
+  return useDesignSettingStore(store);
+}
diff --git a/web/src/store/modules/dict.ts b/web/src/store/modules/dict.ts
new file mode 100644
index 0000000..9bbc403
--- /dev/null
+++ b/web/src/store/modules/dict.ts
@@ -0,0 +1,192 @@
+import { computed, ComputedRef } from 'vue';
+import { defineStore } from 'pinia';
+import { createStorage, storage } from '@/utils/Storage';
+import { store } from '@/store';
+import { CURRENT_DICT } from '@/store/mutation-types';
+import { Dicts } from '@/api/dict/dict';
+import { SelectMixedOption } from 'naive-ui/es/select/src/interface';
+import { localDict } from '@/enums/localDictEnum';
+
+const Storage = createStorage({ storage: localStorage });
+
+// 默认字典类型，通过后台字典管理添加的
+export type DefaultDictType = 'sys_normal_disable' | 'sys_switch' | 'sys_user_sex';
+
+// 枚举字典类型
+export type EnumsDictType = 'creditType' | 'creditGroup' | 'deptType';
+
+// 方法字典类型
+export type FuncDictType = 'testCategoryOption';
+
+// 可以把常用的字典类型加入进来，这样会有IDE提示
+export type DictType = DefaultDictType | EnumsDictType | FuncDictType | string;
+
+export type DictListClass = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
+
+export interface Option {
+  label: string;
+  value: string | number;
+  key: string | number;
+  listClass: DictListClass;
+  extra: any;
+}
+
+export class DictOptions {
+  [name: DictType]: Option[];
+}
+
+export type IDictState = {
+  options: DictOptions;
+};
+
+export const useDictStore = defineStore({
+  id: 'app-dict',
+  state: (): IDictState => ({
+    options: Storage.get(CURRENT_DICT, new DictOptions()),
+  }),
+  getters: {},
+  actions: {
+    // 加载字典数据选项
+    loadOptions(types: DictType[]) {
+      Dicts({
+        types: types,
+      }).then((res) => {
+        if (!res) {
+          return;
+        }
+        Object.keys(res).forEach((key) => {
+          if (res[key]) {
+            this.options[key] = res[key] as unknown as Option[];
+          }
+        });
+        storage.set(CURRENT_DICT, this.options);
+      });
+    },
+
+    // 设置指定类型的字典选项
+    setOption(type: DictType, opts: Option[]) {
+      this.options[type] = opts;
+      storage.set(CURRENT_DICT, this.options);
+    },
+
+    // 获取指定类型的字典选项
+    getOption(type: DictType): ComputedRef<SelectMixedOption[]> {
+      return computed(() => {
+        const opts = this.checkOptionValue(type) ?? [];
+        return opts as unknown as SelectMixedOption[];
+      });
+    },
+
+    // 获取指定类型的字典选项
+    getOptionUnRef(type: DictType): any[] {
+      return this.checkOptionValue(type) ?? [];
+    },
+
+    // 是否存在选项，不存在返回null，存在就返回选项
+    checkOptionValue(type: DictType): null | Option[] {
+      // 本地字典
+      const local = localDict[type] ?? [];
+      if (local && local.length > 0) {
+        return local;
+      }
+      const opts = this.options[type] ?? [];
+      if (!opts || opts?.length === 0) {
+        return null;
+      }
+      return opts;
+    },
+
+    // 获取选项名称
+    getLabel(type: DictType, value: any) {
+      if (value === null || value === undefined) {
+        return ``;
+      }
+      const opts = this.checkOptionValue(type);
+      if (!opts) {
+        return ``;
+      }
+      for (const item of opts) {
+        if (item.value.toString() === value.toString()) {
+          return item.label;
+        }
+      }
+      return ``;
+    },
+
+    // 获取选项标签类型
+    getType(type: DictType, value: any): DictListClass {
+      if (value === null || value === undefined) {
+        return `default`;
+      }
+      const opts = this.checkOptionValue(type);
+      if (!opts) {
+        return `default`;
+      }
+      for (const item of opts) {
+        if (item.value.toString() === value.toString()) {
+          return item.listClass;
+        }
+      }
+      return `default`;
+    },
+
+    // 获取选项额外的数据配置
+    getExtra(type: DictType, value: any): any {
+      if (value === null || value === undefined) {
+        return null;
+      }
+      const opts = this.checkOptionValue(type);
+      if (!opts) {
+        return null;
+      }
+      for (const item of opts) {
+        if (item.value.toString() === value.toString()) {
+          return item?.extra;
+        }
+      }
+      return null;
+    },
+
+    // 是否存在指定选项值
+    hasValue(type: DictType, value: any): boolean {
+      if (value === null || value === undefined) {
+        return false;
+      }
+      const opts = this.checkOptionValue(type);
+      if (!opts) {
+        return false;
+      }
+      for (const item of opts) {
+        if (item.value.toString() === value.toString()) {
+          return true;
+        }
+      }
+      return false;
+    },
+
+    // 获取指定类型的可选项数量
+    getOptionLength(type: DictType): number {
+      const opts = this.checkOptionValue(type);
+      if (!opts) {
+        return 0;
+      }
+      return opts?.length;
+    },
+
+    // 生成单个选项
+    genOption(key: any, label: string, type = 'default', extra: any = null): Option {
+      return <Option>{
+        label: label,
+        value: key,
+        key: key,
+        listClass: type,
+        extra: extra,
+      };
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useDictStoreWidthOut() {
+  return useDictStore(store);
+}
diff --git a/web/src/store/modules/i18n.ts b/web/src/store/modules/i18n.ts
new file mode 100644
index 0000000..0d6b5e0
--- /dev/null
+++ b/web/src/store/modules/i18n.ts
@@ -0,0 +1,68 @@
+import { defineStore } from 'pinia';
+import { createStorage } from '@/utils/Storage';
+import { CurrentLocale } from '@/store/mutation-types';
+import i18n from '@/locale/index';
+import { useUserStore } from '@/store/modules/user';
+
+export const availableLocales = [
+  {
+    label: '简体中文',
+    key: 'zh-CN',
+  },
+  {
+    label: '繁體中文',
+    key: 'zh-TW',
+  },
+  {
+    label: 'English',
+    key: 'en',
+  },
+];
+
+export interface II18nStore {
+  currentLocale: string;
+}
+
+const Storage = createStorage({ storage: localStorage });
+
+export const useI18nStore = defineStore({
+  id: 'I18nStore',
+  state: (): II18nStore => ({
+    currentLocale: Storage.get(CurrentLocale, 'zh-CN'),
+  }),
+  getters: {},
+  actions: {
+    getLocale(): string {
+      return this.currentLocale;
+    },
+
+    setLocale(locale: string) {
+      if (availableLocales.some((l) => l.key === locale)) {
+        (i18n.global.locale as any).value = locale;
+        this.currentLocale = locale;
+        Storage.set(CurrentLocale, locale);
+      }
+    },
+
+    initLocale(): void {
+      const userStore = useUserStore();
+      const defaultLanguage = userStore.loginConfig?.defaultLanguage || 'zh-CN';
+
+      // 未开启国际化功能，仅设置语言不持久化
+      if (!userStore.loginConfig?.i18nSwitch) {
+        this.setLocale(defaultLanguage);
+        return;
+      }
+
+      // 优先使用本地存储的语言设置
+      const savedLocale = Storage.get(CurrentLocale, defaultLanguage);
+      if (savedLocale && availableLocales.some((l) => l.key === savedLocale)) {
+        this.setLocale(savedLocale);
+        return;
+      }
+
+      // 使用系统配置的默认语言
+      this.setLocale(defaultLanguage);
+    },
+  },
+});
diff --git a/web/src/store/modules/index.ts b/web/src/store/modules/index.ts
new file mode 100644
index 0000000..b1c9dbf
--- /dev/null
+++ b/web/src/store/modules/index.ts
@@ -0,0 +1,30 @@
+// @ts-ignore
+const allModules = import.meta.globEager('./*/index.ts');
+const modules = {} as any;
+Object.keys(allModules).forEach((path) => {
+  const fileName = path.split('/')[1];
+  modules[fileName] = allModules[path][fileName] || allModules[path].default || allModules[path];
+});
+
+// export default modules
+// @ts-ignore
+import asyncRoute from './async-route';
+// @ts-ignore
+import user from './user';
+// @ts-ignore
+import tabsView from './tabs-view';
+// @ts-ignore
+import lockscreen from './lockscreen';
+// @ts-ignore
+import dict from './dict';
+// @ts-ignore
+import i18n from './i18n';
+
+export default {
+  asyncRoute,
+  user,
+  tabsView,
+  lockscreen,
+  dict,
+  i18n,
+};
diff --git a/web/src/store/modules/lockscreen.ts b/web/src/store/modules/lockscreen.ts
new file mode 100644
index 0000000..c9bf4a2
--- /dev/null
+++ b/web/src/store/modules/lockscreen.ts
@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia';
+import { IS_LOCKSCREEN } from '@/store/mutation-types';
+import { storage } from '@/utils/Storage';
+
+// 长时间不操作默认锁屏时间
+const initTime = 60 * 60;
+
+const isLock = storage.get(IS_LOCKSCREEN, false);
+
+export type ILockscreenState = {
+  isLock: boolean; // 是否锁屏
+  lockTime: number;
+};
+
+export const useLockscreenStore = defineStore({
+  id: 'app-lockscreen',
+  state: (): ILockscreenState => ({
+    isLock: isLock === true, // 是否锁屏
+    lockTime: isLock == 'true' ? initTime : 0,
+  }),
+  getters: {},
+  actions: {
+    setLock(payload) {
+      this.isLock = payload;
+      storage.set(IS_LOCKSCREEN, this.isLock);
+    },
+    setLockTime(payload = initTime) {
+      this.lockTime = payload;
+    },
+  },
+});
diff --git a/web/src/store/modules/notification.ts b/web/src/store/modules/notification.ts
new file mode 100644
index 0000000..9af36f7
--- /dev/null
+++ b/web/src/store/modules/notification.ts
@@ -0,0 +1,106 @@
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import { PullMessages } from '@/api/apply/notice';
+import { MessageRow, MessageTab, parseMessage } from '@/enums/systemMessageEnum';
+
+export interface INotificationStore {
+  messages: MessageTab[];
+  notifyUnread: number;
+  noticeUnread: number;
+  letterUnread: number;
+  newMessage: MessageRow | null;
+}
+
+export const notificationStore = defineStore({
+  id: 'notificationStore',
+  state: (): INotificationStore => ({
+    messages: [
+      {
+        key: 1,
+        name: '通知',
+        badgeProps: { type: 'warning' },
+        list: [],
+      },
+      {
+        key: 2,
+        name: '公告',
+        badgeProps: { type: 'error' },
+        list: [],
+      },
+      {
+        key: 3,
+        name: '私信',
+        badgeProps: { type: 'info' },
+        list: [],
+      },
+    ],
+    notifyUnread: 0,
+    noticeUnread: 0,
+    letterUnread: 0,
+    newMessage: null,
+  }),
+  getters: {
+    getMessages(): MessageTab[] {
+      return this.messages;
+    },
+  },
+  actions: {
+    setMessages(messages) {
+      this.messages = messages;
+    },
+    triggerNewMessages(message) {
+      message = parseMessage(message);
+      this.addMessages(message);
+      this.newMessage = message;
+    },
+    addMessages(message: MessageRow) {
+      switch (message.type) {
+        case 1:
+          this.messages[0].list.push(message);
+          this.notifyUnread++;
+          break;
+        case 2:
+          this.messages[1].list.push(message);
+          this.noticeUnread++;
+          break;
+        case 3:
+          this.messages[2].list.push(message);
+          this.letterUnread++;
+          break;
+      }
+    },
+    pullMessages() {
+      PullMessages().then((res) => {
+        if (res.list === undefined) {
+          return;
+        }
+
+        this.messages[0].list = [];
+        this.messages[1].list = [];
+        this.messages[2].list = [];
+
+        if (res.list?.length > 0) {
+          for (let i = 0; i < res.list.length; i++) {
+            this.addMessages(parseMessage(res.list[i]));
+          }
+        }
+
+        this.notifyUnread = res.notifyCount;
+        this.noticeUnread = res.noticeCount;
+        this.letterUnread = res.letterCount;
+      });
+    },
+    getUnreadCount() {
+      const count = this.notifyUnread + this.noticeUnread + this.letterUnread;
+      if (count > 0) {
+        return count;
+      }
+      return 0;
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function notificationStoreWidthOut() {
+  return notificationStore(store);
+}
diff --git a/web/src/store/modules/projectSetting.ts b/web/src/store/modules/projectSetting.ts
new file mode 100644
index 0000000..9c2c3cd
--- /dev/null
+++ b/web/src/store/modules/projectSetting.ts
@@ -0,0 +1,97 @@
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import projectSetting from '@/settings/projectSetting';
+import type { IheaderSetting, ImenuSetting, ImultiTabsSetting, IcrumbsSetting } from '/#/config';
+
+const {
+  navMode,
+  navTheme,
+  isMobile,
+  headerSetting,
+  showFooter,
+  menuSetting,
+  multiTabsSetting,
+  crumbsSetting,
+  permissionMode,
+  isPageAnimate,
+  pageAnimateType,
+} = projectSetting;
+
+interface ProjectSettingState {
+  navMode: string; //导航模式
+  navTheme: string; //导航风格
+  headerSetting: IheaderSetting; //顶部设置
+  showFooter: boolean; //页脚
+  menuSetting: ImenuSetting; //多标签
+  multiTabsSetting: ImultiTabsSetting; //多标签
+  crumbsSetting: IcrumbsSetting; //面包屑
+  permissionMode: string; //权限模式
+  isPageAnimate: boolean; //是否开启路由动画
+  pageAnimateType: string; //路由动画类型
+  isMobile: boolean; // 是否处于移动端模式
+}
+
+export const useProjectSettingStore = defineStore({
+  id: 'app-project-setting',
+  state: (): ProjectSettingState => ({
+    navMode: navMode,
+    navTheme,
+    isMobile,
+    headerSetting,
+    showFooter,
+    menuSetting,
+    multiTabsSetting,
+    crumbsSetting,
+    permissionMode,
+    isPageAnimate,
+    pageAnimateType,
+  }),
+  getters: {
+    getNavMode(): string {
+      return this.navMode;
+    },
+    getNavTheme(): string {
+      return this.navTheme;
+    },
+    getIsMobile(): boolean {
+      return this.isMobile;
+    },
+    getHeaderSetting(): object {
+      return this.headerSetting;
+    },
+    getShowFooter(): boolean {
+      return this.showFooter;
+    },
+    getMenuSetting(): object {
+      return this.menuSetting;
+    },
+    getMultiTabsSetting(): object {
+      return this.multiTabsSetting;
+    },
+    getCrumbsSetting(): object {
+      return this.multiTabsSetting;
+    },
+    getPermissionMode(): string {
+      return this.permissionMode;
+    },
+    getIsPageAnimate(): boolean {
+      return this.isPageAnimate;
+    },
+    getPageAnimateType(): string {
+      return this.pageAnimateType;
+    },
+  },
+  actions: {
+    setNavTheme(value: string): void {
+      this.navTheme = value;
+    },
+    setIsMobile(value: boolean): void {
+      this.isMobile = value;
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useProjectSettingStoreWithOut() {
+  return useProjectSettingStore(store);
+}
diff --git a/web/src/store/modules/tabsView.ts b/web/src/store/modules/tabsView.ts
new file mode 100644
index 0000000..0838015
--- /dev/null
+++ b/web/src/store/modules/tabsView.ts
@@ -0,0 +1,79 @@
+import { defineStore } from 'pinia';
+import { RouteLocationNormalized } from 'vue-router';
+
+// 不需要出现在标签页中的路由
+const whiteList = ['Redirect', 'login'];
+
+export type RouteItem = Partial<RouteLocationNormalized> & {
+  fullPath: string;
+  path: string;
+  name: string;
+  hash: string;
+  meta: object;
+  params: object;
+  query: object;
+};
+
+export type ITabsViewState = {
+  tabsList: RouteItem[]; // 标签页
+  signal: string; // 关闭信号
+};
+
+//保留固定路由
+function retainAffixRoute(list: any[]) {
+  return list.filter((item) => item?.meta?.affix ?? false);
+}
+
+export const useTabsViewStore = defineStore({
+  id: 'app-tabs-view',
+  state: (): ITabsViewState => ({
+    tabsList: [],
+    signal: '',
+  }),
+  getters: {},
+  actions: {
+    initTabs(routes) {
+      // 初始化标签页
+      this.tabsList = routes;
+    },
+    addTabs(route): boolean {
+      // 添加标签页
+      if (whiteList.includes(route.name)) return false;
+      const isExists = this.tabsList.some((item) => item.fullPath == route.fullPath);
+      if (!isExists) {
+        this.tabsList.push(route);
+      }
+      return true;
+    },
+    closeLeftTabs(route) {
+      // 关闭左侧
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath);
+      this.tabsList = this.tabsList.filter((item, i) => i >= index || (item?.meta?.affix ?? false));
+    },
+    closeRightTabs(route) {
+      // 关闭右侧
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath);
+      this.tabsList = this.tabsList.filter((item, i) => i <= index || (item?.meta?.affix ?? false));
+    },
+    closeOtherTabs(route) {
+      // 关闭其他
+      this.tabsList = this.tabsList.filter(
+        (item) => item.fullPath == route.fullPath || (item?.meta?.affix ?? false)
+      );
+    },
+    closeCurrentTab(route) {
+      // 关闭当前页
+      const index = this.tabsList.findIndex((item) => item.fullPath == route.fullPath);
+      this.tabsList.splice(index, 1);
+    },
+    closeAllTabs() {
+      // 关闭全部
+      console.log(retainAffixRoute(this.tabsList));
+      this.tabsList = retainAffixRoute(this.tabsList);
+    },
+    closeSignal(signal: string) {
+      // 设置tab关闭信号， 1刷新 2关闭当前 3关闭其他 4关闭全部
+      this.signal = signal;
+    },
+  },
+});
diff --git a/web/src/store/modules/user.ts b/web/src/store/modules/user.ts
new file mode 100644
index 0000000..b5aef1d
--- /dev/null
+++ b/web/src/store/modules/user.ts
@@ -0,0 +1,276 @@
+import { defineStore } from 'pinia';
+import { createStorage, storage } from '@/utils/Storage';
+import { store } from '@/store';
+import {
+  ACCESS_TOKEN,
+  CURRENT_CONFIG,
+  CURRENT_DICT,
+  CURRENT_LOGIN_CONFIG,
+  CURRENT_USER,
+  IS_LOCKSCREEN,
+} from '@/store/mutation-types';
+import { ResultEnum } from '@/enums/httpEnum';
+import {
+  getConfig,
+  getLoginConfig,
+  getUserInfo,
+  login,
+  logout,
+  mobileLogin,
+} from '@/api/system/user';
+import { isWechatBrowser } from '@/utils/is';
+import { DeptTypeEnum } from '@/enums/deptEnum';
+const Storage = createStorage({ storage: localStorage });
+
+export interface UserInfoState {
+  id: number;
+  deptName: string;
+  deptType: string;
+  roleName: string;
+  cityLabel: string;
+  permissions: string[];
+  username: string;
+  realName: string;
+  avatar: string;
+  balance: number;
+  integral: number;
+  sex: number;
+  qq: string;
+  email: string;
+  mobile: string;
+  birthday: string;
+  cityId: number;
+  address: string;
+  cash: {
+    name: string;
+    account: string;
+    payeeCode: string;
+  };
+  createdAt: string;
+  loginCount: number;
+  lastLoginAt: string;
+  lastLoginIp: string;
+  openId: string;
+  inviteCode: string;
+}
+
+export interface ConfigState {
+  domain: string;
+  version: string;
+  wsAddr: string;
+  mode: string;
+}
+
+export interface LoginConfigState {
+  loginRegisterSwitch: number;
+  loginCaptchaSwitch: number;
+  loginAutoOpenId: number;
+  loginProtocol: string;
+  loginPolicy: string;
+  i18nSwitch: boolean;
+  defaultLanguage: string;
+  projectName: string;
+}
+
+export interface IUserState {
+  token: string;
+  username: string;
+  realName: string;
+  avatar: string;
+  permissions: any[];
+  info: UserInfoState | null;
+  config: ConfigState | null;
+  loginConfig: LoginConfigState | null;
+}
+
+export const useUserStore = defineStore({
+  id: 'app-member',
+  state: (): IUserState => ({
+    token: Storage.get(ACCESS_TOKEN, ''),
+    username: '',
+    realName: '',
+    avatar: '',
+    permissions: [],
+    info: Storage.get(CURRENT_USER, null),
+    config: Storage.get(CURRENT_CONFIG, null),
+    loginConfig: Storage.get(CURRENT_LOGIN_CONFIG, null),
+  }),
+  getters: {
+    getToken(): string {
+      return this.token;
+    },
+    getAvatar(): string {
+      return this.avatar;
+    },
+    getUsername(): string {
+      return this.username;
+    },
+    getRealName(): string {
+      return this.realName;
+    },
+    getPermissions(): [any][] {
+      return this.permissions;
+    },
+    getUserInfo(): UserInfoState | null {
+      return this.info;
+    },
+    getConfig(): ConfigState | null {
+      return this.config;
+    },
+    getLoginConfig(): LoginConfigState | null {
+      return this.loginConfig;
+    },
+    isCompanyDept(): boolean {
+      return this.info?.deptType == DeptTypeEnum.Company;
+    },
+    isTenantDept(): boolean {
+      return this.info?.deptType == DeptTypeEnum.Tenant;
+    },
+    isMerchantDept(): boolean {
+      return this.info?.deptType == DeptTypeEnum.Merchant;
+    },
+    isUserDept(): boolean {
+      return this.info?.deptType == DeptTypeEnum.User;
+    },
+  },
+  actions: {
+    setToken(token: string) {
+      this.token = token;
+    },
+    setAvatar(avatar: string) {
+      this.avatar = avatar;
+    },
+    setUsername(username: string) {
+      this.username = username;
+    },
+    setRealName(realName: string) {
+      this.realName = realName;
+    },
+    setPermissions(permissions: string[]) {
+      this.permissions = permissions;
+    },
+    setUserInfo(info: UserInfoState | null) {
+      this.info = info;
+    },
+    setConfig(config: ConfigState | null) {
+      this.config = config;
+    },
+    setLoginConfig(config: LoginConfigState | null) {
+      this.loginConfig = config;
+    },
+    // 账号登录
+    async login(userInfo) {
+      return await this.handleLogin(login(userInfo));
+    },
+    // 手机号登录
+    async mobileLogin(userInfo) {
+      return await this.handleLogin(mobileLogin(userInfo));
+    },
+    async handleLogin(request: Promise<any>) {
+      try {
+        const response = await request;
+        const { data, code } = response;
+        if (code === ResultEnum.SUCCESS) {
+          const ex = 30 * 24 * 60 * 60 * 1000;
+          storage.set(ACCESS_TOKEN, data.token, ex);
+          storage.set(CURRENT_USER, data, ex);
+          storage.set(IS_LOCKSCREEN, false);
+          this.setToken(data.token);
+          this.setUserInfo(data);
+        }
+        return Promise.resolve(response);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    // 获取用户信息
+    GetInfo() {
+      const that: any = this;
+      return new Promise((resolve, reject) => {
+        getUserInfo()
+          .then((res) => {
+            const result = res as UserInfoState;
+            if (result.permissions && result.permissions.length) {
+              const permissionsList = result.permissions;
+              that.setPermissions(permissionsList);
+              that.setUserInfo(result);
+              that.setAvatar(result.avatar);
+              that.setUsername(result.username);
+              that.setRealName(result.realName);
+            } else {
+              reject(new Error('getInfo: permissionsList must be a non-null array !'));
+            }
+            resolve(result);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 获取基础配置
+    GetConfig() {
+      const that = this;
+      return new Promise((resolve, reject) => {
+        getConfig()
+          .then((res) => {
+            const result = res;
+            that.setConfig(result);
+            storage.set(CURRENT_CONFIG, result);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 获取登录配置
+    LoadLoginConfig: function () {
+      const that = this;
+      return new Promise((resolve, reject) => {
+        getLoginConfig()
+          .then((res) => {
+            const result = res as unknown as LoginConfigState;
+            that.setLoginConfig(result);
+            storage.set(CURRENT_LOGIN_CONFIG, result);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    // 是否允许获取微信openid
+    allowWxOpenId(): boolean {
+      if (!isWechatBrowser()) {
+        return false;
+      }
+
+      if (this.loginConfig !== null && this.loginConfig.loginAutoOpenId !== 1) {
+        return false;
+      }
+      return this.info === null || this.info.openId === '';
+    },
+    // 登出
+    async logout() {
+      try {
+        const response = await logout();
+        const { code } = response;
+        if (code === ResultEnum.SUCCESS) {
+          this.setPermissions([]);
+          this.setUserInfo(null);
+          storage.remove(ACCESS_TOKEN);
+          storage.remove(CURRENT_USER);
+          storage.remove(CURRENT_DICT);
+        }
+        return Promise.resolve(response);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+  },
+});
+
+// Need to be used outside the setup
+export function useUserStoreWidthOut() {
+  return useUserStore(store);
+}
diff --git a/web/src/store/mutation-types.ts b/web/src/store/mutation-types.ts
new file mode 100644
index 0000000..15d17a2
--- /dev/null
+++ b/web/src/store/mutation-types.ts
@@ -0,0 +1,8 @@
+export const ACCESS_TOKEN = 'ACCESS-TOKEN'; // 用户token
+export const CURRENT_USER = 'CURRENT-USER'; // 当前用户信息
+export const CURRENT_CONFIG = 'CURRENT-CONFIG'; // 当前基础配置
+export const CURRENT_LOGIN_CONFIG = 'CURRENT-LOGIN-CONFIG'; // 当前登录配置
+export const IS_LOCKSCREEN = 'IS-LOCKSCREEN'; // 是否锁屏
+export const TABS_ROUTES = 'TABS-ROUTES'; // 标签页
+export const CURRENT_DICT = 'CURRENT-DICT'; // 当前用户字典配置
+export const CurrentLocale = 'Current-Locale'; // 当前语言
diff --git a/web/src/store/types.ts b/web/src/store/types.ts
new file mode 100644
index 0000000..65cef51
--- /dev/null
+++ b/web/src/store/types.ts
@@ -0,0 +1,16 @@
+import { IAsyncRouteState } from '@/store/modules/asyncRoute';
+import { IUserState } from '@/store/modules/user';
+import { ILockscreenState } from '@/store/modules/lockscreen';
+import { ITabsViewState } from '@/store/modules/tabsView';
+import { INotificationStore } from '@/store/modules/notification';
+import { IDictState } from '@/store/modules/dict';
+
+export interface IStore {
+  asyncRoute: IAsyncRouteState;
+  user: IUserState;
+  lockscreen: ILockscreenState;
+  tabsView: ITabsViewState;
+  dict: IDictState;
+  notification: INotificationStore;
+  count: number;
+}
diff --git a/web/src/styles/common.less b/web/src/styles/common.less
new file mode 100644
index 0000000..355d698
--- /dev/null
+++ b/web/src/styles/common.less
@@ -0,0 +1,134 @@
+#app,
+body,
+html {
+  height: 100%;
+}
+
+body {
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
+    '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
+  line-height: 1.5;
+  color: #515a6e;
+  font-size: 14px;
+  background-color: #f7f7f7;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+//重置样式
+.anticon {
+  svg {
+    vertical-align: initial;
+  }
+}
+
+a {
+  color: #2d8cf0;
+  background: transparent;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+a:hover {
+  color: #57a3f3;
+}
+
+a:active {
+  color: #2b85e4;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+  text-decoration: none;
+}
+
+/* 滚动条凹槽的颜色，还可以设置边框属性 */
+*::-webkit-scrollbar-track-piece {
+  background-color: #f8f8f8;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+/* 滚动条的宽度 */
+*::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
+/* 滚动条的设置 */
+*::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  background-clip: padding-box;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+/* 滚动条鼠标移上去 */
+*::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb;
+}
+
+/* router view transition */
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.35s, opacity 0.28s ease-in-out;
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.03);
+}
+
+//antd 卡片样式定制
+body .n-card {
+  transition: all 0.2s ease-in-out;
+}
+
+body .n-icon {
+  vertical-align: middle;
+}
+
+body .proCard {
+  border-radius: 12px;
+  margin-top: 12px;
+
+  .n-card-content {
+    padding: 16px;
+
+    &:first-child {
+      padding-top: 16px;
+    }
+  }
+}
+
+body .n-modal {
+  border-radius: 6px;
+}
+
+.n-layout-page-header .n-card {
+  border-radius: 12px;
+}
+
+//body .proCardTabs{
+//  .n-card-content{ padding-top: 3px}
+//  .n-card-content:first-child{ padding-top: 3px}
+//}
+
+.n-layout-page-header {
+  margin: 8px 0;
+}
diff --git a/web/src/styles/hotgo.less b/web/src/styles/hotgo.less
new file mode 100644
index 0000000..4875404
--- /dev/null
+++ b/web/src/styles/hotgo.less
@@ -0,0 +1,3 @@
+.min-left-space {
+  margin-left: 5px;
+}
diff --git a/web/src/styles/index.less b/web/src/styles/index.less
new file mode 100644
index 0000000..c55041e
--- /dev/null
+++ b/web/src/styles/index.less
@@ -0,0 +1,4 @@
+@import 'transition/index.less';
+@import './var.less';
+@import './common.less';
+@import './hotgo.less';
diff --git a/web/src/styles/tailwind.css b/web/src/styles/tailwind.css
new file mode 100644
index 0000000..c187af7
--- /dev/null
+++ b/web/src/styles/tailwind.css
@@ -0,0 +1,4 @@
+/*! @import */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/web/src/styles/transition/base.less b/web/src/styles/transition/base.less
new file mode 100644
index 0000000..7944c8b
--- /dev/null
+++ b/web/src/styles/transition/base.less
@@ -0,0 +1,18 @@
+.transition-default() {
+  &-enter-active,
+  &-leave-active {
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+  }
+
+  &-move {
+    transition: transform 0.4s;
+  }
+}
+
+.expand-transition {
+  .transition-default();
+}
+
+.expand-x-transition {
+  .transition-default();
+}
diff --git a/web/src/styles/transition/fade.less b/web/src/styles/transition/fade.less
new file mode 100644
index 0000000..1f8e63e
--- /dev/null
+++ b/web/src/styles/transition/fade.less
@@ -0,0 +1,81 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// ///////////////////////////////////////////////
+// Fade Bottom
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.25s, transform 0.3s;
+}
+
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+// fade-scale
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+// ///////////////////////////////////////////////
+// Fade Top
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-top-enter-active,
+.fade-top-leave-active {
+  transition: opacity 0.2s, transform 0.25s;
+}
+
+.fade-top-enter-from {
+  opacity: 0;
+  transform: translateY(8%);
+}
+
+.fade-top-leave-to {
+  opacity: 0;
+  transform: translateY(-8%);
+}
diff --git a/web/src/styles/transition/index.less b/web/src/styles/transition/index.less
new file mode 100644
index 0000000..e372b25
--- /dev/null
+++ b/web/src/styles/transition/index.less
@@ -0,0 +1,10 @@
+@import './base.less';
+@import './fade.less';
+@import './scale.less';
+@import './slide.less';
+@import './scroll.less';
+@import './zoom.less';
+
+.collapse-transition {
+  transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
+}
diff --git a/web/src/styles/transition/scale.less b/web/src/styles/transition/scale.less
new file mode 100644
index 0000000..c965493
--- /dev/null
+++ b/web/src/styles/transition/scale.less
@@ -0,0 +1,21 @@
+.scale-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+.scale-rotate-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0) rotate(-45deg);
+  }
+}
diff --git a/web/src/styles/transition/scroll.less b/web/src/styles/transition/scroll.less
new file mode 100644
index 0000000..a5f45e4
--- /dev/null
+++ b/web/src/styles/transition/scroll.less
@@ -0,0 +1,67 @@
+.scroll-y-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateY(-15px);
+  }
+
+  &-leave-to {
+    transform: translateY(15px);
+  }
+}
+
+.scroll-y-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateY(15px);
+  }
+
+  &-leave-to {
+    transform: translateY(-15px);
+  }
+}
+
+.scroll-x-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(-15px);
+  }
+
+  &-leave-to {
+    transform: translateX(15px);
+  }
+}
+
+.scroll-x-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(15px);
+  }
+
+  &-leave-to {
+    transform: translateX(-15px);
+  }
+}
diff --git a/web/src/styles/transition/slide.less b/web/src/styles/transition/slide.less
new file mode 100644
index 0000000..79b00df
--- /dev/null
+++ b/web/src/styles/transition/slide.less
@@ -0,0 +1,39 @@
+.slide-y-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
+.slide-y-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+}
+
+.slide-x-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(-15px);
+  }
+}
+
+.slide-x-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(15px);
+  }
+}
diff --git a/web/src/styles/transition/zoom.less b/web/src/styles/transition/zoom.less
new file mode 100644
index 0000000..2ea378c
--- /dev/null
+++ b/web/src/styles/transition/zoom.less
@@ -0,0 +1,27 @@
+// zoom-out
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
+}
+
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+// zoom-fade
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.2s, opacity 0.3s ease-out;
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}
diff --git a/web/src/styles/var.less b/web/src/styles/var.less
new file mode 100644
index 0000000..e0fb0cb
--- /dev/null
+++ b/web/src/styles/var.less
@@ -0,0 +1,4 @@
+@primaryColor: #2d8cf0;
+@primaryColorHover: #57a3f3;
+@header-height: 64px;
+@footer-height: 70px;
diff --git a/web/src/utils/Drag.ts b/web/src/utils/Drag.ts
new file mode 100644
index 0000000..d41fedb
--- /dev/null
+++ b/web/src/utils/Drag.ts
@@ -0,0 +1,98 @@
+//获取相关CSS属性
+const getCss = function (o, key) {
+  return o.currentStyle
+    ? o.currentStyle[key]
+    : document.defaultView?.getComputedStyle(o, null)[key];
+};
+
+const params = {
+  left: 0,
+  top: 0,
+  currentX: 0,
+  currentY: 0,
+  flag: false,
+};
+
+const startDrag = function (bar, target, callback?) {
+  const screenWidth = document.body.clientWidth; // body当前宽度
+  const screenHeight = document.documentElement.clientHeight; // 可见区域高度
+
+  const dragDomW = target.offsetWidth; // 对话框宽度
+  const dragDomH = target.offsetHeight; // 对话框高度
+
+  const minDomLeft = target.offsetLeft;
+  const minDomTop = target.offsetTop;
+
+  const maxDragDomLeft = screenWidth - minDomLeft - dragDomW;
+  const maxDragDomTop = screenHeight - minDomTop - dragDomH;
+
+  if (getCss(target, 'left') !== 'auto') {
+    params.left = getCss(target, 'left');
+  }
+  if (getCss(target, 'top') !== 'auto') {
+    params.top = getCss(target, 'top');
+  }
+
+  //o是移动对象
+  bar.onmousedown = function (event) {
+    params.flag = true;
+    if (!event) {
+      event = window.event;
+      //防止IE文字选中
+      bar.onselectstart = function () {
+        return false;
+      };
+    }
+    const e = event;
+    params.currentX = e.clientX;
+    params.currentY = e.clientY;
+  };
+  document.onmouseup = function () {
+    params.flag = false;
+    if (getCss(target, 'left') !== 'auto') {
+      params.left = getCss(target, 'left');
+    }
+    if (getCss(target, 'top') !== 'auto') {
+      params.top = getCss(target, 'top');
+    }
+  };
+  document.onmousemove = function (event) {
+    const e: any = event ? event : window.event;
+    if (params.flag) {
+      const nowX = e.clientX,
+        nowY = e.clientY;
+      const disX = nowX - params.currentX,
+        disY = nowY - params.currentY;
+
+      let left = parseInt(params.left) + disX;
+      let top = parseInt(params.top) + disY;
+
+      // 拖出屏幕边缘
+      if (-left > minDomLeft) {
+        left = -minDomLeft;
+      } else if (left > maxDragDomLeft) {
+        left = maxDragDomLeft;
+      }
+
+      if (-top > minDomTop) {
+        top = -minDomTop;
+      } else if (top > maxDragDomTop) {
+        top = maxDragDomTop;
+      }
+
+      target.style.left = left + 'px';
+      target.style.top = top + 'px';
+
+      if (typeof callback == 'function') {
+        callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
+      }
+
+      if (event.preventDefault) {
+        event.preventDefault();
+      }
+      return false;
+    }
+  };
+};
+
+export default startDrag;
diff --git a/web/src/utils/Storage.ts b/web/src/utils/Storage.ts
new file mode 100644
index 0000000..1a3459d
--- /dev/null
+++ b/web/src/utils/Storage.ts
@@ -0,0 +1,127 @@
+// 默认缓存期限为7天
+const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
+
+/**
+ * 创建本地缓存对象
+ * @param {string=} prefixKey -
+ * @param {Object} [storage=localStorage] - sessionStorage | localStorage
+ */
+export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) => {
+  /**
+   * 本地缓存类
+   * @class Storage
+   */
+  const Storage = class {
+    private storage = storage;
+    private prefixKey?: string = prefixKey;
+
+    private getKey(key: string) {
+      return `${this.prefixKey}${key}`.toUpperCase();
+    }
+
+    /**
+     * @description 设置缓存
+     * @param {string} key 缓存键
+     * @param {*} value 缓存值
+     * @param expire
+     */
+    set(key: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
+      const stringData = JSON.stringify({
+        value,
+        expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
+      });
+      this.storage.setItem(this.getKey(key), stringData);
+    }
+
+    /**
+     * 读取缓存
+     * @param {string} key 缓存键
+     * @param {*=} def 默认值
+     */
+    get(key: string, def: any = null) {
+      const item = this.storage.getItem(this.getKey(key));
+      if (item) {
+        try {
+          const data = JSON.parse(item);
+          const { value, expire } = data;
+          // 在有效期内直接返回
+          if (expire === null || expire >= Date.now()) {
+            return value;
+          }
+          this.remove(key);
+        } catch (e) {
+          return def;
+        }
+      }
+      return def;
+    }
+
+    /**
+     * 从缓存删除某项
+     * @param {string} key
+     */
+    remove(key: string) {
+      this.storage.removeItem(this.getKey(key));
+    }
+
+    /**
+     * 清空所有缓存
+     * @memberOf Cache
+     */
+    clear(): void {
+      this.storage.clear();
+    }
+
+    /**
+     * 设置cookie
+     * @param {string} name cookie 名称
+     * @param {*} value cookie 值
+     * @param {number=} expire 过期时间
+     * 如果过期时间为设置，默认关闭浏览器自动删除
+     * @example
+     */
+    setCookie(name: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
+      document.cookie = `${this.getKey(name)}=${value}; Max-Age=${expire}`;
+    }
+
+    /**
+     * 根据名字获取cookie值
+     * @param name
+     */
+    getCookie(name: string): string {
+      const cookieArr = document.cookie.split('; ');
+      for (let i = 0, length = cookieArr.length; i < length; i++) {
+        const kv = cookieArr[i].split('=');
+        if (kv[0] === this.getKey(name)) {
+          return kv[1];
+        }
+      }
+      return '';
+    }
+
+    /**
+     * 根据名字删除指定的cookie
+     * @param {string} key
+     */
+    removeCookie(key: string) {
+      this.setCookie(key, 1, -1);
+    }
+
+    /**
+     * 清空cookie，使所有cookie失效
+     */
+    clearCookie(): void {
+      const keys = document.cookie.match(/[^ =;]+(?==)/g);
+      if (keys) {
+        for (let i = keys.length; i--; ) {
+          document.cookie = keys[i] + '=0;expire=' + new Date(0).toUTCString();
+        }
+      }
+    }
+  };
+  return new Storage();
+};
+
+export const storage = createStorage();
+
+export default Storage;
diff --git a/web/src/utils/array.ts b/web/src/utils/array.ts
new file mode 100644
index 0000000..7559db1
--- /dev/null
+++ b/web/src/utils/array.ts
@@ -0,0 +1,64 @@
+
+export function delNullProperty(obj) {
+  for (const i in obj) {
+    if (obj[i] === undefined || obj[i] === null || obj[i] === '') {
+      delete obj[i];
+    } else if (obj[i].constructor === Object) {
+      if (Object.keys(obj[i]).length === 0) delete obj[i];
+      delNullProperty(obj[i]);
+    } else if (obj[i].constructor === Array) {
+      if (Array.prototype.isPrototypeOf(obj[i]) && obj[i].length === 0) {
+        delete obj[i];
+      } else {
+        for (let index = 0; index < obj[i].length; index++) {
+          if (
+            obj[i][index] === undefined ||
+            obj[i][index] === null ||
+            obj[i][index] === '' ||
+            JSON.stringify(obj[i][index]) === '{}'
+          ) {
+            obj[i].splice(index, 1);
+            index--;
+          }
+          if (obj[i][index] === undefined || obj[i][index].constructor !== undefined) {
+            continue;
+          }
+          if (obj[i][index].constructor === Object || obj[i][index].constructor === Array) {
+            delNullProperty(obj[i][index]);
+          }
+        }
+      }
+    }
+  }
+  return obj;
+}
+
+export function reverse(array) {
+  if (array !== undefined && array !== null && array.length > 0) {
+    return array.reverse();
+  }
+  return array;
+}
+
+export function encodeParams(obj) {
+  const arr = [];
+  for (const p in obj) {
+    // @ts-ignore
+    arr.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]));
+  }
+  return arr.join('&');
+}
+
+export function copyObj(obj2: any, obj1: any) {
+  for (const key in obj1) {
+    if (obj2[key] !== undefined) {
+      obj2[key] = obj1[key];
+    }
+  }
+  return obj2;
+}
+
+// 返回两个数组的差集
+export function findArrayDifference(arr1: number[], arr2: number[]): number[] {
+  return arr1.filter((num) => !arr2.includes(num));
+}
diff --git a/web/src/utils/browser-type.ts b/web/src/utils/browser-type.ts
new file mode 100644
index 0000000..7fe8722
--- /dev/null
+++ b/web/src/utils/browser-type.ts
@@ -0,0 +1,142 @@
+/**
+ * @description 获取用户浏览器版本及系统信息
+ * @param {string='zh-cn' | 'en'} lang 返回中文的信息还是英文的
+ * @constructor
+ */
+export default function BrowserType(lang: 'zh-cn' | 'en' = 'en') {
+  // 权重：系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本
+  const ua = navigator.userAgent.toLowerCase();
+  const testUa = (regexp) => regexp.test(ua);
+  const testVs = (regexp) =>
+    ua
+      .match(regexp)
+      ?.toString()
+      .replace(/[^0-9|_.]/g, '')
+      .replace(/_/g, '.');
+  // 系统
+  const system =
+    new Map([
+      [testUa(/windows|win32|win64|wow32|wow64/g), 'windows'], // windows系统
+      [testUa(/macintosh|macintel/g), 'macos'], // macos系统
+      [testUa(/x11/g), 'linux'], // linux系统
+      [testUa(/android|adr/g), 'android'], // android系统
+      [testUa(/ios|iphone|ipad|ipod|iwatch/g), 'ios'], // ios系统
+    ]).get(true) || 'unknow';
+
+  // 系统版本
+  const systemVs =
+    new Map([
+      [
+        'windows',
+        new Map([
+          [testUa(/windows nt 5.0|windows 2000/g), '2000'],
+          [testUa(/windows nt 5.1|windows xp/g), 'xp'],
+          [testUa(/windows nt 5.2|windows 2003/g), '2003'],
+          [testUa(/windows nt 6.0|windows vista/g), 'vista'],
+          [testUa(/windows nt 6.1|windows 7/g), '7'],
+          [testUa(/windows nt 6.2|windows 8/g), '8'],
+          [testUa(/windows nt 6.3|windows 8.1/g), '8.1'],
+          [testUa(/windows nt 10.0|windows 10/g), '10'],
+        ]).get(true),
+      ],
+      ['macos', testVs(/os x [\d._]+/g)],
+      ['android', testVs(/android [\d._]+/g)],
+      ['ios', testVs(/os [\d._]+/g)],
+    ]).get(system) || 'unknow';
+
+  // 平台
+  let platform = 'unknow';
+  if (system === 'windows' || system === 'macos' || system === 'linux') {
+    platform = 'desktop'; // 桌面端
+  } else if (system === 'android' || system === 'ios' || testUa(/mobile/g)) {
+    platform = 'mobile'; // 移动端
+  }
+  // 内核和载体
+  const [engine = 'unknow', supporter = 'unknow'] = new Map([
+    [
+      testUa(/applewebkit/g),
+      [
+        'webkit',
+        new Map([
+          // webkit内核
+          [testUa(/safari/g), 'safari'], // safari浏览器
+          [testUa(/chrome/g), 'chrome'], // chrome浏览器
+          [testUa(/opr/g), 'opera'], // opera浏览器
+          [testUa(/edge/g), 'edge'], // edge浏览器
+        ]).get(true),
+      ] || 'unknow',
+    ], // [webkit内核, xxx浏览器]
+    [testUa(/gecko/g) && testUa(/firefox/g), ['gecko', 'firefox']], // [gecko内核,firefox浏览器]
+    [testUa(/presto/g), ['presto', 'opera']], // [presto内核,opera浏览器]
+    [testUa(/trident|compatible|msie/g), ['trident', 'iexplore']], // [trident内核,iexplore浏览器]
+  ]).get(true) || ['unknow', 'unknow'];
+
+  // 内核版本
+  const engineVs =
+    new Map([
+      ['webkit', testVs(/applewebkit\/[\d._]+/g)],
+      ['gecko', testVs(/gecko\/[\d._]+/g)],
+      ['presto', testVs(/presto\/[\d._]+/g)],
+      ['trident', testVs(/trident\/[\d._]+/g)],
+    ]).get(engine) || 'unknow';
+
+  // 载体版本
+  const supporterVs =
+    new Map([
+      ['firefox', testVs(/firefox\/[\d._]+/g)],
+      ['opera', testVs(/opr\/[\d._]+/g)],
+      ['iexplore', testVs(/(msie [\d._]+)|(rv:[\d._]+)/g)],
+      ['edge', testVs(/edge\/[\d._]+/g)],
+      ['safari', testVs(/version\/[\d._]+/g)],
+      ['chrome', testVs(/chrome\/[\d._]+/g)],
+    ]).get(supporter) || 'unknow';
+
+  // 外壳和外壳版本
+  const [shell = 'none', shellVs = 'unknow'] = new Map([
+    [testUa(/micromessenger/g), ['wechat', testVs(/micromessenger\/[\d._]+/g)]], // [微信浏览器,]
+    [testUa(/qqbrowser/g), ['qq', testVs(/qqbrowser\/[\d._]+/g)]], // [QQ浏览器,]
+    [testUa(/ucbrowser/g), ['uc', testVs(/ucbrowser\/[\d._]+/g)]], // [UC浏览器,]
+    [testUa(/qihu 360se/g), ['360', 'unknow']], // [360浏览器(无版本),]
+    [testUa(/2345explorer/g), ['2345', testVs(/2345explorer\/[\d._]+/g)]], // [2345浏览器,]
+    [testUa(/metasr/g), ['sougou', 'unknow']], // [搜狗浏览器(无版本),]
+    [testUa(/lbbrowser/g), ['liebao', 'unknow']], // [猎豹浏览器(无版本),]
+    [testUa(/maxthon/g), ['maxthon', testVs(/maxthon\/[\d._]+/g)]], // [遨游浏览器,]
+  ]).get(true) || ['none', 'unknow'];
+
+  return {
+    'zh-cn': Object.assign(
+      {
+        内核: engine, // 内核: webkit gecko presto trident
+        内核版本: engineVs, // 内核版本
+        平台: platform, // 平台: desktop mobile
+        载体: supporter, // 载体: chrome safari firefox opera iexplore edge
+        载体版本: supporterVs, // 载体版本
+        系统: system, // 系统: windows macos linux android ios
+        系统版本: systemVs, // 系统版本
+      },
+      shell === 'none'
+        ? {}
+        : {
+            外壳: shell, // 外壳: wechat qq uc 360 2345 sougou liebao maxthon
+            外壳版本: shellVs, // 外壳版本
+          }
+    ),
+    en: Object.assign(
+      {
+        engine, // 内核: webkit gecko presto trident
+        engineVs, // 内核版本
+        platform, // 平台: desktop mobile
+        supporter, // 载体: chrome safari firefox opera iexplore edge
+        supporterVs, // 载体版本
+        system, // 系统: windows macos linux android ios
+        systemVs, // 系统版本
+      },
+      shell === 'none'
+        ? {}
+        : {
+            shell, // 外壳: wechat qq uc 360 2345 sougou liebao maxthon
+            shellVs, // 外壳版本
+          }
+    ),
+  }[lang];
+}
diff --git a/web/src/utils/charset.ts b/web/src/utils/charset.ts
new file mode 100644
index 0000000..869ed48
--- /dev/null
+++ b/web/src/utils/charset.ts
@@ -0,0 +1,74 @@
+/**
+ * 随机生成字符串
+ */
+export function getRandomString(len = 12, isSmall = false) {
+  const _charStr = 'abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789';
+  const _smallCharStr = 'abacdefghjklmnopqrstuvwxyz0123456789';
+  const charStr = isSmall ? _smallCharStr : _charStr;
+  const min = 0;
+  const max = charStr.length - 1;
+  let _str = '';
+  //循环生成字符串
+  for (let i = 0, index; i < len; i++) {
+    index = (function (randomIndexFunc, i) {
+      return randomIndexFunc(min, max, i, randomIndexFunc);
+    })(function (min, max, i, _self) {
+      const numStart = _charStr.length - 10;
+      let indexTemp = Math.floor(Math.random() * (max - min + 1) + min);
+      if (i == 0 && indexTemp >= numStart) {
+        indexTemp = _self(min, max, i, _self);
+      }
+      return indexTemp;
+    }, i);
+    _str += _charStr[index];
+  }
+  return _str;
+}
+
+/**
+ * 隐藏中间几位字符
+ */
+export function structure(array) {
+  // 将字符串转化成数组
+  const arrBox = [...array];
+  const count = arrBox.length;
+  if (count == 1) {
+    return '*';
+  }
+  let min = 1;
+  let max = count;
+  // 两位姓名
+  if (count == 2) {
+    min = 0;
+    max = count;
+  }
+  // 三位姓名
+  if (count == 3) {
+    min = 0;
+    max = count - 1;
+  }
+  // if (count >= 2 && count <= 8) {
+  //   min = 1;
+  // }
+
+  // 手机号
+  if (count == 11) {
+    min = 3;
+    max = 7;
+  }
+  // 身份证号码
+  if (count >= 15) {
+    min = 9;
+    max = count - 4;
+  }
+  // 2.将数组中的4-7位变成*
+  let str = '';
+  arrBox.map((res, index) => {
+    if (index > min && index < max) {
+      str += '*';
+    } else {
+      str += res;
+    }
+  });
+  return str;
+}
diff --git a/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts
new file mode 100644
index 0000000..779664f
--- /dev/null
+++ b/web/src/utils/dateUtil.ts
@@ -0,0 +1,206 @@
+import {
+  endOfMonth,
+  endOfToday,
+  endOfWeek,
+  endOfYesterday,
+  format,
+  startOfMonth,
+  startOfToday,
+  startOfTomorrow,
+  startOfWeek,
+  startOfYesterday,
+  subMonths,
+} from 'date-fns';
+
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+const DATE_FORMAT = 'yyyy-MM-dd';
+
+export function formatToDateTime(date: string, formatStr = DATE_TIME_FORMAT): string {
+  if (date === null || date === undefined || date === '') {
+    return ``;
+  }
+  return format(new Date(Date.parse(date)), formatStr);
+}
+
+export function formatToDate(date: string, formatStr = DATE_FORMAT): string {
+  if (date === null || date === undefined || date === '') {
+    return ``;
+  }
+  return format(new Date(Date.parse(date)), formatStr);
+}
+
+export function timestampToTime(timestamp) {
+  const date = new Date(timestamp * 1000);
+  const Y = date.getFullYear() + '-';
+  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+  const D = (date.getDate() + 1 <= 10 ? '0' + date.getDate() : date.getDate()) + ' ';
+  const h = (date.getHours() + 1 <= 10 ? '0' + date.getHours() : date.getHours()) + ':';
+  const m = (date.getMinutes() + 1 <= 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
+  const s = date.getSeconds() + 1 <= 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return Y + M + D + h + m + s;
+}
+
+export function timestampToTimeNF(timestamp) {
+  const date = new Date(timestamp);
+  const Y = date.getFullYear();
+  const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+  const D = date.getDate() + 1 <= 10 ? '0' + date.getDate() : date.getDate();
+  const h = date.getHours() + 1 <= 10 ? '0' + date.getHours() : date.getHours();
+  const m = date.getMinutes() + 1 <= 10 ? '0' + date.getMinutes() : date.getMinutes();
+  const s = date.getSeconds() + 1 <= 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return Y.toString() + M.toString() + D.toString() + h.toString() + m.toString() + s.toString();
+}
+
+export function dateToTimestamp(date: string) {
+  if (date === null || date === undefined || date === '') {
+    return 0;
+  }
+  return new Date(date).getTime();
+}
+
+export function timestampToDate(timestamp) {
+  const date = new Date(timestamp);
+  const Y = date.getFullYear() + '-';
+  const M = (date.getMonth() + 1 <= 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+  const D = date.getDate() + 1 <= 10 ? '0' + date.getDate() : date.getDate();
+  return Y + M + D;
+}
+
+export function getTime() {
+  const myDate = new Date();
+  const hour = myDate.getHours().toString().padStart(2, '0');
+  const minutes = myDate.getMinutes().toString().padStart(2, '0');
+  const seconed = myDate.getSeconds().toString().padStart(2, '0');
+  return hour + ':' + minutes + ':' + seconed;
+}
+
+export function getDate() {
+  const myDate = new Date();
+  const month = (myDate.getMonth() + 1).toString().padStart(2, '0');
+  const day = myDate.getDate().toString().padStart(2, '0');
+  return myDate.getFullYear() + '-' + month + '-' + day;
+}
+
+export function defaultStatisticsTimeOptions() {
+  return new Date().getTime() - 86400 * 1000;
+}
+
+export function formatBefore(oldDate) {
+  //当前时间
+  const newDate = new Date();
+  const newDateTime1 = newDate.getTime(); //含有时分秒
+  newDate.setHours(0);
+  newDate.setMinutes(0);
+  newDate.setSeconds(0);
+  newDate.setMilliseconds(0);
+  const newDateTime2 = newDate.getTime(); //当前时间,不含有时分秒
+
+  //传递时间
+  const oldDateTime1 = oldDate.getTime(); //含有时分秒
+  oldDate.setHours(0);
+  oldDate.setMinutes(0);
+  oldDate.setSeconds(0);
+  oldDate.setMilliseconds(0);
+  const oldDateTime2 = oldDate.getTime(); //不含有时分秒
+
+  const d1 = (newDateTime1 - oldDateTime1) / 1000;
+  const d2 = (newDateTime2 - oldDateTime2) / 1000;
+
+  let res = '';
+  if (d2 > 0) {
+    //是几天前
+    const days = parseInt(d2 / 86400);
+    if (days === 1) {
+      res = '昨天';
+    } else if (days === 2) {
+      res = '前天';
+    } else {
+      res = days + '天前';
+    }
+  } else {
+    //是今天
+    const hours = parseInt(d1 / 3600);
+    if (hours > 0) {
+      res = hours + '小时前';
+    } else {
+      const minutes = parseInt(d1 / 60);
+      if (minutes > 0) {
+        res = minutes + '分钟前';
+      } else {
+        const seconds = parseInt(d1);
+        if (seconds > 10) {
+          res = seconds + '秒前';
+        } else {
+          res = '刚刚';
+        }
+      }
+    }
+  }
+  return res;
+}
+
+// @ts-ignore
+export function formatAfter(end): string {
+  const start = new Date();
+  let sjc = start.getTime() - end.getTime(); //时间差的毫秒数
+  if (end.getTime() - start.getTime() > 0) {
+    sjc = end.getTime() - start.getTime(); //时间差的毫秒数
+  }
+  const days = Math.floor(sjc / (24 * 3600 * 1000)); //计算出相差天数
+  const leave1 = sjc % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
+  const hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
+  const leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
+  const minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
+  const leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
+  const seconds = Math.round(leave3 / 1000); //计算相差秒数
+  if (days > 0) {
+    return days + '天后';
+  }
+  if (hours > 0) {
+    return hours + '小时后';
+  }
+  if (minutes > 0) {
+    return minutes + '分钟后';
+  }
+  if (seconds > 0) {
+    return seconds + '秒后';
+  }
+  return '刚刚';
+}
+
+export function defShortcuts() {
+  return {
+    今天: startOfToday().getTime(),
+    昨天: startOfYesterday().getTime(),
+    明天: startOfTomorrow().getTime(),
+  };
+}
+
+export function defRangeShortcuts() {
+  const nowDate = new Date();
+  const dayBase = 86400 * 1000;
+  return {
+    今天: [startOfToday().getTime(), endOfToday().getTime()] as const,
+    昨天: () => {
+      return [startOfYesterday().getTime(), endOfYesterday().getTime()] as const;
+    },
+    近7天: [startOfToday().getTime() - dayBase * 6, endOfToday().getTime()] as const,
+    近30天: [startOfToday().getTime() - dayBase * 29, endOfToday().getTime()] as const,
+    近90天: [startOfToday().getTime() - dayBase * 89, endOfToday().getTime()] as const,
+    本周: () => {
+      return [
+        startOfWeek(nowDate, { weekStartsOn: 1 }).getTime(),
+        endOfWeek(nowDate, { weekStartsOn: 1 }).getTime(),
+      ] as const;
+    },
+    本月: () => {
+      return [startOfMonth(nowDate).getTime(), endOfMonth(nowDate).getTime()] as const;
+    },
+    上月: () => {
+      return [
+        startOfMonth(subMonths(nowDate, 1)).getTime(),
+        endOfMonth(subMonths(nowDate, 1)).getTime(),
+      ] as const;
+    },
+  };
+}
diff --git a/web/src/utils/domUtils.ts b/web/src/utils/domUtils.ts
new file mode 100644
index 0000000..80a77a5
--- /dev/null
+++ b/web/src/utils/domUtils.ts
@@ -0,0 +1,165 @@
+import { upperFirst } from 'lodash-es';
+
+export interface ViewportOffsetResult {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  rightIncludeBody: number;
+  bottomIncludeBody: number;
+}
+
+export function getBoundingClientRect(element: Element): DOMRect | number {
+  if (!element || !element.getBoundingClientRect) {
+    return 0;
+  }
+  return element.getBoundingClientRect();
+}
+
+function trim(string: string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+}
+
+/* istanbul ignore next */
+export function hasClass(el: Element, cls: string) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+}
+
+/* istanbul ignore next */
+export function addClass(el: Element, cls: string) {
+  if (!el) return;
+  let curClass = el.className;
+  const classes = (cls || '').split(' ');
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+}
+
+/* istanbul ignore next */
+export function removeClass(el: Element, cls: string) {
+  if (!el || !cls) return;
+  const classes = cls.split(' ');
+  let curClass = ' ' + el.className + ' ';
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+}
+/**
+ * Get the left and top offset of the current element
+ * left: the distance between the leftmost element and the left side of the document
+ * top: the distance from the top of the element to the top of the document
+ * right: the distance from the far right of the element to the right of the document
+ * bottom: the distance from the bottom of the element to the bottom of the document
+ * rightIncludeBody: the distance between the leftmost element and the right side of the document
+ * bottomIncludeBody: the distance from the bottom of the element to the bottom of the document
+ *
+ * @description:
+ */
+export function getViewportOffset(element: Element): ViewportOffsetResult {
+  const doc = document.documentElement;
+
+  const docScrollLeft = doc.scrollLeft;
+  const docScrollTop = doc.scrollTop;
+  const docClientLeft = doc.clientLeft;
+  const docClientTop = doc.clientTop;
+
+  const pageXOffset = window.pageXOffset;
+  const pageYOffset = window.pageYOffset;
+
+  const box = getBoundingClientRect(element);
+
+  const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect;
+
+  const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0);
+  const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0);
+  const offsetLeft = retLeft + pageXOffset;
+  const offsetTop = rectTop + pageYOffset;
+
+  const left = offsetLeft - scrollLeft;
+  const top = offsetTop - scrollTop;
+
+  const clientWidth = window.document.documentElement.clientWidth;
+  const clientHeight = window.document.documentElement.clientHeight;
+  return {
+    left: left,
+    top: top,
+    right: clientWidth - rectWidth - left,
+    bottom: clientHeight - rectHeight - top,
+    rightIncludeBody: clientWidth - left,
+    bottomIncludeBody: clientHeight - top,
+  };
+}
+
+export function hackCss(attr: string, value: string) {
+  const prefix: string[] = ['webkit', 'Moz', 'ms', 'OT'];
+
+  const styleObj: any = {};
+  prefix.forEach((item) => {
+    styleObj[`${item}${upperFirst(attr)}`] = value;
+  });
+  return {
+    ...styleObj,
+    [attr]: value,
+  };
+}
+
+/* istanbul ignore next */
+export function on(
+  element: Element | HTMLElement | Document | Window,
+  event: string,
+  handler: EventListenerOrEventListenerObject
+): void {
+  if (element && event && handler) {
+    element.addEventListener(event, handler, false);
+  }
+}
+
+/* istanbul ignore next */
+export function off(
+  element: Element | HTMLElement | Document | Window,
+  event: string,
+  handler: Fn
+): void {
+  if (element && event && handler) {
+    element.removeEventListener(event, handler, false);
+  }
+}
+
+/* istanbul ignore next */
+export function once(el: HTMLElement, event: string, fn: EventListener): void {
+  const listener = function (this: any, ...args: unknown[]) {
+    if (fn) {
+      fn.apply(this, args);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+}
diff --git a/web/src/utils/downloadFile.ts b/web/src/utils/downloadFile.ts
new file mode 100644
index 0000000..8e4f74f
--- /dev/null
+++ b/web/src/utils/downloadFile.ts
@@ -0,0 +1,76 @@
+/**
+ * 根据文件url获取文件名
+ * @param url 文件url
+ */
+function getFileName(url) {
+  const num = url.lastIndexOf('/') + 1;
+  let fileName = url.substring(num);
+  //把参数和文件名分割开
+  fileName = decodeURI(fileName.split('?')[0]);
+  return fileName;
+}
+
+/**
+ * 根据文件地址下载文件
+ * @param {*} sUrl
+ */
+export function downloadByUrl({
+  url,
+  target = '_blank',
+  fileName,
+}: {
+  url: string;
+  target?: '_self' | '_blank';
+  fileName?: string;
+}): Promise<boolean> {
+  // 是否同源
+  const isSameHost = new URL(url).host == location.host;
+  return new Promise<boolean>((resolve, reject) => {
+    if (isSameHost) {
+      const link = document.createElement('a');
+      link.href = url;
+      link.target = target;
+
+      if (link.download !== undefined) {
+        link.download = fileName || getFileName(url);
+      }
+
+      if (document.createEvent) {
+        const e = document.createEvent('MouseEvents');
+        e.initEvent('click', true, true);
+        link.dispatchEvent(e);
+        return resolve(true);
+      }
+
+      if (url.indexOf('?') === -1) {
+        url += '?download';
+      }
+
+      window.open(url, target);
+      return resolve(true);
+    } else {
+      const canvas = document.createElement('canvas');
+      const img = document.createElement('img');
+      img.setAttribute('crossOrigin', 'Anonymous');
+      img.src = url;
+      img.onload = () => {
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const context = canvas.getContext('2d')!;
+        context.drawImage(img, 0, 0, img.width, img.height);
+        // window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg');
+        // saveAs(imageDataUrl, '附件');
+        canvas.toBlob((blob) => {
+          const link = document.createElement('a');
+          // @ts-ignore
+          link.href = window.URL.createObjectURL(blob);
+          link.download = getFileName(url);
+          link.click();
+          URL.revokeObjectURL(link.href);
+          resolve(true);
+        }, 'image/jpeg');
+      };
+      img.onerror = (e) => reject(e);
+    }
+  });
+}
diff --git a/web/src/utils/encrypt.ts b/web/src/utils/encrypt.ts
new file mode 100644
index 0000000..f176abc
--- /dev/null
+++ b/web/src/utils/encrypt.ts
@@ -0,0 +1,25 @@
+import CryptoJS from 'crypto-js';
+
+const defaultKey = 'f080a463654b2279';
+
+export const aesEcb = {
+  // 加密
+  encrypt(word: string, keyStr: string = defaultKey): string {
+    const key = CryptoJS.enc.Utf8.parse(keyStr);
+    const src = CryptoJS.enc.Utf8.parse(word);
+    const encrypted = CryptoJS.AES.encrypt(src, key, {
+      mode: CryptoJS.mode.ECB,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.toString();
+  },
+  // 解密
+  decrypt(word: string, keyStr: string = defaultKey): string {
+    const key = CryptoJS.enc.Utf8.parse(keyStr);
+    const decrypt = CryptoJS.AES.decrypt(word, key, {
+      mode: CryptoJS.mode.ECB,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+  },
+};
diff --git a/web/src/utils/env.ts b/web/src/utils/env.ts
new file mode 100644
index 0000000..67fe2bb
--- /dev/null
+++ b/web/src/utils/env.ts
@@ -0,0 +1,85 @@
+import type { GlobEnvConfig } from '/#/config';
+
+import { warn } from '@/utils/log';
+import pkg from '../../package.json';
+import { getConfigFileName } from '../../build/getConfigFileName';
+
+export function getCommonStoragePrefix() {
+  const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
+  return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase();
+}
+
+// Generate cache key according to version
+export function getStorageShortName() {
+  return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase();
+}
+
+export function getAppEnvConfig() {
+  const ENV_NAME = getConfigFileName(import.meta.env);
+
+  const ENV = (import.meta.env.DEV
+    ? // Get the global configuration (the configuration will be extracted independently when packaging)
+      (import.meta.env as unknown as GlobEnvConfig)
+    : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
+
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_IMG_URL,
+  } = ENV;
+
+  if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+    );
+  }
+
+  return {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_IMG_URL,
+  };
+}
+
+/**
+ * @description: Development model
+ */
+export const devMode = 'development';
+
+/**
+ * @description: Production mode
+ */
+export const prodMode = 'production';
+
+/**
+ * @description: Get environment variables
+ * @returns:
+ * @example:
+ */
+export function getEnv(): string {
+  return import.meta.env.MODE;
+}
+
+/**
+ * @description: Is it a development mode
+ * @returns:
+ * @example:
+ */
+export function isDevMode(): boolean {
+  return import.meta.env.DEV;
+}
+
+/**
+ * @description: Is it a production mode
+ * @returns:
+ * @example:
+ */
+export function isProdMode(): boolean {
+  return import.meta.env.PROD;
+}
diff --git a/web/src/utils/highHtml.ts b/web/src/utils/highHtml.ts
new file mode 100644
index 0000000..d15c2cb
--- /dev/null
+++ b/web/src/utils/highHtml.ts
@@ -0,0 +1,186 @@
+// 关键词配置
+interface IKeywordOption {
+  keyword: string | RegExp;
+  color?: string;
+  bgColor?: string;
+  style?: Record<string, any>;
+  // 高亮标签名
+  tagName?: string;
+  // 忽略大小写
+  caseSensitive?: boolean;
+  // 自定义渲染高亮html
+  // eslint-disable-next-line no-unused-vars
+  renderHighlightKeyword?: (content: string) => any;
+}
+
+type IKeyword = string | IKeywordOption;
+
+export interface IMatchIndex {
+  index: number;
+  subString: string;
+}
+
+// 关键词索引
+export interface IKeywordParseIndex {
+  keyword: string | RegExp;
+  indexList: IMatchIndex[];
+  option?: IKeywordOption;
+}
+
+// 关键词
+export interface IKeywordParseResult {
+  start: number;
+  end: number;
+  subString?: string;
+  option?: IKeywordOption;
+}
+
+// 计算
+const getKeywordIndexList = (content: string, keyword: string | RegExp, flags = 'ig') => {
+  const reg = new RegExp(keyword, flags);
+  const res = (content as any).matchAll(reg);
+  const arr = [...res];
+  const allIndexArr: IMatchIndex[] = arr.map((e) => ({
+    index: e.index,
+    subString: e['0'],
+  }));
+  return allIndexArr;
+};
+
+// 驼峰转换横线
+function humpToLine(name: string) {
+  return name.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+const renderNodeTag = (subStr: string, option: IKeywordOption) => {
+  const s = subStr;
+  if (!option) {
+    return s;
+  }
+  const { tagName = 'mark', bgColor, color, style = {}, renderHighlightKeyword } = option;
+  if (typeof renderHighlightKeyword === 'function') {
+    return renderHighlightKeyword(subStr);
+  }
+  style.backgroundColor = bgColor;
+  style.color = color;
+
+  const styleContent = Object.keys(style)
+    .map((k) => `${humpToLine(k)}:${style[k]}`)
+    .join(';');
+  const styleStr = `style="${styleContent}"`;
+  return `<${tagName} ${styleStr}>${s}</${tagName}>`;
+};
+
+const renderHighlightHtml = (content: string, list: any[]) => {
+  let str = '';
+  list.forEach((item) => {
+    const { start, end, option } = item;
+    const s = content.slice(start, end);
+    const subStr = renderNodeTag(s, option);
+    str += subStr;
+    item.subString = subStr;
+  });
+  return str;
+};
+
+// 解析关键词为索引
+const parseHighlightIndex = (content: string, keywords: IKeyword[]) => {
+  const result: IKeywordParseIndex[] = [];
+  keywords.forEach((keywordOption: IKeyword) => {
+    let option: IKeywordOption = { keyword: '' };
+    if (typeof keywordOption === 'string') {
+      option = { keyword: keywordOption };
+    } else {
+      option = keywordOption;
+    }
+    const { keyword, caseSensitive = true } = option;
+    const indexList = getKeywordIndexList(content, keyword, caseSensitive ? 'g' : 'gi');
+    const res = {
+      keyword,
+      indexList,
+      option,
+    };
+    result.push(res);
+  });
+  return result;
+};
+
+const parseHighlightString = (content: string, keywords: IKeyword[]) => {
+  const result = parseHighlightIndex(content, keywords);
+  const splitList: IKeywordParseResult[] = [];
+  const findSplitIndex = (index: number, len: number) => {
+    for (let i = 0; i < splitList.length; i++) {
+      const cur = splitList[i];
+      // 有交集
+      if (
+        (index > cur.start && index < cur.end) ||
+        (index + len > cur.start && index + len < cur.end) ||
+        (cur.start > index && cur.start < index + len) ||
+        (cur.end > index && cur.end < index + len) ||
+        (index === cur.start && index + len === cur.end)
+      ) {
+        return -1;
+      }
+      // 没有交集，且在当前的前面
+      if (index + len <= cur.start) {
+        return i;
+      }
+      // 没有交集，且在当前的后面的，放在下个迭代处理
+    }
+    return splitList.length;
+  };
+  result.forEach(({ indexList, option }: IKeywordParseIndex) => {
+    indexList.forEach((e) => {
+      const { index, subString } = e;
+      const item = {
+        start: index,
+        end: index + subString.length,
+        option,
+      };
+      const splitIndex = findSplitIndex(index, subString.length);
+      if (splitIndex !== -1) {
+        splitList.splice(splitIndex, 0, item);
+      }
+    });
+  });
+
+  // 补上没有匹配关键词的部分
+  const list: IKeywordParseResult[] = [];
+  splitList.forEach((cur, i) => {
+    const { start, end } = cur;
+    const next = splitList[i + 1];
+    // 第一个前面补一个
+    if (i === 0 && start > 0) {
+      list.push({ start: 0, end: start, subString: content.slice(0, start) });
+    }
+    list.push({ ...cur, subString: content.slice(start, end) });
+    // 当前和下一个中间补一个
+    if (next?.start > end) {
+      list.push({
+        start: end,
+        end: next.start,
+        subString: content.slice(end, next.start),
+      });
+    }
+    // 最后一个后面补一个
+    if (i === splitList.length - 1 && end < content.length - 1) {
+      list.push({
+        start: end,
+        end: content.length - 1,
+        subString: content.slice(end, content.length),
+      });
+    }
+  });
+  return list;
+};
+
+// 生成关键词高亮的html字符串
+const highHtml = (content: string, keywords: IKeyword[]) => {
+  const splitList = parseHighlightString(content, keywords);
+  return {
+    highText: renderHighlightHtml(content, splitList),
+    highList: splitList,
+  };
+};
+
+export default highHtml;
diff --git a/web/src/utils/hotgo.ts b/web/src/utils/hotgo.ts
new file mode 100644
index 0000000..5ad5f6f
--- /dev/null
+++ b/web/src/utils/hotgo.ts
@@ -0,0 +1,186 @@
+// @ts-ignore
+import onerrorImg from '@/assets/images/onerror.png';
+import { usePermission } from '@/hooks/web/usePermission';
+import { ActionItem } from '@/components/Table';
+import { isBoolean, isFunction } from '@/utils/is';
+import { PermissionsEnum } from '@/enums/permissionsEnum';
+
+/**
+ * @deprecated 这个方法将来未来版本完全弃用，请统一使用useDictStore()来维护字典选项
+ */
+export interface Option {
+  label: string;
+  value: string | number;
+  key: string | number;
+  // type: string;
+  listClass: 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
+}
+
+/**
+ * @deprecated 这个方法将来未来版本完全弃用，请统一使用useDictStore()来维护字典选项
+ */
+export interface Options {
+  [name: string]: Option[];
+}
+
+/**
+ * 获取选项名称
+ * @deprecated 这个方法将来未来版本完全弃用，请统一使用useDictStore()来维护字典选项
+ */
+export function getOptionLabel(options: Option[], value) {
+  if (options === undefined || options?.length === 0) {
+    return `unknown`;
+  }
+  for (const item of options) {
+    if (item.value == value) {
+      return item.label;
+    }
+  }
+
+  return `unknown`;
+}
+
+/**
+ * 获取选项标签
+ * @deprecated 这个方法将来未来版本完全弃用，请统一使用useDictStore()来维护字典选项
+ */
+export function getOptionTag(options: Option[], value) {
+  if (options === undefined || options?.length === 0) {
+    return 'default';
+  }
+  for (const item of options) {
+    if (item.value == value) {
+      return item.listClass;
+    }
+  }
+
+  return 'default';
+}
+
+// 自适应模板宽度
+export function adaModalWidth(def = 840) {
+  const val = document.body.clientWidth;
+  if (val <= def) {
+    return '100%';
+  } else {
+    return def + 'px';
+  }
+}
+
+export interface TableColumn {
+  width?: number | string;
+  auth?: PermissionsEnum | PermissionsEnum[] | string | string[];
+  ifShow?: boolean | ((action: ActionItem) => boolean);
+}
+
+// 自适应表格组件横向滑动可见宽度
+export function adaTableScrollX(columns: TableColumn[] = [], actionWidth: number) {
+  const { hasPermission } = usePermission();
+
+  let x = 50; // 勾选列宽度
+  columns = columns.filter((column) => {
+    return hasPermission(column.auth as string[]) && isIfShow(column);
+  });
+  for (const column of columns) {
+    if (column.width && Number(column.width) >= 1) {
+      x += Number(column.width);
+    } else {
+      x += 100; // 默认列宽度
+    }
+  }
+  x += actionWidth;
+  return x;
+}
+
+export function isIfShow(action: ActionItem): boolean {
+  let isIfShow = true;
+  const ifShow = action.ifShow;
+  if (isBoolean(ifShow)) {
+    isIfShow = ifShow;
+  }
+  if (isFunction(ifShow)) {
+    isIfShow = ifShow(action);
+  }
+  return isIfShow;
+}
+
+// 图片加载失败显示自定义默认图片(缺省图) img标签使用
+export function errorImg(e: any): void {
+  e.target.src = onerrorImg;
+  e.target.onerror = null;
+}
+
+// 图片加载失败显示自定义默认图片(缺省图) NImage组件使用
+export function fallbackSrc(): string {
+  return onerrorImg;
+}
+
+export function timeFix() {
+  const time = new Date();
+  const hour = time.getHours();
+  return hour < 9
+    ? '早上好'
+    : hour <= 11
+    ? '上午好'
+    : hour <= 13
+    ? '中午好'
+    : hour < 20
+    ? '下午好'
+    : '晚上好';
+}
+
+// 随机浅色
+export function rdmLightRgbColor(): string {
+  const letters = '456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    if (i === 0) {
+      color += 'F'; // 确保第一个字符较亮
+    } else {
+      color += letters[Math.floor(Math.random() * letters.length)];
+    }
+  }
+  return color;
+}
+
+// 将列表数据转为树形数据
+export function convertListToTree(list: any[], idField = 'id', pidField = 'pid') {
+  if (!list || list.length === 0) {
+    return [];
+  }
+  const min = list.reduce((prev, current) => (prev[pidField] < current[pidField] ? prev : current));
+
+  const map = list.reduce((acc, item) => {
+    acc[item[idField]] = { ...item, children: [] };
+    return acc;
+  }, {});
+
+  list.forEach((item) => {
+    if (item[pidField] !== min[pidField]) {
+      if (!map[item[pidField]]) {
+        map[item[pidField]] = {};
+      }
+
+      if (!map[item[pidField]].children) {
+        map[item[pidField]].children = [];
+      }
+      map[item[pidField]].children.push(map[item[idField]]);
+    }
+  });
+  return list.filter((item) => item[pidField] === min[pidField]).map((item) => map[item[idField]]);
+}
+
+// 从树选项中获取所有key
+export function getTreeKeys(data: any[], idField = 'id') {
+  const keys: any = [];
+  if (!data || data.length === 0) {
+    return keys;
+  }
+  data.map((item: any) => {
+    keys.push(item[idField]);
+    if (item.children && item.children.length) {
+      keys.push(...getTreeKeys(item.children));
+    }
+  });
+  return keys;
+}
diff --git a/web/src/utils/http/axios/Axios.ts b/web/src/utils/http/axios/Axios.ts
new file mode 100644
index 0000000..f8580bd
--- /dev/null
+++ b/web/src/utils/http/axios/Axios.ts
@@ -0,0 +1,233 @@
+import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
+import axios from 'axios';
+import { AxiosCanceler } from './axiosCancel';
+import { isFunction, isString, isUrl } from '@/utils/is';
+import { cloneDeep } from 'lodash-es';
+import type { RequestOptions, CreateAxiosOptions, Result, UploadFileParams } from './types';
+import { ContentTypeEnum } from '@/enums/httpEnum';
+import { useGlobSetting } from '@/hooks/setting';
+
+export * from './axiosTransform';
+
+/**
+ * @description:  axios模块
+ */
+export class VAxios {
+  private axiosInstance: AxiosInstance;
+  private options: CreateAxiosOptions;
+
+  constructor(options: CreateAxiosOptions) {
+    this.options = options;
+    this.axiosInstance = axios.create(options);
+    this.setupInterceptors();
+  }
+
+  getAxios(): AxiosInstance {
+    return this.axiosInstance;
+  }
+
+  /**
+   * @description: 重新配置axios
+   */
+  configAxios(config: CreateAxiosOptions) {
+    if (!this.axiosInstance) {
+      return;
+    }
+    this.createAxios(config);
+  }
+
+  /**
+   * @description: 设置通用header
+   */
+  setHeader(headers: any): void {
+    if (!this.axiosInstance) {
+      return;
+    }
+    Object.assign(this.axiosInstance.defaults.headers, headers);
+  }
+
+  /**
+   * @description:   请求方法
+   */
+  request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    let conf: AxiosRequestConfig = cloneDeep(config);
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = Object.assign({}, requestOptions, options);
+
+    const { beforeRequestHook, requestCatch, transformRequestData } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+
+    //这里重新 赋值成最新的配置
+    // @ts-ignore
+    conf.requestOptions = opt;
+
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<any, AxiosResponse<Result>>(conf)
+        .then((res: AxiosResponse<Result>) => {
+          // 请求是否被取消
+          const isCancel = axios.isCancel(res);
+          if (transformRequestData && isFunction(transformRequestData) && !isCancel) {
+            try {
+              const ret = transformRequestData(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('request error!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error) => {
+          if (requestCatch && isFunction(requestCatch)) {
+            reject(requestCatch(e));
+            return;
+          }
+          reject(e);
+        });
+    });
+  }
+
+  /**
+   * @description:  创建axios实例
+   */
+  private createAxios(config: CreateAxiosOptions): void {
+    this.axiosInstance = axios.create(config);
+  }
+
+  private getTransform() {
+    const { transform } = this.options;
+    return transform;
+  }
+
+  /**
+   * @description:  文件上传
+   */
+  uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams, options?: RequestOptions) {
+    const transform = this.getTransform();
+    const { requestCatch, transformRequestData } = transform || {};
+    const { requestOptions } = this.options;
+    const opt: RequestOptions = Object.assign({}, requestOptions, options);
+
+    const globSetting = useGlobSetting();
+    const urlPrefix = globSetting.urlPrefix || '';
+    const apiUrl = globSetting.apiUrl || '';
+    const isUrlStr = isUrl(config.url as string);
+
+    if (!isUrlStr) {
+      config.url = `${urlPrefix}${config.url}`;
+    }
+
+    if (!isUrlStr && apiUrl && isString(apiUrl)) {
+      config.url = `${apiUrl}${config.url}`;
+    }
+
+    const formData = new window.FormData();
+    if (params) {
+      Object.keys(params).forEach((key) => {
+        const value = params![key];
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            formData.append(`${key}[]`, item);
+          });
+          return;
+        }
+
+        formData.append(key, params![key]);
+      });
+    }
+
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<T>({
+          method: 'POST',
+          data: formData,
+          headers: {
+            'Content-type': ContentTypeEnum.FORM_DATA,
+            ignoreCancelToken: true,
+          },
+          ...config,
+        })
+        .then((res: AxiosResponse<Result>) => {
+          // 请求是否被取消
+          const isCancel = axios.isCancel(res);
+          if (transformRequestData && isFunction(transformRequestData) && !isCancel) {
+            try {
+              const ret = transformRequestData(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('request error!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error) => {
+          if (requestCatch && isFunction(requestCatch)) {
+            reject(requestCatch(e));
+            return;
+          }
+          reject(e);
+        });
+    });
+  }
+
+  /**
+   * @description: 拦截器配置
+   */
+  private setupInterceptors() {
+    const transform = this.getTransform();
+    if (!transform) {
+      return;
+    }
+    const {
+      requestInterceptors,
+      requestInterceptorsCatch,
+      responseInterceptors,
+      responseInterceptorsCatch,
+    } = transform;
+
+    const axiosCanceler = new AxiosCanceler();
+
+    // 请求拦截器配置处理
+    this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
+      const {
+        headers: { ignoreCancelToken },
+      } = config;
+      const ignoreCancel =
+        ignoreCancelToken !== undefined
+          ? ignoreCancelToken
+          : this.options.requestOptions?.ignoreCancelToken;
+
+      !ignoreCancel && axiosCanceler.addPending(config);
+      if (requestInterceptors && isFunction(requestInterceptors)) {
+        config = requestInterceptors(config, this.options);
+      }
+      return config;
+    }, undefined);
+
+    // 请求拦截器错误捕获
+    requestInterceptorsCatch &&
+      isFunction(requestInterceptorsCatch) &&
+      this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch);
+
+    // 响应结果拦截器处理
+    this.axiosInstance.interceptors.response.use((res: AxiosResponse<any>) => {
+      res && axiosCanceler.removePending(res.config);
+      if (responseInterceptors && isFunction(responseInterceptors)) {
+        res = responseInterceptors(res);
+      }
+      return res;
+    }, undefined);
+
+    // 响应结果拦截器错误捕获
+    responseInterceptorsCatch &&
+      isFunction(responseInterceptorsCatch) &&
+      this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch);
+  }
+}
diff --git a/web/src/utils/http/axios/axiosCancel.ts b/web/src/utils/http/axios/axiosCancel.ts
new file mode 100644
index 0000000..be517c0
--- /dev/null
+++ b/web/src/utils/http/axios/axiosCancel.ts
@@ -0,0 +1,61 @@
+import axios, { AxiosRequestConfig, Canceler } from 'axios';
+import qs from 'qs';
+
+import { isFunction } from '@/utils/is/index';
+
+// 声明一个 Map 用于存储每个请求的标识 和 取消函数
+let pendingMap = new Map<string, Canceler>();
+
+export const getPendingUrl = (config: AxiosRequestConfig) =>
+  [config.method, config.url, qs.stringify(config.data), qs.stringify(config.params)].join('&');
+
+export class AxiosCanceler {
+  /**
+   * 添加请求
+   * @param {Object} config
+   */
+  addPending(config: AxiosRequestConfig) {
+    this.removePending(config);
+    const url = getPendingUrl(config);
+    config.cancelToken =
+      config.cancelToken ||
+      new axios.CancelToken((cancel) => {
+        if (!pendingMap.has(url)) {
+          // 如果 pending 中不存在当前请求，则添加进去
+          pendingMap.set(url, cancel);
+        }
+      });
+  }
+
+  /**
+   * @description: 清空所有pending
+   */
+  removeAllPending() {
+    pendingMap.forEach((cancel) => {
+      cancel && isFunction(cancel) && cancel();
+    });
+    pendingMap.clear();
+  }
+
+  /**
+   * 移除请求
+   * @param {Object} config
+   */
+  removePending(config: AxiosRequestConfig) {
+    const url = getPendingUrl(config);
+
+    if (pendingMap.has(url)) {
+      // 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除
+      const cancel = pendingMap.get(url);
+      cancel && cancel(url);
+      pendingMap.delete(url);
+    }
+  }
+
+  /**
+   * @description: 重置
+   */
+  reset(): void {
+    pendingMap = new Map<string, Canceler>();
+  }
+}
diff --git a/web/src/utils/http/axios/axiosTransform.ts b/web/src/utils/http/axios/axiosTransform.ts
new file mode 100644
index 0000000..c966a0b
--- /dev/null
+++ b/web/src/utils/http/axios/axiosTransform.ts
@@ -0,0 +1,52 @@
+/**
+ * 数据处理类，可以根据项目自行配置
+ */
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { RequestOptions, Result } from './types';
+
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  authenticationScheme?: string;
+  transform?: AxiosTransform;
+  requestOptions?: RequestOptions;
+}
+
+export abstract class AxiosTransform {
+  /**
+   * @description: 请求之前处理配置
+   * @description: Process configuration before request
+   */
+  beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig;
+
+  /**
+   * @description: 请求成功处理
+   */
+  transformRequestData?: (res: AxiosResponse<Result>, options: RequestOptions) => any;
+
+  /**
+   * @description: 请求失败处理
+   */
+  requestCatch?: (e: Error) => Promise<any>;
+
+  /**
+   * @description: 请求之前的拦截器
+   */
+  requestInterceptors?: (
+    config: AxiosRequestConfig,
+    options: CreateAxiosOptions
+  ) => AxiosRequestConfig;
+
+  /**
+   * @description: 请求之后的拦截器
+   */
+  responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>;
+
+  /**
+   * @description: 请求之前的拦截器错误处理
+   */
+  requestInterceptorsCatch?: (error: Error) => void;
+
+  /**
+   * @description: 请求之后的拦截器错误处理
+   */
+  responseInterceptorsCatch?: (error: Error) => void;
+}
diff --git a/web/src/utils/http/axios/checkStatus.ts b/web/src/utils/http/axios/checkStatus.ts
new file mode 100644
index 0000000..061fa7f
--- /dev/null
+++ b/web/src/utils/http/axios/checkStatus.ts
@@ -0,0 +1,47 @@
+export function checkStatus(status: number, msg: string): void {
+  const $message = window['$message'];
+  switch (status) {
+    case 400:
+      $message.error(msg);
+      break;
+    // 401: 未登录
+    // 未登录则跳转登录页面，并携带当前页面的路径
+    // 在登录成功后返回当前页面，这一步需要在登录页操作。
+    case 61:
+      $message.error('用户没有权限（令牌、用户名、密码错误）!');
+      break;
+    case 403:
+      $message.error('用户得到授权，但是访问是被禁止的。!');
+      break;
+    // 404请求不存在
+    case 404:
+      $message.error('网络请求错误，未找到该资源!');
+      break;
+    case 405:
+      $message.error('网络请求错误，请求方法未允许!');
+      break;
+    case 408:
+      $message.error('网络请求超时');
+      break;
+    case 500:
+      $message.error('服务器错误,请稍候重试!');
+      break;
+    case 501:
+      $message.error('网络未实现');
+      break;
+    case 502:
+      $message.error('网络错误');
+      break;
+    case 503:
+      $message.error('服务不可用，服务器暂时过载或维护!');
+      break;
+    case 504:
+      $message.error('网络超时');
+      break;
+    case 505:
+      $message.error('http版本不支持该请求!');
+      break;
+    default:
+      $message.error(msg);
+  }
+}
diff --git a/web/src/utils/http/axios/helper.ts b/web/src/utils/http/axios/helper.ts
new file mode 100644
index 0000000..af540d4
--- /dev/null
+++ b/web/src/utils/http/axios/helper.ts
@@ -0,0 +1,47 @@
+import { isObject, isString } from '@/utils/is';
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm';
+
+export function joinTimestamp<T extends boolean>(
+  join: boolean,
+  restful: T
+): T extends true ? string : object;
+
+export function joinTimestamp(join: boolean, restful = false): string | object {
+  if (!join) {
+    return restful ? '' : {};
+  }
+  const now = new Date().getTime();
+  if (restful) {
+    return `?_t=${now}`;
+  }
+  return { _t: now };
+}
+
+/**
+ * @description: Format request parameter time
+ */
+export function formatRequestDate(params: Recordable) {
+  if (Object.prototype.toString.call(params) !== '[object Object]') {
+    return;
+  }
+
+  for (const key in params) {
+    if (params[key] && params[key]._isAMomentObject) {
+      params[key] = params[key].format(DATE_TIME_FORMAT);
+    }
+    if (isString(key)) {
+      const value = params[key];
+      if (value) {
+        try {
+          params[key] = isString(value) ? value.trim() : value;
+        } catch (error) {
+          throw new Error(error as any);
+        }
+      }
+    }
+    if (isObject(params[key])) {
+      formatRequestDate(params[key]);
+    }
+  }
+}
diff --git a/web/src/utils/http/axios/index.ts b/web/src/utils/http/axios/index.ts
new file mode 100644
index 0000000..b871c5a
--- /dev/null
+++ b/web/src/utils/http/axios/index.ts
@@ -0,0 +1,309 @@
+// axios配置  可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
+import { VAxios } from './Axios';
+import { AxiosTransform } from './axiosTransform';
+import axios, { AxiosResponse } from 'axios';
+import { checkStatus } from './checkStatus';
+import { formatRequestDate, joinTimestamp } from './helper';
+import { ContentTypeEnum, RequestEnum, ResultEnum } from '@/enums/httpEnum';
+import { PageEnum } from '@/enums/pageEnum';
+import { useGlobSetting } from '@/hooks/setting';
+import { isString, isUrl } from '@/utils/is/';
+import { deepMerge } from '@/utils';
+import { setObjToUrlParams } from '@/utils/urlUtils';
+import { CreateAxiosOptions, RequestOptions, Result } from './types';
+import { useUserStoreWidthOut } from '@/store/modules/user';
+import router from '@/router';
+import { storage } from '@/utils/Storage';
+import { encodeParams } from '@/utils/urlUtils';
+import { delNullProperty } from '@/utils/array';
+import { useI18nStore } from '@/store/modules/i18n';
+
+const globSetting = useGlobSetting();
+const urlPrefix = globSetting.urlPrefix || '';
+
+/**
+ * @description: 数据处理，方便区分多种处理方式
+ */
+const transform: AxiosTransform = {
+  /**
+   * @description: 处理请求数据
+   */
+  transformRequestData: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    const {
+      isShowMessage = true,
+      isShowErrorMessage,
+      isShowSuccessMessage,
+      successMessageText,
+      errorMessageText,
+      isTransformResponse,
+      isReturnNativeResponse,
+    } = options;
+
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    if (isReturnNativeResponse) {
+      return res;
+    }
+    // 不进行任何处理，直接返回
+    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+    if (!isTransformResponse) {
+      return res.data;
+    }
+
+    const response = res.data;
+    const $dialog = window['$dialog'];
+    const $message = window['$message'];
+
+    if (!response) {
+      // return '[HTTP] Request has no return value';
+      throw new Error('请求出错，请稍候重试');
+    }
+
+    //  这里 code，result，message为 后台统一的字段，需要修改为项目自己的接口返回格式
+    const { code, data, message } = response;
+
+    // 请求成功
+    const hasSuccess = response && Reflect.has(response, 'code') && code === ResultEnum.SUCCESS;
+    // 是否显示提示信息
+    if (isShowMessage) {
+      if (hasSuccess && (successMessageText || isShowSuccessMessage)) {
+        // 是否显示自定义信息提示
+        $dialog.success({
+          type: 'success',
+          content: successMessageText || message || '操作成功！',
+        });
+      } else if (!hasSuccess && (errorMessageText || isShowErrorMessage)) {
+        // 是否显示自定义信息提示
+        $message.error(message || errorMessageText || '操作失败！');
+      } else if (!hasSuccess && options.errorMessageMode === 'modal') {
+        // errorMessageMode=‘custom-modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
+        $dialog.info({
+          title: '提示',
+          content: message,
+          positiveText: '确定',
+          onPositiveClick: () => {},
+        });
+      }
+    }
+
+    // 接口请求成功，直接返回结果
+    if (code === ResultEnum.SUCCESS) {
+      return data;
+    }
+    // 接口请求错误，统一提示错误信息 这里逻辑可以根据项目进行修改
+    let errorMsg = message;
+    switch (code) {
+      // 请求失败
+      case ResultEnum.ERROR:
+        $message.error(errorMsg);
+        break;
+      // 登录超时
+      case ResultEnum.TIMEOUT:
+        const LoginName = PageEnum.BASE_LOGIN_NAME;
+        const LoginPath = PageEnum.BASE_LOGIN;
+        if (router.currentRoute.value.name === LoginName) return;
+        // 到登录页
+        errorMsg = message ?? '登录超时，请重新登录!';
+        $dialog.warning({
+          title: '提示',
+          content: errorMsg, // '登录身份已失效，请重新登录!',
+          positiveText: '确定',
+          //negativeText: '取消',
+          closable: false,
+          maskClosable: false,
+          onPositiveClick: () => {
+            storage.clear();
+            window.location.href = LoginPath;
+          },
+          onNegativeClick: () => {},
+        });
+        break;
+      default:
+        console.log('unknown status code:' + code);
+        $message.error(errorMsg);
+    }
+
+    throw new Error(errorMsg);
+  },
+
+  // 请求之前处理config
+  beforeRequestHook: (config, options) => {
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
+
+    const isUrlStr = isUrl(config.url as string);
+
+    if (!isUrlStr && joinPrefix) {
+      config.url = `${urlPrefix}${config.url}`;
+    }
+
+    if (!isUrlStr && apiUrl && isString(apiUrl)) {
+      config.url = `${apiUrl}${config.url}`;
+    }
+    const params = config.params || {};
+    const data = config.data || false;
+    if (config.method?.toUpperCase() === RequestEnum.GET) {
+      if (!isString(params)) {
+        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
+        config.params = undefined;
+      }
+    } else {
+      if (!isString(params)) {
+        formatDate && formatRequestDate(params);
+        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
+          config.data = data;
+          config.params = params;
+        } else {
+          config.data = params;
+          config.params = undefined;
+        }
+        if (joinParamsToUrl) {
+          config.url = setObjToUrlParams(
+            config.url as string,
+            Object.assign({}, config.params, config.data)
+          );
+        }
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params;
+        config.params = undefined;
+      }
+    }
+    return config;
+  },
+
+  /**
+   * @description: 请求拦截器处理
+   */
+  requestInterceptors: (config, options) => {
+    // 请求之前处理config
+    const i18nStore = useI18nStore();
+    const userStore = useUserStoreWidthOut();
+    const token = userStore.getToken;
+    if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
+      // jwt token
+      (config as Recordable).headers.Authorization = options.authenticationScheme
+        ? `${options.authenticationScheme} ${token}`
+        : token;
+    }
+    config.headers.Locale = i18nStore.getLocale();
+    return config;
+  },
+
+  /**
+   * @description: 响应错误处理
+   */
+  responseInterceptorsCatch: (error: any) => {
+    const $dialog = window['$dialog'];
+    const $message = window['$message'];
+    const { response, code, message } = error || {};
+    // TODO 此处要根据后端接口返回格式修改
+    const msg: string =
+      response && response.data && response.data.message ? response.data.message : '';
+    const err: string = error.toString();
+    try {
+      if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
+        $message.error('接口请求超时，请刷新页面重试!');
+        return;
+      }
+      if (err && err.includes('Network Error')) {
+        $dialog.info({
+          title: '网络异常',
+          content: '请检查您的网络连接是否正常',
+          positiveText: '确定',
+          //negativeText: '取消',
+          closable: false,
+          maskClosable: false,
+          onPositiveClick: () => {},
+          onNegativeClick: () => {},
+        });
+        return Promise.reject(error);
+      }
+    } catch (error) {
+      throw new Error(error as any);
+    }
+    // 请求是否被取消
+    const isCancel = axios.isCancel(error);
+    if (!isCancel) {
+      checkStatus(error.response && error.response.status, msg);
+    } else {
+      console.warn(error, '请求被取消！');
+    }
+    //return Promise.reject(error);
+    return Promise.reject(response?.data);
+  },
+};
+
+function createAxios(opt?: Partial<CreateAxiosOptions>) {
+  return new VAxios(
+    deepMerge(
+      {
+        timeout: 30 * 1000,
+        authenticationScheme: '',
+        // 接口前缀
+        prefixUrl: urlPrefix,
+        headers: { 'Content-Type': ContentTypeEnum.JSON },
+        // 数据处理方式
+        transform,
+        // 配置项，下面的选项都可以在独立的接口请求中覆盖
+        requestOptions: {
+          // 默认将prefix 添加到url
+          joinPrefix: true,
+          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+          isReturnNativeResponse: false,
+          // 需要对返回数据进行处理
+          isTransformResponse: true,
+          // post请求的时候添加参数到url
+          joinParamsToUrl: false,
+          // 格式化提交参数时间
+          formatDate: true,
+          // 消息提示类型
+          errorMessageMode: 'none',
+          // 接口地址
+          apiUrl: globSetting.apiUrl,
+          // 接口拼接地址
+          urlPrefix: urlPrefix,
+          //  是否加入时间戳
+          joinTime: false,
+          // 忽略重复请求
+          ignoreCancelToken: true,
+          // 是否携带token
+          withToken: true,
+        },
+        withCredentials: false,
+      },
+      opt || {}
+    )
+  );
+}
+
+export const http = createAxios();
+
+// 导出
+export const jumpExport = function (url, params) {
+  jump(url, params);
+};
+
+// 跳转
+export const jump = function (url, params) {
+  window.location.href =
+    urlPrefix +
+    url +
+    '?' +
+    encodeParams({
+      ...delNullProperty(params),
+      ...{ authorization: useUserStoreWidthOut().token },
+    });
+};
+
+// 项目，多个不同 api 地址，直接在这里导出多个
+// src/api ts 里面接口，就可以单独使用这个请求，
+// import { httpTwo } from '@/utils/http/axios'
+// export const httpTwo = createAxios({
+//   requestOptions: {
+//     apiUrl: 'http://localhost:9001',
+//     urlPrefix: 'api',
+//   },
+// });
diff --git a/web/src/utils/http/axios/types.ts b/web/src/utils/http/axios/types.ts
new file mode 100644
index 0000000..e1e3423
--- /dev/null
+++ b/web/src/utils/http/axios/types.ts
@@ -0,0 +1,65 @@
+import { AxiosRequestConfig } from 'axios';
+import { AxiosTransform } from './axiosTransform';
+
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  transform?: AxiosTransform;
+  requestOptions?: RequestOptions;
+  authenticationScheme?: string;
+}
+
+// 上传文件
+export interface UploadFileParams {
+  // 其他参数
+  data?: Recordable;
+  // 文件参数接口字段名
+  name?: string;
+  // 文件
+  file: File | Blob;
+  // 文件名称
+  filename?: string;
+  [key: string]: any;
+}
+
+export interface RequestOptions {
+  // 请求参数拼接到url
+  joinParamsToUrl?: boolean;
+  // 格式化请求参数时间
+  formatDate?: boolean;
+  // 是否显示提示信息
+  isShowMessage?: boolean;
+  // 是否解析成JSON
+  isParseToJson?: boolean;
+  // 成功的文本信息
+  successMessageText?: string;
+  // 是否显示成功信息
+  isShowSuccessMessage?: boolean;
+  // 是否显示失败信息
+  isShowErrorMessage?: boolean;
+  // 错误的文本信息
+  errorMessageText?: string;
+  // 是否加入url
+  joinPrefix?: boolean;
+  // 接口地址， 不填则使用默认apiUrl
+  apiUrl?: string;
+  // 请求拼接路径
+  urlPrefix?: string;
+  // 错误消息提示类型
+  errorMessageMode?: 'none' | 'modal';
+  // 是否添加时间戳
+  joinTime?: boolean;
+  // 不进行任何处理，直接返回
+  isTransformResponse?: boolean;
+  // 是否返回原生响应头
+  isReturnNativeResponse?: boolean;
+  //忽略重复请求
+  ignoreCancelToken?: boolean;
+  // 是否携带token
+  withToken?: boolean;
+}
+
+export interface Result<T = any> {
+  code: number;
+  type?: 'success' | 'error' | 'warning';
+  message: string;
+  data?: T;
+}
diff --git a/web/src/utils/icons.ts b/web/src/utils/icons.ts
new file mode 100644
index 0000000..bceaabe
--- /dev/null
+++ b/web/src/utils/icons.ts
@@ -0,0 +1,17 @@
+import { Component } from 'vue';
+import { renderIcon } from '@/utils/index';
+import * as antdIcons from '@vicons/antd';
+// import * as x5Icons from '@vicons/ionicons5';
+
+export const Icons = {};
+for (const element of Object.keys(antdIcons)) {
+  Icons[element] = renderIcon(antdIcons[element]);
+}
+
+// for (const element of Object.keys(x5Icons)) {
+//   constantRouterIcon[element] = renderIcon(x5Icons[element]);
+// }
+
+export function getIconComponent(name: string): Component {
+  return Icons[name];
+}
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
new file mode 100644
index 0000000..15507b5
--- /dev/null
+++ b/web/src/utils/index.ts
@@ -0,0 +1,453 @@
+import { h, unref } from 'vue';
+import type { App, Plugin } from 'vue';
+import {
+  NAvatar,
+  NBadge,
+  NButton,
+  NIcon,
+  NImage,
+  NPopover,
+  NTable,
+  NTag,
+  NTooltip,
+  SelectRenderTag,
+} from 'naive-ui';
+import { EllipsisHorizontalCircleOutline } from '@vicons/ionicons5';
+import { PageEnum } from '@/enums/pageEnum';
+import { isArray, isJsonString, isNullObject, isObject } from './is/index';
+import { cloneDeep } from 'lodash-es';
+import { VNode } from 'vue';
+import { DictType, useDictStore } from '@/store/modules/dict';
+import { fallbackSrc } from '@/utils/hotgo';
+import { getFileExt } from '@/utils/urlUtils';
+
+export const renderTooltip = (trigger, content) => {
+  return h(NTooltip, null, {
+    trigger: () => trigger,
+    default: () => content,
+  });
+};
+
+/**
+ * render 图标
+ * */
+export function renderIcon(icon, props = null) {
+  return () => h(NIcon, props, { default: () => h(icon) });
+}
+
+/**
+ * render new Tag
+ * */
+const newTagColors = { color: '#f90', textColor: '#fff', borderColor: '#f90' };
+
+export function renderNew(type = 'warning', text = 'New', color: object = newTagColors) {
+  return () =>
+    h(
+      NTag as any,
+      {
+        type,
+        round: true,
+        size: 'small',
+        color,
+      },
+      { default: () => text }
+    );
+}
+
+// render 标记
+export function renderBadge(node: VNode) {
+  return h(
+    NBadge,
+    {
+      dot: true,
+      type: 'info',
+    },
+    { default: () => node }
+  );
+}
+
+// render 标签
+export const renderTag: SelectRenderTag = ({ option }) => {
+  return h(
+    NTag,
+    {
+      type: option.listClass as 'success' | 'warning' | 'error' | 'info' | 'primary' | 'default',
+    },
+    { default: () => option.label }
+  );
+};
+
+// renderOptionTag 选项标签
+export const renderOptionTag = (type: DictType, value: any) => {
+  if (isNullObject(value)) {
+    return ``;
+  }
+  const dict = useDictStore();
+  return h(
+    NTag,
+    {
+      style: {
+        marginRight: '6px',
+      },
+      type: dict.getType(type, value),
+      bordered: false,
+    },
+    {
+      default: () => dict.getLabel(type, value),
+    }
+  );
+};
+
+// render 图片
+export const renderImage = (image: string) => {
+  if (!image || image === '') {
+    return ``;
+  }
+  return h(NImage, {
+    width: 32,
+    height: 32,
+    src: image,
+    fallbackSrc: fallbackSrc(),
+    style: {
+      width: '32px',
+      height: '32px',
+      'max-width': '100%',
+      'max-height': '100%',
+      'margin-left': '2px',
+    },
+  });
+};
+
+// render 图片组
+export const renderImageGroup = (images: any) => {
+  if (isJsonString(images)) {
+    images = JSON.parse(images);
+  }
+  if (isNullObject(images) || !isArray(images)) {
+    return ``;
+  }
+  return images.map((image: string) => {
+    return renderImage(image);
+  });
+};
+
+// render 文件
+export const renderFile = (file: string) => {
+  if (!file || file === '') {
+    return ``;
+  }
+  return h(
+    NAvatar,
+    {
+      size: 'small',
+      style: {
+        'margin-left': '2px',
+      },
+    },
+    {
+      default: () => getFileExt(file),
+    }
+  );
+};
+
+// render 文件组
+export const renderFileGroup = (files: any) => {
+  if (isJsonString(files)) {
+    files = JSON.parse(files);
+  }
+  if (isNullObject(files) || !isArray(files)) {
+    return ``;
+  }
+  return files.map((file: string) => {
+    return renderFile(file);
+  });
+};
+
+export interface MemberSumma {
+  id: number; // 用户ID
+  realName: string; // 真实姓名
+  username: string; // 用户名
+  avatar: string; // 头像
+}
+
+// render 操作人摘要
+export const renderPopoverMemberSumma = (member: MemberSumma | null | undefined) => {
+  if (!member) {
+    return '';
+  }
+  return h(
+    NPopover,
+    { trigger: 'hover' },
+    {
+      trigger: () =>
+        h(
+          NButton,
+          {
+            size: 'small',
+            text: true,
+            iconPlacement: 'right',
+          },
+          { default: () => member.realName, icon: renderIcon(EllipsisHorizontalCircleOutline) }
+        ),
+      default: () =>
+        h(
+          NTable,
+          {
+            props: {
+              bordered: false,
+              'single-line': false,
+              size: 'small',
+            },
+          },
+          [
+            h('thead', [
+              h('tr', { align: 'center' }, [
+                h('th', '用户ID'),
+                h('th', '头像'),
+                h('th', '姓名'),
+                h('th', '用户名'),
+              ]),
+            ]),
+            h('tbody', [
+              h('tr', { align: 'center' }, [
+                h('td', member.id),
+                h('td', h(NAvatar, { src: member.avatar, round: true, size: 'small' })),
+                h('td', member.realName),
+                h('td', member.username),
+              ]),
+            ]),
+          ]
+        ),
+    }
+  );
+};
+
+// render html
+export function renderHtmlTooltip(content: string) {
+  content = content.replace(/\n/g, '<br>');
+  const html = h('p', { id: 'app' }, [
+    h('div', {
+      innerHTML: content,
+    }),
+  ]);
+  return renderTooltip(html, html);
+}
+
+/**
+ * 递归组装菜单格式
+ */
+export function generatorMenu(routerMap: Array<any>) {
+  return filterRouter(routerMap).map((item) => {
+    const isRoot = isRootRouter(item);
+    const info = isRoot ? item.children[0] : item;
+    const currentMenu = {
+      ...info,
+      ...info.meta,
+      label: info.meta?.title,
+      key: info.name,
+      icon: isRoot ? item.meta?.icon : info.meta?.icon,
+    };
+    // 是否有子菜单，并递归处理
+    if (info.children && info.children.length > 0) {
+      // Recursion
+      currentMenu.children = generatorMenu(info.children);
+
+      // 当生成后子集为空，则删除子集空数组，否则加载时仍为目录格式！
+      if (currentMenu.children.length === 0) {
+        delete currentMenu.children;
+      }
+    }
+    return currentMenu;
+  });
+}
+
+/**
+ * 混合菜单
+ * */
+export function generatorMenuMix(routerMap: Array<any>, routerName: string, location: string) {
+  const cloneRouterMap = cloneDeep(routerMap);
+  const newRouter = filterRouter(cloneRouterMap);
+  if (location === 'header') {
+    const firstRouter: any[] = [];
+    newRouter.forEach((item) => {
+      const isRoot = isRootRouter(item);
+      const info = isRoot ? item.children[0] : item;
+      info.children = undefined;
+      const currentMenu = {
+        ...info,
+        ...info.meta,
+        label: info.meta?.title,
+        key: info.name,
+      };
+      firstRouter.push(currentMenu);
+    });
+    return firstRouter;
+  } else {
+    return getChildrenRouter(newRouter.filter((item) => item.name === routerName));
+  }
+}
+
+/**
+ * 递归组装子菜单
+ * */
+export function getChildrenRouter(routerMap: Array<any>) {
+  return filterRouter(routerMap).map((item) => {
+    const isRoot = isRootRouter(item);
+    const info = isRoot ? item.children[0] : item;
+    const currentMenu = {
+      ...info,
+      ...info.meta,
+      label: info.meta?.title,
+      key: info.name,
+    };
+    // 是否有子菜单，并递归处理
+    if (info.children && info.children.length > 0) {
+      // Recursion
+      currentMenu.children = getChildrenRouter(info.children);
+    }
+    return currentMenu;
+  });
+}
+
+/**
+ * 判断根路由 Router
+ * */
+export function isRootRouter(item) {
+  if (item.meta?.alwaysShow != true && item.children?.length === 0) {
+    return true;
+  }
+
+  // if (item.meta?.alwaysShow != true) {
+  //   if (item.children?.length > 0) {
+  //     // 如果存在子级。且只要有一个不是隐藏状态的，则判断不是跟路由
+  //     for (let i = 0; i < item.children.length; i++) {
+  //       if (item.children[i]?.hidden == false) {
+  //         return false;
+  //       }
+  //     }
+  //
+  //     return true;
+  //   }
+  // }
+
+  return false;
+}
+
+/**
+ * 强制根路由转换
+ * @param item
+ */
+export function mandatoryRootConvert(item) {
+  if (item.meta?.isRoot === true) {
+  }
+
+  // 默认
+  return item.children[0];
+}
+
+/**
+ * 排除Router
+ * */
+export function filterRouter(routerMap: Array<any>) {
+  return routerMap.filter((item) => {
+    return (
+      (item.meta?.hidden || false) != true &&
+      !['/:path(.*)*', '/', PageEnum.REDIRECT, PageEnum.BASE_LOGIN].includes(item.path)
+    );
+  });
+}
+
+export const withInstall = <T>(component: T, alias?: string) => {
+  const comp = component as any;
+  comp.install = (app: App) => {
+    // @ts-ignore
+    app.component(comp.name || comp.displayName, component);
+    if (alias) {
+      app.config.globalProperties[alias] = component;
+    }
+  };
+  return component as T & Plugin;
+};
+
+// dynamic use hook props
+export function getDynamicProps<T, U>(props: T): Partial<U> {
+  const ret: Recordable = {};
+
+  // @ts-ignore
+  Object.keys(props).map((key) => {
+    ret[key] = unref((props as Recordable)[key]);
+  });
+
+  return ret as Partial<U>;
+}
+
+export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
+  let key: string;
+  for (key in target) {
+    src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key]);
+  }
+  return src;
+}
+
+/**
+ * Sums the passed percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function addLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) + amount;
+  const c = cc > 255 ? 255 : cc;
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
+}
+
+/**
+ * Lightens a 6 char HEX color according to the passed percentage
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed color represented as HEX
+ */
+export function lighten(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
+  amount = Math.trunc((255 * amount) / 100);
+  return `#${addLight(color.substring(0, 2), amount)}${addLight(
+    color.substring(2, 4),
+    amount
+  )}${addLight(color.substring(4, 6), amount)}`;
+}
+
+// 获取树的所有节点key
+export function getAllExpandKeys(treeData: any): any[] {
+  let expandedKeys: any = [];
+  const expandKeys = (items: any[]) => {
+    items.forEach((item: any) => {
+      expandedKeys.push(item.key);
+      if (item.children && item.children.length > 0) {
+        expandKeys(item.children);
+      }
+    });
+  };
+
+  expandKeys(unref(treeData));
+
+  // 去重并转换为数组
+  expandedKeys = Array.from(new Set(expandedKeys));
+  return expandedKeys;
+}
+
+// 从树中查找指定节点
+export function findTreeNode(data: any, key?: string | number, keyField = 'key'): any {
+  for (const item of data) {
+    if (item[keyField] == key) {
+      return item;
+    } else {
+      if (item.children && item.children.length) {
+        const foundItem = findTreeNode(item.children, key);
+        if (foundItem) {
+          return foundItem;
+        }
+      }
+    }
+  }
+  return null;
+}
diff --git a/web/src/utils/is/index.ts b/web/src/utils/is/index.ts
new file mode 100644
index 0000000..49ff4cf
--- /dev/null
+++ b/web/src/utils/is/index.ts
@@ -0,0 +1,165 @@
+const toString = Object.prototype.toString;
+
+/**
+ * @description: 判断值是否未某个类型
+ */
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`;
+}
+
+/**
+ * @description:  是否为函数
+ */
+export function isFunction<T = Function>(val: unknown): val is T {
+  return is(val, 'Function') || is(val, 'AsyncFunction');
+}
+
+/**
+ * @description: 是否已定义
+ */
+export const isDef = <T = unknown>(val?: T): val is T => {
+  return typeof val !== 'undefined';
+};
+
+export const isUnDef = <T = unknown>(val?: T): val is T => {
+  return !isDef(val);
+};
+/**
+ * @description: 是否为对象
+ */
+export const isObject = (val: any): val is Record<any, any> => {
+  return val !== null && is(val, 'Object');
+};
+
+/**
+ * @description:  是否为时间
+ */
+export function isDate(val: unknown): val is Date {
+  return is(val, 'Date');
+}
+
+/**
+ * @description:  是否为数值
+ */
+export function isNumber(val: unknown): val is number {
+  return is(val, 'Number');
+}
+
+/**
+ * @description:  是否为AsyncFunction
+ */
+export function isAsyncFunction<T = any>(val: unknown): val is Promise<T> {
+  return is(val, 'AsyncFunction');
+}
+
+/**
+ * @description:  是否为promise
+ */
+export function isPromise<T = any>(val: unknown): val is Promise<T> {
+  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+/**
+ * @description:  是否为字符串
+ */
+export function isString(val: unknown): val is string {
+  return is(val, 'String');
+}
+
+/**
+ * @description:  是否为boolean类型
+ */
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, 'Boolean');
+}
+
+/**
+ * @description:  是否为数组
+ */
+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
+ */
+export function isJsonString(value: any) {
+  try {
+    const toObj = JSON.parse(value);
+    if (toObj && typeof toObj === 'object') {
+      return true;
+    }
+  } catch {}
+  return false;
+}
+
+export function isNullObject(value: any) {
+  return (
+    isNullOrUnDef(value) ||
+    JSON.stringify(value) === '{}' ||
+    JSON.stringify(value) === '[]' ||
+    value === ''
+  );
+}
+
+/**
+ * @description: 是否客户端
+ */
+export const isClient = () => {
+  return typeof window !== 'undefined';
+};
+
+/**
+ * @description: 是否为浏览器
+ */
+export const isWindow = (val: any): val is Window => {
+  return typeof window !== 'undefined' && is(val, 'Window');
+};
+
+export const isElement = (val: unknown): val is Element => {
+  return isObject(val) && !!val.tagName;
+};
+
+export const isServer = typeof window === 'undefined';
+
+// 是否为图片节点
+export function isImageDom(o: Element) {
+  return o && ['IMAGE', 'IMG'].includes(o.tagName);
+}
+
+export function isNull(val: unknown): val is null {
+  return val === null;
+}
+
+export function isNullAndUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) && isNull(val);
+}
+
+export function isNullOrUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) || isNull(val);
+}
+
+export function isEmpty(value: any): boolean {
+  return value === undefined || value === null || value === '';
+}
+
+// 判断字串符是否以字母开头
+export function isLetterBegin(str) {
+  return /^[A-z]/.test(str);
+}
+
+export function isUrl(url: string): boolean {
+  return /(^http|https:\/\/)/g.test(url);
+}
+
+// 判断是否为微信浏览器
+export function isWechatBrowser(): boolean {
+  return /micromessenger/.test(navigator.userAgent.toLowerCase()) ? true : false;
+}
diff --git a/web/src/utils/lib/echarts.ts b/web/src/utils/lib/echarts.ts
new file mode 100644
index 0000000..a52f48b
--- /dev/null
+++ b/web/src/utils/lib/echarts.ts
@@ -0,0 +1,53 @@
+import * as echarts from 'echarts/core';
+
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  PictorialBarChart,
+  RadarChart,
+} from 'echarts/charts';
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+} from 'echarts/components';
+
+import { SVGRenderer } from 'echarts/renderers';
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  SVGRenderer,
+  PictorialBarChart,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+]);
+
+export default echarts;
diff --git a/web/src/utils/log.ts b/web/src/utils/log.ts
new file mode 100644
index 0000000..8f79800
--- /dev/null
+++ b/web/src/utils/log.ts
@@ -0,0 +1,9 @@
+const projectName = import.meta.env.VITE_GLOB_APP_TITLE;
+
+export function warn(message: string) {
+  console.warn(`[${projectName} warn]:${message}`);
+}
+
+export function error(message: string) {
+  throw new Error(`[${projectName} error]:${message}`);
+}
diff --git a/web/src/utils/propTypes.ts b/web/src/utils/propTypes.ts
new file mode 100644
index 0000000..6c4173e
--- /dev/null
+++ b/web/src/utils/propTypes.ts
@@ -0,0 +1,50 @@
+import { CSSProperties, VNodeChild } from 'vue';
+import {
+  createTypes,
+  VueTypeExtendCallback,
+  VueTypeValidableDef,
+  VueTypesInterface,
+} from 'vue-types';
+
+export type VueNode = VNodeChild | JSX.Element;
+
+type ExtendedPropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>;
+  readonly VNodeChild: VueTypeValidableDef<VueNode>;
+};
+
+class CustomVueTypes
+  extends (createTypes({
+    func: undefined,
+    bool: undefined,
+    string: undefined,
+    number: undefined,
+    object: undefined,
+    integer: undefined,
+  }) as VueTypesInterface)
+  implements ExtendedPropTypes
+{
+  static extend(types: VueTypeExtendCallback[]): CustomVueTypes {
+    return types.reduce((result, { name, ...callbacks }) => {
+      result[name] = { getter: true, ...callbacks };
+      return result;
+    }, this);
+  }
+
+  readonly style!: VueTypeValidableDef<CSSProperties>;
+  readonly VNodeChild!: VueTypeValidableDef<VueNode>;
+}
+
+const propTypes = CustomVueTypes.extend([
+  {
+    name: 'style',
+    type: [String, Object],
+    default: undefined,
+  },
+  {
+    name: 'VNodeChild',
+    type: undefined,
+  },
+]);
+
+export { propTypes };
diff --git a/web/src/utils/tree.ts b/web/src/utils/tree.ts
new file mode 100644
index 0000000..b67e076
--- /dev/null
+++ b/web/src/utils/tree.ts
@@ -0,0 +1,97 @@
+/**
+ * 树形数组转平级
+ * @date 2023-01-09
+ * @returns {array}
+ */
+export const tree2FlatArray = (tree: any[], childrenKey: string = "children") => {
+  return tree.reduce((arr, item) => {
+    var children = item?.[childrenKey] ?? [];
+    var obj = item;
+    delete obj[childrenKey];
+    //解构赋值+默认值
+    return arr.concat([obj], tree2FlatArray(children)); //children部分进行递归
+  }, []);
+};
+/**
+ * 树形数组转对象
+ * @date 2023-01-09
+ * @returns {object}
+ */
+export const tree2Objects = (
+  tree: any[],
+  key: string = "id",
+  childrenKey: string = "children"
+) => {
+  let rows = tree2FlatArray(tree, childrenKey);
+  let objects = {};
+  rows.forEach((item) => {
+    objects[item[key]] = item;
+  });
+  return objects;
+};
+
+/**
+ * 树形菜单数据输出
+ * @date 2022-04-20
+ * @param {object} data - 数据
+ * @param {string} pid="parent_id" - 父类名称
+ * @param {string} children="children" - 子类名称
+ * @returns {object}
+ */
+export const treesBy = (
+  data: any[],
+  pid: string = "parent_id",
+  children: string = "children"
+) => {
+  let map = {},
+    val = <any>[];
+  data.forEach((item) => {
+    item[children] = [];
+    map[item.id] = item;
+  });
+  data.forEach((item) => {
+    const parent = map[item[pid]];
+    if (!!parent) {
+      parent[children].push(item);
+    } else {
+      val.push(item);
+    }
+  });
+  return val;
+};
+/**
+ * 格式化树形菜单,省市区
+ * @param {object} org
+ * @returns {object}
+ */
+export const mapTree = (org: any, keyId = "v", keyChild = "s", keyName = "n") => {
+  const haveChildren =
+    org[keyChild] && Array.isArray(org[keyChild]) && org[keyChild].length > 0;
+  return {
+    key: org[keyId],
+    value: String(org[keyId]),
+    label: org[keyName],
+    isLeaf: true,
+    children: haveChildren ? org[keyChild].map((i) => mapTree(i)) : [],
+  };
+};
+
+/**
+ * 格式化树形菜单,省市区
+ * @param {object} org
+ * @returns {object}
+ */
+export const toFlatArray = (
+  tree: any[],
+  parentId: string | number,
+  keyId: string | number = "key"
+) => {
+  return tree.reduce((t, _) => {
+    const child = _["children"];
+    return [
+      ...t,
+      { [keyId]: _[keyId], parentId },
+      ...(child && child.length ? toFlatArray(child, _[keyId]) : []),
+    ];
+  }, []);
+};
diff --git a/web/src/utils/urlUtils.ts b/web/src/utils/urlUtils.ts
new file mode 100644
index 0000000..3a678bf
--- /dev/null
+++ b/web/src/utils/urlUtils.ts
@@ -0,0 +1,81 @@
+import { RouteLocationRaw } from 'vue-router';
+import router from '@/router';
+
+/**
+ * 将对象添加当作参数拼接到URL上面
+ * @param baseUrl 需要拼接的url
+ * @param obj 参数对象
+ * @returns {string} 拼接后的对象
+ * 例子:
+ *  let obj = {a: '3', b: '4'}
+ *  setObjToUrlParams('www.baidu.com', obj)
+ *  ==>www.baidu.com?a=3&b=4
+ */
+export function setObjToUrlParams(baseUrl: string, obj: object): string {
+  let parameters = '';
+  let url = '';
+  for (const key in obj) {
+    parameters += key + '=' + encodeURIComponent(obj[key]) + '&';
+  }
+  parameters = parameters.replace(/&$/, '');
+  if (/\?$/.test(baseUrl)) {
+    url = baseUrl + parameters;
+  } else {
+    url = baseUrl.replace(/\/?$/, '?') + parameters;
+  }
+  return url;
+}
+
+export function encodeParams(obj) {
+  const arr = [];
+  for (const p in obj) {
+    // @ts-ignore
+    arr.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]));
+  }
+  return arr.join('&');
+}
+
+/**
+ * 获取文件后缀
+ */
+export function getFileExt(fileName: string) {
+  if (fileName === undefined || fileName === '') {
+    return ``;
+  }
+  return fileName.substring(fileName.lastIndexOf('.') + 1);
+}
+
+/**
+ * 获取当访问的url，不含参数
+ */
+export function getNowUrl(): string {
+  const w = window.location;
+  return w.protocol + '//' + w.host + w.pathname;
+}
+
+// 返回上一页
+export function goBackOrToPage(to: RouteLocationRaw): void {
+  if (router.currentRoute.value.matched.length > 0) {
+    router.go(-1);
+  } else {
+    router.push(to).catch((e) => {
+      console.log('返回上一页失败:', e);
+    });
+  }
+}
+
+//  更新hash路由get参数，不刷新页面
+export function pushHashRouterParameter(url, key, value) {
+  const urlParts = url.split('?');
+  let newUrl = '';
+  if (urlParts.length >= 2) {
+    const baseUrl = urlParts[0];
+    const queryString = urlParts[1];
+    const searchParams = new URLSearchParams(queryString);
+    searchParams.set(key, value);
+    newUrl = `${baseUrl}?${searchParams.toString()}`;
+  } else {
+    newUrl = `${url}?${key}=${value}`;
+  }
+  window.history.pushState({ path: newUrl }, '', newUrl);
+}
diff --git a/web/src/utils/validateUtil.ts b/web/src/utils/validateUtil.ts
new file mode 100644
index 0000000..dbbcb42
--- /dev/null
+++ b/web/src/utils/validateUtil.ts
@@ -0,0 +1,251 @@
+import { FormItemRule } from 'naive-ui';
+import * as yaml from 'js-yaml';
+/**
+ * @description 表单验证封装
+ */
+export const validate = {
+  // 验证ipv4
+  ip(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    // 支持通配符的ipv4正则
+    const ipv4Regex =
+      /^(?:[1-9]?[0-9]|1[0-9]{2}|2(?:[0-4][0-9]|5[0-5]))(?!.*?\.\*\.[*\d])(?:\.(?:(?:[1-9]?[0-9]|1[0-9]{2}|2(?:[0-4][0-9]|5[0-5]))|\*)){1,3}$/;
+    //   Ipv6:
+    const ipv6Regex =
+      /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/;
+    if (!value && !rule.required) {
+      callback();
+    }
+    if (!value) {
+      callback(new Error('请输入IP'));
+    } else if (!ipv4Regex.test(value) && !ipv6Regex.test(value)) {
+      callback(new Error('请输入正确的IP'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  //0-100百分比验证
+  percentage(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const reg = /^([1-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/;
+    if (!value && !rule.required) {
+      callback(new Error('请输入比例'));
+    } else if (!reg.test(value)) {
+      callback(new Error('请输入0-100的数字'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 手机号 （eg:138********,159********）
+  phone(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
+    if (!value && !rule.required) {
+      callback();
+    } else if (!value) {
+      callback(new Error('请输入手机号码'));
+    } else if (!regPhone.test(value)) {
+      callback(new Error('手机号格式错误'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 用户名 （eg:a123456）
+  userName(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regUserName = /^[0-9a-zA-Z]{6,16}$/;
+    if (!value && !rule.required) {
+      callback(new Error('请输入登录账号'));
+    } else if (!regUserName.test(value)) {
+      callback(new Error('请输入6-16位由字母和数字组成的登录账号'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 账号
+  account(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regex = /^[\w_\d]{6,16}$/;
+    if (!value && !rule.required) {
+      callback();
+    } else if (!value) {
+      callback(new Error('请输入账号'));
+    } else if (!regex.test(value)) {
+      callback(new Error('请输入6-16位由字母、数字或下划线组成的账号'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 密码
+  password(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/;
+    if (!value && !rule.required) {
+      callback(new Error('请输入密码'));
+    } else if (!regPassword.test(value)) {
+      callback(new Error('密码格式错误！必须包含6-18为字母和数字'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 邮箱
+  email(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regEmails = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+    // console.log('isRequired is: ', JSON.stringify(isRequired))
+    if (!value && !rule.required) {
+      callback();
+    } else if (!value) {
+      callback(new Error('请输入邮箱'));
+    } else if (!regEmails.test(value)) {
+      callback(new Error('邮箱格式错误'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 金额验证
+  amount(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regAmount = /(^[0-9]{1,10}$)|(^[0-9]{1,10}[\.]{1}[0-9]{1,2}$)/;
+    if (!value && !rule.required) {
+      callback();
+    } else if (!value) {
+      callback(new Error('请输入金额'));
+    } else if (!regAmount.test(value)) {
+      callback(new Error('金额格式错误，最多允许输入10位整数及2位小数'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 身份证验证
+  idCard(rule: FormItemRule, value: any, callback: Function, isEnabled = true): boolean | Error {
+    const regIdCard =
+      /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/;
+    if (!isEnabled) {
+      callback();
+    } else if (!value && !rule.required) {
+      callback();
+    } else if (!value) {
+      callback(new Error('请输入身份证号'));
+    } else if (!regIdCard.test(value)) {
+      callback(new Error('身份证号码格式错误'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 银行卡验证
+  bank(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regBank = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/;
+    if (!value && !rule.required) {
+      callback();
+    } else if (!value) {
+      callback();
+    } else if (!regBank.test(value)) {
+      callback(new Error('银行卡号码格式错误'));
+    } else {
+      callback();
+    }
+    return true;
+  },
+  // 非零正整数验证
+  num(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const reg = /^\+?[1-9][0-9]*$/;
+    if (!value && !rule.required) {
+      callback(new Error('请填写非零正整数'));
+    } else {
+      if (!reg.test(value)) {
+        callback(new Error('请输入非零的正整数'));
+      } else {
+        callback();
+      }
+    }
+    return true;
+  },
+  // 银行卡
+  bankCard(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regBankCard = /^(\d{16}|\d{19})$/;
+    if (value == '' && !rule.required) {
+      callback(new Error('请输入银行卡号'));
+    } else {
+      if (!regBankCard.test(value)) {
+        callback(new Error('银行卡号格式错误'));
+      } else {
+        callback();
+      }
+    }
+    return true;
+  },
+  // 固话格式
+  tel(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regTel = /^(0\d{2,3}-?)?\d{7,8}$/;
+    if (value == '' && !rule.required) {
+      callback(new Error('请输入座机号码'));
+    } else {
+      if (!regTel.test(value)) {
+        callback(new Error('座机号码格式错误'));
+      } else {
+        callback();
+      }
+    }
+    return true;
+  },
+  // QQ号码
+  qq(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regex = /^[1-9][0-9]{4,}$/;
+    if (!value && !rule.required) {
+      callback();
+    } else if (!value) {
+      callback(new Error('请输入QQ号码'));
+    } else {
+      if (!regex.test(value)) {
+        callback(new Error('QQ号码格式错误'));
+      } else {
+        callback();
+      }
+    }
+    return true;
+  },
+  // weibo号
+  weibo(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    const regex = /^[0-9a-zA-Z\u4e00-\u9fa5_-]*$/;
+    if (!value && !rule.required) {
+      callback();
+    } else if (!value) {
+      callback(new Error('请输入微博账号'));
+    } else {
+      if (!regex.test(value)) {
+        callback(new Error('微博号码格式错误'));
+      } else {
+        callback();
+      }
+    }
+    return true;
+  },
+  // YAML格式验证
+  yaml(rule: FormItemRule, value: any, callback: Function): boolean | Error {
+    if (!value && !rule.required) {
+      callback();
+      return true;
+    }
+    if (!value) {
+      callback(new Error('请输入YAML配置'));
+      return false;
+    }
+
+    try {
+      // 使用 js-yaml 进行同步验证
+      yaml.load(value);
+      callback();
+      return true;
+    } catch (error: any) {
+      callback(new Error(`YAML格式错误: ${error.message}`));
+      return false;
+    }
+  },
+  // 不验证
+  none(_rule: FormItemRule, _value: any, callback: Function): boolean {
+    callback();
+    return true;
+  },
+};
diff --git a/web/src/utils/websocket/index.ts b/web/src/utils/websocket/index.ts
new file mode 100644
index 0000000..ca8b1e2
--- /dev/null
+++ b/web/src/utils/websocket/index.ts
@@ -0,0 +1,188 @@
+import { SocketEnum } from '@/enums/socketEnum';
+import { useUserStoreWidthOut } from '@/store/modules/user';
+import { isJsonString } from '@/utils/is';
+import { registerGlobalMessage } from '@/utils/websocket/registerMessage';
+
+// WebSocket消息格式
+export interface WebSocketMessage {
+  event: string;
+  data: any;
+  code: number;
+  timestamp: number;
+}
+
+let socket: WebSocket;
+let isActive: boolean;
+const messageHandler: Map<string, Function> = new Map();
+
+export default () => {
+  const heartCheck = {
+    timeout: 5000,
+    timeoutObj: setTimeout(() => {}),
+    serverTimeoutObj: setInterval(() => {}),
+    reset: function () {
+      clearTimeout(this.timeoutObj);
+      clearTimeout(this.serverTimeoutObj);
+      return this;
+    },
+    start: function () {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const self = this;
+      clearTimeout(this.timeoutObj);
+      clearTimeout(this.serverTimeoutObj);
+      this.timeoutObj = setTimeout(function () {
+        socket.send(
+          JSON.stringify({
+            event: SocketEnum.EventPing,
+          })
+        );
+        self.serverTimeoutObj = setTimeout(function () {
+          console.log('[WebSocket] 关闭服务');
+          socket.close();
+        }, self.timeout);
+      }, this.timeout);
+    },
+  };
+
+  const useUserStore = useUserStoreWidthOut();
+  let lockReconnect = false;
+  let timer: ReturnType<typeof setTimeout>;
+  const createSocket = () => {
+    console.log('[WebSocket] createSocket...');
+    if (useUserStore.token === '' || useUserStore.config?.wsAddr == '') {
+      console.error('[WebSocket] 用户未登录，稍后重试...');
+      resetReconnect();
+      return;
+    }
+    try {
+      socket = new WebSocket(`${useUserStore.config?.wsAddr}?authorization=${useUserStore.token}`);
+      init();
+      if (lockReconnect) {
+        lockReconnect = false;
+      }
+    } catch (e) {
+      console.error(`[WebSocket] createSocket err: ${e}`);
+      resetReconnect();
+      return;
+    }
+  };
+
+  const resetReconnect = () => {
+    if (lockReconnect) {
+      lockReconnect = false;
+    }
+    reconnect();
+  };
+
+  const reconnect = () => {
+    console.log('[WebSocket] lockReconnect:' + lockReconnect);
+    if (lockReconnect) return;
+    lockReconnect = true;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      createSocket();
+    }, 1000 * 10);
+  };
+
+  const init = () => {
+    socket.onopen = function (_) {
+      console.log('[WebSocket] 已连接');
+      heartCheck.reset().start();
+      isActive = true;
+    };
+
+    socket.onmessage = function (event) {
+      isActive = true;
+      // console.log('WebSocket:收到一条消息', event.data);
+
+      if (!isJsonString(event.data)) {
+        console.log('[WebSocket] message incorrect format:' + JSON.stringify(event));
+        return;
+      }
+
+      heartCheck.reset().start();
+
+      const message = JSON.parse(event.data) as WebSocketMessage;
+      onMessage(message);
+    };
+
+    socket.onerror = function (_) {
+      console.log('[WebSocket] 发生错误');
+      reconnect();
+      isActive = false;
+    };
+
+    socket.onclose = function (_) {
+      console.log('[WebSocket] 已关闭');
+      heartCheck.reset();
+      reconnect();
+      isActive = false;
+    };
+
+    window.onbeforeunload = function () {
+      socket.close();
+      isActive = false;
+    };
+  };
+
+  createSocket();
+  registerGlobalMessage();
+};
+
+function onMessage(message: WebSocketMessage) {
+  let handled = false;
+  messageHandler.forEach((value: Function, key: string) => {
+    if (message.event === key || key === '*') {
+      handled = true;
+      value.call(null, message);
+    }
+  });
+
+  if (!handled) {
+    console.log('[WebSocket] messageHandler not registered. message:' + JSON.stringify(message));
+  }
+}
+
+// 发送消息
+export function sendMsg(event: string, data: any = null, isRetry = true) {
+  if (socket === undefined || !isActive) {
+    if (!isRetry) {
+      console.log('[WebSocket] 连接异常，发送失败！');
+      return;
+    }
+    console.log('[WebSocket] 连接异常，等待重试..');
+    setTimeout(() => {
+      sendMsg(event, data);
+    }, 200);
+    return;
+  }
+
+  try {
+    socket.send(JSON.stringify({ event, data }));
+  } catch (err: any) {
+    console.log('[WebSocket] 发送消息失败，err：', err.message);
+    if (!isRetry) {
+      return;
+    }
+
+    console.log('[WebSocket] 等待重试..');
+    setTimeout(() => {
+      sendMsg(event, data);
+    }, 100);
+  }
+}
+
+// 添加消息处理
+export function addOnMessage(key: string, value: Function): void {
+  messageHandler.set(key, value);
+}
+
+// 移除消息处理
+export function removeOnMessage(key: string): boolean {
+  return messageHandler.delete(key);
+}
+
+// 查看所有消息处理
+export function getAllOnMessage(): Map<string, Function> {
+  return messageHandler;
+}
diff --git a/web/src/utils/websocket/registerMessage.ts b/web/src/utils/websocket/registerMessage.ts
new file mode 100644
index 0000000..0a9d27c
--- /dev/null
+++ b/web/src/utils/websocket/registerMessage.ts
@@ -0,0 +1,32 @@
+import { TABS_ROUTES } from '@/store/mutation-types';
+import { SocketEnum } from '@/enums/socketEnum';
+import { useUserStoreWidthOut } from '@/store/modules/user';
+import { notificationStoreWidthOut } from '@/store/modules/notification';
+import { addOnMessage, WebSocketMessage } from '@/utils/websocket/index';
+
+// 注册全局消息监听
+export function registerGlobalMessage() {
+  // 心跳
+  addOnMessage(SocketEnum.EventPing, function (_message: WebSocketMessage) {
+    // console.log('ping..');
+  });
+
+  // 强制退出
+  addOnMessage(SocketEnum.EventKick, function (_message: WebSocketMessage) {
+    const useUserStore = useUserStoreWidthOut();
+    useUserStore.logout().then(() => {
+      // 移除标签页
+      localStorage.removeItem(TABS_ROUTES);
+      location.reload();
+    });
+  });
+
+  // 消息通知
+  addOnMessage(SocketEnum.EventNotice, function (message: WebSocketMessage) {
+    const notificationStore = notificationStoreWidthOut();
+    notificationStore.triggerNewMessages(message.data);
+  });
+
+  // 更多全局消息处理都可以在这里注册
+  // ...
+}
diff --git a/web/src/views/about/index.vue b/web/src/views/about/index.vue
new file mode 100644
index 0000000..77fd041
--- /dev/null
+++ b/web/src/views/about/index.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="关于">
+        {{ name }} 是一个基于 goframe2，vue3，vite2，TypeScript，uniapp
+        的中后台解决方案，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。
+      </n-card>
+    </div>
+    <n-card
+      :bordered="false"
+      title="项目信息"
+      class="mt-4 proCard"
+      size="small"
+      :segmented="{ content: true }"
+    >
+      <n-descriptions bordered label-placement="left" class="py-2">
+        <n-descriptions-item label="HotGo版本">
+          <n-tag type="info"> {{ config?.version }}</n-tag>
+        </n-descriptions-item>
+        <n-descriptions-item label="最后编译时间">
+          <n-tag type="info"> {{ lastBuildTime }} </n-tag>
+        </n-descriptions-item>
+        <n-descriptions-item label="文档地址">
+          <div class="flex items-center">
+            <a
+              href="https://github.com/bufanyun/hotgo/tree/v2.0/docs/guide-zh-CN"
+              class="py-2"
+              target="_blank"
+              >查看文档地址</a
+            >
+          </div>
+        </n-descriptions-item>
+        <n-descriptions-item label="预览地址">
+          <div class="flex items-center">
+            <a href="https://hotgo.facms.cn/admin" class="py-2" target="_blank">查看预览地址</a>
+          </div>
+        </n-descriptions-item>
+        <n-descriptions-item label="Github">
+          <div class="flex items-center">
+            <a href="https://github.com/bufanyun/hotgo" class="py-2" target="_blank"
+              >查看Github地址</a
+            >
+          </div>
+        </n-descriptions-item>
+        <n-descriptions-item label="QQ交流群">
+          <div class="flex items-center">
+            <a href="https://jq.qq.com/?_wv=1027&k=izJg29Cx" class="py-2" target="_blank"
+              >点击链接加入群聊【HotGo 交流群】</a
+            >
+          </div>
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card
+      :bordered="false"
+      title="开发环境依赖"
+      class="mt-4 proCard"
+      size="small"
+      :segmented="{ content: true }"
+    >
+      <n-descriptions bordered label-placement="left" class="py-2">
+        <n-descriptions-item v-for="item in devSchema" :key="item.field" :label="item.field">
+          {{ item.label }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card
+      :bordered="false"
+      title="生产环境依赖"
+      class="mt-4 proCard"
+      size="small"
+      :segmented="{ content: true }"
+    >
+      <n-descriptions bordered label-placement="left" class="py-2">
+        <n-descriptions-item v-for="item in schema" :key="item.field" :label="item.field">
+          {{ item.label }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useUserStoreWidthOut } from '@/store/modules/user';
+
+  const useUserStore = useUserStoreWidthOut();
+  const config = ref(useUserStore.config);
+  export interface schemaItem {
+    field: string;
+    label: string;
+  }
+
+  const { pkg, lastBuildTime } = __APP_INFO__;
+  const { dependencies, devDependencies, name } = pkg;
+
+  const schema: schemaItem[] = [];
+  const devSchema: schemaItem[] = [];
+
+  Object.keys(dependencies).forEach((key) => {
+    schema.push({ field: key, label: dependencies[key] });
+  });
+
+  Object.keys(devDependencies).forEach((key) => {
+    devSchema.push({ field: key, label: devDependencies[key] });
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/.gitkeep b/web/src/views/addons/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/views/addons/hgexample/comp/calendar/index.vue b/web/src/views/addons/hgexample/comp/calendar/index.vue
new file mode 100644
index 0000000..325e44f
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/calendar/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="n-layout-page-header">
+    <n-card :bordered="false" title="日历"> 一个普通的日历 </n-card>
+  </div>
+  <n-card :bordered="false" class="mt-4 proCard">
+    <n-calendar
+      v-model:value="value"
+      #="{ year, month, date }"
+      :is-date-disabled="isDateDisabled"
+      @update:value="handleUpdateValue"
+    >
+      {{ year }}-{{ month }}-{{ date }}
+    </n-calendar>
+  </n-card>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { isYesterday, addDays } from 'date-fns';
+
+  export default defineComponent({
+    setup() {
+      const message = useMessage();
+      return {
+        value: ref(addDays(Date.now(), 1).valueOf()),
+        handleUpdateValue(
+          _: number,
+          { year, month, date }: { year: number; month: number; date: number }
+        ) {
+          message.success(`${year}-${month}-${date}`);
+        },
+        isDateDisabled(timestamp: number) {
+          if (isYesterday(timestamp)) {
+            return true;
+          }
+          return false;
+        },
+      };
+    },
+  });
+</script>
diff --git a/web/src/views/addons/hgexample/comp/des/index.vue b/web/src/views/addons/hgexample/comp/des/index.vue
new file mode 100644
index 0000000..2031fca
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/des/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <n-space vertical>
+    <n-card>
+      <template #header>基础用法</template>
+      <n-descriptions label-placement="top" title="描述">
+        <n-descriptions-item>
+          <template #label> 早餐 </template>
+          苹果
+        </n-descriptions-item>
+        <n-descriptions-item label="早午餐"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="午餐"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="晚餐" :span="2">
+          两个<br />
+          苹果
+        </n-descriptions-item>
+        <n-descriptions-item label="夜宵"> 苹果 </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card>
+      <template #header>每个描述项都可以设定跨度</template>
+      <n-descriptions label-placement="top" bordered :column="6">
+        <n-descriptions-item>
+          <template #label> 早餐 </template>
+          苹果
+        </n-descriptions-item>
+        <n-descriptions-item label="早午餐"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="午餐"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="晚餐"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="正餐"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="夜宵"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="苹果"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="苹果" :span="2"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="苹果" :span="3"> 苹果 </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card>
+      <template #header>边框</template>
+      <template #header-extra> 如果有很多多行的信息，你可以把它设为 bordered </template>
+      <n-descriptions bordered>
+        <n-descriptions-item>
+          <template #label> 早餐 </template>
+          苹果
+        </n-descriptions-item>
+        <n-descriptions-item label="午餐"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="晚餐"> 苹果 </n-descriptions-item>
+        <n-descriptions-item label="为什么长">
+          为什么<br />长<br />长<br />长<br />长<br />长
+        </n-descriptions-item>
+        <n-descriptions-item label="为什么长">
+          为什么<br />长<br />长<br />长<br />长<br />长
+        </n-descriptions-item>
+        <n-descriptions-item label="为什么长">
+          为什么<br />长<br />长<br />长<br />长<br />长
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card>
+      <n-list hoverable clickable>
+        <n-list-item>
+          <n-thing title="相见恨晚" content-style="margin-top: 10px;">
+            <template #description>
+              <n-space size="small" style="margin-top: 4px">
+                <n-tag :bordered="false" type="info" size="small"> 暑夜 </n-tag>
+                <n-tag :bordered="false" type="info" size="small"> 晚春 </n-tag>
+              </n-space>
+            </template>
+            奋勇呀然后休息呀<br />
+            完成你伟大的人生
+          </n-thing>
+        </n-list-item>
+        <n-list-item>
+          <n-thing title="他在时间门外" content-style="margin-top: 10px;">
+            <template #description>
+              <n-space size="small" style="margin-top: 4px">
+                <n-tag :bordered="false" type="info" size="small"> 环形公路 </n-tag>
+                <n-tag :bordered="false" type="info" size="small"> 潜水艇司机 </n-tag>
+              </n-space>
+            </template>
+            最新的打印机<br />
+            复制着彩色傀儡<br />
+            早上好<br />
+            让他带你去被工厂敲击
+          </n-thing>
+        </n-list-item>
+      </n-list>
+    </n-card>
+  </n-space>
+</template>
+<script setup></script>
diff --git a/web/src/views/addons/hgexample/comp/directive/index.vue b/web/src/views/addons/hgexample/comp/directive/index.vue
new file mode 100644
index 0000000..5f264d8
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/directive/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="card content-box">
+    <n-card :bordered="false" title="复制指令">
+      <n-space>
+        <n-input placeholder="输入内容试试" v-model:value="data" style="width: 350px" />
+        <n-button v-copy="data" type="primary" @click="a">复 制</n-button>
+      </n-space>
+    </n-card>
+    <n-card :bordered="false" title="防抖指令" class="mt-3">
+      <n-button type="primary" v-debounce="b">防抖测试</n-button>
+    </n-card>
+    <n-card :bordered="false" title="节流指令" class="mt-3">
+      <n-button type="primary" v-throttle="c">节流测试</n-button>
+    </n-card>
+
+    <n-card :bordered="false" title="拖拽指令" class="mt-3"> 鼠标放到矩形上面拖拽试试 </n-card>
+    <div class="box" v-draggable> </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="copyDirect">
+  import { ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  const data = ref<string>();
+  const message = useMessage();
+  const a = () => {
+    message.success('复制成功:' + data.value);
+  };
+  const b = () => {
+    message.success('防抖');
+    console.log(data.value);
+  };
+  const c = () => {
+    message.success('节流');
+    console.log(data.value);
+  };
+</script>
+
+<style scoped lang="less">
+  body {
+    width: 100px;
+    height: 100px;
+    background-color: #ccc;
+    position: relative;
+  }
+  .content-box {
+    height: 100vh;
+    .box {
+      width: 100px;
+      height: 100px;
+      background-color: #2d8cf0;
+      position: absolute;
+      z-index: 10000000;
+      border-radius: 10px;
+      margin: 20px 5px;
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/drag/index.vue b/web/src/views/addons/hgexample/comp/drag/index.vue
new file mode 100644
index 0000000..c113ebe
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/drag/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="拖拽"> 常用于卡片，事项，预约，流程，计划等， </n-card>
+    </div>
+
+    <n-alert title="花式拖拽演示" type="info" class="mt-4">
+      每个卡片，都可以上下拖拽顺序，另外不同卡片，也可以拖拽过去，拖拽过来，都不在话下呢，快试试O(∩_∩)O哈哈~
+    </n-alert>
+
+    <n-grid
+      cols="1 s:2 m:3 l:4 xl:4 2xl:4"
+      class="mt-4 proCard"
+      responsive="screen"
+      :x-gap="12"
+      :y-gap="8"
+    >
+      <n-grid-item>
+        <NCard
+          title="需求池"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="demandList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="info">需求</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="开发中"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="exploitList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="warning">开发中</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="已完成"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="completeList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="error">已完成</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="已验收"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="approvedList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="success">已验收</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import Draggable from 'vuedraggable';
+
+  const demandList = reactive([
+    { name: '预约表单页面，能填写预约相关信息', id: 1 },
+    { name: '促销活动页面，包含促销广告展示', id: 2 },
+    { name: '商品列表，需要一个到货提醒功能', id: 3 },
+    { name: '商品需要一个评价功能', id: 4 },
+    { name: '商品图片需要提供放大镜', id: 5 },
+    { name: '订单需要提供删除到回收站', id: 6 },
+    { name: '用户头像上传，需要支持裁剪', id: 7 },
+    { name: '据说Vue3.2发布了，setup啥时候支持？', id: 8 },
+  ]);
+
+  const exploitList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+
+  const completeList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+
+  const approvedList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+</script>
+
+<style lang="less" scoped>
+  .draggable-ul {
+    width: 100%;
+    overflow: hidden;
+    margin-top: -16px;
+
+    .draggable-li {
+      width: 100%;
+      padding: 16px 10px;
+      color: #333;
+      border-bottom: 1px solid #efeff5;
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/fingerprintjs/index.vue b/web/src/views/addons/hgexample/comp/fingerprintjs/index.vue
new file mode 100644
index 0000000..081e497
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/fingerprintjs/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <n-card :segmented="{ content: true, footer: true }" footer-style="padding:10px">
+    <template #header>
+      通过设备浏览器信息获取浏览器指纹的插件(官方宣称其识别精度达到99.5%)
+    </template>
+    <div>
+      指纹ID:
+      <n-text type="info">
+        {{ compData.murmur }}
+      </n-text>
+    </div>
+  </n-card>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import Fingerprint2 from 'fingerprintjs2';
+
+  const compData = reactive({
+    values: {},
+    murmur: '',
+  });
+
+  const createFingerprint = () => {
+    Fingerprint2.get((components) => {
+      compData.values = components.map((component) => component.value); // 配置的值的数组
+      compData.murmur = Fingerprint2.x64hash128(compData.values.join(''), 31).toUpperCase(); // 生成浏览器指纹
+    });
+  };
+  if (window.requestIdleCallback) {
+    requestIdleCallback(() => {
+      createFingerprint();
+    });
+  } else {
+    setTimeout(() => {
+      createFingerprint();
+    }, 600);
+  }
+</script>
diff --git a/web/src/views/addons/hgexample/comp/form/basic.vue b/web/src/views/addons/hgexample/comp/form/basic.vue
new file mode 100644
index 0000000..3236daf
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/form/basic.vue
@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="基础表单"> 基础表单，用于向用户收集表单信息 </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <div class="BasicForm">
+        <BasicForm
+          submitButtonText="提交预约"
+          layout="horizontal"
+          :gridProps="{ cols: 1 }"
+          :schemas="schemas"
+          @submit="handleSubmit"
+          @reset="handleReset"
+        >
+          <template #statusSlot="{ model, field }">
+            <n-input v-model:value="model[field]" />
+          </template>
+        </BasicForm>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BasicForm, FormSchema } from '@/components/Form/index';
+  import { useMessage } from 'naive-ui';
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '姓名',
+      labelMessage: '这是一个提示',
+      componentProps: {
+        placeholder: '请输入姓名',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
+    },
+    {
+      field: 'mobile',
+      component: 'NInputNumber',
+      label: '手机',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        showButton: false,
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'type',
+      component: 'NSelect',
+      label: '类型',
+      componentProps: {
+        placeholder: '请选择类型',
+        options: [
+          {
+            label: '舒适性',
+            value: 1,
+          },
+          {
+            label: '经济性',
+            value: 2,
+          },
+        ],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeDate',
+      component: 'NDatePicker',
+      label: '预约时间',
+      defaultValue: 1183135260000,
+      componentProps: {
+        type: 'date',
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeTime',
+      component: 'NTimePicker',
+      label: '停留时间',
+      componentProps: {
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeProject',
+      component: 'NCheckbox',
+      label: '预约项目',
+      componentProps: {
+        placeholder: '请选择预约项目',
+        options: [
+          {
+            label: '种牙',
+            value: 1,
+          },
+          {
+            label: '补牙',
+            value: 2,
+          },
+          {
+            label: '根管',
+            value: 3,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeSource',
+      component: 'NRadioGroup',
+      label: '来源',
+      componentProps: {
+        options: [
+          {
+            label: '网上',
+            value: 1,
+          },
+          {
+            label: '门店',
+            value: 2,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'status',
+      label: '状态',
+      //插槽
+      slot: 'statusSlot',
+    },
+  ];
+
+  const message = useMessage();
+
+  function handleSubmit(values: Recordable) {
+    if (!values) {
+      return message.error('请填写完整信息');
+    }
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
+</script>
+
+<style lang="less" scoped>
+  .BasicForm {
+    width: 550px;
+    margin: 0 auto;
+    overflow: hidden;
+    padding-top: 20px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/form/useForm.vue b/web/src/views/addons/hgexample/comp/form/useForm.vue
new file mode 100644
index 0000000..9d8af3f
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/form/useForm.vue
@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="基础表单"> useForm 表单，用于向用户收集表单信息 </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <div class="BasicForm">
+        <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+          <template #statusSlot="{ model, field }">
+            <n-input v-model:value="model[field]" />
+          </template>
+        </BasicForm>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { useMessage } from 'naive-ui';
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '姓名',
+      labelMessage: '这是一个提示',
+      giProps: {
+        span: 1,
+      },
+      componentProps: {
+        placeholder: '请输入姓名',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
+    },
+    {
+      field: 'mobile',
+      component: 'NInputNumber',
+      label: '手机',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        showButton: false,
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'type',
+      component: 'NSelect',
+      label: '类型',
+      giProps: {
+        //span: 24,
+      },
+      componentProps: {
+        placeholder: '请选择类型',
+        options: [
+          {
+            label: '舒适性',
+            value: 1,
+          },
+          {
+            label: '经济性',
+            value: 2,
+          },
+        ],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeDate',
+      component: 'NDatePicker',
+      label: '预约时间',
+      giProps: {
+        //span: 24,
+      },
+      defaultValue: 1183135260000,
+      componentProps: {
+        type: 'date',
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeTime',
+      component: 'NTimePicker',
+      label: '停留时间',
+      giProps: {
+        //span: 24,
+      },
+      componentProps: {
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeProject',
+      component: 'NCheckbox',
+      label: '预约项目',
+      giProps: {
+        //span: 24,
+      },
+      componentProps: {
+        placeholder: '请选择预约项目',
+        options: [
+          {
+            label: '种牙',
+            value: 1,
+          },
+          {
+            label: '补牙',
+            value: 2,
+          },
+          {
+            label: '根管',
+            value: 3,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeSource',
+      component: 'NRadioGroup',
+      label: '来源',
+      giProps: {
+        //span: 24,
+      },
+      componentProps: {
+        options: [
+          {
+            label: '网上',
+            value: 1,
+          },
+          {
+            label: '门店',
+            value: 2,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'status',
+      label: '状态',
+      giProps: {
+        //span: 24,
+      },
+      //插槽
+      slot: 'statusSlot',
+    },
+  ];
+
+  const message = useMessage();
+
+  const [register, {}] = useForm({
+    gridProps: { cols: 1 },
+    collapsedRows: 3,
+    labelWidth: 120,
+    layout: 'horizontal',
+    submitButtonText: '提交预约',
+    schemas,
+  });
+
+  function handleSubmit(values: Recordable) {
+    if (!values) {
+      return message.error('请填写完整信息');
+    }
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
+</script>
+
+<style lang="less" scoped>
+  .BasicForm {
+    width: 550px;
+    margin: 0 auto;
+    overflow: hidden;
+    padding-top: 20px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/icons/antd.vue b/web/src/views/addons/hgexample/comp/icons/antd.vue
new file mode 100644
index 0000000..4f63bfd
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/icons/antd.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <n-spin :show="loading" description="请稍候..">
+      <Icons ref="iconsRef" />
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import Icons from './icons.vue';
+
+  const iconsRef = ref();
+  const loading = ref(true);
+
+  onMounted(() => {
+    setTimeout(() => {
+      iconsRef.value?.open('antd');
+      loading.value = false;
+    }, 10);
+  });
+</script>
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/comp/icons/icons.vue b/web/src/views/addons/hgexample/comp/icons/icons.vue
new file mode 100644
index 0000000..c9ee2dd
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/icons/icons.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <n-card
+      :segmented="{ content: true, footer: true }"
+      header-style="padding:10px"
+      footer-style="padding:10px"
+      content-style=""
+    >
+      <template #header>
+        <n-grid y-gap="20" x-gap="10" cols="24" item-responsive responsive="screen">
+          <n-grid-item span="24 m:12 l:6">
+            <n-input-group>
+              <n-button>图标大小</n-button>
+              <n-input-number style="width: 100%" v-model:value="compData.size" />
+            </n-input-group>
+          </n-grid-item>
+          <n-grid-item span="24 m:12 l:6">
+            <n-color-picker
+              :modes="['hex']"
+              style="width: 100%"
+              v-model:value="compData.color"
+              :swatches="['#FFFFFF', '#18A058', '#2080F0', '#F0A020', '#D03050','#000000']"
+            >
+              <template #label>
+                <div style="color: white">图标颜色 {{ compData.color }}</div>
+              </template>
+            </n-color-picker>
+          </n-grid-item>
+        </n-grid>
+      </template>
+      <div class="icons">
+        <n-grid y-gap="20" x-gap="0" cols="24" item-responsive responsive="screen">
+          <n-grid-item v-for="(item, idx) in icons" :key="idx" span="12 m:4 l:3 xl:2">
+            <div class="icons-item">
+              <div class="icons-item_content">
+                <n-icon class="icon" :color="compData.color" :size="compData.size">
+                  <component :is="item" />
+                </n-icon>
+                <span class="copy" v-copy="item.name" @click="handleCopy(item)">复制</span>
+              </div>
+            </div>
+          </n-grid-item>
+        </n-grid>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import * as AntdIcons from '@vicons/antd';
+  import * as Ionicons5 from '@vicons/ionicons5';
+  import { useMessage } from 'naive-ui';
+  import { useDesignSettingStore } from '@/store/modules/designSetting';
+
+  const designStore = useDesignSettingStore();
+  const message = useMessage();
+
+  const icons = ref<any>([]);
+  const compData = ref({
+    color: designStore.appTheme,
+    size: 32,
+  });
+
+  const color = computed(() => {
+    return compData.value.color;
+  });
+
+  function handleCopy(icon) {
+    message.success(`已复制，${icon.name}`);
+  }
+
+  function open(type: string) {
+    if (type === 'antd') {
+      icons.value = AntdIcons;
+    }
+    if (type === 'ionicons5') {
+      icons.value = Ionicons5;
+    }
+  }
+
+  defineExpose({
+    open,
+  });
+</script>
+<style lang="less" scoped>
+  :deep(.n-color-picker-trigger .n-color-picker-trigger__fill) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .icons {
+    &-item {
+      width: 100%;
+      text-align: center;
+      padding: 0 10px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      &_content {
+        padding: 20px 10px;
+        border: 1px solid rgb(240 240 245);
+        box-sizing: border-box;
+      }
+      .icon {
+        transition: top 0.3s;
+        position: relative;
+        top: 0;
+      }
+      &:hover {
+        .icon {
+          top: -10px;
+        }
+        .copy {
+          bottom: 0;
+        }
+      }
+      .copy {
+        position: absolute;
+        bottom: -30px;
+        height: 30px;
+        left: 10px;
+        right: 10px;
+        line-height: 30px;
+        background-color: v-bind(color);
+        transition: bottom 0.3s;
+        color: rgb(240 240 245);
+      }
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/icons/ionicons5.vue b/web/src/views/addons/hgexample/comp/icons/ionicons5.vue
new file mode 100644
index 0000000..5387e24
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/icons/ionicons5.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <n-spin :show="loading" description="请稍候..">
+      <Icons ref="iconsRef" />
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import Icons from './icons.vue';
+
+  const iconsRef = ref();
+  const loading = ref(true);
+
+  onMounted(() => {
+    setTimeout(() => {
+      iconsRef.value?.open('ionicons5');
+      loading.value = false;
+    }, 10);
+  });
+</script>
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/comp/icons/selector.vue b/web/src/views/addons/hgexample/comp/icons/selector.vue
new file mode 100644
index 0000000..9d5a33e
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/icons/selector.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div>
+      <div class="n-layout-page-header">
+        <n-card :bordered="false" title="图标选择器">
+          图标选择器，用于表单选择图标，支持直接选定图标和输入图标名称来选择
+        </n-card>
+      </div>
+      <n-space>
+        <n-card :bordered="false" class="mt-4 proCard" title="Antd">
+          <IconSelector style="width: 100%" v-model:value="antdValue" option="antd" />
+        </n-card>
+
+        <n-card :bordered="false" class="mt-4 proCard" title="Ionicons5">
+          <IconSelector style="width: 100%" v-model:value="ionicons5Value" option="ionicons5" />
+        </n-card>
+      </n-space>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import IconSelector from '@/components/IconSelector/index.vue';
+
+  const antdValue = ref('');
+  const ionicons5Value = ref('');
+</script>
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/comp/import/excel.vue b/web/src/views/addons/hgexample/comp/import/excel.vue
new file mode 100644
index 0000000..ba87758
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/import/excel.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="导入excel">
+        将excel表格数据导入，可解析出完整的表格内容，包括所有的sheet和行列数据
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <n-upload
+        directory-dnd
+        :custom-request="handleUpload"
+        name="file"
+        type="file"
+        accept=".xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+      >
+        <n-upload-dragger>
+          <div style="margin-bottom: 12px">
+            <n-icon size="48" :depth="3">
+              <DownloadOutlined />
+            </n-icon>
+          </div>
+          <n-text style="font-size: 16px"> 点击或者拖动.xlsx文件到该区域来上传</n-text>
+          <n-p depth="3" style="margin: 8px 0 0 0"> 单次上传数据最大不建议超过5000条</n-p>
+        </n-upload-dragger>
+      </n-upload>
+    </n-card>
+
+    <n-card
+      :bordered="false"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: true }"
+      title="表格数据"
+    >
+      <n-scrollbar style="max-height: 520px">
+        <JsonViewer :value="response" :expand-depth="5" copyable boxed sort class="json-width" />
+      </n-scrollbar>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { UploadCustomRequestOptions, useMessage } from 'naive-ui';
+  import { DownloadOutlined } from '@vicons/antd';
+  import { ImportExcel } from '@/api/addons/hgexample/comp';
+  import type { UploadFileParams } from '@/utils/http/axios/types';
+  import { JsonViewer } from 'vue3-json-viewer';
+  import 'vue3-json-viewer/dist/vue3-json-viewer.css';
+
+  const message = useMessage();
+  const response = ref<any>({});
+
+  function handleUpload(options: UploadCustomRequestOptions) {
+    message.loading('正在导入，请稍候...', { duration: 1200 });
+    const params: UploadFileParams = {
+      file: options.file.file as File,
+    };
+
+    ImportExcel(params).then((res) => {
+      response.value = res;
+      message.destroyAll();
+      message.success('解析成功');
+    });
+  }
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/addons/hgexample/comp/index.vue b/web/src/views/addons/hgexample/comp/index.vue
new file mode 100644
index 0000000..b380813
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/index.vue
@@ -0,0 +1,369 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard">
+      <n-p class="title">组件示例</n-p>
+      <n-space vertical>
+        <n-layout has-sider>
+          <n-scrollbar :style="scrollbarStyle">
+            <n-layout-sider
+              bordered
+              collapse-mode="width"
+              :collapsed-width="64"
+              :width="180"
+              :collapsed="collapsed"
+              show-trigger
+              @collapse="collapsed = true"
+              @expand="collapsed = false"
+            >
+              <n-menu
+                v-model:value="activeKey"
+                :collapsed="collapsed"
+                :collapsed-width="64"
+                :collapsed-icon-size="22"
+                :options="menuOptions"
+              />
+            </n-layout-sider>
+          </n-scrollbar>
+
+          <n-layout>
+            <n-card :bordered="false" class="proCard">
+              <component :is="currentComponent" />
+            </n-card>
+          </n-layout>
+        </n-layout>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import type { MenuOption } from 'naive-ui';
+  import {
+    ProfileOutlined,
+    BorderOutlined,
+    NumberOutlined,
+    BorderOuterOutlined,
+    CheckCircleOutlined,
+    ExclamationCircleOutlined,
+    FundProjectionScreenOutlined,
+    ReadOutlined,
+    StarOutlined,
+    PushpinOutlined,
+    LayoutOutlined,
+    PrinterOutlined,
+    DownloadOutlined,
+  } from '@vicons/antd';
+  import {
+    HourglassOutline,
+    NotificationsOutline,
+    LocationOutline,
+    SwapVertical,
+    EllipsisHorizontalCircleOutline,
+    AlbumsOutline,
+    LogoChrome,
+  } from '@vicons/ionicons5';
+  import { renderIcon } from '@/utils';
+  import FormBasic from './form/basic.vue';
+  import FormUseForm from './form/useForm.vue';
+  import Modal from './modal/index.vue';
+  import Drag from './drag/index.vue';
+  import Directive from './directive/index.vue';
+  import ResultSuccess from './result/success.vue';
+  import ResultFail from './result/fail.vue';
+  import ResultInfo from './result/info.vue';
+  import Exception403 from '../../../exception/403.vue';
+  import Exception404 from '../../../exception/404.vue';
+  import Exception500 from '../../../exception/500.vue';
+  import VisPPchart from './vis/ppchart.vue';
+  import VisEcharts from './vis/echarts.vue';
+  import VisMadeAPie from './vis/madeapie.vue';
+  import TextPinyin from './text/pinyin/index.vue';
+  import TextMint from './text/mint/index.vue';
+  import TextGradient from './text/gradient/index.vue';
+  import TextHigh from './text/high/index.vue';
+  import IconsAntd from './icons/antd.vue';
+  import IconsIonicons5 from './icons/ionicons5.vue';
+  import IconsSelector from './icons/selector.vue';
+  import Watermark from './watermark/index.vue';
+  import Des from './des/index.vue';
+  import Calendar from './calendar/index.vue';
+  import Timeline from './timeline/index.vue';
+  import Notice from './notice/index.vue';
+  import MapGaode from './map/gaode.vue';
+  import MapBaidu from './map/baidu.vue';
+  import Print from './print/index.vue';
+  import TagsView from './tagsView/index.vue';
+  import MoreComponents from './moreComponents/index.vue';
+  import Waterfall from './waterfall/index.vue';
+  import ImportExcel from './import/excel.vue';
+  import FingerPrintJs from './fingerprintjs/index.vue';
+
+  const components = {
+    formBasic: FormBasic,
+    formUseForm: FormUseForm,
+    modal: Modal,
+    drag: Drag,
+    directive: Directive,
+    resultSuccess: ResultSuccess,
+    resultFail: ResultFail,
+    resultInfo: ResultInfo,
+    exception403: Exception403,
+    exception404: Exception404,
+    exception500: Exception500,
+    visPPchart: VisPPchart,
+    visEcharts: VisEcharts,
+    visMadeAPie: VisMadeAPie,
+    textPinyin: TextPinyin,
+    textMint: TextMint,
+    textGradient: TextGradient,
+    textHigh: TextHigh,
+    iconsAntd: IconsAntd,
+    iconsIonicons5: IconsIonicons5,
+    iconsSelector: IconsSelector,
+    watermark: Watermark,
+    des: Des,
+    calendar: Calendar,
+    timeline: Timeline,
+    notice: Notice,
+    mapGaode: MapGaode,
+    mapBaidu: MapBaidu,
+    print: Print,
+    tagsView: TagsView,
+    moreComponents: MoreComponents,
+    waterfall: Waterfall,
+    importExcel: ImportExcel,
+    fingerPrintJs: FingerPrintJs,
+  };
+
+  const activeKey = ref<string>('formBasic');
+  const collapsed = ref(false);
+
+  const scrollbarStyle = computed(() => {
+    const height = '82vh';
+    const width = collapsed.value ? '74px' : '188px';
+    return {
+      height: height,
+      'max-height': height,
+      'min-width': width,
+      width: width,
+    };
+  });
+
+  const currentComponent = computed(() => {
+    return components[activeKey.value] || null;
+  });
+
+  const menuOptions: MenuOption[] = [
+    {
+      label: '表单',
+      key: 'form',
+      icon: renderIcon(ProfileOutlined),
+      children: [
+        {
+          label: '基础使用',
+          key: 'formBasic',
+        },
+        {
+          label: 'useForm',
+          key: 'formUseForm',
+        },
+      ],
+    },
+    {
+      label: '图标',
+      key: 'icons',
+      icon: renderIcon(StarOutlined),
+      children: [
+        {
+          label: 'Antd',
+          key: 'iconsAntd',
+        },
+        {
+          label: 'IonIcons5',
+          key: 'iconsIonicons5',
+        },
+        {
+          label: '选择器',
+          key: 'iconsSelector',
+        },
+      ],
+    },
+    {
+      label: '文字处理',
+      key: 'text',
+      icon: renderIcon(ReadOutlined),
+      children: [
+        {
+          label: '汉字拼音',
+          key: 'textPinyin',
+        },
+        {
+          label: '敏感词汇',
+          key: 'textMint',
+        },
+        {
+          label: '渐变文字',
+          key: 'textGradient',
+        },
+        {
+          label: '文字高亮',
+          key: 'textHigh',
+        },
+      ],
+    },
+    {
+      label: '可视化',
+      key: 'vis',
+      icon: renderIcon(FundProjectionScreenOutlined),
+      children: [
+        {
+          label: 'PPChart',
+          key: 'visPPchart',
+        },
+        {
+          label: 'Echarts',
+          key: 'visEcharts',
+        },
+        {
+          label: 'MadeAPie',
+          key: 'visMadeAPie',
+        },
+      ],
+    },
+    {
+      label: '异常页面',
+      key: 'exception',
+      icon: renderIcon(ExclamationCircleOutlined),
+      children: [
+        {
+          label: '403',
+          key: 'exception403',
+        },
+        {
+          label: '404',
+          key: 'exception404',
+        },
+        {
+          label: '500',
+          key: 'exception500',
+        },
+      ],
+    },
+    {
+      label: '结果页面',
+      key: 'result',
+      icon: renderIcon(CheckCircleOutlined),
+      children: [
+        {
+          label: '成功页',
+          key: 'resultSuccess',
+        },
+        {
+          label: '失败页',
+          key: 'resultFail',
+        },
+        {
+          label: '信息页',
+          key: 'resultInfo',
+        },
+      ],
+    },
+    {
+      label: '地图',
+      key: 'map',
+      icon: renderIcon(LocationOutline),
+      children: [
+        {
+          label: '高德地图',
+          key: 'mapGaode',
+        },
+        {
+          label: '百度地图',
+          key: 'mapBaidu',
+        },
+      ],
+    },
+    {
+      label: '弹窗扩展',
+      key: 'modal',
+      icon: renderIcon(BorderOutlined),
+    },
+    {
+      label: '消息提示',
+      key: 'notice',
+      icon: renderIcon(NotificationsOutline),
+    },
+    {
+      label: '瀑布流',
+      key: 'waterfall',
+      icon: renderIcon(AlbumsOutline),
+    },
+    {
+      label: '拖拽',
+      key: 'drag',
+      icon: renderIcon(NumberOutlined),
+    },
+    {
+      label: '水印',
+      key: 'watermark',
+      icon: renderIcon(PushpinOutlined),
+    },
+    {
+      label: '日历',
+      key: 'calendar',
+      icon: renderIcon(ReadOutlined),
+    },
+    {
+      label: '打印',
+      key: 'print',
+      icon: renderIcon(PrinterOutlined),
+    },
+
+    {
+      label: '时间线',
+      key: 'timeline',
+      icon: renderIcon(HourglassOutline),
+    },
+    {
+      label: 'tagsView',
+      key: 'tagsView',
+      icon: renderIcon(SwapVertical),
+    },
+    {
+      label: '导入Excel',
+      key: 'importExcel',
+      icon: renderIcon(DownloadOutlined),
+    },
+    {
+      label: '卡片描述',
+      key: 'des',
+      icon: renderIcon(LayoutOutlined),
+    },
+    {
+      label: '指令示例',
+      key: 'directive',
+      icon: renderIcon(BorderOuterOutlined),
+    },
+    {
+      label: '浏览器指纹',
+      key: 'fingerPrintJs',
+      icon: renderIcon(LogoChrome),
+    },
+    {
+      label: '更多组件',
+      key: 'moreComponents',
+      icon: renderIcon(EllipsisHorizontalCircleOutline),
+    },
+  ];
+</script>
+
+<style lang="less" scoped>
+  .title {
+    font-size: 18px;
+    transition: color 0.3s var(--n-bezier);
+    flex: 1;
+    min-width: 0;
+    color: var(--n-title-text-color);
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/map/baidu.vue b/web/src/views/addons/hgexample/comp/map/baidu.vue
new file mode 100644
index 0000000..92d81e5
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/map/baidu.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="container" ref="container"></div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import useCreateScript from '@/hooks/useCreateScript';
+
+  const SCRIPT_URL =
+    'http://api.map.baidu.com/getscript?v=3.0&ak=WxbQmaOc3bvSGSaKWcyeFSf8fnYCWpKd&services=&t=' +
+    new Date().getTime();
+  const container = ref<HTMLDivElement | null>(null);
+  const { createScriptPromise } = useCreateScript(SCRIPT_URL);
+  const initMap = () => {
+    createScriptPromise.then(() => {
+      const bMap = (window as any).BMap;
+      const map: any = new bMap.Map(container.value);
+      const point = new bMap.Point(116.404, 39.915);
+      map.centerAndZoom(point, 7);
+      map.enableScrollWheelZoom();
+      map.setMapStyleV2({ styleId: 'ea4652613f3629247d47666706ce7e89' });
+    });
+  };
+  onMounted(initMap);
+</script>
+
+<style lang="less">
+  .container {
+    width: 100%;
+    height: 720px;
+    margin-top: -32px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/map/gaode.vue b/web/src/views/addons/hgexample/comp/map/gaode.vue
new file mode 100644
index 0000000..8fc3943
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/map/gaode.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="container" ref="container"></div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import useCreateScript from '@/hooks/useCreateScript';
+
+  const SCRIPT_URL = 'https://webapi.amap.com/maps?v=1.4.15&key=9f2d3fcc4b12a7c915fded4b55902e21';
+  const container = ref<HTMLDivElement | null>(null);
+  const height = ref(0);
+  const { createScriptPromise } = useCreateScript(SCRIPT_URL);
+  const initMap = () => {
+    height.value = container.value?.parentElement?.getBoundingClientRect().height || 0;
+    createScriptPromise.then(() => {
+      const aMap: any = (window as any).AMap;
+      new aMap.Map(container.value, {
+        zoom: 22,
+        center: [116.397428, 39.90923],
+        viewMode: '3D',
+        pitch: 75,
+      });
+    });
+  };
+  onMounted(initMap);
+</script>
+
+<style lang="less">
+  .container {
+    width: 100%;
+    height: 720px;
+    margin-top: -32px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/modal/index.vue b/web/src/views/addons/hgexample/comp/modal/index.vue
new file mode 100644
index 0000000..461ca0a
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/modal/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="模态框">
+        模态框，用于向用户收集或展示信息，Modal 采用 Dialog 预设，扩展拖拽效果
+        <br />
+        以下是 useModal
+        方式，ref方式，也支持，使用方式和其他组件一致，如：modalRef.value.closeModal()
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <n-alert title="Modal嵌套Form" type="info">
+        使用 useModal 进行弹窗展示和操作，并演示了在Modal内和Form组件，组合使用方法
+      </n-alert>
+      <n-divider />
+      <n-space>
+        <n-button type="primary" @click="showModal">打开Modal嵌套Form例子</n-button>
+      </n-space>
+      <n-divider />
+      <n-alert title="个性化轻量级" type="info">
+        使用 useModal 进行弹窗展示和操作，自定义配置，实现轻量级效果，更多配置，请参考文档
+      </n-alert>
+      <n-divider />
+      <n-space>
+        <n-button type="primary" @click="showLightModal">轻量级确认</n-button>
+      </n-space>
+      <n-divider />
+      <n-alert title="提示" type="info">
+        组件暴露了，setProps 方法，用于修改组件内部
+        Props，比如标题，等，具体参考UI框架文档，DialogReactive Properties
+      </n-alert>
+    </n-card>
+
+    <basicModal @register="modalRegister" ref="modalRef" class="basicModal" @on-ok="okModal">
+      <template #default>
+        <BasicForm @register="register" @reset="handleReset" class="basicForm">
+          <template #statusSlot="{ model, field }">
+            <n-input v-model:value="model[field]" />
+          </template>
+        </BasicForm>
+      </template>
+    </basicModal>
+
+    <basicModal
+      @register="lightModalRegister"
+      class="basicModalLight"
+      ref="modalRef"
+      @on-ok="lightOkModal"
+    >
+      <template #default>
+        <p class="text-gray-500" style="padding-left: 35px">一些对话框内容</p>
+      </template>
+    </basicModal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, reactive, toRefs } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { basicModal, useModal } from '@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '姓名',
+      labelMessage: '这是一个提示',
+      giProps: {
+        span: 1,
+      },
+      componentProps: {
+        placeholder: '请输入姓名',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
+    },
+    {
+      field: 'mobile',
+      component: 'NInputNumber',
+      label: '手机',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        showButton: false,
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'type',
+      component: 'NSelect',
+      label: '类型',
+      giProps: {
+        //span: 24,
+      },
+      componentProps: {
+        placeholder: '请选择类型',
+        options: [
+          {
+            label: '舒适性',
+            value: 1,
+          },
+          {
+            label: '经济性',
+            value: 2,
+          },
+        ],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeDate',
+      component: 'NDatePicker',
+      label: '预约时间',
+      giProps: {
+        //span: 24,
+      },
+      defaultValue: 1183135260000,
+      componentProps: {
+        type: 'date',
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeTime',
+      component: 'NTimePicker',
+      label: '停留时间',
+      giProps: {
+        //span: 24,
+      },
+      componentProps: {
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeProject',
+      component: 'NCheckbox',
+      label: '预约项目',
+      giProps: {
+        //span: 24,
+      },
+      componentProps: {
+        placeholder: '请选择预约项目',
+        options: [
+          {
+            label: '种牙',
+            value: 1,
+          },
+          {
+            label: '补牙',
+            value: 2,
+          },
+          {
+            label: '根管',
+            value: 3,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeSource',
+      component: 'NRadioGroup',
+      label: '来源',
+      giProps: {
+        //span: 24,
+      },
+      componentProps: {
+        options: [
+          {
+            label: '网上',
+            value: 1,
+          },
+          {
+            label: '门店',
+            value: 2,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'status',
+      label: '状态',
+      giProps: {
+        //span: 24,
+      },
+      //插槽
+      slot: 'statusSlot',
+    },
+  ];
+
+  export default defineComponent({
+    components: { basicModal, BasicForm },
+    setup() {
+      const modalRef: any = ref(null);
+      const message = useMessage();
+
+      const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
+        title: '新增预约',
+      });
+
+      const [
+        lightModalRegister,
+        {
+          openModal: lightOpenModal,
+          closeModal: lightCloseModal,
+          setSubLoading: lightSetSubLoading,
+        },
+      ] = useModal({
+        title: '确认对话框',
+        showIcon: true,
+        type: 'warning',
+        closable: false,
+        maskClosable: true,
+      });
+
+      const [register, { submit }] = useForm({
+        gridProps: { cols: 1 },
+        collapsedRows: 3,
+        labelWidth: 120,
+        layout: 'horizontal',
+        submitButtonText: '提交预约',
+        showActionButtonGroup: false,
+        schemas,
+      });
+
+      const state = reactive({
+        formValue: {
+          name: '小马哥',
+        },
+      });
+
+      async function okModal() {
+        const formRes = await submit();
+        if (formRes) {
+          closeModal();
+          console.log('formRes', formRes);
+          message.success('提交成功');
+        } else {
+          message.error('验证失败，请填写完整信息');
+          setSubLoading(false);
+        }
+      }
+
+      function lightOkModal() {
+        lightCloseModal();
+        lightSetSubLoading(false);
+      }
+
+      function showLightModal() {
+        lightOpenModal();
+      }
+
+      function showModal() {
+        openModal();
+      }
+
+      function handleReset(values: Recordable) {
+        console.log(values);
+      }
+
+      return {
+        ...toRefs(state),
+        modalRef,
+        register,
+        modalRegister,
+        lightModalRegister,
+        handleReset,
+        showModal,
+        okModal,
+        lightOkModal,
+        showLightModal,
+      };
+    },
+  });
+</script>
+
+<style lang="less">
+  .basicForm {
+    padding-top: 20px;
+  }
+
+  .n-dialog.basicModal {
+    width: 640px;
+  }
+
+  .n-dialog.basicModalLight {
+    width: 416px;
+    padding-top: 26px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/moreComponents/index.vue b/web/src/views/addons/hgexample/comp/moreComponents/index.vue
new file mode 100644
index 0000000..1aa5bfb
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/moreComponents/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <Iframe ref="iframeRef" style="zoom: 0.8" />
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import Iframe from '../../../../iframe/index.vue';
+
+  const iframeRef = ref();
+
+  onMounted(() => {
+    iframeRef.value?.open('https://www.naiveui.com/zh-CN/os-theme/components/button');
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/comp/notice/index.vue b/web/src/views/addons/hgexample/comp/notice/index.vue
new file mode 100644
index 0000000..8d94bfd
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/notice/index.vue
@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <n-grid :cols="2" :x-gap="10" :y-gap="10">
+      <n-gi>
+        <n-card
+          title="警告信息alert"
+          :content-style="{ padding: '10px' }"
+          :header-style="{ padding: '10px' }"
+        >
+          <n-space vertical :size="12">
+            <n-alert title="Info 类型" type="info"> 万事开头难，只能一直努力！！！ </n-alert>
+            <n-alert title="Success 类型" type="success">
+              成功就是眼前，过了黑夜就是白天，加油~~
+            </n-alert>
+            <n-alert title="Warning 类型" type="warning">
+              想想昨天，看看今天，望望明天；一切都会好起来
+            </n-alert>
+            <n-alert title="Error 类型" type="error"> 有人欺负人，请不犹豫，请还回去 </n-alert>
+            <n-alert title="可以关掉" type="info" closable> Gee it's good to be back home </n-alert>
+            <n-alert title="没有边框" type="info" :bordered="false">
+              Gee it's good to be back home
+            </n-alert>
+            <n-alert title="自定义图标">
+              <template #icon>
+                <n-icon>
+                  <BalloonOutline />
+                </n-icon>
+              </template>
+              Well the Ukraine girls really knock me out<br />
+              They leave the West behind<br />
+              And Moscow girls make me sing and shout<br />
+              That Georgia's always on my mind<br />
+              Aw come on!
+            </n-alert>
+
+            <n-alert :show-icon="false" title="没有图标">
+              Yeah I'm back in the U.S.S.R.<br />
+              You don't know how lucky you are boys
+            </n-alert>
+          </n-space>
+        </n-card>
+      </n-gi>
+      <n-gi>
+        <n-card
+          title="对话框Dialog"
+          :content-style="{ padding: '10px' }"
+          :header-style="{ padding: '10px' }"
+        >
+          <div class="padding">
+            <n-space>
+              <n-button size="small" type="primary" @click="openConfirm('warning')">警告</n-button>
+              <n-button size="small" type="warning" @click="openConfirm('success')">成功</n-button>
+              <n-button size="small" type="info" @click="openConfirm('error')">错误</n-button>
+            </n-space>
+          </div>
+        </n-card>
+        <n-card
+          class="mt-2"
+          title="信息Message"
+          :content-style="{ padding: '10px' }"
+          :header-style="{ padding: '10px' }"
+        >
+          <n-space>
+            <n-button type="info" @click="openMessage('info')"> 信息 </n-button>
+            <n-button type="error" @click="openMessage('error')"> 错误 </n-button>
+            <n-button type="warning" @click="openMessage('warning')"> 警告 </n-button>
+            <n-button type="success" @click="openMessage('success')"> 成功 </n-button>
+            <n-button type="primary" @click="openMessage('loading')"> 加载中 </n-button>
+          </n-space>
+        </n-card>
+        <n-card
+          class="mt-2"
+          title="通知Notification"
+          :content-style="{ padding: '10px' }"
+          :header-style="{ padding: '10px' }"
+        >
+          <n-space>
+            <n-button type="info" @click="openNotification('info')"> 信息 </n-button>
+            <n-button type="error" @click="openNotification('error')"> 错误 </n-button>
+            <n-button type="warning" @click="openNotification('warning')"> 警告 </n-button>
+            <n-button type="success" @click="openNotification('success')"> 成功 </n-button>
+          </n-space>
+        </n-card>
+
+        <n-card
+          class="mt-2"
+          title="弹出确认Popconfirm"
+          :content-style="{ padding: '10px' }"
+          :header-style="{ padding: '10px' }"
+        >
+          <n-space>
+            <n-popconfirm
+              @positive-click="handlePositiveClick"
+              @negative-click="handleNegativeClick"
+            >
+              <template #trigger>
+                <n-button>引用</n-button>
+              </template>
+              一切都将一去杳然，任何人都无法将其捕获。
+            </n-popconfirm>
+            <n-popconfirm :negative-text="null" @positive-click="handlePositiveClick">
+              <template #trigger>
+                <n-button>只有确定</n-button>
+              </template>
+              一切都将一去杳然，任何人都无法将其捕获。
+            </n-popconfirm>
+            <n-popconfirm :positive-text="null" @negative-click="handleNegativeClick">
+              <template #trigger>
+                <n-button>只有取消</n-button>
+              </template>
+              一切都将一去杳然，任何人都无法将其捕获。
+            </n-popconfirm>
+            <n-popconfirm :positive-text="null" :negative-text="null">
+              <template #trigger>
+                <n-button>什么也没有</n-button>
+              </template>
+              一切都将一去杳然，任何人都无法将其捕获。
+            </n-popconfirm>
+            <n-popconfirm>
+              <template #trigger>
+                <n-button>自定义 action</n-button>
+              </template>
+              <template #action> 自定义 action </template>
+              一切都将一去杳然，任何人都无法将其捕获。
+            </n-popconfirm>
+          </n-space>
+        </n-card>
+
+        <n-card
+          class="mt-2"
+          title="弹出信息Popover"
+          :content-style="{ padding: '10px' }"
+          :header-style="{ padding: '10px' }"
+        >
+          <n-space>
+            <n-popover trigger="hover">
+              <template #trigger>
+                <n-button>悬浮</n-button>
+              </template>
+              <span>I wish they all could be California girls</span>
+            </n-popover>
+            <n-popover trigger="hover" :keep-alive-on-hover="false">
+              <template #trigger>
+                <n-button>悬浮（忽略主体）</n-button>
+              </template>
+              <span>I wish they all could be California girls</span>
+            </n-popover>
+            <n-popover trigger="click">
+              <template #trigger>
+                <n-button>点击</n-button>
+              </template>
+              <span>I wish they all could be California girls</span>
+            </n-popover>
+            <n-popover trigger="focus">
+              <template #trigger>
+                <n-button>聚焦</n-button>
+              </template>
+              <span>I wish they all could be California girls</span>
+            </n-popover>
+            <n-popover trigger="manual" :show="showPopover">
+              <template #trigger>
+                <n-button @click="showPopover = !showPopover"> 手动 </n-button>
+              </template>
+              <span>I wish they all could be California girls</span>
+            </n-popover>
+            <n-popover trigger="hover" :delay="500" :duration="500">
+              <template #trigger>
+                <n-button>延迟 500ms, 持续 500ms</n-button>
+              </template>
+              <span>
+                Lately did you ever feel the pain In the morning rain as it soaks it to the bone
+              </span>
+            </n-popover>
+          </n-space>
+        </n-card>
+        <n-card
+          class="mt-2"
+          title="弹出提示Tooltip"
+          :content-style="{ padding: '10px' }"
+          :header-style="{ padding: '10px' }"
+        >
+          <n-space>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-button> 鸭子 </n-button>
+              </template>
+              如果它长得像鸭子，走起来像鸭子，叫起来也像鸭子，那它一定是个鸭子。
+            </n-tooltip>
+            <n-tooltip placement="bottom" trigger="hover">
+              <template #trigger>
+                <n-button> 悬浮 </n-button>
+              </template>
+              <span> I wish they all could be California girls </span>
+            </n-tooltip>
+            <n-tooltip placement="bottom" trigger="click">
+              <template #trigger>
+                <n-button> 点击 </n-button>
+              </template>
+              <span> I wish they all could be California girls </span>
+            </n-tooltip>
+            <n-tooltip :show="showPopover" placement="bottom">
+              <template #trigger>
+                <n-button @click="showPopover = !showPopover"> 手动 </n-button>
+              </template>
+              <span> I wish they all could be California girls </span>
+            </n-tooltip>
+            <n-tooltip :show-arrow="false" trigger="hover">
+              <template #trigger>
+                <n-button>默认有箭头</n-button>
+              </template>
+              和 Popover 一样
+            </n-tooltip>
+          </n-space>
+        </n-card>
+      </n-gi>
+    </n-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useDialog, useMessage, useNotification } from 'naive-ui';
+  import { BalloonOutline } from '@vicons/ionicons5';
+
+  const dialog = useDialog();
+  const message = useMessage();
+  const notification = useNotification();
+  const showPopover = ref(false);
+
+  function openConfirm(type: string) {
+    switch (type) {
+      case 'warning':
+        dialog.warning({
+          title: '警告',
+          content: '你确定要离开我？',
+          positiveText: '确定',
+          negativeText: '不确定',
+          onPositiveClick: () => {
+            message.success('确定');
+          },
+          onNegativeClick: () => {
+            message.error('不确定');
+          },
+        });
+        break;
+      case 'success':
+        dialog.success({
+          title: '成功',
+          content: '小哥哥你太棒了~~',
+          positiveText: '哇哦~',
+        });
+        break;
+      case 'error':
+        dialog.error({
+          title: '错误',
+          content: '知道错了吗，下次改了',
+          positiveText: '快哭了',
+          onPositiveClick: () => {
+            message.success('我知道了');
+          },
+        });
+        break;
+    }
+  }
+
+  function openMessage(type: string) {
+    switch (type) {
+      case 'info':
+        message.info('在心碎中认清遗憾 生命漫长也短暂跳动心脏长出藤蔓');
+        break;
+      case 'error':
+        message.error('愿为险而战 跌入灰暗坠入深渊');
+        break;
+      case 'warning':
+        message.warning('沾满泥土的脸 没有神的光环');
+        break;
+      case 'success':
+        message.success('握紧手中的平凡 此心自称无憾生命的火已点燃');
+        break;
+      case 'loading':
+        message.loading('有一天也许会走远 也许还能再相见');
+        break;
+    }
+  }
+
+  function openNotification(type: string) {
+    switch (type) {
+      case 'info':
+        notification.info({
+          content: '在心碎中认清遗憾 生命漫长也短暂跳动心脏长出藤蔓',
+          meta: '只要平凡',
+        });
+        break;
+      case 'error':
+        notification.error({
+          content: '愿为险而战 跌入灰暗坠入深渊',
+          meta: '只要平凡',
+        });
+        break;
+      case 'warning':
+        notification.warning({
+          content: '沾满泥土的脸 没有神的光环',
+          meta: '只要平凡',
+        });
+        break;
+      case 'success':
+        notification.success({
+          content: '握紧手中的平凡 此心自称无憾生命的火已点燃',
+          meta: '只要平凡',
+        });
+        break;
+    }
+  }
+
+  function handlePositiveClick() {
+    message.info('是的');
+  }
+
+  function handleNegativeClick() {
+    message.info('并不');
+  }
+</script>
diff --git a/web/src/views/addons/hgexample/comp/print/index.vue b/web/src/views/addons/hgexample/comp/print/index.vue
new file mode 100644
index 0000000..adcc33f
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/print/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="main-container">
+    <n-card title="打印图片" :header-style="{ padding: '5px' }" :content-style="{ padding: '0px' }">
+      <template #header-extra>
+        <n-button type="primary" size="small" @click="printImage">打印</n-button>
+      </template>
+      <div class="image-wrapper">
+        <img :src="imagePath" />
+      </div>
+    </n-card>
+    <n-card
+      title="打印HTML"
+      :header-style="{ padding: '5px' }"
+      :content-style="{ padding: '0px' }"
+      class="mt-4"
+    >
+      <template #header-extra>
+        <n-button type="primary" size="small" @click="printHtml">打印</n-button>
+      </template>
+      <div id="htmlWrapper" class="flex justify-center html-wrapper align-center flex-direction">
+        <n-table :data="dataList">
+          <thead>
+            <tr>
+              <th>姓名</th>
+              <th>年龄</th>
+              <th>性别</th>
+              <th>职业</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) of dataList" :key="index">
+              <td>{{ item.name }}</td>
+              <td>{{ item.age }}</td>
+              <td>{{ item.gender }}</td>
+              <td>{{ item.career }}</td>
+            </tr>
+          </tbody>
+        </n-table>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts">
+  import printJS from 'print-js';
+  import imagePath from '@/assets/images/logo.png';
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'Print',
+    setup() {
+      function printImage() {
+        printJS({
+          printable: imagePath,
+          type: 'image',
+          showModal: false,
+        });
+      }
+      function printHtml() {
+        printJS({
+          printable: 'htmlWrapper',
+          type: 'html',
+          targetStyles: ['*'],
+        });
+      }
+      return {
+        printImage,
+        printHtml,
+        imagePath,
+        dataList: [
+          {
+            name: '张三',
+            age: 30,
+            gender: '男',
+            career: '工程师',
+          },
+          {
+            name: '李四',
+            age: 20,
+            gender: '男',
+            career: '服务员',
+          },
+          {
+            name: '王五',
+            age: 40,
+            gender: '女',
+            career: '售货员',
+          },
+        ],
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .image-wrapper {
+    width: 30%;
+    margin: 0 auto;
+    & > img {
+      width: 100%;
+    }
+  }
+  .html-wrapper {
+    width: 80%;
+    margin: 0 auto;
+    & > h1 {
+      color: red;
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/result/fail.vue b/web/src/views/addons/hgexample/comp/result/fail.vue
new file mode 100644
index 0000000..aa049c1
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/result/fail.vue
@@ -0,0 +1,70 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result status="error" title="操作失败" description="请核对并修改以下信息后，再重新提交。">
+        <div class="result-box-extra">
+          <p>您提交的内容有如下错误：</p>
+          <p class="mt-3">
+            <n-space align="center">
+              <n-icon size="20" color="#f0a020">
+                <InfoCircleOutlined />
+              </n-icon>
+              <span>认证照片不够清晰</span>
+              <n-button type="info" text>立即修改</n-button>
+            </n-space>
+          </p>
+          <p class="mt-3">
+            <n-space>
+              <n-icon size="20" color="#f0a020">
+                <InfoCircleOutlined />
+              </n-icon>
+              <span>备注包含敏感字符，并且不能包含政治相关</span>
+              <n-button type="info" text>立即修改</n-button>
+            </n-space>
+          </p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>打印</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useThemeVars } from 'naive-ui';
+  import { useRouter } from 'vue-router';
+  import { InfoCircleOutlined } from '@vicons/antd';
+
+  const router = useRouter();
+  const themeVars = useThemeVars();
+
+  const getTableHeaderColor = computed(() => {
+    return themeVars.value.tableHeaderColor;
+  });
+
+  function goHome() {
+    router.push('/');
+  }
+</script>
+<style lang="less" scoped>
+  .result-box {
+    width: 72%;
+    margin: 0 auto;
+    text-align: center;
+    padding-top: 5px;
+
+    &-extra {
+      padding: 24px 40px;
+      text-align: left;
+      background: v-bind(getTableHeaderColor);
+      border-radius: 4px;
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/result/info.vue b/web/src/views/addons/hgexample/comp/result/info.vue
new file mode 100644
index 0000000..a9d59be
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/result/info.vue
@@ -0,0 +1,74 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result
+        status="info"
+        title="提示"
+        description="本次提交，将在24小时候内自动转入对方账户，如操作失误，请及时撤回"
+      >
+        <div class="result-box-extra">
+          <p>您提交的内容如下：</p>
+          <p class="mt-3">
+            <n-space align="center">
+              <n-icon size="20" color="#18a058">
+                <CheckCircleOutlined />
+              </n-icon>
+              <span>转入支付宝账户（189****5426）：￥1980元</span>
+              <n-button type="info" text>立即撤回</n-button>
+            </n-space>
+          </p>
+          <p class="mt-3">
+            <n-space>
+              <n-icon size="20" color="#18a058">
+                <CheckCircleOutlined />
+              </n-icon>
+              <span>转入支付宝账户（187****5426）：￥2980元</span>
+              <n-button type="info" text>立即撤回</n-button>
+            </n-space>
+          </p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>全部撤回</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useThemeVars } from 'naive-ui';
+  import { useRouter } from 'vue-router';
+  import { CheckCircleOutlined } from '@vicons/antd';
+
+  const router = useRouter();
+  const themeVars = useThemeVars();
+
+  const getTableHeaderColor = computed(() => {
+    return themeVars.value.tableHeaderColor;
+  });
+
+  function goHome() {
+    router.push('/');
+  }
+</script>
+<style lang="less" scoped>
+  .result-box {
+    width: 72%;
+    margin: 0 auto;
+    text-align: center;
+    padding-top: 5px;
+
+    &-extra {
+      padding: 24px 40px;
+      text-align: left;
+      background: v-bind(getTableHeaderColor);
+      border-radius: 4px;
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/result/success.vue b/web/src/views/addons/hgexample/comp/result/success.vue
new file mode 100644
index 0000000..dd09f6c
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/result/success.vue
@@ -0,0 +1,55 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <n-result
+        status="success"
+        title="操作成功"
+        description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。"
+      >
+        <div class="result-box-extra">
+          <p>已提交申请，等待财务部门审核。</p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <n-space align="center">
+              <n-button type="info" @click="goHome">回到首页</n-button>
+              <n-button>查看详情</n-button>
+              <n-button>打印</n-button>
+            </n-space>
+          </div>
+        </template>
+      </n-result>
+    </div>
+  </n-card>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useThemeVars } from 'naive-ui';
+
+  const router = useRouter();
+  const themeVars = useThemeVars();
+
+  const getTableHeaderColor = computed(() => {
+    return themeVars.value.tableHeaderColor;
+  });
+
+  function goHome() {
+    router.push('/');
+  }
+</script>
+<style lang="less" scoped>
+  .result-box {
+    width: 72%;
+    margin: 0 auto;
+    text-align: center;
+    padding-top: 5px;
+
+    &-extra {
+      padding: 24px 40px;
+      text-align: left;
+      background: v-bind(getTableHeaderColor);
+      border-radius: 4px;
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/tagsView/index.vue b/web/src/views/addons/hgexample/comp/tagsView/index.vue
new file mode 100644
index 0000000..d01f398
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/tagsView/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="tagsView"> 标签页操作项 </n-card>
+    </div>
+    <n-card>
+      <n-space>
+        <n-button type="info" @click="handleSignal('1')"> 刷新页面路由 </n-button>
+        <n-button type="error" @click="handleSignal('2')"> 关闭当前页面 </n-button>
+        <n-button type="warning" @click="handleSignal('3')"> 关闭其他页面 </n-button>
+        <n-button type="success" @click="handleSignal('4')"> 关闭全部页面 </n-button>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useTabsViewStore } from '@/store/modules/tabsView';
+
+  const tabsViewStore = useTabsViewStore();
+
+  function handleSignal(signal: string) {
+    tabsViewStore.closeSignal(signal);
+  }
+</script>
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/comp/text/gradient/index.vue b/web/src/views/addons/hgexample/comp/text/gradient/index.vue
new file mode 100644
index 0000000..3051748
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/text/gradient/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <n-space vertical>
+      <n-card
+        :segmented="{ content: true, footer: true }"
+        header-style="padding:10px"
+        footer-style="padding:10px"
+      >
+        <template #header> 渐变文字 </template>
+        <template #header-extra>
+          <n-gradient-text type="success"> 渐变文字成了 </n-gradient-text>
+        </template>
+        <n-space vertical>
+          <n-gradient-text style="white-space: normal" type="success">
+            <p
+              >苏轼，（1037年1月8日-1101年8月24日）字子瞻、和仲，号铁冠道人、东坡居士，世称苏东坡、苏仙，汉族，眉州眉山（四川省眉山市）人，祖籍河北栾城，北宋著名文学家、书法家、画家，历史治水名人。苏轼是北宋中期文坛领袖，在诗、词、散文、书、画等方面取得很高成就。文纵横恣肆；诗题材广阔，清新豪健，善用夸张比喻，独具风格，与黄庭坚并称“苏黄”；词开豪放一派，与辛弃疾同是豪放派代表，并称“苏辛”；散文著述宏富，豪放自如，与欧阳修并称“欧苏”，为“唐宋八大家”之一。苏轼善书，“宋四家”之一；擅长文人画，尤擅墨竹、怪石、枯木等。与韩愈、柳宗元和欧阳修合称“千古文章四大家”。作品有《东坡七集》《东坡易传》《东坡乐府》《潇湘竹石图卷》《古木怪石图卷》等</p
+            >
+          </n-gradient-text>
+        </n-space>
+      </n-card>
+      <n-card
+        :segmented="{ content: true, footer: true }"
+        header-style="padding:10px"
+        footer-style="padding:10px"
+      >
+        <template #header> 渐变文字 </template>
+        <template #header-extra>
+          <n-gradient-text type="warning"> 渐变文字成了 </n-gradient-text>
+        </template>
+        <n-space vertical>
+          <n-gradient-text style="white-space: normal" type="warning">
+            <p
+              >白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍太原，到其曾祖父时迁居下邽，生于河南新郑。是唐代伟大的现实主义诗人，唐代三大诗人之一。白居易与元稹共同倡导新乐府运动，世称“元白”，与刘禹锡并称“刘白”。白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。官至翰林学士、左赞善大夫。公元846年，白居易在洛阳逝世，葬于香山。有《白氏长庆集》传世，代表诗作有《长恨歌》《卖炭翁》《琵琶行》等。</p
+            >
+          </n-gradient-text>
+        </n-space>
+      </n-card>
+      <n-card
+        :segmented="{ content: true, footer: true }"
+        header-style="padding:10px"
+        footer-style="padding:10px"
+      >
+        <template #header> 自定义颜色 </template>
+        <template #header-extra>
+          <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)">
+            渐变文字成了
+          </n-gradient-text>
+        </template>
+        <n-space vertical>
+          <n-gradient-text
+            gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"
+            style="white-space: normal"
+          >
+            <p
+              >杜甫（712－770），字子美，自号少陵野老，世称“杜工部”、“杜少陵”等，汉族，河南府巩县（今河南省巩义市）人，唐代伟大的现实主义诗人，杜甫被世人尊为“诗圣”，其诗被称为“诗史”。杜甫与李白合称“李杜”，为了跟另外两位诗人李商隐与杜牧即“小李杜”区别开来，杜甫与李白又合称“大李杜”。他忧国忧民，人格高尚，他的约1400余首诗被保留了下来，诗艺精湛，在中国古典诗歌中备受推崇，影响深远。759-766年间曾居成都，后世有杜甫草堂纪念</p
+            >
+          </n-gradient-text>
+        </n-space>
+      </n-card>
+    </n-space>
+  </div>
+</template>
+<script lang="ts" setup></script>
+<style lang="less" scoped>
+  p {
+    font-size: 14px;
+    line-height: 2;
+    text-indent: 28px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/text/high/index.vue b/web/src/views/addons/hgexample/comp/text/high/index.vue
new file mode 100644
index 0000000..8da12e8
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/text/high/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <n-card title="高亮" style="margin-bottom: 10px">
+      <n-text>
+        <p style="line-height: 2" v-html="compData1.text"></p>
+      </n-text>
+    </n-card>
+    <n-card title="自定义颜色" style="margin-bottom: 10px">
+      <n-text>
+        <p style="line-height: 2" v-html="compData2.text"></p>
+      </n-text>
+    </n-card>
+    <n-card title="自定义样式">
+      <n-text>
+        <p style="line-height: 2" v-html="compData3.text"></p>
+      </n-text>
+    </n-card>
+  </div>
+</template>
+<script lang="ts" setup>
+  import highHtml from '@/utils/highHtml';
+  import { reactive, onMounted } from 'vue';
+
+  const text =
+    '先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。\n' +
+    '\n' +
+    '　　宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。\n' +
+    '\n' +
+    '　　侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。\n' +
+    '\n' +
+    '　　将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。\n' +
+    '\n' +
+    '　　亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。\n' +
+    '\n' +
+    '　　臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。\n' +
+    '\n' +
+    '　　先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。\n' +
+    '\n' +
+    '　　愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言';
+
+  const compData1 = reactive({
+    text: '',
+    keys: ['先帝', '先汉', '苟'],
+  });
+  const compData2 = reactive({
+    text: '',
+    keys: [
+      {
+        keyword: '先帝',
+        bgColor: 'red',
+        color: '#fff',
+        renderHighlightKeyword: (str) => {
+          return `<span class="high" style="padding:2px 5px;margin:0 5px;border-radius:3px;background-color: #3a5ccc;color: #ffffff">${str}</span>`;
+        },
+      },
+      {
+        keyword: '中',
+        bgColor: '#b4d5ff',
+        color: '#fff',
+        renderHighlightKeyword: (str) => {
+          return `<span class="high" style="padding:2px 5px;margin:0 5px;border-radius:3px;background-color: #e96656;color: #ffffff">${str}</span>`;
+        },
+      },
+      { keyword: '苟', bgColor: '#b4d5ff', color: '#fff' },
+    ],
+  });
+  const compData3 = reactive({
+    text: '',
+    keys: [
+      {
+        keyword: '之',
+        bgColor: 'red',
+        color: '#fff',
+        style: { padding: '2px 5px', margin: '0 5px', 'border-radius': '3px' },
+      },
+      { keyword: '先帝', bgColor: '#b4d5ff', color: '#fff' },
+      { keyword: '苟', bgColor: '#b4d5ff', color: '#fff' },
+    ],
+  });
+
+  onMounted(() => {
+    compData1.text = highHtml(text, compData1.keys).highText;
+    compData2.text = highHtml(text, compData2.keys).highText;
+    compData3.text = highHtml(text, compData3.keys).highText;
+  });
+</script>
+<style lang="less">
+  .high {
+    &:hover {
+      background-color: seagreen !important;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/text/mint/index.vue b/web/src/views/addons/hgexample/comp/text/mint/index.vue
new file mode 100644
index 0000000..e78c15d
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/text/mint/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <n-card
+    :segmented="{ content: true, footer: true }"
+    header-style="padding:10px"
+    footer-style="padding:10px"
+  >
+    <template #header> 敏感词汇验证 </template>
+    <n-space vertical>
+      <n-space>
+        <n-tag
+          :type="idx % 2 ? 'success' : 'warning'"
+          :key="idx"
+          v-for="(item, idx) in compData.keys"
+          >{{ item }}</n-tag
+        >
+      </n-space>
+      <n-input
+        placeholder="输入需要验证的词汇文本"
+        type="textarea"
+        size="small"
+        v-model:value="compData.text"
+        :autosize="{ minRows: 3, maxRows: 5 }"
+        @update:value="compData.handleUpdateText"
+      />
+      <n-space>
+        <n-tag
+          :type="idx % 2 ? 'error' : 'info'"
+          :key="idx"
+          v-for="(item, idx) in compData.words"
+          >{{ item }}</n-tag
+        >
+      </n-space>
+    </n-space>
+  </n-card>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import Mint from 'mint-filter';
+
+  const compData = reactive({
+    keys: ['敏感词', '胡萝卜', '香蕉', '苹果'],
+    text: '',
+    words: [],
+  });
+  const mint = new Mint(compData.keys);
+  compData.handleUpdateText = (value: string | [string, string]) => {
+    const test = mint.filter(value);
+    compData.words = test.words;
+  };
+</script>
diff --git a/web/src/views/addons/hgexample/comp/text/pinyin/index.vue b/web/src/views/addons/hgexample/comp/text/pinyin/index.vue
new file mode 100644
index 0000000..828a418
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/text/pinyin/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <n-space vertical>
+      <n-card
+        :segmented="{ content: true, footer: true }"
+        header-style="padding:10px"
+        footer-style="padding:10px"
+      >
+        <template #header> 字符拼音 </template>
+        <template #header-extra> 陋室铭，唐代：刘禹锡 </template>
+        <div class="pinyin">
+          <template v-for="item in compData.items1">
+            <div class="pinyin-item" :key="idx" v-for="(todo, idx) in item">
+              <span class="py">{{ todo.py }}</span>
+              <span class="hz">{{ todo.hz }}</span> </div
+            ><br />
+          </template>
+        </div>
+      </n-card>
+      <n-card
+        :segmented="{ content: true, footer: true }"
+        header-style="padding:10px"
+        footer-style="padding:10px"
+      >
+        <template #header> 字符拼音 </template>
+        <template #header-extra> 李贺小传，李商隐〔唐代〕 </template>
+        <div class="pinyin">
+          <template v-for="item in compData.items2">
+            <div class="pinyin-item" :key="idx" v-for="(todo, idx) in item">
+              <span class="py">{{ todo.py }}</span>
+              <span class="hz">{{ todo.hz }}</span> </div
+            ><br />
+          </template>
+        </div>
+      </n-card>
+    </n-space>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { pinyin } from 'pinyin-pro';
+
+  interface WordInfo {
+    hz: string;
+    py: string;
+  }
+
+  const text1 = [
+    '  山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？',
+  ];
+  const text2 = [
+    '  京兆杜牧为李长吉集序，状长吉之奇甚尽，世传之。长吉姊嫁王氏者，语长吉之事尤备。',
+    '  长吉细瘦，通眉，长指爪，能苦吟疾书。最先为昌黎韩愈所知。所与游者，王参元、杨敬之、权璩、崔植辈为密，每旦日出与诸公游，未尝得题然后为诗，如他人思量牵合，以及程限为意。恒从小奚奴，骑距驉，背一古破锦囊，遇有所得，即书投囊中。及暮归．太夫人使婢受囊出之，见所书多．辄曰：“是儿要当呕出心乃已尔。”上灯，与食。长吉从婢取书，研墨叠纸足成之，投他囊中。非大醉及吊丧日率如此，过亦不复省。王、杨辈时复来探取写去。长吉往往独骑往还京、洛，所至或时有著，随弃之，故沈子明家所余四卷而已。',
+    '  长吉将死时，忽昼见一绯衣人，驾赤虬，持一板，书若太古篆或霹雳石文者，云当召长吉。长吉了不能读，欻下榻叩头，言：“阿㜷老且病，贺不愿去。”绯衣人笑曰：“帝成白玉楼，立召君为记。天上差乐，不苦也。”长吉独泣，边人尽见之。少之，长吉气绝。常所居窗中，勃勃有烟气，闻行车嘒管之声。太夫人急止人哭，待之如炊五斗黍许时，长吉竟死。王氏姊非能造作谓长吉者，实所见如此。',
+    '  呜呼，天苍苍而高也，上果有帝耶?帝果有苑囿、宫室、观阁之玩耶?苟信然，则天之高邈，帝之尊严，亦宜有人物文采愈此世者，何独眷眷于长吉而使其不寿耶?噫，又岂世所谓才而奇者，不独地上少，即天上亦不多耶?长吉生二十七年，位不过奉礼太常，时人亦多排摈毁斥之，又岂才而奇者，帝独重之，而人反不重耶?又岂人见会胜帝耶?',
+  ];
+
+  const createHzPy = (text: string[]): WordInfo[][] => {
+    const items: WordInfo[][] = [];
+    text.forEach((item) => {
+      const todo: WordInfo[] = [];
+      for (let i = 0; i < item.length; i++) {
+        const tg = item.charAt(i);
+        todo.push({ hz: tg, py: pinyin(tg)[0] });
+      }
+      items.push(todo);
+    });
+    return items;
+  };
+
+  const compData = reactive({
+    items1: createHzPy(text1),
+    items2: createHzPy(text2),
+  });
+</script>
+<style lang="less" scoped>
+  .pinyin {
+    &-item {
+      line-height: 100%;
+      width: 42px;
+      text-align: center;
+      display: inline-block;
+      .py {
+        clear: both;
+        font-size: 12px;
+        font-weight: normal;
+        float: left;
+        width: 42px;
+      }
+      .hz {
+        clear: both;
+        margin-bottom: 10px;
+        text-align: center;
+        float: left;
+        font-size: 16px;
+        height: 36px;
+        width: 42px;
+        line-height: 36px;
+      }
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/timeline/index.vue b/web/src/views/addons/hgexample/comp/timeline/index.vue
new file mode 100644
index 0000000..4d24f34
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/timeline/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <n-card
+    :segmented="{ content: true, footer: true }"
+    header-style="padding:10px"
+    footer-style="padding:10px"
+  >
+    <template #header> 时间线 </template>
+    <n-space>
+      <n-card title="竖向">
+        <n-timeline>
+          <n-timeline-item content="啊" />
+          <n-timeline-item type="success" title="成功" content="哪里成功" time="2018-04-03 20:46" />
+          <n-timeline-item type="error" content="哪里错误" time="2018-04-03 20:46" />
+          <n-timeline-item type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46" />
+          <n-timeline-item
+            type="info"
+            title="信息"
+            content="是的"
+            time="2018-04-03 20:46"
+            line-type="dashed"
+          />
+          <n-timeline-item content="啊" />
+        </n-timeline>
+      </n-card>
+      <n-card title="横向">
+        <div style="overflow: auto">
+          <n-timeline horizontal>
+            <n-timeline-item content="啊" />
+            <n-timeline-item
+              type="success"
+              title="成功"
+              content="哪里成功"
+              time="2018-04-03 20:46"
+            />
+            <n-timeline-item type="error" content="哪里失败" time="2018-04-03 20:46" />
+            <n-timeline-item
+              type="warning"
+              title="警告"
+              content="哪里警告"
+              time="2018-04-03 20:46"
+            />
+            <n-timeline-item type="info" title="信息" content="是的" time="2018-04-03 20:46" />
+          </n-timeline>
+        </div>
+      </n-card>
+      <n-card title="自定义">
+        <n-timeline :icon-size="20">
+          <n-timeline-item color="grey" content="啊">
+            <template #icon>
+              <n-icon>
+                <cash-icon />
+              </n-icon>
+            </template>
+          </n-timeline-item>
+          <n-timeline-item type="success" title="成功" content="哪里成功" time="2018-04-03 20:46">
+            <template #icon>
+              <n-icon>
+                <cash-icon />
+              </n-icon>
+            </template>
+          </n-timeline-item>
+          <n-timeline-item type="error" content="哪里错误" time="2018-04-03 20:46">
+            <template #icon>
+              <n-icon>
+                <cash-icon />
+              </n-icon>
+            </template>
+          </n-timeline-item>
+          <n-timeline-item type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46">
+            <template #icon>
+              <n-icon>
+                <cash-icon />
+              </n-icon>
+            </template>
+          </n-timeline-item>
+          <n-timeline-item type="info" title="信息" content="是的" time="2018-04-03 20:46">
+            <template #icon>
+              <n-icon>
+                <cash-icon />
+              </n-icon>
+            </template>
+          </n-timeline-item>
+        </n-timeline>
+      </n-card>
+    </n-space>
+  </n-card>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { CashOutline as CashIcon } from '@vicons/ionicons5';
+
+  export default defineComponent({
+    components: {
+      CashIcon,
+    },
+  });
+</script>
diff --git a/web/src/views/addons/hgexample/comp/vis/echarts.vue b/web/src/views/addons/hgexample/comp/vis/echarts.vue
new file mode 100644
index 0000000..76f0f07
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/vis/echarts.vue
@@ -0,0 +1,15 @@
+<template>
+  <Iframe ref="iframeRef" style="zoom: 0.8" />
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import Iframe from '../../../../iframe/index.vue';
+
+  const iframeRef = ref();
+
+  onMounted(() => {
+    iframeRef.value?.open('https://www.makeapie.cn/echarts');
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/comp/vis/madeapie.vue b/web/src/views/addons/hgexample/comp/vis/madeapie.vue
new file mode 100644
index 0000000..279a3ae
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/vis/madeapie.vue
@@ -0,0 +1,15 @@
+<template>
+  <Iframe ref="iframeRef" style="zoom: 0.9" />
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import Iframe from '../../../../iframe/index.vue';
+
+  const iframeRef = ref();
+
+  onMounted(() => {
+    iframeRef.value?.open('https://madeapie.com/');
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/comp/vis/ppchart.vue b/web/src/views/addons/hgexample/comp/vis/ppchart.vue
new file mode 100644
index 0000000..e8bf7bd
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/vis/ppchart.vue
@@ -0,0 +1,15 @@
+<template>
+  <Iframe ref="iframeRef" style="zoom: 0.9" />
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import Iframe from '../../../../iframe/index.vue';
+
+  const iframeRef = ref();
+
+  onMounted(() => {
+    iframeRef.value?.open('https://ppchart.com/#/');
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/comp/waterfall/index.vue b/web/src/views/addons/hgexample/comp/waterfall/index.vue
new file mode 100644
index 0000000..9bbbd25
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/waterfall/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <n-card
+    :segmented="{ content: true, footer: true }"
+    header-style="padding:10px"
+    footer-style="padding:10px"
+  >
+    <template #header> 瀑布流组件 </template>
+    <template #header-extra>
+      <n-tag type="success" @click="handleClick">vue-waterfall-plugin-next</n-tag>
+    </template>
+    <Waterfall
+      :row-key="options.rowKey"
+      :gutter="options.gutter"
+      :has-around-gutter="options.hasAroundGutter"
+      :width="options.width"
+      :breakpoints="options.breakpoints"
+      :img-selector="options.imgSelector"
+      :background-color="options.backgroundColor"
+      :animation-effect="options.animationEffect"
+      :animation-duration="options.animationDuration"
+      :animation-delay="options.animationDelay"
+      :lazyload="options.lazyload"
+      :list="compData.items"
+    >
+      <template #item="{ item }">
+        <div class="waterfall-item" :style="item.style">
+          <span>君问归期未有期，巴山夜雨涨秋池。何当共剪西窗烛，却话巴山夜雨时。</span>
+        </div>
+      </template>
+    </Waterfall>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { Waterfall } from 'vue-waterfall-plugin-next';
+  import 'vue-waterfall-plugin-next/dist/style.css';
+  import { rdmLightRgbColor } from '@/utils/hotgo';
+
+  const options = reactive({
+    // 唯一key值
+    rowKey: 'id',
+    // 卡片之间的间隙
+    gutter: 20,
+    // 是否有周围的gutter
+    hasAroundGutter: true,
+    // 卡片在PC上的宽度
+    width: 250,
+    // 自定义行显示个数，主要用于对移动端的适配
+    breakpoints: {
+      1200: {
+        // 当屏幕宽度小于等于1200
+        rowPerView: 5,
+      },
+      800: {
+        // 当屏幕宽度小于等于800
+        rowPerView: 3,
+      },
+      500: {
+        // 当屏幕宽度小于等于500
+        rowPerView: 1,
+      },
+    },
+    // 动画效果
+    animationEffect: 'animate__fadeInUp',
+    // 动画时间
+    animationDuration: 1000,
+    // 动画延迟
+    animationDelay: 300,
+    // 背景色
+    backgroundColor: '',
+    // imgSelector
+    imgSelector: 'src.original',
+    // 是否懒加载
+    lazyload: true,
+  });
+
+  const items: any = [];
+  const genBetweenRight = (m, n) => Math.floor(Math.random() * (n - m) + 1) + m;
+  for (let i = 0; i < 90; i++) {
+    items.push({
+      style: {
+        height: genBetweenRight(100, 300) + 'px',
+        'background-color': rdmLightRgbColor(),
+      },
+    });
+  }
+  const compData = reactive({
+    items,
+  });
+  const handleClick = () => {
+    window.open('https://vue-waterfall.netlify.app/');
+  };
+</script>
+
+<style lang="less" scoped>
+  .waterfall-item {
+    border: 2px solid rgb(244, 244, 248);
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 4px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/comp/watermark/index.vue b/web/src/views/addons/hgexample/comp/watermark/index.vue
new file mode 100644
index 0000000..3f6db90
--- /dev/null
+++ b/web/src/views/addons/hgexample/comp/watermark/index.vue
@@ -0,0 +1,171 @@
+<template>
+  <n-space vertical>
+    <n-card
+      :segmented="{ content: true, footer: true }"
+      header-style="padding:10px"
+      footer-style="padding:10px"
+    >
+      <template #header> 文字水印 </template>
+      <template #header-extra> 核心机密 </template>
+      <n-watermark
+        content="核心机密"
+        cross
+        selectable
+        :font-size="16"
+        :line-height="16"
+        :width="192"
+        :height="128"
+        :x-offset="12"
+        :y-offset="28"
+        :rotate="-15"
+      >
+        <n-table :single-line="false">
+          <thead>
+            <tr>
+              <th>复盘</th>
+              <th>赋能</th>
+              <th>协同</th>
+              <th>...</th>
+              <th>串联</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>拉通</td>
+              <td>打通</td>
+              <td>树立</td>
+              <td>...</td>
+              <td>履约</td>
+            </tr>
+            <tr>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+            </tr>
+          </tbody>
+        </n-table>
+      </n-watermark>
+    </n-card>
+    <n-card
+      :segmented="{ content: true, footer: true }"
+      header-style="padding:10px"
+      footer-style="padding:10px"
+    >
+      <template #header> 图片水印 </template>
+      <template #header-extra>
+        <n-image height="30" width="30" :src="compData.img" />
+      </template>
+      <n-watermark
+        :image="compData.img"
+        cross
+        :rotate="-15"
+        :font-size="16"
+        :line-height="16"
+        :width="192"
+        :height="128"
+        :x-offset="12"
+        :y-offset="30"
+        :image-width="34"
+        :image-opacity="0.24"
+      >
+        <n-table :single-line="false">
+          <thead>
+            <tr>
+              <th>复盘</th>
+              <th>赋能</th>
+              <th>协同</th>
+              <th>...</th>
+              <th>串联</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>拉通</td>
+              <td>打通</td>
+              <td>树立</td>
+              <td>...</td>
+              <td>履约</td>
+            </tr>
+            <tr>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+            </tr>
+          </tbody>
+        </n-table>
+      </n-watermark>
+    </n-card>
+    <n-card
+      :segmented="{ content: true, footer: true }"
+      header-style="padding:10px"
+      footer-style="padding:10px"
+    >
+      <template #header> 自定义水印 </template>
+      <template #header-extra>
+        <n-input-group>
+          <n-input v-model:value="compData.text" placeholder="输入自定义水印" />
+          <n-button type="primary" ghost>添加</n-button>
+        </n-input-group>
+      </template>
+      <n-watermark
+        v-model:content="compData.text"
+        cross
+        selectable
+        :font-size="16"
+        :line-height="16"
+        :width="192"
+        :height="128"
+        :x-offset="12"
+        :y-offset="28"
+        :rotate="-15"
+      >
+        <n-table :single-line="false">
+          <thead>
+            <tr>
+              <th>复盘</th>
+              <th>赋能</th>
+              <th>协同</th>
+              <th>...</th>
+              <th>串联</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>拉通</td>
+              <td>打通</td>
+              <td>树立</td>
+              <td>...</td>
+              <td>履约</td>
+            </tr>
+            <tr>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+              <td>...</td>
+            </tr>
+          </tbody>
+        </n-table>
+      </n-watermark>
+    </n-card>
+  </n-space>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive } from 'vue';
+  import logo from '@/assets/images/logo.png';
+  export default defineComponent({
+    setup() {
+      const compData = reactive({
+        img: logo,
+        text: '自定义水印',
+      });
+      return {
+        compData,
+      };
+    },
+  });
+</script>
diff --git a/web/src/views/addons/hgexample/config/BasicSetting.vue b/web/src/views/addons/hgexample/config/BasicSetting.vue
new file mode 100644
index 0000000..1877934
--- /dev/null
+++ b/web/src/views/addons/hgexample/config/BasicSetting.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="测试参数" path="basicTest">
+          <n-input v-model:value="formValue.basicTest" placeholder="请输入测试参数" />
+          <template #feedback>
+            这是一个测试参数，每个插件都可以有独立的配置项，可以按需添加</template
+          >
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getConfig, updateConfig } from '@/api/addons/hgexample/config';
+
+  const group = ref('basic');
+
+  const show = ref(false);
+  const rules = {
+    basicTest: {
+      required: true,
+      message: '请输入测试参数',
+      trigger: 'blur',
+    },
+  };
+
+  const formRef: any = ref(null);
+  const message = useMessage();
+
+  const formValue = ref({
+    basicTest: 'HotGo',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+          message.success('更新成功');
+          load();
+        });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    new Promise((_resolve, _reject) => {
+      getConfig({ group: group.value })
+        .then((res) => {
+          formValue.value = res.list;
+        })
+        .finally(() => {
+          show.value = false;
+        });
+    });
+  }
+</script>
diff --git a/web/src/views/addons/hgexample/config/system.vue b/web/src/views/addons/hgexample/config/system.vue
new file mode 100644
index 0000000..863a69e
--- /dev/null
+++ b/web/src/views/addons/hgexample/config/system.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <n-grid cols="24 300:1 600:24" :x-gap="12">
+      <n-grid-item span="6">
+        <n-card :bordered="false" size="small" class="proCard">
+          <n-thing
+            class="thing-cell"
+            v-for="item in typeTabList"
+            :key="item.key"
+            :class="{ 'thing-cell-on': type === item.key }"
+            @click="switchType(item)"
+          >
+            <template #header>{{ item.name }}</template>
+            <template #description>{{ item.desc }}</template>
+          </n-thing>
+        </n-card>
+      </n-grid-item>
+      <n-grid-item span="18">
+        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
+          <BasicSetting v-if="type === 1" />
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import BasicSetting from './BasicSetting.vue';
+  const typeTabList = [
+    {
+      name: '基本设置',
+      desc: '系统常规设置',
+      key: 1,
+    },
+  ];
+  export default defineComponent({
+    components: {
+      BasicSetting,
+    },
+    setup() {
+      const state = reactive({
+        type: 1,
+        typeTitle: '基本设置',
+      });
+
+      function switchType(e) {
+        state.type = e.key;
+        state.typeTitle = e.name;
+      }
+
+      return {
+        ...toRefs(state),
+        switchType,
+        typeTabList,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .thing-cell {
+    margin: 0 -16px 10px;
+    padding: 5px 16px;
+
+    &:hover {
+      background: #f3f3f3;
+      cursor: pointer;
+    }
+  }
+
+  .thing-cell-on {
+    background: #f0faff;
+    color: #2d8cf0;
+
+    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+      color: #2d8cf0;
+    }
+
+    &:hover {
+      background: #f0faff;
+    }
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/portal/form.vue b/web/src/views/addons/hgexample/portal/form.vue
new file mode 100644
index 0000000..cfac5e1
--- /dev/null
+++ b/web/src/views/addons/hgexample/portal/form.vue
@@ -0,0 +1,47 @@
+<template>
+  <n-form class="py-4">
+    <n-form-item label="测试入口" path="index">
+      <n-input-group>
+        <n-input placeholder="请输入" :default-value="url" :disabled="true" />
+        <n-button v-copy="url" type="primary" @click="copy"> 复制链接 </n-button>
+      </n-input-group>
+    </n-form-item>
+
+    <n-form-item label="二维码" path="index" v-if="showQrcode">
+      <div class="text-center">
+        <qrcode-vue :value="url" :size="220" class="canvas" style="margin: 0 auto" />
+      </div>
+    </n-form-item>
+  </n-form>
+</template>
+
+<script lang="ts" setup>
+  import { useUserStoreWidthOut } from '@/store/modules/user';
+  import QrcodeVue from 'qrcode.vue';
+  import { useMessage } from 'naive-ui';
+
+  const message = useMessage();
+
+  interface Props {
+    path: string;
+    showQrcode?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    path: '',
+    showQrcode: true,
+  });
+
+  const copy = () => {
+    message.success('复制成功');
+  };
+
+  const useUserStore = useUserStoreWidthOut();
+  const url = useUserStore.config?.domain + props.path;
+</script>
+
+<style scoped>
+  ::v-deep(.card-tabs .n-tabs-nav--bar-type) {
+    padding-left: 4px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/portal/index.vue b/web/src/views/addons/hgexample/portal/index.vue
new file mode 100644
index 0000000..31fe0dd
--- /dev/null
+++ b/web/src/views/addons/hgexample/portal/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <n-card title="应用入口" class="proCard">
+      <n-tabs type="line" animated>
+        <n-tab-pane name="admin" tab="后台API">
+          <Form path="/admin/hgexample/index/test?name=HotGo" />
+        </n-tab-pane>
+        <n-tab-pane name="api" tab="前台API">
+          <Form path="/api/hgexample/index/test?name=HotGo" />
+        </n-tab-pane>
+        <n-tab-pane name="home" tab="前台页面">
+          <Form path="/home/hgexample/index/test?name=HotGo" />
+        </n-tab-pane>
+        <n-tab-pane name="static" tab="静态目录">
+          <Form path="/addons/hgexample/default" />
+        </n-tab-pane>
+        <n-tab-pane name="websocket" tab="Websocket">
+          <Form path="/socket/hgexample/index/test?name=HotGo" :showQrcode="false" />
+          <WebsocketTest />
+        </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import Form from './form.vue';
+  import WebsocketTest from './websocketTest.vue';
+</script>
+
+<style scoped>
+  ::v-deep(.card-tabs .n-tabs-nav--bar-type) {
+    padding-left: 4px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/portal/websocketTest.vue b/web/src/views/addons/hgexample/portal/websocketTest.vue
new file mode 100644
index 0000000..cee6676
--- /dev/null
+++ b/web/src/views/addons/hgexample/portal/websocketTest.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="测试websocket">
+        尝试在下方输入框中输入任意文字消息内容，发送后websocket服务器收到会原样返回
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <n-space vertical>
+        <n-input-group style="width: 520px">
+          <n-input
+            @keyup.enter="sendMessage"
+            :style="{ width: '78%' }"
+            placeholder="请输入消息内容"
+            :on-focus="onFocus"
+            :on-blur="onBlur"
+            v-model:value="inputMessage"
+          />
+          <n-button type="primary" @click="sendMessage"> 发送消息</n-button>
+        </n-input-group>
+
+        <div class="mt-5"></div>
+
+        <n-timeline :icon-size="20">
+          <n-timeline-item color="grey" content="输入中.." v-if="isInput">
+            <template #icon>
+              <n-icon>
+                <MessageOutlined />
+              </n-icon>
+            </template>
+          </n-timeline-item>
+
+          <n-timeline-item
+            v-for="item in messages"
+            :key="item"
+            :type="item.type == Enum.SendType ? 'success' : 'info'"
+            :title="item.type == Enum.SendType ? '发送消息' : '收到消息'"
+            :content="item.content"
+            :time="item.time"
+          >
+            <template #icon>
+              <n-icon>
+                <SendOutlined v-if="item.type == Enum.SendType" />
+                <SoundOutlined v-if="item.type == Enum.ReceiveType" />
+              </n-icon>
+            </template>
+          </n-timeline-item>
+        </n-timeline>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
+  import { MessageOutlined, SendOutlined, SoundOutlined } from '@vicons/antd';
+  import { format } from 'date-fns';
+  import { addOnMessage, removeOnMessage, sendMsg, WebSocketMessage } from '@/utils/websocket';
+  import { useMessage } from 'naive-ui';
+
+  interface Message {
+    type: Enum;
+    content: string;
+    time: string;
+  }
+
+  const message = useMessage();
+  const messages = ref<Message[]>([]);
+  const inputMessage = ref('你好，HotGo');
+  const isInput = ref(false);
+  const testMessageEvent = 'admin/addons/hgexample/testMessage';
+
+  enum Enum {
+    SendType = 1, // 发送类型
+    ReceiveType = 2, // 接受类型
+  }
+
+  function onFocus() {
+    isInput.value = true;
+  }
+
+  function onBlur() {
+    isInput.value = false;
+  }
+
+  function sendMessage() {
+    if (inputMessage.value == '') {
+      message.error('消息内容不能为空');
+      return;
+    }
+
+    // 发送消息
+    sendMsg(testMessageEvent, {
+      message: inputMessage.value,
+    });
+
+    const msg: Message = {
+      type: Enum.SendType,
+      content: inputMessage.value,
+      time: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    };
+    insertMessage(msg);
+    inputMessage.value = '';
+  }
+
+  // 存入本地记录
+  function insertMessage(msg: Message): void {
+    messages.value.unshift(msg); // 在头部插入消息
+    if (messages.value.length > 10) {
+      messages.value = messages.value.slice(0, 10); // 如果超过10个，则只保留最前面10个
+    }
+  }
+
+  const onMessage = (res: WebSocketMessage) => {
+    const msg: Message = {
+      type: Enum.ReceiveType,
+      content: res.data.message,
+      time: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+    };
+    insertMessage(msg);
+  };
+
+  onMounted(() => {
+    // 在当前页面注册消息监听
+    addOnMessage(testMessageEvent, onMessage);
+  });
+
+  onBeforeUnmount(() => {
+    // 移除消息监听
+    removeOnMessage(testMessageEvent);
+  });
+</script>
+
+<style scoped></style>
diff --git a/web/src/views/addons/hgexample/table/edit.vue b/web/src/views/addons/hgexample/table/edit.vue
new file mode 100644
index 0000000..149fcc0
--- /dev/null
+++ b/web/src/views/addons/hgexample/table/edit.vue
@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="isShowModal"
+      :show-icon="false"
+      preset="dialog"
+      :title="params?.id > 0 ? '编辑 #' + params?.id : '添加'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-form
+        :model="params"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-form-item label="标题" path="title">
+          <n-input placeholder="请输入标题" v-model:value="params.title" />
+        </n-form-item>
+
+        <n-form-item label="分类ID" path="categoryId">
+          <n-input-number placeholder="请输入分类ID" v-model:value="params.categoryId" />
+        </n-form-item>
+
+        <n-form-item label="标签" path="flag">
+          <n-checkbox-group v-model:value="params.flag">
+            <n-space>
+              <n-checkbox
+                v-for="item in dict.getOptionUnRef('sys_notice_type')"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              />
+            </n-space>
+          </n-checkbox-group>
+        </n-form-item>
+
+        <n-form-item label="描述" path="description">
+          <n-input type="textarea" placeholder="描述" v-model:value="params.description" />
+        </n-form-item>
+
+        <n-form-item label="内容" path="content">
+          <Editor style="height: 450px" v-model:value="params.content" />
+        </n-form-item>
+
+        <n-form-item label="单图" path="image">
+          <UploadImage v-model:value="params.image" />
+        </n-form-item>
+
+        <n-form-item label="多图" path="images">
+          <FileChooser :maxNumber="10" v-model:value="params.images" fileType="image" />
+        </n-form-item>
+
+        <n-form-item label="单附件" path="attachfile">
+          <FileChooser v-model:value="params.attachfile" />
+        </n-form-item>
+
+        <n-form-item label="多附件" path="attachfiles">
+          <UploadFile :maxNumber="10" v-model:value="params.attachfiles" />
+        </n-form-item>
+
+        <n-form-item label="键值对" path="map">
+          <n-dynamic-input
+            v-model:value="params.map"
+            preset="pair"
+            key-placeholder="键名"
+            value-placeholder="键值"
+          />
+        </n-form-item>
+        <n-form-item label="推荐星" path="star">
+          <n-rate allow-half :default-value="params.star" :on-update:value="updateStar" />
+        </n-form-item>
+
+        <n-form-item label="价格" path="price">
+          <n-input-number
+            placeholder="请输入价格"
+            clearable
+            v-model:value="params.price"
+            :precision="2"
+          />
+        </n-form-item>
+
+        <n-form-item label="活动时间" path="activityAt">
+          <DatePicker v-model:formValue="params.activityAt" type="date" />
+        </n-form-item>
+
+        <n-form-item label="开放时间" path="startAt">
+          <DatePicker
+            v-model:startValue="params.startAt"
+            v-model:endValue="params.endAt"
+            type="datetimerange"
+          />
+        </n-form-item>
+
+        <n-form-item label="用户渠道" path="channel">
+          <n-select
+            v-model:value="params.channel"
+            :options="dict.getOptionUnRef('sys_user_channel')"
+          />
+        </n-form-item>
+
+        <n-form-item label="所在城市" path="cityId">
+          <CitySelector v-model:value="params.cityId" />
+        </n-form-item>
+
+        <n-form-item label="用户爱好" path="hobby">
+          <n-select
+            multiple
+            v-model:value="params.hobby"
+            :options="dict.getOptionUnRef('sys_user_hobby')"
+          />
+        </n-form-item>
+
+        <n-form-item label="QQ" path="qq">
+          <n-input placeholder="请输入QQ号" v-model:value="params.qq" />
+        </n-form-item>
+
+        <n-form-item label="邮箱" path="email">
+          <n-input placeholder="请输入邮箱地址" v-model:value="params.email" />
+        </n-form-item>
+
+        <n-form-item label="手机号" path="mobile">
+          <n-input placeholder="请输入手机号" v-model:value="params.mobile" />
+        </n-form-item>
+
+        <n-form-item label="排序" path="sort">
+          <n-input-number v-model:value="params.sort" clearable />
+        </n-form-item>
+
+        <n-form-item label="状态" path="status">
+          <n-radio-group v-model:value="params.status" name="status">
+            <n-radio-button
+              v-for="status in dict.getOptionUnRef('sys_normal_disable')"
+              :key="Number(status.value)"
+              :value="Number(status.value)"
+              :label="status.label"
+            />
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="备注" path="remark">
+          <n-input type="textarea" placeholder="请输入备注" v-model:value="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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import { rules, State, newState } from './model';
+  import { Edit, MaxSort } from '@/api/addons/hgexample/table';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import DatePicker from '@/components/DatePicker/datePicker.vue';
+  import Editor from '@/components/Editor/editor.vue';
+  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';
+  import { useDictStore } from '@/store/modules/dict';
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const params = computed(() => {
+    return props.formParams;
+  });
+
+  const dict = useDictStore();
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(params.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            isShowModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function updateStar(num) {
+    params.value.star = num;
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  watch(
+    () => params.value,
+    (value) => {
+      if (value.id === 0) {
+        MaxSort().then((res) => {
+          params.value.sort = res.sort;
+        });
+      }
+    }
+  );
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/addons/hgexample/table/index.vue b/web/src/views/addons/hgexample/table/index.vue
new file mode 100644
index 0000000..e5e8fc2
--- /dev/null
+++ b/web/src/views/addons/hgexample/table/index.vue
@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="表格例子">
+        这里提供了一些常用的普通表格组件的用法和表单组件的例子，你可能会需要
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm
+        @register="register"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        :checked-row-keys="checkedIds"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+        size="small"
+        @update:sorter="handleUpdateSorter"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable" class="min-left-space">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加
+          </n-button>
+          <n-button
+            type="error"
+            @click="handleBatchDelete"
+            :disabled="batchDeleteDisabled"
+            class="min-left-space"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button type="primary" @click="handleExport" class="min-left-space">
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit
+      @reload-table="reloadTable"
+      @update-show-modal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formParams"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { useSorter } from '@/hooks/common';
+  import { Delete, List, Status, Export } from '@/api/addons/hgexample/table';
+  import { State, columns, schemas, newState, loadOptions } from './model';
+  import { DeleteOutlined, PlusOutlined, ExportOutlined } from '@vicons/antd';
+  import { useRouter } from 'vue-router';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const dict = useDictStore();
+  const router = useRouter();
+  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 actionRef = ref();
+  const { updateSorter: handleUpdateSorter, sortStatesRef: sortStatesRef } = useSorter(reloadTable);
+
+  const actionColumn = reactive({
+    width: 300,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '禁用',
+            onClick: handleStatus.bind(null, record, 2),
+            ifShow: () => {
+              return record.status === 1;
+            },
+          },
+          {
+            label: '启用',
+            onClick: handleStatus.bind(null, record, 1),
+            ifShow: () => {
+              return record.status === 2;
+            },
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+        dropDownActions: [
+          {
+            label: '查看详情',
+            key: 'view',
+          },
+          {
+            label: '更多按钮1',
+            key: 'test1',
+            // 根据业务控制是否显示: 非enable状态的不显示启用按钮
+            ifShow: () => {
+              return true;
+            },
+          },
+          {
+            label: '更多按钮2',
+            key: 'test2',
+            ifShow: () => {
+              return true;
+            },
+          },
+        ],
+        select: (key) => {
+          if (key === 'view') {
+            return handleView(record);
+          }
+          message.info(`您点击了，${key} 按钮`);
+        },
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  const loadDataTable = async (res) => {
+    return await List({
+      ...searchFormRef.value?.formModel,
+      ...{ sorters: sortStatesRef.value },
+      ...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 handleView(record: Recordable) {
+    router.push({ name: 'table_view', params: { id: record.id } });
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = newState(record as State);
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleBatchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          batchDeleteDisabled.value = true;
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
+      message.success('设为' + dict.getLabel('sys_normal_disable', status) + '成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/table/model.ts b/web/src/views/addons/hgexample/table/model.ts
new file mode 100644
index 0000000..f3f9184
--- /dev/null
+++ b/web/src/views/addons/hgexample/table/model.ts
@@ -0,0 +1,466 @@
+import { h, ref } from 'vue';
+import { NAvatar, NImage, NTag, NSwitch, NRate } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { Switch } from '@/api/addons/hgexample/table';
+import { isNullObject } from '@/utils/is';
+import { getFileExt } from '@/utils/urlUtils';
+import { defRangeShortcuts, defShortcuts, formatToDate } from '@/utils/dateUtil';
+import { validate } from '@/utils/validateUtil';
+import { fallbackSrc } from '@/utils/hotgo';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag } from '@/utils';
+import type { FormRules } from 'naive-ui/es/form/src/interface';
+
+const dict = useDictStore();
+const $message = window['$message'];
+
+export interface State {
+  id: number;
+  memberId: number;
+  categoryId: number;
+  flag: number[] | null;
+  title: string;
+  content: string;
+  image: string;
+  images: string[] | null;
+  attachfile: string;
+  attachfiles: string[] | null;
+  map: unknown[] | null;
+  star: number;
+  description: string;
+  price: number;
+  views: number;
+  activityAt: string;
+  startAt: null;
+  endAt: null;
+  switch: number;
+  sort: number;
+  avatar: string;
+  sex: number;
+  qq: string;
+  email: string;
+  mobile: string;
+  channel: number;
+  cityId: number;
+  hobby: string[] | null;
+  pid: number;
+  level: number;
+  tree: string;
+  remark: string;
+  status: number;
+  createdBy: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const defaultState = {
+  id: 0,
+  memberId: 0,
+  categoryId: 0,
+  flag: [1],
+  title: '',
+  content: '',
+  image: '',
+  images: null,
+  attachfile: '',
+  attachfiles: null,
+  map: null,
+  star: 0,
+  description: '',
+  price: 0,
+  views: 0,
+  activityAt: '',
+  startAt: null,
+  endAt: null,
+  switch: 0,
+  sort: 0,
+  avatar: '',
+  sex: 0,
+  qq: '',
+  email: '',
+  mobile: '',
+  channel: 0,
+  cityId: 0,
+  hobby: null,
+  pid: 0,
+  level: 1,
+  tree: '',
+  remark: '',
+  status: 1,
+  createdBy: 0,
+  createdAt: '',
+  updatedAt: '',
+};
+
+export function newState(state: State | null): State {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(defaultState);
+}
+
+export const rules: FormRules = {
+  title: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入标题',
+  },
+  price: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.amount,
+  },
+  qq: {
+    required: false,
+    trigger: ['blur', 'input'],
+    validator: validate.qq,
+  },
+  email: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.email,
+  },
+  mobile: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.phone,
+  },
+};
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入标题', trigger: ['blur'] }],
+  },
+  {
+    field: 'content',
+    component: 'NInput',
+    label: '内容',
+    componentProps: {
+      placeholder: '请输入内容关键词',
+      showButton: false,
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'price',
+    labelMessage: '我是自定义提示',
+    component: 'NInput',
+    label: '价格',
+    componentProps: {
+      pair: true,
+      separator: '-',
+      clearable: true,
+      placeholder: ['从', '到'],
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'activityAt',
+    component: 'NDatePicker',
+    label: '活动时间',
+    componentProps: {
+      type: 'date',
+      clearable: true,
+      shortcuts: defShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'flag',
+    component: 'NCheckbox',
+    label: '标签',
+    giProps: {
+      span: 1,
+    },
+    componentProps: {
+      placeholder: '请选择标签',
+      options: dict.getOption('sys_notice_type'),
+      onUpdateChecked: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'switch',
+    component: 'NRadioGroup',
+    label: '开关',
+    giProps: {
+      //span: 24,
+    },
+    componentProps: {
+      options: dict.getOption('sys_switch'),
+      onUpdateChecked: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'hobby',
+    component: 'NSelect',
+    label: '爱好',
+    defaultValue: null,
+    componentProps: {
+      multiple: true,
+      placeholder: '请选择爱好',
+      options: dict.getOption('sys_user_hobby'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择类型',
+      options: dict.getOption('sys_normal_disable'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const columns = [
+  {
+    title: 'ID',
+    key: 'id',
+    sorter: true, // 单列排序
+  },
+  {
+    title: '标题',
+    key: 'title',
+    render(row) {
+      return row.title;
+    },
+    sorter: {
+      multiple: 1, // 为多列排序的优先级，越高优先级越高
+    },
+  },
+  {
+    title: '标签',
+    key: 'flag',
+    render(row) {
+      if (isNullObject(row.flag)) {
+        return ``;
+      }
+      return row.flag.map((tagKey) => {
+        return renderOptionTag('sys_notice_type', tagKey);
+      });
+    },
+  },
+  {
+    title: '单图',
+    key: 'image',
+    render(row) {
+      return h(NImage, {
+        width: 32,
+        height: 32,
+        src: row.image,
+        fallbackSrc: fallbackSrc(),
+        style: {
+          width: '32px',
+          height: '32px',
+          'max-width': '100%',
+          'max-height': '100%',
+        },
+      });
+    },
+  },
+  {
+    title: '多图',
+    key: 'images',
+    render(row) {
+      if (isNullObject(row.images)) {
+        return ``;
+      }
+      return row.images.map((image) => {
+        return h(NImage, {
+          width: 32,
+          height: 32,
+          src: image,
+          fallbackSrc: fallbackSrc(),
+          style: {
+            width: '32px',
+            height: '32px',
+            'max-width': '100%',
+            'max-height': '100%',
+            'margin-left': '2px',
+          },
+        });
+      });
+    },
+  },
+  {
+    title: '附件',
+    key: 'attachfile',
+    render(row) {
+      if (row.attachfile === '') {
+        return ``;
+      }
+      return h(
+        NAvatar,
+        {
+          size: 'small',
+        },
+        {
+          default: () => getFileExt(row.attachfile),
+        }
+      );
+    },
+  },
+  {
+    title: '多附件',
+    key: 'attachfiles',
+    render(row) {
+      if (isNullObject(row.attachfiles)) {
+        return ``;
+      }
+      return row.attachfiles.map((attachfile) => {
+        return h(
+          NAvatar,
+          {
+            size: 'small',
+            style: {
+              'margin-left': '2px',
+            },
+          },
+          {
+            default: () => getFileExt(attachfile),
+          }
+        );
+      });
+    },
+  },
+  {
+    title: '推荐星',
+    key: 'star',
+    // width: 180,
+    render(row) {
+      return h(NRate, {
+        allowHalf: true,
+        readonly: true,
+        defaultValue: row.star,
+      });
+    },
+  },
+  {
+    title: '描述',
+    key: 'description',
+  },
+  {
+    title: '价格',
+    key: 'price',
+    sorter: {
+      multiple: 2, // 为多列排序的优先级，越高优先级越高
+    },
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'success',
+          bordered: false,
+        },
+        {
+          default: () => row.price.toFixed(2),
+        }
+      );
+    },
+  },
+  {
+    title: '开关',
+    key: 'switch',
+    width: 100,
+    render(row) {
+      return h(NSwitch, {
+        value: row.switch === 1,
+        checked: '开启',
+        unchecked: '关闭',
+        onUpdateValue: function (e) {
+          row.switch = e ? 1 : 2;
+          Switch({ id: row.id, key: 'switch', value: row.switch }).then((_res) => {
+            $message.success('操作成功');
+          });
+        },
+      });
+    },
+  },
+  // {
+  //   title: '排序',
+  //   key: 'sort',
+  // },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+  {
+    title: '爱好',
+    key: 'hobby',
+    render(row) {
+      if (isNullObject(row.hobby)) {
+        return ``;
+      }
+      return row.hobby.map((tagKey) => {
+        return renderOptionTag('sys_user_hobby', tagKey);
+      });
+    },
+  },
+  {
+    title: '活动时间',
+    key: 'activityAt',
+    render(row) {
+      return formatToDate(row.activityAt);
+    },
+    sorter: {
+      multiple: 3, // 为多列排序的优先级，越高优先级越高
+    },
+  },
+];
+
+export function loadOptions() {
+  dict.loadOptions([
+    'sys_normal_disable',
+    'sys_user_sex',
+    'sys_notice_type',
+    'sys_switch',
+    'sys_user_hobby',
+    'sys_user_channel',
+  ]);
+}
diff --git a/web/src/views/addons/hgexample/table/view.vue b/web/src/views/addons/hgexample/table/view.vue
new file mode 100644
index 0000000..2ce3618
--- /dev/null
+++ b/web/src/views/addons/hgexample/table/view.vue
@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="基础详情"> 基础详情，有时也用于显示只读信息。 </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
+      <n-descriptions label-placement="left" class="py-2" :column="4">
+        <n-descriptions-item>
+          <template #label>分类ID</template>
+          {{ formValue.categoryId }}
+        </n-descriptions-item>
+
+        <n-descriptions-item label="标签">
+          <template v-for="(item, key) in formValue?.flag" :key="key">
+            <n-tag
+              :type="dict.getType('sys_notice_type', item)"
+              size="small"
+              class="min-left-space"
+              >{{ dict.getLabel('sys_notice_type', item) }}</n-tag
+            >
+          </template>
+        </n-descriptions-item>
+        <n-descriptions-item label="标题">{{ formValue.title }}</n-descriptions-item>
+        <n-descriptions-item label="描述">{{ formValue.description }}</n-descriptions-item>
+        <n-descriptions-item label="推荐星"
+          ><n-rate readonly :default-value="formValue.star"
+        /></n-descriptions-item>
+        <n-descriptions-item label="价格">{{ formValue.price }}</n-descriptions-item>
+        <n-descriptions-item label="浏览次数">{{ formValue.views }}</n-descriptions-item>
+        <n-descriptions-item label="活动时间">{{ formValue.activityAt }}</n-descriptions-item>
+        <n-descriptions-item label="开关">
+          <n-switch v-model:value="formValue.switch" :unchecked-value="2" :checked-value="1"
+        /></n-descriptions-item>
+        <n-descriptions-item label="创建人ID">{{ formValue.createdBy }} </n-descriptions-item>
+        <n-descriptions-item label="创建时间">{{ formValue.createdAt }} </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
+      <n-descriptions label-placement="top" title="内容" class="py-2" :column="1">
+        <n-descriptions-item><span v-html="formValue.content"></span></n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
+      <n-descriptions label-placement="top" title="单图" class="py-2" :column="1">
+        <n-descriptions-item>
+          <n-image style="margin-left: 10px; height: 100px; width: 100px" :src="formValue.image"
+        /></n-descriptions-item>
+      </n-descriptions>
+
+      <n-descriptions label-placement="top" title="多图" class="py-2" :column="1">
+        <n-descriptions-item>
+          <n-image-group>
+            <n-space>
+              <span v-for="(item, key) in formValue?.images" :key="key">
+                <n-image style="margin-left: 10px; height: 100px; width: 100px" :src="item" />
+              </span>
+            </n-space>
+          </n-image-group>
+        </n-descriptions-item>
+      </n-descriptions>
+
+      <n-descriptions label-placement="top" title="附件" class="py-2" :column="1">
+        <n-descriptions-item>
+          <div
+            class="upload-card"
+            v-show="formValue.attachfile !== ''"
+            @click="download(formValue.attachfile)"
+          >
+            <div class="upload-card-item" style="height: 100px; width: 100px">
+              <div class="upload-card-item-info">
+                <div class="img-box">
+                  <n-avatar :style="fileAvatarCSS">{{ getFileExt(formValue.attachfile) }}</n-avatar>
+                </div>
+              </div>
+            </div>
+          </div>
+        </n-descriptions-item>
+      </n-descriptions>
+
+      <n-descriptions label-placement="top" title="多附件" class="py-2" :column="1">
+        <n-descriptions-item>
+          <div class="upload-card">
+            <n-space style="gap: 0px 0px">
+              <div
+                class="upload-card-item"
+                style="height: 100px; width: 100px"
+                v-for="(item, key) in formValue.attachfiles"
+                :key="key"
+              >
+                <div class="upload-card-item-info">
+                  <div class="img-box">
+                    <n-avatar :style="fileAvatarCSS" @click="download(item)">{{
+                      getFileExt(item)
+                    }}</n-avatar>
+                  </div>
+                </div>
+              </div>
+            </n-space>
+          </div>
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted, ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useMessage } from 'naive-ui';
+  import { View } from '@/api/addons/hgexample/table';
+  import { newState } from './model';
+  import { getFileExt } from '@/utils/urlUtils';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const dict = useDictStore();
+  const message = useMessage();
+  const router = useRouter();
+  const id = Number(router.currentRoute.value.params.id);
+  const formValue = ref(newState(null));
+  const fileAvatarCSS = computed(() => {
+    return {
+      '--n-merged-size': `var(--n-avatar-size-override, 80px)`,
+      '--n-font-size': `18px`,
+    };
+  });
+
+  //下载
+  function download(url: string) {
+    window.open(url);
+  }
+
+  onMounted(async () => {
+    if (id < 1) {
+      message.error('ID不正确，请检查！');
+      return;
+    }
+    formValue.value = await View({ id: id });
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/tenantOrder/alert.vue b/web/src/views/addons/hgexample/tenantOrder/alert.vue
new file mode 100644
index 0000000..e04b54e
--- /dev/null
+++ b/web/src/views/addons/hgexample/tenantOrder/alert.vue
@@ -0,0 +1,76 @@
+<template>
+  <n-alert :show-icon="false" title="说明">
+    <n-p
+      >这里主要演示多租户业务下，不同用户身份如何在同一页面下展示不同的表格功能和字段数据，以及添加/编辑购买订单时服务端如何自动维护多租户关系</n-p
+    >
+    <n-p style="font-weight: 600">不同身份的测试账号</n-p>
+    <n-table :bordered="false" :single-line="false" size="small">
+      <thead>
+        <tr>
+          <th class="table-center">身份</th>
+          <th class="table-center">ID</th>
+          <th class="table-center">账号</th>
+          <th class="table-center">密码</th>
+          <th>身份描述</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="account in accounts" :key="account.id">
+          <td class="table-center">{{ account.type }}</td>
+          <td class="table-center">{{ account.id }}</td>
+          <td class="table-center">{{ account.username }}</td>
+          <td class="table-center">{{ account.password }}</td>
+          <td>{{ account.dc }}</td>
+        </tr>
+      </tbody>
+    </n-table>
+  </n-alert>
+</template>
+
+<script setup lang="ts">
+  interface Account {
+    type: string;
+    id: number;
+    username: string;
+    password: string;
+    dc: string;
+  }
+
+  const accounts: Account[] = [
+    {
+      type: '公司',
+      id: 1,
+      username: 'admin',
+      password: '123456',
+      dc: '可见全部数据。管理整个平台，包括商户和用户账户',
+    },
+    {
+      type: '租户',
+      id: 8,
+      username: 'ameng',
+      password: '123456',
+      dc: '可见自己下面的商户和用户数据。多租户系统中顶层实体，有自己的多个商户、用户、产品、订单等',
+    },
+    {
+      type: '商户',
+      id: 11,
+      username: 'abai',
+      password: '123456',
+      dc: '可见自己下面的用户数据。受租户的监管和管理，可以独立经营的实体，提供产品或服务，管理自己的业务，包括库存管理、订单处理、结算等',
+    },
+    {
+      type: '用户',
+      id: 12,
+      username: 'asong',
+      password: '123456',
+      dc: '只能看到自己数据。真正购买产品或享受服务的人，与商户互动，管理个人信息等个性化功能',
+    },
+  ];
+</script>
+
+<style scoped lang="less">
+  .table-center {
+    text-align: center;
+    min-width: 80px;
+  }
+</style>
diff --git a/web/src/views/addons/hgexample/tenantOrder/edit.vue b/web/src/views/addons/hgexample/tenantOrder/edit.vue
new file mode 100644
index 0000000..82e9b08
--- /dev/null
+++ b/web/src/views/addons/hgexample/tenantOrder/edit.vue
@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑购买订单 #' + formValue.id : '添加购买订单'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            ref="formRef"
+            :model="formValue"
+            :rules="rules"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
+              <n-gi span="1" v-if="userStore.isCompanyDept">
+                <n-form-item label="租户ID" path="tenantId">
+                  <n-input placeholder="请输入租户ID" v-model:value="formValue.tenantId" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1" v-if="userStore.isCompanyDept || userStore.isTenantDept">
+                <n-form-item label="商户ID" path="merchantId">
+                  <n-input placeholder="请输入商户ID" v-model:value="formValue.merchantId" />
+                </n-form-item>
+              </n-gi>
+              <n-gi
+                span="1"
+                v-if="userStore.isCompanyDept || userStore.isTenantDept || userStore.isMerchantDept"
+              >
+                <n-form-item label="用户ID" path="userId">
+                  <n-input placeholder="请输入用户ID" v-model:value="formValue.userId" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="购买产品" path="productName">
+                  <n-input placeholder="请输入购买产品" v-model:value="formValue.productName" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="关联订单号" path="orderSn">
+                  <n-input placeholder="请输入关联订单号" v-model:value="formValue.orderSn" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="充值金额" path="money">
+                  <n-input-group>
+                    <n-input-number
+                      :min="1"
+                      :show-button="false"
+                      style="width: 100%"
+                      placeholder="请输入充值金额"
+                      v-model:value="formValue.money"
+                    />
+                    <n-input-group-label>元</n-input-group-label>
+                  </n-input-group>
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="备注" path="remark">
+                  <n-input placeholder="请输入备注" v-model:value="formValue.remark" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="支付状态" path="status">
+                  <n-select
+                    v-model:value="formValue.status"
+                    :options="dict.getOptionUnRef('payStatus')"
+                  />
+                </n-form-item>
+              </n-gi>
+            </n-grid>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm"> 取消 </n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 确定 </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { Edit, View } from '@/api/addons/hgexample/tenantOrder';
+  import { State, newState, rules } from './model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { useUserStore } from '@/store/modules/user';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const emit = defineEmits(['reloadTable']);
+  const dict = useDictStore();
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const userStore = useUserStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(840);
+  });
+
+  function openModal(state: State) {
+    showModal.value = true;
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+
+      return;
+    }
+
+    // 编辑
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formValue.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            closeForm();
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/addons/hgexample/tenantOrder/index.vue b/web/src/views/addons/hgexample/tenantOrder/index.vue
new file mode 100644
index 0000000..d46f580
--- /dev/null
+++ b/web/src/views/addons/hgexample/tenantOrder/index.vue
@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="多租户功能演示">
+        <Alert />
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm
+        ref="searchFormRef"
+        @register="register"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+      <BasicTable
+        ref="actionRef"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        :actionColumn="actionColumn"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button
+            type="primary"
+            @click="addTable"
+            class="min-left-space"
+            v-if="hasPermission(['/hgexample/tenantOrder/edit'])"
+          >
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加购买订单
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit ref="editRef" @reloadTable="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { List, Delete } from '@/api/addons/hgexample/tenantOrder';
+  import { PlusOutlined } from '@vicons/antd';
+  import { columns, schemas, loadOptions } from './model';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+  import Alert from './alert.vue';
+
+  const dialog = useDialog();
+  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+
+  const actionColumn = reactive({
+    width: 144,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/hgexample/tenantOrder/edit'],
+          },
+
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/hgexample/tenantOrder/delete'],
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  // 加载表格数据
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  // 重新加载表格数据
+  function reloadTable() {
+    actionRef.value?.reload();
+  }
+
+  // 添加数据
+  function addTable() {
+    editRef.value.openModal(null);
+  }
+
+  // 编辑数据
+  function handleEdit(record: Recordable) {
+    editRef.value.openModal(record);
+  }
+
+  // 单个删除
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/tenantOrder/model.ts b/web/src/views/addons/hgexample/tenantOrder/model.ts
new file mode 100644
index 0000000..9e4651b
--- /dev/null
+++ b/web/src/views/addons/hgexample/tenantOrder/model.ts
@@ -0,0 +1,212 @@
+import { ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { useUserStore } from '@/store/modules/user';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag } from '@/utils';
+import type { FormRules } from 'naive-ui/es/form/src/interface';
+
+const dict = useDictStore();
+const userStore = useUserStore();
+
+export class State {
+  public id = 0; // 主键
+  public tenantId = null; // 租户ID
+  public merchantId = null; // 商户ID
+  public userId = null; // 用户ID
+  public productName = ''; // 购买产品
+  public orderSn = ''; // 关联订单号
+  public money = null; // 充值金额
+  public remark = ''; // 备注
+  public status = 1; // 订单状态
+  public createdAt = ''; // 创建时间
+  public updatedAt = ''; // 修改时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+export const rules: FormRules = {
+  money: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'number',
+    message: '请输入充值金额',
+  },
+};
+
+// 表格搜索表单
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'tenantId',
+    component: 'NInput',
+    label: '租户ID',
+    componentProps: {
+      placeholder: '请输入租户ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    ifShow: () => {
+      return userStore.isCompanyDept;
+    },
+  },
+  {
+    field: 'merchantId',
+    component: 'NInput',
+    label: '商户ID',
+    componentProps: {
+      placeholder: '请输入商户ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    ifShow: () => {
+      return userStore.isCompanyDept || userStore.isTenantDept;
+    },
+  },
+  {
+    field: 'userId',
+    component: 'NInput',
+    label: '用户ID',
+    componentProps: {
+      placeholder: '请输入用户ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    ifShow: () => {
+      return userStore.isCompanyDept || userStore.isTenantDept || userStore.isMerchantDept;
+    },
+  },
+  {
+    field: 'orderSn',
+    component: 'NInput',
+    label: '订单号',
+    componentProps: {
+      placeholder: '请输入订单号',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '订单状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择订单状态',
+      options: [],
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+// 表格列
+export const columns = [
+  {
+    title: '订单ID',
+    key: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: '租户ID',
+    key: 'tenantId',
+    align: 'left',
+    width: 100,
+    ifShow: () => {
+      return userStore.isCompanyDept;
+    },
+  },
+  {
+    title: '商户ID',
+    key: 'merchantId',
+    align: 'left',
+    width: 100,
+    ifShow: () => {
+      return userStore.isCompanyDept || userStore.isTenantDept;
+    },
+  },
+  {
+    title: '用户ID',
+    key: 'userId',
+    align: 'left',
+    width: 100,
+    ifShow: () => {
+      return userStore.isCompanyDept || userStore.isTenantDept || userStore.isMerchantDept;
+    },
+  },
+  {
+    title: '购买产品',
+    key: 'productName',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: '订单号',
+    key: 'orderSn',
+    align: 'left',
+    width: 200,
+  },
+  {
+    title: '充值金额',
+    key: 'money',
+    align: 'left',
+    width: 100,
+    render(row) {
+      return row.money + ' 元';
+    },
+  },
+  {
+    title: '订单状态',
+    key: 'status',
+    align: 'left',
+    width: 100,
+    render(row) {
+      return renderOptionTag('payStatus', row.status);
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    align: 'left',
+    width: 180,
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['payStatus']);
+}
diff --git a/web/src/views/addons/hgexample/treeTable/edit.vue b/web/src/views/addons/hgexample/treeTable/edit.vue
new file mode 100644
index 0000000..cb1f134
--- /dev/null
+++ b/web/src/views/addons/hgexample/treeTable/edit.vue
@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="isShowModal"
+      :show-icon="false"
+      preset="dialog"
+      :title="params?.id > 0 ? '编辑 #' + params?.id : '添加'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-form
+        :model="params"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-form-item label="上级" path="pid">
+          <n-tree-select
+            :options="optionTreeData"
+            :default-value="params.pid"
+            v-model:value="params.pid"
+          />
+        </n-form-item>
+
+        <n-form-item label="标题" path="title">
+          <n-input placeholder="请输入标题" v-model:value="params.title" />
+        </n-form-item>
+
+        <n-form-item label="分类ID" path="categoryId">
+          <n-input-number placeholder="请输入分类ID" v-model:value="params.categoryId" />
+        </n-form-item>
+
+        <n-form-item label="标签" path="flag">
+          <n-checkbox-group v-model:value="params.flag">
+            <n-space>
+              <n-checkbox
+                v-for="item in dict.getOptionUnRef('sys_notice_type')"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              />
+            </n-space>
+          </n-checkbox-group>
+        </n-form-item>
+
+        <n-form-item label="描述" path="description">
+          <n-input type="textarea" placeholder="描述" v-model:value="params.description" />
+        </n-form-item>
+
+        <n-form-item label="内容" path="content">
+          <Editor style="height: 450px" v-model:value="params.content" />
+        </n-form-item>
+
+        <n-form-item label="单图" path="image">
+          <UploadImage v-model:value="params.image" />
+        </n-form-item>
+
+        <n-form-item label="多图" path="images">
+          <FileChooser :maxNumber="10" v-model:value="params.images" fileType="image" />
+        </n-form-item>
+
+        <n-form-item label="单附件" path="attachfile">
+          <FileChooser v-model:value="params.attachfile" />
+        </n-form-item>
+
+        <n-form-item label="多附件" path="attachfiles">
+          <UploadFile :maxNumber="10" v-model:value="params.attachfiles" />
+        </n-form-item>
+
+        <n-form-item label="键值对" path="map">
+          <n-dynamic-input
+            v-model:value="params.map"
+            preset="pair"
+            key-placeholder="键名"
+            value-placeholder="键值"
+          />
+        </n-form-item>
+        <n-form-item label="推荐星" path="star">
+          <n-rate allow-half :default-value="params.star" :on-update:value="updateStar" />
+        </n-form-item>
+
+        <n-form-item label="价格" path="price">
+          <n-input-number
+            placeholder="请输入价格"
+            clearable
+            v-model:value="params.price"
+            :precision="2"
+          />
+        </n-form-item>
+
+        <n-form-item label="活动时间" path="activityAt">
+          <DatePicker v-model:formValue="params.activityAt" type="date" />
+        </n-form-item>
+
+        <n-form-item label="开放时间" path="startAt">
+          <DatePicker
+            v-model:startValue="params.startAt"
+            v-model:endValue="params.endAt"
+            type="datetimerange"
+          />
+        </n-form-item>
+
+        <n-form-item label="用户渠道" path="channel">
+          <n-select
+            v-model:value="params.channel"
+            :options="dict.getOptionUnRef('sys_user_channel')"
+          />
+        </n-form-item>
+
+        <n-form-item label="所在城市" path="cityId">
+          <CitySelector v-model:value="params.cityId" />
+        </n-form-item>
+
+        <n-form-item label="用户爱好" path="hobby">
+          <n-select
+            multiple
+            v-model:value="params.hobby"
+            :options="dict.getOptionUnRef('sys_user_hobby')"
+          />
+        </n-form-item>
+
+        <n-form-item label="QQ" path="qq">
+          <n-input placeholder="请输入QQ号" v-model:value="params.qq" />
+        </n-form-item>
+
+        <n-form-item label="邮箱" path="email">
+          <n-input placeholder="请输入邮箱地址" v-model:value="params.email" />
+        </n-form-item>
+
+        <n-form-item label="手机号" path="mobile">
+          <n-input placeholder="请输入手机号" v-model:value="params.mobile" />
+        </n-form-item>
+
+        <n-form-item label="排序" path="sort">
+          <n-input-number v-model:value="params.sort" clearable />
+        </n-form-item>
+
+        <n-form-item label="状态" path="status">
+          <n-radio-group v-model:value="params.status" name="status">
+            <n-radio-button
+              v-for="status in dict.getOptionUnRef('sys_normal_disable')"
+              :key="Number(status.value)"
+              :value="Number(status.value)"
+              :label="status.label"
+            />
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="备注" path="remark">
+          <n-input type="textarea" placeholder="请输入备注" v-model:value="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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import { rules, State, newState } from './model';
+  import { Edit, MaxSort } from '@/api/addons/hgexample/treeTable';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import DatePicker from '@/components/DatePicker/datePicker.vue';
+  import Editor from '@/components/Editor/editor.vue';
+  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';
+  import { useDictStore } from '@/store/modules/dict';
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+    optionTreeData: any;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+    optionTreeData: [],
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const params = computed(() => {
+    return props.formParams;
+  });
+
+  const dict = useDictStore();
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(params.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            isShowModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function updateStar(num) {
+    params.value.star = num;
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  watch(
+    () => params.value,
+    (value) => {
+      if (value.id === 0) {
+        MaxSort().then((res) => {
+          params.value.sort = res.sort;
+        });
+      }
+    }
+  );
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/addons/hgexample/treeTable/index.vue b/web/src/views/addons/hgexample/treeTable/index.vue
new file mode 100644
index 0000000..416828d
--- /dev/null
+++ b/web/src/views/addons/hgexample/treeTable/index.vue
@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="表格例子"> 一个树形表格例子 </n-card>
+    </div>
+    <n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12">
+      <n-gi span="1">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-button type="info" icon-placement="left" @click="openCreateDrawer">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <PlusOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                添加
+              </n-button>
+              <n-button
+                type="info"
+                icon-placement="left"
+                @click="openEditDrawer"
+                :disabled="!formParams?.id || formParams?.id < 1"
+              >
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <EditOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                编辑
+              </n-button>
+              <n-button type="error" icon-placement="left" @click="handleDel">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <DeleteOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                删除
+              </n-button>
+              <n-button type="info" icon-placement="left" @click="packHandle">
+                {{ expandedKeys.length ? '收起' : '展开' }}
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <AlignLeftOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+              </n-button>
+            </n-space>
+          </template>
+          <div class="w-full menu">
+            <n-input v-model:value="pattern" placeholder="输入地区名称搜索">
+              <template #suffix>
+                <n-icon size="18" class="cursor-pointer">
+                  <SearchOutlined />
+                </n-icon>
+              </template>
+            </n-input>
+            <div class="py-3 menu-list">
+              <template v-if="loading">
+                <div class="flex items-center justify-center py-4">
+                  <n-spin size="medium" />
+                </div>
+              </template>
+              <template v-else>
+                <n-tree
+                  block-line
+                  cascade
+                  checkable
+                  :virtual-scroll="true"
+                  :pattern="pattern"
+                  :data="treeData"
+                  :expandedKeys="expandedKeys"
+                  style="height: 75vh"
+                  @update:selected-keys="selectedTree"
+                  @update:expanded-keys="onExpandedKeys"
+                />
+              </template>
+            </div>
+          </div>
+        </n-card>
+      </n-gi>
+      <n-gi span="3">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-icon size="18">
+                <FormOutlined />
+              </n-icon>
+              <span>正在编辑 {{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
+              <span style="font-size: 14px">{{
+                treeItemTitle ? '' : '从列表选择一项后，进行编辑'
+              }}</span>
+            </n-space>
+          </template>
+
+          <List
+            :checkedId="checkedId"
+            :optionTreeData="optionTreeData"
+            @reload-table="reloadTable"
+          />
+        </n-card>
+      </n-gi>
+    </n-grid>
+
+    <Edit
+      @reload-table="reloadTable"
+      @update-show-modal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formParams"
+      :optionTreeData="optionTreeData"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, unref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import {
+    AlignLeftOutlined,
+    FormOutlined,
+    PlusOutlined,
+    EditOutlined,
+    SearchOutlined,
+    DeleteOutlined,
+  } from '@vicons/antd';
+  import List from './list.vue';
+  import { Delete, Select } from '@/api/addons/hgexample/treeTable';
+  import Edit from './edit.vue';
+  import { newState, loadOptions } from './model';
+
+  const showModal = ref(false);
+  const message = useMessage();
+  const dialog = useDialog();
+  let treeItemKey = ref([]);
+  let expandedKeys = ref([]);
+  const treeData = ref([]);
+  const loading = ref(true);
+  const treeItemTitle = ref('');
+  const checkedId = ref(0);
+  const pattern = ref('');
+  const optionTreeData = ref<any>([]);
+  const formParams = ref(newState(null));
+
+  function openCreateDrawer() {
+    showModal.value = true;
+    formParams.value = newState(null);
+  }
+
+  function openEditDrawer() {
+    showModal.value = true;
+  }
+
+  function selectedTree(keys, opts) {
+    if (keys.length) {
+      const treeItem = opts[0];
+      treeItemKey.value = keys;
+      treeItemTitle.value = treeItem.label;
+      formParams.value = newState(treeItem);
+      checkedId.value = treeItem.id;
+    } else {
+      treeItemKey.value = [];
+      treeItemTitle.value = '';
+    }
+  }
+
+  function handleDel() {
+    dialog.info({
+      title: '提示',
+      content: `您确定想删除吗?`,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ ...formParams.value }).then(async (_res) => {
+          message.success('操作成功');
+          await reloadTable();
+        });
+      },
+      onNegativeClick: () => {
+        message.error('已取消');
+      },
+    });
+  }
+
+  function packHandle() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
+    }
+  }
+
+  onMounted(async () => {
+    await reloadTable();
+  });
+
+  async function reloadTable() {
+    const treeMenuList = await Select();
+    Object.assign(
+      formParams,
+      treeMenuList.list.map((item) => item.key)
+    );
+    treeData.value = [];
+    optionTreeData.value = [
+      {
+        id: 0,
+        key: 0,
+        label: '根目录',
+        pid: 0,
+        title: '根目录',
+      },
+    ];
+    treeData.value = treeMenuList.list;
+    optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
+    loading.value = false;
+  }
+
+  function onExpandedKeys(keys) {
+    expandedKeys.value = keys;
+  }
+
+  function updateShowModal(value) {
+    showModal.value = value;
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
+</script>
diff --git a/web/src/views/addons/hgexample/treeTable/list.vue b/web/src/views/addons/hgexample/treeTable/list.vue
new file mode 100644
index 0000000..943730e
--- /dev/null
+++ b/web/src/views/addons/hgexample/treeTable/list.vue
@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard">
+      <n-result
+        v-show="checkedId <= 0"
+        status="info"
+        title="提示"
+        description="请选择一个想要编辑的树"
+      />
+
+      <div v-show="checkedId > 0">
+        <BasicForm
+          @register="register"
+          @submit="reloadTable"
+          @reset="reloadTable"
+          @keyup.enter="reloadTable"
+          ref="searchFormRef"
+        >
+          <template #statusSlot="{ model, field }">
+            <n-input v-model:value="model[field]" />
+          </template>
+        </BasicForm>
+
+        <BasicTable
+          :openChecked="true"
+          :columns="columns"
+          :request="loadDataTable"
+          :row-key="(row) => row.id"
+          ref="actionRef"
+          :actionColumn="actionColumn"
+          :checked-row-keys="checkedIds"
+          @update:checked-row-keys="onCheckedRow"
+          :scroll-x="scrollX"
+          :resizeHeightOffset="-10000"
+          size="small"
+          @update:sorter="handleUpdateSorter"
+        >
+          <template #tableTitle>
+            <n-button type="primary" @click="addTable" class="min-left-space">
+              <template #icon>
+                <n-icon>
+                  <PlusOutlined />
+                </n-icon>
+              </template>
+              添加
+            </n-button>
+            <n-button
+              type="error"
+              @click="handleBatchDelete"
+              :disabled="batchDeleteDisabled"
+              class="min-left-space"
+            >
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              批量删除
+            </n-button>
+            <n-button type="primary" @click="handleExport" class="min-left-space">
+              <template #icon>
+                <n-icon>
+                  <ExportOutlined />
+                </n-icon>
+              </template>
+              导出
+            </n-button>
+          </template>
+        </BasicTable>
+      </div>
+    </n-card>
+
+    <Edit
+      @reload-table="reloadTable"
+      @update-show-modal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formParams"
+      :optionTreeData="optionTreeData"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, reactive, ref, watch } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { useSorter } from '@/hooks/common';
+  import { Delete, List, Status, Export } from '@/api/addons/hgexample/treeTable';
+  import { State, columns, schemas, newState } from './model';
+  import { DeleteOutlined, PlusOutlined, ExportOutlined } from '@vicons/antd';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+  import { useDictStore } from '@/store/modules/dict';
+
+  interface Props {
+    checkedId?: number;
+    optionTreeData: any;
+  }
+
+  const props = withDefaults(defineProps<Props>(), { checkedId: 0, optionTreeData: [] });
+  const emit = defineEmits(['reloadTable']);
+  const dict = useDictStore();
+  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 actionRef = ref();
+  const { updateSorter: handleUpdateSorter, sortStatesRef: sortStatesRef } = useSorter(reloadTable);
+  const pid = ref(0);
+
+  const actionColumn = reactive({
+    width: 200,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '禁用',
+            onClick: handleStatus.bind(null, record, 2),
+            ifShow: () => {
+              return record.status === 1;
+            },
+          },
+          {
+            label: '启用',
+            onClick: handleStatus.bind(null, record, 1),
+            ifShow: () => {
+              return record.status === 2;
+            },
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  const loadDataTable = async (res) => {
+    if (pid.value <= 0) {
+      return [];
+    }
+    return await List({
+      ...searchFormRef.value?.formModel,
+      ...{ sorters: sortStatesRef.value },
+      ...{ pid: pid.value },
+      ...res,
+    });
+  };
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = newState(null);
+    formParams.value.pid = pid.value;
+  }
+
+  function updateShowModal(value) {
+    showModal.value = value;
+  }
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    emit('reloadTable');
+    actionRef.value.reload();
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = newState(record as State);
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleBatchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          batchDeleteDisabled.value = true;
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
+      message.success('设为' + dict.getLabel('sys_normal_disable', status) + '成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
+  watch(props, (_newVal, _oldVal) => {
+    if (pid.value === _newVal.checkedId) {
+      return;
+    }
+
+    pid.value = Number(_newVal.checkedId);
+    if (_newVal.checkedId > 0) {
+      reloadTable();
+    }
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/addons/hgexample/treeTable/model.ts b/web/src/views/addons/hgexample/treeTable/model.ts
new file mode 100644
index 0000000..541f471
--- /dev/null
+++ b/web/src/views/addons/hgexample/treeTable/model.ts
@@ -0,0 +1,460 @@
+import { h, ref } from 'vue';
+import { NAvatar, NImage, NTag, NSwitch, NRate } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { Switch } from '@/api/addons/hgexample/table';
+import { isNullObject } from '@/utils/is';
+import { getFileExt } from '@/utils/urlUtils';
+import { defRangeShortcuts, defShortcuts, formatToDate } from '@/utils/dateUtil';
+import { validate } from '@/utils/validateUtil';
+import { fallbackSrc } from '@/utils/hotgo';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag } from '@/utils';
+
+const dict = useDictStore();
+const $message = window['$message'];
+
+export interface State {
+  id: number;
+  memberId: number;
+  categoryId: number;
+  flag: number[] | null;
+  title: string;
+  content: string;
+  image: string;
+  images: string[] | null;
+  attachfile: string;
+  attachfiles: string[] | null;
+  map: any | null;
+  star: number;
+  description: string;
+  price: number;
+  views: number;
+  activityAt: string;
+  startAt: null;
+  endAt: null;
+  switch: number;
+  sort: number;
+  avatar: string;
+  sex: number;
+  qq: string;
+  email: string;
+  mobile: string;
+  channel: number;
+  cityId: number;
+  hobby: string[] | null;
+  pid: number;
+  level: number;
+  tree: string;
+  remark: string;
+  status: number;
+  createdBy: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const defaultState = {
+  id: 0,
+  memberId: 0,
+  categoryId: 0,
+  flag: [1],
+  title: '',
+  content: '',
+  image: '',
+  images: null,
+  attachfile: '',
+  attachfiles: null,
+  map: null,
+  star: 0,
+  description: '',
+  price: 0,
+  views: 0,
+  activityAt: '',
+  startAt: null,
+  endAt: null,
+  switch: 0,
+  sort: 0,
+  avatar: '',
+  sex: 0,
+  qq: '',
+  email: '',
+  mobile: '',
+  channel: 0,
+  cityId: 0,
+  hobby: null,
+  pid: 0,
+  level: 1,
+  tree: '',
+  remark: '',
+  status: 1,
+  createdBy: 0,
+  createdAt: '',
+  updatedAt: '',
+};
+
+export function newState(state: State | null): State {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(defaultState);
+}
+
+export const rules = {
+  title: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入标题',
+  },
+  price: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.amount,
+  },
+  qq: {
+    required: false,
+    trigger: ['blur', 'input'],
+    validator: validate.qq,
+  },
+  email: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.email,
+  },
+  mobile: {
+    required: true,
+    trigger: ['blur', 'input'],
+    validator: validate.phone,
+  },
+};
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入标题', trigger: ['blur'] }],
+  },
+  {
+    field: 'content',
+    component: 'NInput',
+    label: '内容',
+    componentProps: {
+      placeholder: '请输入内容关键词',
+      showButton: false,
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'price',
+    labelMessage: '我是自定义提示',
+    component: 'NInput',
+    label: '价格',
+    componentProps: {
+      pair: true,
+      separator: '-',
+      clearable: true,
+      placeholder: ['从', '到'],
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'activityAt',
+    component: 'NDatePicker',
+    label: '活动时间',
+    componentProps: {
+      type: 'date',
+      clearable: true,
+      shortcuts: defShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'flag',
+    component: 'NCheckbox',
+    label: '标签',
+    giProps: {
+      span: 1,
+    },
+    componentProps: {
+      placeholder: '请选择标签',
+      options: dict.getOption('sys_notice_type'),
+      onUpdateChecked: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'switch',
+    component: 'NRadioGroup',
+    label: '开关',
+    giProps: {
+      //span: 24,
+    },
+    componentProps: {
+      options: dict.getOption('sys_switch'),
+      onUpdateChecked: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'hobby',
+    component: 'NSelect',
+    label: '爱好',
+    defaultValue: null,
+    componentProps: {
+      multiple: true,
+      placeholder: '请选择爱好',
+      options: dict.getOption('sys_user_hobby'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择类型',
+      options: dict.getOption('sys_normal_disable'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const columns = [
+  {
+    title: 'ID',
+    key: 'id',
+    sorter: true, // 单列排序
+  },
+  {
+    title: '标题',
+    key: 'title',
+    render(row) {
+      return row.title;
+    },
+    sorter: {
+      multiple: 1, // 为多列排序的优先级，越高优先级越高
+    },
+  },
+  {
+    title: '标签',
+    key: 'flag',
+    render(row) {
+      if (isNullObject(row.flag)) {
+        return ``;
+      }
+      return row.flag.map((tagKey) => {
+        return renderOptionTag('sys_notice_type', tagKey);
+      });
+    },
+  },
+  {
+    title: '单图',
+    key: 'image',
+    render(row) {
+      return h(NImage, {
+        width: 32,
+        height: 32,
+        src: row.image,
+        fallbackSrc: fallbackSrc(),
+        style: {
+          width: '32px',
+          height: '32px',
+          'max-width': '100%',
+          'max-height': '100%',
+        },
+      });
+    },
+  },
+  {
+    title: '多图',
+    key: 'images',
+    render(row) {
+      if (isNullObject(row.images)) {
+        return ``;
+      }
+      return row.images.map((image) => {
+        return h(NImage, {
+          width: 32,
+          height: 32,
+          src: image,
+          fallbackSrc: fallbackSrc(),
+          style: {
+            width: '32px',
+            height: '32px',
+            'max-width': '100%',
+            'max-height': '100%',
+            'margin-left': '2px',
+          },
+        });
+      });
+    },
+  },
+  {
+    title: '附件',
+    key: 'attachfile',
+    render(row) {
+      if (row.attachfile === '') {
+        return ``;
+      }
+      return h(
+        NAvatar,
+        {
+          size: 'small',
+        },
+        {
+          default: () => getFileExt(row.attachfile),
+        }
+      );
+    },
+  },
+  {
+    title: '多附件',
+    key: 'attachfiles',
+    render(row) {
+      if (isNullObject(row.attachfiles)) {
+        return ``;
+      }
+      return row.attachfiles.map((attachfile) => {
+        return h(
+          NAvatar,
+          {
+            size: 'small',
+            style: {
+              'margin-left': '2px',
+            },
+          },
+          {
+            default: () => getFileExt(attachfile),
+          }
+        );
+      });
+    },
+  },
+  {
+    title: '推荐星',
+    key: 'star',
+    // width: 180,
+    render(row) {
+      return h(NRate, {
+        allowHalf: true,
+        readonly: true,
+        defaultValue: row.star,
+      });
+    },
+  },
+  {
+    title: '描述',
+    key: 'description',
+  },
+  {
+    title: '价格',
+    key: 'price',
+    sorter: {
+      multiple: 2, // 为多列排序的优先级，越高优先级越高
+    },
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'success',
+          bordered: false,
+        },
+        {
+          default: () => row.price.toFixed(2),
+        }
+      );
+    },
+  },
+  {
+    title: '开关',
+    key: 'switch',
+    width: 100,
+    render(row) {
+      return h(NSwitch, {
+        value: row.switch === 1,
+        checked: '开启',
+        unchecked: '关闭',
+        onUpdateValue: function (e) {
+          row.switch = e ? 1 : 2;
+          Switch({ id: row.id, key: 'switch', value: row.switch }).then((_res) => {
+            $message.success('操作成功');
+          });
+        },
+      });
+    },
+  },
+  // {
+  //   title: '排序',
+  //   key: 'sort',
+  // },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+  {
+    title: '爱好',
+    key: 'hobby',
+    render(row) {
+      return renderOptionTag('sys_user_hobby', row.hobby);
+    },
+  },
+  {
+    title: '活动时间',
+    key: 'activityAt',
+    render(row) {
+      return formatToDate(row.activityAt);
+    },
+    sorter: {
+      multiple: 3, // 为多列排序的优先级，越高优先级越高
+    },
+  },
+];
+
+export function loadOptions() {
+  dict.loadOptions([
+    'sys_normal_disable',
+    'sys_user_sex',
+    'sys_notice_type',
+    'sys_switch',
+    'sys_user_hobby',
+    'sys_user_channel',
+  ]);
+}
diff --git a/web/src/views/apply/attachment/columns.ts b/web/src/views/apply/attachment/columns.ts
new file mode 100644
index 0000000..ead166c
--- /dev/null
+++ b/web/src/views/apply/attachment/columns.ts
@@ -0,0 +1,171 @@
+import { h, ref } from 'vue';
+import { NAvatar, NImage } from 'naive-ui';
+import { getFileExt } from '@/utils/urlUtils';
+import { FormSchema } from '@/components/Form';
+import { fallbackSrc } from '@/utils/hotgo';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag } from '@/utils';
+
+const dict = useDictStore();
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'drive',
+    component: 'NSelect',
+    label: '上传驱动',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择上传驱动',
+      options: dict.getOption('config_upload_drive'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'kind',
+    component: 'NSelect',
+    label: '上传类型',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择上传类型',
+      options: dict.getOption('AttachmentKindOption'),
+      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',
+    label: '用户ID',
+    componentProps: {
+      placeholder: '请输入用户ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入用户ID', trigger: ['blur'] }],
+  },
+]);
+
+export const columns = [
+  {
+    title: '附件ID',
+    key: 'id',
+    width: 80,
+  },
+  {
+    title: '应用',
+    key: 'appId',
+    width: 100,
+  },
+  {
+    title: '驱动',
+    key: 'drive',
+    render(row) {
+      return row.drive;
+    },
+    width: 100,
+  },
+  {
+    title: '上传类型',
+    key: 'kind',
+    render(row) {
+      return renderOptionTag('AttachmentKindOption', row.kind);
+    },
+    width: 120,
+  },
+  {
+    title: '文件名称',
+    key: 'name',
+    width: 150,
+  },
+  {
+    title: '文件',
+    key: 'fileUrl',
+    width: 80,
+    render(row) {
+      if (row.fileUrl === '') {
+        return ``;
+      }
+      if (row.kind !== 'image') {
+        return h(
+          NAvatar,
+          {
+            width: '40px',
+            height: '40px',
+            'max-width': '100%',
+            'max-height': '100%',
+          },
+          {
+            default: () => getFileExt(row.fileUrl),
+          }
+        );
+      }
+      return h(NImage, {
+        width: 40,
+        height: 40,
+        src: row.fileUrl,
+        fallbackSrc: fallbackSrc(),
+        style: {
+          width: '40px',
+          height: '40px',
+          'max-width': '100%',
+          'max-height': '100%',
+        },
+      });
+    },
+  },
+  {
+    title: '文件大小',
+    key: 'sizeFormat',
+    width: 100,
+  },
+  {
+    title: '扩展名',
+    key: 'ext',
+    width: 80,
+  },
+  {
+    title: '扩展类型',
+    key: 'mimeType',
+    width: 200,
+  },
+  {
+    title: '上传时间',
+    key: 'updatedAt',
+    width: 180,
+  },
+];
+
+export function loadOptions() {
+  dict.loadOptions(['AttachmentKindOption', 'config_upload_drive']);
+}
diff --git a/web/src/views/apply/attachment/index.vue b/web/src/views/apply/attachment/index.vue
new file mode 100644
index 0000000..a9b6faa
--- /dev/null
+++ b/web/src/views/apply/attachment/index.vue
@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="附件管理">
+      <BasicForm
+        @register="register"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        @keyup.enter="handleSubmit"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-20000"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="handleUpload" class="ml-2">
+            <template #icon>
+              <n-icon>
+                <UploadOutlined />
+              </n-icon>
+            </template>
+            上传文件
+          </n-button>
+          <n-button type="success" @click="handleMultipartUpload" class="ml-2">
+            <template #icon>
+              <n-icon>
+                <FileAddOutlined />
+              </n-icon>
+            </template>
+            上传大文件
+          </n-button>
+          <n-button type="primary" @click="handleUploadImage" class="ml-2">
+            <template #icon>
+              <n-icon>
+                <FileImageOutlined />
+              </n-icon>
+            </template>
+            上传图片
+          </n-button>
+          <n-button type="primary" @click="handleUploadDoc" class="ml-2">
+            <template #icon>
+              <n-icon>
+                <FileWordOutlined />
+              </n-icon>
+            </template>
+            上传文档
+          </n-button>
+          <n-button type="success" @click="showUrlModal" class="ml-2">
+            <template #icon>
+              <n-icon>
+                <FileImageOutlined />
+              </n-icon>
+            </template>
+            链接转图片
+          </n-button>
+          <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled" class="ml-2">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+        </template>
+      </BasicTable>
+    </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" />
+    <MultipartUpload ref="multipartUploadRef" @on-finish="handleFinishCall" />
+    <UrlModal ref="urlModalRef" @reloadTable="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { Delete, List } from '@/api/apply/attachment';
+  import { columns, schemas, loadOptions } from './columns';
+  import {
+    DeleteOutlined,
+    UploadOutlined,
+    FileWordOutlined,
+    FileImageOutlined,
+    FileAddOutlined,
+  } from '@vicons/antd';
+  import FileUpload from '@/components/FileChooser/src/Upload.vue';
+  import MultipartUpload from '@/components/Upload/multipartUpload.vue';
+  import { Attachment } from '@/components/FileChooser/src/model';
+  import UrlModal from './urlModal.vue';
+  import { adaTableScrollX } from '@/utils/hotgo';
+
+  const message = useMessage();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const searchFormRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  const fileUploadRef = ref();
+  const imageUploadRef = ref();
+  const docUploadRef = ref();
+  const multipartUploadRef = ref();
+  const urlModalRef =ref();
+
+  const actionColumn = reactive({
+    width: 132,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '下载',
+            onClick: handleDown.bind(null, record),
+            type: 'default',
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 100,
+    schemas,
+  });
+
+  function handleUpload() {
+    fileUploadRef.value.openModal();
+  }
+
+  function handleUploadImage() {
+    imageUploadRef.value.openModal();
+  }
+
+  function handleUploadDoc() {
+    docUploadRef.value.openModal();
+  }
+
+  function handleMultipartUpload() {
+    multipartUploadRef.value.openModal();
+  }
+
+  const loadDataTable = async (res) => {
+    return await List({ ...res, ...searchFormRef.value?.formModel });
+  };
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleDown(record: Recordable) {
+    window.open(record.fileUrl);
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleSubmit(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleFinishCall(result: Attachment, success: boolean) {
+    if (success) {
+      reloadTable();
+    }
+  }
+
+  function showUrlModal() {
+    urlModalRef.value?.showModal();
+  }
+
+  onMounted(async () => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/apply/attachment/urlModal.vue b/web/src/views/apply/attachment/urlModal.vue
new file mode 100644
index 0000000..2d4b28a
--- /dev/null
+++ b/web/src/views/apply/attachment/urlModal.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="isShowModal"
+      :style="{
+        width: dialogWidth,
+      }"
+      :show-icon="false"
+      preset="dialog"
+      title="链接转图片"
+    >
+      <n-alert type="info"> 将外部图片链接下载并转存至平台的存储驱动中 </n-alert>
+      <n-form
+        :model="formParams"
+        ref="formPacketRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-spin :show="loading" description="请稍候...">
+          <n-form-item label="图片链接" path="url">
+            <n-input v-model:value="formParams.url" />
+          </n-form-item>
+
+          <n-form-item label="预览图片" v-if="formParams.url != ''">
+            <n-image width="150" :src="formParams.url" />
+          </n-form-item>
+        </n-spin>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">关闭</n-button>
+          <n-button type="primary" :loading="formBtnLoading" @click="confirmForm">上传 </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { useMessage } from 'naive-ui';
+  import { ImageTransferStorage } from '@/api/apply/attachment';
+
+  const emit = defineEmits(['reloadTable']);
+  const loading = ref(false);
+  const isShowModal = ref(false);
+  const dialogWidth = ref(adaModalWidth(640));
+  const formBtnLoading = ref(false);
+  const formPacketRef = ref();
+  const message = useMessage();
+  const formParams = ref({
+    url: '',
+  });
+
+  function reloadTable() {
+    emit('reloadTable');
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    ImageTransferStorage(formParams.value)
+      .then((_res) => {
+        message.success('操作成功');
+        setTimeout(() => {
+          reloadTable();
+          closeForm();
+        });
+      })
+      .finally(() => {
+        formBtnLoading.value = false;
+      });
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  function showModal() {
+    isShowModal.value = true;
+    formParams.value.url = '';
+  }
+
+  defineExpose({ showModal });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/apply/notice/columns.ts b/web/src/views/apply/notice/columns.ts
new file mode 100644
index 0000000..1db5345
--- /dev/null
+++ b/web/src/views/apply/notice/columns.ts
@@ -0,0 +1,106 @@
+import { h } from 'vue';
+import { NAvatar, NAvatarGroup, NTooltip } from 'naive-ui';
+import { renderOptionTag } from '@/utils';
+
+export const columns = [
+  {
+    title: 'ID',
+    key: 'id',
+    width: 80,
+  },
+  {
+    title: '消息标题',
+    key: 'title',
+    render(row) {
+      return h('p', { id: 'app' }, [
+        h('div', {
+          innerHTML: '<div style="white-space: pre-wrap">' + row.title + '</div>',
+        }),
+      ]);
+    },
+    width: 280,
+  },
+  {
+    title: '消息类型',
+    key: 'type',
+    render(row) {
+      return renderOptionTag('noticeTypeOptions', row.type);
+    },
+    width: 100,
+  },
+  {
+    title: '标签',
+    key: 'tag',
+    render(row) {
+      return renderOptionTag('noticeTagOptions', row.tag);
+    },
+    width: 100,
+  },
+  {
+    title: '接收人',
+    key: 'receiver',
+    render(row) {
+      if (row.type === 1 || row.type === 2) {
+        return '所有人';
+      }
+      return h(
+        NAvatarGroup,
+        {
+          max: 4,
+          size: 40,
+          options: row.receiverGroup,
+        },
+        {
+          avatar: (column) =>
+            h(NTooltip, null, {
+              trigger: () =>
+                column.option.src !== ''
+                  ? h(NAvatar, {
+                      src: column.option.src,
+                      round: true,
+                      size: 32,
+                      style: {
+                        marginRight: '4px',
+                      },
+                    })
+                  : h(
+                      NAvatar,
+                      {
+                        round: true,
+                        size: 32,
+                        style: {
+                          marginRight: '4px',
+                        },
+                      },
+                      {
+                        default: () => column.option.name?.substring(0, 1) as string,
+                      }
+                    ),
+              default: () => column.option.name,
+            }),
+        }
+      );
+    },
+    width: 180,
+  },
+  {
+    title: '阅读量',
+    key: 'readCount',
+    width: 80,
+  },
+  {
+    title: '排序',
+    key: 'sort',
+    width: 80,
+  },
+  {
+    title: '备注',
+    key: 'remark',
+    width: 150,
+  },
+  {
+    title: '发送时间',
+    key: 'createdAt',
+    width: 180,
+  },
+];
diff --git a/web/src/views/apply/notice/edit.vue b/web/src/views/apply/notice/edit.vue
new file mode 100644
index 0000000..1a1f673
--- /dev/null
+++ b/web/src/views/apply/notice/edit.vue
@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <n-drawer v-model:show="showModal" :width="dialogWidth">
+      <n-drawer-content closable>
+        <template #header>
+          {{
+            formValue.id > 0
+              ? '编辑' + dict.getLabel('noticeTypeOptions', formValue.type) + ' #' + formValue.id
+              : '发送' + dict.getLabel('noticeTypeOptions', formValue.type)
+          }}
+        </template>
+        <n-scrollbar style="max-height: 87vh" class="pr-5">
+          <n-spin :show="loading" description="请稍候...">
+            <n-alert :show-icon="false" type="info">
+              消息发送成功后如果接收人在线会立即收到一条消息通知，编辑已发送的消息不会再次通知
+            </n-alert>
+            <n-form
+              :model="formValue"
+              :rules="rules"
+              ref="formRef"
+              :label-placement="settingStore.isMobile ? 'top' : 'left'"
+              :label-width="80"
+              class="py-4"
+            >
+              <n-form-item label="消息标题" path="title">
+                <n-input placeholder="请输入消息标题" v-model:value="formValue.title" />
+              </n-form-item>
+
+              <n-form-item label="接收人" path="receiver" v-if="formValue.type === 3">
+                <n-select
+                  multiple
+                  :options="options"
+                  :render-label="renderLabel"
+                  :render-tag="renderMultipleSelectTag"
+                  v-model:value="formValue.receiver"
+                  filterable
+                />
+              </n-form-item>
+
+              <n-form-item label="消息内容" path="content">
+                <template v-if="formValue.type === 1">
+                  <n-input
+                    type="textarea"
+                    :autosize="{ minRows: 3, maxRows: 10 }"
+                    placeholder="请输入通知内容"
+                    v-model:value="formValue.content"
+                  />
+                </template>
+                <template v-else>
+                  <Editor style="height: 320px" v-model:value="formValue.content" />
+                </template>
+              </n-form-item>
+
+              <n-grid x-gap="24" :cols="2">
+                <n-gi>
+                  <n-form-item label="标签" path="tag">
+                    <n-select
+                      clearable
+                      placeholder="可以不填"
+                      :render-tag="renderTag"
+                      v-model:value="formValue.tag"
+                      :options="dict.getOptionUnRef('noticeTagOptions')"
+                    />
+                  </n-form-item>
+                </n-gi>
+                <n-gi>
+                  <n-form-item label="排序" path="sort">
+                    <n-input-number style="width: 100%" v-model:value="formValue.sort" clearable />
+                  </n-form-item>
+                </n-gi>
+              </n-grid>
+
+              <n-form-item label="状态" path="status">
+                <n-radio-group v-model:value="formValue.status" name="status">
+                  <n-radio-button
+                    v-for="status in statusOptions"
+                    :key="status.value"
+                    :value="status.value"
+                    :label="status.label"
+                  />
+                </n-radio-group>
+              </n-form-item>
+
+              <n-form-item label="备注" path="remark">
+                <n-input
+                  type="textarea"
+                  placeholder="请输入备注，没有可以不填"
+                  v-model:value="formValue.remark"
+                />
+              </n-form-item>
+            </n-form>
+          </n-spin>
+        </n-scrollbar>
+        <template #footer>
+          <n-space>
+            <n-button @click="closeForm"> 取消 </n-button>
+            <n-button type="primary" :loading="formBtnLoading" @click="confirmForm">
+              立即发送
+            </n-button>
+          </n-space>
+        </template>
+      </n-drawer-content>
+    </n-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useDictStore } from '@/store/modules/dict';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { personOption, renderLabel, renderMultipleSelectTag } from '@/enums/systemMessageEnum';
+  import Editor from '@/components/Editor/editor.vue';
+  import { statusOptions } from '@/enums/optionsiEnum';
+  import { GetMemberOption } from '@/api/org/user';
+  import { MaxSort, EditLetter, EditNotice, EditNotify } from '@/api/apply/notice';
+  import { renderTag } from '@/utils';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { State, newState, rules } from './model';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const dict = useDictStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const options = ref<personOption[]>();
+  const dialogWidth = ref(adaModalWidth(840));
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        switch (formValue.value.type) {
+          case 1:
+            EditNotify(formValue.value).then((_res) => {
+              confirmComplete();
+            });
+            break;
+          case 2:
+            EditNotice(formValue.value).then((_res) => {
+              confirmComplete();
+            });
+            break;
+          case 3:
+            EditLetter(formValue.value).then((_res) => {
+              confirmComplete();
+            });
+            break;
+          default:
+            message.error('公告类型不支持');
+        }
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function confirmComplete() {
+    message.success('操作成功');
+    setTimeout(() => {
+      closeForm();
+      emit('reloadTable');
+    });
+  }
+
+  function getMemberOption() {
+    GetMemberOption().then((res) => {
+      options.value = res;
+    });
+  }
+
+  // 关闭抽屉
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  // 打开抽屉
+  function openModal(state: State, type: number) {
+    showModal.value = true;
+    dialogWidth.value = adaModalWidth(840);
+    getMemberOption();
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+      formValue.value.type = type;
+
+      loading.value = true;
+      MaxSort()
+        .then((res) => {
+          formValue.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+      return;
+    }
+
+    // 编辑
+    formValue.value = newState(state);
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/apply/notice/index.vue b/web/src/views/apply/notice/index.vue
new file mode 100644
index 0000000..4308969
--- /dev/null
+++ b/web/src/views/apply/notice/index.vue
@@ -0,0 +1,244 @@
+<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"
+        @keyup.enter="handleSubmit"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-20000"
+      >
+        <template #tableTitle>
+          <n-button
+            type="warning"
+            @click="addTable(1)"
+            class="min-left-space"
+            v-if="hasPermission(['/notice/editNotify'])"
+          >
+            <template #icon>
+              <n-icon>
+                <NotificationOutlined />
+              </n-icon>
+            </template>
+            发通知
+          </n-button>
+
+          <n-button
+            type="error"
+            @click="addTable(2)"
+            class="min-left-space"
+            v-if="hasPermission(['/notice/editNotice'])"
+          >
+            <template #icon>
+              <n-icon>
+                <BellOutlined />
+              </n-icon>
+            </template>
+            发公告
+          </n-button>
+
+          <n-button
+            type="info"
+            @click="addTable(3)"
+            class="min-left-space"
+            v-if="hasPermission(['/notice/editLetter'])"
+          >
+            <template #icon>
+              <n-icon>
+                <SendOutlined />
+              </n-icon>
+            </template>
+            发私信
+          </n-button>
+
+          <n-button
+            type="error"
+            @click="batchDelete"
+            :disabled="batchDeleteDisabled"
+            class="min-left-space"
+            v-if="hasPermission(['/notice/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit ref="editRef" @reload-table="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { Delete, List, Status } from '@/api/apply/notice';
+  import { BellOutlined, DeleteOutlined, NotificationOutlined, SendOutlined } from '@vicons/antd';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { useDictStore } from '@/store/modules/dict';
+  import { columns } from './columns';
+  import { schemas, loadOptions } from './model';
+  import Edit from './edit.vue';
+
+  const { hasPermission } = usePermission();
+  const message = useMessage();
+  const dict = useDictStore();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+
+  const actionColumn = reactive({
+    width: 200,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '已启用',
+            onClick: handleStatus.bind(null, record, 2),
+            ifShow: () => {
+              return record.status === 1;
+            },
+            auth: ['/notice/status'],
+          },
+          {
+            label: '已禁用',
+            onClick: handleStatus.bind(null, record, 1),
+            ifShow: () => {
+              return record.status === 2;
+            },
+            auth: ['/notice/status'],
+          },
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/notice/edit'],
+            type: 'primary',
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/notice/delete'],
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function addTable(type) {
+    editRef.value.openModal(null, type);
+  }
+
+  const loadDataTable = async (res) => {
+    return await List({ ...res, ...searchFormRef.value?.formModel });
+  };
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleEdit(record: Recordable) {
+    editRef.value.openModal(record, record.type);
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleSubmit(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
+      message.success('操作成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/apply/notice/model.ts b/web/src/views/apply/notice/model.ts
new file mode 100644
index 0000000..a5a1c5f
--- /dev/null
+++ b/web/src/views/apply/notice/model.ts
@@ -0,0 +1,113 @@
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export class State {
+  id: number;
+  title: string;
+  type: number;
+  tag: number = 1;
+  content: string;
+  receiver: number[];
+  remark: string;
+  sort: number;
+  status: number = 1;
+  createdBy: number;
+  updatedBy: number;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  readCount: number;
+  receiverGroup: Receiver[];
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export class Receiver {
+  name: string;
+  src: string;
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+export const rules = {
+  title: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '请输入消息标题',
+  },
+};
+
+// 表格搜索表单
+export const schemas: FormSchema[] = [
+  {
+    field: 'type',
+    component: 'NSelect',
+    label: '消息类型',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择消息类型',
+      options: dict.getOption('noticeTypeOptions'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '消息标题',
+    componentProps: {
+      placeholder: '请输入消息标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ message: '请输入消息标题', trigger: ['blur'] }],
+  },
+  {
+    field: 'content',
+    component: 'NInput',
+    label: '消息内容',
+    componentProps: {
+      placeholder: '请输入消息内容关键词',
+      showButton: false,
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择类型',
+      options: dict.getOption('sys_normal_disable'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable']);
+}
diff --git a/web/src/views/apply/provinces/edit.vue b/web/src/views/apply/provinces/edit.vue
new file mode 100644
index 0000000..955f93b
--- /dev/null
+++ b/web/src/views/apply/provinces/edit.vue
@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="isShowModal"
+      :show-icon="false"
+      preset="dialog"
+      :title="isUpdate ? '编辑 #' + params?.id : '添加'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-form
+        :model="params"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="80"
+        class="py-4"
+      >
+        <n-form-item label="上级地区" path="pid">
+          <n-tree-select :options="optionTreeData" :default-value="params.pid" />
+        </n-form-item>
+
+        <n-form-item label="地区ID" path="id">
+          <n-input-number
+            style="width: 100%"
+            placeholder="请输入地区ID"
+            v-model:value="params.id"
+            :disabled="isUpdate"
+            path="handleChangeId"
+          />
+        </n-form-item>
+
+        <n-form-item label="地区名称" path="title">
+          <n-input placeholder="请输入地区名称" v-model:value="params.title" />
+        </n-form-item>
+
+        <n-form-item label="拼音" path="pinyin">
+          <n-input placeholder="请输入拼音" v-model:value="params.pinyin" />
+        </n-form-item>
+
+        <n-grid x-gap="24" :cols="2">
+          <n-gi>
+            <n-form-item label="经度" path="lng">
+              <n-input placeholder="经度" v-model:value="params.lng" />
+            </n-form-item>
+          </n-gi>
+          <n-gi>
+            <n-form-item label="纬度" path="lat">
+              <n-input placeholder="纬度" v-model:value="params.lat" />
+            </n-form-item>
+          </n-gi>
+        </n-grid>
+
+        <n-form-item label="排序" path="sort">
+          <n-input-number v-model:value="params.sort" clearable />
+        </n-form-item>
+
+        <n-form-item label="状态" path="status">
+          <n-radio-group v-model:value="params.status" name="status">
+            <n-radio-button
+              v-for="status in dict.getOptionUnRef('sys_normal_disable')"
+              :key="Number(status.value)"
+              :value="Number(status.value)"
+              :label="status.label"
+            />
+          </n-radio-group>
+        </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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import { State, newState } from './model';
+  import { Edit, MaxSort, CheckProvincesUniqueId } from '@/api/apply/provinces';
+  import { FormItemRule, useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { useDictStore } from '@/store/modules/dict';
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+    optionTreeData: any;
+    isUpdate: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+    optionTreeData: [],
+    isUpdate: false,
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const params = computed(() => {
+    return props.formParams;
+  });
+
+  const rules = {
+    id: {
+      required: true,
+      async validator(rule: FormItemRule, value: string, callback: Function) {
+        if (!value) {
+          callback(new Error('请填写地区ID'));
+        } else if (!/^\d*$/.test(value)) {
+          callback(new Error('地区ID应该为整数'));
+        } else if (!(await isUniqueId(value))) {
+          callback(new Error('地区ID已存在'));
+        } else {
+          callback();
+        }
+      },
+      trigger: ['input', 'blur'],
+    },
+    title: {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '请输入地区名称',
+    },
+  };
+
+  const dict = useDictStore();
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(params.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            isShowModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  watch(
+    () => params.value,
+    (value) => {
+      params.value.oldId = Number(value.id);
+      if (value.id === 0 || value.id === null) {
+        MaxSort().then((res) => {
+          params.value.sort = res.sort;
+        });
+      }
+    }
+  );
+
+  async function isUniqueId(newId: any) {
+    const res = await CheckProvincesUniqueId({ oldId: params.value.oldId, newId: newId });
+    return res.unique;
+  }
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/apply/provinces/index.vue b/web/src/views/apply/provinces/index.vue
new file mode 100644
index 0000000..89bc16d
--- /dev/null
+++ b/web/src/views/apply/provinces/index.vue
@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="省市区"> 中国省市区编码对照表 </n-card>
+    </div>
+    <n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12">
+      <n-gi span="1">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-button type="info" icon-placement="left" @click="openCreateDrawer">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <PlusOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                添加
+              </n-button>
+              <n-button
+                type="info"
+                icon-placement="left"
+                @click="openEditDrawer"
+                :disabled="formParams?.id === null || formParams?.id <= 0"
+              >
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <EditOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                编辑
+              </n-button>
+              <n-button type="error" icon-placement="left" @click="handleDel">
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <DeleteOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                删除
+              </n-button>
+              <n-button type="info" icon-placement="left" @click="packHandle">
+                {{ expandedKeys.length ? '收起' : '展开' }}
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <AlignLeftOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+              </n-button>
+            </n-space>
+          </template>
+          <div class="w-full menu">
+            <n-input v-model:value="pattern" placeholder="输入地区名称搜索">
+              <template #suffix>
+                <n-icon size="18" class="cursor-pointer">
+                  <SearchOutlined />
+                </n-icon>
+              </template>
+            </n-input>
+            <div class="py-3 menu-list">
+              <template v-if="loading">
+                <div class="flex items-center justify-center py-4">
+                  <n-spin size="medium" />
+                </div>
+              </template>
+              <template v-else>
+                <n-tree
+                  block-line
+                  cascade
+                  checkable
+                  :virtual-scroll="true"
+                  :pattern="pattern"
+                  :data="treeData"
+                  :expandedKeys="expandedKeys"
+                  style="height: 75vh"
+                  @update:selected-keys="selectedTree"
+                  @update:expanded-keys="onExpandedKeys"
+                />
+              </template>
+            </div>
+          </div>
+        </n-card>
+      </n-gi>
+      <n-gi span="3">
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
+          <template #header>
+            <n-space>
+              <n-icon size="18">
+                <FormOutlined />
+              </n-icon>
+              <span>编辑省市区{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
+              <span style="font-size: 14px">{{
+                treeItemTitle ? '' : '从列表选择一项后，进行编辑'
+              }}</span>
+            </n-space>
+          </template>
+
+          <List :checkedId="checkedId" :optionTreeData="optionTreeData" @reload-table="loadData" />
+        </n-card>
+      </n-gi>
+    </n-grid>
+
+    <Edit
+      @reload-table="loadData"
+      @update-show-modal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formParams"
+      :optionTreeData="optionTreeData"
+      :isUpdate="isUpdate"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, unref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import {
+    AlignLeftOutlined,
+    FormOutlined,
+    PlusOutlined,
+    EditOutlined,
+    SearchOutlined,
+    DeleteOutlined,
+  } from '@vicons/antd';
+  import List from './list.vue';
+  import { getProvincesTree, Delete } from '@/api/apply/provinces';
+  import Edit from './edit.vue';
+  import { newState, loadOptions } from './model';
+
+  const isUpdate = ref(false);
+  const showModal = ref(false);
+  const message = useMessage();
+  const dialog = useDialog();
+  let treeItemKey = ref([]);
+  let expandedKeys = ref([]);
+  const treeData = ref([]);
+  const loading = ref(true);
+  const treeItemTitle = ref('');
+  const checkedId = ref(0);
+  const pattern = ref('');
+  const optionTreeData = ref<any>([]);
+  const formParams = ref(newState(null));
+
+  function openCreateDrawer() {
+    showModal.value = true;
+    formParams.value = newState(null);
+    isUpdate.value = false;
+  }
+
+  function openEditDrawer() {
+    showModal.value = true;
+    isUpdate.value = true;
+  }
+
+  function selectedTree(keys, opts) {
+    if (keys.length) {
+      const treeItem = opts[0];
+      treeItemKey.value = keys;
+      treeItemTitle.value = treeItem.label;
+      formParams.value = newState(treeItem);
+      checkedId.value = treeItem.id;
+    } else {
+      treeItemKey.value = [];
+      treeItemTitle.value = '';
+    }
+  }
+
+  function handleDel() {
+    dialog.info({
+      title: '提示',
+      content: `您确定想删除吗?`,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ ...formParams.value }).then(async (_res) => {
+          message.success('操作成功');
+          await loadData();
+        });
+      },
+      onNegativeClick: () => {
+        message.error('已取消');
+      },
+    });
+  }
+
+  function packHandle() {
+    if (expandedKeys.value.length) {
+      expandedKeys.value = [];
+    } else {
+      expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
+    }
+  }
+
+  async function loadData() {
+    const treeMenuList = await getProvincesTree();
+    Object.assign(
+      formParams,
+      treeMenuList.list.map((item) => item.key)
+    );
+    treeData.value = [];
+    optionTreeData.value = [
+      {
+        id: 0,
+        key: 0,
+        label: '顶级地区',
+        pid: 0,
+        title: '顶级地区',
+      },
+    ];
+    treeData.value = treeMenuList.list;
+    optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
+    loading.value = false;
+  }
+
+  function onExpandedKeys(keys) {
+    expandedKeys.value = keys;
+  }
+
+  function updateShowModal(value) {
+    showModal.value = value;
+  }
+
+  onMounted(async () => {
+    loadOptions();
+    await loadData();
+  });
+</script>
diff --git a/web/src/views/apply/provinces/list.vue b/web/src/views/apply/provinces/list.vue
new file mode 100644
index 0000000..29b121f
--- /dev/null
+++ b/web/src/views/apply/provinces/list.vue
@@ -0,0 +1,220 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <n-result
+      v-show="checkedId <= 0"
+      status="info"
+      title="提示"
+      description="请选择一个想要编辑的省市区"
+    />
+
+    <div v-show="checkedId > 0">
+      <BasicForm
+        @register="register"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :columns="listColumns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加数据
+          </n-button>
+        </template>
+      </BasicTable>
+    </div>
+
+    <Edit
+      @reloadTable="reloadTable"
+      @updateShowModal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formParams"
+      :optionTreeData="optionTreeData"
+      :isUpdate="isUpdate"
+    />
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, watch, computed } from 'vue';
+  import { useMessage, useDialog } from 'naive-ui';
+  import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { listColumns, newState, State } from './model';
+  import { PlusOutlined } from '@vicons/antd';
+  import { getProvincesChildrenList, Delete } from '@/api/apply/provinces';
+  import Edit from './edit.vue';
+  import { adaTableScrollX } from '@/utils/hotgo';
+
+  const emit = defineEmits(['reloadTable']);
+
+  interface Props {
+    checkedId?: number;
+    optionTreeData: any;
+  }
+
+  const props = withDefaults(defineProps<Props>(), { checkedId: 0, optionTreeData: [] });
+  const searchFormRef = ref<any>({});
+  const message = useMessage();
+  const dialog = useDialog();
+  const actionRef = ref();
+  const isUpdate = ref(false);
+  const showModal = ref(false);
+  const formParams = ref<State>(newState(null));
+  const params = ref({
+    pageSize: 10,
+    pid: props.checkedId,
+    label: '',
+  });
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'id',
+      component: 'NInput',
+      label: '地区ID',
+      componentProps: {
+        placeholder: '请输入地区ID',
+        onInput: (e: any) => {
+          console.log(e);
+          params.value.label = e;
+        },
+      },
+    },
+    {
+      field: 'title',
+      component: 'NInput',
+      label: '地区名称',
+      componentProps: {
+        placeholder: '请输入地区名称',
+        onInput: (e: any) => {
+          console.log(e);
+          params.value.label = e;
+        },
+      },
+    },
+  ];
+
+  const actionColumn = reactive<BasicColumn>({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(listColumns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:1 l:2 xl:2 2xl:2' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = newState(null);
+    formParams.value.pid = props.checkedId;
+    isUpdate.value = false;
+  }
+
+  const loadDataTable = async (res) => {
+    if (props.checkedId <= 0) {
+      return [];
+    }
+    return await getProvincesChildrenList({
+      ...{ pid: props.checkedId },
+      ...searchFormRef.value?.formModel,
+      ...res,
+    });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+    emit('reloadTable');
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '您确定想删除吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    showModal.value = true;
+    formParams.value = newState(record as State);
+    isUpdate.value = true;
+  }
+
+  function handleSubmit(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    params.value.label = '';
+    reloadTable();
+  }
+
+  watch(props, (_newVal, _oldVal) => {
+    if (params.value.pid === _newVal.checkedId) {
+      return;
+    }
+    params.value.pid = _newVal.checkedId;
+    formParams.value.pid = Number(_newVal.checkedId);
+    if (_newVal.checkedId > 0) {
+      reloadTable();
+    }
+  });
+
+  function updateShowModal(value) {
+    showModal.value = value;
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/apply/provinces/model.ts b/web/src/views/apply/provinces/model.ts
new file mode 100644
index 0000000..e21ba37
--- /dev/null
+++ b/web/src/views/apply/provinces/model.ts
@@ -0,0 +1,87 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag } from '@/utils';
+
+const dict = useDictStore();
+
+export const listColumns = [
+  {
+    title: '地区ID',
+    key: 'id',
+  },
+  {
+    title: '地区名称',
+    key: 'title',
+  },
+  {
+    title: '拼音',
+    key: 'pinyin',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'success',
+          bordered: false,
+        },
+        {
+          default: () => row.pinyin,
+        }
+      );
+    },
+  },
+  {
+    title: '经度',
+    key: 'lng',
+  },
+  {
+    title: '维度',
+    key: 'lat',
+  },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+];
+
+export interface State {
+  id: number | null;
+  title: string;
+  pinyin: string;
+  lng: string;
+  lat: string;
+  pid: number;
+  sort: number;
+  status: number;
+  oldId: number;
+}
+
+export const defaultState = {
+  id: null,
+  title: '',
+  pinyin: '',
+  lng: '',
+  lat: '',
+  pid: 0,
+  sort: 0,
+  status: 1,
+  oldId: 0,
+};
+
+export function newState(state: State | null): State {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(defaultState);
+}
+
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable']);
+}
diff --git a/web/src/views/asset/cash/columns.ts b/web/src/views/asset/cash/columns.ts
new file mode 100644
index 0000000..2c4b30d
--- /dev/null
+++ b/web/src/views/asset/cash/columns.ts
@@ -0,0 +1,99 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+import { renderPopoverMemberSumma } from '@/utils';
+
+const msgMap = {
+  1: '处理中',
+  2: '提现成功',
+  3: ' 提现异常',
+};
+
+export const statusOptions = [
+  {
+    value: 1,
+    label: '处理中',
+  },
+  {
+    value: 2,
+    label: '提现成功',
+  },
+  {
+    value: 3,
+    label: '提现异常',
+  },
+];
+
+export const columns = [
+  {
+    title: '提现ID',
+    key: 'id',
+    width: 100,
+  },
+  {
+    title: '申请人',
+    key: 'memberId',
+    width: 100,
+    render(row) {
+      return renderPopoverMemberSumma(row.memberBySumma);
+    },
+  },
+  {
+    title: '提现金额',
+    key: 'money',
+    render(row) {
+      return row.money.toFixed(2);
+    },
+    width: 100,
+  },
+  {
+    title: '手续费',
+    key: 'fee',
+    render(row) {
+      return row.fee.toFixed(2);
+    },
+    width: 100,
+  },
+  {
+    title: '最终到账',
+    key: 'lastMoney',
+    render(row) {
+      return row.lastMoney.toFixed(2);
+    },
+    width: 100,
+  },
+  {
+    title: '处理结果',
+    key: 'msg',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.status == 1 ? 'info' : row.status == 2 ? 'success' : 'warning',
+          bordered: false,
+        },
+        {
+          default: () => (row.msg == '' ? msgMap[row.status] : row.msg),
+        }
+      );
+    },
+    width: 200,
+  },
+  {
+    title: '申请IP',
+    key: 'ip',
+    width: 180,
+  },
+  {
+    title: '处理时间',
+    key: 'handleAt',
+    width: 180,
+  },
+  {
+    title: '申请时间',
+    key: 'createdAt',
+    width: 180,
+  },
+];
diff --git a/web/src/views/asset/cash/index.vue b/web/src/views/asset/cash/index.vue
new file mode 100644
index 0000000..1e2c4ba
--- /dev/null
+++ b/web/src/views/asset/cash/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="提现管理">
+      <n-tabs
+        type="card"
+        class="card-tabs"
+        :value="defaultTab"
+        animated
+        @before-leave="handleBeforeLeave"
+      >
+        <n-tab-pane name="" tab="全部"> <List :type="defaultTab" /></n-tab-pane>
+        <n-tab-pane name="1" tab="处理中"> <List :type="defaultTab" /> </n-tab-pane>
+        <n-tab-pane name="2" tab="提现成功"> <List :type="defaultTab" /> </n-tab-pane>
+        <n-tab-pane name="3" tab="提现异常"> <List :type="defaultTab" /> </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import List from './list.vue';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+  const defaultTab = ref('');
+
+  onMounted(() => {
+    if (router.currentRoute.value.query?.type) {
+      defaultTab.value = router.currentRoute.value.query.type as string;
+    }
+  });
+
+  function handleBeforeLeave(tabName: string) {
+    defaultTab.value = tabName;
+  }
+</script>
diff --git a/web/src/views/asset/cash/list.vue b/web/src/views/asset/cash/list.vue
new file mode 100644
index 0000000..0629239
--- /dev/null
+++ b/web/src/views/asset/cash/list.vue
@@ -0,0 +1,408 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm
+        @register="register"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        @keyup.enter="handleSubmit"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable" class="min-left-space">
+            <template #icon>
+              <n-icon>
+                <MoneyCollectOutlined />
+              </n-icon>
+            </template>
+            申请提现
+          </n-button>
+
+          <n-button type="default" @click="setCash" class="min-left-space">
+            <template #icon>
+              <n-icon>
+                <EditOutlined />
+              </n-icon>
+            </template>
+            设置提现账户
+          </n-button>
+        </template>
+      </BasicTable>
+
+      <n-modal
+        v-model:show="showModal"
+        :show-icon="false"
+        preset="dialog"
+        title="申请提现"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-alert type="info">
+          <div v-html="config.cashTips"></div>
+        </n-alert>
+        <n-form
+          :model="formParams"
+          ref="formRef"
+          label-placement="left"
+          :label-width="100"
+          class="py-4"
+        >
+          <n-form-item label="可提现金额">
+            <n-input v-model:value="newUserInfo.balance" disabled />
+            <template #feedback
+              ><p>{{ estimated }}</p></template
+            >
+          </n-form-item>
+          <br />
+          <n-form-item label="提现金额" path="money">
+            <n-input-number v-model:value="formParams.money" :min="1" :max="newUserInfo.balance">
+              <template #minus-icon>
+                <n-icon :component="ArrowDownCircleOutline" />
+              </template>
+              <template #add-icon>
+                <n-icon :component="ArrowUpCircleOutline" />
+              </template>
+            </n-input-number>
+          </n-form-item>
+        </n-form>
+
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showModal = false)">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+
+      <n-modal
+        v-model:show="showPaymentModal"
+        :show-icon="false"
+        preset="dialog"
+        title="处理打款"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-form
+          :model="paymentParams"
+          ref="PaymentRef"
+          label-placement="left"
+          :label-width="100"
+          class="py-4"
+        >
+          <n-form-item label="最终到账金额">
+            <n-input v-model:value="paymentParams.lastMoney" disabled />
+          </n-form-item>
+          <n-form-item label="收款信息">
+            <n-input v-model:value="paymentParams.accountInfo" disabled />
+          </n-form-item>
+
+          <n-form-item label="收款码">
+            <n-carousel draggable>
+              <img style="width: 200px" class="carousel-img" :src="paymentParams.payeeCode" />
+            </n-carousel>
+          </n-form-item>
+
+          <n-form-item label="变更提现状态" path="status">
+            <n-radio-group v-model:value="paymentParams.status" name="status">
+              <n-radio-button
+                v-for="status in statusOptions"
+                :key="status.value"
+                :value="status.value"
+                :label="status.label"
+              />
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item label="处理结果">
+            <n-input v-model:value="paymentParams.msg" />
+            <template #feedback>不填默认显示提现状态</template>
+          </n-form-item>
+        </n-form>
+
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showPaymentModal = false)">取消</n-button>
+            <n-button type="info" :loading="PaymentBtnLoading" @click="confirmPayment"
+              >确定</n-button
+            >
+          </n-space>
+        </template>
+      </n-modal>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, reactive, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { Apply, List, Payment, View } from '@/api/cash';
+  import { columns, statusOptions } from './columns';
+  import { ArrowDownCircleOutline, ArrowUpCircleOutline } from '@vicons/ionicons5';
+  import { MoneyCollectOutlined, EditOutlined } from '@vicons/antd';
+  import { defRangeShortcuts, timestampToTime } from '@/utils/dateUtil';
+  import { useRouter } from 'vue-router';
+  import { getUserInfo } from '@/api/system/user';
+  import { getCashConfig } from '@/api/sys/config';
+  import { adaTableScrollX } from '@/utils/hotgo';
+
+  interface Props {
+    type?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: '',
+  });
+
+  const router = useRouter();
+  const params = ref<any>({
+    pageSize: 10,
+    title: '',
+    content: '',
+    status: null,
+  });
+
+  const estimated = ref(
+    '本次提现预计将在 ' +
+      timestampToTime(new Date().setTime(new Date().getTime() + 86400 * 4 * 1000) / 1000) +
+      ' 前到账 (1-3个工作日，双休日和法定节假日顺延)'
+  );
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'complexMemberId',
+      component: 'ComplexMemberPicker',
+      label: '申请人',
+      componentProps: {
+        placeholder: '请选择申请人',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'ip',
+      component: 'NInput',
+      label: '申请IP',
+      componentProps: {
+        placeholder: '请输入申请IP',
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ message: '请输入申请IP', trigger: ['blur'] }],
+    },
+    {
+      field: 'created_at',
+      component: 'NDatePicker',
+      label: '申请时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        shortcuts: defRangeShortcuts(),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+  ];
+
+  const newUserInfo = ref({ balance: 0 });
+  const message = useMessage();
+  const actionRef = ref();
+  const showModal = ref(false);
+  const showPaymentModal = ref(false);
+  const PaymentRef = ref<any>({});
+  const PaymentBtnLoading = ref(false);
+  const formBtnLoading = ref(false);
+  const searchFormRef = ref<any>({});
+  const formRef = ref<any>({});
+  const config = ref<any>({
+    cashMinFee: 3,
+    cashMinFeeRatio: '0.03',
+    cashMinMoney: 0,
+    cashSwitch: false,
+    cashTips: '',
+  });
+
+  const resetFormParams = {
+    money: null,
+    accountInfo: null,
+  };
+  let formParams = ref<any>(resetFormParams);
+
+  const resetPaymentParams = {
+    id: null,
+    money: null,
+  };
+  let paymentParams = ref<any>(resetPaymentParams);
+
+  const actionColumn = reactive({
+    auth: ['/cash/payment'],
+    width: 100,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '处理打款',
+            onClick: handleEdit.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  function setCash() {
+    router.push({
+      name: 'home_account',
+      query: {
+        type: 3,
+      },
+    });
+  }
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  async function addTable() {
+    showModal.value = true;
+    formParams.value = resetFormParams;
+    newUserInfo.value = await getUserInfo();
+
+    if (newUserInfo.value.balance < config.value.cashMinMoney) {
+      message.error('当前余额不满足提现条件，至少需要：' + config.value.cashMinMoney + '元');
+    }
+  }
+
+  const loadDataTable = async (res) => {
+    mapWidth();
+    config.value = await getCashConfig();
+    config.value = config.value.list;
+    return await List({
+      ...params.value,
+      ...res,
+      ...searchFormRef.value.formModel,
+      ...{ status: props.type },
+    });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  /**
+   * 申请提现
+   * @param e
+   */
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Apply({ money: formParams.value.money }).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showModal.value = false;
+            reloadTable();
+            formParams.value = ref(resetFormParams);
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  /**
+   * 处理打款
+   * @param e
+   */
+  function confirmPayment(e) {
+    e.preventDefault();
+    PaymentBtnLoading.value = true;
+    PaymentRef.value.validate((errors) => {
+      if (!errors) {
+        Payment({
+          id: PaymentRef.value.model.id,
+          status: PaymentRef.value.model.status,
+          msg: PaymentRef.value.model.msg,
+        }).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            showPaymentModal.value = false;
+            reloadTable();
+            PaymentRef.value = ref(resetPaymentParams);
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      PaymentBtnLoading.value = false;
+    });
+  }
+
+  async function handleEdit(record: Recordable) {
+    showPaymentModal.value = true;
+    paymentParams.value = record;
+    paymentParams.value = await View({ id: record.id });
+    paymentParams.value.lastMoney = paymentParams.value.lastMoney.toFixed(2);
+    paymentParams.value.accountInfo =
+      paymentParams.value.name + ' - ' + paymentParams.value.account;
+  }
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    params.value = values;
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    params.value = values;
+    reloadTable();
+  }
+
+  const dialogWidth = ref('50%');
+
+  function mapWidth() {
+    let val = document.body.clientWidth;
+    const def = 720; // 默认宽度
+    if (val < def) {
+      dialogWidth.value = '100%';
+    } else {
+      dialogWidth.value = def + 'px';
+    }
+
+    return dialogWidth.value;
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/asset/creditsLog/index.vue b/web/src/views/asset/creditsLog/index.vue
new file mode 100644
index 0000000..84b6131
--- /dev/null
+++ b/web/src/views/asset/creditsLog/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="资金变动">
+        你和下级在平台中余额、积分的变动明细都可以在这里进行查看
+      </n-card>
+    </div>
+
+    <n-card :bordered="false" class="proCard">
+      <n-tabs
+        type="card"
+        class="card-tabs"
+        :value="defaultTab"
+        animated
+        @before-leave="handleBeforeLeave"
+      >
+        <n-tab-pane name="" tab="全部"> <List :type="defaultTab" /></n-tab-pane>
+        <n-tab-pane name="balance" tab="余额明细"> <List :type="defaultTab" /> </n-tab-pane>
+        <n-tab-pane name="integral" tab="积分明细"> <List :type="defaultTab" /> </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import List from './list.vue';
+  import { useRouter } from 'vue-router';
+  import { loadOptions } from './model';
+
+  const router = useRouter();
+  const defaultTab = ref('');
+
+  function handleBeforeLeave(tabName: string) {
+    defaultTab.value = tabName;
+  }
+
+  onMounted(() => {
+    if (router.currentRoute.value.query?.type) {
+      defaultTab.value = router.currentRoute.value.query.type as string;
+    }
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/asset/creditsLog/list.vue b/web/src/views/asset/creditsLog/list.vue
new file mode 100644
index 0000000..d6758a0
--- /dev/null
+++ b/web/src/views/asset/creditsLog/list.vue
@@ -0,0 +1,98 @@
+<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="false"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-10000"
+        size="small"
+      >
+        <template #tableTitle>
+          <n-button
+            type="primary"
+            @click="handleExport"
+            class="min-left-space"
+            v-if="hasPermission(['/creditsLog/export'])"
+          >
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { BasicTable } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { List, Export } from '@/api/creditsLog';
+  import { columns, schemas } from './model';
+  import { ExportOutlined } from '@vicons/antd';
+  import { adaTableScrollX } from '@/utils/hotgo';
+
+  interface Props {
+    type?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: '',
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, 0);
+  });
+
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const message = useMessage();
+  const searchFormRef = ref<any>({});
+
+  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,
+      ...{ creditType: props.type },
+    });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/asset/creditsLog/model.ts b/web/src/views/asset/creditsLog/model.ts
new file mode 100644
index 0000000..093d923
--- /dev/null
+++ b/web/src/views/asset/creditsLog/model.ts
@@ -0,0 +1,166 @@
+import { ref } from 'vue';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag, renderPopoverMemberSumma } from '@/utils';
+
+const dict = useDictStore();
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'complexMemberId',
+    component: 'ComplexMemberPicker',
+    label: '选择用户',
+    componentProps: {
+      placeholder: '请选择用户',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'creditGroup',
+    component: 'NSelect',
+    label: '变动组别',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择变动组别',
+      options: dict.getOption('creditGroup'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'remark',
+    component: 'NInput',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'ip',
+    component: 'NInput',
+    label: '操作人IP',
+    componentProps: {
+      placeholder: '请输入操作人IP',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'id',
+    component: 'NInput',
+    label: '变动ID',
+    componentProps: {
+      placeholder: '请输入变动ID',
+      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: 'memberId',
+    width: 100,
+    render(row) {
+      return renderPopoverMemberSumma(row.memberBySumma);
+    },
+  },
+  {
+    title: '变动类型',
+    key: 'creditType',
+    render(row) {
+      return renderOptionTag('creditType', row.creditType);
+    },
+    width: 150,
+  },
+  {
+    title: '变动组别',
+    key: 'creditGroup',
+    render(row) {
+      return renderOptionTag('creditGroup', row.creditGroup);
+    },
+    width: 150,
+  },
+  {
+    title: '变动前',
+    key: 'beforeNum',
+    width: 100,
+    render(row) {
+      return Number(row.beforeNum).toFixed(2);
+    },
+  },
+  {
+    title: '变动数量',
+    key: 'num',
+    width: 100,
+    render(row) {
+      return Number(row.num).toFixed(2);
+    },
+  },
+  {
+    title: '变动后',
+    key: 'afterNum',
+    width: 100,
+    render(row) {
+      return Number(row.afterNum).toFixed(2);
+    },
+  },
+  {
+    title: '备注',
+    key: 'remark',
+    width: 200,
+  },
+  {
+    title: '操作人IP',
+    key: 'ip',
+    width: 150,
+  },
+  {
+    title: '关联ID',
+    key: 'mapId',
+    width: 100,
+    render(row) {
+      if (row.mapId === 0) {
+        return '-';
+      }
+      return row.mapId;
+    },
+  },
+  {
+    title: '变动时间',
+    key: 'createdAt',
+    width: 180,
+  },
+];
+
+export function loadOptions() {
+  dict.loadOptions(['creditType', 'creditGroup']);
+}
diff --git a/web/src/views/asset/payRefund/index.vue b/web/src/views/asset/payRefund/index.vue
new file mode 100644
index 0000000..98ce65e
--- /dev/null
+++ b/web/src/views/asset/payRefund/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard">
+      <div class="n-layout-page-header">
+        <n-card :bordered="false" title="交易退款">
+          <!--  这是系统自动生成的CURD表格，你可以将此行注释改为表格的描述 -->
+        </n-card>
+      </div>
+      <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="false"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :scroll-x="1090"
+        :resizeHeightOffset="-10000"
+        size="small"
+      >
+        <template #tableTitle>
+          <n-button
+            type="primary"
+            @click="handleExport"
+            class="min-left-space"
+            v-if="hasPermission(['/creditsLog/export'])"
+          >
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { BasicTable } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { List, Export } from '@/api/pay/refund';
+  import { columns, schemas, loadOptions } from './model';
+  import { ExportOutlined } from '@vicons/antd';
+
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const message = useMessage();
+  const searchFormRef = ref<any>({});
+  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 reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  onMounted(async () => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/asset/payRefund/model.ts b/web/src/views/asset/payRefund/model.ts
new file mode 100644
index 0000000..8c66f18
--- /dev/null
+++ b/web/src/views/asset/payRefund/model.ts
@@ -0,0 +1,181 @@
+import { ref } from 'vue';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag } from '@/utils';
+
+const dict = useDictStore();
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'id',
+    component: 'NInputNumber',
+    label: '变动ID',
+    componentProps: {
+      placeholder: '请输入变动ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'memberId',
+    component: 'NInputNumber',
+    label: '管理员ID',
+    componentProps: {
+      placeholder: '请输入管理员ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'appId',
+    component: 'NInput',
+    label: '应用id',
+    componentProps: {
+      placeholder: '请输入应用id',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'creditType',
+    component: 'NSelect',
+    label: '变动类型',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择变动类型',
+      options: [],
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'creditGroup',
+    component: 'NSelect',
+    label: '变动的组别',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择变动的组别',
+      options: [],
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'remark',
+    component: 'NInput',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'ip',
+    component: 'NInput',
+    label: '操作人IP',
+    componentProps: {
+      placeholder: '请输入操作人IP',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态',
+      options: [],
+      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',
+  },
+  {
+    title: '管理员ID',
+    key: 'memberId',
+  },
+  {
+    title: '应用id',
+    key: 'appId',
+  },
+  {
+    title: '插件名称',
+    key: 'addonsName',
+  },
+  {
+    title: '变动前',
+    key: 'beforeNum',
+  },
+  {
+    title: '变动数据',
+    key: 'num',
+  },
+  {
+    title: '变动后',
+    key: 'afterNum',
+  },
+  {
+    title: '备注',
+    key: 'remark',
+  },
+  {
+    title: '操作人IP',
+    key: 'ip',
+  },
+  {
+    title: '关联ID',
+    key: 'mapId',
+  },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      return renderOptionTag('sys_normal_disable', row.status);
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+  },
+  {
+    title: '修改时间',
+    key: 'updatedAt',
+  },
+];
+
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable']);
+}
+
+loadOptions();
diff --git a/web/src/views/asset/recharge/recharge.vue b/web/src/views/asset/recharge/recharge.vue
new file mode 100644
index 0000000..7317101
--- /dev/null
+++ b/web/src/views/asset/recharge/recharge.vue
@@ -0,0 +1,287 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="在线充值"> 余额可用于购买付费产品或商城消费 </n-card>
+    </div>
+    <n-spin :show="loading">
+      <n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12">
+        <n-gi span="4">
+          <n-card :bordered="false" class="proCard">
+            <n-thing>
+              <template #description> <span class="title">充值金额</span> </template>
+              <n-space>
+                <n-button
+                  type="primary"
+                  ghost
+                  v-for="item in amounts"
+                  :key="item"
+                  @click="SetAmount(item)"
+                >
+                  ￥{{ item }}
+
+                  <n-icon
+                    class="check-icon"
+                    :size="18"
+                    :component="CheckOutlined"
+                    v-if="amount === item && amountType === 1"
+                  />
+                </n-button>
+
+                <n-input-number v-model:value="amount" v-if="amountType === 2">
+                  <template #prefix> ￥ </template>
+                </n-input-number>
+              </n-space>
+              <template #footer> <span class="title">支付方式 </span></template>
+              <template #action>
+                <n-space>
+                  <n-button
+                    strong
+                    secondary
+                    :color="item.color"
+                    v-for="item in payTypes"
+                    :key="item"
+                    @click="SetPayType(item.value)"
+                  >
+                    <template #icon>
+                      <n-icon :component="item.icon" />
+                    </template>
+                    {{ item.label }}
+                    <n-icon
+                      class="check-icon"
+                      :size="18"
+                      :component="CheckOutlined"
+                      v-if="payType === item.value"
+                    />
+                  </n-button>
+                </n-space>
+
+                <n-button
+                  type="success"
+                  class="create-order-button"
+                  size="large"
+                  @click="CreateOrder"
+                >
+                  立即充值
+                </n-button>
+              </template>
+            </n-thing>
+          </n-card>
+        </n-gi>
+      </n-grid>
+    </n-spin>
+
+    <n-modal v-model:show="showQrModal" :show-icon="false" preset="dialog" :title="qrParams.name">
+      <n-form class="py-4">
+        <div class="text-center">
+          <qrcode-vue :value="qrParams.qrUrl" :size="220" class="canvas" style="margin: 0 auto" />
+        </div>
+      </n-form>
+
+      <template #action>
+        <n-space>
+          <n-button @click="() => (showQrModal = false)">关闭</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+    <RechargeLog class="mt-6" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, inject } from 'vue';
+  import wx from 'weixin-js-sdk';
+  import { WechatOutlined, AlipayOutlined, QqOutlined, CheckOutlined } from '@vicons/antd';
+  import { useMessage } from 'naive-ui';
+  import { Create } from '@/api/order';
+  import QrcodeVue from 'qrcode.vue';
+  import RechargeLog from '../rechargeLog/index.vue';
+  import { SocketEnum } from '@/enums/socketEnum';
+  import { addOnMessage } from '@/utils/websocket';
+
+  const showQrModal = ref(false);
+  const qrParams = ref({
+    name: '',
+    qrUrl: '',
+  });
+  const loading = ref(false);
+  const message = useMessage();
+  const amountType = ref(1);
+  const amounts = ref([0.01, 10, 20, 30, 50, 100, '其他金额']);
+  const payTypes = ref([
+    { value: 'wxpay', label: '微信支付', icon: WechatOutlined, color: '#18a058' },
+    { value: 'alipay', label: '支付宝', icon: AlipayOutlined, color: '#2d8cf0' },
+    { value: 'qqpay', label: 'QQ支付', icon: QqOutlined, color: '#2d8cf0' },
+  ]);
+
+  const amount = ref<any>(null);
+  const payType = ref<any>(null);
+
+  onMounted(() => {});
+
+  function SetPayType(type: string) {
+    payType.value = type;
+  }
+
+  function SetAmount(a: number | string) {
+    amount.value = a;
+    if (a === '其他金额') {
+      amountType.value = 2;
+      amount.value = null;
+    } else {
+      amountType.value = 1;
+    }
+  }
+
+  function CreateOrder() {
+    if (amount.value === null || amount.value <= 0) {
+      message.error('请选择充值金额');
+      return;
+    }
+
+    if (payType.value === null || payType.value === '') {
+      message.error('请选择支付方式');
+      return;
+    }
+
+    loading.value = true;
+    Create({
+      orderType: 'balance',
+      payType: payType.value,
+      money: amount.value,
+      returnUrl: window.location.href,
+    })
+      .then((res) => {
+        if (res.order?.tradeType === undefined || res.order?.tradeType === '') {
+          message.error('创建支付订单失败，没找到交易方式，请联系管理处理！');
+          return;
+        }
+
+        if (res.order?.tradeType !== 'mp') {
+          if (res.order?.payURL === undefined || res.order?.payURL === '') {
+            message.error('创建支付订单失败，没找到支付地址，请联系管理处理！');
+            return;
+          }
+        }
+
+        switch (res.order?.tradeType) {
+          case 'scan':
+            showQr(res.order?.payURL, '打开微信【扫一扫】完成支付');
+            break;
+          case 'mp':
+            if (res.order.jsApi === undefined) {
+              message.error('支付失败请选择其他支付方式：JSAPI支付参数无效');
+              return;
+            }
+            const jsApi = res.order.jsApi;
+
+            // 配置微信JS SDK
+            wx.config({
+              // debug: true,
+              appId: jsApi.config.app_id,
+              timestamp: jsApi.config.timestamp,
+              nonceStr: jsApi.config.nonce_str,
+              signature: jsApi.config.signature,
+              jsApiList: ['chooseWXPay'],
+            });
+            // 配置完成后返回一个resolve
+            wx.ready(() => {
+              wxJSPay({
+                timestamp: jsApi.params.timeStamp,
+                nonceStr: jsApi.params.nonceStr,
+                package: jsApi.params.package,
+                signType: jsApi.params.signType,
+                paySign: jsApi.params.paySign,
+              })
+                .then((_res) => {
+                  // ...
+                })
+                .catch((err) => {
+                  message.success('支付失败：', err.message);
+                });
+            });
+
+            break;
+          case 'qqweb':
+            showQr(res.order?.payURL, '打开QQ【扫一扫】完成支付');
+            break;
+          default:
+            window.open(res.order?.payURL, '_blank');
+        }
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  // 发起微信公众号支付
+  function wxJSPay(params) {
+    return new Promise((resolve, reject) => {
+      // 调用微信支付
+      wx.chooseWXPay({
+        timestamp: params.timestamp,
+        nonceStr: params.nonceStr,
+        package: params.package,
+        signType: params.signType,
+        paySign: params.paySign,
+        success: (res) => {
+          // 支付成功时返回resolve
+          resolve(res);
+        },
+        fail: (err) => {
+          // 支付失败时返回reject
+          reject(err);
+        },
+      });
+    });
+  }
+
+  function showQr(url: string, name: string) {
+    qrParams.value.qrUrl = url;
+    qrParams.value.name = name;
+    showQrModal.value = true;
+  }
+
+  const onMessageList = inject('onMessageList');
+
+  const handleMessageList = (res) => {
+    const data = JSON.parse(res.data);
+    if (data.event === SocketEnum.EventAdminOrderNotify) {
+      if (data.code == SocketEnum.CodeErr) {
+        message.error('查询出错:' + data.event);
+        return;
+      }
+
+      showQrModal.value = false;
+      message.success('支付成功');
+
+      location.reload();
+      return;
+    }
+  };
+
+  addOnMessage(onMessageList, handleMessageList);
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.n-thing .n-thing-main .n-thing-main__footer:not(:first-child)) {
+    margin-top: 36px;
+    margin-bottom: 10px;
+  }
+
+  ::v-deep(.title) {
+    font-weight: var(--n-title-font-weight);
+    transition: color 0.3s var(--n-bezier);
+    flex: 1;
+    min-width: 0;
+    color: var(--n-title-text-color);
+    font-size: 18px;
+  }
+
+  ::v-deep(.check-icon) {
+    margin-left: 3px;
+  }
+
+  ::v-deep(.create-order-button) {
+    margin-top: 28px;
+  }
+</style>
diff --git a/web/src/views/asset/rechargeLog/acceptRefund.vue b/web/src/views/asset/rechargeLog/acceptRefund.vue
new file mode 100644
index 0000000..d033e6e
--- /dev/null
+++ b/web/src/views/asset/rechargeLog/acceptRefund.vue
@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <n-spin :show="loading" description="请稍候...">
+      <n-modal
+        v-model:show="isShowModal"
+        :show-icon="false"
+        preset="dialog"
+        title="受理退款申请"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-form
+          :model="params"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="业务单号" path="orderSn">
+            <n-input v-model:value="params.orderSn" :disabled="true" />
+          </n-form-item>
+
+          <n-form-item label="订单金额" path="money">
+            <n-input placeholder="请输入标题" v-model:value="params.money" :disabled="true" />
+          </n-form-item>
+
+          <n-form-item label="退款原因" path="refundReason">
+            <n-input
+              type="textarea"
+              placeholder="请填写退款原因"
+              v-model:value="params.refundReason"
+              :disabled="true"
+            />
+          </n-form-item>
+
+          <n-form-item label="更新状态" path="status">
+            <n-select
+              v-model:value="params.status"
+              :options="dict.getOptionUnRef('acceptRefundStatus')"
+            />
+          </n-form-item>
+
+          <n-form-item label="拒绝原因" path="rejectRefundReason" v-if="params.status === 9">
+            <n-input
+              type="textarea"
+              placeholder="请填拒绝退款原因"
+              v-model:value="params.rejectRefundReason"
+            />
+          </n-form-item>
+
+          <n-form-item label="退款备注" path="remark" v-if="params.status === 8">
+            <n-input type="textarea" placeholder="请填退款备注" v-model:value="params.remark" />
+          </n-form-item>
+        </n-form>
+        <template #action>
+          <n-space>
+            <n-button @click="closeForm">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import { rules, State, newState } from './model';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { AcceptRefund, View } from '@/api/order';
+  import { useDictStore } from '@/store/modules/dict';
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const loading = ref(false);
+  const params = ref<State>(props.formParams);
+  const dict = useDictStore();
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        AcceptRefund(params.value).then((_res) => {
+          message.success('操作成功');
+          setTimeout(() => {
+            isShowModal.value = false;
+            emit('reloadTable');
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  function loadForm(value) {
+    loading.value = true;
+
+    // 编辑
+    View({ id: value.id })
+      .then((res) => {
+        params.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  watch(
+    () => props.formParams,
+    (value) => {
+      loadForm(value);
+    }
+  );
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/asset/rechargeLog/applyRefund.vue b/web/src/views/asset/rechargeLog/applyRefund.vue
new file mode 100644
index 0000000..79fc4af
--- /dev/null
+++ b/web/src/views/asset/rechargeLog/applyRefund.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <n-spin :show="loading" description="请稍候...">
+      <n-modal
+        v-model:show="isShowModal"
+        :show-icon="false"
+        preset="dialog"
+        title="退款申请"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-form
+          :model="params"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="业务单号" path="orderSn">
+            <n-input v-model:value="params.orderSn" :disabled="true" />
+          </n-form-item>
+
+          <n-form-item label="订单金额" path="money">
+            <n-input placeholder="请输入标题" v-model:value="params.money" :disabled="true" />
+          </n-form-item>
+
+          <n-form-item label="退款原因" path="refundReason">
+            <n-input
+              type="textarea"
+              placeholder="请填写退款原因"
+              v-model:value="params.refundReason"
+            />
+          </n-form-item>
+        </n-form>
+        <template #action>
+          <n-space>
+            <n-button @click="closeForm">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import { rules, State, newState } from './model';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { ApplyRefund, View } from '@/api/order';
+
+  interface Props {
+    showModal: boolean;
+    formParams?: State;
+  }
+
+  const emit = defineEmits(['reloadTable', 'updateShowModal']);
+  const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+    formParams: () => {
+      return newState(null);
+    },
+  });
+
+  const isShowModal = computed({
+    get: () => {
+      return props.showModal;
+    },
+    set: (value) => {
+      emit('updateShowModal', value);
+    },
+  });
+
+  const loading = ref(false);
+  const params = ref<State>(props.formParams);
+  const message = useMessage();
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        ApplyRefund(params.value)
+          .then((_res) => {
+            message.success('操作成功');
+            isShowModal.value = false;
+            emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  function closeForm() {
+    isShowModal.value = false;
+  }
+
+  function loadForm(value) {
+    loading.value = true;
+
+    // 编辑
+    View({ id: value.id })
+      .then((res) => {
+        params.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  watch(
+    () => props.formParams,
+    (value) => {
+      loadForm(value);
+    }
+  );
+</script>
+
+<style lang="less"></style>
diff --git a/web/src/views/asset/rechargeLog/index.vue b/web/src/views/asset/rechargeLog/index.vue
new file mode 100644
index 0000000..72b201d
--- /dev/null
+++ b/web/src/views/asset/rechargeLog/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <n-card :bordered="false" title="充值记录" class="proCard">
+      <n-tabs
+        type="card"
+        class="card-tabs"
+        :value="defaultTab"
+        animated
+        @before-leave="handleBeforeLeave"
+      >
+        <n-tab-pane
+          :name="item.key.toString()"
+          :tab="item.label"
+          v-for="item in dict.getOptionUnRef('orderStatus')"
+          :key="item.key"
+        >
+          <List :type="defaultTab" />
+        </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import List from './list.vue';
+  import { useRouter } from 'vue-router';
+  import { loadOptions } from './model';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const dict = useDictStore();
+  const router = useRouter();
+  const defaultTab = ref('-1');
+
+  function handleBeforeLeave(tabName: string) {
+    defaultTab.value = tabName;
+  }
+
+  onMounted(() => {
+    if (router.currentRoute.value.query?.type) {
+      defaultTab.value = router.currentRoute.value.query.type as string;
+    }
+    loadOptions();
+  });
+</script>
diff --git a/web/src/views/asset/rechargeLog/list.vue b/web/src/views/asset/rechargeLog/list.vue
new file mode 100644
index 0000000..9bd7ff8
--- /dev/null
+++ b/web/src/views/asset/rechargeLog/list.vue
@@ -0,0 +1,231 @@
+<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="scrollX"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button
+            type="error"
+            @click="handleBatchDelete"
+            :disabled="batchDeleteDisabled"
+            class="min-left-space"
+            v-if="hasPermission(['/order/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+
+          <n-button
+            type="primary"
+            @click="handleExport"
+            class="min-left-space"
+            v-if="hasPermission(['/order/export'])"
+          >
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+
+    <ApplyRefund
+      @reload-table="reloadTable"
+      @update-show-modal="updateShowModal"
+      :showModal="showModal"
+      :formParams="formParams"
+    />
+
+    <AcceptRefund
+      @reload-table="reloadTable"
+      @update-show-modal="updateAcceptShowModal"
+      :showModal="showAcceptModal"
+      :formParams="formParams"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { List, Export, Delete } from '@/api/order';
+  import { State, columns, schemas, newState } from './model';
+  import { ExportOutlined, DeleteOutlined } from '@vicons/antd';
+  import ApplyRefund from './applyRefund.vue';
+  import AcceptRefund from './acceptRefund.vue';
+  import { adaTableScrollX } from '@/utils/hotgo';
+
+  interface Props {
+    type?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: '-1',
+  });
+  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 showAcceptModal = ref(false);
+  const formParams = ref<State>();
+
+  const actionColumn = reactive({
+    width: 120,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            type: 'warning',
+            label: '受理退款',
+            onClick: handleAcceptRefund.bind(null, record),
+            auth: ['/order/acceptRefund'],
+            ifShow: () => {
+              return record.status == 6;
+            },
+          },
+          {
+            type: 'default',
+            label: '申请退款',
+            onClick: handleApplyRefund.bind(null, record),
+            auth: ['/order/applyRefund'],
+            ifShow: () => {
+              return record.status == 4;
+            },
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/order/delete'],
+            ifShow: () => {
+              return record.status == 5;
+            },
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res, ...{ status: props.type } });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleBatchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？只有已关闭的订单才能被删除',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  function updateShowModal(value) {
+    showModal.value = value;
+  }
+
+  function handleApplyRefund(record: Recordable) {
+    showModal.value = true;
+    formParams.value = newState(record as State);
+  }
+
+  function updateAcceptShowModal(value) {
+    showAcceptModal.value = value;
+  }
+
+  function handleAcceptRefund(record: Recordable) {
+    showAcceptModal.value = true;
+    formParams.value = newState(record as State);
+  }
+
+  defineExpose({
+    reloadTable,
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/asset/rechargeLog/model.ts b/web/src/views/asset/rechargeLog/model.ts
new file mode 100644
index 0000000..209b7cc
--- /dev/null
+++ b/web/src/views/asset/rechargeLog/model.ts
@@ -0,0 +1,154 @@
+import { ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { useDictStore } from '@/store/modules/dict';
+import { MemberSumma, renderOptionTag, renderPopoverMemberSumma } from '@/utils';
+
+export interface State {
+  id: number;
+  memberId: number;
+  orderType: string;
+  productId: number;
+  orderSn: string;
+  money: number;
+  remark: string;
+  payLogOutTradeNo: string;
+  status: number;
+  createdAt: string;
+  updatedAt: string;
+  refundReason: string;
+  rejectRefundReason: string;
+  payLogPayType: string;
+  memberBySumma?: null | MemberSumma;
+}
+
+export const defaultState = {
+  id: 0,
+  memberId: 0,
+  orderType: '',
+  productId: 0,
+  orderSn: '',
+  money: 0,
+  payLogOutTradeNo: '',
+  remark: '',
+  status: 1,
+  createdAt: '',
+  updatedAt: '',
+  refundReason: '',
+  rejectRefundReason: '',
+  payLogPayType: '',
+};
+
+export function newState(state: State | null): State {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(defaultState);
+}
+
+const dict = useDictStore();
+export const rules = {};
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'complexMemberId',
+    component: 'ComplexMemberPicker',
+    label: '下单用户',
+    componentProps: {
+      placeholder: '请选择下单用户',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'orderSn',
+    component: 'NInput',
+    label: '业务单号',
+    componentProps: {
+      placeholder: '请输入业务订单号',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'payLogOutTradeNo',
+    component: 'NInput',
+    label: '商户单号',
+    componentProps: {
+      placeholder: '请输入商户订单号',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const columns = [
+  {
+    title: '业务订单号',
+    key: 'orderSn',
+    width: 220,
+  },
+  {
+    title: '下单用户',
+    key: 'memberId',
+    width: 100,
+    render(row: State) {
+      return renderPopoverMemberSumma(row.memberBySumma);
+    },
+  },
+  {
+    title: '支付方式',
+    key: 'payLogPayType',
+    render(row) {
+      return renderOptionTag('payType', row.payLogPayType);
+    },
+    width: 150,
+  },
+  {
+    title: '充值金额',
+    key: 'money',
+    width: 100,
+    render(row) {
+      return '¥' + Number(row.money).toFixed(2);
+    },
+  },
+  {
+    title: '订单状态',
+    key: 'status',
+    render(row) {
+      return renderOptionTag('orderStatus', row.status);
+    },
+    width: 150,
+  },
+  {
+    title: '商户订单号',
+    key: 'payLogOutTradeNo',
+    width: 220,
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    width: 180,
+  },
+];
+
+export function loadOptions() {
+  dict.loadOptions(['payType', 'orderStatus', 'acceptRefundStatus']);
+}
diff --git a/web/src/views/curdDemo/edit.vue b/web/src/views/curdDemo/edit.vue
new file mode 100644
index 0000000..835d564
--- /dev/null
+++ b/web/src/views/curdDemo/edit.vue
@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      :title="formValue.id > 0 ? '编辑CURD列表 #' + formValue.id : '添加CURD列表'"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-spin :show="loading" description="请稍候...">
+          <n-form
+            ref="formRef"
+            :model="formValue"
+            :rules="rules"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
+              <n-gi span="1">
+                <n-form-item label="标题" path="title">
+                  <n-input placeholder="请输入标题" v-model:value="formValue.title" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="描述" path="description">
+                  <n-input type="textarea" placeholder="描述" v-model:value="formValue.description" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="2">
+                <n-form-item label="内容" path="content">
+                  <Editor style="height: 450px" id="content" v-model:value="formValue.content" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="单图" path="image">
+                  <UploadImage :maxNumber="1" v-model:value="formValue.image" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="附件" path="attachfile">
+                  <UploadFile :maxNumber="1" v-model:value="formValue.attachfile" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="所在城市" path="cityId">
+                  <CitySelector v-model:value="formValue.cityId" />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="显示开关" path="switch">
+                  <n-switch :unchecked-value="2" :checked-value="1" v-model:value="formValue.switch"
+        />
+                </n-form-item>
+              </n-gi>
+              <n-gi span="1">
+                <n-form-item label="排序" path="sort">
+                  <n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
+                </n-form-item>
+              </n-gi>
+            </n-grid>
+          </n-form>
+        </n-spin>
+      </n-scrollbar>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">
+            取消
+          </n-button>
+          <n-button type="info" :loading="formBtnLoading" :disabled="!isFormValid" @click="confirmForm">
+            确定
+          </n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useDictStore } from '@/store/modules/dict';
+  import { Edit, View, MaxSort } from '@/api/curdDemo';
+  import { State, newState, rules } from './model';
+  import Editor from '@/components/Editor/editor.vue';
+  import UploadImage from '@/components/Upload/uploadImage.vue';
+  import UploadFile from '@/components/Upload/uploadFile.vue';
+  import CitySelector from '@/components/CitySelector/citySelector.vue';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useMessage } from 'naive-ui';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  const emit = defineEmits(['reloadTable']);
+  const message = useMessage();
+  const settingStore = useProjectSettingStore();
+  const dict = useDictStore();
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
+  const formBtnLoading = ref(false);
+  const dialogWidth = computed(() => {
+    return adaModalWidth(840);
+  });
+  const isFormValid = ref(true);
+
+  // 提交表单
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        formBtnLoading.value = true;
+        Edit(formValue.value)
+          .then((_res) => {
+            message.success('操作成功');
+            closeForm();
+            emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  // 关闭表单
+  function closeForm() {
+    showModal.value = false;
+    loading.value = false;
+  }
+
+  // 打开模态框
+  function openModal(state: State) {
+    showModal.value = true;
+
+    // 新增
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
+
+      loading.value = true;
+      MaxSort()
+        .then((res) => {
+          formValue.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+      return;
+    }
+
+    // 编辑
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less"></style>
\ No newline at end of file
diff --git a/web/src/views/curdDemo/index.vue b/web/src/views/curdDemo/index.vue
new file mode 100644
index 0000000..54209ff
--- /dev/null
+++ b/web/src/views/curdDemo/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="CURD列表">
+        <!--  这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm  ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+      <BasicTable  ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000"  :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
+        <template #tableTitle>
+          <n-button type="primary"  @click="addTable" class="min-left-space" v-if="hasPermission(['/curdDemo/edit'])">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            添加
+          </n-button>
+          <n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/curdDemo/delete'])">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button type="primary" @click="handleExport" class="min-left-space" v-if="hasPermission(['/curdDemo/export'])">
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Edit ref="editRef" @reloadTable="reloadTable" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { useDictStore } from '@/store/modules/dict';
+  import { List, Export, Delete, Status } from '@/api/curdDemo';
+  import { PlusOutlined, ExportOutlined, DeleteOutlined } from '@vicons/antd';
+  import { columns, schemas, loadOptions } from './model';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import Edit from './edit.vue';
+
+  const dict = useDictStore();
+  const dialog = useDialog();
+  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
+  const searchFormRef = ref<any>({});
+  const editRef = ref();
+
+  const checkedIds = ref([]);
+
+  const actionColumn = reactive({
+    width: 216,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record: State) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '编辑',
+            onClick: handleEdit.bind(null, record),
+            auth: ['/curdDemo/edit'],
+          },
+
+          {
+            label: '禁用',
+            onClick: handleStatus.bind(null, record, 2),
+            ifShow: () => {
+              return record.status === 1;
+            },
+            auth: ['/curdDemo/status'],
+          },
+          {
+            label: '启用',
+            onClick: handleStatus.bind(null, record, 1),
+            ifShow: () => {
+              return record.status === 2;
+            },
+            auth: ['/curdDemo/status'],
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/curdDemo/delete'],
+          },
+        ],
+
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  // 加载表格数据
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  // 更新选中的行
+  function handleOnCheckedRow(rowKeys) {
+    checkedIds.value = rowKeys;
+  }
+
+  // 重新加载表格数据
+  function reloadTable() {
+    actionRef.value?.reload();
+  }
+
+  // 添加数据
+  function addTable() {
+    editRef.value.openModal(null);
+  }
+
+  // 编辑数据
+  function handleEdit(record: Recordable) {
+    editRef.value.openModal(record);
+  }
+
+  // 单个删除
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 批量删除
+  function handleBatchDelete() {
+    if (checkedIds.value.length < 1){
+      message.error('请至少选择一项要删除的数据');
+      return;
+    }
+
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          checkedIds.value = [];
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  // 导出
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  // 修改状态
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
+      message.success('设为' + dict.getLabel('sys_normal_disable', status) + '成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
+  onMounted(() => {
+    loadOptions();
+
+  });
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/web/src/views/curdDemo/model.ts b/web/src/views/curdDemo/model.ts
new file mode 100644
index 0000000..0d612d7
--- /dev/null
+++ b/web/src/views/curdDemo/model.ts
@@ -0,0 +1,280 @@
+import { h, ref } from 'vue';
+import { NSwitch } from 'naive-ui';
+import { cloneDeep } from 'lodash-es';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { renderImage, renderFile, renderPopoverMemberSumma, MemberSumma } from '@/utils';
+import { Switch } from '@/api/curdDemo';
+import { useDictStore } from '@/store/modules/dict';
+import { usePermission } from '@/hooks/web/usePermission';
+
+const dict = useDictStore();
+const { hasPermission } = usePermission();
+const $message = window['$message'];
+
+export class State {
+
+  public id = 0;//ID
+  public categoryId = null;//测试分类
+  public title = '';//标题
+  public description = '';//描述
+  public content = '';//内容
+  public image = '';//单图
+  public attachfile = '';//附件
+  public cityId = null;//所在城市
+  public switch = 2;//显示开关
+  public sort = 0;//排序
+  public status = 1;//状态
+  public createdBy = 0;//创建者
+  public createdBySumma?: null | MemberSumma = null;//创建者摘要信息
+  public updatedBy = 0;//更新者
+  public updatedBySumma?: null | MemberSumma = null;//更新者摘要信息
+  public deletedBy = 0;//删除者
+  public deletedBySumma?: null | MemberSumma = null;//删除者摘要信息
+  public createdAt = '';//创建时间
+  public updatedAt = '';//修改时间
+  public deletedAt = '';//删除时间
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+export const rules = {
+  title: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入标题',
+  },
+  description: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入描述',
+  },
+  content: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'string',
+    message: '请输入内容',
+  },
+  sort: {
+    required: true,
+    trigger: ['blur', 'input'],
+    type: 'number',
+    message: '请输入排序',
+  },
+};
+
+// 表格搜索表单
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'id',
+    component: 'NInput',
+    label: 'ID',
+    componentProps: {
+      placeholder: '请输入ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'title',
+    component: 'NInput',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'description',
+    component: 'NInput',
+    label: '描述',
+    componentProps: {
+      placeholder: '请输入描述',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdBy',
+    component: 'NInput',
+    label: '创建者',
+    componentProps: {
+      placeholder: '请输入ID|用户名|姓名|手机号',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'deletedBy',
+    component: 'NInput',
+    label: '删除者',
+    componentProps: {
+      placeholder: '请输入ID|用户名|姓名|手机号',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'testCategoryName',
+    component: 'NInput',
+    label: '关联分类',
+    componentProps: {
+      placeholder: '请输入关联分类',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+// 表格列
+export const columns = [
+  {
+    title: 'ID',
+    key: 'id',
+    align: 'left',
+    width: 50,
+  },
+  {
+    title: '标题',
+    key: 'title',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: '描述',
+    key: 'description',
+    align: 'left',
+    width: 300,
+  },
+  {
+    title: '单图',
+    key: 'image',
+    align: 'left',
+    width: 100,
+    render(row: State) {
+      return renderImage(row.image);
+    },
+  },
+  {
+    title: '附件',
+    key: 'attachfile',
+    align: 'left',
+    width: 100,
+    render(row: State) {
+      return renderFile(row.attachfile);
+    },
+  },
+  {
+    title: '显示开关',
+    key: 'switch',
+    align: 'left',
+    width: 150,
+    render(row: State) {
+      return h(NSwitch, {
+        value: row.switch === 1,
+        checked: '开启',
+        unchecked: '关闭',
+        disabled: !hasPermission(['/curdDemo/switch']),
+        onUpdateValue: function (e) {
+          console.log('onUpdateValue e:' + JSON.stringify(e));
+          row.switch = e ? 1 : 2;
+          Switch({ id: row.id, key: 'switch', value: row.switch }).then((_res) => {
+            $message.success('操作成功');
+          });
+        },
+      });
+    },
+  },
+  {
+    title: '排序',
+    key: 'sort',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: '创建者',
+    key: 'createdBy',
+    align: 'left',
+    width: 150,
+    render(row: State) {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+  },
+  {
+    title: '更新者',
+    key: 'updatedBy',
+    align: 'left',
+    width: 150,
+    render(row: State) {
+      return renderPopoverMemberSumma(row.updatedBySumma);
+    },
+  },
+  {
+    title: '删除者',
+    key: 'deletedBy',
+    align: 'left',
+    width: -1,
+    render(row: State) {
+      return renderPopoverMemberSumma(row.deletedBySumma);
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createdAt',
+    align: 'left',
+    width: 180,
+  },
+  {
+    title: '修改时间',
+    key: 'updatedAt',
+    align: 'left',
+    width: 180,
+  },
+  {
+    title: '关联分类',
+    key: 'testCategoryName',
+    align: 'left',
+    width: 100,
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['sys_normal_disable', 'testCategoryOption']);
+}
\ No newline at end of file
diff --git a/web/src/views/dashboard/console/components/FluxTrend.vue b/web/src/views/dashboard/console/components/FluxTrend.vue
new file mode 100644
index 0000000..4c3db4e
--- /dev/null
+++ b/web/src/views/dashboard/console/components/FluxTrend.vue
@@ -0,0 +1,109 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, ref, Ref } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { basicProps } from './props';
+
+  export default defineComponent({
+    props: basicProps,
+    setup() {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+      onMounted(() => {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: [
+              '6:00',
+              '7:00',
+              '8:00',
+              '9:00',
+              '10:00',
+              '11:00',
+              '12:00',
+              '13:00',
+              '14:00',
+              '15:00',
+              '16:00',
+              '17:00',
+              '18:00',
+              '19:00',
+              '20:00',
+              '21:00',
+              '22:00',
+              '23:00',
+            ],
+            splitLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                type: 'solid',
+                color: 'rgba(226,226,226,0.5)',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              max: 80000,
+              splitNumber: 4,
+              axisTick: {
+                show: false,
+              },
+              splitArea: {
+                show: true,
+                areaStyle: {
+                  color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+                },
+              },
+            },
+          ],
+          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              smooth: true,
+              data: [
+                111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
+                22222, 11111, 4000, 2000, 500, 333, 222, 111,
+              ],
+              type: 'line',
+              areaStyle: {},
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+            {
+              smooth: true,
+              data: [
+                33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
+                390, 198, 60, 30, 22, 11,
+              ],
+              type: 'line',
+              areaStyle: {},
+              itemStyle: {
+                color: '#019680',
+              },
+            },
+          ],
+        });
+      });
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/web/src/views/dashboard/console/components/Icons.ts b/web/src/views/dashboard/console/components/Icons.ts
new file mode 100644
index 0000000..ce4d411
--- /dev/null
+++ b/web/src/views/dashboard/console/components/Icons.ts
@@ -0,0 +1,25 @@
+import {
+  CaretUpOutlined,
+  CaretDownOutlined,
+  UsergroupAddOutlined,
+  BarChartOutlined,
+  ShoppingCartOutlined,
+  AccountBookOutlined,
+  CreditCardOutlined,
+  MailOutlined,
+  TagsOutlined,
+  SettingOutlined,
+} from '@vicons/antd';
+
+export default {
+  CaretUpOutlined,
+  CaretDownOutlined,
+  UsergroupAddOutlined,
+  BarChartOutlined,
+  ShoppingCartOutlined,
+  AccountBookOutlined,
+  CreditCardOutlined,
+  MailOutlined,
+  TagsOutlined,
+  SettingOutlined,
+};
diff --git a/web/src/views/dashboard/console/components/VisiTab.vue b/web/src/views/dashboard/console/components/VisiTab.vue
new file mode 100644
index 0000000..52d783e
--- /dev/null
+++ b/web/src/views/dashboard/console/components/VisiTab.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="mt-4">
+    <NRow :gutter="24">
+      <NCol :span="24">
+        <n-card content-style="padding: 0;" :bordered="false">
+          <n-tabs
+            type="line"
+            size="large"
+            :tabs-padding="20"
+            pane-style="padding: 20px;"
+            default-value="FluxTrend"
+          >
+            <n-tab-pane name="FluxTrend" :tab="t('流量消耗趋势')">
+              <FluxTrend />
+            </n-tab-pane>
+            <n-tab-pane name="VisitAmount" :tab="t('客户端访问量')">
+              <VisitAmount />
+            </n-tab-pane>
+          </n-tabs>
+        </n-card>
+      </NCol>
+    </NRow>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import FluxTrend from './FluxTrend.vue';
+  import VisitAmount from './VisitAmount.vue';
+
+  export default defineComponent({
+    components: { FluxTrend, VisitAmount },
+    setup() {
+      return {};
+    },
+  });
+</script>
diff --git a/web/src/views/dashboard/console/components/VisitAmount.vue b/web/src/views/dashboard/console/components/VisitAmount.vue
new file mode 100644
index 0000000..981284c
--- /dev/null
+++ b/web/src/views/dashboard/console/components/VisitAmount.vue
@@ -0,0 +1,61 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, ref, Ref } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
+  import { basicProps } from './props';
+
+  export default defineComponent({
+    props: basicProps,
+    setup() {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+      onMounted(() => {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          xAxis: {
+            type: 'category',
+            data: [
+              '1月',
+              '2月',
+              '3月',
+              '4月',
+              '5月',
+              '6月',
+              '7月',
+              '8月',
+              '9月',
+              '10月',
+              '11月',
+              '12月',
+            ],
+          },
+          yAxis: {
+            type: 'value',
+            max: 8000,
+            splitNumber: 4,
+          },
+          series: [
+            {
+              data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
+              type: 'bar',
+              barMaxWidth: 80,
+            },
+          ],
+        });
+      });
+      return { chartRef };
+    },
+  });
+</script>
diff --git a/web/src/views/dashboard/console/components/props.ts b/web/src/views/dashboard/console/components/props.ts
new file mode 100644
index 0000000..216216b
--- /dev/null
+++ b/web/src/views/dashboard/console/components/props.ts
@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+
+export interface BasicProps {
+  width: string;
+  height: string;
+}
+
+export const basicProps = {
+  width: {
+    type: String as PropType<string>,
+    default: '100%',
+  },
+  height: {
+    type: String as PropType<string>,
+    default: '280px',
+  },
+};
diff --git a/web/src/views/dashboard/console/console.vue b/web/src/views/dashboard/console/console.vue
new file mode 100644
index 0000000..f4e053d
--- /dev/null
+++ b/web/src/views/dashboard/console/console.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="mt-2">
+    <Company v-if="userStore.isCompanyDept" />
+    <Tenant v-else-if="userStore.isTenantDept" />
+    <Merchant v-else-if="userStore.isMerchantDept" />
+    <User v-else-if="userStore.isUserDept" />
+    <template v-else>
+      <div class="n-layout-page-header">
+        <n-card :bordered="false" title="默认首页">
+          部门类型未配置首页：{{ userStore.info?.deptType }}
+        </n-card>
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+  import Company from './console_company.vue';
+  import Merchant from './console_merchant.vue';
+  import User from './console_user.vue';
+  import Tenant from './console_tenant.vue';
+  import { useUserStore } from '@/store/modules/user';
+
+  const userStore = useUserStore();
+</script>
diff --git a/web/src/views/dashboard/console/console_company.vue b/web/src/views/dashboard/console/console_company.vue
new file mode 100644
index 0000000..1c28629
--- /dev/null
+++ b/web/src/views/dashboard/console/console_company.vue
@@ -0,0 +1,343 @@
+<template>
+  <div class="console">
+    <!--数据卡片-->
+    <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
+      <n-grid-item>
+        <NCard
+          :title="t('卡板量')"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="success">{{ t('日') }}</n-tag>
+          </template>
+          <div class="py-1 px-1 flex justify-between">
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
+          </div>
+          <div class="py-1 px-1 flex justify-between">
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                {{ t('日同比') }}
+                <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
+                </n-icon>
+              </template>
+            </div>
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                {{ t('周同比') }}
+                <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
+            </div>
+          </div>
+          <template #footer>
+            <div class="flex justify-between">
+              <n-skeleton v-if="loading" text :repeat="2" />
+              <template v-else>
+                <div class="text-sn"> {{ t('总卡板量：') }} </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" :endVal="visits.amount" />
+                </div>
+              </template>
+            </div>
+          </template>
+        </NCard>
+      </n-grid-item>
+      <n-grid-item>
+        <NCard
+          :title="t('激活卡板')"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">{{ t('周') }}</n-tag>
+          </template>
+          <div class="py-1 px-1 flex justify-between">
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo
+              v-else
+              prefix="￥"
+              :startVal="1"
+              :endVal="saleroom.weekSaleroom"
+              class="text-3xl"
+            />
+          </div>
+          <div class="py-2 px-2 flex justify-between">
+            <div class="text-sn flex-1">
+              <n-progress
+                type="line"
+                :percentage="saleroom.degree"
+                :indicator-placement="'inside'"
+                processing
+              />
+            </div>
+          </div>
+          <template #footer>
+            <div class="flex justify-between">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> {{ t('总激活卡板：') }} </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" :endVal="saleroom.amount" />
+                </div>
+              </template>
+            </div>
+          </template>
+        </NCard>
+      </n-grid-item>
+      <n-grid-item>
+        <NCard
+          :title="t('代理商')"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="warning">{{ t('周') }}</n-tag>
+          </template>
+          <div class="py-1 px-1 flex justify-between">
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
+          </div>
+          <div class="py-1 px-1 flex justify-between">
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                {{ t('日同比') }}
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
+                </n-icon>
+              </template>
+            </div>
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                {{ t('周同比') }}
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
+            </div>
+          </div>
+          <template #footer>
+            <div class="flex justify-between">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> {{ t('总代理商量：') }} </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
+                </div>
+              </template>
+            </div>
+          </template>
+        </NCard>
+      </n-grid-item>
+      <n-grid-item>
+        <NCard
+          :title="t('提现佣金')"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="error">{{ t('月') }}</n-tag>
+          </template>
+          <div class="py-1 px-1 flex justify-between">
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
+          </div>
+          <div class="py-1 px-1 flex justify-between">
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                {{ t('月同比') }}
+                <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
+                </n-icon>
+              </template>
+            </div>
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                {{ t('月同比') }}
+                <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
+            </div>
+          </div>
+          <template #footer>
+            <div class="flex justify-between">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> {{ t('总提现额：') }} </div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
+                </div>
+              </template>
+            </div>
+          </template>
+        </NCard>
+      </n-grid-item>
+    </n-grid>
+
+    <!--导航卡片-->
+    <div class="mt-4">
+      <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8">
+        <n-grid-item v-for="(item, index) in iconList" :key="index" @click="item.eventObject || {}">
+          <NCard
+            content-style="padding-top: 0;"
+            size="small"
+            :bordered="false"
+            v-on="item.eventObject || {}"
+          >
+            <template #footer>
+              <n-skeleton v-if="loading" size="medium" />
+              <div class="cursor-pointer" v-else>
+                <p class="flex justify-center">
+                  <span>
+                    <n-icon :size="item.size" class="flex-1" :color="item.color">
+                      <component :is="item.icon" />
+                    </n-icon>
+                  </span>
+                </p>
+                <p class="flex justify-center"
+                  ><span>{{ item.title }}</span></p
+                >
+              </div>
+            </template>
+          </NCard>
+        </n-grid-item>
+      </n-grid>
+    </div>
+
+    <!--访问量 | 流量趋势-->
+    <VisiTab />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { getConsoleInfo } from '@/api/dashboard/console';
+  import VisiTab from './components/VisiTab.vue';
+  import { CountTo } from '@/components/CountTo';
+  import {
+    CaretUpOutlined,
+    CaretDownOutlined,
+    UsergroupAddOutlined,
+    BarChartOutlined,
+    ShoppingCartOutlined,
+    AccountBookOutlined,
+    CreditCardOutlined,
+    MailOutlined,
+    TagsOutlined,
+    SettingOutlined,
+  } from '@vicons/antd';
+
+  const loading = ref(true);
+  const visits = ref<any>({});
+  const saleroom = ref<any>({});
+  const orderLarge = ref<any>({});
+  const volume = ref({});
+  const router = useRouter();
+
+  // 图标列表
+  const iconList = computed(() => {
+    return [
+      {
+        icon: UsergroupAddOutlined,
+        size: '32',
+        title: t('用户'),
+        color: '#69c0ff',
+        eventObject: {
+          click: () => router.push({ name: 'user' }),
+        },
+      },
+      {
+        icon: BarChartOutlined,
+        size: '32',
+        title: t('分析'),
+        color: '#69c0ff',
+        eventObject: {
+          click: () => {},
+        },
+      },
+      {
+        icon: ShoppingCartOutlined,
+        size: '32',
+        title: t('商品'),
+        color: '#ff9c6e',
+        eventObject: {
+          click: () => {},
+        },
+      },
+      {
+        icon: AccountBookOutlined,
+        size: '32',
+        title: t('订单'),
+        color: '#b37feb',
+        eventObject: {
+          click: () => {},
+        },
+      },
+      {
+        icon: CreditCardOutlined,
+        size: '32',
+        title: t('票据'),
+        color: '#ffd666',
+        eventObject: {
+          click: () => {},
+        },
+      },
+      {
+        icon: MailOutlined,
+        size: '32',
+        title: t('消息'),
+        color: '#5cdbd3',
+        eventObject: {
+          click: () => {},
+        },
+      },
+      {
+        icon: TagsOutlined,
+        size: '32',
+        title: t('标签'),
+        color: '#ff85c0',
+        eventObject: {
+          click: () => {},
+        },
+      },
+      {
+        icon: SettingOutlined,
+        size: '32',
+        title: t('配置'),
+        color: '#ffc069',
+        eventObject: {
+          click: () => {},
+        },
+      },
+    ];
+  });
+
+  onMounted(async () => {
+    const data = await getConsoleInfo();
+    visits.value = data.visits;
+    saleroom.value = data.saleroom;
+    orderLarge.value = data.orderLarge;
+    volume.value = data.volume;
+    loading.value = false;
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/dashboard/console/console_merchant.vue b/web/src/views/dashboard/console/console_merchant.vue
new file mode 100644
index 0000000..a9c7b3a
--- /dev/null
+++ b/web/src/views/dashboard/console/console_merchant.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="商户首页"> 这是商户的首页，如果需要，你可以定制TA </n-card>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/web/src/views/dashboard/console/console_tenant.vue b/web/src/views/dashboard/console/console_tenant.vue
new file mode 100644
index 0000000..bead149
--- /dev/null
+++ b/web/src/views/dashboard/console/console_tenant.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="租户首页"> 这是租户的首页，如果需要，你可以定制TA </n-card>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/web/src/views/dashboard/console/console_user.vue b/web/src/views/dashboard/console/console_user.vue
new file mode 100644
index 0000000..4fc2ae3
--- /dev/null
+++ b/web/src/views/dashboard/console/console_user.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="用户首页">
+        这是普通用户的首页，如果需要，你可以定制TA
+      </n-card>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/web/src/views/dashboard/workplace/workplace.vue b/web/src/views/dashboard/workplace/workplace.vue
new file mode 100644
index 0000000..ac44a58
--- /dev/null
+++ b/web/src/views/dashboard/workplace/workplace.vue
@@ -0,0 +1,328 @@
+<template>
+  <div>
+    <div class="mt-2">
+      <n-card :bordered="false" title="工作台">
+        <n-grid cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen">
+          <n-gi>
+            <div class="flex items-center">
+              <div>
+                <n-avatar circle :size="64" :src="schoolboy" />
+              </div>
+              <div>
+                <p class="px-4 text-xl">早安，{{ username }}，开始您一天的工作吧！</p>
+                <p class="px-4 text-gray-400">今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
+              </div>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div class="flex justify-end w-full">
+              <div class="flex flex-1 flex-col justify-center text-right">
+                <span class="text-secondary">项目数</span>
+                <span class="text-2xl">16</span>
+              </div>
+              <div class="flex flex-1 flex-col justify-center text-right">
+                <span class="text-secondary">待办</span>
+                <span class="text-2xl">3/15</span>
+              </div>
+              <div class="flex flex-1 flex-col justify-center text-right">
+                <span class="text-secondary">消息</span>
+                <span class="text-2xl">35</span>
+              </div>
+            </div>
+          </n-gi>
+        </n-grid>
+      </n-card>
+    </div>
+    <n-grid class="mt-4" cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="9">
+      <n-gi>
+        <n-card
+          :segmented="{ content: true }"
+          content-style="padding: 0;"
+          :bordered="false"
+          size="small"
+          title="项目"
+        >
+          <div class="flex flex-wrap project-card">
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
+              <div class="flex">
+                <span>
+                  <n-icon size="30">
+                    <GithubOutlined />
+                  </n-icon>
+                </span>
+                <span class="text-lg ml-4">Github</span>
+              </div>
+              <div class="flex mt-2 h-10 text-gray-400">
+                是一个面向开源及私有软件项目的托管平台。
+              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 开源君，2021-07-04</div>
+            </n-card>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
+              <div class="flex">
+                <span>
+                  <n-icon size="30" color="#42b983">
+                    <LogoVue />
+                  </n-icon>
+                </span>
+                <span class="text-lg ml-4">Vue</span>
+              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 渐进式 JavaScript 框架</div>
+              <div class="flex mt-2 h-10 text-gray-400"> 学不动也要学，2021-07-04</div>
+            </n-card>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
+              <div class="flex">
+                <span>
+                  <n-icon size="30" color="#e44c27">
+                    <Html5Outlined />
+                  </n-icon>
+                </span>
+                <span class="text-lg ml-4">Html5</span>
+              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> HTML5是互联网的下一代标准。</div>
+              <div class="flex mt-2 h-10 text-gray-400"> 撸码也是一种艺术 2021-04-01</div>
+            </n-card>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
+              <div class="flex">
+                <span>
+                  <n-icon size="30" color="#dd0031">
+                    <LogoAngular />
+                  </n-icon>
+                </span>
+                <span class="text-lg ml-4">Angular</span>
+              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 现代 Web 开发平台，百万粉丝热捧。</div>
+              <div class="flex mt-2 h-10 text-gray-400"> 铁粉君 2021-07-04。</div>
+            </n-card>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
+              <div class="flex">
+                <span>
+                  <n-icon size="30" color="#61dafb">
+                    <LogoReact />
+                  </n-icon>
+                </span>
+                <span class="text-lg ml-4">React</span>
+              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 用于构建用户界面的 JavaScript 库。</div>
+              <div class="flex mt-2 h-10 text-gray-400"> 技术牛 2021-07-04。</div>
+            </n-card>
+            <n-card
+              size="small"
+              class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
+              hoverable
+            >
+              <div class="flex">
+                <span>
+                  <n-icon size="30">
+                    <LogoJavascript />
+                  </n-icon>
+                </span>
+                <span class="text-lg ml-4">Js</span>
+              </div>
+              <div class="flex mt-2 h-10 text-gray-400"> 路是走出来的，而不是空想出来的。</div>
+              <div class="flex mt-2 h-10 text-gray-400"> 架构组 2021-07-04</div>
+            </n-card>
+          </div>
+        </n-card>
+
+        <n-card
+          :segmented="{ content: true }"
+          content-style="padding-top: 0;padding-bottom: 0;"
+          :bordered="false"
+          size="small"
+          title="动态"
+          class="mt-4"
+        >
+          <template #header-extra><a href="javascript:;">更多</a></template>
+          <n-list>
+            <n-list-item>
+              <template #prefix>
+                <n-avatar circle :size="40" :src="schoolboy" />
+              </template>
+              <n-thing :title="username + '，刚才把工作台页面随便写了一些，凑合能看了！'">
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template
+                >
+              </n-thing>
+            </n-list-item>
+            <n-list-item>
+              <template #prefix>
+                <n-avatar circle :size="40" :src="schoolboy" />
+              </template>
+              <n-thing :title="username + ' 在 开源组 创建了项目 hotGo？'">
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template
+                >
+              </n-thing>
+            </n-list-item>
+            <n-list-item>
+              <template #prefix>
+                <n-avatar circle :size="40" :src="schoolboy" />
+              </template>
+              <n-thing title="@It界风清扬，向hotGo提交了一个bug，抽时间看看吧！">
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template
+                >
+              </n-thing>
+            </n-list-item>
+            <n-list-item>
+              <template #prefix>
+                <n-avatar circle :size="40" :src="schoolboy" />
+              </template>
+              <n-thing title="技术部那几位童鞋，再次警告，不要摸鱼，不要摸鱼，不要摸鱼啦！">
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template
+                >
+              </n-thing>
+            </n-list-item>
+            <n-list-item>
+              <template #prefix>
+                <n-avatar circle :size="40" :src="schoolboy" />
+              </template>
+              <n-thing title="上班不摸鱼，和咸鱼有什么区别（这话真不是我说的哈）！">
+                <template #description
+                  ><p class="text-xs text-gray-500">2021-07-04 20:37:16</p></template
+                >
+              </n-thing>
+            </n-list-item>
+            <n-list-item>
+              <template #prefix>
+                <n-avatar circle :size="40" :src="schoolboy" />
+              </template>
+              <n-thing title="页面切换其实也支持缓存，只是加了过度效果，看起来像是重新渲染了">
+                <template #description>
+                  <p class="text-gray-400">
+                    <n-input type="text" placeholder="不信，输点文字试试" />
+                  </p>
+                </template>
+              </n-thing>
+            </n-list-item>
+          </n-list>
+        </n-card>
+      </n-gi>
+      <n-gi>
+        <n-card
+          :segmented="{ content: true }"
+          content-style="padding: 0;"
+          :bordered="false"
+          size="small"
+          title="快捷操作"
+        >
+          <div class="flex flex-wrap project-card">
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
+                <span class="text-center">
+                  <n-icon size="30" color="#68c755">
+                    <DashboardOutlined />
+                  </n-icon>
+                </span>
+                <span class="text-lx text-center">主控台</span>
+              </div>
+            </n-card>
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
+                <span class="text-center">
+                  <n-icon size="30" color="#fab251">
+                    <ProfileOutlined />
+                  </n-icon>
+                </span>
+                <span class="text-lx text-center">列表</span>
+              </div>
+            </n-card>
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
+                <span class="text-center">
+                  <n-icon size="30" color="#1890ff">
+                    <FileProtectOutlined />
+                  </n-icon>
+                </span>
+                <span class="text-lx text-center">表单</span>
+              </div>
+            </n-card>
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
+                <span class="text-center">
+                  <n-icon size="30" color="#f06b96">
+                    <ApartmentOutlined />
+                  </n-icon>
+                </span>
+                <span class="text-lx text-center">权限管理</span>
+              </div>
+            </n-card>
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
+                <span class="text-center">
+                  <n-icon size="30" color="#7238d1">
+                    <SettingOutlined />
+                  </n-icon>
+                </span>
+                <span class="text-lx text-center">系统管理</span>
+              </div>
+            </n-card>
+            <n-card size="small" class="cursor-pointer project-card-item" hoverable>
+              <div class="flex flex-col justify-center text-gray-500">
+                <span class="text-center">
+                  <n-icon size="30" color="">
+                    <DashboardOutlined />
+                  </n-icon>
+                </span>
+                <span class="text-lx text-center">主控台</span>
+              </div>
+            </n-card>
+          </div>
+        </n-card>
+        <n-card :segmented="{ content: true }" :bordered="false" size="small" class="mt-4">
+          <img src="~@/assets/images/Business.svg" class="w-full" />
+        </n-card>
+      </n-gi>
+    </n-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import schoolboy from '@/assets/images/schoolboy.png';
+  import { useUserStore } from '@/store/modules/user';
+  import {
+    GithubOutlined,
+    DashboardOutlined,
+    ProfileOutlined,
+    FileProtectOutlined,
+    SettingOutlined,
+    ApartmentOutlined,
+    Html5Outlined,
+  } from '@vicons/antd';
+  import { LogoVue, LogoAngular, LogoReact, LogoJavascript } from '@vicons/ionicons5';
+
+  const userStore = useUserStore();
+  const username = userStore.info.username;
+</script>
+
+<style lang="less" scoped>
+  .project-card {
+    margin-right: -6px;
+
+    &-item {
+      margin: -1px;
+      width: 33.333333%;
+    }
+  }
+</style>
diff --git a/web/src/views/develop/addons/index.vue b/web/src/views/develop/addons/index.vue
new file mode 100644
index 0000000..08b9d74
--- /dev/null
+++ b/web/src/views/develop/addons/index.vue
@@ -0,0 +1,326 @@
+<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"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="1090"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            创建新插件
+          </n-button>
+        </template>
+      </BasicTable>
+
+      <n-modal
+        v-model:show="showModal"
+        :mask-closable="false"
+        :show-icon="false"
+        preset="dialog"
+        title="创建新插件"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-alert :show-icon="false" type="info">
+          注意：插件创建成功后会在服务端对应的项目目录中生成插件模块文件，并自动注册到当前项目中。
+        </n-alert>
+        <n-form
+          :model="formParams"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="插件标签" path="label">
+            <n-input placeholder="请输入" v-model:value="formParams.label" />
+            <template #feedback>显示在插件列表中的模块名称. 不要超过20个字符</template>
+          </n-form-item>
+
+          <n-form-item label="插件包名" path="name">
+            <n-input placeholder="请输入" v-model:value="formParams.name" />
+            <template #feedback>
+              系统按照此名称创建和查找插件定义， 只能英文和下划线组成，建议全部小写，例如：hgexample
+            </template>
+          </n-form-item>
+
+          <n-form-item label="功能分组" path="group">
+            <n-select
+              placeholder="请选择"
+              :options="dict.getOptionUnRef('addonsGroupOptions')"
+              v-model:value="formParams.group"
+              :on-update:value="onUpdateValueGroup"
+            />
+          </n-form-item>
+
+          <n-form-item label="扩展功能" path="extend">
+            <n-checkbox-group v-model:value="formParams.extend">
+              <n-space item-style="display: flex;">
+                <n-checkbox
+                  :value="option.value"
+                  :label="option.label"
+                  v-for="option in dict.getOptionUnRef('addonsExtend')"
+                  :key="option"
+                />
+              </n-space>
+            </n-checkbox-group>
+          </n-form-item>
+
+          <n-form-item label="版本" path="version">
+            <n-input placeholder="请输入" v-model:value="formParams.version" />
+            <template #feedback>此版本号用于插件的版本更新</template>
+          </n-form-item>
+
+          <n-form-item label="简介" path="brief">
+            <n-input placeholder="请输入" v-model:value="formParams.brief" />
+          </n-form-item>
+
+          <n-form-item label="使用说明" path="description">
+            <n-input
+              type="textarea"
+              placeholder="使用说明"
+              v-model:value="formParams.description"
+            />
+            <template #feedback>详细介绍插件的功能和使用方法</template>
+          </n-form-item>
+
+          <n-form-item label="作者" path="author">
+            <n-input placeholder="请输入" v-model:value="formParams.author" />
+          </n-form-item>
+        </n-form>
+
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showModal = false)">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确认创建</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { NIcon, useMessage, useDialog, useNotification } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { List, Build, UnInstall, Install, Upgrade } from '@/api/develop/addons';
+  import { PlusOutlined } from '@vicons/antd';
+  import { newState, schemas, columns, loadOptions } from './model';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import { useDictStore } from '@/store/modules/dict';
+
+  const dict = useDictStore();
+  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 checkedIds = ref([]);
+  const searchFormRef = ref<any>();
+  const dialogWidth = computed(() => {
+    return adaModalWidth();
+  });
+
+  const actionColumn = reactive({
+    width: 220,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '安装模块',
+            onClick: handleInstall.bind(null, record),
+            ifShow: () => {
+              return record.installStatus !== 1;
+            },
+          },
+          {
+            type: 'warning',
+            label: '更新配置',
+            onClick: handleUpgrade.bind(null, record),
+            ifShow: () => {
+              return record.installStatus === 1;
+            },
+          },
+          {
+            type: 'error',
+            label: '卸载模块',
+            onClick: handleUnInstall.bind(null, record),
+            ifShow: () => {
+              return record.installStatus === 1;
+            },
+          },
+        ],
+      });
+    },
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function onCheckedRow(rowKeys) {
+    checkedIds.value = rowKeys;
+  }
+
+  const loadDataTable = async (res) => {
+    return await List({ ...res, ...searchFormRef.value?.formModel });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleInstall(record: Recordable) {
+    dialog.info({
+      title: '提示',
+      content: '你确定要安装 【' + record.label + '】 模块？安装成功后需要重启服务才能生效！',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Install(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleUpgrade(record: Recordable) {
+    dialog.warning({
+      title: '提示',
+      content: '你确定要更新 【' + record.label + '】 模块？更新成功后需要重启服务才能生效！',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Upgrade(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleUnInstall(record: Recordable) {
+    dialog.error({
+      title: '提示',
+      content: '你确定要卸载 【' + record.label + '】 模块？卸载成功后需要重启服务才能生效！',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        UnInstall(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleSubmit(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    reloadTable();
+  }
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = newState(null);
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        dialog.info({
+          title: '提示',
+          content:
+            '你确定要提交生成吗？热编译生成后如果列表自动刷新没有出现新插件请等几秒刷新即可。否则请手动重启服务后刷新页面！',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            Build(formParams.value).then((_res) => {
+              showModal.value = false;
+              buildSuccessNotify();
+            });
+          },
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  function onUpdateValueGroup(value) {
+    formParams.value.group = value;
+  }
+
+  function buildSuccessNotify() {
+    let count = 10;
+    const n = notification.success({
+      title: '插件构建成功',
+      content: `如果你使用的热编译，页面将在 ${count} 秒后自动刷新插件列表即可生效。否则请手动重启服务后刷新页面！`,
+      duration: 10000,
+      closable: false,
+      onAfterEnter: () => {
+        const minusCount = () => {
+          count--;
+          n.content = `如果你使用的热编译，页面将在 ${count} 秒后自动刷新插件列表即可生效。否则请手动重启服务后刷新页面！`;
+          if (count > 0) {
+            window.setTimeout(minusCount, 1000);
+          }
+        };
+        window.setTimeout(minusCount, 1000);
+      },
+      onAfterLeave: () => {
+        location.reload();
+      },
+    });
+  }
+
+  onMounted(async () => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/develop/addons/model.ts b/web/src/views/develop/addons/model.ts
new file mode 100644
index 0000000..575b9ad
--- /dev/null
+++ b/web/src/views/develop/addons/model.ts
@@ -0,0 +1,179 @@
+import { cloneDeep } from 'lodash-es';
+import { h, ref } from 'vue';
+import { fallbackSrc } from '@/utils/hotgo';
+import { isUrl } from '@/utils/is';
+import { NIcon, NIconWrapper, NImage, NTag } from 'naive-ui';
+import { getIconComponent } from '@/utils/icons';
+import { FormSchema } from '@/components/Form';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export const genInfoObj = {
+  label: '',
+  name: '',
+  group: 1,
+  extend: ['resourcePublic', 'resourceTemplate'],
+  version: 'v1.0.0',
+  brief: '',
+  description: '',
+  author: '',
+};
+
+export function newState(state) {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(genInfoObj);
+}
+
+export const columns = [
+  {
+    title: '图标',
+    key: 'logo',
+    width: 80,
+    render(row) {
+      if (isUrl(row.logo)) {
+        return h(NImage, {
+          width: 48,
+          height: 48,
+          src: row.logo,
+          fallbackSrc: fallbackSrc(),
+          style: {
+            width: '48px',
+            height: '48px',
+            'max-width': '100%',
+            'max-height': '100%',
+          },
+        });
+      } else {
+        return h(
+          NIconWrapper,
+          {
+            size: 48,
+            borderRadius: 8,
+          },
+          {
+            default: () =>
+              h(
+                NIcon,
+                {
+                  size: 36,
+                  style: {
+                    marginTop: '-8px',
+                  },
+                },
+                {
+                  default: () => h(getIconComponent(row.logo)),
+                }
+              ),
+          }
+        );
+      }
+    },
+  },
+  {
+    title: '模块名称',
+    key: 'name',
+    width: 120,
+    render(row) {
+      return h('div', {
+        innerHTML:
+          '<div >' + row.label + '<br><span style="opacity: 0.8;">' + row.name + '</span></div>',
+      });
+    },
+  },
+  {
+    title: '作者',
+    key: 'author',
+    width: 100,
+  },
+  {
+    title: '分组',
+    key: 'groupName',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'info',
+          bordered: false,
+        },
+        {
+          default: () => row.groupName,
+        }
+      );
+    },
+    width: 120,
+  },
+  {
+    title: '简介',
+    key: 'brief',
+    render(row) {
+      return row.brief;
+    },
+    width: 180,
+  },
+  {
+    title: '详细描述',
+    key: 'description',
+    width: 300,
+    render(row) {
+      return h('p', { id: 'app' }, [
+        h('div', {
+          innerHTML: '<div style="white-space: pre-wrap">' + row.description + '</div>',
+        }),
+      ]);
+    },
+  },
+  {
+    title: '版本',
+    key: 'version',
+    width: 100,
+  },
+];
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'name',
+    component: 'NInput',
+    label: '模块名称',
+    componentProps: {
+      placeholder: '请输入模块名称或标签',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: [{ trigger: ['blur'] }],
+  },
+  {
+    field: 'group',
+    component: 'NSelect',
+    label: '分组',
+    componentProps: {
+      placeholder: '请选择分组',
+      options: dict.getOption('addonsGroupOptions'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '安装状态',
+    componentProps: {
+      placeholder: '请选择状态',
+      options: dict.getOption('addonsInstallStatus'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export function loadOptions() {
+  dict.loadOptions(['addonsGroupOptions', 'addonsInstallStatus', 'addonsExtend']);
+}
diff --git a/web/src/views/develop/code/components/BaseInfo.vue b/web/src/views/develop/code/components/BaseInfo.vue
new file mode 100644
index 0000000..9594812
--- /dev/null
+++ b/web/src/views/develop/code/components/BaseInfo.vue
@@ -0,0 +1,614 @@
+<template>
+  <div>
+    <n-spin :show="bodyShow" description="请稍候...">
+      <n-card
+        :bordered="true"
+        title="基本设置"
+        class="proCard mt-2"
+        size="small"
+        :segmented="{ content: true }"
+      >
+        <n-form ref="formRef" :model="formValue">
+          <n-row :gutter="24">
+            <n-col :span="6" style="min-width: 200px">
+              <n-form-item label="生成类型" path="title">
+                <n-select
+                  placeholder="请选择"
+                  :options="selectList.genType"
+                  v-model:value="formValue.genType"
+                />
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="6" style="min-width: 200px">
+              <n-form-item label="实体命名" path="varName">
+                <n-input placeholder="请输入" v-model:value="formValue.varName" />
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="6" style="min-width: 200px">
+              <n-form-item
+                label="数据库"
+                path="dbName"
+                v-show="formValue.genType >= 10 && formValue.genType < 20"
+              >
+                <n-select
+                  placeholder="请选择"
+                  :options="selectList.db"
+                  v-model:value="formValue.dbName"
+                  @update:value="handleDbUpdateValue"
+                />
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="6" style="min-width: 200px">
+              <n-form-item
+                label="数据库表"
+                path="tableName"
+                v-show="formValue.genType >= 10 && formValue.genType < 20"
+              >
+                <n-select
+                  filterable
+                  tag
+                  :loading="tablesLoading"
+                  placeholder="请选择"
+                  :options="tablesOption"
+                  v-model:value="formValue.tableName"
+                  @update:value="handleTableUpdateValue"
+                  :disabled="formValue.dbName === ''"
+                />
+              </n-form-item>
+            </n-col>
+
+            <!-- 树表-->
+            <template v-if="formValue.genType == 11">
+              <n-col :span="6" style="min-width: 200px">
+                <n-form-item path="title">
+                  <template #label>
+                    <div class="flex flex-row items-end"
+                      >树名称字段
+                      <n-tooltip trigger="hover">
+                        <template #trigger>
+                          <n-button strong text>
+                            <template #icon>
+                              <n-icon size="15" color="#2d8cf0">
+                                <QuestionCircleOutlined />
+                              </n-icon>
+                            </template>
+                          </n-button>
+                        </template>
+                        树节点的显示名称字段名， 如：`title`
+                      </n-tooltip>
+                    </div>
+                  </template>
+                  <n-select
+                    filterable
+                    tag
+                    :loading="columnsLoading"
+                    placeholder="请选择"
+                    :options="columnsOption"
+                    v-model:value="formValue.options.tree.titleColumn"
+                  />
+                </n-form-item>
+              </n-col>
+
+              <n-col :span="6" style="min-width: 200px">
+                <n-form-item label="树表格样式" path="styleType">
+                  <n-radio-group v-model:value="formValue.options.tree.styleType" name="styleType">
+                    <n-radio
+                      v-for="status in selectList.treeStyleType"
+                      :value="status.value"
+                      :label="status.label"
+                      >{{ status.label }}</n-radio
+                    >
+                  </n-radio-group>
+                </n-form-item>
+              </n-col>
+            </template>
+
+            <!-- 树表-->
+
+            <n-col :span="18">
+              <n-form-item
+                label="表格头部按钮组"
+                path="tableName"
+                v-show="formValue.genType >= 10 && formValue.genType < 20"
+              >
+                <n-checkbox-group v-model:value="formValue.options.headOps">
+                  <n-space item-style="display: flex;">
+                    <n-checkbox value="add" label="新增表单按钮" />
+                    <n-checkbox value="batchDel" label="批量删除按钮" />
+                    <n-checkbox value="export" label="导出按钮" />
+                  </n-space>
+                </n-checkbox-group>
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="24">
+              <n-form-item
+                label="表格列操作"
+                path="columnOps"
+                v-show="formValue.genType >= 10 && formValue.genType < 20"
+              >
+                <n-checkbox-group v-model:value="formValue.options.columnOps">
+                  <n-space item-style="display: flex;">
+                    <n-checkbox value="edit" label="编辑" />
+                    <n-checkbox value="status" label="状态修改" />
+                    <n-popover trigger="hover">
+                      <template #trigger>
+                        <n-icon size="15" class="tips-help-icon" color="#2d8cf0">
+                          <QuestionCircleOutlined />
+                        </n-icon>
+                      </template>
+                      <span>主表中存在`status`字段时才会生效</span>
+                    </n-popover>
+                    <n-checkbox value="del" label="删除" />
+                    <n-checkbox value="view" label="详情页" />
+                    <n-checkbox value="check" label="开启勾选列" />
+                    <n-checkbox value="notFilterAuth" label="不过滤权限" />
+                    <n-popover trigger="hover">
+                      <template #trigger>
+                        <n-icon size="15" class="tips-help-icon" color="#2d8cf0">
+                          <QuestionCircleOutlined />
+                        </n-icon>
+                      </template>
+                      <span>系统默认会过滤权限，勾选后强制不开启权限验证</span>
+                    </n-popover>
+                  </n-space>
+                </n-checkbox-group>
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="24">
+              <n-form-item
+                label="高级设置"
+                path="autoOps"
+                v-show="formValue.genType >= 10 && formValue.genType < 20"
+              >
+                <n-checkbox-group v-model:value="formValue.options.autoOps">
+                  <n-space item-style="display: flex;">
+                    <n-checkbox value="genMenuPermissions" label="生成菜单权限" />
+                    <n-checkbox value="runDao" label="生成前运行 [gf gen dao]" />
+                    <n-popover trigger="hover">
+                      <template #trigger>
+                        <n-icon size="15" class="tips-help-icon" color="#2d8cf0">
+                          <QuestionCircleOutlined />
+                        </n-icon>
+                      </template>
+                      <span>如果你选择的表已经生成过dao相关代码，取消勾选可减少生成时间</span>
+                    </n-popover>
+                    <n-checkbox value="runService" label="生成后运行 [gf gen service]" />
+                    <n-popover trigger="hover">
+                      <template #trigger>
+                        <n-icon size="15" class="tips-help-icon" color="#2d8cf0">
+                          <QuestionCircleOutlined />
+                        </n-icon>
+                      </template>
+                      <span>如果是插件模块，勾选后也会自动在对应插件下运行service相关代码生成</span>
+                    </n-popover>
+                    <n-checkbox
+                      value="genFuncDict"
+                      label="生成字典选项"
+                      @click="handleCheckboxGenFuncDict"
+                    />
+                    <n-popover trigger="hover">
+                      <template #trigger>
+                        <n-icon size="15" class="tips-help-icon" color="#2d8cf0">
+                          <QuestionCircleOutlined />
+                        </n-icon>
+                      </template>
+                      <span>将表数据生成为数据选项，并注册到内置的方法字典</span>
+                    </n-popover>
+                    <n-checkbox value="forcedCover" label="强制覆盖" />
+                    <n-popover trigger="hover">
+                      <template #trigger>
+                        <n-icon size="15" class="tips-help-icon" color="#2d8cf0">
+                          <QuestionCircleOutlined />
+                        </n-icon>
+                      </template>
+                      <span>强制覆盖所有需要生成的代码文件，但不包含菜单SQL文件</span>
+                    </n-popover>
+                  </n-space>
+                </n-checkbox-group>
+              </n-form-item>
+            </n-col>
+
+            <n-col
+              :span="6"
+              style="min-width: 200px"
+              v-show="formValue.options?.autoOps?.includes('genMenuPermissions')"
+            >
+              <n-form-item path="pid">
+                <template #label>
+                  <span>上级菜单</span>
+                  <n-button class="ml-2" text type="primary" strong @click="handleAddMenu"
+                    >菜单管理</n-button
+                  >
+                </template>
+                <n-tree-select
+                  :options="optionMenuTree"
+                  :value="formValue.options.menu.pid"
+                  @update:value="handleUpdateMenuPid"
+                />
+              </n-form-item>
+            </n-col>
+
+            <n-col
+              :span="6"
+              style="min-width: 200px"
+              v-show="formValue.options?.autoOps?.includes('genMenuPermissions')"
+            >
+              <n-form-item label="菜单名称" path="tableComment">
+                <n-input placeholder="请输入" v-model:value="formValue.tableComment" />
+              </n-form-item>
+            </n-col>
+
+            <n-col
+              :span="6"
+              style="min-width: 200px"
+              v-show="formValue.options?.autoOps?.includes('genMenuPermissions')"
+            >
+              <n-form-item label="菜单图标" path="menuIcon">
+                <IconSelector style="width: 100%" v-model:value="formValue.options.menu.icon" />
+              </n-form-item>
+            </n-col>
+
+            <n-col
+              :span="6"
+              style="min-width: 200px"
+              v-show="formValue.options?.autoOps?.includes('genMenuPermissions')"
+            >
+              <n-form-item label="菜单排序" path="menuIcon">
+                <n-input-number
+                  style="width: 100%"
+                  placeholder="请输入"
+                  v-model:value="formValue.options.menu.sort"
+                  clearable
+                />
+              </n-form-item>
+            </n-col>
+          </n-row>
+        </n-form>
+      </n-card>
+
+      <n-card
+        :bordered="true"
+        title="关联表设置"
+        class="proCard mt-2"
+        size="small"
+        :segmented="{ content: true }"
+        v-show="formValue.genType >= 10 && formValue.genType < 20"
+      >
+        <template #header-extra>
+          <n-space>
+            <n-button
+              type="primary"
+              @click="addJoin"
+              :disabled="formValue.options?.join?.length >= 20"
+              >新增关联表</n-button
+            >
+          </n-space>
+        </template>
+
+        <n-form ref="formRef" :model="formValue">
+          <n-alert type="warning" :show-icon="false" v-if="formValue.options?.join?.length > 3">关联表数量建议在三个以下</n-alert>
+          <div class="mt-4"></div>
+          <n-row :gutter="6" v-for="(join, index) in formValue.options.join" :key="index">
+            <n-col :span="6" style="min-width: 200px">
+              <n-form-item label="关联表" path="join.linkTable">
+                <n-select
+                  filterable
+                  tag
+                  :loading="tablesLoading"
+                  placeholder="请选择"
+                  :options="linkTablesOption"
+                  v-model:value="join.linkTable"
+                  @update:value="handleLinkTableUpdateValue(join)"
+                  :disabled="formValue.dbName === ''"
+                />
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="3" style="min-width: 100px">
+              <n-form-item
+                label="别名"
+                path="join.alias"
+                v-show="formValue.genType >= 10 && formValue.genType < 20"
+              >
+                <n-input
+                  placeholder="请输入"
+                  v-model:value="join.alias"
+                  @update:value="updateJoinAlias"
+                />
+
+                <template #feedback> {{ joinAliasFeedback }}</template>
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="3" style="min-width: 100px">
+              <n-form-item label="关联方式" path="join.linkMode">
+                <n-select
+                  placeholder="请选择"
+                  :options="selectList.linkMode"
+                  v-model:value="join.linkMode"
+                />
+              </n-form-item>
+            </n-col>
+            <n-col :span="5" style="min-width: 180px">
+              <n-form-item label="关联字段" path="join.field">
+                <n-select
+                  filterable
+                  tag
+                  :loading="linkColumnsLoading"
+                  placeholder="请选择"
+                  :options="linkColumnsOption[join.uuid]"
+                  v-model:value="join.field"
+                />
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="5" style="min-width: 180px">
+              <n-form-item label="主表关联字段" path="join.masterField">
+                <n-select
+                  filterable
+                  tag
+                  :loading="columnsLoading"
+                  placeholder="请选择"
+                  :options="columnsOption"
+                  v-model:value="join.masterField"
+                />
+              </n-form-item>
+            </n-col>
+
+            <n-col :span="2" style="min-width: 50px">
+              <n-space>
+                <n-form-item label="操作" path="title">
+                  <n-button @click="delJoin(join, index)" size="small" strong secondary type="error"
+                    >移除</n-button
+                  >
+                </n-form-item>
+              </n-space>
+            </n-col>
+          </n-row>
+        </n-form>
+      </n-card>
+    </n-spin>
+
+    <MenuModal ref="menuModalRef" @reloadTable="loadMenuTreeOption" />
+    <SetFuncDict
+      ref="setFuncDictRef"
+      @update="handleUpdateFuncDict"
+      :columnsOption="columnsOption"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, computed, watch } from 'vue';
+  import { FormInst, useDialog, useMessage } from 'naive-ui';
+  import { newState, selectListObj } from './model';
+  import { TableSelect, ColumnSelect } from '@/api/develop/code';
+  import { getRandomString } from '@/utils/charset';
+  import IconSelector from '@/components/IconSelector/index.vue';
+  import { QuestionCircleOutlined } from '@vicons/antd';
+  import { getMenuList } from '@/api/system/menu';
+  import { cloneDeep } from 'lodash-es';
+  import { isLetterBegin } from '@/utils/is';
+  import MenuModal from '@/views/permission/menu/menuModal.vue';
+  import SetFuncDict from './SetFuncDict.vue';
+
+  const message = useMessage();
+  const dialog = useDialog();
+  const timer = ref();
+  const formRef = ref<FormInst | null>(null);
+  const bodyShow = ref(true);
+  const tablesLoading = ref(false);
+  const columnsLoading = ref(false);
+  const linkColumnsLoading = ref(false);
+  const tablesOption = ref<any>([]); // 数据库表选项
+  const columnsOption = ref<any>([]); // 主表字段选项
+  const linkTablesOption = ref<any>([]); // 关联表选项
+  const linkColumnsOption = ref<any>([]); // 关联表字段选项
+  const menuModalRef = ref();
+  const setFuncDictRef = ref();
+
+  const optionMenuTree = ref([
+    {
+      id: 0,
+      key: 0,
+      label: '根目录',
+      pid: 0,
+      title: '根目录',
+      type: 1,
+    },
+  ]);
+
+  const emit = defineEmits(['update:value']);
+
+  interface Props {
+    value?: any;
+    selectList: any;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    value: newState(null),
+    selectList: selectListObj,
+  });
+
+  watch(props, async (newVal, oldVal) => {
+    if (newVal.value.dbName != oldVal.value.dbName) {
+      await instLoad();
+    }
+  });
+
+  const formValue = computed({
+    get() {
+      return props.value;
+    },
+    set(value) {
+      emit('update:value', value);
+    },
+  });
+
+  onMounted(() => {
+    timer.value = setInterval(async () => {
+      if (props.value.id > 0) {
+        clearTimeout(timer.value);
+        await instLoad();
+        // 切换tab时会导致选项被清空，这里重新进行加载
+        await loadLinkColumnsOption();
+        await loadMenuTreeOption();
+        bodyShow.value = false;
+      }
+    }, 30);
+  });
+
+  const loadMenuTreeOption = async () => {
+    const options = await getMenuList();
+    optionMenuTree.value = [
+      {
+        id: 0,
+        key: 0,
+        label: '根目录',
+        pid: 0,
+        title: '根目录',
+        type: 1,
+      },
+    ];
+    optionMenuTree.value = optionMenuTree.value.concat(options.list);
+  };
+
+  const loadSelect = async () => {
+    columnsOption.value = await loadColumnSelect(formValue.value.tableName);
+  };
+
+  async function instLoad() {
+    columnsLoading.value = true;
+    tablesLoading.value = true;
+    await loadSelect();
+    await loadTableSelect(formValue.value.dbName);
+    tablesLoading.value = false;
+    columnsLoading.value = false;
+  }
+
+  async function loadLinkColumnsOption() {
+    if (formValue.value.options.join === undefined) {
+      return;
+    }
+    for (let i = 0; i < formValue.value.options.join.length; i++) {
+      linkColumnsLoading.value = true;
+      linkColumnsOption.value[formValue.value.options.join[i].uuid] = await loadColumnSelect(
+        formValue.value.options.join[i].linkTable
+      );
+      linkColumnsLoading.value = false;
+    }
+  }
+
+  // 处理选项更新
+  async function handleDbUpdateValue(value, _option) {
+    tablesLoading.value = true;
+    await loadTableSelect(value);
+    tablesLoading.value = false;
+  }
+
+  async function loadTableSelect(value) {
+    const options = await TableSelect({ name: value });
+    tablesOption.value = cloneDeep(options);
+    linkTablesOption.value = cloneDeep(options);
+  }
+
+  async function loadColumnSelect(value) {
+    return await ColumnSelect({ name: formValue.value.dbName, table: value });
+  }
+
+  function handleTableUpdateValue(value, option) {
+    formValue.value.varName = option?.defVarName as string;
+    formValue.value.daoName = option?.daoName as string;
+    formValue.value.tableComment = option?.defTableComment as string;
+  }
+
+  function addJoin() {
+    if (formValue.value.options.join === undefined) {
+      formValue.value.options.join = [];
+    }
+    let uuid = getRandomString(16, true);
+    formValue.value.options.join.push({
+      uuid: uuid,
+      linkTable: '',
+      alias: '',
+      linkMode: 1,
+      field: '',
+      masterField: '',
+      daoName: '',
+      columns: [],
+    });
+    linkColumnsOption.value[uuid] = [];
+  }
+
+  function delJoin(join, index) {
+    formValue.value.options.join.splice(index, 1);
+    delete linkColumnsOption.value[join.uuid];
+    let i = linkTablesOption.value.findIndex((res) => res.value === join.linkTable);
+    if (i > -1) {
+      linkTablesOption.value[i].disabled = false;
+    }
+  }
+
+  async function handleLinkTableUpdateValue(join) {
+    let i = linkTablesOption.value.findIndex((res) => res.value === join.linkTable);
+    if (i > -1) {
+      join.alias = linkTablesOption.value[i].defAlias;
+      join.daoName = linkTablesOption.value[i].daoName;
+      linkTablesOption.value[i].disabled = true;
+    }
+
+    linkColumnsLoading.value = true;
+    linkColumnsOption.value[join.uuid] = await loadColumnSelect(join.linkTable);
+    // 清空更新前的字段
+    join.field = '';
+    linkColumnsLoading.value = false;
+  }
+
+  const joinAliasFeedback = ref('');
+  function updateJoinAlias(value: string) {
+    if (value.length < 3) {
+      joinAliasFeedback.value = '别名不能小于3位';
+      return;
+    }
+
+    if (!isLetterBegin(value)) {
+      joinAliasFeedback.value = '别名必须以字母开头';
+      return;
+    }
+    joinAliasFeedback.value = '';
+  }
+
+  function handleUpdateMenuPid(value: string | number | Array<string | number> | null) {
+    formValue.value.options.menu.pid = value;
+  }
+
+  function handleAddMenu() {
+    menuModalRef.value.openModal();
+  }
+
+  function handleCheckboxGenFuncDict() {
+    if (formValue.value.options.autoOps.includes('genFuncDict')) {
+      setFuncDictRef.value.openModal(formValue.value.options.funcDict);
+    }
+  }
+
+  function handleUpdateFuncDict(value) {
+    formValue.value.options.funcDict = value;
+  }
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.default_text_value) {
+    color: var(--n-tab-text-color-active);
+  }
+  ::v-deep(.tips-help-icon) {
+    margin-left: -16px;
+    margin-top: 5px;
+    display: block;
+  }
+</style>
diff --git a/web/src/views/develop/code/components/EditMasterCell.vue b/web/src/views/develop/code/components/EditMasterCell.vue
new file mode 100644
index 0000000..45dfad3
--- /dev/null
+++ b/web/src/views/develop/code/components/EditMasterCell.vue
@@ -0,0 +1,651 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <n-spin :show="show" description="加载中...">
+      <BasicTable
+        size="small"
+        striped
+        resizable
+        canResize
+        virtual-scroll
+        :single-line="false"
+        :showTopRight="false"
+        :pagination="false"
+        :columns="columns"
+        :dataSource="dataSource"
+        :row-key="(row) => row.id"
+        :resizeHeightOffset="-20000"
+        :scroll-x="columnCollapse ? 1400 : 2400"
+        :scroll-y="720"
+        :scrollbar-props="{ trigger: 'none' }"
+      >
+        <template #tableTitle>
+          <n-space>
+            <n-popconfirm @positive-click="reloadColumns">
+              <template #trigger>
+                <n-button type="primary" class="min-left-space">
+                  <template #icon>
+                    <n-icon>
+                      <Reload />
+                    </n-icon>
+                  </template>
+                  重置字段
+                </n-button>
+              </template>
+              重置后将从数据库重新加载表，不保留当前字段配置，确定要重置吗？
+            </n-popconfirm>
+
+            <n-popconfirm @positive-click="syncColumns">
+              <template #trigger>
+                <n-button type="primary" class="min-left-space">
+                  <template #icon>
+                    <n-icon>
+                      <Sync />
+                    </n-icon>
+                  </template>
+                  同步字段
+                </n-button>
+              </template>
+              同步是从数据库重新加载表，保留当前有效的字段配置，确定要同步吗？
+            </n-popconfirm>
+
+            <n-button type="default" class="min-left-space" @click="handleMove">
+              <template #icon>
+                <n-icon>
+                  <MoveOutline />
+                </n-icon>
+              </template>
+              移动字段
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-spin>
+  </n-card>
+  <Move ref="moveRef" v-model:columns="dataSource" />
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, ref } from 'vue';
+  import { BasicTable } from '@/components/Table';
+  import {
+    formatColumns,
+    formGridColsOptions,
+    formGridSpanOptions,
+    genInfoObj,
+    selectListObj,
+  } from '@/views/develop/code/components/model';
+  import { ColumnList } from '@/api/develop/code';
+  import { NInputNumber, NSpace, NButton, NCheckbox, NInput, NSelect, NCascader } from 'naive-ui';
+  import { HelpCircleOutline, Reload, Sync, MoveOutline } from '@vicons/ionicons5';
+  import { cloneDeep } from 'lodash-es';
+  import { renderIcon, renderTooltip } from '@/utils';
+  import Move from './Move.vue';
+
+  const emit = defineEmits(['update:value']);
+
+  interface Props {
+    value?: any;
+    selectList: any;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    value: genInfoObj,
+    selectList: selectListObj,
+  });
+
+  const formValue = computed({
+    get() {
+      return props.value;
+    },
+    set(value) {
+      emit('update:value', value);
+    },
+  });
+
+  const show = ref(false);
+  const dataSource = ref([]);
+  const moveRef = ref();
+  const columnCollapse = ref(true);
+  const columnsCollapseData = computed(() => {
+    return columnCollapse.value
+      ? [
+          {
+            title: '字段列名',
+            key: 'name',
+            width: 100,
+          },
+          {
+            title: '字段描述',
+            key: 'dc',
+            width: 100,
+            render(row) {
+              return h(NInput, {
+                value: row.dc,
+                onUpdateValue: function (e) {
+                  row.dc = e;
+                },
+              });
+            },
+          },
+        ]
+      : [
+          {
+            title: '字段列名',
+            key: 'name',
+            width: 100,
+          },
+          {
+            title: '物理类型',
+            key: 'sqlType',
+            width: 80,
+          },
+          {
+            title: 'Go属性',
+            key: 'goName',
+            width: 100,
+          },
+          {
+            title: 'Go类型',
+            key: 'goType',
+            width: 80,
+          },
+          {
+            title: 'Ts属性',
+            key: 'tsName',
+            width: 100,
+          },
+          {
+            title: 'Ts类型',
+            key: 'tsType',
+            width: 80,
+          },
+          {
+            title: '字段描述',
+            key: 'dc',
+            width: 100,
+            render(row) {
+              return h(NInput, {
+                value: row.dc,
+                onUpdateValue: function (e) {
+                  row.dc = e;
+                },
+              });
+            },
+          },
+        ];
+  });
+
+  const columns = computed(() => {
+    return [
+      {
+        title: '',
+        key: 'id',
+        width: 30,
+        render(row, index) {
+          return index + 1;
+        },
+      },
+      {
+        title(_column) {
+          return h('div', null, [
+            renderTooltip(
+              h(
+                NButton,
+                {
+                  strong: true,
+                  size: 'small',
+                  text: true,
+                  iconPlacement: 'right',
+                },
+                { default: () => '字段', icon: renderIcon(HelpCircleOutline) }
+              ),
+              'Go类型和属性定义取决于你在/hack/config.yaml中的配置参数'
+            ),
+            h(
+              NButton,
+              {
+                strong: true,
+                size: 'small',
+                text: true,
+                type: 'primary',
+                style: { 'margin-left': '20px' },
+                onClick: () => (columnCollapse.value = !columnCollapse.value),
+              },
+              { default: () => (columnCollapse.value ? '展开 >>' : '折叠 <<') }
+            ),
+          ]);
+        },
+        key: 'field',
+        align: 'center',
+        width: 800,
+        children: columnsCollapseData.value,
+      },
+      {
+        width: 800,
+        title(_column) {
+          return renderTooltip(
+            h(
+              NButton,
+              {
+                strong: true,
+                size: 'small',
+                text: true,
+                iconPlacement: 'right',
+              },
+              { default: () => '新增/编辑表单', icon: renderIcon(HelpCircleOutline) }
+            ),
+            '勾选编辑以后会在新增、编辑表单中显示该字段;当同时勾选列表查询时，会优先使用配置的表单组件'
+          );
+        },
+        key: 'edit',
+        align: 'center',
+        children: [
+          {
+            align: 'center',
+            title: '编辑',
+            key: 'isEdit',
+            width: 30,
+            render(row) {
+              const disabled = isEditDisabled(row);
+              const checkbox = h(NCheckbox, {
+                defaultChecked: row.isEdit,
+                disabled: disabled,
+                onUpdateChecked: function (e) {
+                  row.isEdit = e;
+                },
+              });
+              if (!disabled) {
+                return checkbox;
+              }
+              return renderTooltip(checkbox, '该字段属性由系统维护，无需单独配置！');
+            },
+          },
+          {
+            title: '必填',
+            key: 'required',
+            width: 30,
+            align: 'center',
+            render(row) {
+              return h(NCheckbox, {
+                defaultChecked: row.required,
+                disabled: row.name === 'id',
+                onUpdateChecked: function (e) {
+                  row.required = e;
+                },
+              });
+            },
+          },
+          {
+            title: '唯一',
+            key: 'unique',
+            width: 30,
+            align: 'center',
+            render(row) {
+              return h(NCheckbox, {
+                defaultChecked: row.unique,
+                disabled: row.name === 'id',
+                onUpdateChecked: function (e) {
+                  row.unique = e;
+                },
+              });
+            },
+          },
+          {
+            title: '表单组件',
+            key: 'formMode',
+            width: 100,
+            render(row) {
+              return h(NSelect, {
+                consistentMenuWidth: false,
+                value: row.formMode,
+                options: getFormModeOptions(row.tsType),
+                onUpdateValue: function (e) {
+                  row.formMode = e;
+                },
+              });
+            },
+          },
+          {
+            title: '绑定字典',
+            key: 'dictType',
+            width: 100,
+            render(row) {
+              if (row.dictType == 0) {
+                row.dictType = null;
+              }
+              return h(NCascader, {
+                placeholder: ' ',
+                filterable: true,
+                clearable: true,
+                showPath: false,
+                checkStrategy: 'child',
+                disabled: row.name === 'id',
+                value: row.dictType,
+                options: props.selectList?.dictMode ?? [],
+                onUpdateValue: function (e) {
+                  row.dictType = e;
+                },
+              });
+            },
+          },
+          {
+            title: '验证规则',
+            key: 'formRole',
+            width: 100,
+            render(row) {
+              return h(NSelect, {
+                consistentMenuWidth: false,
+                value: row.formRole,
+                disabled: row.name === 'id',
+                options: props.selectList?.formRole ?? [],
+                onUpdateValue: function (e) {
+                  row.formRole = e;
+                },
+              });
+            },
+          },
+          {
+            title(_column) {
+              return h(NSpace, { inline: true }, [
+                renderTooltip(
+                  h(
+                    NButton,
+                    {
+                      strong: true,
+                      size: 'small',
+                      text: true,
+                      iconPlacement: 'right',
+                    },
+                    { default: () => '栅格', icon: renderIcon(HelpCircleOutline) }
+                  ),
+                  '表单每行摆放组件的个数。响应式栅格，小屏幕自动转为每行摆放一个组件。参考文档：https://www.naiveui.com/zh-CN/os-theme/components/grid#responsive-item.vue'
+                ),
+                h(NSelect, {
+                  style: { width: '100px' },
+                  size: 'small',
+                  consistentMenuWidth: false,
+                  value: formValue.value.options.presetStep.formGridCols,
+                  options: formGridColsOptions,
+                  onUpdateValue: function (e) {
+                    formValue.value.options.presetStep.formGridCols = e;
+                  },
+                }),
+              ]);
+            },
+            key: 'formGridSpan',
+            width: 120,
+            render(row) {
+              return h(NSelect, {
+                consistentMenuWidth: false,
+                disabled: row.name === 'id',
+                value: row.formGridSpan,
+                options: getFormGridSpanOptions(formValue.value.options.presetStep.formGridCols),
+                onUpdateValue: function (e) {
+                  row.formGridSpan = e;
+                },
+              });
+            },
+          },
+        ],
+      },
+      {
+        width: 800,
+        title: '列表',
+        key: 'list',
+        align: 'center',
+        children: [
+          {
+            title: '列表',
+            key: 'isList',
+            width: 30,
+            align: 'center',
+            render(row) {
+              return h(NCheckbox, {
+                defaultChecked: row.isList,
+                onUpdateChecked: function (e) {
+                  row.isList = e;
+                },
+              });
+            },
+          },
+          {
+            title: '导出',
+            key: 'isExport',
+            width: 30,
+            align: 'center',
+            render(row) {
+              return h(NCheckbox, {
+                defaultChecked: row.isExport,
+                onUpdateChecked: function (e) {
+                  row.isExport = e;
+                },
+              });
+            },
+          },
+          {
+            title: '查询',
+            key: 'isQuery',
+            width: 30,
+            align: 'center',
+            render(row) {
+              return h(NCheckbox, {
+                defaultChecked: row.isQuery,
+                onUpdateChecked: function (e) {
+                  row.isQuery = e;
+                },
+              });
+            },
+          },
+          {
+            title: '查询条件',
+            key: 'queryWhere',
+            width: 90,
+            render(row) {
+              return h(NSelect, {
+                consistentMenuWidth: false,
+                value: row.queryWhere,
+                disabled: row.name === 'id',
+                options: props.selectList?.whereMode ?? [],
+                onUpdateValue: function (e) {
+                  row.queryWhere = e;
+                },
+              });
+            },
+          },
+          {
+            title: '排列方式',
+            key: 'align',
+            width: 80,
+            render(row) {
+              return h(NSelect, {
+                consistentMenuWidth: false,
+                value: row.align,
+                options: props.selectList?.tableAlign ?? [],
+                onUpdateValue: function (e) {
+                  row.align = e;
+                },
+              });
+            },
+          },
+          {
+            title(_column) {
+              return renderTooltip(
+                h(
+                  NButton,
+                  {
+                    strong: true,
+                    size: 'small',
+                    text: true,
+                    iconPlacement: 'right',
+                  },
+                  { default: () => '列宽', icon: renderIcon(HelpCircleOutline) }
+                ),
+                '选填。设定固定值时表格生成自动计算scroll-x，未设定默认每列按100计算'
+              );
+            },
+            key: 'width',
+            width: 50,
+            render(row) {
+              return h(NInputNumber, {
+                value: row.width,
+                placeholder: ' ',
+                min: -1,
+                max: 2000,
+                showButton: false,
+                onUpdateValue: function (e) {
+                  row.width = e;
+                },
+              });
+            },
+          },
+        ],
+      },
+    ];
+  });
+
+  // 同步字段
+  function syncColumns() {
+    show.value = true;
+    dataSource.value = [];
+
+    const params = {
+      name: formValue.value.dbName,
+      table: formValue.value.tableName,
+    };
+
+    ColumnList(params)
+      .then((res) => {
+        const columns = formatColumns(res);
+        for (let i = 0; i < columns.length; i++) {
+          // 相同字段名称和类型，保留原字段属性
+          const index = formValue.value.masterColumns.findIndex(
+            (item) => item.name == columns[i].name && item.dataType == columns[i].dataType
+          );
+          if (index !== -1) {
+            columns[i] = formValue.value.masterColumns[index];
+          }
+        }
+
+        formValue.value.masterColumns = columns;
+        dataSource.value = formValue.value.masterColumns;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+
+  // 重载字段属性
+  function reloadColumns() {
+    show.value = true;
+    dataSource.value = [];
+
+    const params = {
+      name: formValue.value.dbName,
+      table: formValue.value.tableName,
+    };
+
+    ColumnList(params)
+      .then((res) => {
+        formValue.value.masterColumns = formatColumns(res);
+        dataSource.value = formValue.value.masterColumns;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+
+  function getFormModeOptions(type: string) {
+    const options = cloneDeep(props.selectList?.formMode ?? []);
+    if (options.length === 0) {
+      return [];
+    }
+    switch (type) {
+      case 'number':
+        for (let i = 0; i < options.length; i++) {
+          const allows = [
+            'Input',
+            'InputNumber',
+            'Radio',
+            'Select',
+            'Switch',
+            'Rate',
+            'TreeSelect',
+            'Cascader',
+          ];
+          if (!allows.includes(options[i].value)) {
+            options[i].disabled = true;
+          }
+        }
+        break;
+      default:
+    }
+    options.sort((a, b) => (a.disabled === b.disabled ? 0 : a.disabled ? 1 : -1));
+    return options;
+  }
+
+  function getFormGridSpanOptions(cols: number) {
+    if (cols < 1) {
+      cols = 1;
+    }
+    if (cols > 4) {
+      cols = 4;
+    }
+    for (let i = 0; i < formValue.value.masterColumns.length; i++) {
+      if (!formValue.value.masterColumns[i].formGridSpan) {
+        formValue.value.masterColumns[i].formGridSpan = 1;
+      }
+      if (formValue.value.masterColumns[i].formGridSpan > cols) {
+        formValue.value.masterColumns[i].formGridSpan = cols;
+      }
+    }
+    return formGridSpanOptions.slice(0, Math.min(cols, formGridSpanOptions.length));
+  }
+
+  // 禁止编辑的字段，由系统维护
+  function isEditDisabled(row) {
+    const disabledNames = [
+      'id',
+      'created_by',
+      'updated_by',
+      'deleted_by',
+      'created_at',
+      'updated_at',
+      'deleted_at',
+    ];
+    if (disabledNames.includes(row.name)) {
+      return true;
+    }
+
+    if (formValue.value.genType == 11) {
+      const disabledTreeNames = ['pid', 'level', 'tree'];
+      if (disabledTreeNames.includes(row.name)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function handleMove() {
+    moveRef.value.openModal();
+  }
+
+  onMounted(() => {
+    if (formValue.value.masterColumns.length === 0) {
+      reloadColumns();
+    } else {
+      show.value = true;
+      setTimeout(function () {
+        dataSource.value = formValue.value.masterColumns;
+        show.value = false;
+      }, 100);
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  .tree-tips {
+    margin-left: 12px;
+    color: #18a058;
+    font-weight: 600;
+  }
+</style>
diff --git a/web/src/views/develop/code/components/EditSlaveCell.vue b/web/src/views/develop/code/components/EditSlaveCell.vue
new file mode 100644
index 0000000..db7e41c
--- /dev/null
+++ b/web/src/views/develop/code/components/EditSlaveCell.vue
@@ -0,0 +1,430 @@
+<template>
+  <n-spin :show="show" description="加载中...">
+    <n-card :bordered="false" class="proCard">
+      <BasicTable
+        size="small"
+        striped
+        resizable
+        canResize
+        :single-line="false"
+        :showTopRight="false"
+        :pagination="false"
+        :columns="columns"
+        :dataSource="dataSource"
+        :row-key="(row) => row.id"
+        :resizeHeightOffset="-20000"
+        :scroll-x="columnCollapse ? 880 : 1880"
+        :scroll-y="720"
+        :scrollbar-props="{ trigger: 'none' }"
+      >
+        <template #tableTitle>
+          <n-space>
+            <n-popconfirm @positive-click="reloadColumns(getIndex())">
+              <template #trigger>
+                <n-button type="primary" class="min-left-space">
+                  <template #icon>
+                    <n-icon>
+                      <Reload />
+                    </n-icon>
+                  </template>
+                  重置字段
+                </n-button>
+              </template>
+              重置后将从数据库重新加载该表的默认配置，确定要重置吗？
+            </n-popconfirm>
+
+            <n-popconfirm @positive-click="syncColumns(getIndex())">
+              <template #trigger>
+                <n-button type="primary" class="min-left-space">
+                  <template #icon>
+                    <n-icon>
+                      <Sync />
+                    </n-icon>
+                  </template>
+                  同步字段
+                </n-button>
+              </template>
+              同步是从数据库重新加载表，保留当前有效的字段配置，确定要同步吗？
+            </n-popconfirm>
+
+            <n-button type="default" class="min-left-space" @click="handleMove">
+              <template #icon>
+                <n-icon>
+                  <MoveOutline />
+                </n-icon>
+              </template>
+              移动字段
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <Move ref="moveRef" v-model:columns="dataSource" />
+  </n-spin>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, ref } from 'vue';
+  import { BasicTable } from '@/components/Table';
+  import { formatColumns, genInfoObj, selectListObj } from '@/views/develop/code/components/model';
+  import { ColumnList } from '@/api/develop/code';
+  import {
+    NButton,
+    NCheckbox,
+    NIcon,
+    NInput,
+    NInputNumber,
+    NSelect,
+    NSpace,
+    NTooltip,
+  } from 'naive-ui';
+  import { HelpCircleOutline, MoveOutline, Reload, Sync, WarningOutline } from '@vicons/ionicons5';
+  import { renderIcon, renderTooltip } from '@/utils';
+  import Move from './Move.vue';
+
+  const emit = defineEmits(['update:value']);
+
+  interface Props {
+    value?: any;
+    selectList: any;
+    uuid: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    value: genInfoObj,
+    selectList: selectListObj,
+    uuid: '',
+  });
+
+  const formValue = computed({
+    get() {
+      return props.value;
+    },
+    set(value) {
+      emit('update:value', value);
+    },
+  });
+
+  const show = ref(false);
+  const dataSource = ref([]);
+  const moveRef = ref();
+  const columnCollapse = ref(true);
+  const columnsCollapseData = computed(() => {
+    return columnCollapse.value
+      ? [
+          {
+            title: '字段列名',
+            key: 'name',
+            width: 150,
+          },
+          {
+            title: '字段描述',
+            key: 'dc',
+            width: 150,
+            render(row) {
+              return h(NInput, {
+                value: row.dc,
+                onUpdateValue: function (e) {
+                  row.dc = e;
+                  // await saveProductCustom(row.id, 'frontShow', e);
+                },
+              });
+            },
+          },
+        ]
+      : [
+          {
+            title: '字段列名',
+            key: 'name',
+            width: 100,
+          },
+          {
+            title: '物理类型',
+            key: 'sqlType',
+            width: 80,
+          },
+          {
+            title: 'Go属性',
+            key: 'goName',
+            width: 150,
+          },
+          {
+            title: 'Go类型',
+            key: 'goType',
+            width: 100,
+          },
+          {
+            title: 'Ts属性',
+            key: 'tsName',
+            width: 150,
+          },
+          {
+            title: 'Ts类型',
+            key: 'tsType',
+            width: 100,
+          },
+          {
+            title: '字段描述',
+            key: 'dc',
+            width: 100,
+            render(row) {
+              return h(NInput, {
+                value: row.dc,
+                onUpdateValue: function (e) {
+                  row.dc = e;
+                },
+              });
+            },
+          },
+        ];
+  });
+
+  const columns = computed(() => {
+    return [
+      {
+        title: '',
+        key: 'id',
+        width: 50,
+        render(row, index) {
+          return index + 1;
+        },
+      },
+      {
+        title(_column) {
+          return h('div', null, [
+            renderTooltip(
+              h(
+                NButton,
+                {
+                  strong: true,
+                  size: 'small',
+                  text: true,
+                  iconPlacement: 'right',
+                },
+                { default: () => '字段', icon: renderIcon(HelpCircleOutline) }
+              ),
+              'Go类型和属性定义取决于你在/hack/config.yaml中的配置参数'
+            ),
+            h(
+              NButton,
+              {
+                strong: true,
+                size: 'small',
+                text: true,
+                type: 'primary',
+                style: { 'margin-left': '20px' },
+                onClick: () => (columnCollapse.value = !columnCollapse.value),
+              },
+              { default: () => (columnCollapse.value ? '展开 >>' : '折叠 <<') }
+            ),
+          ]);
+        },
+        key: 'field',
+        align: 'center',
+        width: 800,
+        children: columnsCollapseData.value,
+      },
+      {
+        width: 800,
+        title: '列表',
+        key: 'list',
+        align: 'center',
+        children: [
+          {
+            title: '列表',
+            key: 'isList',
+            width: 50,
+            align: 'center',
+            render(row) {
+              return h(NCheckbox, {
+                defaultChecked: row.isList,
+                onUpdateChecked: function (e) {
+                  row.isList = e;
+                },
+              });
+            },
+          },
+          {
+            title: '导出',
+            key: 'isExport',
+            width: 50,
+            align: 'center',
+            render(row) {
+              return h(NCheckbox, {
+                defaultChecked: row.isExport,
+                onUpdateChecked: function (e) {
+                  row.isExport = e;
+                },
+              });
+            },
+          },
+          {
+            title: '查询',
+            key: 'isQuery',
+            width: 50,
+            align: 'center',
+            render(row) {
+              return h(NCheckbox, {
+                defaultChecked: row.isQuery,
+                onUpdateChecked: function (e) {
+                  row.isQuery = e;
+                },
+              });
+            },
+          },
+          {
+            title: '查询条件',
+            key: 'queryWhere',
+            width: 100,
+            render(row) {
+              return h(NSelect, {
+                consistentMenuWidth: false,
+                value: row.queryWhere,
+                disabled: row.name === 'id',
+                options: props.selectList?.whereMode ?? [],
+                onUpdateValue: function (e) {
+                  row.queryWhere = e;
+                },
+              });
+            },
+          },
+          {
+            title: '排列方式',
+            key: 'align',
+            width: 100,
+            render(row) {
+              return h(NSelect, {
+                consistentMenuWidth: false,
+                value: row.align,
+                options: props.selectList?.tableAlign ?? [],
+                onUpdateValue: function (e) {
+                  row.align = e;
+                },
+              });
+            },
+          },
+          {
+            title(_column) {
+              return renderTooltip(
+                h(
+                  NButton,
+                  {
+                    strong: true,
+                    size: 'small',
+                    text: true,
+                    iconPlacement: 'right',
+                  },
+                  { default: () => '列宽', icon: renderIcon(HelpCircleOutline) }
+                ),
+                '选填。设定固定值时表格生成自动计算scroll-x，未设定默认每列按100计算'
+              );
+            },
+            key: 'width',
+            width: 50,
+            render(row) {
+              return h(NInputNumber, {
+                value: row.width,
+                placeholder: ' ',
+                min: 0,
+                max: 2000,
+                showButton: false,
+                onUpdateValue: function (e) {
+                  row.width = e;
+                },
+              });
+            },
+          },
+        ],
+      },
+    ];
+  });
+
+  function handleMove() {
+    moveRef.value.openModal();
+  }
+  function getIndex() {
+    if (formValue.value.options.join.length === 0) {
+      return -1;
+    }
+    for (let i = 0; i < formValue.value.options.join.length; i++) {
+      if (formValue.value.options.join[i].uuid === props.uuid) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  // 同步字段属性
+  function syncColumns(index: number) {
+    show.value = true;
+    dataSource.value = [];
+
+    const join = formValue.value.options.join[index];
+    const params = {
+      name: formValue.value.dbName,
+      table: join.linkTable,
+      isLink: 1,
+      alias: join.alias,
+    };
+
+    ColumnList(params)
+      .then((res) => {
+        const columns = formatColumns(res);
+        for (let i = 0; i < columns.length; i++) {
+          // 相同字段名称和类型，保留原字段属性
+          const index2 = join.columns.findIndex(
+            (item) => item.name == columns[i].name && item.dataType == columns[i].dataType
+          );
+          if (index2 !== -1) {
+            columns[i] = join.columns[index2];
+          }
+        }
+        join.columns = columns;
+        dataSource.value = join.columns;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+
+  // 重载字段属性
+  function reloadColumns(index: number) {
+    show.value = true;
+    dataSource.value = [];
+
+    const join = formValue.value.options.join[index];
+    const params = {
+      name: formValue.value.dbName,
+      table: join.linkTable,
+      isLink: 1,
+      alias: join.alias,
+    };
+
+    ColumnList(params)
+      .then((res) => {
+        join.columns = formatColumns(res);
+        dataSource.value = join.columns;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+
+  onMounted(() => {
+    show.value = true;
+    setTimeout(() => {
+      const index = getIndex();
+
+      // 已存在直接加载
+      if (formValue.value.options.join[index].columns.length > 0) {
+        dataSource.value = formValue.value.options.join[index].columns;
+        show.value = false;
+        return;
+      }
+
+      reloadColumns(index);
+    }, 100);
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/develop/code/components/Move.vue b/web/src/views/develop/code/components/Move.vue
new file mode 100644
index 0000000..776c66e
--- /dev/null
+++ b/web/src/views/develop/code/components/Move.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <n-modal
+      v-model:show="showModal"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+      transform-origin="center"
+      title="移动字段"
+      :style="{
+        width: dialogWidth,
+      }"
+    >
+      <n-scrollbar style="max-height: 87vh" class="pr-5">
+        <n-card
+          :bordered="false"
+          :content-style="{ padding: '0px' }"
+          :header-style="{ padding: 'px' }"
+          :segmented="true"
+        >
+          请通过拖拽来移动字段的位置。
+          <div class="mt-8"></div>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="columns"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="default" size="small" style="font-weight: 800">{{
+                  element.name
+                }}</n-tag
+                ><span class="ml-2">{{ element.dc }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </n-card>
+      </n-scrollbar>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import Draggable from 'vuedraggable';
+  import { adaModalWidth } from '@/utils/hotgo';
+
+  const showModal = ref(false);
+  const columns = defineModel<[]>('columns');
+  const dialogWidth = computed(() => {
+    return adaModalWidth(360);
+  });
+
+  function openModal() {
+    showModal.value = true;
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
+
+<style lang="less" scoped>
+  .draggable-ul {
+    width: 100%;
+    overflow: hidden;
+    margin-top: -8px;
+
+    .draggable-li {
+      width: 100%;
+      padding: 8px 4px;
+      color: #333;
+      border-bottom: 1px solid #efeff5;
+    }
+
+    .draggable-li:hover {
+      background-color: rgba(229, 231, 235, var(--tw-border-opacity));
+    }
+  }
+</style>
diff --git a/web/src/views/develop/code/components/PreviewTab.vue b/web/src/views/develop/code/components/PreviewTab.vue
new file mode 100644
index 0000000..9247daa
--- /dev/null
+++ b/web/src/views/develop/code/components/PreviewTab.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <textarea id="copy-code" :value="content"></textarea>
+    <n-tabs type="line" animated>
+      <n-tab-pane v-for="(view, index) in views" :key="index" :name="view.name" :tab="view.name">
+        <n-space justify="space-between">
+          <n-tag :type="view.tag.type" class="tag-margin">
+            {{ view.tag.label }}
+            <template #icon>
+              <n-icon :component="view.tag.icon" />
+            </template>
+            {{ view.path }}
+          </n-tag>
+          <n-button type="primary" size="small" class="tag-margin" @click="handleCopy(view.content)"
+            >复制本页代码</n-button
+          >
+        </n-space>
+        <n-scrollbar class="code-scrollbar" trigger="none">
+          <n-code
+            :class="'code-' + getFileExtension(view.path)"
+            :code="view.content"
+            :hljs="hljs"
+            :language="getFileExtension(view.path)"
+            show-line-numbers
+          />
+        </n-scrollbar>
+      </n-tab-pane>
+    </n-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import hljs from 'highlight.js/lib/core';
+  import go from 'highlight.js/lib/languages/go';
+  import typescript from 'highlight.js/lib/languages/typescript';
+  import xml from 'highlight.js/lib/languages/xml';
+  import sql from 'highlight.js/lib/languages/sql';
+  import { cloneDeep } from 'lodash-es';
+  import {
+    CheckmarkCircle,
+    CheckmarkDoneCircle,
+    CloseCircleOutline,
+    HelpCircleOutline,
+    RemoveCircleOutline,
+  } from '@vicons/ionicons5';
+  import { useMessage } from 'naive-ui';
+
+  hljs.registerLanguage('go', go);
+  hljs.registerLanguage('ts', typescript);
+  hljs.registerLanguage('sql', sql);
+  hljs.registerLanguage('vue', xml);
+
+  interface Props {
+    previewModel: any;
+    showModal: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    previewModel: cloneDeep({ views: {} }),
+    showModal: false,
+  });
+  const message = useMessage();
+  const content = ref('');
+  const views = computed(() => {
+    let tmpViews: any = [];
+    let i = 0;
+    for (const [k, v] of Object.entries(props.previewModel.views)) {
+      let item = v as any;
+      item.name = k;
+      switch (item.meth) {
+        case 1:
+          item.tag = { type: 'success', label: '创建文件', icon: CheckmarkCircle };
+          break;
+        case 2:
+          item.tag = { type: 'warning', label: '覆盖文件', icon: CheckmarkDoneCircle };
+          break;
+        case 3:
+          item.tag = { type: 'info', label: '已存在跳过', icon: CloseCircleOutline };
+          break;
+        case 4:
+          item.tag = { type: 'error', label: '不生成', icon: RemoveCircleOutline };
+          break;
+        default:
+          item.tag = { type: 'error', label: '未知状态', icon: HelpCircleOutline };
+      }
+      tmpViews[i] = item;
+      i++;
+    }
+    return tmpViews;
+  });
+
+  function getFileExtension(path: string): string {
+    const parts = path.split('.');
+    if (parts.length > 1) {
+      return parts[parts.length - 1];
+    }
+    return '';
+  }
+
+  function handleCopy(code: string) {
+    content.value = code;
+    setTimeout(function () {
+      const copyVal = document.getElementById('copy-code');
+      copyVal.select();
+      document.execCommand('copy');
+      message.success('已复制');
+    }, 20);
+  }
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.alert-margin) {
+    margin-bottom: 20px;
+  }
+
+  ::v-deep(.tag-margin) {
+    margin-bottom: 10px;
+  }
+
+  ::v-deep(.code-scrollbar) {
+    height: calc(100vh - 300px);
+    background: #282b2e;
+    color: #e0e2e4;
+    padding: 10px;
+  }
+
+  ::v-deep(.code-vue .hljs-tag) {
+    color: rgb(242, 197, 92);
+  }
+
+  ::v-deep(.code-vue .hljs-name) {
+    color: rgb(242, 197, 92);
+  }
+
+  ::v-deep(.code-vue .hljs-attr) {
+    color: rgb(49, 104, 213);
+  }
+
+  ::v-deep(.code-go .hljs-params) {
+    color: rgb(49, 104, 213);
+  }
+
+  ::v-deep(.code-ts .hljs-params) {
+    color: rgb(49, 104, 213);
+  }
+
+  ::v-deep(.code-ts .hljs-property) {
+    color: rgb(49, 104, 213);
+  }
+
+  ::v-deep(.code-ts .hljs-function) {
+    color: rgb(49, 104, 213);
+  }
+
+  #copy-code {
+    position: fixed;
+    top: -100px;
+    left: -100px;
+  }
+</style>
diff --git a/web/src/views/develop/code/components/SetFuncDict.vue b/web/src/views/develop/code/components/SetFuncDict.vue
new file mode 100644
index 0000000..2573335
--- /dev/null
+++ b/web/src/views/develop/code/components/SetFuncDict.vue
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <n-modal
+      title="设置选项字段"
+      v-model:show="showModal"
+      :block-scroll="false"
+      :mask-closable="false"
+      :show-icon="false"
+      preset="dialog"
+    >
+      <n-form
+        :model="formValue"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+        :label-width="100"
+        class="py-4"
+      >
+        <n-form-item label="选项值" path="valueColumn">
+          <n-select
+            filterable
+            tag
+            placeholder="请选择"
+            :options="columnsOption"
+            v-model:value="formValue.valueColumn"
+          />
+        </n-form-item>
+
+        <n-form-item label="选项名称" path="labelColumn">
+          <n-select
+            filterable
+            tag
+            placeholder="请选择"
+            :options="columnsOption"
+            v-model:value="formValue.labelColumn"
+          />
+        </n-form-item>
+      </n-form>
+      <template #action>
+        <n-space>
+          <n-button @click="closeForm">取消</n-button>
+          <n-button type="info" @click="confirmForm">保存</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { rules } from '@/views/addons/stock/itemBrand/model';
+  import { cloneDeep } from 'lodash-es';
+  import { useMessage } from 'naive-ui';
+  import { Edit } from '@/api/addons/stock/itemClass';
+
+  interface Props {
+    columnsOption: any;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    columnsOption: [],
+  });
+
+  const rules = {
+    valueColumn: {
+      required: true,
+      trigger: ['blur', 'input'],
+      type: 'string',
+      message: '选项值不能为空',
+    },
+    labelColumn: {
+      required: true,
+      trigger: ['blur', 'input'],
+      type: 'string',
+      message: '选项名称不能为空',
+    },
+  };
+
+  const message = useMessage();
+  const emit = defineEmits(['update']);
+  const showModal = ref(false);
+  const formRef = ref();
+  const formValue = ref({
+    valueColumn: null,
+    labelColumn: null,
+  });
+
+  function openModal(state) {
+    showModal.value = true;
+    if (!state) {
+      state = {
+        valueColumn: null,
+        labelColumn: null,
+      };
+    }
+
+    if (!state.valueColumn) {
+      const item = props.columnsOption.find((item) => item.value === 'id');
+      if (item) {
+        state.valueColumn = item.value;
+      }
+    }
+
+    if (!state.labelColumn) {
+      const item = props.columnsOption.find((item) => item.value === 'title' || item.value === 'name');
+      if (item) {
+        state.labelColumn = item.value;
+      }
+    }
+    formValue.value = cloneDeep(state);
+    emit('update', formValue.value);
+  }
+
+  function closeForm() {
+    showModal.value = false;
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        emit('update', formValue.value);
+        closeForm();
+      } else {
+        message.error('请填写完整信息');
+      }
+    });
+  }
+
+  defineExpose({
+    openModal,
+  });
+</script>
diff --git a/web/src/views/develop/code/components/model.ts b/web/src/views/develop/code/components/model.ts
new file mode 100644
index 0000000..f595172
--- /dev/null
+++ b/web/src/views/develop/code/components/model.ts
@@ -0,0 +1,142 @@
+import { cloneDeep } from 'lodash-es';
+import { isJsonString } from '@/utils/is';
+
+export const genFileObj = {
+  meth: 1,
+  content: '',
+  path: '',
+  required: true,
+};
+
+export interface joinAttr {
+  uuid: string;
+  linkTable: string;
+  alias: string;
+  linkMode: number;
+  field: string;
+  masterField: string;
+  columns: any;
+}
+
+export const genInfoObj = {
+  id: 0,
+  genType: 10,
+  genTemplate: null,
+  varName: '',
+  options: {
+    headOps: ['add', 'batchDel', 'export'],
+    columnOps: ['edit', 'del', 'view', 'status', 'check'],
+    autoOps: ['genMenuPermissions', 'runDao', 'runService'],
+    join: [],
+    menu: {
+      pid: 0,
+      icon: 'MenuOutlined',
+      sort: 0,
+    },
+    tree: {
+      titleColumn: null,
+      styleType: 1,
+    },
+    funcDict: {
+      valueColumn: null,
+      labelColumn: null,
+    },
+    presetStep: {
+      formGridCols: 1,
+    },
+  },
+  dbName: '',
+  tableName: '',
+  tableComment: '',
+  daoName: '',
+  masterColumns: [],
+  addonName: null,
+  status: 2,
+  createdAt: '',
+  updatedAt: '',
+};
+
+export const selectListObj = {
+  db: [],
+  genType: [],
+  status: [],
+  tables: [],
+  formMode: [],
+  formRole: [],
+  dictMode: [],
+  whereMode: [],
+  buildMeth: [],
+  tableAlign: [],
+  treeStyleType: [],
+};
+
+export function newState(state) {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(genInfoObj);
+}
+
+export const formGridColsOptions = [
+  {
+    value: 1,
+    label: '一行一列',
+  },
+  {
+    value: 2,
+    label: '一行两列',
+  },
+  {
+    value: 3,
+    label: '一行三列',
+  },
+  {
+    value: 4,
+    label: '一行四列',
+  },
+];
+
+export const formGridSpanOptions = [
+  {
+    value: 1,
+    label: '占一列位置',
+  },
+  {
+    value: 2,
+    label: '占两列位置',
+  },
+  {
+    value: 3,
+    label: '占三列位置',
+  },
+  {
+    value: 4,
+    label: '占四列位置',
+  },
+];
+
+// 格式化列字段
+export function formatColumns(columns: any) {
+  if (columns === undefined || columns.length === 0) {
+    columns = [];
+  }
+
+  if (isJsonString(columns)) {
+    columns = JSON.parse(columns);
+  }
+
+  if (columns.length > 0) {
+    for (let i = 0; i < columns.length; i++) {
+      if (!columns[i].formGridSpan) {
+        columns[i].formGridSpan = 1;
+      }
+      if (!columns[i].align) {
+        columns[i].align = 'left';
+      }
+      if (!columns[i].width || columns[i].width < 1) {
+        columns[i].width = null;
+      }
+    }
+  }
+  return columns;
+}
diff --git a/web/src/views/develop/code/deploy.vue b/web/src/views/develop/code/deploy.vue
new file mode 100644
index 0000000..a394dea
--- /dev/null
+++ b/web/src/views/develop/code/deploy.vue
@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <n-spin :show="show" description="正在生成配置信息...">
+      <n-card class="proCard">
+        <n-tabs
+          type="card"
+          class="card-tabs"
+          :default-value="value"
+          animated
+          tab-style="min-width: 80px;"
+          style="margin: 0 -4px"
+          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+          :on-update:value="updateTabs"
+          ref="tabsRef"
+          @close="handleClose"
+          @add="handleAdd"
+        >
+          <n-tab-pane v-for="panel in panels" :key="panel" :name="panel">
+            <template v-if="panel === '基本信息'">
+              <BaseInfo v-model:value="genInfo" :selectList="selectList" />
+            </template>
+
+            <template v-if="panel === '主表字段'">
+              <EditMasterCell v-model:value="genInfo" :selectList="selectList" />
+            </template>
+          </n-tab-pane>
+
+          <n-tab-pane
+            v-for="panel in slavePanels"
+            :key="panel"
+            :name="panel"
+            v-show="slavePanels.length > 0"
+          >
+            <EditSlaveCell
+              v-model:value="genInfo"
+              :uuid="slaveMap[panel]"
+              :selectList="selectList"
+            />
+          </n-tab-pane>
+
+          <template #suffix>
+            <n-space>
+              <n-button type="default" @click="handleBack">返回列表</n-button>
+              <n-button type="primary" :loading="formBtnPreviewLoading" @click="preview"
+                >预览代码</n-button
+              >
+              <n-button type="success" :loading="formBtnLoading" @click="submitBuild"
+                >提交生成</n-button
+              >
+              <n-button type="info" dashed @click="submitSave">仅保存配置</n-button>
+            </n-space>
+          </template>
+        </n-tabs>
+
+        <n-modal
+          v-model:show="showModal"
+          :block-scroll="false"
+          :mask-closable="false"
+          :show-icon="false"
+          preset="card"
+          title="预览代码"
+          style="width: 95%"
+        >
+          <PreviewTab :previewModel="previewModel" />
+          <template #action>
+            <n-space justify="end">
+              <n-button @click="() => (showModal = false)">关闭</n-button>
+              <n-button type="info" :loading="formBtnLoading" @click="submitBuild"
+                >提交生成</n-button
+              >
+            </n-space>
+          </template>
+        </n-modal>
+      </n-card>
+    </n-spin>
+  </div>
+</template>
+
+<style scoped>
+  .card-tabs .n-tabs-nav--bar-type {
+    padding-left: 4px;
+  }
+</style>
+
+<script lang="ts" setup>
+  import { onMounted, ref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useDialog, useMessage, useNotification } from 'naive-ui';
+  import BaseInfo from './components/BaseInfo.vue';
+  import EditMasterCell from './components/EditMasterCell.vue';
+  import EditSlaveCell from './components/EditSlaveCell.vue';
+  import { Selects, View, Preview, Build, Edit } from '@/api/develop/code';
+  import { selectListObj, newState, formatColumns } from '@/views/develop/code/components/model';
+  import PreviewTab from '@/views/develop/code/components/PreviewTab.vue';
+  import { isJsonString } from '@/utils/is';
+
+  interface Props {
+    genId?: number;
+  }
+  const props = withDefaults(defineProps<Props>(), { genId: 0 });
+  const router = useRouter();
+  const genId = Number(router.currentRoute.value.params.id ?? props.genId);
+  const show = ref(false);
+  const message = useMessage();
+  const selectList = ref<any>(selectListObj);
+  const genInfo = ref(newState(null));
+  const tabsRef = ref();
+  const value = ref('基本信息');
+  const panels = ref(['基本信息', '主表字段']);
+  const slaveMap = ref<any>([]);
+  const slavePanels = ref<any>([]);
+  const showModal = ref(false);
+  const formBtnLoading = ref(false);
+  const formBtnPreviewLoading = ref(false);
+  const previewModel = ref<any>();
+  const dialog = useDialog();
+  const notification = useNotification();
+
+  onMounted(async () => {
+    if (genId < 1 && props.genId < 1) {
+      message.error('生成ID不正确，请检查！');
+      return;
+    }
+    await getGenInfo();
+    await loadSelect();
+  });
+
+  async function getGenInfo() {
+    let tmp = await View({ id: genId });
+    // 导入主表数据
+    tmp.masterColumns = formatColumns(tmp.masterColumns);
+
+    // 导入生成选项
+    if (isJsonString(tmp.options)) {
+      tmp.options = JSON.parse(tmp.options);
+    }
+
+    // 预设流程
+    if (!tmp.options.presetStep) {
+      tmp.options.presetStep = {
+        formGridCols: 1,
+      };
+    }
+
+    // 树表
+    if (!tmp.options.tree) {
+      tmp.options.tree = {
+        titleColumn: null,
+        styleType: 1,
+      };
+    }
+
+    genInfo.value = tmp;
+  }
+
+  watch(
+    genInfo,
+    (newVal, _oldVal) => {
+      if (newVal.genType >= 10 && newVal.genType < 20) {
+        handleAdd('主表字段');
+      } else {
+        handleClose('主表字段');
+      }
+
+      if (newVal && newVal.options && newVal.options.join !== undefined) {
+        slavePanels.value = [];
+        for (let i = 0; i < newVal.options.join.length; i++) {
+          if (newVal.options.join[i]?.alias) {
+            handleSlaveAdd(
+              '关联表[ ' + newVal.options.join[i].alias + ' ]',
+              newVal.options.join[i]
+            );
+          }
+        }
+      }
+    },
+    {
+      deep: true, // 是否深度监听
+    }
+  );
+
+  function updateTabs(value: string | number) {
+    console.log('value:' + value);
+  }
+
+  function handleAdd(name: string) {
+    const nameIndex = panels.value.findIndex((panelName) => panelName === name);
+    if (!~nameIndex) {
+      panels.value.push(name);
+    }
+  }
+
+  function handleSlaveAdd(name: string, join) {
+    const nameIndex = slavePanels.value.findIndex((panelName) => panelName === name);
+    if (!~nameIndex) {
+      slavePanels.value.push(name);
+      slaveMap.value[name] = join.uuid;
+    }
+  }
+
+  function handleClose(name: string) {
+    const nameIndex = panels.value.findIndex((panelName) => panelName === name);
+    if (!~nameIndex) return;
+    panels.value.splice(nameIndex, 1);
+    if (name === value.value) {
+      value.value = panels.value[Math.min(nameIndex, panels.value.length - 1)];
+    }
+  }
+
+  const loadSelect = async () => {
+    selectList.value = await Selects({});
+  };
+
+  function preview() {
+    formBtnPreviewLoading.value = true;
+    Preview(genInfo.value)
+      .then((res) => {
+        previewModel.value = res;
+        showModal.value = true;
+      })
+      .finally(() => {
+        formBtnPreviewLoading.value = false;
+      });
+  }
+
+  function submitBuild() {
+    dialog.info({
+      title: '提示',
+      content: '你确定要提交生成吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        formBtnLoading.value = true;
+        Build(genInfo.value)
+          .then((_res) => {
+            buildSuccessNotify();
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      },
+    });
+  }
+
+  function submitSave() {
+    dialog.info({
+      title: '提示',
+      content: '你确定要保存生成配置吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Edit(genInfo.value).then((_res) => {
+          message.success('操作成功');
+        });
+      },
+    });
+  }
+
+  function buildSuccessNotify() {
+    let count = 10;
+    const n = notification.success({
+      title: '生成提交成功',
+      content: `如果你使用的热编译，页面将在 ${count} 秒后自动刷新即可生效。否则请手动重启服务后刷新页面！`,
+      duration: 10000,
+      closable: false,
+      onAfterEnter: () => {
+        const minusCount = () => {
+          count--;
+          n.content = `如果你使用的热编译，页面将在 ${count} 秒后自动刷新即可生效。否则请手动重启服务后刷新页面！`;
+          if (count > 0) {
+            window.setTimeout(minusCount, 1000);
+          }
+        };
+        window.setTimeout(minusCount, 1000);
+      },
+      onAfterLeave: () => {
+        location.reload();
+      },
+    });
+  }
+
+  function handleBack() {
+    dialog.info({
+      title: '提示',
+      content: '你确定要返回生成列表？系统不会主动保存更改',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        router.push({ name: 'develop_code' });
+      },
+    });
+  }
+</script>
+<style lang="less" scoped>
+  ::v-deep(.alert-margin) {
+    margin-bottom: 20px;
+  }
+  ::v-deep(.tag-margin) {
+    margin-bottom: 10px;
+  }
+
+  ::v-deep(.code-scrollbar) {
+    height: calc(100vh - 300px);
+    background: #282b2e;
+    color: #e0e2e4;
+    padding: 10px;
+  }
+</style>
diff --git a/web/src/views/develop/code/index.vue b/web/src/views/develop/code/index.vue
new file mode 100644
index 0000000..586b37c
--- /dev/null
+++ b/web/src/views/develop/code/index.vue
@@ -0,0 +1,499 @@
+<template>
+  <div>
+    <n-card :bordered="false" class="proCard" title="代码生成">
+      <BasicForm
+        @register="register"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="1090"
+        :resizeHeightOffset="-10000"
+      >
+        <template #tableTitle>
+          <n-button type="primary" @click="addTable">
+            <template #icon>
+              <n-icon>
+                <PlusOutlined />
+              </n-icon>
+            </template>
+            立即生成
+          </n-button>
+          <n-button
+            type="error"
+            @click="batchDelete"
+            :disabled="batchDeleteDisabled"
+            class="min-left-space"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+        </template>
+      </BasicTable>
+
+      <n-modal
+        v-model:show="showModal"
+        :mask-closable="false"
+        :show-icon="false"
+        preset="dialog"
+        title="立即生成"
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <!--      <n-alert :show-icon="false" type="info">-->
+        <!--        注意：！-->
+        <!--      </n-alert>-->
+        <n-form
+          :model="formParams"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="生成类型" path="genType">
+            <n-select
+              placeholder="请选择"
+              :options="selectList.genType"
+              v-model:value="formParams.genType"
+              :on-update:value="onUpdateValueGenType"
+            />
+          </n-form-item>
+
+          <n-form-item
+            label="数据库"
+            path="dbName"
+            v-if="formParams.genType >= 10 && formParams.genType < 20"
+          >
+            <n-select
+              placeholder="请选择"
+              :options="selectList.db"
+              v-model:value="formParams.dbName"
+              @update:value="handleDbUpdateValue"
+            />
+          </n-form-item>
+          <n-form-item
+            label="数据库表"
+            path="tableName"
+            v-if="formParams.genType >= 10 && formParams.genType < 20"
+          >
+            <n-select
+              filterable
+              tag
+              :loading="tablesLoading"
+              placeholder="请选择"
+              :options="selectList.tables"
+              v-model:value="formParams.tableName"
+              @update:value="handleTableUpdateValue"
+              :disabled="formParams.dbName === ''"
+            />
+          </n-form-item>
+
+          <n-form-item label="生成模板" path="genTemplate">
+            <n-select
+              placeholder="请选择"
+              :options="genTemplateOptions"
+              v-model:value="formParams.genTemplate"
+              :onFocus="onFocusGenTemplate"
+              @update:value="handleGenTemplateUpdateValue"
+            />
+          </n-form-item>
+
+          <n-form-item label="选择插件" path="addonName" v-show="selectAddon">
+            <n-select
+              placeholder="请选择"
+              :options="selectList.addons"
+              v-model:value="formParams.addonName"
+            />
+          </n-form-item>
+
+          <n-form-item
+            label="菜单名称"
+            path="tableComment"
+            v-show="formParams.genType >= 10 && formParams.genType < 20"
+          >
+            <n-input placeholder="请输入" v-model:value="formParams.tableComment" />
+          </n-form-item>
+
+          <n-form-item label="实体命名" path="varName">
+            <n-input placeholder="请输入" v-model:value="formParams.varName" />
+          </n-form-item>
+        </n-form>
+
+        <template #action>
+          <n-space>
+            <n-button @click="() => (showModal = false)">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">生成配置</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h, onBeforeMount, 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 { List, Delete, Edit, Selects, TableSelect } from '@/api/develop/code';
+  import { useRouter } from 'vue-router';
+  import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
+  import { newState } from '@/views/develop/code/components/model';
+
+  const selectList = ref({
+    db: [],
+    genType: [],
+    status: [],
+    tables: [],
+    formMode: [],
+    formRole: [],
+    dictMode: [],
+    whereMode: [],
+    addons: [],
+  });
+  const columns = [
+    {
+      title: 'ID',
+      key: 'id',
+      width: 60,
+    },
+    {
+      title: '模板',
+      key: 'genTemplate',
+      render(row) {
+        return h('p', { id: 'app' }, [
+          h('div', {
+            innerHTML: '<div><p>' + row.genTemplateGroup + '</p></div>',
+          }),
+          h('div', {
+            innerHTML:
+              '<div><p>' + getOptionLabel(selectList.value.genType, row.genType) + '</p></div>',
+          }),
+        ]);
+      },
+      width: 120,
+    },
+    {
+      title: '数据库',
+      key: 'dbName',
+      width: 280,
+      render(row) {
+        return h('p', { id: 'app' }, [
+          h('div', {
+            innerHTML: '<div><p>' + row.dbName + '</p></div>',
+          }),
+          h('div', {
+            innerHTML: '<div><p>' + row.tableName + '</p></div>',
+          }),
+        ]);
+      },
+    },
+    {
+      title: '实体命名',
+      key: 'varName',
+      render(row) {
+        return row.varName;
+      },
+      width: 140,
+    },
+    {
+      title: '生成名称',
+      key: 'tableComment',
+      width: 140,
+    },
+    {
+      title: '生成状态',
+      key: 'status',
+      render(row) {
+        return h(
+          NTag,
+          {
+            style: {
+              marginRight: '6px',
+            },
+            type: row.status == 1 ? 'success' : 'warning',
+            bordered: false,
+          },
+          {
+            default: () => getOptionLabel(selectList.value.status, row.status),
+          }
+        );
+      },
+      width: 150,
+    },
+    {
+      title: '创建时间',
+      key: 'createdAt',
+      width: 180,
+    },
+  ];
+
+  const dialog = useDialog();
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  const searchFormRef = ref<any>();
+
+  const schemas = ref<FormSchema[]>([
+    {
+      field: 'genType',
+      component: 'NSelect',
+      label: '生成类型',
+      componentProps: {
+        placeholder: '请选择生成类型',
+        options: [],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'varName',
+      component: 'NInput',
+      label: '实体命名',
+      componentProps: {
+        placeholder: '请输入实体命名',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'status',
+      component: 'NSelect',
+      label: '生成状态',
+      componentProps: {
+        placeholder: '请选择状态码',
+        options: [],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+  ]);
+
+  const router = useRouter();
+  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 = {
+    varName: {
+      required: true,
+      trigger: ['blur', 'input'],
+      message: '实体命名不能为空,首字母大写',
+    },
+  };
+
+  const actionColumn = reactive({
+    width: 180,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '生成配置',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  const loadDataTable = async (res) => {
+    mapWidth();
+    return await List({ ...res, ...searchFormRef.value?.formModel });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleEdit(record: Recordable) {
+    router.push({ name: 'develop_code_deploy', params: { id: record.id } });
+  }
+
+  function handleSubmit(_values: Recordable) {
+    reloadTable();
+  }
+
+  function handleReset(_values: Recordable) {
+    reloadTable();
+  }
+
+  function addTable() {
+    showModal.value = true;
+    formParams.value = newState(null);
+  }
+
+  function confirmForm(e) {
+    e.preventDefault();
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        Edit(formParams.value).then((res) => {
+          message.success('生成成功，正在前往配置');
+          setTimeout(() => {
+            showModal.value = false;
+            router.push({ name: 'develop_code_deploy', params: { id: res.id } });
+          });
+        });
+      } else {
+        message.error('请填写完整信息');
+      }
+      formBtnLoading.value = false;
+    });
+  }
+
+  const dialogWidth = ref('50%');
+  function mapWidth() {
+    let val = document.body.clientWidth;
+    const def = 840; // 默认宽度
+    if (val < def) {
+      dialogWidth.value = '100%';
+    } else {
+      dialogWidth.value = def + 'px';
+    }
+    return dialogWidth.value;
+  }
+
+  function getOptionLabel(options, value) {
+    if (!options || options?.length === 0) {
+      return `unknown`;
+    }
+    for (const item of options) {
+      if (item.value == value) {
+        return item.label;
+      }
+    }
+    return `unknown`;
+  }
+
+  const loadSelect = async () => {
+    selectList.value = await Selects({});
+    for (const item of schemas.value) {
+      switch (item.field) {
+        case 'status':
+          item.componentProps.options = selectList.value.status;
+          break;
+        case 'genType':
+          item.componentProps.options = selectList.value.genType;
+          break;
+      }
+    }
+  };
+
+  const tablesLoading = ref(false);
+  // 处理选项更新
+  async function handleDbUpdateValue(value: string | number | Array<string | number> | null) {
+    tablesLoading.value = true;
+    await loadTableSelect(value);
+    tablesLoading.value = false;
+  }
+
+  async function loadTableSelect(value) {
+    selectList.value.tables = await TableSelect({ name: value });
+  }
+
+  function handleTableUpdateValue(value, option) {
+    formParams.value.varName = option?.defVarName as string;
+    formParams.value.daoName = option?.daoName as string;
+    formParams.value.tableComment = option?.defTableComment as string;
+  }
+
+  const genTemplateOptions = ref([]);
+  function onFocusGenTemplate() {
+    for (let i = 0; i < selectList.value.genType?.length; i++) {
+      if (selectList.value.genType[i].value === formParams.value.genType) {
+        genTemplateOptions.value = selectList.value.genType[i].templates;
+        formParams.value.genTemplate = null;
+      }
+    }
+  }
+
+  function onUpdateValueGenType(value) {
+    formParams.value.genType = value;
+    onFocusGenTemplate();
+  }
+
+  const selectAddon = ref(false);
+  function handleGenTemplateUpdateValue(value, option) {
+    formParams.value.genTemplate = value;
+    selectAddon.value = option.isAddon === true;
+  }
+
+  onBeforeMount(async () => {
+    await loadSelect();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/exception/403.vue b/web/src/views/exception/403.vue
new file mode 100644
index 0000000..a18c770
--- /dev/null
+++ b/web/src/views/exception/403.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-col justify-center page-container">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/403.svg" alt="" />
+    </div>
+    <div class="text-center">
+      <h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
+</script>
+
+<style lang="less" scoped>
+  .page-container {
+    width: 100%;
+    border-radius: 4px;
+    padding: 50px 0;
+    height: 100vh;
+
+    .text-center {
+      h1 {
+        color: #666;
+        padding: 20px 0;
+      }
+    }
+
+    img {
+      width: 350px;
+      margin: 0 auto;
+    }
+  }
+</style>
diff --git a/web/src/views/exception/404.vue b/web/src/views/exception/404.vue
new file mode 100644
index 0000000..8c70110
--- /dev/null
+++ b/web/src/views/exception/404.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-col justify-center page-container">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/404.svg" alt="" />
+    </div>
+    <div class="text-center">
+      <h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
+</script>
+
+<style lang="less" scoped>
+  .page-container {
+    width: 100%;
+    border-radius: 4px;
+    padding: 50px 0;
+    height: 100vh;
+
+    .text-center {
+      h1 {
+        color: #666;
+        padding: 20px 0;
+      }
+    }
+
+    img {
+      width: 350px;
+      margin: 0 auto;
+    }
+  }
+</style>
diff --git a/web/src/views/exception/500.vue b/web/src/views/exception/500.vue
new file mode 100644
index 0000000..ee7c868
--- /dev/null
+++ b/web/src/views/exception/500.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-col justify-center page-container">
+    <div class="text-center">
+      <img src="~@/assets/images/exception/500.svg" alt="" />
+    </div>
+    <div class="text-center">
+      <h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
+      <n-button type="info" @click="goHome">回到首页</n-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
+</script>
+
+<style lang="less" scoped>
+  .page-container {
+    width: 100%;
+    border-radius: 4px;
+    padding: 50px 0;
+    height: 100vh;
+
+    .text-center {
+      h1 {
+        color: #666;
+        padding: 20px 0;
+      }
+    }
+
+    img {
+      width: 350px;
+      margin: 0 auto;
+    }
+  }
+</style>
diff --git a/web/src/views/home/account/BasicSetting.vue b/web/src/views/home/account/BasicSetting.vue
new file mode 100644
index 0000000..adad530
--- /dev/null
+++ b/web/src/views/home/account/BasicSetting.vue
@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-card
+        v-show="showInfo"
+        title="😋 个人信息"
+        embedded
+        :bordered="false"
+        closable
+        hoverable
+        @close="handleClose"
+      >
+        <n-row>
+          <n-thing content-indented>
+            <template #header>
+              {{ timeFix() }}，{{ formValue.realName }}，今天又是充满活力的一天！
+            </template>
+            <template #header-extra> </template>
+            <template #description>
+              <n-descriptions
+                label-placement="left"
+                style="margin-top: 15px"
+                column="2"
+                content-style="padding-right: 20px;"
+              >
+                <n-descriptions-item label="管理员ID">{{ formValue.id }}</n-descriptions-item>
+                <n-descriptions-item label="用户名"> {{ formValue.username }} </n-descriptions-item>
+                <n-descriptions-item label="余额">{{
+                  Number(formValue.balance).toFixed(2)
+                }}</n-descriptions-item>
+                <n-descriptions-item label="积分">
+                  {{ Number(formValue.integral).toFixed(2) }}
+                </n-descriptions-item>
+                <n-descriptions-item label="登录IP">{{
+                  formValue.lastLoginIp
+                }}</n-descriptions-item>
+                <n-descriptions-item label="登录时间"
+                  >{{ formValue.lastLoginAt }}
+                </n-descriptions-item>
+                <n-descriptions-item label="累计登录">
+                  {{ formValue.loginCount }} 次</n-descriptions-item
+                >
+                <n-descriptions-item label="注册时间">
+                  {{ formValue.createdAt }}
+                </n-descriptions-item>
+                <n-descriptions-item label="所属部门">
+                  <n-tag size="small" type="success" strong round :bordered="false">
+                    {{ formValue.deptName }}
+                    <template #icon>
+                      <n-icon :component="CheckmarkCircle" />
+                    </template>
+                  </n-tag>
+                </n-descriptions-item>
+                <n-descriptions-item label="所属角色">
+                  <n-tag size="small" type="success" strong round :bordered="false">
+                    {{ formValue.roleName }}
+                    <template #icon>
+                      <n-icon :component="CheckmarkCircle" />
+                    </template>
+                  </n-tag>
+                </n-descriptions-item>
+              </n-descriptions>
+            </template>
+          </n-thing>
+        </n-row>
+      </n-card>
+
+      <n-form
+        :label-width="80"
+        :model="formValue"
+        :rules="rules"
+        ref="formRef"
+        style="margin-top: 15px"
+      >
+        <n-form-item label="头像" path="avatar">
+          <FileChooser v-model:value="formValue.avatar" file-type="image" />
+        </n-form-item>
+
+        <n-form-item label="姓名" path="realName">
+          <n-input v-model:value="formValue.realName" />
+        </n-form-item>
+
+        <n-form-item label="QQ号码" path="qq">
+          <n-input v-model:value="formValue.qq" placeholder="请输入QQ号码" />
+        </n-form-item>
+
+        <n-form-item label="生日" path="birthday">
+          <DatePicker v-model:formValue="formValue.birthday" type="date" />
+        </n-form-item>
+
+        <n-form-item label="性别" path="sex">
+          <n-radio-group v-model:value="formValue.sex" name="sex">
+            <n-space>
+              <n-radio :value="1">男</n-radio>
+              <n-radio :value="2">女</n-radio>
+              <n-radio :value="3">保密</n-radio>
+            </n-space>
+          </n-radio-group>
+        </n-form-item>
+
+        <n-form-item label="所在省市区" path="cityId">
+          <CitySelector v-model:value="formValue.cityId" />
+        </n-form-item>
+
+        <n-form-item label="联系地址" path="address">
+          <n-input type="textarea" v-model:value="formValue.address" placeholder="联系地址" />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" :loading="formBtnLoading" @click="formSubmit"
+              >保存更新</n-button
+            >
+            <n-button :loading="formBtnLoading" @click="resetForm">重置</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import 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);
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const formBtnLoading = ref(false);
+
+  const rules = {
+    basicName: {
+      required: true,
+      message: '请输入网站名称',
+      trigger: 'blur',
+    },
+  };
+
+  const formValue = ref<UserInfoState>({
+    id: 0,
+    deptName: "",
+    roleName: "",
+    cityLabel: "",
+    permissions: [],
+    username: "",
+    realName: "",
+    avatar: "",
+    balance: 0,
+    sex: 1,
+    qq: "",
+    email: "",
+    mobile: "",
+    birthday: "",
+    cityId: 0,
+    address: "",
+    cash: {
+      name: "",
+      account: "",
+      payeeCode: ""
+    },
+    createdAt: "",
+    loginCount: 0,
+    lastLoginAt: "",
+    lastLoginIp: "",
+    integral: 0,
+    openId: "",
+    inviteCode: ""
+  });
+
+  function formSubmit() {
+    formBtnLoading.value = true;
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateMemberProfile(formValue.value)
+          .then((_res) => {
+            message.success('更新成功');
+            load();
+            userStore.GetInfo();
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function resetForm() {
+    load();
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  async function load() {
+    show.value = true;
+    formValue.value = await getUserInfo();
+    show.value = false;
+  }
+
+  const showInfo = ref(true);
+  function handleClose() {
+    showInfo.value = false;
+  }
+</script>
diff --git a/web/src/views/home/account/CashSetting.vue b/web/src/views/home/account/CashSetting.vue
new file mode 100644
index 0000000..9bffc75
--- /dev/null
+++ b/web/src/views/home/account/CashSetting.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+        <n-form-item label="支付宝姓名" path="name">
+          <n-input v-model:value="formValue.name" />
+        </n-form-item>
+
+        <n-form-item label="支付宝账号" path="account ">
+          <n-input v-model:value="formValue.account" />
+        </n-form-item>
+
+        <n-form-item label="支付宝收款码" path="payeeCode">
+          <FileChooser v-model:value="formValue.payeeCode" file-type="image" />
+        </n-form-item>
+
+        <n-form-item label="登录密码" path="password">
+          <n-input
+            type="password"
+            v-model:value="formValue.password"
+            placeholder="请输入登录密码验证身份"
+          />
+        </n-form-item>
+
+        <div>
+          <n-space>
+            <n-button type="primary" @click="formSubmit">保存更新</n-button>
+          </n-space>
+        </div>
+      </n-form>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { getUserInfo, updateMemberCash } from '@/api/system/user';
+  import FileChooser from '@/components/FileChooser/index.vue';
+
+  const rules = {
+    password: {
+      required: true,
+      message: '请输入登录密码',
+      trigger: 'blur',
+    },
+  };
+
+  const show = ref(false);
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const formValue = ref({
+    password: '',
+    payeeCode: '',
+    account: '',
+    name: '',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateMemberCash({
+          name: formValue.value.name,
+          account: formValue.value.account,
+          payeeCode: formValue.value.payeeCode,
+          password: formValue.value.password,
+        })
+          .then((_res) => {
+            message.success('更新成功');
+            load();
+          })
+          .finally(() => {});
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    getUserInfo()
+      .then((res) => {
+        res.cash.password = '';
+        formValue.value = res.cash;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+</script>
diff --git a/web/src/views/home/account/SafetySetting.vue b/web/src/views/home/account/SafetySetting.vue
new file mode 100644
index 0000000..b9728c1
--- /dev/null
+++ b/web/src/views/home/account/SafetySetting.vue
@@ -0,0 +1,315 @@
+<template>
+  <n-grid cols="1" responsive="screen" class="-mt-5">
+    <n-grid-item>
+      <n-list>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text @click="openUpdatePassForm">修改</n-button>
+          </template>
+          <n-thing title="账户密码">
+            <template #description
+              ><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template
+            >
+          </n-thing>
+        </n-list-item>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text @click="openUpdateMobileForm">修改</n-button>
+          </template>
+          <n-thing title="绑定手机">
+            <template #description
+              ><span class="text-gray-400"
+                >已绑定手机号：+86{{ userStore.info?.mobile }}</span
+              ></template
+            >
+          </n-thing>
+        </n-list-item>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text @click="openUpdateEmailForm">修改</n-button>
+          </template>
+          <n-thing title="绑定邮箱">
+            <template #description
+              ><span class="text-gray-400">已绑定邮箱：{{ userStore.info?.email }}</span></template
+            >
+          </n-thing>
+        </n-list-item>
+      </n-list>
+    </n-grid-item>
+  </n-grid>
+
+  <n-modal
+    v-model:show="showModal"
+    :show-icon="false"
+    preset="dialog"
+    title="修改登录密码"
+    :style="{
+      width: dialogWidth,
+    }"
+  >
+    <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+      <n-form-item label="当前密码" path="oldPassword">
+        <n-input
+          type="password"
+          v-model:value="formValue.oldPassword"
+          placeholder="请输入当前密码"
+        />
+      </n-form-item>
+
+      <n-form-item label="新密码" path="newPassword">
+        <n-input type="password" v-model:value="formValue.newPassword" placeholder="请输入新密码" />
+      </n-form-item>
+
+      <div>
+        <n-space justify="end">
+          <n-button @click="showModal = false">取消</n-button>
+          <n-button type="primary" @click="formSubmit">修改并重新登录</n-button>
+        </n-space>
+      </div>
+    </n-form>
+  </n-modal>
+
+  <n-modal
+    :block-scroll="false"
+    :mask-closable="false"
+    v-model:show="showMobileModal"
+    :show-icon="false"
+    preset="dialog"
+    title="修改手机号"
+    :style="{
+      width: dialogWidth,
+    }"
+  >
+    <n-form :label-width="80" :model="formMobileValue" ref="formMobileRef">
+      <n-form-item label="短信验证码" path="code" v-if="userStore.info?.mobile !== ''">
+        <n-input-group>
+          <n-input v-model:value="formMobileValue.code" placeholder="请输入验证码" />
+          <n-button
+            type="primary"
+            ghost
+            @click="sendMobileCode"
+            :disabled="isCounting"
+            :loading="sendLoading"
+          >
+            {{ sendLabel }}
+          </n-button>
+        </n-input-group>
+
+        <template #feedback> 接收号码：+86{{ userStore.info?.mobile }} </template>
+      </n-form-item>
+
+      <n-form-item label="换绑手机号" path="mobile">
+        <n-input v-model:value="formMobileValue.mobile" placeholder="请输入换绑手机号" />
+      </n-form-item>
+      <div>
+        <n-space justify="end">
+          <n-button @click="showMobileModal = false">取消</n-button>
+          <n-button type="primary" :loading="formMobileBtnLoading" @click="formMobileSubmit"
+            >保存更新</n-button
+          >
+        </n-space>
+      </div>
+    </n-form>
+  </n-modal>
+
+  <n-modal
+    :block-scroll="false"
+    :mask-closable="false"
+    v-model:show="showEmailModal"
+    :show-icon="false"
+    preset="dialog"
+    title="修改邮箱"
+    :style="{
+      width: dialogWidth,
+    }"
+  >
+    <n-form :label-width="80" :model="formEmailValue" ref="formEmailRef">
+      <n-form-item label="邮箱验证码" path="code" v-if="userStore.info?.email !== ''">
+        <n-input-group>
+          <n-input v-model:value="formEmailValue.code" placeholder="请输入验证码" />
+          <n-button
+            type="primary"
+            ghost
+            @click="sendEmailCode"
+            :disabled="isCounting"
+            :loading="sendLoading"
+          >
+            {{ sendLabel }}
+          </n-button>
+        </n-input-group>
+        <template #feedback> 接收邮箱：{{ userStore.info?.email }} </template>
+      </n-form-item>
+
+      <n-form-item label="换绑邮箱" path="email">
+        <n-input v-model:value="formEmailValue.email" placeholder="请输入换绑邮箱" />
+      </n-form-item>
+      <div>
+        <n-space justify="end">
+          <n-button @click="showEmailModal = false">取消</n-button>
+          <n-button type="primary" :loading="formEmailBtnLoading" @click="formEmailSubmit"
+            >保存更新</n-button
+          >
+        </n-space>
+      </div>
+    </n-form>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { useRouter, useRoute } from 'vue-router';
+  import { useSendCode } from '@/hooks/common';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import {
+    updateMemberPwd,
+    updateMemberMobile,
+    updateMemberEmail,
+    SendBindEmail,
+    SendBindSms,
+  } from '@/api/system/user';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+  import { useUserStore } from '@/store/modules/user';
+
+  const { sendLabel, isCounting, loading: sendLoading, activateSend } = useSendCode();
+  const userStore = useUserStore();
+  const rules = {
+    basicName: {
+      required: true,
+      message: '请输入网站名称',
+      trigger: 'blur',
+    },
+  };
+
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const router = useRouter();
+  const route = useRoute();
+  const showModal = ref(false);
+  const formValue = ref({
+    oldPassword: '',
+    newPassword: '',
+  });
+  const dialogWidth = computed(() => {
+    return adaModalWidth(580);
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateMemberPwd({
+          oldPassword: formValue.value.oldPassword,
+          newPassword: formValue.value.newPassword,
+        })
+          .then((_res) => {
+            message.success('更新成功');
+
+            userStore.logout().then(() => {
+              message.success('成功注销登录');
+              // 移除标签页
+              localStorage.removeItem(TABS_ROUTES);
+              router
+                .replace({
+                  name: 'Login',
+                  query: {
+                    redirect: route.fullPath,
+                  },
+                })
+                .finally(() => location.reload());
+            });
+          })
+          .finally(() => {
+            showModal.value = false;
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function openUpdatePassForm() {
+    showModal.value = true;
+    formValue.value.newPassword = '';
+    formValue.value.oldPassword = '';
+  }
+
+  const formMobileBtnLoading = ref(false);
+  const formMobileRef: any = ref(null);
+  const showMobileModal = ref(false);
+  const formMobileValue = ref({
+    mobile: '',
+    code: '',
+  });
+
+  function formMobileSubmit() {
+    formMobileRef.value.validate((errors) => {
+      if (!errors) {
+        formMobileBtnLoading.value = true;
+        updateMemberMobile({
+          mobile: formMobileValue.value.mobile,
+          code: formMobileValue.value.code,
+        })
+          .then((_res) => {
+            message.success('更新成功');
+            showMobileModal.value = false;
+            userStore.GetInfo();
+          })
+          .finally(() => {
+            formMobileBtnLoading.value = false;
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function openUpdateMobileForm() {
+    showMobileModal.value = true;
+    formMobileValue.value.mobile = '';
+    formMobileValue.value.code = '';
+  }
+
+  const formEmailBtnLoading = ref(false);
+  const formEmailRef: any = ref(null);
+  const showEmailModal = ref(false);
+  const formEmailValue = ref({
+    email: '',
+    code: '',
+  });
+
+  function formEmailSubmit() {
+    formEmailRef.value.validate((errors) => {
+      if (!errors) {
+        formEmailBtnLoading.value = true;
+        updateMemberEmail({
+          email: formEmailValue.value.email,
+          code: formEmailValue.value.code,
+        })
+          .then((_res) => {
+            message.success('更新成功');
+            showEmailModal.value = false;
+            userStore.GetInfo();
+          })
+          .finally(() => {
+            formEmailBtnLoading.value = false;
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function openUpdateEmailForm() {
+    showEmailModal.value = true;
+    formEmailValue.value.email = '';
+    formEmailValue.value.code = '';
+  }
+
+  function sendMobileCode() {
+    activateSend(SendBindSms());
+  }
+
+  function sendEmailCode() {
+    activateSend(SendBindEmail());
+  }
+</script>
diff --git a/web/src/views/home/account/ThirdBind.vue b/web/src/views/home/account/ThirdBind.vue
new file mode 100644
index 0000000..daaeb11
--- /dev/null
+++ b/web/src/views/home/account/ThirdBind.vue
@@ -0,0 +1,303 @@
+<template>
+  <n-grid cols="1" responsive="screen" class="-mt-5">
+    <n-grid-item>
+      <n-list>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text @click="openUpdatePassForm">修改</n-button>
+          </template>
+          <n-thing title="绑定微信">
+            <template #description><span class="text-gray-400">已绑定微信号：xxx</span></template>
+          </n-thing>
+        </n-list-item>
+        <n-list-item>
+          <template #suffix>
+            <n-button type="primary" text @click="openUpdateMobileForm">修改</n-button>
+          </template>
+          <n-thing title="绑定抖音">
+            <template #description><span class="text-gray-400">已绑定抖音号：xxx</span></template>
+          </n-thing>
+        </n-list-item>
+      </n-list>
+    </n-grid-item>
+  </n-grid>
+
+  <n-modal
+    v-model:show="showModal"
+    :show-icon="false"
+    preset="dialog"
+    title="修改登录密码"
+    :style="{
+      width: dialogWidth,
+    }"
+  >
+    <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
+      <n-form-item label="当前密码" path="oldPassword">
+        <n-input
+          type="password"
+          v-model:value="formValue.oldPassword"
+          placeholder="请输入当前密码"
+        />
+      </n-form-item>
+
+      <n-form-item label="新密码" path="newPassword">
+        <n-input type="password" v-model:value="formValue.newPassword" placeholder="请输入新密码" />
+      </n-form-item>
+
+      <div>
+        <n-space justify="end">
+          <n-button @click="showModal = false">取消</n-button>
+          <n-button type="primary" @click="formSubmit">修改并重新登录</n-button>
+        </n-space>
+      </div>
+    </n-form>
+  </n-modal>
+
+  <n-modal
+    :block-scroll="false"
+    :mask-closable="false"
+    v-model:show="showMobileModal"
+    :show-icon="false"
+    preset="dialog"
+    title="修改手机号"
+    :style="{
+      width: dialogWidth,
+    }"
+  >
+    <n-form :label-width="80" :model="formMobileValue" ref="formMobileRef">
+      <n-form-item label="短信验证码" path="code" v-if="userStore.info?.mobile !== ''">
+        <n-input-group>
+          <n-input v-model:value="formMobileValue.code" placeholder="请输入验证码" />
+          <n-button
+            type="primary"
+            ghost
+            @click="sendMobileCode"
+            :disabled="isCounting"
+            :loading="sendLoading"
+          >
+            {{ sendLabel }}
+          </n-button>
+        </n-input-group>
+
+        <template #feedback> 接收号码：+86{{ userStore.info?.mobile }} </template>
+      </n-form-item>
+
+      <n-form-item label="换绑手机号" path="mobile">
+        <n-input v-model:value="formMobileValue.mobile" placeholder="请输入换绑手机号" />
+      </n-form-item>
+      <div>
+        <n-space justify="end">
+          <n-button @click="showMobileModal = false">取消</n-button>
+          <n-button type="primary" :loading="formMobileBtnLoading" @click="formMobileSubmit"
+            >保存更新</n-button
+          >
+        </n-space>
+      </div>
+    </n-form>
+  </n-modal>
+
+  <n-modal
+    :block-scroll="false"
+    :mask-closable="false"
+    v-model:show="showEmailModal"
+    :show-icon="false"
+    preset="dialog"
+    title="修改邮箱"
+    :style="{
+      width: dialogWidth,
+    }"
+  >
+    <n-form :label-width="80" :model="formEmailValue" ref="formEmailRef">
+      <n-form-item label="邮箱验证码" path="code" v-if="userStore.info?.email !== ''">
+        <n-input-group>
+          <n-input v-model:value="formEmailValue.code" placeholder="请输入验证码" />
+          <n-button
+            type="primary"
+            ghost
+            @click="sendEmailCode"
+            :disabled="isCounting"
+            :loading="sendLoading"
+          >
+            {{ sendLabel }}
+          </n-button>
+        </n-input-group>
+        <template #feedback> 接收邮箱：{{ userStore.info?.email }} </template>
+      </n-form-item>
+
+      <n-form-item label="换绑邮箱" path="email">
+        <n-input v-model:value="formEmailValue.email" placeholder="请输入换绑邮箱" />
+      </n-form-item>
+      <div>
+        <n-space justify="end">
+          <n-button @click="showEmailModal = false">取消</n-button>
+          <n-button type="primary" :loading="formEmailBtnLoading" @click="formEmailSubmit"
+            >保存更新</n-button
+          >
+        </n-space>
+      </div>
+    </n-form>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import { useRouter, useRoute } from 'vue-router';
+  import { useSendCode } from '@/hooks/common';
+  import { adaModalWidth } from '@/utils/hotgo';
+  import {
+    updateMemberPwd,
+    updateMemberMobile,
+    updateMemberEmail,
+    SendBindEmail,
+    SendBindSms,
+  } from '@/api/system/user';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+  import { useUserStore } from '@/store/modules/user';
+
+  const { sendLabel, isCounting, loading: sendLoading, activateSend } = useSendCode();
+  const userStore = useUserStore();
+  const rules = {
+    basicName: {
+      required: true,
+      message: '请输入网站名称',
+      trigger: 'blur',
+    },
+  };
+
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const router = useRouter();
+  const route = useRoute();
+  const showModal = ref(false);
+  const formValue = ref({
+    oldPassword: '',
+    newPassword: '',
+  });
+  const dialogWidth = computed(() => {
+    return adaModalWidth(580);
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        updateMemberPwd({
+          oldPassword: formValue.value.oldPassword,
+          newPassword: formValue.value.newPassword,
+        })
+          .then((_res) => {
+            message.success('更新成功');
+
+            userStore.logout().then(() => {
+              message.success('成功注销登录');
+              // 移除标签页
+              localStorage.removeItem(TABS_ROUTES);
+              router
+                .replace({
+                  name: 'Login',
+                  query: {
+                    redirect: route.fullPath,
+                  },
+                })
+                .finally(() => location.reload());
+            });
+          })
+          .finally(() => {
+            showModal.value = false;
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function openUpdatePassForm() {
+    message.error('未开放');
+    return;
+    // showModal.value = true;
+    // formValue.value.newPassword = '';
+    // formValue.value.oldPassword = '';
+  }
+
+  const formMobileBtnLoading = ref(false);
+  const formMobileRef: any = ref(null);
+  const showMobileModal = ref(false);
+  const formMobileValue = ref({
+    mobile: '',
+    code: '',
+  });
+
+  function formMobileSubmit() {
+    formMobileRef.value.validate((errors) => {
+      if (!errors) {
+        formMobileBtnLoading.value = true;
+        updateMemberMobile({
+          mobile: formMobileValue.value.mobile,
+          code: formMobileValue.value.code,
+        })
+          .then((_res) => {
+            message.success('更新成功');
+            showMobileModal.value = false;
+            userStore.GetInfo();
+          })
+          .finally(() => {
+            formMobileBtnLoading.value = false;
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function openUpdateMobileForm() {
+    message.error('未开放');
+    return;
+    // showMobileModal.value = true;
+    // formMobileValue.value.mobile = '';
+    // formMobileValue.value.code = '';
+  }
+
+  const formEmailBtnLoading = ref(false);
+  const formEmailRef: any = ref(null);
+  const showEmailModal = ref(false);
+  const formEmailValue = ref({
+    email: '',
+    code: '',
+  });
+
+  function formEmailSubmit() {
+    formEmailRef.value.validate((errors) => {
+      if (!errors) {
+        formEmailBtnLoading.value = true;
+        updateMemberEmail({
+          email: formEmailValue.value.email,
+          code: formEmailValue.value.code,
+        })
+          .then((_res) => {
+            message.success('更新成功');
+            showEmailModal.value = false;
+            userStore.GetInfo();
+          })
+          .finally(() => {
+            formEmailBtnLoading.value = false;
+          });
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function openUpdateEmailForm() {
+    showEmailModal.value = true;
+    formEmailValue.value.email = '';
+    formEmailValue.value.code = '';
+  }
+
+  function sendMobileCode() {
+    activateSend(SendBindSms());
+  }
+
+  function sendEmailCode() {
+    activateSend(SendBindEmail());
+  }
+</script>
diff --git a/web/src/views/home/account/account.vue b/web/src/views/home/account/account.vue
new file mode 100644
index 0000000..2574ba9
--- /dev/null
+++ b/web/src/views/home/account/account.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <n-grid cols="24 300:1 600:24" :x-gap="12">
+      <n-grid-item span="6">
+        <n-card :bordered="false" class="proCard">
+          <n-thing
+            class="thing-cell"
+            v-for="item in typeTabList"
+            :key="item.key"
+            :class="{ 'thing-cell-on': type === item.key }"
+            @click="switchType(item)"
+          >
+            <template #header>{{ item.name }}</template>
+            <template #description>{{ item.desc }}</template>
+          </n-thing>
+        </n-card>
+      </n-grid-item>
+      <n-grid-item span="18">
+        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
+          <BasicSetting v-if="type === 1" />
+          <SafetySetting v-if="type === 2" />
+          <CashSetting v-if="type === 3" />
+          <ThirdBind v-if="type === 4" />
+        </n-card>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import BasicSetting from './BasicSetting.vue';
+  import SafetySetting from './SafetySetting.vue';
+  import CashSetting from './CashSetting.vue';
+  import ThirdBind from './ThirdBind.vue';
+  import { useRouter } from 'vue-router';
+  import {pushHashRouterParameter} from "@/utils/urlUtils";
+
+  const router = useRouter();
+  const type = ref(1);
+  const typeTitle = ref('基本设置');
+
+  const typeTabList = [
+    {
+      name: '基本设置',
+      desc: '个人账户信息设置',
+      key: 1,
+    },
+    {
+      name: '安全设置',
+      desc: '密码、手机号、邮箱等设置',
+      key: 2,
+    },
+    {
+      name: '提现设置',
+      desc: '提现收款账号支付宝设置',
+      key: 3,
+    },
+    {
+      name: '第三方绑定',
+      desc: '第三方快捷登录、消息推送',
+      key: 4,
+    },
+  ];
+
+  onMounted(() => {
+    if (router.currentRoute.value.query?.type) {
+      setDefaultOption();
+    }
+  });
+
+  function setDefaultOption() {
+    const key = router.currentRoute.value.query.type as unknown as number;
+    if (key !== undefined && key > 0) {
+      for (const item of typeTabList) {
+        if (item.key == key) {
+          switchType(item);
+        }
+      }
+    }
+  }
+
+  function switchType(e) {
+    type.value = e.key;
+    typeTitle.value = e.name;
+    pushHashRouterParameter(window.location.href, 'type', e.key);
+  }
+</script>
+<style lang="less" scoped>
+  .thing-cell {
+    margin: 0 -16px 10px;
+    padding: 5px 16px;
+
+    &:hover {
+      background: #f3f3f3;
+      cursor: pointer;
+    }
+  }
+
+  .thing-cell-on {
+    background: #f0faff;
+    color: #2d8cf0;
+
+    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+      color: #2d8cf0;
+    }
+
+    &:hover {
+      background: #f0faff;
+    }
+  }
+</style>
diff --git a/web/src/views/home/message/list.vue b/web/src/views/home/message/list.vue
new file mode 100644
index 0000000..50f4919
--- /dev/null
+++ b/web/src/views/home/message/list.vue
@@ -0,0 +1,162 @@
+<template>
+  <n-spin :show="loading">
+    <n-empty v-show="!dataSource.list || dataSource.list.length === 0" description="无数据" />
+
+    <n-list hoverable clickable class="list-item">
+      <n-list-item v-for="item in dataSource.list" :key="item.id" @click="UnRead(item)">
+        <n-thing
+          content-indented
+          :title="item.title"
+          :description="item.createdAt"
+          :content-style="{ padding: '10px' }"
+        >
+          <template #avatar>
+            <n-badge v-bind="getBadgePops(item)">
+              <n-avatar v-if="item.senderAvatar !== ''" round :size="28" :src="item.senderAvatar" />
+              <n-icon-wrapper v-else :size="28" :border-radius="10">
+                <n-icon :size="20" :component="getIcon(item)" />
+              </n-icon-wrapper>
+            </n-badge>
+          </template>
+
+          <template #header-extra>
+            <n-tag
+              v-if="item.tagTitle !== '' && item.tagTitle !== undefined"
+              v-bind="item.tagProps"
+              size="large"
+              strong
+            >
+              {{ item.tagTitle }}
+            </n-tag>
+          </template>
+
+          <template #footer>
+            <span v-html="filters(item.content)"></span>
+          </template>
+        </n-thing>
+      </n-list-item>
+    </n-list>
+  </n-spin>
+
+  <n-space justify="end" style="margin-top: 30px">
+    <n-pagination
+      v-model:page="dataSource.page"
+      :page-count="dataSource.pageCount"
+      :page-slot="5"
+      :page-sizes="[5, 10, 50, 100]"
+      size="medium"
+      show-quick-jumper
+      show-size-picker
+      :on-update:page="onUpdatePage"
+      :on-update:page-size="onUpdatePageSize"
+    >
+      <template #prefix>共 {{ dataSource.totalCount }} 条</template>
+    </n-pagination>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { getIcon, MessageRow, parseMessage } from '@/enums/systemMessageEnum';
+  import { MessageList, UpRead } from '@/api/apply/notice';
+  import { debounce } from 'lodash-es';
+  import { notificationStoreWidthOut } from '@/store/modules/notification';
+
+  interface Props {
+    type?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: '1',
+  });
+
+  interface dataList {
+    page: number;
+    pageSize: number;
+    pageCount: number;
+    totalCount: number;
+    list: null | MessageRow[];
+  }
+
+  const dataSource = ref<dataList>({
+    page: 1,
+    pageSize: 5,
+    pageCount: 1,
+    totalCount: 0,
+    list: [],
+  });
+
+  const loading = ref(false);
+  const notificationStore = notificationStoreWidthOut();
+
+  function loadDataSource() {
+    loading.value = true;
+    MessageList({
+      type: props.type,
+      page: dataSource.value.page,
+      pageSize: dataSource.value.pageSize,
+    })
+      .then((res) => {
+        if (res.list?.length > 0) {
+          for (let i = 0; i < res.list.length; i++) {
+            res.list[i] = parseMessage(res.list[i]);
+          }
+        }
+        dataSource.value = res as dataList;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  function UnRead(item: MessageRow) {
+    UpRead({ id: item.id })
+      .then(() => {
+        item.isRead = true;
+        debounceCallback();
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  const debounceCallback = debounce(function () {
+    notificationStore.pullMessages();
+  }, 1000);
+
+  function getBadgePops(item: MessageRow) {
+    if (item.isRead) {
+      return {};
+    }
+    return { dot: true, processing: true, offset: [-2, 2] };
+  }
+
+  function onUpdatePage(page: number) {
+    dataSource.value.page = page;
+    loadDataSource();
+  }
+
+  function onUpdatePageSize(pageSize: number) {
+    dataSource.value.pageSize = pageSize;
+    loadDataSource();
+  }
+
+  onMounted(() => {
+    loadDataSource();
+  });
+
+  function filters(data) {
+    return data.replace(/\n/g, '<br>');
+  }
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.list-item) {
+    margin-left: calc(1vw);
+    margin-right: calc(1vw);
+  }
+
+  :deep(img, video, audio) {
+    width: 100%;
+  }
+</style>
diff --git a/web/src/views/home/message/message.vue b/web/src/views/home/message/message.vue
new file mode 100644
index 0000000..547f571
--- /dev/null
+++ b/web/src/views/home/message/message.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="我的消息">
+        在这里，您可以方便地查看平台中的通知、公告和与您相关的私信消息
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <n-tabs
+        type="card"
+        class="card-tabs"
+        :value="defaultTab"
+        animated
+        @before-leave="handleBeforeLeave"
+      >
+        <n-tab-pane name="1" tab="通知"> <List :type="defaultTab" /></n-tab-pane>
+        <n-tab-pane name="2" tab="公告"> <List :type="defaultTab" /> </n-tab-pane>
+        <n-tab-pane name="3" tab="私信"> <List :type="defaultTab" /> </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import List from './list.vue';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+  const defaultTab = ref('1');
+
+  onMounted(() => {
+    if (router.currentRoute.value.query?.type) {
+      defaultTab.value = router.currentRoute.value.query.type as string;
+    }
+  });
+
+  function handleBeforeLeave(tabName: string) {
+    defaultTab.value = tabName;
+  }
+</script>
diff --git a/web/src/views/iframe/index.vue b/web/src/views/iframe/index.vue
new file mode 100644
index 0000000..ad6d76b
--- /dev/null
+++ b/web/src/views/iframe/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <n-spin :show="loading">
+    <div class="frame">
+      <iframe :src="frameSrc" class="frame-iframe" ref="frameRef"></iframe>
+    </div>
+  </n-spin>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, onMounted, nextTick } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  const currentRoute = useRoute();
+  const loading = ref(false);
+  const frameRef = ref<HTMLFrameElement | null>(null);
+  const frameSrc = ref<string>('');
+
+  if (unref(currentRoute.meta)?.frameSrc) {
+    frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
+  }
+
+  function hideLoading() {
+    loading.value = false;
+  }
+
+  function init() {
+    nextTick(() => {
+      const iframe = unref(frameRef);
+      if (!iframe) return;
+      const _frame = iframe as any;
+      if (_frame.attachEvent) {
+        _frame.attachEvent('onload', () => {
+          hideLoading();
+        });
+      } else {
+        iframe.onload = () => {
+          hideLoading();
+        };
+      }
+    });
+  }
+
+  onMounted(() => {
+    loading.value = true;
+    init();
+  });
+
+  function open(src: string) {
+    frameSrc.value = src;
+  }
+
+  defineExpose({
+    open,
+  });
+</script>
+
+<style lang="less" scoped>
+  .frame {
+    width: 100%;
+    height: 100vh;
+
+    &-iframe {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border: 0;
+      box-sizing: border-box;
+    }
+  }
+</style>
diff --git a/web/src/views/log/ems-log/columns.ts b/web/src/views/log/ems-log/columns.ts
new file mode 100644
index 0000000..9e6239c
--- /dev/null
+++ b/web/src/views/log/ems-log/columns.ts
@@ -0,0 +1,80 @@
+import { h } from 'vue';
+import { NTag } from 'naive-ui';
+
+export const columns = [
+  {
+    title: '模块',
+    key: 'module',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.module == 'admin' ? 'info' : 'success',
+          bordered: false,
+        },
+        {
+          default: () => row.module,
+        }
+      );
+    },
+  },
+  {
+    title: '操作人',
+    key: 'memberName',
+    render(row) {
+      if (row.memberId === 0) {
+        return row.memberName;
+      }
+      return row.memberName + '(' + row.memberId + ')';
+    },
+  },
+  {
+    title: '请求方式',
+    key: 'method',
+  },
+  {
+    title: '请求路径',
+    key: 'url',
+  },
+  {
+    title: '访问IP',
+    key: 'ip',
+  },
+  // {
+  //   title: 'IP地区',
+  //   key: 'region',
+  // },
+  {
+    title: '状态码',
+    key: 'errorCode',
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: row.errorCode == 0 ? 'success' : 'warning',
+          bordered: false,
+        },
+        {
+          default: () => row.errorMsg + '(' + row.errorCode + ')',
+        }
+      );
+    },
+  },
+  {
+    title: 'Goroutine耗时',
+    key: 'takeUpTime',
+    render(row) {
+      return row.takeUpTime + ' ms';
+    },
+  },
+  {
+    title: '访问时间',
+    key: 'createdAt',
+  },
+];
diff --git a/web/src/views/log/ems-log/index.vue b/web/src/views/log/ems-log/index.vue
new file mode 100644
index 0000000..b6e846a
--- /dev/null
+++ b/web/src/views/log/ems-log/index.vue
@@ -0,0 +1,292 @@
+<template>
+  <n-card :bordered="false" class="proCard">
+    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
+      <template #statusSlot="{ model, field }">
+        <n-input v-model:value="model[field]" />
+      </template>
+    </BasicForm>
+
+    <BasicTable
+      :openChecked="true"
+      :columns="columns"
+      :request="loadDataTable"
+      :row-key="(row) => row.id"
+      ref="actionRef"
+      :actionColumn="actionColumn"
+      @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1090"
+    >
+      <template #tableTitle>
+        <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
+          <template #icon>
+            <n-icon>
+              <DeleteOutlined />
+            </n-icon>
+          </template>
+          批量删除
+        </n-button>
+      </template>
+
+      <template #toolbar>
+        <n-button type="primary" @click="reloadTable">ems-log刷新数据</n-button>
+      </template>
+    </BasicTable>
+  </n-card>
+</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 { getLogList, Delete } from '@/api/log/log';
+  import { columns } from './columns';
+  import { useRouter } from 'vue-router';
+  import { DeleteOutlined } from '@vicons/antd';
+
+  const dialog = useDialog();
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'member_id',
+      component: 'NInput',
+      label: '操作人',
+      componentProps: {
+        placeholder: '请输入操作人ID',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'url',
+      component: 'NInput',
+      label: '接口路径',
+      componentProps: {
+        placeholder: '请输入接口路径',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'ip',
+      component: 'NInput',
+      label: '访问IP',
+      componentProps: {
+        placeholder: '请输入IP地址',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'method',
+      component: 'NSelect',
+      label: '请求方式',
+      componentProps: {
+        placeholder: '请选择请求方式',
+        options: [
+          {
+            label: 'GET',
+            value: 'GET',
+          },
+          {
+            label: 'POST',
+            value: 'POST',
+          },
+        ],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'created_at',
+      component: 'NDatePicker',
+      label: '访问时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        // defaultValue: [new Date() - 86400000 * 30, new Date()],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'take_up_time',
+      component: 'NSelect',
+      label: '请求耗时',
+      componentProps: {
+        placeholder: '请选择请求耗时',
+        options: [
+          {
+            label: '50ms内',
+            value: '50',
+          },
+          {
+            label: '100ms内',
+            value: '100',
+          },
+          {
+            label: '200ms内',
+            value: '200',
+          },
+          {
+            label: '500ms内',
+            value: '500',
+          },
+        ],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'error_code',
+      component: 'NSelect',
+      label: '状态码',
+      componentProps: {
+        placeholder: '请选择状态码',
+        options: [
+          {
+            label: '0 成功',
+            value: '0',
+          },
+          {
+            label: '-1 失败',
+            value: '-1',
+          },
+        ],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+  ];
+
+  const router = useRouter();
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const actionRef = ref();
+  const formParams = ref({});
+
+  const params = ref({
+    pageSize: 10,
+  });
+
+  const actionColumn = reactive({
+    width: 220,
+    title: '操作',
+    key: 'action',
+    // fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '查看详情',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+    if (rowKeys.length > 0) {
+      batchDeleteDisabled.value = false;
+    } else {
+      batchDeleteDisabled.value = true;
+    }
+
+    checkedIds.value = rowKeys;
+  }
+
+  function handleDelete(record: Recordable) {
+    console.log('点击了删除', record);
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record)
+          .then((_res) => {
+            message.success('操作成功');
+            reloadTable();
+          })
+          .catch((e: Error) => {
+            // message.error(e.message ?? '操作失败');
+          });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value })
+          .then((_res) => {
+            message.success('操作成功');
+            reloadTable();
+          })
+          .catch((e: Error) => {
+            message.error(e.message ?? '操作失败');
+          });
+      },
+      onNegativeClick: () => {
+        // message.error('取消');
+      },
+    });
+  }
+
+  const loadDataTable = async (res) => {
+    return await getLogList({ ...formParams.value, ...params.value, ...res });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleEdit(record: Recordable) {
+    console.log('点击了编辑', record);
+    router.push({ name: 'ems_view', params: { id: record.id } });
+  }
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    formParams.value = values;
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+    formParams.value = {};
+    reloadTable();
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/log/ems-log/view.vue b/web/src/views/log/ems-log/view.vue
new file mode 100644
index 0000000..d39e7c3
--- /dev/null
+++ b/web/src/views/log/ems-log/view.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <n-card
+      :bordered="false"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: true }"
+      :title="data.id ? '日志详情 ID：' + data.id : '日志详情'"
+    >
+      <n-descriptions label-placement="left" class="py-2">
+        <n-descriptions-item label="请求方式">{{ data.method }}</n-descriptions-item>
+        <n-descriptions-item>
+          <template #label>请求地址</template>
+          {{ data.url }}
+        </n-descriptions-item>
+        <n-descriptions-item label="请求耗时">{{ data.takeUpTime }} ms</n-descriptions-item>
+        <n-descriptions-item label="访问IP">{{ data.ip }}</n-descriptions-item>
+        <n-descriptions-item label="IP归属地">河南 郑州</n-descriptions-item>
+        <n-descriptions-item label="链路ID">{{ data.reqId }}</n-descriptions-item>
+        <n-descriptions-item label="响应时间">{{
+          timestampToTime(data.timestamp)
+        }}</n-descriptions-item>
+
+        <n-descriptions-item label="创建时间">{{ data.createdAt }}</n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card
+      :bordered="false"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: true }"
+      title="访问代理"
+    >
+      {{ data.userAgent }}
+    </n-card>
+    <n-card
+      :bordered="false"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: true }"
+      title="报错信息"
+    >
+      <n-descriptions label-placement="left" class="py-2">
+        <n-descriptions-item label="报错状态码"> {{ data.errorCode }} </n-descriptions-item>
+        <n-descriptions-item label="报错消息">
+          <n-tag type="success"> {{ data.errorMsg }} </n-tag>
+        </n-descriptions-item>
+        <n-descriptions-item label="报错日志">
+          <n-tag type="success"> {{ data.errorData }} </n-tag>
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card
+      :bordered="false"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: true }"
+      title="Header请求头"
+    >
+      <JsonViewer
+        :value="JSON.parse(data.headerData ?? '{}')"
+        :expand-depth="5"
+        copyable
+        boxed
+        sort
+        style="width: 100%; min-width: 3.125rem"
+      />
+    </n-card>
+
+    <n-card
+      :bordered="false"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: true }"
+      title="GET参数"
+    >
+      <JsonViewer
+        :value="JSON.parse(data.getData ?? '{}')"
+        :expand-depth="5"
+        copyable
+        boxed
+        sort
+        style="width: 100%; min-width: 3.125rem"
+      />
+    </n-card>
+
+    <n-card
+      :bordered="false"
+      class="proCard mt-4"
+      size="small"
+      :segmented="{ content: true }"
+      title="POST参数"
+    >
+      <JsonViewer
+        :value="JSON.parse(data.postData ?? '{}')"
+        :expand-depth="5"
+        copyable
+        boxed
+        sort
+        style="width: 100%; min-width: 3.125rem"
+      />
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { JsonViewer } from 'vue3-json-viewer';
+  import 'vue3-json-viewer/dist/vue3-json-viewer.css';
+  import { useRouter } from 'vue-router';
+  import { useMessage } from 'naive-ui';
+  import { View } from '@/api/log/log';
+  import { timestampToTime } from '@/utils/dateUtil';
+
+  const message = useMessage();
+  const router = useRouter();
+  const logId = Number(router.currentRoute.value.params.id);
+
+  onMounted(async () => {
+    if (logId === undefined || logId < 1) {
+      message.error('ID不正确，请检查！');
+      return;
+    }
+
+    await getInfo();
+  });
+
+  const data = ref({});
+
+  const getInfo = async () => {
+    data.value = await View({ id: logId });
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/log/log/columns.ts b/web/src/views/log/log/columns.ts
new file mode 100644
index 0000000..560439f
--- /dev/null
+++ b/web/src/views/log/log/columns.ts
@@ -0,0 +1,48 @@
+import { h } from 'vue';
+import Column from './components/Column.vue';
+
+export const columns = [
+  {
+    title: '记录ID',
+    key: 'id',
+    width: 100,
+  },
+  {
+    title: '访客',
+    key: 'name',
+    width: 180,
+    render(row) {
+      return h(Column, {
+        state: row,
+        column: 'visitor',
+      });
+    },
+  },
+  {
+    title: '请求接口',
+    key: 'name',
+    width: 260,
+    render(row) {
+      return h(Column, {
+        state: row,
+        column: 'request',
+      });
+    },
+  },
+  {
+    title: '接口响应',
+    key: 'name',
+    width: 260,
+    render(row) {
+      return h(Column, {
+        state: row,
+        column: 'response',
+      });
+    },
+  },
+  {
+    title: '访问时间',
+    key: 'createdAt',
+    width: 180,
+  },
+];
diff --git a/web/src/views/log/log/components/Column.vue b/web/src/views/log/log/components/Column.vue
new file mode 100644
index 0000000..e07a58c
--- /dev/null
+++ b/web/src/views/log/log/components/Column.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="box">
+    <template v-if="column === 'visitor'">
+      <div class="flex flex-col">
+        <div class="flex flex-row mb-1">
+          <div class="text">
+            {{
+              state.memberId === 0
+                ? state.memberName
+                : state.memberName + '(' + state.memberId + ')'
+            }}
+          </div>
+        </div>
+        <div class="flex flex-row">
+          <div>访问IP：</div>
+          <div class="text">{{ state.ip }}</div>
+        </div>
+      </div>
+      <div class="text">
+        {{ state.cityLabel !== '' ? state.cityLabel : '局域网' }}
+      </div>
+    </template>
+
+    <template v-if="column === 'request'">
+      <div class="flex flex-col">
+        <div class="flex flex-row">
+          <div class="text mr-1 mb-1">
+            <n-button :type="state.method === 'GET' ? 'tertiary' : 'primary'" size="tiny">
+              {{ state.method }}
+            </n-button>
+          </div>
+          <div class="text">{{ state.url }}</div>
+        </div>
+        <div class="flex flex-row">
+          <div class="text">{{ state.tags }}</div>
+        </div>
+      </div>
+      <div>
+        {{ state.summary }}
+      </div>
+    </template>
+
+    <template v-if="column === 'response'">
+      <div class="flex flex-col">
+        <div class="flex flex-row">
+          <div class="text mr-1 mb-1">
+            <n-button v-if="state.errorCode === 0" type="tertiary" size="tiny">
+              {{ state.errorMsg }}
+            </n-button>
+            <n-button v-else type="error" size="tiny">
+              {{ state.errorCode }} → {{ state.errorMsg }}
+            </n-button>
+          </div>
+        </div>
+        <div class="flex flex-row">
+          <div class="text">处理耗时：{{ state.takeUpTime }}ms</div>
+        </div>
+        <div class="flex flex-row">
+          <div class="text">响应时间：{{ timestampToTime(state.timestamp) }}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { basicProps } from './props';
+  import { timestampToTime } from '@/utils/dateUtil';
+
+  const props = defineProps(basicProps);
+</script>
+
+<style lang="less" scoped>
+  .text {
+    display: inline;
+  }
+</style>
diff --git a/web/src/views/log/log/components/props.ts b/web/src/views/log/log/components/props.ts
new file mode 100644
index 0000000..0221c96
--- /dev/null
+++ b/web/src/views/log/log/components/props.ts
@@ -0,0 +1,12 @@
+import { State } from '@/views/log/log/model';
+
+export const basicProps = {
+  state: {
+    type: State,
+    default: null,
+  },
+  column: {
+    type: String,
+    default: '',
+  },
+};
diff --git a/web/src/views/log/log/index.vue b/web/src/views/log/log/index.vue
new file mode 100644
index 0000000..b972905
--- /dev/null
+++ b/web/src/views/log/log/index.vue
@@ -0,0 +1,156 @@
+<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
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-20000"
+      >
+        <template #tableTitle>
+          <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { getLogList, Delete } from '@/api/log/log';
+  import { columns } from './columns';
+  import { useRouter } from 'vue-router';
+  import { DeleteOutlined } from '@vicons/antd';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import { loadOptions, schemas } from './model';
+
+  const dialog = useDialog();
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  const router = useRouter();
+  const message = useMessage();
+  const actionRef = ref();
+  const formParams = ref({});
+
+  const actionColumn = reactive({
+    width: 160,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '查看详情',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  const loadDataTable = async (res) => {
+    return await getLogList({ ...formParams.value, ...res });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleEdit(record: Recordable) {
+    router.push({ name: 'log_view', params: { id: record.id } });
+  }
+
+  function handleSubmit(values: Recordable) {
+    formParams.value = values;
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    formParams.value = {};
+    reloadTable();
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/log/log/model.ts b/web/src/views/log/log/model.ts
new file mode 100644
index 0000000..de23bb6
--- /dev/null
+++ b/web/src/views/log/log/model.ts
@@ -0,0 +1,151 @@
+import { FormSchema } from '@/components/Form';
+import { ref } from 'vue';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { useDictStore } from '@/store/modules/dict';
+
+const dict = useDictStore();
+
+export class State {
+  id = 0;
+  reqId = '';
+  appId = '';
+  merchantId = 0;
+  memberId = 0;
+  method = '';
+  module = '';
+  url = '';
+  getData: Record<string, any> | null = null;
+  postData: Record<string, string[]> | null = null;
+  headerData: Record<string, string[]> | null = null;
+  ip = '';
+  provinceId = 0;
+  cityId = 0;
+  errorCode = 0;
+  errorMsg = '';
+  errorData: string[] = [];
+  userAgent = '';
+  takeUpTime = 0;
+  timestamp = 0;
+  status = 0;
+  createdAt = '';
+  updatedAt = '';
+  cityLabel = '';
+  tags = '';
+  summary = '';
+  description = '';
+}
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'reqId',
+    component: 'NInput',
+    label: '链路ID',
+    componentProps: {
+      placeholder: '请输入链路ID',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'complexMemberId',
+    component: 'ComplexMemberPicker',
+    label: '操作人',
+    componentProps: {
+      placeholder: '请选择操作人',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'url',
+    component: 'NInput',
+    label: '接口路径',
+    componentProps: {
+      placeholder: '请输入接口路径',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'keyword',
+    component: 'NInput',
+    label: '关键词',
+    componentProps: {
+      placeholder: '请输入关键词',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'ip',
+    component: 'NInput',
+    label: '访问IP',
+    componentProps: {
+      placeholder: '请输入IP地址',
+      onInput: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'method',
+    component: 'NSelect',
+    label: '请求方式',
+    componentProps: {
+      placeholder: '请选择请求方式',
+      options: dict.getOption('HTTPMethod'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'createdAt',
+    component: 'NDatePicker',
+    label: '访问时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'takeUpTime',
+    component: 'NSelect',
+    label: '请求耗时',
+    componentProps: {
+      placeholder: '请选择请求耗时',
+      options: dict.getOption('HTTPHandlerTime'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'errorCode',
+    component: 'NSelect',
+    label: '状态码',
+    labelMessage: '支持填入自定义状态码',
+    componentProps: {
+      placeholder: '请选择状态码',
+      options: dict.getOption('HTTPApiCode'),
+      filterable: true,
+      tag: true,
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['HTTPMethod', 'HTTPHandlerTime', 'HTTPApiCode']);
+}
diff --git a/web/src/views/log/log/view.vue b/web/src/views/log/log/view.vue
new file mode 100644
index 0000000..f32da12
--- /dev/null
+++ b/web/src/views/log/log/view.vue
@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <n-spin :show="loading" description="请稍候...">
+      <n-card
+        :bordered="false"
+        class="proCard mt-4"
+        size="small"
+        :segmented="{ content: true }"
+        :title="data.id ? '日志详情 ID：' + data.id : '日志详情'"
+      >
+        <template #header-extra>
+          <n-button icon-placement="right" @click="goBackOrToPage({ name: 'log' })">
+            <template #icon>
+              <n-icon>
+                <ArrowRightOutlined />
+              </n-icon>
+            </template>
+            返回
+          </n-button>
+        </template>
+        <n-descriptions label-placement="left" class="py-2" :column="settingStore.isMobile ? 1 : 3">
+          <n-descriptions-item label="请求方式">{{ data.method }}</n-descriptions-item>
+          <n-descriptions-item>
+            <template #label>请求地址</template>
+            {{ data.url }}
+          </n-descriptions-item>
+          <n-descriptions-item label="接口名称"
+            >{{ data.tags }} / {{ data.summary }}</n-descriptions-item
+          >
+          <n-descriptions-item label="访问IP">{{ data.ip }}</n-descriptions-item>
+          <n-descriptions-item label="IP归属地">{{ data.cityLabel }}</n-descriptions-item>
+          <n-descriptions-item label="链路ID">{{ data.reqId }}</n-descriptions-item>
+          <n-descriptions-item label="请求耗时">{{ data.takeUpTime }} ms</n-descriptions-item>
+          <n-descriptions-item label="响应时间">{{
+            data.timestamp > 0 ? timestampToTime(data.timestamp) : '--'
+          }}</n-descriptions-item>
+
+          <n-descriptions-item label="访问时间">{{ data.createdAt }}</n-descriptions-item>
+        </n-descriptions>
+      </n-card>
+      <n-card
+        :bordered="false"
+        class="proCard mt-4"
+        size="small"
+        :segmented="{ content: true }"
+        title="访问代理"
+      >
+        {{ data.userAgent }}
+      </n-card>
+      <n-card
+        :bordered="false"
+        class="proCard mt-4"
+        size="small"
+        :segmented="{ content: true }"
+        title="报错信息"
+      >
+        <n-descriptions label-placement="left" class="py-2">
+          <n-descriptions-item label="错误状态码"> {{ data.errorCode }} </n-descriptions-item>
+          <n-descriptions-item label="错误提示">
+            <n-tag type="error"> {{ data.errorMsg }} </n-tag>
+          </n-descriptions-item>
+        </n-descriptions>
+      </n-card>
+
+      <n-card
+        :bordered="false"
+        class="proCard mt-4"
+        size="small"
+        :segmented="{ content: true }"
+        title="堆栈打印"
+      >
+        <JsonViewer
+          :value="data.errorData"
+          :expand-depth="5"
+          copyable
+          boxed
+          sort
+          class="json-width"
+        />
+      </n-card>
+
+      <n-card
+        :bordered="false"
+        class="proCard mt-4"
+        size="small"
+        :segmented="{ content: true }"
+        title="Header请求头"
+      >
+        <JsonViewer
+          :value="data.headerData"
+          :expand-depth="5"
+          copyable
+          boxed
+          sort
+          class="json-width"
+        />
+      </n-card>
+
+      <n-card
+        :bordered="false"
+        class="proCard mt-4"
+        size="small"
+        :segmented="{ content: true }"
+        title="GET参数"
+      >
+        <JsonViewer
+          :value="data.getData"
+          :expand-depth="5"
+          copyable
+          boxed
+          sort
+          class="json-width"
+        />
+      </n-card>
+
+      <n-card
+        :bordered="false"
+        class="proCard mt-4"
+        size="small"
+        :segmented="{ content: true }"
+        title="POST参数"
+      >
+        <JsonViewer
+          :value="data.postData"
+          :expand-depth="5"
+          copyable
+          boxed
+          sort
+          class="json-width"
+        />
+      </n-card>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { JsonViewer } from 'vue3-json-viewer';
+  import 'vue3-json-viewer/dist/vue3-json-viewer.css';
+  import { useRouter } from 'vue-router';
+  import { useMessage } from 'naive-ui';
+  import { View } from '@/api/log/log';
+  import { timestampToTime } from '@/utils/dateUtil';
+  import { ArrowRightOutlined } from '@vicons/antd';
+  import { goBackOrToPage } from '@/utils/urlUtils';
+  import { State } from '@/views/log/log/model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+
+  const message = useMessage();
+  const router = useRouter();
+  const settingStore = useProjectSettingStore();
+  const params = router.currentRoute.value.params;
+  const loading = ref(false);
+  const data = ref<State>(new State());
+
+  const getInfo = () => {
+    loading.value = true;
+    View(params)
+      .then((res) => {
+        data.value = res as unknown as State;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  };
+
+  onMounted(() => {
+    if (!params.id) {
+      message.error('日志ID不正确，请检查！');
+      return;
+    }
+    getInfo();
+  });
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.json-width) {
+    width: 100%;
+    min-width: 3.125rem;
+  }
+</style>
diff --git a/web/src/views/log/login-log/index.vue b/web/src/views/log/login-log/index.vue
new file mode 100644
index 0000000..7042e01
--- /dev/null
+++ b/web/src/views/log/login-log/index.vue
@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="登录日志"> 在这里会记录管理后台所有的来访登录情况 </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm
+        @register="register"
+        @submit="reloadTable"
+        @reset="reloadTable"
+        @keyup.enter="reloadTable"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-20000"
+      >
+        <template #tableTitle>
+          <n-button
+            type="error"
+            @click="handleBatchDelete"
+            :disabled="batchDeleteDisabled"
+            class="min-left-space"
+            v-if="hasPermission(['/loginLog/delete'])"
+          >
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+          <n-button
+            type="primary"
+            @click="handleExport"
+            class="min-left-space"
+            v-if="hasPermission(['/loginLog/export'])"
+          >
+            <template #icon>
+              <n-icon>
+                <ExportOutlined />
+              </n-icon>
+            </template>
+            导出
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form/index';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { List, Export, Delete } from '@/api/loginLog';
+  import { columns, schemas, loadOptions } from './model';
+  import { ExportOutlined, DeleteOutlined } from '@vicons/antd';
+  import { useRouter } from 'vue-router';
+  import { adaTableScrollX } from '@/utils/hotgo';
+
+  const { hasPermission } = usePermission();
+  const router = useRouter();
+  const actionRef = ref();
+  const dialog = useDialog();
+  const message = useMessage();
+  const searchFormRef = ref<any>({});
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+
+  const actionColumn = reactive({
+    width: 160,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '查看详情',
+            onClick: handleView.bind(null, record),
+            auth: ['/loginLog/view'],
+            ifShow: () => {
+              return record.sysLogId > 0;
+            },
+          },
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+            auth: ['/loginLog/delete'],
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  const loadDataTable = async (res) => {
+    return await List({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleView(record: Recordable) {
+    router.push({ name: 'log_view', params: { id: record.sysLogId } });
+  }
+
+  function handleDelete(record: Recordable) {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleBatchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要批量删除？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('删除成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function handleExport() {
+    message.loading('正在导出列表...', { duration: 1200 });
+    Export(searchFormRef.value?.formModel);
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/log/login-log/model.ts b/web/src/views/log/login-log/model.ts
new file mode 100644
index 0000000..698283d
--- /dev/null
+++ b/web/src/views/log/login-log/model.ts
@@ -0,0 +1,140 @@
+import { h, ref } from 'vue';
+import { FormSchema } from '@/components/Form';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+import { NTag } from 'naive-ui';
+import { useDictStore } from '@/store/modules/dict';
+import { renderOptionTag } from '@/utils';
+
+const dict = useDictStore();
+
+export const schemas = ref<FormSchema[]>([
+  {
+    field: 'username',
+    component: 'NInput',
+    label: '用户名',
+    componentProps: {
+      placeholder: '请输入用户名',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'loginIp',
+    component: 'NInput',
+    label: 'IP地址',
+    componentProps: {
+      placeholder: '请输入IP地址',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'status',
+    component: 'NSelect',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态',
+      options: dict.getOption('sys_login_status'),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    field: 'loginAt',
+    component: 'NDatePicker',
+    label: '登录时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      shortcuts: defRangeShortcuts(),
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+]);
+
+export const columns = [
+  {
+    title: '记录ID',
+    key: 'id',
+    width: 80,
+  },
+  {
+    title: '用户名',
+    key: 'username',
+    width: 120,
+    render(row) {
+      return h(
+        NTag,
+        {
+          style: {
+            marginRight: '6px',
+          },
+          type: 'info',
+          bordered: false,
+        },
+        {
+          default: () => row.username,
+        }
+      );
+    },
+  },
+  {
+    title: '登录IP',
+    key: 'loginIp',
+    width: 160,
+  },
+  {
+    title: 'IP归属地',
+    key: 'cityLabel',
+    width: 200,
+  },
+  {
+    title: '浏览器',
+    key: 'browser',
+    width: 200,
+  },
+  {
+    title: '操作系统',
+    key: 'os',
+    width: 150,
+  },
+  {
+    title: '状态',
+    key: 'status',
+    render(row) {
+      return renderOptionTag('sys_login_status', row.status);
+    },
+    width: 150,
+  },
+  {
+    title: '提示信息',
+    key: 'errMsg',
+    render(row) {
+      if (row.errMsg !== '') {
+        return row.errMsg;
+      }
+
+      if (row.status === 1) {
+        return '登录成功';
+      }
+      return ``;
+    },
+    width: 200,
+  },
+  {
+    title: '登录时间',
+    key: 'loginAt',
+    width: 180,
+  },
+];
+
+// 加载字典数据选项
+export function loadOptions() {
+  dict.loadOptions(['sys_login_status']);
+}
diff --git a/web/src/views/log/sms-log/index.vue b/web/src/views/log/sms-log/index.vue
new file mode 100644
index 0000000..4b6227b
--- /dev/null
+++ b/web/src/views/log/sms-log/index.vue
@@ -0,0 +1,278 @@
+<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"
+        ref="searchFormRef"
+      >
+        <template #statusSlot="{ model, field }">
+          <n-input v-model:value="model[field]" />
+        </template>
+      </BasicForm>
+
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="scrollX"
+        :resizeHeightOffset="-20000"
+      >
+        <template #tableTitle>
+          <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
+            <template #icon>
+              <n-icon>
+                <DeleteOutlined />
+              </n-icon>
+            </template>
+            批量删除
+          </n-button>
+        </template>
+      </BasicTable>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, h, onMounted, reactive, ref } from 'vue';
+  import { useDialog, useMessage } from 'naive-ui';
+  import { BasicTable, TableAction } from '@/components/Table';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+  import { getLogList, Delete } from '@/api/log/smslog';
+  import { DeleteOutlined } from '@vicons/antd';
+  import { adaTableScrollX } from '@/utils/hotgo';
+  import { defRangeShortcuts } from '@/utils/dateUtil';
+  import { useDictStore } from '@/store/modules/dict';
+  import { renderOptionTag } from '@/utils';
+
+  const dict = useDictStore();
+
+  const columns = [
+    {
+      title: 'ID',
+      key: 'id',
+      width: 100,
+    },
+    {
+      title: '事件模板',
+      key: 'event',
+      render(row) {
+        return renderOptionTag('config_sms_template', row.event);
+      },
+      width: 150,
+    },
+    {
+      title: '手机号',
+      key: 'mobile',
+      render(row) {
+        return row.mobile;
+      },
+      width: 180,
+    },
+    {
+      title: '验证码或短信内容',
+      key: 'code',
+      width: 200,
+    },
+    {
+      title: '验证次数',
+      key: 'times',
+      width: 100,
+    },
+    {
+      title: '发送者IP',
+      key: 'ip',
+      width: 200,
+    },
+    {
+      title: '状态',
+      key: 'status',
+      render(row) {
+        return renderOptionTag('CodeStatusOptions', row.status);
+      },
+      width: 100,
+    },
+    {
+      title: '发送时间',
+      key: 'createdAt',
+      width: 180,
+    },
+    {
+      title: '更新时间',
+      key: 'updatedAt',
+      width: 180,
+    },
+  ];
+
+  const dialog = useDialog();
+  const message = useMessage();
+  const actionRef = ref();
+  const batchDeleteDisabled = ref(true);
+  const checkedIds = ref([]);
+  const searchFormRef = ref<any>({});
+
+  const schemas = ref<FormSchema[]>([
+    {
+      field: 'event',
+      component: 'NSelect',
+      label: '事件模板',
+      componentProps: {
+        placeholder: '请选择事件模板',
+        options: dict.getOption('config_sms_template'),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'mobile',
+      component: 'NInput',
+      label: '手机号',
+      componentProps: {
+        placeholder: '请输入手机号',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ trigger: ['blur'] }],
+    },
+    {
+      field: 'ip',
+      component: 'NInput',
+      label: '发送者IP',
+      componentProps: {
+        placeholder: '请输入IP',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'status',
+      component: 'NSelect',
+      label: '状态',
+      componentProps: {
+        placeholder: '请选择状态',
+        options: dict.getOption('CodeStatusOptions'),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'createdAt',
+      component: 'NDatePicker',
+      label: '发送时间',
+      componentProps: {
+        type: 'datetimerange',
+        clearable: true,
+        shortcuts: defRangeShortcuts(),
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+  ]);
+
+  const actionColumn = reactive({
+    width: 80,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(TableAction as any, {
+        style: 'button',
+        actions: [
+          {
+            label: '删除',
+            onClick: handleDelete.bind(null, record),
+          },
+        ],
+      });
+    },
+  });
+
+  const scrollX = computed(() => {
+    return adaTableScrollX(columns, actionColumn.width);
+  });
+
+  const [register, {}] = useForm({
+    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
+    labelWidth: 80,
+    schemas,
+  });
+
+  function onCheckedRow(rowKeys) {
+    batchDeleteDisabled.value = rowKeys.length <= 0;
+    checkedIds.value = rowKeys;
+  }
+
+  function handleDelete(record: Recordable) {
+    console.log('点击了删除', record);
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '不确定',
+      onPositiveClick: () => {
+        Delete(record).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  function batchDelete() {
+    dialog.warning({
+      title: '警告',
+      content: '你确定要删除？',
+      positiveText: '确定',
+      negativeText: '不确定',
+      onPositiveClick: () => {
+        Delete({ id: checkedIds.value }).then((_res) => {
+          message.success('操作成功');
+          reloadTable();
+        });
+      },
+    });
+  }
+
+  const loadDataTable = async (res) => {
+    return await getLogList({ ...searchFormRef.value?.formModel, ...res });
+  };
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    reloadTable();
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+    reloadTable();
+  }
+
+  function loadOptions() {
+    dict.loadOptions(['config_sms_template', 'CodeStatusOptions']);
+  }
+
+  onMounted(() => {
+    loadOptions();
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/web/src/views/login/components/form-other.vue b/web/src/views/login/components/form-other.vue
new file mode 100644
index 0000000..dbe11ea
--- /dev/null
+++ b/web/src/views/login/components/form-other.vue
@@ -0,0 +1,67 @@
+<template>
+  <n-form-item class="default-color">
+    <div class="flex view-account-other">
+      <div class="flex-initial">
+        <span>其它登录方式</span>
+      </div>
+      <div class="flex-initial mx-2">
+        <a @click="handleLoginWechat">
+          <n-icon size="24" color="rgb(24, 160, 88)">
+            <LogoWechat />
+          </n-icon>
+        </a>
+      </div>
+      <div class="flex-initial mx-2">
+        <a @click="handleLogoTiktok">
+          <n-icon size="24" color="rgba(25, 28, 34, 0.88)">
+            <LogoTiktok />
+          </n-icon>
+        </a>
+      </div>
+      <div
+        class="flex-initial"
+        style="margin-left: auto"
+        v-if="userStore.loginConfig?.loginRegisterSwitch === 1"
+      >
+        <a @click="updateActiveModule(moduleKey)">{{ tag }}</a>
+      </div>
+    </div>
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+  import { LogoWechat, LogoTiktok } from '@vicons/ionicons5';
+  import { useUserStore } from '@/store/modules/user';
+  import { useMessage } from 'naive-ui';
+
+  const userStore = useUserStore();
+
+  interface Props {
+    moduleKey: string;
+    tag: string;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    moduleKey: 'register',
+    tag: '注册账号',
+  });
+
+  const message = useMessage();
+  const emit = defineEmits(['updateActiveModule']);
+
+  function updateActiveModule(key: string) {
+    emit('updateActiveModule', key);
+  }
+
+  function handleLogoTiktok() {
+    console.log('handleLogoTiktok...');
+    message.info('暂未开放');
+  }
+
+  function handleLoginWechat() {
+    console.log('handleLoginWechat...');
+    message.info('暂未开放');
+  }
+</script>
+
+<style scoped></style>
diff --git a/web/src/views/login/components/style.less b/web/src/views/login/components/style.less
new file mode 100644
index 0000000..99e17ca
--- /dev/null
+++ b/web/src/views/login/components/style.less
@@ -0,0 +1,66 @@
+  .view-account {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: auto;
+
+    &-container {
+      flex: 1;
+      padding: 32px 12px;
+      max-width: 384px;
+      min-width: 320px;
+      margin: 0 auto;
+    }
+
+    &-top {
+      padding: 32px 0;
+      text-align: center;
+
+      &-desc {
+        font-size: 14px;
+        color: #808695;
+      }
+    }
+
+    &-other {
+      width: 100%;
+    }
+
+    .default-color {
+      color: #515a6e;
+
+      .ant-checkbox-wrapper {
+        color: #515a6e;
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    .view-account {
+      background-image: url('@/assets/images/login.svg');
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: 100%;
+    }
+
+    .page-account-container {
+      padding: 32px 0 24px 0;
+    }
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .flex-y-center {
+    display: flex;
+    align-items: center;
+  }
+
+  .w-300px {
+    width: 300px;
+  }
+
+  .w-12px {
+    width: 12px;
+  }
diff --git a/web/src/views/login/index.vue b/web/src/views/login/index.vue
new file mode 100644
index 0000000..4aa5134
--- /dev/null
+++ b/web/src/views/login/index.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="view-account">
+    <div class="view-account-header"></div>
+    <div :style="containerCSS">
+      <n-card :bordered="false">
+        <header class="justify-between">
+          <n-space justify="center">
+            <div></div>
+            <img src="~@/assets/images/logo.png" class="account-logo" alt="" />
+            <n-gradient-text type="primary" :size="26">{{ projectName }}</n-gradient-text>
+            <div></div>
+          </n-space>
+        </header>
+        <main class="pt-24px">
+          <div class="pt-18px">
+            <transition name="fade-slide" appear>
+              <component
+                :is="activeModule.component"
+                @updateActiveModule="handleUpdateActiveModule"
+              />
+            </transition>
+          </div>
+        </main>
+      </n-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import LoginFrom from './login/index.vue';
+  import RegisterFrom from './register/index.vue';
+  import { useRouter } from 'vue-router';
+  import { useUserStore } from '@/store/modules/user';
+
+  const userStore = useUserStore();
+  const projectName = computed(() => userStore.loginConfig?.projectName);
+
+  interface LoginModule {
+    key: string;
+    label: string;
+    component: Component;
+  }
+
+  const router = useRouter();
+  const activeModule = ref<LoginModule>({
+    key: 'login',
+    label: '账号登录',
+    component: LoginFrom,
+  });
+
+  const modules: LoginModule[] = [
+    { key: 'login', label: '账号登录', component: LoginFrom },
+    // { key: 'register', label: '注册账号', component: RegisterFrom },
+    // { key: 'reset-pwd', label: '重置密码', component: ResetPwd },
+    // { key: 'bind-wechat', label: '绑定微信', component: BindWechat }
+  ];
+
+  const containerCSS = computed(() => {
+    const val = document.body.clientWidth;
+    return val <= 720
+      ? {}
+      : {
+          flex: `1`,
+          padding: `62px 12px`,
+          'max-width': `484px`,
+          'min-width': '320px',
+          margin: '0 auto',
+        };
+  });
+
+  function handleUpdateActiveModule(key: string) {
+    const findItem = modules.find((item) => item.key === key);
+    if (findItem) {
+      activeModule.value = findItem;
+    }
+  }
+
+  onMounted(() => {
+    //是否开放注册
+    if (userStore.loginConfig?.loginRegisterSwitch === 1) {
+      const findItem = modules.find((item) => item.key === 'register');
+      if (!findItem) {
+        modules.push({ key: 'register', label: '注册账号', component: RegisterFrom });
+      }
+    }
+
+    const key = router.currentRoute.value.query?.scope as string;
+    if (key) {
+      handleUpdateActiveModule(key);
+    }
+  });
+</script>
+
+<style lang="less" scoped>
+  .view-account {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: auto;
+
+    &-top {
+      padding: 32px 0;
+      text-align: center;
+
+      &-desc {
+        font-size: 14px;
+        color: #808695;
+      }
+    }
+
+    &-other {
+      width: 100%;
+    }
+
+    .default-color {
+      color: #515a6e;
+
+      .ant-checkbox-wrapper {
+        color: #515a6e;
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    .view-account {
+      background-image: url('../../assets/images/login.svg');
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: 100%;
+    }
+
+    .page-account-container {
+      padding: 32px 0 24px 0;
+    }
+  }
+
+  .card-tabs .n-tabs-nav--bar-type {
+    padding-left: 4px;
+  }
+
+  .pt-24px {
+    padding-top: 24px;
+  }
+
+  .pt-18px {
+    padding-top: 18px;
+  }
+
+  .text-18px {
+    font-size: 18px;
+  }
+
+  .ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .duration-300 {
+    transition-duration: 0.3s;
+  }
+
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+      fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 0.15s;
+  }
+
+  .account-logo {
+    width: 42px;
+    height: 42px;
+  }
+</style>
diff --git a/web/src/views/login/login/demo-account.vue b/web/src/views/login/login/demo-account.vue
new file mode 100644
index 0000000..5dda468
--- /dev/null
+++ b/web/src/views/login/login/demo-account.vue
@@ -0,0 +1,37 @@
+<template>
+  <template v-if="accounts && accounts.length > 0">
+    <n-space :vertical="true">
+      <n-divider>演示角色登录</n-divider>
+      <n-space justify="center">
+        <n-button
+          v-for="item in accounts"
+          :key="item.username"
+          type="primary"
+          @click="login(item.username, item.password)"
+        >
+          {{ item.name }}
+        </n-button>
+      </n-space>
+      <n-space justify="center" class="mt-2">
+        <n-text depth="3">SaaS系统多租户多应用设计</n-text>
+      </n-space>
+    </n-space>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { getDemoAccounts } from "@/debug/account";
+interface Emits {
+  (e: "login", param: { username: string; password: string }): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const accounts = getDemoAccounts();
+
+function login(username: string, password: string) {
+  emit("login", { username, password });
+}
+</script>
+
+<style scoped></style>
diff --git a/web/src/views/login/login/form.vue b/web/src/views/login/login/form.vue
new file mode 100644
index 0000000..81ea181
--- /dev/null
+++ b/web/src/views/login/login/form.vue
@@ -0,0 +1,316 @@
+<template>
+  <n-form
+    ref="formRef"
+    label-placement="left"
+    size="large"
+    :model="mode === 'account' ? formInline : formMobile"
+    :rules="mode === 'account' ? rules : mobileRules"
+  >
+    <template v-if="mode === 'account'">
+      <n-form-item path="username">
+        <n-input
+          @keyup.enter="debounceHandleSubmit"
+          v-model:value="formInline.username"
+          placeholder="请输入用户名"
+        >
+          <template #prefix>
+            <n-icon size="18" color="#808695">
+              <PersonOutline />
+            </n-icon>
+          </template>
+        </n-input>
+      </n-form-item>
+      <n-form-item path="pass">
+        <n-input
+          @keyup.enter="debounceHandleSubmit"
+          v-model:value="formInline.pass"
+          type="password"
+          show-password-on="click"
+          placeholder="请输入密码"
+        >
+          <template #prefix>
+            <n-icon size="18" color="#808695">
+              <LockClosedOutline />
+            </n-icon>
+          </template>
+        </n-input>
+      </n-form-item>
+
+      <n-form-item path="code" v-show="codeBase64 !== ''">
+        <n-input-group>
+          <n-input
+            :style="{ width: '100%' }"
+            placeholder="验证码"
+            @keyup.enter="debounceHandleSubmit"
+            v-model:value="formInline.code"
+          >
+            <template #prefix>
+              <n-icon size="18" color="#808695" :component="SafetyCertificateOutlined" />
+            </template>
+            <template #suffix> </template>
+          </n-input>
+
+          <n-loading-bar-provider :to="loadingBarTargetRef" container-style="position: absolute;">
+            <img
+              ref="loadingBarTargetRef"
+              style="width: 100px"
+              :src="codeBase64"
+              @click="refreshCode"
+              loading="lazy"
+              alt="点击获取"
+            />
+            <loading-bar-trigger />
+          </n-loading-bar-provider>
+        </n-input-group>
+      </n-form-item>
+    </template>
+
+    <template v-if="mode === 'mobile'">
+      <n-form-item path="mobile">
+        <n-input
+          @keyup.enter="handleMobileSubmit"
+          v-model:value="formMobile.mobile"
+          placeholder="请输入手机号码"
+        >
+          <template #prefix>
+            <n-icon size="18" color="#808695">
+              <MobileOutlined />
+            </n-icon>
+          </template>
+        </n-input>
+      </n-form-item>
+
+      <n-form-item path="code">
+        <n-input-group>
+          <n-input
+            @keyup.enter="handleMobileSubmit"
+            v-model:value="formMobile.code"
+            placeholder="请输入验证码"
+          >
+            <template #prefix>
+              <n-icon size="18" color="#808695" :component="SafetyCertificateOutlined" />
+            </template>
+          </n-input>
+          <n-button
+            type="primary"
+            ghost
+            @click="sendMobileCode"
+            :disabled="isCounting"
+            :loading="sendLoading"
+          >
+            {{ sendLabel }}
+          </n-button>
+        </n-input-group>
+      </n-form-item>
+    </template>
+
+    <n-space :vertical="true" :size="24">
+      <div class="flex-y-center justify-between">
+        <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
+        <n-button :text="true" @click="handleResetPassword">忘记密码？</n-button>
+      </div>
+      <n-button type="primary" size="large" :block="true" :loading="loading" @click="handleLogin">
+        登录
+      </n-button>
+
+      <FormOther moduleKey="register" tag="注册账号" @updateActiveModule="updateActiveModule" />
+    </n-space>
+
+    <DemoAccount @login="handleDemoAccountLogin" />
+  </n-form>
+</template>
+
+<script lang="ts" setup>
+  import '../components/style.less';
+  import { ref, onMounted } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useUserStore } from '@/store/modules/user';
+  import { useMessage, useLoadingBar } from 'naive-ui';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
+  import { PageEnum } from '@/enums/pageEnum';
+  import { SafetyCertificateOutlined, MobileOutlined } from '@vicons/antd';
+  import { GetCaptcha } from '@/api/base';
+  import { aesEcb } from '@/utils/encrypt';
+  import DemoAccount from './demo-account.vue';
+  import FormOther from '../components/form-other.vue';
+  import { useSendCode } from '@/hooks/common';
+  import { SendSms } from '@/api/system/user';
+  import { validate } from '@/utils/validateUtil';
+  import { useDebounceFn } from '@vueuse/core';
+
+  interface Props {
+    mode: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    mode: 'account',
+  });
+
+  interface FormState {
+    username: string;
+    pass: string;
+    cid: string;
+    code: string;
+    password: string;
+  }
+
+  interface FormMobileState {
+    mobile: string;
+    code: string;
+  }
+
+  const formRef = ref();
+  const message = useMessage();
+  const loading = ref(false);
+  const autoLogin = ref(true);
+  const codeBase64 = ref('');
+  const loadingBar = useLoadingBar();
+  const loadingBarTargetRef = ref<undefined | HTMLElement>(undefined);
+  const userStore = useUserStore();
+  const router = useRouter();
+  const route = useRoute();
+  const { sendLabel, isCounting, loading: sendLoading, activateSend } = useSendCode();
+  const emit = defineEmits(['updateActiveModule']);
+  const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
+  const debounceHandleSubmit = useDebounceFn((e) => {
+    handleSubmit(e);
+  }, 500);
+  const formInline = ref<FormState>({
+    username: '',
+    pass: '',
+    cid: '',
+    code: '',
+    password: '',
+  });
+
+  const formMobile = ref<FormMobileState>({
+    mobile: '',
+    code: '',
+  });
+
+  const rules = {
+    username: { required: true, message: '请输入用户名', trigger: 'blur' },
+    pass: { required: true, message: '请输入密码', trigger: 'blur' },
+  };
+
+  const mobileRules = {
+    mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
+    code: { required: true, message: '请输入验证码', trigger: 'blur' },
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    formRef.value.validate(async (errors) => {
+      if (!errors) {
+        if (userStore.loginConfig?.loginCaptchaSwitch === 1 && formInline.value.code === '') {
+          message.error('请输入验证码');
+          return;
+        }
+
+        const params = {
+          username: formInline.value.username,
+          password: aesEcb.encrypt(formInline.value.pass),
+          cid: formInline.value.cid,
+          code: formInline.value.code,
+        };
+        await handleLoginResp(userStore.login(params));
+      } else {
+        message.error('请填写完整信息，并且进行验证码校验');
+      }
+    });
+  };
+
+  async function refreshCode() {
+    if (userStore.loginConfig?.loginCaptchaSwitch !== 1) {
+      return;
+    }
+    loadingBar.start();
+    const data = await GetCaptcha();
+    codeBase64.value = data.base64;
+    formInline.value.cid = data.cid;
+    formInline.value.code = '';
+    loadingBar.finish();
+  }
+
+  async function handleDemoAccountLogin(user: { username: string; password: string }) {
+    const params = {
+      username: user.username,
+      password: aesEcb.encrypt(user.password),
+      isLock: true,
+    };
+    await handleLoginResp(userStore.login(params));
+  }
+
+  const handleMobileSubmit = (e) => {
+    e.preventDefault();
+    formRef.value.validate(async (errors) => {
+      if (!errors) {
+        const params = {
+          mobile: formMobile.value.mobile,
+          code: formMobile.value.code,
+        };
+        await handleLoginResp(userStore.mobileLogin(params));
+      } else {
+        message.error('请填写完整信息，并且进行验证码校验');
+      }
+    });
+  };
+
+  function updateActiveModule(key: string) {
+    emit('updateActiveModule', key);
+  }
+
+  function sendMobileCode() {
+    validate.phone(mobileRules.mobile, formMobile.value.mobile, function (error?: Error) {
+      if (error === undefined) {
+        activateSend(SendSms({ mobile: formMobile.value.mobile, event: 'login' }));
+        return;
+      }
+      message.error(error.message);
+    });
+  }
+
+  function handleResetPassword() {
+    message.info('如果你忘记了密码，请联系管理员找回');
+  }
+
+  function handleLogin(e) {
+    if (props.mode === 'account') {
+      debounceHandleSubmit(e);
+      return;
+    }
+
+    handleMobileSubmit(e);
+  }
+
+  async function handleLoginResp(request: Promise<any>) {
+    message.loading('登录中...');
+    loading.value = true;
+    try {
+      const { code, message: msg } = await request;
+      message.destroyAll();
+      if (code == ResultEnum.SUCCESS) {
+        const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
+        message.success('登录成功，即将进入系统');
+        if (route.name === LOGIN_NAME) {
+          await router.replace('/');
+        } else {
+          await router.replace(toPath);
+        }
+      } else {
+        message.destroyAll();
+        message.info(msg || '登录失败');
+        await refreshCode();
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    setTimeout(function () {
+      refreshCode();
+    });
+  });
+</script>