版本预发布

web/.env

@@ -1,11 +1,11 @@
 # port
-VITE_PORT = 8001
+VITE_PORT=8001
 
 # spa-title
-VITE_GLOB_APP_TITLE = HG后台管理系统
+VITE_GLOB_APP_TITLE=HG后台管理系统
 
 # spa shortname
-VITE_GLOB_APP_SHORT_NAME = HG
+VITE_GLOB_APP_SHORT_NAME=HG
 
 # 生产环境 开启mock
-VITE_GLOB_PROD_MOCK = false
+VITE_GLOB_PROD_MOCK=false

web/.env.development

@@ -1,23 +1,23 @@
 # 只在开发模式中被载入
 
 # 网站根目录
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH=/
 
 # 是否开启mock
-VITE_USE_MOCK = false
+VITE_USE_MOCK=false
 
 # 网站前缀
-VITE_BASE_URL = /
+VITE_BASE_URL=/
 
 # 是否删除console
-VITE_DROP_CONSOLE = true
+VITE_DROP_CONSOLE=true
 
 # 跨域代理，可以配置多个，请注意不要换行，如果是公网运行，请改成公网IP:服务端运行端口
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
 VITE_PROXY=[["/admin","http://localhost:8000/admin"]]
 
 # API 接口地址
-VITE_GLOB_API_URL =
+VITE_GLOB_API_URL=
 
 # 图片上传地址
 VITE_GLOB_UPLOAD_URL=
@@ -26,4 +26,4 @@ VITE_GLOB_UPLOAD_URL=
 VITE_GLOB_IMG_URL=
 
 # 接口前缀
-VITE_GLOB_API_URL_PREFIX = /admin
+VITE_GLOB_API_URL_PREFIX=/admin

web/.env.production

@@ -1,19 +1,19 @@
 # 只在生产模式中被载入
 
 # 网站根目录
-VITE_PUBLIC_PATH = /admin
+VITE_PUBLIC_PATH=/admin
 
 # 是否开启mock
-VITE_USE_MOCK = false
+VITE_USE_MOCK=false
 
 # 网站前缀
-VITE_BASE_URL = /
+VITE_BASE_URL=/
 
 # 是否删除console
-VITE_DROP_CONSOLE = true
+VITE_DROP_CONSOLE=true
 
 # API
-VITE_GLOB_API_URL =
+VITE_GLOB_API_URL=
 
 # 图片上传地址
 VITE_GLOB_UPLOAD_URL=
@@ -22,12 +22,12 @@ VITE_GLOB_UPLOAD_URL=
 VITE_GLOB_IMG_URL=
 
 # 接口前缀
-VITE_GLOB_API_URL_PREFIX = /admin
+VITE_GLOB_API_URL_PREFIX=/admin
 
 # 是否启用gzip压缩或brotli压缩
 # 可选: gzip | brotli | none
 # 如果你需要多种形式，你可以用','来分隔
-VITE_BUILD_COMPRESS = 'none'
+VITE_BUILD_COMPRESS='none'
 
 # 使用压缩时是否删除原始文件，默认为false
-VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE=false

web/.eslintrc.js

@@ -73,5 +73,12 @@ module.exports = defineConfig({
         math: 'always',
       },
     ],
+    '@typescript-eslint/no-this-alias': [
+      'error',
+      {
+        allowDestructuring: false, // Disallow `const { props, state } = this`; true by default
+        allowedNames: ['that'], // Allow `const self = this`; `[]` by default
+      },
+    ],
   },
 });

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hotgo",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "author": {
     "name": "MengShuai",
     "email": "133814250@qq.com",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@vicons/antd": "^0.10.0",
     "@vicons/ionicons5": "^0.10.0",
-    "@vueup/vue-quill": "^1.0.0-beta.8",
+    "@vueup/vue-quill": "^1.1.0",
     "@vueuse/core": "^5.3.0",
     "axios": "^0.21.4",
     "blueimp-md5": "^2.19.0",
@@ -46,6 +46,9 @@
     "node-sass": "^7.0.3",
     "pinia": "^2.0.14",
     "qs": "^6.10.3",
+    "quill-image-uploader": "^1.2.4",
+    "quill-magic-url": "^4.2.0",
+    "throttle-debounce": "^5.0.0",
     "vfonts": "^0.1.0",
     "vue": "^3.2.33",
     "vue-router": "^4.0.15",

web/src/api/apply/notice.ts

@@ -39,3 +39,66 @@ export function View(params) {
     params,
   });
 }
+
+// 获取最大排序
+export function MaxSort() {
+  return http.request({
+    url: '/notice/maxSort',
+    method: 'GET',
+  });
+}
+
+export function EditNotify(params) {
+  return http.request({
+    url: '/notice/editNotify',
+    method: 'POST',
+    params,
+  });
+}
+
+export function EditNotice(params) {
+  return http.request({
+    url: '/notice/editNotice',
+    method: 'POST',
+    params,
+  });
+}
+
+export function EditLetter(params) {
+  return http.request({
+    url: '/notice/editLetter',
+    method: 'POST',
+    params,
+  });
+}
+
+export function ReadAll(params) {
+  return http.request({
+    url: '/notice/readAll',
+    method: 'POST',
+    params,
+  });
+}
+
+export function PullMessages() {
+  return http.request({
+    url: '/notice/pullMessages',
+    method: 'get',
+  });
+}
+
+export function UpRead(params) {
+  return http.request({
+    url: '/notice/upRead',
+    method: 'POST',
+    params,
+  });
+}
+
+export function MessageList(params) {
+  return http.request({
+    url: '/notice/messageList',
+    method: 'get',
+    params,
+  });
+}

web/src/api/apply/provinces.ts

@@ -79,3 +79,25 @@ export function CheckProvincesUniqueId(params) {
     params,
   });
 }
+
+/**
+ * 省市区选项
+ */
+export function ProvincesSelect(params) {
+  return http.request({
+    url: '/provinces/select',
+    method: 'GET',
+    params,
+  });
+}
+
+/**
+ * 获取指定城市标签
+ */
+export function GetCityLabel(params) {
+  return http.request({
+    url: '/provinces/cityLabel',
+    method: 'GET',
+    params,
+  });
+}

web/src/api/base/index.ts

@@ -7,3 +7,12 @@ export function GetCaptcha() {
     method: 'get',
   });
 }
+
+// 上传图片
+export function UploadImage(params) {
+  return http.request({
+    url: '/upload/image',
+    method: 'post',
+    params,
+  });
+}

web/src/api/curdDemo/index.ts

@@ -18,6 +18,7 @@ export function Delete(params) {
   });
 }
 
+
 // 添加/编辑生成演示
 export function Edit(params) {
   return http.request({
@@ -27,6 +28,7 @@ export function Edit(params) {
   });
 }
 
+
 // 修改生成演示状态
 export function Status(params) {
   return http.request({
@@ -36,6 +38,7 @@ export function Status(params) {
   });
 }
 
+
 // 操作生成演示开关
 export function Switch(params) {
   return http.request({
@@ -45,6 +48,7 @@ export function Switch(params) {
   });
 }
 
+
 // 获取生成演示指定详情
 export function View(params) {
   return http.request({
@@ -54,6 +58,7 @@ export function View(params) {
   });
 }
 
+
 // 获取生成演示最大排序
 export function MaxSort() {
   return http.request({
@@ -62,7 +67,8 @@ export function MaxSort() {
   });
 }
 
+
 // 导出生成演示
 export function Export(params) {
   jumpExport('/curdDemo/export', params);
-}
+}

web/src/api/org/user.ts

@@ -39,3 +39,11 @@ export function ResetPwd(params) {
     params,
   });
 }
+
+// 获取可选的后台用户选项
+export function GetMemberOption() {
+  return http.request({
+    url: '/member/option',
+    method: 'GET',
+  });
+}

web/src/api/system/user.ts

@@ -30,6 +30,60 @@ export function getUserInfo() {
   });
 }
 
+export function updateMemberProfile(params) {
+  return http.request({
+    url: '/member/updateProfile',
+    method: 'post',
+    params,
+  });
+}
+
+export function updateMemberPwd(params) {
+  return http.request({
+    url: '/member/updatePwd',
+    method: 'post',
+    params,
+  });
+}
+
+export function updateMemberMobile(params) {
+  return http.request({
+    url: '/member/updateMobile',
+    method: 'post',
+    params,
+  });
+}
+
+export function updateMemberEmail(params) {
+  return http.request({
+    url: '/member/updateEmail',
+    method: 'post',
+    params,
+  });
+}
+
+export function SendBindEmail() {
+  return http.request({
+    url: '/ems/sendBind',
+    method: 'post',
+  });
+}
+
+export function SendBindSms() {
+  return http.request({
+    url: '/sms/sendBind',
+    method: 'post',
+  });
+}
+
+export function updateMemberCash(params) {
+  return http.request({
+    url: '/member/updateCash',
+    method: 'post',
+    params,
+  });
+}
+
 /**
  * @description: 用户登录
  */

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 === 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>

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',
+  },
+};

web/src/components/Editor/editor.vue

@@ -1,11 +1,15 @@
 <template>
   <QuillEditor
     ref="quillEditor"
-    :options="options"
+    toolbar="full"
     v-model:content="content"
     @ready="readyQuill"
     class="quillEditor"
-    :id="quillEditorId"
+    :id="id"
+    :modules="modules"
+    @focus="onEditorFocus"
+    @blur="onEditorBlur"
+    @update:content="onUpdateContent"
   />
 </template>
 
@@ -13,40 +17,27 @@
   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 quillEditorId = ref('quillEditorId-' + getRandomString(16, true));
+  const message = useMessage();
+  const initFinish = ref(false);
   const quillEditor = ref();
   const content = ref();
-  const props = withDefaults(defineProps<Props>(), { value: '' });
-  const options = ref({
-    modules: {
-      toolbar: [
-        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
-        ['blockquote', 'code-block'],
-
-        [{ header: 1 }, { header: 2 }], // custom button values
-        [{ list: 'ordered' }, { list: 'bullet' }],
-        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
-        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
-        [{ direction: 'rtl' }], // text direction
-
-        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
-        [{ header: [1, 2, 3, 4, 5, 6, false] }],
-
-        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
-        [{ font: [] }],
-        [{ align: [] }],
-        ['clean'],
-        ['image'],
-      ],
-    },
-    theme: 'snow',
-    placeholder: '输入您要编辑的内容！',
+  const props = withDefaults(defineProps<Props>(), {
+    value: '',
+    id: 'quillEditorId-' + getRandomString(16, true),
   });
 
   function readyQuill() {
@@ -54,20 +45,41 @@
   }
 
   watch(
-    () => content.value,
-    (_newValue, _oldValue) => {
-      if (quillEditor.value !== undefined) {
-        emit('update:value', quillEditor.value.getHTML());
+    () => props.value,
+    (newValue) => {
+      if (!initFinish.value) {
+        quillEditor.value?.setHTML(newValue);
       }
     },
     {
-      immediate: true, // 深度监听
+      immediate: true,
+      deep: true,
     }
   );
 
+  function onEditorFocus(val) {
+    initFinish.value = true;
+    console.log(val);
+  }
+
+  function onEditorBlur(val) {
+    console.log(val);
+  }
+
+  function onUpdateContent() {
+    emit('update:value', quillEditor.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(quillEditorId.value);
+    let dom = document.getElementById(props.id);
     if (dom && dom.parentNode) {
       const parent = dom.parentNode as Element;
       if ('n-form-item-blank' === parent.className) {
@@ -75,10 +87,64 @@
       }
     }
   });
+
+  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">
-  .ql-container {
+<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>

web/src/components/Form/src/BasicForm.vue

@@ -60,7 +60,7 @@
             v-bind="getComponentProps(schema)"
             :is="schema.component"
             v-model:value="formModel[schema.field]"
-            :class="{ isFull: schema.isFull != false && getProps.isFull }"
+            :class="{ isFull: schema.isFull !== false && getProps.isFull }"
           />
           <!--组件后面的内容-->
           <template v-if="schema.suffix">
@@ -75,8 +75,8 @@
       </n-gi>
       <!--提交 重置 展开 收起 按钮-->
       <n-gi
-        :span="isInline ? '' : 24"
-        :suffix="isInline ? true : false"
+        :span="isInline ? 1 : 24"
+        :suffix="!!isInline"
         #="{ overflow }"
         v-if="getProps.showActionButtonGroup"
       >
@@ -134,7 +134,7 @@
   import type { GridProps } from 'naive-ui/lib/grid';
   import type { FormSchema, FormProps, FormActionType } from './types/form';
 
-  import { isArray } from '@/utils/is/index';
+  import { isArray } from '@/utils/is';
   import { deepMerge } from '@/utils';
 
   export default defineComponent({

web/src/components/Table/src/components/TableAction.vue

@@ -2,7 +2,7 @@
   <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-2">
+        <n-button v-bind="action" class="mx-1">
           {{ action.label }}
           <template #icon v-if="action.hasOwnProperty('icon')">
             <n-icon :component="action.icon" />
@@ -16,16 +16,14 @@
         @select="select"
       >
         <slot name="more"></slot>
-        <n-button v-bind="getMoreProps" class="mx-2" v-if="!$slots.more" icon-placement="right">
+        <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>-->
+          <!--          <template #icon> </template>-->
         </n-button>
       </n-dropdown>
     </div>
@@ -33,7 +31,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, PropType, computed, toRaw } from 'vue';
+  import { computed, defineComponent, PropType, toRaw } from 'vue';
   import { ActionItem } from '@/components/Table';
   import { usePermission } from '@/hooks/web/usePermission';
   import { isBoolean, isFunction } from '@/utils/is';
@@ -87,7 +85,7 @@
             return {
               size: 'small',
               text: actionText,
-              type: actionType,
+              type: getBtnType(action), //actionType,
               ...action,
               ...popConfirm,
               onConfirm: popConfirm?.confirm,
@@ -110,6 +108,28 @@
         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) => {
@@ -121,7 +141,7 @@
             return {
               size: 'small',
               text: actionText,
-              type: actionType,
+              type: getBtnType(action), //actionType,
               ...action,
               ...(popConfirm || {}),
               onConfirm: popConfirm?.confirm,

web/src/components/Table/src/components/settings/ColumnSetting.vue

@@ -215,7 +215,6 @@
       }
       //勾选列
       function onSelection(e) {
-        console.log('onSelection:' + JSON.stringify(e));
         let checkList = table.getCacheColumns();
         if (e) {
           checkList.unshift({ type: 'selection', key: 'selection' });

web/src/components/Table/src/hooks/useDataSource.ts

@@ -1,7 +1,7 @@
 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, isArray } from '@/utils/is';
+import { isBoolean, isFunction } from '@/utils/is';
 import { APISETTING } from '../const';
 
 export function useDataSource(
@@ -31,8 +31,8 @@ export function useDataSource(
     return rowKey
       ? rowKey
       : () => {
-        return 'key';
-      };
+          return 'key';
+        };
   });
 
   const getDataSourceRef = computed(() => {

web/src/components/Upload/src/BasicUpload.vue

@@ -1,82 +1,84 @@
 <template>
-  <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 />
+  <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>
-              </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>
 
-        <!--上传图片-->
-        <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="upload-card-item upload-card-item-select-picture"
+            :style="getCSSProperties"
+            v-if="imgList.length < maxNumber"
           >
-            <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>
+            <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>
 
-    <!--上传图片-->
-    <n-space>
-      <n-alert title="提示" type="info" v-if="helpText" class="flex w-full">
-        {{ helpText }}
-      </n-alert>
-    </n-space>
+    <!--预览图片-->
+    <n-modal
+      v-model:show="showModal"
+      preset="card"
+      title="预览"
+      :bordered="false"
+      :style="{ width: '520px' }"
+    >
+      <img :src="previewUrl" />
+    </n-modal>
   </div>
-
-  <!--预览图片-->
-  <n-modal
-    v-model:show="showModal"
-    preset="card"
-    title="预览"
-    :bordered="false"
-    :style="{ width: '520px' }"
-  >
-    <img :src="previewUrl" />
-  </n-modal>
 </template>
 
 <script lang="ts">
@@ -87,7 +89,7 @@
   import { ResultEnum } from '@/enums/httpEnum';
   import componentSetting from '@/settings/componentSetting';
   import { useGlobSetting } from '@/hooks/setting';
-  import { isJsonString, isNullOrUnDef } from '@/utils/is';
+  import { isArray, isJsonString, isNullOrUnDef } from '@/utils/is';
   import { getFileExt } from '@/utils/urlUtils';
   import { errorImg } from '@/utils/hotgo';
   const globSetting = useGlobSetting();
@@ -131,6 +133,10 @@
         () => {
           loadValue(props.value);
           return;
+        },
+        {
+          immediate: true,
+          deep: true,
         }
       );
 
@@ -139,12 +145,16 @@
         () => {
           loadValue(props.values);
           return;
+        },
+        {
+          immediate: true,
+          deep: true,
         }
       );
 
       // 加载默认
       function loadValue(value: any) {
-        if (value === null) {
+        if (value === undefined || value === null) {
           return;
         }
 
@@ -163,6 +173,10 @@
           data = value;
         }
 
+        if (!isArray(data) || data.length === 0) {
+          return;
+        }
+
         state.imgList = data.map((item) => {
           return getImgUrl(item);
         });

web/src/components/Upload/src/props.ts

@@ -9,7 +9,7 @@ export const basicProps = {
   },
   accept: {
     type: String,
-    default: '.jpg,.png,.jpeg,.svg,.gif',
+    default: '.jpg,.png,.jpeg,.svg,.gif,.webp',
   },
   helpText: {
     type: String as PropType<string>,

web/src/components/Upload/uploadFile.vue

@@ -1,21 +1,25 @@
 <template>
-  <BasicUpload
-    :action="`${uploadUrl}${urlPrefix}/upload/file`"
-    :headers="uploadHeaders"
-    :data="{ type: 0 }"
-    name="file"
-    :width="100"
-    :height="100"
-    fileType="file"
-    :maxNumber="maxNumber"
-    @uploadChange="uploadChange"
-    v-model:value="image"
-    v-model:values="images"
-  />
+  <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 } from 'vue';
+  import { ref, onMounted, unref, reactive, watch } from 'vue';
   import { BasicUpload } from '@/components/Upload';
   import { useGlobSetting } from '@/hooks/setting';
   import { useUserStoreWidthOut } from '@/store/modules/user';
@@ -23,6 +27,7 @@
   export interface Props {
     value: string | string[] | null;
     maxNumber: number;
+    helpText?: string;
   }
 
   const globSetting = useGlobSetting();
@@ -33,7 +38,7 @@
     Authorization: useUserStore.token,
   });
   const emit = defineEmits(['update:value']);
-  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1 });
+  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
   const image = ref<string>('');
   const images = ref<string[] | object>([]);
 
@@ -47,12 +52,27 @@
     }
   }
 
-  onMounted(async () => {
+  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>
 

web/src/components/Upload/uploadImage.vue

@@ -7,6 +7,7 @@
     :width="100"
     :height="100"
     :maxNumber="maxNumber"
+    :helpText="helpText"
     @uploadChange="uploadChange"
     v-model:value="image"
     v-model:values="images"
@@ -14,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, unref, reactive } from 'vue';
+  import { onMounted, reactive, ref, unref, watch } from 'vue';
   import { BasicUpload } from '@/components/Upload';
   import { useGlobSetting } from '@/hooks/setting';
   import { useUserStoreWidthOut } from '@/store/modules/user';
@@ -22,6 +23,7 @@
   export interface Props {
     value: string | string[] | null;
     maxNumber: number;
+    helpText?: string;
   }
 
   const globSetting = useGlobSetting();
@@ -32,7 +34,7 @@
     Authorization: useUserStore.token,
   });
   const emit = defineEmits(['update:value']);
-  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1 });
+  const props = withDefaults(defineProps<Props>(), { value: '', maxNumber: 1, helpText: '' });
   const image = ref<string>('');
   const images = ref<string[]>([]);
 
@@ -46,12 +48,28 @@
     }
   }
 
-  onMounted(async () => {
+  //赋值默认图片显示
+  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>
 

web/src/enums/apiEnum.ts

@@ -6,8 +6,8 @@ export enum ApiEnum {
   SiteLogin = '/site/login', // 登录
   SiteConfig = '/site/config', // 配置信息
 
-  // 会员
-  MemberInfo = '/member/info', // 登录会员信息
+  // 用户
+  MemberInfo = '/member/info', // 登录用户信息
 
   // 角色
   RoleDynamic = '/role/dynamic', // 动态路由

web/src/enums/optionsiEnum.ts

@@ -37,7 +37,7 @@ export const statusOptions = [
   },
   {
     value: 2,
-    label: '已禁用',
+    label: '停用',
   },
 ].map((s) => {
   return s;

web/src/enums/systemMessageEnum.ts

@@ -0,0 +1,238 @@
+import { NAvatar, NTag, NText, SelectRenderLabel, SelectRenderTag } from 'naive-ui';
+import { Component, h } from 'vue';
+import { getOptionLabel, getOptionTag, Option } from '@/utils/hotgo';
+import { BellOutlined, NotificationOutlined, SendOutlined } from '@vicons/antd';
+
+export const noticeTypeOptions: Option[] = [
+  {
+    key: 1,
+    value: 1,
+    label: '通知',
+    listClass: 'warning',
+  },
+  {
+    key: 2,
+    value: 2,
+    label: '公告',
+    listClass: 'error',
+  },
+  {
+    key: 3,
+    value: 3,
+    label: '私信',
+    listClass: 'info',
+  },
+];
+
+export const noticeTagOptions: Option[] = [
+  {
+    value: 0,
+    label: '无标签',
+    key: 0,
+    listClass: 'default',
+  },
+  {
+    value: 1,
+    label: '一般',
+    key: 1,
+    listClass: 'info',
+  },
+  {
+    value: 2,
+    label: '紧急',
+    key: 2,
+    listClass: 'error',
+  },
+  {
+    value: 3,
+    label: '重要',
+    key: 3,
+    listClass: 'warning',
+  },
+  {
+    value: 4,
+    label: '提醒',
+    key: 4,
+    listClass: 'success',
+  },
+  {
+    value: 5,
+    label: '次要',
+    key: 5,
+    listClass: 'default',
+  },
+];
+
+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;
+  }
+
+  row.tagTitle = getOptionLabel(noticeTagOptions, row.tag);
+  row.tagProps = { type: getOptionTag(noticeTagOptions, row.tag) };
+  return row;
+}

web/src/hooks/common/index.ts

@@ -0,0 +1,7 @@
+import useContext from './useContext';
+import useBoolean from './useBoolean';
+import useLoading from './useLoading';
+import useLoadingEmpty from './useLoadingEmpty';
+import useSendCode from './useSendCode';
+
+export { useContext, useBoolean, useLoading, useLoadingEmpty, useSendCode };

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

web/src/hooks/web/usePermission.ts

@@ -9,8 +9,8 @@ export function usePermission() {
    */
   function _somePermissions(accesses: string[]) {
     return userStore.getPermissions.some((item) => {
-      const { value }: any = item;
-      return accesses.includes(value);
+      // @ts-ignore
+      return accesses.includes(item);
     });
   }
 
@@ -30,7 +30,7 @@ export function usePermission() {
   function hasEveryPermission(accesses: string[]): boolean {
     const permissionsList = userStore.getPermissions;
     if (Array.isArray(accesses)) {
-      return permissionsList.every((access: any) => accesses.includes(access.value));
+      return permissionsList.every((access: any) => accesses.includes(access));
     }
     throw new Error(`[hasEveryPermission]: ${accesses} should be a array !`);
   }
@@ -43,7 +43,7 @@ export function usePermission() {
   function hasSomePermission(accesses: string[]): boolean {
     const permissionsList = userStore.getPermissions;
     if (Array.isArray(accesses)) {
-      return permissionsList.some((access: any) => accesses.includes(access.value));
+      return permissionsList.some((access: any) => accesses.includes(access));
     }
     throw new Error(`[hasSomePermission]: ${accesses} should be a array !`);
   }

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>

web/src/layout/components/Header/PopoverMessage.vue

@@ -1,65 +0,0 @@
-<template>
-  <n-card
-    :content-style="{ padding: '0px' }"
-    :footer-style="{ padding: '0px' }"
-    :bordered="false"
-    :segmented="true"
-  >
-    <div v-if="notificationStore.messages.length > 0">
-      <div
-        class="flex items-center max-w-sm p-1 mx-auto space-x-2 rounded-xl"
-        v-for="(item, index) of notificationStore.messages"
-        :key="index"
-      >
-        <div class="flex-shrink-0">
-          <n-icon size="40" color="#f00">
-            <NotificationsCircle />
-          </n-icon>
-        </div>
-        <div>
-          <div class="text-sm font-medium">{{ item.title }}</div>
-          <n-ellipsis :line-clamp="1" class="text-gray-500">{{ item.content }}</n-ellipsis>
-        </div>
-      </div>
-    </div>
-    <n-empty v-else description="暂无消息哦~" class="pt-20 pb-20" />
-    <template #footer>
-      <div class="flex justify-evenly">
-        <n-button type="text" @click="onClearMessage">清空提醒</n-button>
-        <n-button type="text" @click="onAllMessage">查看更多</n-button>
-      </div>
-    </template>
-  </n-card>
-</template>
-
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { NotificationsCircle } from '@vicons/ionicons5';
-  import { notificationStoreWidthOut } from '@/store/modules/notification';
-  import { useRouter } from 'vue-router';
-
-  export default defineComponent({
-    name: 'PopoverMessage',
-    components: { NotificationsCircle },
-    emits: ['clear'],
-    setup(_props, { emit }) {
-      const notificationStore = notificationStoreWidthOut();
-      const router = useRouter();
-
-      function onClearMessage() {
-        notificationStore.setMessages([]);
-        emit('clear');
-      }
-
-      function onAllMessage() {
-        router.push({ name: 'apply_notice' });
-      }
-
-      return {
-        onClearMessage,
-        notificationStore,
-        onAllMessage,
-      };
-    },
-  });
-</script>

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>

web/src/layout/components/Header/index.vue

@@ -93,16 +93,22 @@
           placement="bottom"
           v-if="item.icon === 'BellOutlined'"
           trigger="click"
-          :width="300"
+          :width="getIsMobile ? 276 : 420"
         >
           <template #trigger>
-            <n-badge :value="notificationStore.messages.length" :max="99" processing>
-              <n-icon size="18">
-                <BellOutlined />
-              </n-icon>
-            </n-badge>
+            <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>
-          <PopoverMessage />
+
+          <SystemMessage />
         </n-popover>
 
         <div v-else>
@@ -131,12 +137,8 @@
       <div class="layout-header-trigger layout-header-trigger-min">
         <n-dropdown trigger="hover" @select="avatarSelect" :options="avatarOptions">
           <div class="avatar">
-            <n-avatar round>
-              {{ username }}
-              <template #icon>
-                <UserOutlined />
-              </template>
-            </n-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>
@@ -162,7 +164,17 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, computed, unref, watch, h } from 'vue';
+  import {
+    defineComponent,
+    reactive,
+    toRefs,
+    ref,
+    computed,
+    unref,
+    watch,
+    h,
+    onMounted,
+  } from 'vue';
   import { useRouter, useRoute } from 'vue-router';
   import components from './components';
   import {
@@ -170,8 +182,11 @@
     useDialog,
     useMessage,
     NAvatar,
+    NTag,
+    NIcon,
     useNotification,
     NotificationReactive,
+    NButton,
   } from 'naive-ui';
   import { TABS_ROUTES } from '@/store/mutation-types';
   import { useUserStore } from '@/store/modules/user';
@@ -180,13 +195,19 @@
   import { AsideMenu } from '@/layout/components/Menu';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { NotificationsOutline as NotificationsIcon } from '@vicons/ionicons5';
-  import PopoverMessage from './PopoverMessage.vue';
+  import SystemMessage from './SystemMessage.vue';
   import { notificationStoreWidthOut } from '@/store/modules/notification';
-  import notificationImg from '@/assets/images/notification.png';
+  import { getIcon } from '@/enums/systemMessageEnum';
 
   export default defineComponent({
     name: 'PageHeader',
-    components: { ...components, NDialogProvider, ProjectSetting, AsideMenu, PopoverMessage },
+    components: {
+      ...components,
+      NDialogProvider,
+      ProjectSetting,
+      AsideMenu,
+      SystemMessage,
+    },
     props: {
       collapsed: {
         type: Boolean,
@@ -201,15 +222,21 @@
       const useLockscreen = useLockscreenStore();
       const message = useMessage();
       const dialog = useDialog();
-      const { getNavMode, getNavTheme, getHeaderSetting, getMenuSetting, getCrumbsSetting } =
-        useProjectSetting();
-
-      const { username } = userStore?.info || {};
+      const {
+        getNavMode,
+        getNavTheme,
+        getHeaderSetting,
+        getMenuSetting,
+        getCrumbsSetting,
+        getIsMobile,
+      } = useProjectSetting();
 
+      // const { username, avatar } = userStore?.info || {};
       const drawerSetting = ref();
 
       const state = reactive({
-        username: username || '',
+        // username: username || '',
+        // avatar: avatar || '',
         fullscreenIcon: 'FullscreenOutlined',
         navMode: getNavMode,
         navTheme: getNavTheme,
@@ -334,7 +361,7 @@
         },
         {
           icon: 'BellOutlined',
-          tips: '系统消息',
+          tips: '我的消息',
         },
         {
           icon: 'LockOutlined',
@@ -359,7 +386,7 @@
       const avatarSelect = (key) => {
         switch (key) {
           case 1:
-            router.push({ name: 'setting_account' });
+            router.push({ name: 'home_account' });
             break;
           case 2:
             doLogout();
@@ -373,38 +400,84 @@
       }
 
       const notification = useNotification();
-
       const getMessages = computed(() => {
-        return notificationStore.messages;
+        return notificationStore.newMessage;
       });
       const nRef = ref<NotificationReactive | null>(null);
       // 监听新消息，推送通知
       watch(
         getMessages,
         (newVal, _oldVal) => {
-          if (newVal[0] !== undefined) {
-            let message = newVal[0];
-            nRef.value = notification.create({
-              title: message.title,
-              description: message.description,
-              content: message.content,
-              meta: message.meta,
-              duration: 5000,
-              avatar: () =>
-                h(NAvatar, {
-                  size: 'small',
-                  round: true,
-                  src: notificationImg,
-                }),
-              onClose: () => {
-                nRef.value = null;
-              },
-            });
+          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 }
       );
 
+      onMounted(() => {
+        if (notificationStore.getUnreadCount() === 0) {
+          notificationStore.pullMessages();
+        }
+      });
       return {
         ...toRefs(state),
         iconList,
@@ -423,8 +496,10 @@
         getMenuLocation,
         mixMenu,
         NotificationsIcon,
-        PopoverMessage,
+        SystemMessage,
         notificationStore,
+        getIsMobile,
+        userStore,
       };
     },
   });

web/src/settings/componentSetting.ts

@@ -26,7 +26,7 @@ export default {
     //最大上传图片大小
     maxSize: 10,
     //图片上传类型
-    imageType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/svg+xml'],
+    imageType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/svg+xml', 'image/webp'],
     //文件上传类型
     fileType: [
       // 图片
@@ -35,6 +35,7 @@ export default {
       'image/jpeg',
       'image/gif',
       'image/svg+xml',
+      'image/webp',
       // 文档
       'application/msword',
       'application/vnd.openxmlformats-officedocument.wordprocessingml.document',

web/src/store/modules/asyncRoute.ts

@@ -93,16 +93,23 @@ export const useAsyncRouteStore = defineStore({
         const { meta } = route;
         const { permissions } = meta || {};
         if (!permissions) return true;
-        return permissionsList.some((item) => permissions.includes(item.value));
+        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 {
@@ -110,8 +117,15 @@ export const useAsyncRouteStore = defineStore({
           accessedRouters = filter(asyncRoutes, routeFilter);
         } catch (error) {
           console.log(error);
+          $dialog.info({
+            title: '提示',
+            content: '过滤动态路由失败，请联系管理员解决！',
+            positiveText: '确定',
+            onPositiveClick: () => {},
+          });
         }
       }
+
       accessedRouters = accessedRouters.filter(routeFilter);
 
       this.setRouters(accessedRouters);

web/src/store/modules/notification.ts

@@ -1,17 +1,46 @@
 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: any[];
+  messages: MessageTab[];
+  notifyUnread: number;
+  noticeUnread: number;
+  letterUnread: number;
+  newMessage: MessageRow | null;
 }
 
 export const notificationStore = defineStore({
   id: 'notificationStore',
   state: (): INotificationStore => ({
-    messages: [],
+    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(): [any][] {
+    getMessages(): MessageTab[] {
       return this.messages;
     },
   },
@@ -19,28 +48,51 @@ export const notificationStore = defineStore({
     setMessages(messages) {
       this.messages = messages;
     },
-    addMessages(message) {
-      message = JSON.parse(message);
-      if (
-        message.event !== undefined &&
-        message.event === 'notice' &&
-        message.data !== undefined &&
-        message.data !== ''
-      ) {
-        this.messages.unshift({
-          title: message.data.title,
-          description: message.data.type == 1 ? '通知' : '公告',
-          content: message.data.content,
-          meta: message.data.updatedAt,
-        });
-      }
-      // 数据最大提醒条数，超出进行清理
-      const limit = 10;
-      if (this.messages.length > limit) {
-        const sub = this.messages.length - limit;
-        this.messages.splice(this.messages.length - sub);
+    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() {
+      return this.notifyUnread + this.noticeUnread + this.letterUnread;
+    },
   },
 });
 

web/src/store/modules/user.ts

@@ -7,13 +7,41 @@ import { getConfig, getUserInfo, login } from '@/api/system/user';
 
 const Storage = createStorage({ storage: localStorage });
 
+export interface UserInfoState {
+  id: number;
+  deptName: string;
+  roleName: string;
+  cityLabel: string;
+  permissions: string[];
+  username: string;
+  realName: string;
+  avatar: string;
+  balance: 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;
+}
+
 export interface IUserState {
   token: string;
   username: string;
-  welcome: string;
+  realName: string;
   avatar: string;
   permissions: any[];
-  info: any;
+  info: UserInfoState | null;
   config: any;
 }
 
@@ -22,11 +50,11 @@ export const useUserStore = defineStore({
   state: (): IUserState => ({
     token: Storage.get(ACCESS_TOKEN, ''),
     username: '',
-    welcome: '',
+    realName: '',
     avatar: '',
     permissions: [],
-    info: Storage.get(CURRENT_USER, {}),
-    config: Storage.get(CURRENT_CONFIG, {}),
+    info: Storage.get(CURRENT_USER, null),
+    config: Storage.get(CURRENT_CONFIG, null),
   }),
   getters: {
     getToken(): string {
@@ -35,13 +63,16 @@ export const useUserStore = defineStore({
     getAvatar(): string {
       return this.avatar;
     },
-    getNickname(): string {
+    getUsername(): string {
       return this.username;
     },
+    getRealName(): string {
+      return this.realName;
+    },
     getPermissions(): [any][] {
       return this.permissions;
     },
-    getUserInfo(): object {
+    getUserInfo(): UserInfoState | null {
       return this.info;
     },
     getConfig(): object {
@@ -55,10 +86,16 @@ export const useUserStore = defineStore({
     setAvatar(avatar: string) {
       this.avatar = avatar;
     },
-    setPermissions(permissions) {
+    setUsername(username: string) {
+      this.username = username;
+    },
+    setRealName(realName: string) {
+      this.realName = realName;
+    },
+    setPermissions(permissions: string[]) {
       this.permissions = permissions;
     },
-    setUserInfo(info) {
+    setUserInfo(info: UserInfoState | null) {
       this.info = info;
     },
     setConfig(config) {
@@ -69,7 +106,6 @@ export const useUserStore = defineStore({
       try {
         const response = await login(userInfo);
         const { data, code } = response;
-        console.log('data:' + JSON.stringify(data));
         if (code === ResultEnum.SUCCESS) {
           const ex = 7 * 24 * 60 * 60 * 1000;
           storage.set(ACCESS_TOKEN, data.token, ex);
@@ -86,8 +122,7 @@ export const useUserStore = defineStore({
 
     // 获取用户信息
     GetInfo() {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      const that = this;
+      const that: any = this;
       return new Promise((resolve, reject) => {
         getUserInfo()
           .then((res) => {
@@ -96,10 +131,12 @@ export const useUserStore = defineStore({
               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 !'));
             }
-            that.setAvatar(result.avatar);
             resolve(res);
           })
           .catch((error) => {
@@ -107,9 +144,8 @@ export const useUserStore = defineStore({
           });
       });
     },
-    // 获取用户信息
+    // 获取用户配置
     GetConfig() {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
       const that = this;
       return new Promise((resolve, reject) => {
         getConfig()
@@ -127,7 +163,7 @@ export const useUserStore = defineStore({
     // 登出
     async logout() {
       this.setPermissions([]);
-      this.setUserInfo('');
+      this.setUserInfo(null);
       storage.remove(ACCESS_TOKEN);
       storage.remove(CURRENT_USER);
       return Promise.resolve('');

web/src/utils/hotgo.ts

@@ -1,5 +1,7 @@
 import { Ref, UnwrapRef } from '@vue/reactivity';
 import onerrorImg from '@/assets/images/onerror.png';
+import { NTag, SelectRenderTag } from 'naive-ui';
+import { h } from 'vue';
 
 export interface Option {
   label: string;
@@ -42,9 +44,9 @@ export function getOptionTag(options: Option[], value) {
 }
 
 // 自适应模板宽度
-export function adaModalWidth(dialogWidth: Ref<UnwrapRef<string>>) {
+export function adaModalWidth(dialogWidth: Ref<UnwrapRef<string>>, def = 840) {
   const val = document.body.clientWidth;
-  const def = 840; // 默认宽度
+
   if (val <= def) {
     dialogWidth.value = '100%';
   } else {
@@ -58,3 +60,27 @@ export function errorImg(e: any): void {
   e.target.src = onerrorImg;
   e.target.onerror = null;
 }
+
+export const renderTag: SelectRenderTag = ({ option }) => {
+  return h(
+    NTag,
+    {
+      type: option.listClass as 'success' | 'warning' | 'error' | 'info' | 'primary' | 'default',
+    },
+    { default: () => option.label }
+  );
+};
+
+export function timeFix() {
+  const time = new Date();
+  const hour = time.getHours();
+  return hour < 9
+    ? '早上好'
+    : hour <= 11
+    ? '上午好'
+    : hour <= 13
+    ? '中午好'
+    : hour < 20
+    ? '下午好'
+    : '晚上好';
+}

web/src/utils/websocket.ts

@@ -2,6 +2,8 @@ import { SocketEnum } from '@/enums/socketEnum';
 import { notificationStoreWidthOut } from '@/store/modules/notification';
 import { useUserStoreWidthOut } from '@/store/modules/user';
 import { TABS_ROUTES } from '@/store/mutation-types';
+import { MessageRow } from '@/enums/systemMessageEnum';
+import { isJsonString } from '@/utils/is';
 
 let socket: WebSocket;
 let isActive: boolean;
@@ -133,6 +135,11 @@ export default (onMessage: Function) => {
       // console.log('WebSocket:收到一条消息', event.data);
 
       let isHeart = false;
+      if (!isJsonString(event.data)) {
+        console.log('socket message incorrect format:' + JSON.stringify(event));
+        return;
+      }
+
       const message = JSON.parse(event.data);
       if (message.event === 'ping') {
         isHeart = true;
@@ -150,7 +157,7 @@ export default (onMessage: Function) => {
 
       // 通知
       if (message.event === 'notice') {
-        notificationStore.addMessages(event.data);
+        notificationStore.triggerNewMessages(message.data);
         return;
       }
 

web/src/views/about/index.vue

@@ -14,7 +14,7 @@
       :segmented="{ content: true }"
     >
       <n-descriptions bordered label-placement="left" class="py-2">
-        <n-descriptions-item label="版本">
+        <n-descriptions-item label="HotGo版本">
           <n-tag type="info"> {{ config?.version }}</n-tag>
         </n-descriptions-item>
         <n-descriptions-item label="最后编译时间">

web/src/views/apply/attachment/columns.ts

@@ -12,6 +12,19 @@ export const options = ref<Options>({
 });
 
 export const schemas = ref<FormSchema[]>([
+  {
+    field: 'drive',
+    component: 'NSelect',
+    label: '上传驱动',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择上传驱动',
+      options: [],
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
   {
     field: 'member_id',
     component: 'NInput',
@@ -24,19 +37,6 @@ export const schemas = ref<FormSchema[]>([
     },
     rules: [{ message: '请输入用户ID', trigger: ['blur'] }],
   },
-  {
-    field: 'drive',
-    component: 'NSelect',
-    label: '选择驱动',
-    defaultValue: null,
-    componentProps: {
-      placeholder: '请选择驱动',
-      options: [],
-      onUpdateValue: (e: any) => {
-        console.log(e);
-      },
-    },
-  },
   {
     field: 'status',
     component: 'NSelect',
@@ -54,16 +54,19 @@ export const schemas = ref<FormSchema[]>([
 
 export const columns = [
   {
-    title: 'ID',
+    title: '附件ID',
     key: 'id',
+    width: 80,
   },
   {
     title: '应用',
     key: 'appId',
+    width: 100,
   },
   {
     title: '用户ID',
     key: 'memberId',
+    width: 100,
   },
   {
     title: '驱动',
@@ -71,6 +74,7 @@ export const columns = [
     render(row) {
       return row.drive;
     },
+    width: 100,
   },
   {
     title: '上传类型',
@@ -90,6 +94,7 @@ export const columns = [
         }
       );
     },
+    width: 120,
   },
   {
     title: '文件',
@@ -134,10 +139,12 @@ export const columns = [
   {
     title: '扩展名',
     key: 'ext',
+    width: 80,
   },
   {
     title: '文件大小',
     key: 'sizeFormat',
+    width: 100,
   },
   {
     title: '状态',
@@ -160,10 +167,12 @@ export const columns = [
         }
       );
     },
+    width: 100,
   },
   {
     title: '上传时间',
     key: 'createdAt',
+    width: 180,
   },
 ];
 

web/src/views/apply/attachment/index.vue

@@ -168,6 +168,7 @@
           {
             label: '下载',
             onClick: handleDown.bind(null, record),
+            type: 'default',
           },
           {
             label: '删除',

web/src/views/apply/notice/columns.ts

@@ -1,20 +1,28 @@
 import { h } from 'vue';
-import { NTag } from 'naive-ui';
+import { NAvatar, NAvatarGroup, NTag, NTooltip } from 'naive-ui';
+import { noticeTagOptions, noticeTypeOptions } from '@/enums/systemMessageEnum';
+import { getOptionLabel, getOptionTag } from '@/utils/hotgo';
 
 export const columns = [
   {
     title: 'ID',
     key: 'id',
+    width: 80,
   },
   {
-    title: '公告标题',
+    title: '消息标题',
     key: 'title',
     render(row) {
-      return row.title;
+      return h('p', { id: 'app' }, [
+        h('div', {
+          innerHTML: '<div style="white-space: pre-wrap">' + row.title + '</div>',
+        }),
+      ]);
     },
+    width: 280,
   },
   {
-    title: '公告类型',
+    title: '消息类型',
     key: 'type',
     render(row) {
       return h(
@@ -23,30 +31,19 @@ export const columns = [
           style: {
             marginRight: '6px',
           },
-          type: row.type == 1 ? 'success' : 'warning',
+          type: getOptionTag(noticeTypeOptions, row.type),
           bordered: false,
         },
         {
-          default: () => (row.type == 1 ? '通知' : '公告'),
+          default: () => getOptionLabel(noticeTypeOptions, row.type),
         }
       );
     },
+    width: 100,
   },
   {
-    title: '公告内容',
-    key: 'content',
-  },
-  {
-    title: '备注',
-    key: 'remark',
-  },
-  {
-    title: '排序',
-    key: 'sort',
-  },
-  {
-    title: '公告状态',
-    key: 'status',
+    title: '标签',
+    key: 'tag',
     render(row) {
       return h(
         NTag,
@@ -54,21 +51,81 @@ export const columns = [
           style: {
             marginRight: '6px',
           },
-          type: row.status == 1 ? 'success' : 'warning',
+          type: getOptionTag(noticeTagOptions, row.tag),
           bordered: false,
         },
         {
-          default: () => (row.status == 1 ? '正常' : '隐藏'),
+          default: () => getOptionLabel(noticeTagOptions, row.tag),
         }
       );
     },
+    width: 100,
   },
   {
-    title: '已读人数',
-    key: 'receiveNum',
+    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: '发布时间',
+    title: '阅读量',
+    key: 'readCount',
+    width: 80,
+  },
+  {
+    title: '排序',
+    key: 'sort',
+    width: 80,
+  },
+  {
+    title: '备注',
+    key: 'remark',
+    width: 150,
+  },
+  {
+    title: '发送时间',
     key: 'createdAt',
+    width: 180,
   },
 ];

web/src/views/apply/notice/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <n-card :bordered="false" class="proCard" title="公告管理">
+    <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"
@@ -25,16 +30,55 @@
         :resizeHeightOffset="-10000"
       >
         <template #tableTitle>
-          <n-button type="primary" @click="addTable">
+          <n-button
+            type="warning"
+            @click="addTable(1)"
+            class="min-left-space"
+            v-if="hasPermission(['/notice/editNotify'])"
+          >
             <template #icon>
               <n-icon>
-                <PlusOutlined />
+                <NotificationOutlined />
               </n-icon>
             </template>
-            添加
+            发通知
           </n-button>
-          &nbsp;
-          <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
+
+          <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 />
@@ -45,7 +89,24 @@
         </template>
       </BasicTable>
 
-      <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="添加">
+      <n-modal
+        v-model:show="showModal"
+        :show-icon="false"
+        :block-scroll="false"
+        :mask-closable="false"
+        preset="dialog"
+        :title="
+          formParams.id > 0
+            ? '编辑' + getOptionLabel(noticeTypeOptions, formParams.type) + ' #' + formParams.id
+            : '发送' + getOptionLabel(noticeTypeOptions, formParams.type)
+        "
+        :style="{
+          width: dialogWidth,
+        }"
+      >
+        <n-alert :show-icon="false" type="info">
+          消息发送成功后如果接收人在线会立即收到一条消息通知，编辑已发送的消息不会再次通知
+        </n-alert>
         <n-form
           :model="formParams"
           :rules="rules"
@@ -54,37 +115,53 @@
           :label-width="80"
           class="py-4"
         >
-          <n-form-item label="公告标题" path="title">
-            <n-input placeholder="请输入公告标题" v-model:value="formParams.title" />
+          <n-form-item label="消息标题" path="title">
+            <n-input placeholder="请输入消息标题" v-model:value="formParams.title" />
           </n-form-item>
 
-          <n-form-item label="公告类型" path="type">
-            <n-radio-group v-model:value="formParams.type" name="type">
-              <n-radio-button
-                v-for="type in typeOptions"
-                :key="type.value"
-                :value="type.value"
-                :label="type.label"
-              />
-            </n-radio-group>
-          </n-form-item>
-
-          <n-form-item label="公告内容" path="content">
-            <n-input type="textarea" placeholder="请输入内容" v-model:value="formParams.content" />
-          </n-form-item>
-
-          <n-form-item label="接收人" path="receiver">
-            <n-input
-              type="textarea"
-              placeholder="多个用户ID用,隔开 、不填则全部接收"
+          <n-form-item label="接收人" path="receiver" v-if="formParams.type === 3">
+            <n-select
+              multiple
+              :options="options"
+              :render-label="renderLabel"
+              :render-tag="renderMultipleSelectTag"
               v-model:value="formParams.receiver"
+              filterable
             />
           </n-form-item>
 
-          <n-form-item label="排序" path="sort">
-            <n-input-number v-model:value="formParams.sort" clearable />
+          <n-form-item label="消息内容" path="content">
+            <template v-if="formParams.type === 1">
+              <n-input
+                type="textarea"
+                placeholder="请输入通知内容"
+                v-model:value="formParams.content"
+              />
+            </template>
+            <template v-else>
+              <Editor style="height: 450px" v-model:value="formParams.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="formParams.tag"
+                  :options="noticeTagOptions"
+                />
+              </n-form-item>
+            </n-gi>
+            <n-gi>
+              <n-form-item label="排序" path="sort">
+                <n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
+              </n-form-item>
+            </n-gi>
+          </n-grid>
+
           <n-form-item label="状态" path="status">
             <n-radio-group v-model:value="formParams.status" name="status">
               <n-radio-button
@@ -97,14 +174,18 @@
           </n-form-item>
 
           <n-form-item label="备注" path="remark">
-            <n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
+            <n-input
+              type="textarea"
+              placeholder="请输入备注，没有可以不填"
+              v-model:value="formParams.remark"
+            />
           </n-form-item>
         </n-form>
 
         <template #action>
           <n-space>
             <n-button @click="() => (showModal = false)">取消</n-button>
-            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">立即发送</n-button>
           </n-space>
         </template>
       </n-modal>
@@ -113,61 +194,76 @@
 </template>
 
 <script lang="ts" setup>
-  import { h, reactive, ref } from 'vue';
+  import { h, onMounted, reactive, ref } from 'vue';
   import { useDialog, useMessage } from 'naive-ui';
   import { BasicTable, TableAction } from '@/components/Table';
   import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
-  import { Delete, Edit, List, Status } from '@/api/apply/notice';
+  import {
+    Delete,
+    EditNotify,
+    EditLetter,
+    EditNotice,
+    List,
+    MaxSort,
+    Status,
+  } from '@/api/apply/notice';
   import { columns } from './columns';
-  import { DeleteOutlined, PlusOutlined } from '@vicons/antd';
-  import { statusActions, statusOptions } from '@/enums/optionsiEnum';
-
-  const typeOptions = [
-    {
-      value: 1,
-      label: '通知',
-    },
-    {
-      value: 2,
-      label: '公告',
-    },
-  ].map((s) => {
-    return s;
-  });
-  const params = ref<any>({
-    pageSize: 10,
-    title: '',
-    content: '',
-    status: null,
-  });
+  import { BellOutlined, DeleteOutlined, NotificationOutlined, SendOutlined } from '@vicons/antd';
+  import { statusOptions } from '@/enums/optionsiEnum';
+  import {
+    noticeTagOptions,
+    noticeTypeOptions,
+    personOption,
+    renderLabel,
+    renderMultipleSelectTag,
+  } from '@/enums/systemMessageEnum';
+  import { adaModalWidth, getOptionLabel, renderTag } from '@/utils/hotgo';
+  import Editor from '@/components/Editor/editor.vue';
+  import { cloneDeep } from 'lodash-es';
+  import { GetMemberOption } from '@/api/org/user';
+  import { usePermission } from '@/hooks/web/usePermission';
+  const { hasPermission } = usePermission();
 
   const rules = {
     title: {
-      // required: true,
+      required: true,
       trigger: ['blur', 'input'],
-      message: '请输入标题',
+      message: '请输入消息标题',
     },
   };
 
   const schemas: FormSchema[] = [
     {
-      field: 'title',
-      component: 'NInput',
-      label: '公告标题',
+      field: 'type',
+      component: 'NSelect',
+      label: '消息类型',
+      defaultValue: null,
       componentProps: {
-        placeholder: '请输入公告标题',
+        placeholder: '请选择消息类型',
+        options: noticeTypeOptions,
         onUpdateValue: (e: any) => {
           console.log(e);
         },
       },
-      rules: [{ message: '请输入公告标题', trigger: ['blur'] }],
+    },
+    {
+      field: 'title',
+      component: 'NInput',
+      label: '消息标题',
+      componentProps: {
+        placeholder: '请输入消息标题',
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ message: '请输入消息标题', trigger: ['blur'] }],
     },
     {
       field: 'content',
       component: 'NInput',
-      label: '内容',
+      label: '消息内容',
       componentProps: {
-        placeholder: '请输入内容关键词',
+        placeholder: '请输入消息内容关键词',
         showButton: false,
         onUpdateValue: (e: any) => {
           console.log(e);
@@ -198,43 +294,59 @@
   const formRef = ref<any>({});
   const batchDeleteDisabled = ref(true);
   const checkedIds = ref([]);
+  const dialogWidth = ref('75%');
+  const options = ref<personOption[]>();
 
   const resetFormParams = {
     id: 0,
     title: '',
-    name: '',
     type: 1,
-    receiver: '',
+    tag: 0,
+    content: '',
+    receiver: null,
     remark: '',
     sort: 0,
     status: 1,
-    created_at: '',
-    updated_at: '',
   };
-  let formParams = ref<any>(resetFormParams);
+  let formParams = ref<any>(cloneDeep(resetFormParams));
 
   const actionColumn = reactive({
     width: 220,
     title: '操作',
     key: 'action',
-    fixed: 'right',
+    // 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'],
           },
         ],
-        dropDownActions: statusActions,
-        select: (key) => {
-          updateStatus(record.id, key);
-        },
       });
     },
   });
@@ -245,22 +357,21 @@
     schemas,
   });
 
-  function addTable() {
+  function addTable(type) {
     showModal.value = true;
-    formParams.value = resetFormParams;
+    formParams.value = cloneDeep(resetFormParams);
+    formParams.value.type = type;
+    MaxSort().then((res) => {
+      formParams.value.sort = res.sort;
+    });
   }
 
   const loadDataTable = async (res) => {
-    return await List({ ...params.value, ...res, ...searchFormRef.value?.formModel });
+    return await List({ ...res, ...searchFormRef.value?.formModel });
   };
 
   function onCheckedRow(rowKeys) {
-    if (rowKeys.length > 0) {
-      batchDeleteDisabled.value = false;
-    } else {
-      batchDeleteDisabled.value = true;
-    }
-
+    batchDeleteDisabled.value = rowKeys.length <= 0;
     checkedIds.value = rowKeys;
   }
 
@@ -273,14 +384,37 @@
     formBtnLoading.value = true;
     formRef.value.validate((errors) => {
       if (!errors) {
-        Edit(formParams.value).then((_res) => {
-          message.success('操作成功');
-          setTimeout(() => {
-            showModal.value = false;
-            reloadTable();
-            formParams.value = ref(resetFormParams);
-          });
-        });
+        switch (formParams.value.type) {
+          case 1:
+            EditNotify(formParams.value).then((_res) => {
+              message.success('操作成功');
+              setTimeout(() => {
+                showModal.value = false;
+                reloadTable();
+              });
+            });
+            break;
+          case 2:
+            EditNotice(formParams.value).then((_res) => {
+              message.success('操作成功');
+              setTimeout(() => {
+                showModal.value = false;
+                reloadTable();
+              });
+            });
+            break;
+          case 3:
+            EditLetter(formParams.value).then((_res) => {
+              message.success('操作成功');
+              setTimeout(() => {
+                showModal.value = false;
+                reloadTable();
+              });
+            });
+            break;
+          default:
+            message.error('公告类型不支持');
+        }
       } else {
         message.error('请填写完整信息');
       }
@@ -290,7 +424,7 @@
 
   function handleEdit(record: Recordable) {
     showModal.value = true;
-    formParams.value = record;
+    formParams.value = cloneDeep(record);
   }
 
   function handleDelete(record: Recordable) {
@@ -329,24 +463,31 @@
     });
   }
 
-  function handleSubmit(values: Recordable) {
-    params.value = values;
+  function handleSubmit(_values: Recordable) {
     reloadTable();
   }
 
-  function handleReset(values: Recordable) {
-    params.value = values;
+  function handleReset(_values: Recordable) {
     reloadTable();
   }
 
-  function updateStatus(id, status) {
-    Status({ id: id, status: status }).then((_res) => {
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
       message.success('操作成功');
       setTimeout(() => {
         reloadTable();
       });
     });
   }
+
+  async function getMemberOption() {
+    options.value = await GetMemberOption();
+  }
+
+  onMounted(async () => {
+    adaModalWidth(dialogWidth);
+    await getMemberOption();
+  });
 </script>
 
 <style lang="less" scoped></style>

web/src/views/curdDemo/edit.vue

@@ -1,74 +1,84 @@
 <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-spin :show="loading" description="请稍候...">
+      <n-modal
+        v-model:show="isShowModal"
+        :show-icon="false"
+        preset="dialog"
+       :title="params?.id > 0 ? '编辑 #' + params?.id : '添加'"
+        :style="{
+          width: dialogWidth,
+        }"
       >
-        <n-form-item label="分类ID" path="categoryId">
-          <n-input-number placeholder="请输入分类ID" v-model:value="params.categoryId" />
-        </n-form-item>
+        <n-form
+          :model="params"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <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="title">
+          <n-form-item label="标题" path="title">
           <n-input placeholder="请输入标题" v-model:value="params.title" />
-        </n-form-item>
+          </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="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="content">
+            <Editor style="height: 450px" v-model:value="params.content" />
+          </n-form-item>
 
-        <n-form-item label="单图" path="image">
-          <UploadImage :maxNumber="1" v-model:value="params.image" />
-        </n-form-item>
+          <n-form-item label="单图" path="image">
+            <UploadImage :maxNumber="1" v-model:value="params.image" />
+          </n-form-item>
 
-        <n-form-item label="附件" path="attachfile">
-          <UploadFile :maxNumber="1" v-model:value="params.attachfile" />
-        </n-form-item>
+          <n-form-item label="附件" path="attachfile">
+            <UploadFile :maxNumber="1" v-model:value="params.attachfile" />
+          </n-form-item>
 
-        <n-form-item label="显示开关" path="switch">
-          <n-switch v-model:value="params.switch" />
-        </n-form-item>
+          <n-form-item label="所在城市" path="cityId">
+            <CitySelector v-model:value="params.cityId" />
+          </n-form-item>
 
-        <n-form-item label="排序" path="sort">
-          <n-input-number placeholder="请输入排序" v-model:value="params.sort" />
-        </n-form-item>
+          <n-form-item label="显示开关" path="switch">
+            <n-switch :unchecked-value="2" :checked-value="1" v-model:value="params.switch"
+        />
+          </n-form-item>
 
-        <n-form-item label="状态" path="status">
-          <n-select v-model:value="params.status" :options="options.sys_normal_disable" />
-        </n-form-item>
-      </n-form>
-      <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-form-item label="排序" path="sort">
+            <n-input-number placeholder="请输入排序" v-model:value="params.sort" />
+          </n-form-item>
+
+          <n-form-item label="状态" path="status">
+            <n-select v-model:value="params.status" :options="options.sys_normal_disable" />
+          </n-form-item>
+
+
+        </n-form>
+        <template #action>
+          <n-space>
+            <n-button @click="closeForm">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-spin>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { onMounted, ref, computed, watch } from 'vue';
-  import { Edit, MaxSort } from '@/api/curdDemo';
+  import { Edit, MaxSort, View } from '@/api/curdDemo';
   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 { rules, options, State, newState } from './model';
   import { useMessage } from 'naive-ui';
   import { adaModalWidth } from '@/utils/hotgo';
@@ -96,10 +106,8 @@
     },
   });
 
-  const params = computed(() => {
-    return props.formParams;
-  });
-
+  const loading = ref(false);
+  const params = ref<State>(props.formParams);
   const message = useMessage();
   const formRef = ref<any>({});
   const dialogWidth = ref('75%');
@@ -132,16 +140,38 @@
     isShowModal.value = false;
   }
 
-  watch(
-    () => params.value,
-    (value) => {
-      if (value.id === 0) {
-        MaxSort().then((res) => {
+  function loadForm(value) {
+    loading.value = true;
+
+    // 新增
+    if (value.id < 1) {
+      params.value = newState(value);
+      MaxSort()
+        .then((res) => {
           params.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
         });
-      }
+      return;
+    }
+
+    // 编辑
+    View({ id: value.id })
+      .then((res) => {
+        params.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  watch(
+    () => props.formParams,
+    (value) => {
+      loadForm(value);
     }
   );
 </script>
 
-<style lang="less"></style>
+<style lang="less"></style>

web/src/views/curdDemo/index.vue

@@ -2,8 +2,8 @@
   <div>
     <n-card :bordered="false" class="proCard">
       <div class="n-layout-page-header">
-        <n-card :bordered="false" title="生成演示列表">
-          <!--  这里有系统自动生成的CURD表格 -->
+        <n-card :bordered="false" title="生成演示">
+          <!--  这是系统自动生成的CURD表格，你可以将此行注释改为表格的描述 -->
         </n-card>
       </div>
       <BasicForm
@@ -62,7 +62,7 @@
             type="primary"
             @click="handleExport"
             class="min-left-space"
-            v-if="hasPermission(['/demoVar/export'])"
+            v-if="hasPermission(['/curdDemo/delete'])"
           >
             <template #icon>
               <n-icon>
@@ -89,9 +89,9 @@
   import { BasicTable, TableAction } from '@/components/Table';
   import { BasicForm, useForm } from '@/components/Form/index';
   import { usePermission } from '@/hooks/web/usePermission';
-  import { Delete, List, Status, Export } from '@/api/curdDemo';
+  import { List, Export, Delete, Status } from '@/api/curdDemo';
   import { State, columns, schemas, options, newState } from './model';
-  import { DeleteOutlined, PlusOutlined, ExportOutlined } from '@vicons/antd';
+  import { PlusOutlined, ExportOutlined, DeleteOutlined } from '@vicons/antd';
   import { useRouter } from 'vue-router';
   import { getOptionLabel } from '@/utils/hotgo';
   import Edit from './edit.vue';
@@ -246,4 +246,4 @@
   }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped></style>

web/src/views/curdDemo/model.ts

@@ -8,12 +8,13 @@ import { isArray, isNullObject } from '@/utils/is';
 import { getFileExt } from '@/utils/urlUtils';
 import { defRangeShortcuts, defShortcuts, formatToDate } from '@/utils/dateUtil';
 import { validate } from '@/utils/validateUtil';
-import { getOptionLabel, getOptionTag, Options } from '@/utils/hotgo';
-import { errorImg } from '@/utils/hotgo';
+import { getOptionLabel, getOptionTag, Options, errorImg } from '@/utils/hotgo';
+
 import { usePermission } from '@/hooks/web/usePermission';
 const { hasPermission } = usePermission();
 const $message = window['$message'];
 
+
 export interface State {
   id: number;
   categoryId: number;
@@ -22,6 +23,7 @@ export interface State {
   content: string;
   image: string;
   attachfile: string;
+  cityId: number;
   switch: number;
   sort: number;
   status: number;
@@ -40,6 +42,7 @@ export const defaultState = {
   content: '',
   image: '',
   attachfile: '',
+  cityId: 0,
   switch: 1,
   sort: 0,
   status: 1,
@@ -61,7 +64,8 @@ export const options = ref<Options>({
   sys_normal_disable: [],
 });
 
-export const rules = {};
+export const rules = {
+};
 
 export const schemas = ref<FormSchema[]>([
   {
@@ -217,6 +221,10 @@ export const columns = [
     title: '创建时间',
     key: 'createdAt',
   },
+  {
+    title: '修改时间',
+    key: 'updatedAt',
+  },
   {
     title: '分类名称',
     key: 'testCategoryName',
@@ -225,15 +233,17 @@ export const columns = [
 
 async function loadOptions() {
   options.value = await Dicts({
-    types: ['sys_normal_disable'],
+    types: [
+      'sys_normal_disable',
+   ],
   });
   for (const item of schemas.value) {
     switch (item.field) {
       case 'status':
         item.componentProps.options = options.value.sys_normal_disable;
         break;
-    }
+     }
   }
 }
 
-await loadOptions();
+await loadOptions();

web/src/views/curdDemo/view.vue

@@ -45,6 +45,11 @@
           </div>
         </n-descriptions-item>
 
+        <n-descriptions-item>
+          <template #label>所在城市</template>
+          {{ formValue.cityId }}
+        </n-descriptions-item>
+
         <n-descriptions-item label="显示开关">
           <n-switch v-model:value="formValue.switch" :unchecked-value="2" :checked-value="1" :disabled="true"
         /></n-descriptions-item>

web/src/views/develop/code/components/EditMasterCell.vue

@@ -17,7 +17,23 @@
         :pagination="false"
         :scroll-x="1090"
         :scrollbar-props="{ trigger: 'none' }"
-      />
+      >
+        <template #tableTitle>
+          <n-tooltip placement="top-start" trigger="hover">
+            <template #trigger>
+              <n-button type="primary" @click="reloadFields(true)" class="min-left-space">
+                <template #icon>
+                  <n-icon>
+                    <Reload />
+                  </n-icon>
+                </template>
+                重置字段
+              </n-button>
+            </template>
+            主要用于重置字段设置或数据库表字段发生变化时重新载入
+          </n-tooltip>
+        </template>
+      </BasicTable>
     </n-card>
   </n-spin>
 </template>
@@ -28,7 +44,7 @@
   import { genInfoObj, selectListObj } from '@/views/develop/code/components/model';
   import { ColumnList } from '@/api/develop/code';
   import { NButton, NCheckbox, NInput, NSelect, NTooltip, NTreeSelect } from 'naive-ui';
-  import { HelpCircleOutline } from '@vicons/ionicons5';
+  import { HelpCircleOutline, Reload } from '@vicons/ionicons5';
   import { renderIcon } from '@/utils';
   import { cloneDeep } from 'lodash-es';
 
@@ -64,14 +80,26 @@
   const columns = ref<any>([]);
   const show = ref(false);
   const dataSource = ref(formValue.value.masterColumns);
+
+  async function reloadFields(loading = false) {
+    if (loading) {
+      show.value = true;
+    }
+
+    formValue.value.masterColumns = await ColumnList({
+      name: formValue.value.dbName,
+      table: formValue.value.tableName,
+    });
+    dataSource.value = formValue.value.masterColumns;
+    if (loading) {
+      show.value = false;
+    }
+  }
+
   onMounted(async () => {
     show.value = true;
     if (formValue.value.masterColumns.length === 0) {
-      formValue.value.masterColumns = await ColumnList({
-        name: formValue.value.dbName,
-        table: formValue.value.tableName,
-      });
-      dataSource.value = formValue.value.masterColumns;
+      await reloadFields();
     }
 
     columns.value = [

web/src/views/develop/code/components/model.ts

@@ -20,6 +20,7 @@ export interface joinAttr {
 export const genInfoObj = {
   id: 0,
   genType: 10,
+  genTemplate: null,
   varName: '',
   options: {
     headOps: ['add', 'batchDel', 'export'],

web/src/views/develop/code/deploy.vue

@@ -44,9 +44,7 @@
               <n-button type="success" :loading="formBtnLoading" @click="submitBuild"
                 >提交生成</n-button
               >
-              <n-button type="info" dashed :loading="formBtnLoading" @click="submitSave"
-                >仅保存配置</n-button
-              >
+              <n-button type="info" dashed @click="submitSave">仅保存配置</n-button>
             </n-space>
           </template>
         </n-tabs>
@@ -217,12 +215,17 @@
       positiveText: '确定',
       negativeText: '取消',
       onPositiveClick: () => {
-        Build(genInfo.value).then((_res) => {
-          setTimeout(function () {
-            location.reload();
-          }, 1500);
-          message.success('生成提交成功，即将刷新页面..');
-        });
+        formBtnLoading.value = true;
+        Build(genInfo.value)
+          .then((_res) => {
+            setTimeout(function () {
+              location.reload();
+            }, 1500);
+            message.success('生成提交成功，即将刷新页面..');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
+          });
       },
       onNegativeClick: () => {
         // message.error('取消');

web/src/views/develop/code/index.vue

@@ -62,6 +62,16 @@
             placeholder="请选择"
             :options="selectList.genType"
             v-model:value="formParams.genType"
+            :on-update:value="onUpdateValueGenType"
+          />
+        </n-form-item>
+
+        <n-form-item label="生成模板" path="genTemplate">
+          <n-select
+            placeholder="请选择"
+            :options="genTemplateOptions"
+            v-model:value="formParams.genTemplate"
+            :onFocus="onFocusGenTemplate"
           />
         </n-form-item>
 
@@ -447,6 +457,21 @@
     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();
+  }
 </script>
 
 <style lang="less" scoped></style>

web/src/views/home/account/BasicSetting.vue

@@ -0,0 +1,206 @@
+<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="登录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">
+          <UploadImage :maxNumber="1" v-model:value="formValue.avatar" />
+        </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 UploadImage from '@/components/Upload/uploadImage.vue';
+  import CitySelector from '@/components/CitySelector/citySelector.vue';
+  import DatePicker from '@/components/DatePicker/datePicker.vue';
+  import { getUserInfo, updateMemberProfile } from '@/api/system/user';
+  import { CheckmarkCircle } from '@vicons/ionicons5';
+  import { timeFix } from '@/utils/hotgo';
+  import { UserInfoState, useUserStore } from '@/store/modules/user';
+
+  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: '',
+  });
+
+  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>

web/src/views/home/account/CashSetting.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <n-spin :show="show" description="请稍候...">
+      <n-grid cols="2 s:2 m:2 l:2 xl:2 2xl:2" responsive="screen">
+        <n-grid-item>
+          <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">
+              <UploadImage
+                :maxNumber="1"
+                :helpText="'请上传清晰有效的收款码，图片大小不超过2M'"
+                v-model:value="formValue.payeeCode"
+              />
+            </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-grid-item>
+      </n-grid>
+    </n-spin>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, reactive, ref, unref } from 'vue';
+  import { useMessage } from 'naive-ui';
+  import UploadImage from '@/components/Upload/uploadImage.vue';
+  import { BasicUpload } from '@/components/Upload';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useUserStoreWidthOut } from '@/store/modules/user';
+  import { getUserInfo, updateMemberCash } from '@/api/system/user';
+
+  const show = ref(false);
+  const useUserStore = useUserStoreWidthOut();
+  const globSetting = useGlobSetting();
+  const { uploadUrl } = globSetting;
+  const uploadHeaders = reactive({
+    Authorization: useUserStore.token,
+  });
+
+  const rules = {
+    password: {
+      required: true,
+      message: '请输入登录密码',
+      trigger: 'blur',
+    },
+  };
+
+  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('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function uploadChange(list: string[]) {
+    // 单图模式，只需要第一个索引
+    if (list.length > 0) {
+      formValue.value.payeeCode = unref(list[0]);
+    } else {
+      formValue.value.payeeCode = unref('');
+    }
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  function load() {
+    show.value = true;
+    getUserInfo()
+      .then((res) => {
+        formValue.value = res.cash;
+        formValue.value.password = '';
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  }
+</script>

web/src/views/home/account/SafetySetting.vue

@@ -0,0 +1,317 @@
+<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 { onMounted, 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 dialogWidth = ref('75%');
+  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: '',
+  });
+
+  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());
+  }
+
+  onMounted(async () => {
+    adaModalWidth(dialogWidth, 580);
+  });
+</script>

web/src/views/home/account/account.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <n-grid :x-gap="24">
+    <n-grid cols="24 300:1 600:24" :x-gap="24">
       <n-grid-item span="6">
-        <n-card :bordered="false" size="small" class="proCard">
+        <n-card :bordered="false" class="proCard">
           <n-thing
             class="thing-cell"
             v-for="item in typeTabList"
@@ -19,6 +19,7 @@
         <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" />
         </n-card>
       </n-grid-item>
     </n-grid>
@@ -28,6 +29,7 @@
   import { ref } from 'vue';
   import BasicSetting from './BasicSetting.vue';
   import SafetySetting from './SafetySetting.vue';
+  import CashSetting from './CashSetting.vue';
 
   const typeTabList = [
     {
@@ -37,9 +39,14 @@
     },
     {
       name: '安全设置',
-      desc: '密码，邮箱等设置',
+      desc: '密码、手机号、邮箱等设置',
       key: 2,
     },
+    {
+      name: '提现设置',
+      desc: '提现收款账号支付宝设置',
+      key: 3,
+    },
   ];
 
   const type = ref(1);

web/src/views/home/message/list.vue

@@ -0,0 +1,153 @@
+<template>
+  <n-spin :show="loading">
+    <n-empty v-show="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="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"
+    />
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { MessageRow, parseMessage } from '@/enums/systemMessageEnum';
+  import { getIcon } from '@/enums/systemMessageEnum';
+  import { MessageList, UpRead } from '@/api/apply/notice';
+  import { debounce } from 'throttle-debounce';
+  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;
+    list: null | MessageRow[];
+  }
+
+  const dataSource = ref<dataList>({
+    page: 1,
+    pageSize: 5,
+    pageCount: 1,
+    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(1000, function () {
+    notificationStore.pullMessages();
+  });
+
+  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();
+  });
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.list-item) {
+    margin-left: calc(1vw);
+    margin-right: calc(1vw);
+  }
+
+  :deep(img, video, audio) {
+    width: 100%;
+  }
+</style>

web/src/views/home/message/message.vue

@@ -0,0 +1,42 @@
+<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"
+        size="large"
+        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>

web/src/views/log/cron-log/columns.ts

@@ -1,80 +0,0 @@
-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: 'member_name',
-    render(row) {
-      if (row.memberId === 0) {
-        return row.member_name;
-      }
-      return row.member_name + '(' + 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',
-  },
-];

web/src/views/log/cron-log/index.vue

@@ -1,290 +0,0 @@
-<template>
-  <n-card :bordered="false" class="proCard" title="任务日志">
-    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
-      <template #statusSlot="{ model, field }">
-        <n-input v-model:value="model[field]" />
-      </template>
-    </BasicForm>
-
-    <BasicTable
-      :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>
-    </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) => {
-            console.log('_res:' + JSON.stringify(_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) => {
-            console.log('_res:' + JSON.stringify(_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: 'cron_log_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>

web/src/views/log/cron-log/view.vue

@@ -1,136 +0,0 @@
-<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/index.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>

web/src/views/log/ems-log/columns.ts

@@ -23,12 +23,12 @@ export const columns = [
   },
   {
     title: '操作人',
-    key: 'member_name',
+    key: 'memberName',
     render(row) {
       if (row.memberId === 0) {
-        return row.member_name;
+        return row.memberName;
       }
-      return row.member_name + '(' + row.memberId + ')';
+      return row.memberName + '(' + row.memberId + ')';
     },
   },
   {

web/src/views/log/log/columns.ts

@@ -24,12 +24,12 @@ export const columns = [
   },
   {
     title: '操作人',
-    key: 'member_name',
+    key: 'memberName',
     render(row) {
       if (row.memberId === 0) {
-        return row.member_name;
+        return row.memberName;
       }
-      return row.member_name + '(' + row.memberId + ')';
+      return row.memberName + '(' + row.memberId + ')';
     },
     width: 150,
   },

web/src/views/log/log/index.vue

@@ -1,39 +1,41 @@
 <template>
-  <n-card :bordered="false" class="proCard">
+  <div>
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="访问日志">
-        全局的访问日志，记录了管理后台中人员的操作记录和服务响应情况
+        全局访问日志，记录了系统中后台人员和客户端的操作记录，以及服务响应情况
       </n-card>
     </div>
-    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
-      <template #statusSlot="{ model, field }">
-        <n-input v-model:value="model[field]" />
-      </template>
-    </BasicForm>
+    <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"
-      :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>
+      <BasicTable
+        :openChecked="true"
+        :columns="columns"
+        :request="loadDataTable"
+        :row-key="(row) => row.id"
+        ref="actionRef"
+        :actionColumn="actionColumn"
+        @update:checked-row-keys="onCheckedRow"
+        :scroll-x="1090"
+        :resizeHeightOffset="-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>

web/src/views/log/log/view.vue

@@ -15,7 +15,7 @@
         </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="IP归属地">{{ data.cityLabel }}</n-descriptions-item>
         <n-descriptions-item label="链路ID">{{ data.reqId }}</n-descriptions-item>
         <n-descriptions-item label="响应时间">{{
           timestampToTime(data.timestamp)
@@ -61,7 +61,7 @@
         copyable
         boxed
         sort
-        style="width: 100%; min-width: 3.125rem"
+        class="json-width"
       />
     </n-card>
 
@@ -78,7 +78,7 @@
         copyable
         boxed
         sort
-        style="width: 100%; min-width: 3.125rem"
+        class="json-width"
       />
     </n-card>
 
@@ -89,14 +89,7 @@
       :segmented="{ content: true }"
       title="GET参数"
     >
-      <JsonViewer
-        :value="data.getData"
-        :expand-depth="5"
-        copyable
-        boxed
-        sort
-        style="width: 100%; min-width: 3.125rem"
-      />
+      <JsonViewer :value="data.getData" :expand-depth="5" copyable boxed sort class="json-width" />
     </n-card>
 
     <n-card
@@ -106,14 +99,7 @@
       :segmented="{ content: true }"
       title="POST参数"
     >
-      <JsonViewer
-        :value="data.postData"
-        :expand-depth="5"
-        copyable
-        boxed
-        sort
-        style="width: 100%; min-width: 3.125rem"
-      />
+      <JsonViewer :value="data.postData" :expand-depth="5" copyable boxed sort class="json-width" />
     </n-card>
   </div>
 </template>
@@ -147,4 +133,9 @@
   };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  ::v-deep(.json-width) {
+    width: 100%;
+    min-width: 3.125rem;
+  }
+</style>

web/src/views/log/login-log/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="登录日志"> 在这里会记录管理后台所有的来访登录情况 </n-card>
+    </div>
     <n-card :bordered="false" class="proCard">
-      <div class="n-layout-page-header">
-        <n-card :bordered="false" title="登录日志"> 在这里会记录管理后台所有的来访登录情况 </n-card>
-      </div>
       <BasicForm
         @register="register"
         @submit="reloadTable"

web/src/views/log/login-log/model.ts

@@ -130,8 +130,8 @@ export const columns = [
   },
   {
     title: 'IP归属地',
-    key: 'region',
-    width: 180,
+    key: 'cityLabel',
+    width: 200,
   },
   {
     title: '浏览器',

web/src/views/log/sms-log/index.vue

@@ -1,34 +1,43 @@
 <template>
-  <n-card :bordered="false" class="proCard">
-    <n-card :bordered="false" title="短信记录"> 你可以在这里查看到平台所有的短信发送记录 </n-card>
-    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" ref="searchFormRef">
-      <template #statusSlot="{ model, field }">
-        <n-input v-model:value="model[field]" />
-      </template>
-    </BasicForm>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="短信记录"> 你可以在这里查看到平台所有的短信发送记录 </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="1090"
-    >
-      <template #tableTitle>
-        <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
-          <template #icon>
-            <n-icon>
-              <DeleteOutlined />
-            </n-icon>
-          </template>
-          批量删除
-        </n-button>
-      </template>
-    </BasicTable>
-  </n-card>
+      <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>
+      </BasicTable>
+    </n-card>
+  </div>
 </template>
 
 <script lang="ts" setup>

web/src/views/login/index.vue

@@ -33,7 +33,7 @@
             <n-input
               @keyup.enter="handleSubmit"
               v-model:value="formInline.pass"
-              type="pass"
+              type="password"
               showpassOn="click"
               placeholder="请输入密码"
             >

web/src/views/monitor/online/index.vue

@@ -69,6 +69,7 @@
           {
             label: '强制退出',
             onClick: handleDelete.bind(null, record),
+            type: 'error',
           },
         ],
       });

web/src/views/monitor/serve-log/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="服务日志">
+        在这里开发者可以快速定位服务端在运行时产生的重要日志，方便排查系统异常和日常运维工作
+      </n-card>
+    </div>
     <n-card :bordered="false" class="proCard">
-      <div class="n-layout-page-header">
-        <n-card :bordered="false" title="服务日志">
-          在这里开发者可以快速定位服务端在运行时产生的重要日志，方便排查系统异常和日常运维
-        </n-card>
-      </div>
       <BasicForm
         @register="register"
         @submit="reloadTable"
@@ -131,14 +131,16 @@
       return h(TableAction as any, {
         style: 'button',
         actions: [
-          {
-            label: '详细报错',
-            onClick: handleStack.bind(null, record),
-          },
           {
             label: '访问日志',
             onClick: handleView.bind(null, record),
             ifShow: record.sysLogId > 0,
+            type: 'default',
+          },
+          {
+            label: '堆栈',
+            onClick: handleStack.bind(null, record),
+            type: 'primary',
           },
           {
             label: '删除',

web/src/views/org/user/columns.ts

@@ -1,5 +1,6 @@
 import { h } from 'vue';
 import { NAvatar, NTag } from 'naive-ui';
+import { formatBefore } from '@/utils/dateUtil';
 
 export const columns = [
   {
@@ -104,9 +105,15 @@ export const columns = [
     },
   },
   {
-    title: '访问次数',
-    key: 'visitCount',
+    title: '最近活跃',
+    key: 'lastActiveAt',
     width: 100,
+    render(row) {
+      if (row.lastActiveAt === null) {
+        return '从未登录';
+      }
+      return formatBefore(new Date(row.lastActiveAt));
+    },
   },
   {
     title: '创建时间',

web/src/views/org/user/user.vue

@@ -81,10 +81,11 @@
           <n-grid x-gap="24" :cols="2">
             <n-gi>
               <n-form-item label="绑定角色" path="roleId">
-                <n-select
+                <n-tree-select
                   :default-value="formParams.roleId"
                   :options="roleList"
                   @update:value="handleUpdateRoleValue"
+                  :default-expand-all="true"
                 />
               </n-form-item>
             </n-gi>
@@ -385,16 +386,9 @@
     roleList.value = [];
     let roleLists = await getRoleList({ pageSize: 100 });
     if (roleLists.list === undefined || roleLists.list === null) {
-      roleLists = [];
+      roleList.value = [];
     } else {
-      roleLists = roleLists.list;
-    }
-    if (roleLists.length > 0) {
-      for (let i = 0; i < roleLists.length; i++) {
-        roleList.value[i] = {};
-        roleList.value[i].label = roleLists[i].name;
-        roleList.value[i].value = roleLists[i].id;
-      }
+      roleList.value = roleLists.list;
     }
 
     postList.value = [];

web/src/views/permission/menu/CreateDrawer.vue

@@ -22,7 +22,7 @@
         <n-form-item label="上级目录" path="pid">
           <n-tree-select
             :options="optionTreeData"
-            default-value="0"
+            :default-value="formParams.pid"
             @update:value="handleUpdateValue"
           />
         </n-form-item>
@@ -284,7 +284,7 @@
       },
     },
     emits: ['loadData'],
-    setup(_props, context) {
+    setup(props, context) {
       const message = useMessage();
       const formRef: any = ref(null);
       const state = reactive<any>({
@@ -317,12 +317,16 @@
         },
       };
 
-      function openDrawer() {
+      function openDrawer(pid: number) {
         if (document.body.clientWidth < 700) {
           state.width = document.body.clientWidth;
         }
         state.isDrawer = true;
         state.formParams = newState(null);
+        state.formParams.pid = pid;
+        if (pid > 0) {
+          state.formParams.type = 2;
+        }
       }
 
       function closeDrawer() {

web/src/views/permission/menu/menu.vue

@@ -2,8 +2,8 @@
   <div>
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="菜单管理">
-        在这里可以管理编辑系统下的所有菜单导航和分配相应的菜单权限</n-card
-      >
+        在这里可以管理编辑系统下的所有菜单导航和分配相应的菜单权限
+      </n-card>
     </div>
     <n-grid class="mt-4" cols="1 s:1 m:1 l:3 xl:3 2xl:3" responsive="screen" :x-gap="12">
       <n-gi span="1">
@@ -20,6 +20,21 @@
                 </template>
                 添加菜单
               </n-button>
+              <n-button
+                type="info"
+                icon-placement="left"
+                @click="openChildCreateDrawer"
+                :disabled="!isEditMenu"
+              >
+                <template #icon>
+                  <div class="flex items-center">
+                    <n-icon size="14">
+                      <PlusOutlined />
+                    </n-icon>
+                  </div>
+                </template>
+                添加子菜单
+              </n-button>
               <n-button type="primary" icon-placement="left" @click="packHandle">
                 全部{{ expandedKeys.length ? '收起' : '展开' }}
                 <template #icon>
@@ -72,11 +87,16 @@
                 <FormOutlined />
               </n-icon>
               <span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
-              <span style="font-size: 14px">{{
-                treeItemTitle ? '' : '从菜单列表选择一项后，进行编辑'
-              }}</span>
+              <span style="font-size: 14px">{{ treeItemTitle }}</span>
             </n-space>
           </template>
+
+          <n-result
+            v-show="!isEditMenu"
+            status="info"
+            title="提示"
+            description="从菜单列表中选择一项进行编辑"
+          />
           <n-form
             :model="formParams"
             :rules="rules"
@@ -137,8 +157,8 @@
                       </template>
                       请填写图标编码，可以参考图标库，也可以不填使用默认图标
                     </n-tooltip>
-                    菜单图标</template
-                  >
+                    菜单图标
+                  </template>
                 </n-form-item>
               </n-gi>
             </n-grid>
@@ -154,8 +174,8 @@
                       </template>
                       请路由地址，如：user
                     </n-tooltip>
-                    路由地址</template
-                  >
+                    路由地址
+                  </template>
                 </n-form-item>
               </n-gi>
               <n-gi>
@@ -169,8 +189,8 @@
                       对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址
                       则会新窗口打开
                     </n-tooltip>
-                    路由别名</template
-                  >
+                    路由别名
+                  </template>
                 </n-form-item>
               </n-gi>
             </n-grid>
@@ -181,16 +201,16 @@
                   <n-input placeholder="组件路径" v-model:value="formParams.component" />
                   <template #feedback>
                     主目录填 `LAYOUT`;多级父目录填
-                    `ParentLayout`;页面填具体的组件路径，如：`/system/menu/menu`</template
-                  >
+                    `ParentLayout`;页面填具体的组件路径，如：`/system/menu/menu`
+                  </template>
                 </n-form-item>
               </n-gi>
               <n-gi v-if="formParams.type === 1">
                 <n-form-item label="默认跳转" path="redirect">
                   <n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
                   <template #feedback
-                    >默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用</template
-                  >
+                    >默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用
+                  </template>
                 </n-form-item>
               </n-gi>
             </n-grid>
@@ -211,8 +231,8 @@
                       </template>
                       请填写API路由地址，可同时作用于服务端和web端。多个权限用,分割
                     </n-tooltip>
-                    分配权限</template
-                  >
+                    分配权限
+                  </template>
                 </n-form-item>
               </n-gi>
               <!--              <n-gi>-->
@@ -354,7 +374,7 @@
   import { getTreeItem } from '@/utils';
   import CreateDrawer from './CreateDrawer.vue';
   import IconSelector from '@/components/IconSelector/index.vue';
-  import { State, newState } from '@/views/permission/menu/model';
+  import { newState, State } from '@/views/permission/menu/model';
 
   const menuTypes = [
     {
@@ -455,14 +475,20 @@
   function openCreateDrawer() {
     drawerTitle.value = '添加菜单';
     const { openDrawer } = createDrawerRef.value;
-    openDrawer();
+    openDrawer(0);
+  }
+
+  function openChildCreateDrawer() {
+    drawerTitle.value = '添加菜单';
+    const { openDrawer } = createDrawerRef.value;
+    openDrawer(formParams.id);
   }
 
   function selectedTree(keys) {
     if (keys.length) {
       const treeItem = getTreeItem(unref(treeData), keys[0]);
       treeItemKey.value = keys;
-      treeItemTitle.value = treeItem.label;
+      treeItemTitle.value = treeItem.label + ' #' + treeItem.id;
       Object.assign(formParams, treeItem);
       isEditMenu.value = true;
     } else {

web/src/views/permission/role/role.vue

@@ -230,28 +230,30 @@
             label: '菜单权限',
             onClick: handleMenuAuth.bind(null, record),
             ifShow: () => {
-              return record.key !== 'super';
+              return record.id !== 1;
             },
+            type: 'default',
           },
           {
             label: '数据权限',
             onClick: handleDataAuth.bind(null, record),
             ifShow: () => {
-              return record.key !== 'super';
+              return record.id !== 1;
             },
+            type: 'default',
           },
           {
             label: '编辑',
             onClick: handleEdit.bind(null, record),
             ifShow: () => {
-              return record.key !== 'super';
+              return record.id !== 1;
             },
           },
           {
             label: '删除',
             onClick: handleDelete.bind(null, record),
             ifShow: () => {
-              return record.key !== 'super';
+              return record.id !== 1;
             },
           },
         ],

web/src/views/setting/account/BasicSetting.vue

@@ -1,71 +0,0 @@
-<template>
-  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
-    <n-grid-item>
-      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
-        <n-form-item label="昵称" path="name">
-          <n-input v-model:value="formValue.name" placeholder="请输入昵称" />
-        </n-form-item>
-
-        <n-form-item label="邮箱" path="email">
-          <n-input placeholder="请输入邮箱" v-model:value="formValue.email" />
-        </n-form-item>
-
-        <n-form-item label="联系电话" path="mobile">
-          <n-input placeholder="请输入联系电话" v-model:value="formValue.mobile" />
-        </n-form-item>
-
-        <n-form-item label="联系地址" path="address">
-          <n-input v-model:value="formValue.address" type="textarea" placeholder="请输入联系地址" />
-        </n-form-item>
-
-        <div>
-          <n-space>
-            <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
-          </n-space>
-        </div>
-      </n-form>
-    </n-grid-item>
-  </n-grid>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref } from 'vue';
-  import { useMessage } from 'naive-ui';
-
-  const rules = {
-    name: {
-      required: true,
-      message: '请输入昵称',
-      trigger: 'blur',
-    },
-    email: {
-      required: true,
-      message: '请输入邮箱',
-      trigger: 'blur',
-    },
-    mobile: {
-      required: true,
-      message: '请输入联系电话',
-      trigger: 'input',
-    },
-  };
-  const formRef: any = ref(null);
-  const message = useMessage();
-
-  const formValue = reactive({
-    name: '',
-    mobile: '',
-    email: '',
-    address: '',
-  });
-
-  function formSubmit() {
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        message.success('验证成功');
-      } else {
-        message.error('验证失败，请填写完整信息');
-      }
-    });
-  }
-</script>

web/src/views/setting/account/SafetySetting.vue

@@ -1,52 +0,0 @@
-<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>修改</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>修改</n-button>
-          </template>
-          <n-thing title="绑定手机">
-            <template #description
-              ><span class="text-gray-400">已绑定手机号：+86189****4877</span></template
-            >
-          </n-thing>
-        </n-list-item>
-        <n-list-item>
-          <template #suffix>
-            <n-button type="primary" text>设置</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>修改</n-button>
-          </template>
-          <n-thing title="个性域名">
-            <template #description
-              ><span class="text-gray-400">已绑定域名：https://hotgo.facms.cn</span></template
-            >
-          </n-thing>
-        </n-list-item>
-      </n-list>
-    </n-grid-item>
-  </n-grid>
-</template>
-
-<script lang="ts" setup></script>

web/src/views/system/account/BasicSetting.vue

@@ -1,71 +0,0 @@
-<template>
-  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
-    <n-grid-item>
-      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
-        <n-form-item label="昵称" path="name">
-          <n-input v-model:value="formValue.name" placeholder="请输入昵称" />
-        </n-form-item>
-
-        <n-form-item label="邮箱" path="email">
-          <n-input placeholder="请输入邮箱" v-model:value="formValue.email" />
-        </n-form-item>
-
-        <n-form-item label="联系电话" path="mobile">
-          <n-input placeholder="请输入联系电话" v-model:value="formValue.mobile" />
-        </n-form-item>
-
-        <n-form-item label="联系地址" path="address">
-          <n-input v-model:value="formValue.address" type="textarea" placeholder="请输入联系地址" />
-        </n-form-item>
-
-        <div>
-          <n-space>
-            <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
-          </n-space>
-        </div>
-      </n-form>
-    </n-grid-item>
-  </n-grid>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref } from 'vue';
-  import { useMessage } from 'naive-ui';
-
-  const rules = {
-    name: {
-      required: true,
-      message: '请输入昵称',
-      trigger: 'blur',
-    },
-    email: {
-      required: true,
-      message: '请输入邮箱',
-      trigger: 'blur',
-    },
-    mobile: {
-      required: true,
-      message: '请输入联系电话',
-      trigger: 'input',
-    },
-  };
-  const formRef: any = ref(null);
-  const message = useMessage();
-
-  const formValue = reactive({
-    name: '',
-    mobile: '',
-    email: '',
-    address: '',
-  });
-
-  function formSubmit() {
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        message.success('验证成功');
-      } else {
-        message.error('验证失败，请填写完整信息');
-      }
-    });
-  }
-</script>

web/src/views/system/account/SafetySetting.vue

@@ -1,52 +0,0 @@
-<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>修改</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>修改</n-button>
-          </template>
-          <n-thing title="绑定手机">
-            <template #description
-              ><span class="text-gray-400">已绑定手机号：+86189****4877</span></template
-            >
-          </n-thing>
-        </n-list-item>
-        <n-list-item>
-          <template #suffix>
-            <n-button type="primary" text>设置</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>修改</n-button>
-          </template>
-          <n-thing title="个性域名">
-            <template #description
-              ><span class="text-gray-400">已绑定域名：https://hotgo.facms.cn</span></template
-            >
-          </n-thing>
-        </n-list-item>
-      </n-list>
-    </n-grid-item>
-  </n-grid>
-</template>
-
-<script lang="ts" setup></script>

web/src/views/system/account/account.vue

@@ -1,76 +0,0 @@
-<template>
-  <div>
-    <n-grid :x-gap="24">
-      <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" />
-          <SafetySetting v-if="type === 2" />
-        </n-card>
-      </n-grid-item>
-    </n-grid>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import BasicSetting from './BasicSetting.vue';
-  import SafetySetting from './SafetySetting.vue';
-
-  const typeTabList = [
-    {
-      name: '基本设置',
-      desc: '个人账户信息设置',
-      key: 1,
-    },
-    {
-      name: '安全设置',
-      desc: '密码，邮箱等设置',
-      key: 2,
-    },
-  ];
-
-  const type = ref(1);
-  const typeTitle = ref('基本设置');
-
-  function switchType(e) {
-    type.value = e.key;
-    typeTitle.value = e.name;
-  }
-</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>

web/src/views/system/config/BasicSetting.vue

@@ -27,6 +27,10 @@
               />
             </n-form-item>
 
+            <n-form-item label="网站域名" path="basicDomain">
+              <n-input v-model:value="formValue.basicDomain" placeholder="请输入网站域名" />
+            </n-form-item>
+
             <n-form-item label="用户是否可注册开关" path="basicRegisterSwitch">
               <n-radio-group
                 v-model:value="formValue.basicRegisterSwitch"
@@ -122,6 +126,7 @@
   const formValue = ref({
     basicName: 'HotGo',
     basicLogo: '',
+    basicDomain: 'https://hotgo.facms.cn',
     basicIcpCode: '',
     basicLoginCode: 0,
     basicRegisterSwitch: 1,

web/src/views/system/config/EmailSetting.vue

@@ -35,6 +35,40 @@
               <n-input v-model:value="formValue.smtpAdminMailbox" placeholder="" />
             </n-form-item>
 
+            <n-divider title-placement="left">发信限制</n-divider>
+            <n-form-item label="最小发送间隔" path="smtpMinInterval">
+              <n-input-number
+                :show-button="false"
+                placeholder="请输入"
+                v-model:value="formValue.smtpMinInterval"
+              >
+                <template #suffix> 秒 </template>
+              </n-input-number>
+              <template #feedback> 同地址</template>
+            </n-form-item>
+            <n-form-item label="IP最大发送次数" path="smtpMaxIpLimit">
+              <n-input-number v-model:value="formValue.smtpMaxIpLimit" placeholder="" />
+              <template #feedback> 同IP每天最大允许发送次数 </template>
+            </n-form-item>
+            <n-form-item label="验证码有效期" path="smtpCodeExpire">
+              <n-input-number
+                :show-button="false"
+                placeholder="请输入"
+                v-model:value="formValue.smtpCodeExpire"
+              >
+                <template #suffix> 秒 </template>
+              </n-input-number>
+            </n-form-item>
+
+            <n-form-item label="邮件模板" path="smtpTemplate">
+              <n-dynamic-input
+                v-model:value="formValue.smtpTemplate"
+                preset="pair"
+                key-placeholder="事件KEY"
+                value-placeholder="模板路径"
+              />
+            </n-form-item>
+
             <div>
               <n-space>
                 <n-button type="primary" @click="formSubmit">保存更新</n-button>
@@ -63,7 +97,12 @@
         class="py-4"
       >
         <n-form-item label="接收邮箱" path="to">
-          <n-input placeholder="多个用;隔开" v-model:value="formParams.to" :required="true" />
+          <n-input
+            type="textarea"
+            placeholder="多个用;隔开"
+            v-model:value="formParams.to"
+            :required="true"
+          />
         </n-form-item>
       </n-form>
 
@@ -84,10 +123,8 @@
 
   const group = ref('smtp');
   const show = ref(false);
-
   const showModal = ref(false);
   const formBtnLoading = ref(false);
-
   const formParams = ref({ to: '' });
 
   const rules = {
@@ -108,6 +145,10 @@
     smtpPass: '',
     smtpSendName: 'HotGo',
     smtpAdminMailbox: '',
+    smtpMinInterval: 60,
+    smtpMaxIpLimit: 10,
+    smtpCodeExpire: 600,
+    smtpTemplate: null,
   });
 
   function confirmForm(e) {
@@ -134,15 +175,10 @@
   function formSubmit() {
     formRef.value.validate((errors) => {
       if (!errors) {
-        updateConfig({ group: group.value, list: formValue.value })
-          .then((res) => {
-            console.log('res:' + JSON.stringify(res));
-            message.success('更新成功');
-            load();
-          })
-          .catch((error) => {
-            message.error(error.toString());
-          });
+        updateConfig({ group: group.value, list: formValue.value }).then((res) => {
+          message.success('更新成功');
+          load();
+        });
       } else {
         message.error('验证失败，请填写完整信息');
       }
@@ -159,13 +195,11 @@
       getConfig({ group: group.value })
         .then((res) => {
           show.value = false;
-          // state.formValue.watermarkClarity = res;
+          res.list.smtpTemplate = JSON.parse(res.list.smtpTemplate);
           formValue.value = res.list;
-          console.log('res:' + JSON.stringify(res));
         })
-        .catch((error) => {
+        .finally(() => {
           show.value = false;
-          message.error(error.toString());
         });
     });
   }

web/src/views/system/config/SmsSetting.vue

@@ -3,7 +3,6 @@
     <n-spin :show="show" description="正在获取配置...">
       <n-grid cols="2 s:2 m:2 l:2 xl:2 2xl:2" responsive="screen">
         <n-grid-item>
-          <n-divider title-placement="left">通用配置</n-divider>
           <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
             <n-form-item label="默认驱动" path="smsDrive">
               <n-select
@@ -13,6 +12,7 @@
               />
             </n-form-item>
 
+            <n-divider title-placement="left">发信限制</n-divider>
             <n-form-item label="最小发送间隔" path="smsMinInterval">
               <n-input-number
                 :show-button="false"
@@ -184,8 +184,6 @@
   function formSubmit() {
     formRef.value.validate((errors) => {
       if (!errors) {
-        console.log('formValue.value:' + JSON.stringify(formValue.value));
-
         updateConfig({ group: group.value, list: formValue.value })
           .then((res) => {
             console.log('res:' + JSON.stringify(res));

web/src/views/system/config/UploadSetting.vue

@@ -3,7 +3,6 @@
     <n-spin :show="show" description="正在获取配置...">
       <n-grid cols="2 s:2 m:2 l:2 xl:2 2xl:2" responsive="screen">
         <n-grid-item>
-          <n-divider title-placement="left">通用配置</n-divider>
           <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
             <n-form-item label="默认驱动" path="uploadDrive">
               <n-select
@@ -13,6 +12,7 @@
               />
             </n-form-item>
 
+            <n-divider title-placement="left">上传限制</n-divider>
             <n-form-item label="图片大小限制" path="uploadImageSize">
               <n-input-number
                 :show-button="false"

web/src/views/system/config/system.vue

@@ -21,9 +21,9 @@
           <ThemeSetting v-if="type === 2" />
           <RevealSetting v-if="type === 3" />
           <EmailSetting v-if="type === 4" />
+          <SmsSetting v-if="type === 5" />
           <UploadSetting v-if="type === 8" />
           <GeoSetting v-if="type === 9" />
-          <SmsSetting v-if="type === 10" />
         </n-card>
       </n-grid-item>
     </n-grid>
@@ -59,11 +59,11 @@
       desc: '系统邮件设置',
       key: 4,
     },
-    // {
-    //   name: '客服设置',
-    //   desc: '系统客服设置',
-    //   key: 5,
-    // },
+    {
+      name: '短信配置',
+      desc: '短信验证码平台',
+      key: 5,
+    },
     // {
     //   name: '下游配置',
     //   desc: '默认设置和权限屏蔽',
@@ -84,11 +84,6 @@
       desc: '配置地理位置工具',
       key: 9,
     },
-    {
-      name: '短信配置',
-      desc: '短信验证码平台',
-      key: 10,
-    },
   ];
   export default defineComponent({
     components: {

web/src/views/test/edit.vue

@@ -99,6 +99,10 @@
           <n-select v-model:value="params.channel" :options="options.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="options.sys_user_hobby" />
         </n-form-item>
@@ -155,6 +159,7 @@
   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';
   const emit = defineEmits(['reloadTable', 'updateShowModal']);
 
   interface Props {

web/src/views/test/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="普通表格演示">
+        这里提供了一些常用的普通表格组件的用法和表单组件的例子，你可能会需要
+      </n-card>
+    </div>
     <n-card :bordered="false" class="proCard">
-      <div class="n-layout-page-header">
-        <n-card :bordered="false" title="普通表格演示">
-          这里提供了一些常用的普通表格组件的用法和表单组件的例子
-        </n-card>
-      </div>
       <BasicForm
         @register="register"
         @submit="reloadTable"
@@ -106,7 +106,6 @@
           {
             label: '编辑',
             onClick: handleEdit.bind(null, record),
-            // auth: ['basic_list'],
           },
           {
             label: '禁用',

web/src/views/test/model.ts

@@ -37,6 +37,7 @@ export interface State {
   email: string;
   mobile: string;
   channel: number;
+  cityId: number;
   hobby: string[] | null;
   pid: number;
   level: number;
@@ -75,6 +76,7 @@ export const defaultState = {
   email: '',
   mobile: '',
   channel: 0,
+  cityId: 0,
   hobby: null,
   pid: 0,
   level: 1,