Merge remote-tracking branch 'yudao/dev' into dev

apps/web-antd/src/api/mp/account/index.ts

@@ -16,12 +16,6 @@ export namespace MpAccountApi {
     remark?: string;
     createTime?: Date;
   }
-
-  // TODO @dylan：这个直接使用 Account，简化一点；
-  export interface AccountSimple {
-    id: number;
-    name: string;
-  }
 }
 
 /** 查询公众号账号列表 */
@@ -41,7 +35,7 @@ export function getAccount(id: number) {
 
 /** 查询公众号账号列表 */
 export function getSimpleAccountList() {
-  return requestClient.get<MpAccountApi.AccountSimple[]>(
+  return requestClient.get<MpAccountApi.Account[]>(
     '/mp/account/list-all-simple',
   );
 }

apps/web-antd/src/api/mp/message/index.ts

@@ -9,13 +9,29 @@ export namespace MpMessageApi {
   export interface Message {
     id?: number;
     accountId: number;
-    type: MessageType;
+    type: MessageType | string;
     openid: string;
     content: string;
     mediaId?: string;
     status: number;
     remark?: string;
     createTime?: Date;
+    sendFrom?: number;
+    userId?: number;
+    event?: string;
+    eventKey?: string;
+    mediaUrl?: string;
+    recognition?: string;
+    url?: string;
+    title?: string;
+    label?: string;
+    locationX?: number;
+    locationY?: number;
+    thumbMediaUrl?: string;
+    musicUrl?: string;
+    hqMusicUrl?: string;
+    description?: string;
+    articles?: any[];
   }
 
   /** 发送消息请求 */

apps/web-antd/src/components/form-create/components/use-api-select.tsx

@@ -145,8 +145,8 @@ export function useApiSelect(option: ApiSelectProps) {
             }
 
             return {
-              label: label,
+              label,
-              value: value,
+              value,
             };
           });
           return;

apps/web-antd/src/components/form-create/helpers.ts

@@ -202,10 +202,10 @@ export async function useFormCreateDesigner(designer: Ref) {
         value: 'id',
         options: [
           { label: '部门编号', value: 'id' },
-          { label: '部门名称', value: 'name' }
+          { label: '部门名称', value: 'name' },
-        ]
+        ],
-      }
+      },
-    ]
+    ],
   });
   const dictSelectRule = useDictSelectRule();
   const apiSelectRule0 = useSelectRule({

apps/web-antd/src/components/select-modal/index.ts

@@ -1,3 +1,2 @@
-// TODO @xingyu：【待讨论】是不是把 user select 放到 user 目录的 components 下，dept select 放到 dept 目录的 components 下
 export { default as DeptSelectModal } from './dept-select-modal.vue';
 export { default as UserSelectModal } from './user-select-modal.vue';

apps/web-antd/src/components/select-modal/user-select-modal.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 // TODO @芋艿：是否有更好的组织形式？！
-// TODO @xingyu：你感觉，这个放到每个 system、infra 模块下，然后新建一个 components，表示每个模块，有一些共享的组件？然后，全局只放通用的（无业务含义的），可以哇？
 import type { Key } from 'ant-design-vue/es/table/interface';
 
 import type { SystemDeptApi } from '#/api/system/dept';
@@ -33,24 +32,23 @@ interface DeptTreeNode {
   name: string;
 }
 
+interface Props {
+  cancelText?: string;
+  confirmText?: string;
+  multiple?: boolean;
+  title?: string;
+  value?: number[];
+}
+
 defineOptions({ name: 'UserSelectModal' });
 
-withDefaults(
+withDefaults(defineProps<Props>(), {
-  defineProps<{
+  title: '选择用户',
-    cancelText?: string;
+  multiple: true,
-    confirmText?: string;
+  value: () => [],
-    multiple?: boolean;
+  confirmText: '确定',
-    title?: string;
+  cancelText: '取消',
-    value?: number[];
+});
-  }>(),
-  {
-    title: '选择用户',
-    multiple: true,
-    value: () => [],
-    confirmText: '确定',
-    cancelText: '取消',
-  },
-);
 
 const emit = defineEmits<{
   cancel: [];

apps/web-antd/src/locales/langs/en-US/page.json

@@ -34,7 +34,10 @@
   "mp": {
     "upload": {
       "invalidFormat": "Invalid {0} format!",
-      "maxSize": "{0} size cannot exceed {1}M!"
+      "maxSize": "{0} size cannot exceed {1}M!",
+      "image": "Image",
+      "video": "Video",
+      "voice": "Voice"
     }
   }
 }

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -34,7 +34,10 @@
   "mp": {
     "upload": {
       "invalidFormat": "上传{0}格式不对!",
-      "maxSize": "上传{0}大小不能超过{1}M!"
+      "maxSize": "上传{0}大小不能超过{1}M!",
+      "image": "图片",
+      "video": "视频",
+      "voice": "语音"
     }
   }
 }

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js

@@ -1,4 +1,4 @@
-export default (key, name, type) => {
+function defaultEmpty(key, name, type) {
   if (!type) type = 'camunda';
   const TYPE_TARGET = {
     activiti: 'http://activiti.org/bpmn',
@@ -21,4 +21,6 @@ export default (key, name, type) => {
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn2:definitions>`;
-};
+}
+
+export default defaultEmpty;

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js

@@ -1,5 +1,3 @@
-'use strict';
-
 import extension from './extension';
 
 export default {

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-template-curly-in-string */
 /**
  * This is a sample file that should be replaced with the actual translation.
  *

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable no-unused-vars -->
 <script lang="ts" setup>
 import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
 

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable unused-imports/no-unused-vars -->
 <script lang="ts" setup>
 import { inject, nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
@@ -65,6 +66,7 @@ const bpmnElement = ref<any>(null);
 const multiLoopInstance = ref<any>(null);
 declare global {
   interface Window {
+    // @ts-ignore
     bpmnInstances?: () => any;
   }
 }

apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js

@@ -1,5 +1,8 @@
-const hljs = require('highlight.js/lib/core');
+import hljs from 'highlight.js/lib/core';
-hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
+import jsonLanguage from 'highlight.js/lib/languages/json';
-hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
+import xmlLanguage from 'highlight.js/lib/languages/xml';
 
-module.exports = hljs;
+hljs.registerLanguage('xml', xmlLanguage);
+hljs.registerLanguage('json', jsonLanguage);
+
+export default hljs;

apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js

@@ -34,6 +34,7 @@ export default {
   },
   unbind(el) {
     document.removeEventListener('touchstart', el[ctx].documentHandler); // 解绑
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete el[ctx];
   },
 };

apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js

@@ -33,13 +33,13 @@ function xml2json(xml) {
     }
     return obj;
   } catch (error) {
-    console.log(error.message);
+    console.warn(error.message);
   }
 }
 
 function xmlObj2json(xml) {
   const xmlObj = xmlStr2XmlObj(xml);
-  console.log(xmlObj);
+  console.warn(xmlObj);
   let jsonObj = {};
   if (xmlObj.childNodes.length > 0) {
     jsonObj = xml2json(xmlObj);

apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue

@@ -135,8 +135,8 @@ function handleDeviceChange(_: any) {
 
 /**
  * 处理属性变化事件
- * @param propertyInfo.config 属性配置
+ * @param propertyInfo.config - 属性配置
- * @param propertyInfo.type 属性类型
+ * @param propertyInfo.type - 属性类型
  */
 function handlePropertyChange(propertyInfo: { config: any; type: string }) {
   propertyType.value = propertyInfo.type;

apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue

@@ -50,8 +50,8 @@ interface JsonParamsConfig {
 interface Props {
   modelValue: string;
   config: JsonParamsConfig;
-  type: JsonParamsInputType;
+  type?: JsonParamsInputType;
-  placeholder: string;
+  placeholder?: string;
 }
 
 interface Emits {

apps/web-antd/src/views/mall/product/comment/data.ts

@@ -25,7 +25,6 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
-    // TODO @puhui999：商品的选择：上面 spuId 可以选择了，下面的 skuId 打开后，没商品。
     {
       fieldName: 'skuId',
       label: '商品规格',

apps/web-antd/src/views/mall/product/comment/modules/form.vue

@@ -101,23 +101,13 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       // 重置表单数据
-      // TODO @puhui999：105 到 108 的代码，不需要的呀？（可以测试下）
-      formData.value = {
-        descriptionScores: 5,
-        benefitScores: 5,
-      } as Partial<MallCommentApi.Comment>;
       selectedSku.value = undefined;
       return;
     }
     // 加载数据
     const data = modalApi.getData<MallCommentApi.Comment>();
     if (!data || !data.id) {
-      // TODO @puhui999：115 到 121 的代码，不需要的呀？（可以测试下）
       // 新建模式：重置表单
-      formData.value = {
-        descriptionScores: 5,
-        benefitScores: 5,
-      } as Partial<MallCommentApi.Comment>;
       selectedSku.value = undefined;
       await formApi.setValues({ spuId: undefined, skuId: undefined });
       return;

apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue

@@ -1,17 +1,16 @@
 <!-- SKU 选择弹窗组件 -->
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { ref } from 'vue';
 
-import { fenToYuan } from '@vben/utils';
-
 import { Modal } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 
+import { useSkuGridColumns } from './spu-select-data';
+
 interface SpuData {
   spuId: number;
 }
@@ -23,52 +22,14 @@ const emit = defineEmits<{
 const visible = ref(false);
 const spuId = ref<number>();
 
-/** 表格列配置 */
-const gridColumns: VxeGridProps['columns'] = [
-  {
-    type: 'radio',
-    width: 55,
-  },
-  {
-    field: 'picUrl',
-    title: '图片',
-    width: 100,
-    align: 'center',
-    cellRender: {
-      name: 'CellImage',
-    },
-  },
-  {
-    field: 'properties',
-    title: '规格',
-    minWidth: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return (
-        cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
-        '-'
-      );
-    },
-  },
-  {
-    field: 'price',
-    title: '销售价(元)',
-    width: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return fenToYuan(cellValue);
-    },
-  },
-];
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: gridColumns,
+    columns: useSkuGridColumns(),
     height: 400,
     border: true,
-    showOverflow: true,
     radioConfig: {
       reserve: true,
+      highlight: true,
     },
     rowConfig: {
       keyField: 'id',
@@ -77,22 +38,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     pagerConfig: {
       enabled: false,
     },
-    proxyConfig: {
-      // TODO @puhui999：看看注释的部分，后续要不要删除
-      // autoLoad: false, // 禁用自动加载，手动触发查询
-      ajax: {
-        query: async () => {
-          if (!spuId.value) {
-            return { list: [], total: 0 };
-          }
-          const spu = await getSpu(spuId.value);
-          return {
-            list: spu.skus || [],
-            total: spu.skus?.length || 0,
-          };
-        },
-      },
-    },
   },
   gridEvents: {
     radioChange: () => {
@@ -111,7 +56,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /** 关闭弹窗 */
 function closeModal() {
   visible.value = false;
-  gridApi.grid.clearRadioRow();
   spuId.value = undefined;
 }
 
@@ -122,12 +66,14 @@ async function openModal(data?: SpuData) {
   }
   spuId.value = data.spuId;
   visible.value = true;
-  // TODO @puhui999：看看注释的部分，后续要不要删除
+  // 注意：useVbenVxeGrid 关闭分页(pagerConfig.enabled=false)后，proxyConfig.ajax.query 的结果不会传递到 vxe-table
-  // // 等待弹窗和 Grid 组件完全渲染后再查询数据
+  // 需要手动调用 reloadData 设置表格数据
-  // await nextTick();
+  if (!spuId.value) {
-  // if (gridApi.grid) {
+    gridApi.grid?.reloadData([]);
-  //   await gridApi.query();
+    return;
-  // }
+  }
+  const spu = await getSpu(spuId.value);
+  gridApi.grid?.reloadData(spu.skus || []);
 }
 
 /** 对外暴露的方法 */

apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue

@@ -1,7 +1,5 @@
 <script generic="T extends MallSpuApi.Spu" lang="ts" setup>
-import type { RuleConfig, SpuProperty } from './type';
+import type { MallSpuApi, RuleConfig, SpuProperty } from './type';
-
-import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { ref, watch } from 'vue';
 
@@ -45,13 +43,7 @@ const expandRowKeys = ref<string[]>([]); // 控制展开行需要设置 row-key
 function getSkuConfigs(extendedAttribute: string) {
   // 验证 SKU 数据（如果有 ref 的话）
   if (skuListRef.value) {
-    // TODO @puhui999：这里有个 linter 错误；
+    skuListRef.value.validateSku();
-    try {
-      skuListRef.value.validateSku();
-    } catch (error) {
-      // 验证失败时抛出错误
-      throw error;
-    }
   }
   const seckillProducts: unknown[] = [];
   spuPropertyList.value.forEach((item) => {

apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts

@@ -1,11 +1,14 @@
 import type { Ref } from 'vue';
 
 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallCategoryApi } from '#/api/mall/product/category';
 
 import { computed } from 'vue';
 
+import { fenToYuan } from '@vben/utils';
+
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -118,3 +121,49 @@ export function useGridColumns(
     },
   ] as VxeTableGridOptions['columns'];
 }
+
+/** SKU 列表的字段 */
+export function useSkuGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      type: 'radio',
+      width: 55,
+    },
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '图片',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'properties',
+      title: '规格',
+      minWidth: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return (
+          cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
+          '-'
+        );
+      },
+    },
+    {
+      field: 'price',
+      title: '销售价(元)',
+      width: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return fenToYuan(cellValue);
+      },
+    },
+  ];
+}

apps/web-antd/src/views/mall/product/spu/components/spu-select.vue

@@ -190,13 +190,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
       isHover: true,
     },
-    // TODO @puhui999：貌似直接 { trigger: 'row', reserve: true } 就可以了？不会影响 radio 的哈。（可以测试下。）
+    expandConfig: {
-    expandConfig: props.isSelectSku
+      trigger: 'row',
-      ? {
+      reserve: true,
-          trigger: 'row',
+    },
-          reserve: true,
-        }
-      : undefined,
     proxyConfig: {
       ajax: {
         async query({ page }: any, formValues: any) {

apps/web-antd/src/views/mall/product/spu/components/type.ts

@@ -26,3 +26,7 @@ export interface SpuProperty<T> {
   spuDetail: T;
   spuId: number;
 }
+
+// Re-export for use in generic constraint
+
+export { type MallSpuApi } from '#/api/mall/product/spu';

apps/web-antd/src/views/mall/promotion/coupon/components/select.vue

@@ -2,7 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { useVbenModal } from '@vben/common-ui';
+import { ref } from 'vue';
+
+import { Modal } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
@@ -15,7 +17,11 @@ const props = defineProps<{
   takeType?: number; // 领取方式
 }>();
 
-const emit = defineEmits(['success']);
+const emit = defineEmits<{
+  (e: 'change', v: MallCouponTemplateApi.CouponTemplate[]): void;
+}>();
+
+const visible = ref(false); // 弹窗显示状态
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
@@ -48,19 +54,42 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
 });
 
-const [Modal, modalApi] = useVbenModal({
+/** 打开弹窗 */
-  async onConfirm() {
+async function open() {
-    // 从 gridApi 获取选中的记录
+  visible.value = true;
-    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+  // 重置查询条件并重新加载数据，与老组件行为一致
-      []) as MallCouponTemplateApi.CouponTemplate[];
+  await gridApi.query();
-    await modalApi.close();
+}
-    emit('success', selectedRecords);
+
-  },
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  // 从 gridApi 获取选中的记录
+  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+    []) as MallCouponTemplateApi.CouponTemplate[];
+  emit('change', selectedRecords);
+  closeModal();
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open,
 });
 </script>
 
 <template>
-  <Modal title="选择优惠券" class="w-2/3">
+  <Modal
+    v-model:open="visible"
+    title="选择优惠券"
+    width="65%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
     <Grid />
   </Modal>
 </template>

apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue

@@ -139,13 +139,13 @@ async function getUserData() {
 </script>
 
 <template>
-  <div class="bg-background flex h-full flex-auto flex-col">
+  <div class="flex h-full flex-auto flex-col bg-background">
     <div
       class="mt-4 flex h-12 items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-1 before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
     >
       <div
         :class="{
-          'before:border-primary before:border-b-2': tabActivation('会员信息'),
+          'before:border-b-2 before:border-primary': tabActivation('会员信息'),
         }"
         class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
         @click="handleClick('会员信息')"
@@ -154,7 +154,7 @@ async function getUserData() {
       </div>
       <div
         :class="{
-          'before:border-primary before:border-b-2': tabActivation('最近浏览'),
+          'before:border-b-2 before:border-primary': tabActivation('最近浏览'),
         }"
         class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
         @click="handleClick('最近浏览')"
@@ -163,7 +163,7 @@ async function getUserData() {
       </div>
       <div
         :class="{
-          'before:border-primary before:border-b-2': tabActivation('交易订单'),
+          'before:border-b-2 before:border-primary': tabActivation('交易订单'),
         }"
         class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
         @click="handleClick('交易订单')"

apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue

@@ -180,26 +180,16 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      // 重置表单数据（新增和编辑模式都需要）
       formData.value = undefined;
       spuList.value = [];
       spuPropertyList.value = [];
       return;
     }
-    // 重置表单数据（新增和编辑模式都需要）
+
-    // TODO @puhui999：这里的重置，是不是在 183 到 185 已经处理了呀。
-    formData.value = undefined;
-    spuList.value = [];
-    spuPropertyList.value = [];
     // 加载数据
     const data = modalApi.getData<MallPointActivityApi.PointActivity>();
     if (!data || !data.id) {
-      // 新增模式：重置表单字段
-      // TODO @puhui999：197 到 201 这块的 setValues 的设置，是不是必要哈。可以看看。
-      await formApi.setValues({
-        sort: 0,
-        remark: '',
-        spuId: undefined,
-      });
       return;
     }
     // 加载数据

apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts

@@ -166,26 +166,86 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
     },
-    // TODO @puhui999：选择完删除后，自动就退出了 modal；
     {
       fieldName: 'productSpuIds',
       label: '选择商品',
       component: 'Input',
       dependencies: {
-        triggerFields: ['productScope'],
+        triggerFields: ['productScope', 'productScopeValues'],
         show: (values) => {
           return values.productScope === PromotionProductScopeEnum.SPU.scope;
         },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productSpuIds
+          if (
+            values.productScope === PromotionProductScopeEnum.SPU.scope &&
+            values.productScopeValues
+          ) {
+            form.setFieldValue('productSpuIds', values.productScopeValues);
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'productCategoryIds',
+      label: '选择分类',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productScopeValues'],
+        show: (values) => {
+          return (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope
+          );
+        },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productCategoryIds
+          if (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope &&
+            values.productScopeValues
+          ) {
+            const categoryIds = values.productScopeValues;
+            // 单选时使用数组不能反显，取第一个元素
+            form.setFieldValue(
+              'productCategoryIds',
+              Array.isArray(categoryIds) && categoryIds.length > 0
+                ? categoryIds[0]
+                : categoryIds,
+            );
+          }
+        },
       },
       rules: 'required',
     },
-    // TODO @puhui999：这里还有个分类；
     {
       fieldName: 'rules',
       label: '优惠设置',
       component: 'Input',
       formItemClass: 'items-start',
-      // TODO @puhui999：这里可能要加个 rules: 'required',
+      rules: 'required',
+    },
+    {
+      fieldName: 'productScopeValues', // 隐藏字段：用于自动同步 productScopeValues
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productSpuIds', 'productCategoryIds'],
+        show: () => false,
+        trigger(values, form) {
+          switch (values.productScope) {
+            case PromotionProductScopeEnum.CATEGORY.scope: {
+              const categoryIds = Array.isArray(values.productCategoryIds)
+                ? values.productCategoryIds
+                : [values.productCategoryIds];
+              form.setFieldValue('productScopeValues', categoryIds);
+              break;
+            }
+            case PromotionProductScopeEnum.SPU.scope: {
+              form.setFieldValue('productScopeValues', values.productSpuIds);
+              break;
+            }
+          }
+        },
+      },
     },
   ];
 }

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import {
@@ -19,6 +19,7 @@ import {
   updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
 import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
@@ -26,10 +27,8 @@ import RewardRule from './reward-rule.vue';
 
 const emit = defineEmits(['success']);
 
-const formData = ref<MallRewardActivityApi.RewardActivity>({
+const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
-  // TODO @puhui999：这里的 conditionType、productScope 是不是可以删除呀。因为 data.ts 已经搞了 defaultValue；
   conditionType: PromotionConditionTypeEnum.PRICE.type,
-  productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
 });
 
@@ -39,8 +38,6 @@ const getTitle = computed(() => {
     : $t('ui.actionTitle.create', ['满减送']);
 });
 
-const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
-
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -53,7 +50,6 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-// TODO @芋艿：这里需要在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -63,8 +59,9 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     try {
-      const data = await formApi.getValues();
+      const values = await formApi.getValues();
-      rewardRuleRef.value?.setRuleCoupon();
+      // 合并表单值和 formData（含 id、productSpuIds、productCategoryIds 等）
+      const data = { ...formData.value, ...values };
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
         data.startTime = data.startAndEndTime[0];
         data.endTime = data.startAndEndTime[1];
@@ -76,9 +73,24 @@ const [Modal, modalApi] = useVbenModal({
           item.limit = convertToInteger(item.limit || 0);
         }
       });
-      setProductScopeValues(data);
+      // 设置 productScopeValues
+      switch (data.productScope) {
+        case PromotionProductScopeEnum.CATEGORY.scope: {
+          const categoryIds = data.productCategoryIds;
+          data.productScopeValues = Array.isArray(categoryIds)
+            ? categoryIds
+            : categoryIds
+              ? [categoryIds]
+              : [];
+          break;
+        }
+        case PromotionProductScopeEnum.SPU.scope: {
+          data.productScopeValues = data.productSpuIds;
+          break;
+        }
+      }
 
-      await (formData.value?.id
+      await (data.id
         ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
         : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
       // 关闭并提示
@@ -91,11 +103,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = {
+      formData.value = {};
-        conditionType: PromotionConditionTypeEnum.PRICE.type,
-        productScope: PromotionProductScopeEnum.ALL.scope,
-        rules: [],
-      };
       return;
     }
     // 加载数据
@@ -116,56 +124,11 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = result;
       // 设置到 values
       await formApi.setValues(result);
-
-      await getProductScope();
     } finally {
       modalApi.unlock();
     }
   },
 });
-
-async function getProductScope() {
-  switch (formData.value.productScope) {
-    case PromotionProductScopeEnum.CATEGORY.scope: {
-      await nextTick();
-      let productCategoryIds = formData.value.productScopeValues as any;
-      if (
-        Array.isArray(productCategoryIds) &&
-        productCategoryIds.length === 1
-      ) {
-        productCategoryIds = productCategoryIds[0];
-      }
-      formData.value.productCategoryIds = productCategoryIds;
-      break;
-    }
-    case PromotionProductScopeEnum.SPU.scope: {
-      formData.value.productSpuIds = formData.value.productScopeValues;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-
-// TODO @puhui999：/Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 可以类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 productScopeValues（微信交流）
-function setProductScopeValues(data: any) {
-  switch (formData.value.productScope) {
-    case PromotionProductScopeEnum.CATEGORY.scope: {
-      data.productScopeValues = Array.isArray(formData.value.productCategoryIds)
-        ? formData.value.productCategoryIds
-        : [formData.value.productCategoryIds];
-      break;
-    }
-    case PromotionProductScopeEnum.SPU.scope: {
-      data.productScopeValues = formData.value.productSpuIds;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
 </script>
 
 <template>
@@ -173,13 +136,16 @@ function setProductScopeValues(data: any) {
     <Form class="mx-6">
       <!-- 自定义插槽：优惠规则 -->
       <template #rules>
-        <RewardRule ref="rewardRuleRef" v-model="formData" />
+        <RewardRule v-model="formData" />
       </template>
-
       <!-- 自定义插槽：商品选择 -->
       <template #productSpuIds>
         <SpuShowcase v-model="formData.productSpuIds" />
       </template>
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" multiple />
+      </template>
     </Form>
   </Modal>
 </template>

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue

@@ -2,7 +2,7 @@
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 
 import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';
 
@@ -32,15 +32,14 @@ interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
 const rewardRule = useVModel(props, 'modelValue', emits);
 const list = ref<GiveCoupon[]>([]); // 选择的优惠劵列表
 
-// TODO @puhui999：1）命名上，可以弱化 coupon；例如说 selectRef；原因是，本身就是 coupon-select.vue；2）相关的处理的方法，最好都带 handle，如果是处理事件；例如说 deleteCoupon 改成 handleDelete；
 /** 选择优惠券 */
-const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
+const selectRef = ref<InstanceType<typeof CouponSelect>>();
-function selectCoupon() {
+function handleSelect() {
-  couponSelectRef.value?.open();
+  selectRef.value?.open();
 }
 
 /** 选择优惠券后的回调 */
-function handleCouponChange(val: any[]) {
+function handleChange(val: any[]) {
   for (const item of val) {
     if (list.value.some((v) => v.id === item.id)) {
       continue;
@@ -50,13 +49,18 @@ function handleCouponChange(val: any[]) {
 }
 
 /** 删除优惠券 */
-function deleteCoupon(index: number) {
+function handleDelete(index: number) {
   list.value.splice(index, 1);
 }
 
 /** 初始化赠送的优惠券列表 */
 async function initGiveCouponList() {
-  if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
+  // 校验优惠券存在
+  if (
+    !rewardRule.value ||
+    !rewardRule.value.giveCouponTemplateCounts ||
+    Object.keys(rewardRule.value.giveCouponTemplateCounts).length === 0
+  ) {
     return;
   }
   const tempLateIds = Object.keys(
@@ -74,19 +78,22 @@ async function initGiveCouponList() {
   });
 }
 
-/** 设置赠送的优惠券 */
+/** 监听 list 变化，自动同步到 rewardRule */
-// TODO @puhui999：这个有办法不提供，就是不用 form.vue 去调用，更加透明~
+watch(
-function setGiveCouponList() {
+  list,
-  if (!rewardRule.value) {
+  (val) => {
-    return;
+    if (!rewardRule.value) {
-  }
+      return;
-  rewardRule.value.giveCouponTemplateCounts = {};
+    }
-  list.value.forEach((rule) => {
+    // 核心：清空 giveCouponTemplateCounts，解决删除不生效的问题
-    rewardRule.value.giveCouponTemplateCounts![rule.id] = rule.giveCount!;
+    rewardRule.value.giveCouponTemplateCounts = {};
-  });
+    // 设置优惠券和其数量的对应
-}
+    val.forEach((item) => {
-
+      rewardRule.value.giveCouponTemplateCounts![item.id] = item.giveCount!;
-defineExpose({ setGiveCouponList });
+    });
+  },
+  { deep: true },
+);
 
 onMounted(async () => {
   await nextTick();
@@ -96,7 +103,7 @@ onMounted(async () => {
 
 <template>
   <div class="w-full">
-    <Button type="link" class="ml-2" @click="selectCoupon">添加优惠劵</Button>
+    <Button type="link" class="pl-0" @click="handleSelect">添加优惠券</Button>
 
     <div
       v-for="(item, index) in list"
@@ -130,15 +137,15 @@ onMounted(async () => {
           type="number"
         />
         <span>张</span>
-        <Button type="link" danger @click="deleteCoupon(index)">删除</Button>
+        <Button type="link" danger @click="handleDelete(index)">删除</Button>
       </div>
     </div>
 
     <!-- 优惠券选择 -->
     <CouponSelect
-      ref="couponSelectRef"
+      ref="selectRef"
       :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
-      @change="handleCouponChange"
+      @change="handleChange"
     />
   </div>
 </template>

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { PromotionConditionTypeEnum } from '@vben/constants';
 
@@ -23,7 +23,7 @@ import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
 defineOptions({ name: 'RewardRule' });
 
 const props = defineProps<{
-  modelValue: MallRewardActivityApi.RewardActivity;
+  modelValue: Partial<MallRewardActivityApi.RewardActivity>;
 }>();
 
 const emits = defineEmits<{
@@ -31,8 +31,6 @@ const emits = defineEmits<{
 }>();
 
 const formData = useVModel(props, 'modelValue', emits);
-const rewardRuleCouponSelectRef =
-  ref<InstanceType<typeof RewardRuleCouponSelect>[]>();
 
 const isPriceCondition = computed(() => {
   return (
@@ -55,19 +53,8 @@ function handleAdd() {
 
 /** 处理删除 */
 function handleDelete(ruleIndex: number) {
-  formData.value.rules.splice(ruleIndex, 1);
+  formData.value.rules?.splice(ruleIndex, 1);
 }
-
-function setRuleCoupon() {
-  if (!rewardRuleCouponSelectRef.value) {
-    return;
-  }
-  rewardRuleCouponSelectRef.value.forEach((item: any) =>
-    item.setGiveCouponList(),
-  );
-}
-
-defineExpose({ setRuleCoupon });
 </script>
 
 <template>
@@ -99,7 +86,6 @@ defineExpose({ setRuleCoupon });
                 :min="0"
                 :precision="2"
                 :step="0.1"
-                :controls="false"
                 class="!w-40"
                 placeholder="请输入金额"
               />
@@ -114,59 +100,52 @@ defineExpose({ setRuleCoupon });
               <span>{{ isPriceCondition ? '元' : '件' }}</span>
             </div>
           </FormItem>
-
           <!-- 优惠内容 -->
-          <!-- TODO @puhui999：这里样式，让 AI 调整下；1）类似优惠劵折行啦；2）整体要左移点； -->
+          <FormItem
-          <FormItem label="优惠内容" :label-col="{ span: 4 }">
+            label="优惠内容"
-            <div class="flex flex-col gap-4">
+            :label-col="{ span: 4 }"
-              <!-- 订单金额优惠 -->
+            :wrapper-col="{ span: 20 }"
-              <div class="flex flex-col gap-2">
+          >
-                <div class="font-medium">订单金额优惠</div>
+            <div class="flex flex-col gap-2">
-                <div class="ml-4 flex items-center gap-2">
+              <span>订单金额优惠</span>
-                  <span>减</span>
-                  <InputNumber
-                    v-model:value="rule.discountPrice"
-                    :min="0"
-                    :precision="2"
-                    :step="0.1"
-                    :controls="false"
-                    class="!w-40"
-                    placeholder="请输入金额"
-                  />
-                  <span>元</span>
-                </div>
-              </div>
-
-              <!-- 包邮 -->
               <div class="flex items-center gap-2">
-                <span class="font-medium">包邮：</span>
+                <span>减</span>
+                <InputNumber
+                  v-model:value="rule.discountPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="!w-32"
+                  placeholder="请输入金额"
+                />
+                <span>元</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span>包邮:</span>
                 <Switch
                   v-model:checked="rule.freeDelivery"
                   checked-children="是"
                   un-checked-children="否"
                 />
               </div>
-
+              <div>
-              <!-- 送积分 -->
+                <div>送积分:</div>
-              <div class="flex items-center gap-2">
+                <div class="mt-2 flex items-center gap-2">
-                <span class="font-medium">送积分：</span>
+                  <span>送</span>
-                <span>送</span>
+                  <InputNumber
-                <InputNumber
+                    v-model:value="rule.point"
-                  v-model:value="rule.point"
+                    :min="0"
-                  :min="0"
+                    class="!w-32"
-                  :controls="false"
+                    placeholder="请输入积分"
-                  class="!w-40"
+                  />
-                  placeholder="请输入积分"
+                  <span>积分</span>
-                />
+                </div>
-                <span>积分</span>
               </div>
-
+              <div class="flex items-center gap-2">
-              <!-- 送优惠券 -->
+                <span class="w-20">送优惠券:</span>
-              <div class="flex items-start gap-2">
-                <span class="font-medium">送优惠券：</span>
                 <RewardRuleCouponSelect
-                  ref="rewardRuleCouponSelectRef"
                   :model-value="rule"
+                  @update:model-value="(val) => (formData.rules![index] = val)"
                 />
               </div>
             </div>

apps/web-antd/src/views/mp/components/index.ts

@@ -1,7 +1,7 @@
 export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
 export { default as WxLocation } from './wx-location/wx-location.vue';
 export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
-export { default as WxMsg } from './wx-msg/msg.vue';
+export { default as WxMsg } from './wx-msg/wx-msg.vue';
 export { default as WxMusic } from './wx-music/wx-music.vue';
 export { default as WxNews } from './wx-news/wx-news.vue';
 export { default as WxReply } from './wx-reply/wx-reply.vue';

apps/web-antd/src/views/mp/components/wx-location/wx-location.vue

@@ -1,33 +1,57 @@
 <script lang="ts" setup>
 import type { WxLocationProps } from './types';
 
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Col, Row } from 'ant-design-vue';
+import { Col, message, Row } from 'ant-design-vue';
+
+import { getTradeConfig } from '#/api/mall/trade/config';
 
 /** 微信消息 - 定位 */
 defineOptions({ name: 'WxLocation' });
 
-// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈；参考 apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
 const props = withDefaults(defineProps<WxLocationProps>(), {
-  qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+  qqMapKey: '', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
 });
 
+const fetchedQqMapKey = ref('');
+const resolvedQqMapKey = computed(
+  () => props.qqMapKey || fetchedQqMapKey.value || '',
+);
+
 const mapUrl = computed(() => {
   return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
 });
 
 const mapImageUrl = computed(() => {
-  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
+  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${resolvedQqMapKey.value}&size=250*180`;
+});
+
+async function fetchQqMapKey() {
+  try {
+    const data = await getTradeConfig();
+    fetchedQqMapKey.value = data.tencentLbsKey ?? '';
+    if (!fetchedQqMapKey.value) {
+      message.warning('请先配置腾讯位置服务密钥');
+    }
+  } catch {
+    message.error('获取腾讯位置服务密钥失败');
+  }
+}
+
+onMounted(async () => {
+  if (!props.qqMapKey) {
+    await fetchQqMapKey();
+  }
 });
 
 defineExpose({
   locationX: props.locationX,
   locationY: props.locationY,
   label: props.label,
-  qqMapKey: props.qqMapKey,
+  qqMapKey: resolvedQqMapKey,
 });
 </script>
 

apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
 
 import { reactive, ref, watch } from 'vue';
 
@@ -42,84 +43,85 @@ const queryParams = reactive({
   pageSize: 10,
 }); // 查询参数
 
-const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
+// TODO @dylan：可以把【点击上传】3 个 tab 的按钮，放到右侧的 toolbar 一起，和刷新按钮放在一行；
-  // TODO @dylan：any 有 linter 告警；看看别的模块哈
+const voiceGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
-  {
+  [
-    field: 'mediaId',
+    {
-    title: '编号',
+      field: 'mediaId',
-    align: 'center',
+      title: '编号',
-    minWidth: 160,
+      align: 'center',
-  },
+      minWidth: 160,
-  {
+    },
-    field: 'name',
+    {
-    title: '文件名',
+      field: 'name',
-    minWidth: 200,
+      title: '文件名',
-  },
+      minWidth: 200,
-  {
+    },
-    field: 'voice',
+    {
-    title: '语音',
+      field: 'voice',
-    minWidth: 200,
+      title: '语音',
-    align: 'center',
+      minWidth: 200,
-    slots: { default: 'voice' },
+      align: 'center',
-  },
+      slots: { default: 'voice' },
-  {
+    },
-    field: 'createTime',
+    {
-    title: '上传时间',
+      field: 'createTime',
-    width: 180,
+      title: '上传时间',
-    formatter: 'formatDateTime',
+      width: 180,
-  },
+      formatter: 'formatDateTime',
-  {
+    },
-    title: '操作',
+    {
-    width: 140,
+      title: '操作',
-    fixed: 'right',
+      width: 140,
-    align: 'center',
+      fixed: 'right',
-    slots: { default: 'actions' },
+      align: 'center',
-  },
+      slots: { default: 'actions' },
-];
+    },
+  ];
 
-const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
+const videoGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
-  // TODO @dylan：any 有 linter 告警；看看别的模块哈
+  [
-  {
+    {
-    field: 'mediaId',
+      field: 'mediaId',
-    title: '编号',
+      title: '编号',
-    minWidth: 160,
+      minWidth: 160,
-  },
+    },
-  {
+    {
-    field: 'name',
+      field: 'name',
-    title: '文件名',
+      title: '文件名',
-    minWidth: 200,
+      minWidth: 200,
-  },
+    },
-  {
+    {
-    field: 'title',
+      field: 'title',
-    title: '标题',
+      title: '标题',
-    minWidth: 200,
+      minWidth: 200,
-  },
+    },
-  {
+    {
-    field: 'introduction',
+      field: 'introduction',
-    title: '介绍',
+      title: '介绍',
-    minWidth: 220,
+      minWidth: 220,
-  },
+    },
-  {
+    {
-    field: 'video',
+      field: 'video',
-    title: '视频',
+      title: '视频',
-    minWidth: 220,
+      minWidth: 220,
-    align: 'center',
+      align: 'center',
-    slots: { default: 'video' },
+      slots: { default: 'video' },
-  },
+    },
-  {
+    {
-    field: 'createTime',
+      field: 'createTime',
-    title: '上传时间',
+      title: '上传时间',
-    width: 180,
+      width: 180,
-    formatter: 'formatDateTime',
+      formatter: 'formatDateTime',
-  },
+    },
-  {
+    {
-    title: '操作',
+      title: '操作',
-    width: 140,
+      width: 140,
-    fixed: 'right',
+      fixed: 'right',
-    align: 'center',
+      align: 'center',
-    slots: { default: 'actions' },
+      slots: { default: 'actions' },
-  },
+    },
-];
+  ];
 
 const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
   gridOptions: {
@@ -135,11 +137,9 @@ const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
       ajax: {
         query: async ({ page }, { accountId }) => {
           const finalAccountId = accountId ?? queryParams.accountId;
-          // TODO @dylan 这里简化成 !finalAccountId 是不是可以哈。
+          if (!finalAccountId) {
-          if (finalAccountId === undefined || finalAccountId === null) {
             return { list: [], total: 0 };
           }
-          // TODO @dylan：不要带 MpMaterialApi；
           return await getMaterialPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -156,7 +156,7 @@ const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: true,
     },
-  } as VxeTableGridOptions<any>, // TODO @dylan：这里有 linter 告警；看看别的模块哈
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
 
 const [VideoGrid, videoGridApi] = useVbenVxeGrid({
@@ -192,7 +192,7 @@ const [VideoGrid, videoGridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: true,
     },
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
 
 function selectMaterialFun(item: any) {
@@ -288,7 +288,6 @@ watch(
 <template>
   <Page :bordered="false" class="pb-8">
     <!-- 类型：image -->
-    <!-- TODO @dylan：看看图片的小卡片，是不是可以整齐点，类似微信公众号，图片的高度是一致的哈；https://mp.weixin.qq.com/cgi-bin/filepage?type=2&begin=0&count=12&token=1646383362&lang=zh_CN -->
     <template v-if="props.type === 'image'">
       <Spin :spinning="loading">
         <div
@@ -297,9 +296,13 @@ watch(
           <div
             v-for="item in list"
             :key="item.mediaId"
-            class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+            class="mb-2.5 h-72 break-inside-avoid border border-[#eaeaea] p-2.5"
           >
-            <img class="w-full" :src="item.url" alt="素材图片" />
+            <img
+              class="h-48 w-full object-contain"
+              :src="item.url"
+              alt="素材图片"
+            />
             <p class="truncate text-center text-xs leading-[30px]">
               {{ item.name }}
             </p>

apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue

@@ -46,13 +46,15 @@ function getNickname(sendFrom: number) {
       </div>
       <div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
         <span
-          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
+          v-if="item.sendFrom === SendFrom.MpBot"
+          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[transparent]"
           :class="{
-            '-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
+            '-right-4 left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
               item.sendFrom === SendFrom.MpBot,
           }"
         ></span>
         <span
+          v-if="item.sendFrom === SendFrom.User"
           class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
           :class="{
             '-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':

apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue

@@ -168,7 +168,7 @@ async function scrollToBottom() {
 
     <div class="p-2.5">
       <Spin :spinning="sendLoading">
-        <WxReplySelect ref="replySelectRef" v-model="reply" />
+        <WxReply ref="replySelectRef" v-model="reply" />
         <Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
           发送(S)
         </Button>

apps/web-antd/src/views/mp/components/wx-news/wx-news.vue

@@ -17,18 +17,20 @@ defineExpose({
 </script>
 
 <template>
-  <div class="news-home">
+  <div class="mx-auto flex w-full flex-col gap-[10px] bg-white">
-    <div v-for="(article, index) in articles" :key="index" class="news-div">
+    <div v-for="(article, index) in articles" :key="index">
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
-        <div class="news-main">
+        <div class="mx-auto w-full">
-          <div class="news-content">
+          <div class="relative w-full bg-[#acadae]">
             <img
               :src="article.picUrl"
               :preview="false"
-              class="material-img flex w-[100px] items-center justify-center"
+              class="w-[100px] object-cover"
             />
-            <div class="news-content-title">
+            <div
+              class="absolute bottom-0 left-0 ml-[10px] inline-block w-[98%] whitespace-normal p-[1%] text-base text-white"
+            >
               <span>{{ article.title }}</span>
             </div>
           </div>
@@ -36,10 +38,10 @@ defineExpose({
       </a>
       <!-- 二条/三条等等 -->
       <a v-else :href="article.url" target="_blank">
-        <div class="news-main-item">
+        <div class="bg-white">
-          <div class="news-content-item">
+          <div class="relative box-border p-[10px]">
-            <div class="news-content-item-img">
+            <div class="flex items-center">
-              <div class="news-content-item-title">{{ article.title }}</div>
+              <div class="flex-1 text-sm">{{ article.title }}</div>
 
               <img
                 :src="article.picUrl"
@@ -53,66 +55,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-.news-home {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-main {
-  width: 100%;
-  margin: auto;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  box-sizing: unset !important;
-  display: inline-block;
-  width: 98%;
-  padding: 1%;
-  margin-left: 10px;
-  font-size: 16px;
-  color: #fff;
-  white-space: normal;
-}
-
-.news-main-item {
-  background-color: #fff;
-}
-
-.news-content-item {
-  position: relative;
-  box-sizing: border-box;
-  padding: 10px;
-}
-
-.news-content-item-title {
-  flex: 1;
-  font-size: 14px;
-}
-
-.news-content-item-img {
-  display: flex;
-  align-items: center;
-}
-
-.material-img {
-  width: auto;
-  object-fit: cover;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue

@@ -104,10 +104,18 @@ function selectMaterial(item: any) {
 <template>
   <div>
     <!-- 情况一：已经选择好素材、或者上传好图片 -->
-    <div v-if="reply.url" class="select-item">
+    <div
-      <img class="material-img" :src="reply.url" alt="图片素材" />
+      v-if="reply.url"
-      <p v-if="reply.name" class="item-name">{{ reply.name }}</p>
+      class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
-      <Row class="ope-row" justify="center">
+    >
+      <img class="w-full" :src="reply.url" alt="图片素材" />
+      <p
+        v-if="reply.name"
+        class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
+      >
+        {{ reply.name }}
+      </p>
+      <Row class="pt-[10px] text-center" justify="center">
         <Button danger shape="circle" @click="onDelete">
           <template #icon>
             <IconifyIcon icon="lucide:trash-2" />
@@ -119,7 +127,10 @@ function selectMaterial(item: any) {
     <!-- 情况二：未做完上述操作 -->
     <Row v-else class="text-center" align="middle">
       <!-- 选择素材 -->
-      <Col :span="12" class="col-select">
+      <Col
+        :span="12"
+        class="flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
+      >
         <Button type="primary" @click="showDialog = true">
           素材库选择
           <template #icon>
@@ -142,7 +153,10 @@ function selectMaterial(item: any) {
       </Col>
 
       <!-- 文件上传 -->
-      <Col :span="12" class="col-add">
+      <Col
+        :span="12"
+        class="float-right flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
+      >
         <Upload
           :custom-request="customRequest"
           :multiple="true"
@@ -158,65 +172,10 @@ function selectMaterial(item: any) {
             </template>
           </Button>
         </Upload>
-        <div class="upload-tip">
+        <div class="mt-2 text-center text-xs leading-[18px] text-[#666]">
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
         </div>
       </Col>
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  // width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.material-img {
-  width: 100%;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-
-.col-select,
-.col-add {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select {
-  width: 49.5%;
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-}
-
-.upload-tip {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 18px;
-  color: #666;
-  text-align: center;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue

@@ -31,10 +31,8 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-const accessStore = useAccessStore();
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
-
 const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -94,6 +92,7 @@ async function customRequest(options: any) {
   }
 }
 
+/** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
   reply.value.thumbMediaId = item.mediaId;
@@ -105,13 +104,15 @@ function selectMaterial(item: any) {
   <div>
     <Row align="middle" justify="center">
       <Col :span="6">
-        <div class="thumb-container">
+        <div class="flex flex-col items-center gap-2">
-          <div class="thumb-preview">
+          <div
+            class="flex h-[100px] w-[100px] items-center justify-center rounded border border-[#d9d9d9]"
+          >
             <img
               v-if="reply.thumbMediaUrl"
               :src="reply.thumbMediaUrl"
               alt="音乐封面"
-              class="thumb-img"
+              class="h-full w-full object-cover"
             />
             <IconifyIcon
               v-else
@@ -120,7 +121,7 @@ function selectMaterial(item: any) {
               class="text-gray-400"
             />
           </div>
-          <div class="thumb-actions">
+          <div class="flex items-center justify-center">
             <Upload
               :custom-request="customRequest"
               :multiple="true"
@@ -136,10 +137,9 @@ function selectMaterial(item: any) {
             </Button>
           </div>
         </div>
-        <!-- TODO @dylan：这里应该不是图片哇？ -->
         <Modal
           v-model:open="showDialog"
-          title="选择图片"
+          title="选择封面图"
           :width="1200"
           :footer="null"
           destroy-on-close
@@ -152,8 +152,7 @@ function selectMaterial(item: any) {
         </Modal>
       </Col>
       <Col :span="18">
-        <!-- TODO @dylan：input 两个之间的间距可以调整下。现在和左侧的图片，距离有点远了。 -->
+        <div class="flex flex-col gap-4">
-        <div class="input-group">
           <Input
             :value="reply.title || undefined"
             placeholder="请输入标题"
@@ -183,41 +182,3 @@ function selectMaterial(item: any) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.thumb-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-}
-
-.thumb-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100px;
-  height: 100px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumb-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue

@@ -45,10 +45,10 @@ function onDelete() {
     <Row>
       <div
         v-if="reply.articles && reply.articles.length > 0"
-        class="select-item"
+        class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
       >
         <WxNews :articles="reply.articles" />
-        <Col class="ope-row">
+        <Col class="pt-[10px] text-center">
           <Button danger shape="circle" @click="onDelete">
             <template #icon>
               <IconifyIcon icon="lucide:trash-2" />
@@ -91,18 +91,3 @@ function onDelete() {
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue

@@ -130,7 +130,7 @@ function selectMaterial(item: any) {
         />
       </Col>
       <Col :span="24">
-        <Row class="ope-row" justify="center">
+        <Row class="w-full pt-[10px] text-center" justify="center">
           <WxVideoPlayer v-if="reply.url" :url="reply.url" />
         </Row>
       </Col>
@@ -182,12 +182,3 @@ function selectMaterial(item: any) {
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.ope-row {
-  width: 100%;
-  padding-top: 10px;
-  text-align: center;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue

@@ -105,12 +105,19 @@ function selectMaterial(item: Reply) {
 
 <template>
   <div>
-    <div v-if="reply.url" class="select-item">
+    <div
-      <p class="item-name">{{ reply.name }}</p>
+      v-if="reply.url"
-      <Row class="ope-row" justify="center">
+      class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
+    >
+      <p
+        class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
+      >
+        {{ reply.name }}
+      </p>
+      <Row class="w-full pt-[10px] text-center" justify="center">
         <WxVoicePlayer :url="reply.url" />
       </Row>
-      <Row class="ope-row" justify="center">
+      <Row class="w-full pt-[10px] text-center" justify="center">
         <Button danger shape="circle" @click="onDelete">
           <template #icon>
             <IconifyIcon icon="lucide:trash-2" />
@@ -121,7 +128,10 @@ function selectMaterial(item: Reply) {
 
     <Row v-else class="text-center">
       <!-- 选择素材 -->
-      <Col :span="12" class="col-select">
+      <Col
+        :span="12"
+        class="flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
+      >
         <Button type="primary" @click="showDialog = true">
           素材库选择
           <template #icon>
@@ -144,7 +154,10 @@ function selectMaterial(item: Reply) {
       </Col>
 
       <!-- 文件上传 -->
-      <Col :span="12" class="col-add">
+      <Col
+        :span="12"
+        class="float-right flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
+      >
         <Upload
           :custom-request="customRequest"
           :multiple="true"
@@ -160,61 +173,10 @@ function selectMaterial(item: Reply) {
             </template>
           </Button>
         </Upload>
-        <div class="upload-tip">
+        <div class="mt-2 text-center text-xs leading-[18px] text-[#666]">
           格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
         </div>
       </Col>
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.ope-row {
-  width: 100%;
-  padding-top: 10px;
-  text-align: center;
-}
-
-.col-select,
-.col-add {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select {
-  width: 49.5%;
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-}
-
-.upload-tip {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 18px;
-  color: #666;
-  text-align: center;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue

@@ -181,85 +181,3 @@ defineExpose({
     </Tabs.TabPane>
   </Tabs>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.select-item2 {
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-
-.input-margin-bottom {
-  margin-bottom: 2%;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.el-form-item__content {
-  line-height: unset !important;
-}
-
-.col-select {
-  width: 49.5%;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select2 {
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.avatar-uploader-icon {
-  width: 100px !important;
-  height: 100px !important;
-  font-size: 28px;
-  line-height: 100px !important;
-  color: #8c939d;
-  text-align: center;
-  border: 1px solid #d9d9d9;
-}
-
-.material-img {
-  width: 100%;
-}
-
-.thumb-div {
-  display: inline-block;
-  text-align: center;
-}
-
-.item-infos {
-  width: 30%;
-  margin: auto;
-}
-</style>

apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue

@@ -63,11 +63,13 @@ function amrStop() {
   playing.value = false;
   amr.value.stop();
 }
-// TODO 芋艿：下面样式有点问题
 </script>
 
 <template>
-  <div class="wx-voice-div cursor-pointer" @click="playVoice">
+  <div
+    class="flex min-h-[50px] min-w-[120px] cursor-pointer flex-col items-center justify-center rounded-[10px] bg-[#eaeaea] p-[8px_12px]"
+    @click="playVoice"
+  >
     <div class="flex items-center">
       <IconifyIcon
         v-if="playing !== true"
@@ -75,7 +77,7 @@ function amrStop() {
         :size="32"
       />
       <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
-      <span v-if="duration" class="amr-duration">{{ duration }} 秒</span>
+      <span v-if="duration" class="ml-2 text-xs">{{ duration }} 秒</span>
     </div>
     <div v-if="content" class="mt-2">
       <Tag color="success">语音识别</Tag>
@@ -83,23 +85,3 @@ function amrStop() {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.wx-voice-div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: 120px;
-  min-height: 50px;
-  padding: 8px 12px;
-  background-color: #eaeaea;
-  border-radius: 10px;
-}
-
-.amr-duration {
-  margin-left: 8px;
-  font-size: 12px;
-}
-</style>

apps/web-antd/src/views/mp/freePublish/data.ts

@@ -6,7 +6,7 @@ import { formatDateTime } from '@vben/utils';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
-let accountList: MpAccountApi.AccountSimple[] = [];
+let accountList: MpAccountApi.Account[] = [];
 getSimpleAccountList().then((data) => (accountList = data));
 
 /** 搜索表单配置 */

apps/web-antd/src/views/mp/hooks/useUpload.ts

@@ -12,7 +12,7 @@ export enum UploadType {
 interface UploadTypeConfig {
   allowTypes: string[];
   maxSizeMB: number;
-  name: string;
+  i18nKey: string;
 }
 
 export interface UploadRawFile {
@@ -31,12 +31,12 @@ const UPLOAD_CONFIGS: Record<UploadType, UploadTypeConfig> = {
       'image/jpg',
     ],
     maxSizeMB: 2,
-    name: '图片',
+    i18nKey: 'mp.upload.image',
   },
   [UploadType.Video]: {
     allowTypes: ['video/mp4'],
     maxSizeMB: 10,
-    name: '视频',
+    i18nKey: 'mp.upload.video',
   },
   [UploadType.Voice]: {
     allowTypes: [
@@ -47,7 +47,7 @@ const UPLOAD_CONFIGS: Record<UploadType, UploadTypeConfig> = {
       'audio/amr',
     ],
     maxSizeMB: 2,
-    name: '语音',
+    i18nKey: 'mp.upload.voice',
   },
 };
 
@@ -57,15 +57,16 @@ export const useBeforeUpload = (type: UploadType, maxSizeMB?: number) => {
     const finalMaxSize = maxSizeMB ?? config.maxSizeMB;
 
     // 格式不正确
-    // TODO @dylan：貌似没国际化；
     if (!config.allowTypes.includes(rawFile.type)) {
-      message.error($t('mp.upload.invalidFormat', [config.name]));
+      const typeName = $t(config.i18nKey);
+      message.error($t('mp.upload.invalidFormat', [typeName]));
       return false;
     }
 
     // 大小不正确
     if (rawFile.size / 1024 / 1024 > finalMaxSize) {
-      message.error($t('mp.upload.maxSize', [config.name, finalMaxSize]));
+      const typeName = $t(config.i18nKey);
+      message.error($t('mp.upload.maxSize', [typeName, finalMaxSize]));
       return false;
     }
 

apps/web-antd/src/views/mp/material/components/ImageTable.vue

@@ -1,90 +0,0 @@
-<script lang="ts" setup>
-import { useAccess } from '@vben/access';
-import { IconifyIcon } from '@vben/icons';
-
-import { Button, Spin } from 'ant-design-vue';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-const props = defineProps<{
-  list: any[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const { hasAccessByCodes } = useAccess();
-</script>
-
-<template>
-  <Spin :spinning="props.loading">
-    <div class="waterfall">
-      <div v-for="item in props.list" :key="item.id" class="waterfall-item">
-        <a :href="item.url" target="_blank">
-          <!-- TODO @dylan：要不用 Image 组件？ -->
-          <img :src="item.url" class="material-img" />
-          <div class="item-name">{{ item.name }}</div>
-        </a>
-        <div class="flex justify-center">
-          <Button
-            v-if="hasAccessByCodes(['mp:material:delete'])"
-            danger
-            shape="circle"
-            type="primary"
-            @click="emit('delete', item.id)"
-          >
-            <template #icon>
-              <IconifyIcon icon="lucide:trash-2" />
-            </template>
-          </Button>
-        </div>
-      </div>
-    </div>
-  </Spin>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-@media (width >= 992px) and (width <= 1300px) {
-  .waterfall {
-    column-count: 3;
-  }
-}
-
-@media (width >= 768px) and (width <= 991px) {
-  .waterfall {
-    column-count: 2;
-  }
-}
-
-@media (width <= 767px) {
-  .waterfall {
-    column-count: 1;
-  }
-}
-
-.waterfall {
-  column-gap: 10px;
-  width: 100%;
-  margin-top: 10px;
-  column-count: 5;
-}
-
-.waterfall-item {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #eaeaea;
-  break-inside: avoid;
-}
-
-.material-img {
-  width: 100%;
-}
-
-.item-name {
-  line-height: 30px;
-}
-</style>

apps/web-antd/src/views/mp/material/components/VideoTable.vue

@@ -1,144 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { watch } from 'vue';
-
-import { useAccess } from '@vben/access';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate2, openWindow } from '@vben/utils';
-
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxVideoPlayer } from '#/views/mp/components';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-const props = defineProps<{
-  list: any[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const { hasAccessByCodes } = useAccess();
-
-// TODO @dylan：这里有个告警哈；
-// TODO @dylan：放到 data.ts 里；
-const columns: VxeTableGridOptions<any>['columns'] = [
-  {
-    field: 'mediaId',
-    title: '编号',
-    align: 'center',
-    width: 160,
-  },
-  {
-    field: 'name',
-    title: '文件名',
-    align: 'center',
-    minWidth: 200,
-  },
-  {
-    field: 'title',
-    title: '标题',
-    align: 'center',
-    minWidth: 200,
-  },
-  {
-    field: 'introduction',
-    title: '介绍',
-    align: 'center',
-    minWidth: 220,
-  },
-  // TODO @dylan：视频的样式，有点奇怪。
-  {
-    field: 'video',
-    title: '视频',
-    align: 'center',
-    width: 220,
-    slots: { default: 'video' },
-  },
-  {
-    field: 'createTime',
-    title: '上传时间',
-    align: 'center',
-    width: 180,
-    slots: { default: 'createTime' },
-  },
-  {
-    field: 'actions',
-    title: '操作',
-    align: 'center',
-    fixed: 'right',
-    width: 180,
-    slots: { default: 'actions' },
-  },
-];
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    border: true,
-    columns,
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
-});
-
-watch(
-  () => props.list,
-  (list: any[]) => {
-    const data = Array.isArray(list) ? list : [];
-    if (gridApi.grid?.loadData) {
-      gridApi.grid.loadData(data);
-    } else {
-      gridApi.setGridOptions({ data });
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.loading,
-  (loading: boolean) => {
-    gridApi.setLoading(loading);
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <Grid class="mt-4">
-    <template #video="{ row }">
-      <WxVideoPlayer v-if="row.url" :url="row.url" />
-    </template>
-    <!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
-    <template #createTime="{ row }">
-      {{ formatDate2(row.createTime) }}
-    </template>
-    <!-- TODO @dylan：用 tableaction 哈：yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/index.vue -->
-    <template #actions="{ row }">
-      <Button type="link" @click="openWindow(row.url)">
-        <IconifyIcon icon="lucide:download" />
-        下载
-      </Button>
-      <Button
-        v-if="hasAccessByCodes(['mp:material:delete'])"
-        danger
-        type="link"
-        @click="emit('delete', row.id)"
-      >
-        <IconifyIcon icon="lucide:trash-2" />
-        删除
-      </Button>
-    </template>
-  </Grid>
-</template>

apps/web-antd/src/views/mp/material/components/VoiceTable.vue

@@ -1,133 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { watch } from 'vue';
-
-import { useAccess } from '@vben/access';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate2, openWindow } from '@vben/utils';
-
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxVoicePlayer } from '#/views/mp/components';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
-
-const props = defineProps<{
-  list: any[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const { hasAccessByCodes } = useAccess();
-
-// TODO @dylan：这里有个告警哈；
-// TODO @dylan：放到 data.ts 里；
-const columns: VxeTableGridOptions<any>['columns'] = [
-  {
-    field: 'mediaId',
-    title: '编号',
-    align: 'center',
-    width: 160,
-  },
-  {
-    field: 'name',
-    title: '文件名',
-    align: 'center',
-    minWidth: 200,
-  },
-  // TODO @dylan：语音的样式，有点奇怪。
-  {
-    field: 'voice',
-    title: '语音',
-    align: 'center',
-    width: 220,
-    slots: { default: 'voice' },
-  },
-  {
-    field: 'createTime',
-    title: '上传时间',
-    align: 'center',
-    width: 180,
-    slots: { default: 'createTime' },
-  },
-  {
-    field: 'actions',
-    title: '操作',
-    align: 'center',
-    fixed: 'right',
-    width: 160,
-    slots: { default: 'actions' },
-  },
-];
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    border: true,
-    columns,
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
-});
-
-watch(
-  () => props.list,
-  (list: any[]) => {
-    const data = Array.isArray(list) ? list : [];
-    if (gridApi.grid?.loadData) {
-      gridApi.grid.loadData(data);
-    } else {
-      gridApi.setGridOptions({ data });
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.loading,
-  (loading: boolean) => {
-    gridApi.setLoading(loading);
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <Grid class="mt-4">
-    <template #voice="{ row }">
-      <WxVoicePlayer v-if="row.url" :url="row.url" />
-    </template>
-    <!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
-    <template #createTime="{ row }">
-      {{ formatDate2(row.createTime) }}
-    </template>
-    <template #actions="{ row }">
-      <Button type="link" @click="openWindow(row.url)">
-        <IconifyIcon icon="lucide:download" />
-        下载
-      </Button>
-      <Button
-        v-if="hasAccessByCodes(['mp:material:delete'])"
-        danger
-        type="link"
-        @click="emit('delete', row.id)"
-      >
-        <IconifyIcon icon="lucide:trash-2" />
-        删除
-      </Button>
-    </template>
-  </Grid>
-</template>

apps/web-antd/src/views/mp/material/components/data.ts

@@ -0,0 +1,134 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+// TODO @dylan：看看 ele 要迁移一个么？
+/** 视频表格列配置 */
+export function useVideoGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      align: 'center',
+      minWidth: 200,
+    },
+    {
+      field: 'introduction',
+      title: '介绍',
+      align: 'center',
+      minWidth: 220,
+    },
+    {
+      field: 'video',
+      title: '视频',
+      align: 'center',
+      width: 220,
+      slots: { default: 'video' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      width: 180,
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 语音表格列配置 */
+export function useVoiceGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      minWidth: 100,
+    },
+    {
+      field: 'voice',
+      title: '语音',
+      align: 'center',
+      width: 220,
+      slots: { default: 'voice' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      width: 160,
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 图片表格列配置 */
+export function useImageGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 400,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      width: 200,
+    },
+    {
+      field: 'url',
+      title: '图片',
+      align: 'center',
+      width: 200,
+      slots: { default: 'image' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-antd/src/views/mp/material/components/image-table.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { nextTick, onMounted, watch } from 'vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { useImageGridColumns } from './data';
+
+const props = defineProps<{
+  list: MpMaterialApi.Material[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const columns = useImageGridColumns();
+
+const [Grid, gridApi] = useVbenVxeGrid<MpMaterialApi.Material>({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      height: 220,
+    },
+    showOverflow: 'tooltip',
+  },
+});
+
+function updateGridData(data: MpMaterialApi.Material[]) {
+  if (gridApi.grid?.loadData) {
+    gridApi.grid.loadData(data);
+  } else {
+    gridApi.setGridOptions({ data });
+  }
+}
+
+watch(
+  () => props.list,
+  async (list: MpMaterialApi.Material[]) => {
+    const data = Array.isArray(list) ? list : [];
+    await nextTick();
+    updateGridData(data);
+  },
+  { flush: 'post' },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(loading);
+  },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  await nextTick();
+  updateGridData(Array.isArray(props.list) ? props.list : []);
+  gridApi.setLoading(props.loading);
+});
+</script>
+
+<template>
+  <Grid class="image-table-grid mt-4 pb-0">
+    <template #image="{ row }">
+      <div class="flex items-center justify-center" style="height: 192px">
+        <img
+          :src="row.url"
+          class="object-contain"
+          style="display: block; max-width: 100%; max-height: 192px"
+        />
+      </div>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['mp:material:delete'],
+            popConfirm: {
+              title: '确定要删除该图片吗？',
+              confirm: () => emit('delete', row.id!),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

apps/web-antd/src/views/mp/material/components/video-table.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { watch } from 'vue';
+
+import { openWindow } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxVideoPlayer } from '#/views/mp/components';
+
+import { useVideoGridColumns } from './data';
+
+const props = defineProps<{
+  list: MpMaterialApi.Material[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const columns = useVideoGridColumns();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+watch(
+  () => props.list,
+  (list: MpMaterialApi.Material[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(loading);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mt-4">
+    <template #video="{ row }">
+      <WxVideoPlayer v-if="row.url" :url="row.url" />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '下载',
+            type: 'link',
+            icon: ACTION_ICON.DOWNLOAD,
+            onClick: () => openWindow(row.url),
+          },
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['mp:material:delete'],
+            popConfirm: {
+              title: '确定要删除该视频吗？',
+              confirm: () => emit('delete', row.id!),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

apps/web-antd/src/views/mp/material/components/voice-table.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { watch } from 'vue';
+
+import { openWindow } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxVoicePlayer } from '#/views/mp/components';
+
+import { useVoiceGridColumns } from './data';
+// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
+
+const props = defineProps<{
+  list: MpMaterialApi.Material[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const columns = useVoiceGridColumns();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+watch(
+  () => props.list,
+  (list: MpMaterialApi.Material[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(loading);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mt-4">
+    <template #voice="{ row }">
+      <WxVoicePlayer v-if="row.url" :url="row.url" />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '下载',
+            type: 'link',
+            icon: ACTION_ICON.DOWNLOAD,
+            onClick: () => openWindow(row.url),
+          },
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['mp:material:delete'],
+            popConfirm: {
+              title: '确定要删除该语音吗？',
+              confirm: () => emit('delete', row.id!),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

apps/web-antd/src/views/mp/material/index.vue

@@ -2,29 +2,20 @@
 import { provide, reactive, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
-import { DocAlert, Page } from '@vben/common-ui';
+import { confirm, DocAlert, Page } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-// TODO @dlyan、可以先 antd 迁移完，在搞 ele；避免搞两遍；
+import { Button, Card, Form, message, Pagination, Tabs } from 'ant-design-vue';
-import {
-  Button,
-  Card,
-  Form,
-  message,
-  Modal,
-  Pagination,
-  Tabs,
-} from 'ant-design-vue';
 
 import { deletePermanentMaterial, getMaterialPage } from '#/api/mp/material';
 import { WxAccountSelect } from '#/views/mp/components';
 
-import ImageTable from './components/ImageTable.vue';
+import ImageTable from './components/image-table.vue';
 import { UploadType } from './components/upload';
 import UploadFile from './components/UploadFile.vue';
 import UploadVideo from './components/UploadVideo.vue';
-import VideoTable from './components/VideoTable.vue';
+import VideoTable from './components/video-table.vue';
-import VoiceTable from './components/VoiceTable.vue';
+import VoiceTable from './components/voice-table.vue';
 
 defineOptions({ name: 'MpMaterial' });
 
@@ -86,16 +77,18 @@ function onTabChange() {
 
 /** 处理删除操作 */
 async function handleDelete(id: number) {
-  // TODO @dylan：参考别的模块的  dylan 哈；
+  await confirm('此操作将永久删除该文件, 是否继续?');
-  Modal.confirm({
+  const hideLoading = message.loading({
-    content: '此操作将永久删除该文件, 是否继续?',
+    content: '正在删除...',
-    title: '提示',
+    duration: 0,
-    async onOk() {
-      await deletePermanentMaterial(id);
-      message.success('删除成功');
-      await getList();
-    },
   });
+  try {
+    await deletePermanentMaterial(id);
+    message.success('删除成功');
+    await getList();
+  } finally {
+    hideLoading();
+  }
 }
 </script>
 
@@ -114,11 +107,9 @@ async function handleDelete(id: number) {
         </Form>
       </Card>
 
-      <Card :bordered="false" class="mt-4 h-[88%]">
+      <Card :bordered="false" class="mt-4 h-auto">
         <Tabs v-model:active-key="type" @change="onTabChange">
           <!-- tab 1：图片  -->
-          <!-- TODO @dylan：要不这里，也改成 grid 视图；然后操作按钮，都改成右上角； -->
-          <!-- TODO @dylan：图片展示时，就编号、文件名、图片、上传时间、操作； -->
           <Tabs.TabPane :key="UploadType.Image">
             <template #tab>
               <span class="flex items-center">

apps/web-antd/src/views/mp/message/index.vue

@@ -22,7 +22,7 @@ import {
 import { getMessagePage } from '#/api/mp/message';
 import { WxAccountSelect, WxMsg } from '#/views/mp/components';
 
-import MessageTable from './MessageTable.vue';
+import MessageTable from './message-table.vue';
 
 defineOptions({ name: 'MpMessage' });
 
@@ -30,7 +30,6 @@ const loading = ref(false);
 const total = ref(0); // 数据的总页数
 const list = ref<any[]>([]); // 当前页的列表数据
 
-// TODO @dylan：是不是参考别的模块简化哈。尽量使用 Grid
 const queryParams = reactive<{
   accountId: number;
   createTime: [Dayjs, Dayjs] | undefined;
@@ -189,7 +188,6 @@ function showTotal(total: number) {
       :footer="null"
       destroy-on-close
     >
-      <!-- TODO @dlayn：这里有告警； -->
       <WxMsg :user-id="messageBoxUserId" />
     </Modal>
   </Page>

apps/web-antd/src/views/mp/message/message-table.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMessageApi } from '#/api/mp/message';
 
 import { onMounted, watch } from 'vue';
 
@@ -8,6 +9,7 @@ import { formatDate2 } from '@vben/utils';
 
 import { Button, Image, Tag } from 'ant-design-vue';
 
+// TODO @dylan：看看 ele 要迁移一个么？
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   WxLocation,
@@ -17,11 +19,9 @@ import {
   WxVoicePlayer,
 } from '#/views/mp/components';
 
-// TODO @dylan：vue 组件名小写 + 中划线
-
 const props = withDefaults(
   defineProps<{
-    list?: any[];
+    list?: MpMessageApi.Message[];
     loading?: boolean;
   }>(),
   {
@@ -36,8 +36,7 @@ const emit = defineEmits<{
   (e: 'send', userId: number): void;
 }>();
 
-const columns: VxeTableGridOptions<any>['columns'] = [
+const columns: VxeTableGridOptions<MpMessageApi.Message>['columns'] = [
-  // TODO @dylan：any 有 linter 告警；看看别的模块哈
   {
     field: 'createTime',
     title: '发送时间',
@@ -81,7 +80,7 @@ const columns: VxeTableGridOptions<any>['columns'] = [
   },
 ];
 
-const [Grid, gridApi] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid<MpMessageApi.Message>({
   gridOptions: {
     border: true,
     columns,
@@ -94,14 +93,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>,
+  },
 });
 
-function normalizeList(list?: any[]) {
+function normalizeList(list?: MpMessageApi.Message[]) {
   return Array.isArray(list) ? list : [];
 }
 
-function updateGridData(data: any[]) {
+function updateGridData(data: MpMessageApi.Message[]) {
   if (gridApi.grid?.loadData) {
     gridApi.grid.loadData(data);
   } else {
@@ -134,7 +133,7 @@ onMounted(() => {
 <template>
   <Grid>
     <template #createTime="{ row }">
-      {{ formatDate2(row.createTime) }}
+      {{ row.createTime ? formatDate2(row.createTime) : '' }}
     </template>
 
     <template #sendFrom="{ row }">
@@ -143,15 +142,28 @@ onMounted(() => {
     </template>
 
     <template #content="{ row }">
-      <div v-if="row.type === MsgType.Event && row.event === 'subscribe'">
+      <div
+        v-if="
+          (row.type as string) === (MsgType.Event as string) &&
+          (row.event as string) === 'subscribe'
+        "
+      >
         <Tag color="success">关注</Tag>
       </div>
       <div
-        v-else-if="row.type === MsgType.Event && row.event === 'unsubscribe'"
+        v-else-if="
+          (row.type as string) === (MsgType.Event as string) &&
+          (row.event as string) === 'unsubscribe'
+        "
       >
         <Tag color="error">取消关注</Tag>
       </div>
-      <div v-else-if="row.type === MsgType.Event && row.event === 'CLICK'">
+      <div
+        v-else-if="
+          (row.type as string) === (MsgType.Event as string) &&
+          (row.event as string) === 'CLICK'
+        "
+      >
         <Tag>点击菜单</Tag>
         【{{ row.eventKey }}】
       </div>
@@ -201,7 +213,10 @@ onMounted(() => {
 
       <div v-else-if="row.type === MsgType.Text">{{ row.content }}</div>
       <div v-else-if="row.type === MsgType.Voice">
-        <WxVoicePlayer :url="row.mediaUrl" :content="row.recognition" />
+        <WxVoicePlayer
+          :url="row.mediaUrl || ''"
+          :content="row.recognition || ''"
+        />
       </div>
       <div v-else-if="row.type === MsgType.Image">
         <a :href="row.mediaUrl" target="_blank">
@@ -209,7 +224,7 @@ onMounted(() => {
         </a>
       </div>
       <div v-else-if="row.type === MsgType.Video || row.type === 'shortvideo'">
-        <WxVideoPlayer :url="row.mediaUrl" class="mt-2" />
+        <WxVideoPlayer :url="row.mediaUrl || ''" class="mt-2" />
       </div>
       <div v-else-if="row.type === MsgType.Link">
         <Tag>链接</Tag>
@@ -218,16 +233,16 @@ onMounted(() => {
       </div>
       <div v-else-if="row.type === MsgType.Location">
         <WxLocation
-          :label="row.label"
+          :label="row.label || ''"
-          :location-y="row.locationY"
+          :location-y="row.locationY || 0"
-          :location-x="row.locationX"
+          :location-x="row.locationX || 0"
         />
       </div>
       <div v-else-if="row.type === MsgType.Music">
         <WxMusic
           :title="row.title"
           :description="row.description"
-          :thumb-media-url="row.thumbMediaUrl"
+          :thumb-media-url="row.thumbMediaUrl || ''"
           :music-url="row.musicUrl"
           :hq-music-url="row.hqMusicUrl"
         />
@@ -241,7 +256,7 @@ onMounted(() => {
     </template>
 
     <template #actions="{ row }">
-      <Button type="link" @click="emit('send', row.userId)"> 消息 </Button>
+      <Button type="link" @click="emit('send', row.userId || 0)"> 消息 </Button>
     </template>
   </Grid>
 </template>

apps/web-ele/src/api/mp/account/index.ts

@@ -16,12 +16,6 @@ export namespace MpAccountApi {
     remark?: string;
     createTime?: Date;
   }
-
-  // TODO @dylan：这个直接使用 Account，简化一点；
-  export interface AccountSimple {
-    id: number;
-    name: string;
-  }
 }
 
 /** 查询公众号账号列表 */
@@ -41,7 +35,7 @@ export function getAccount(id: number) {
 
 /** 查询公众号账号列表 */
 export function getSimpleAccountList() {
-  return requestClient.get<MpAccountApi.AccountSimple[]>(
+  return requestClient.get<MpAccountApi.Account[]>(
     '/mp/account/list-all-simple',
   );
 }

apps/web-ele/src/api/mp/message/index.ts

@@ -2,6 +2,7 @@ import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
+// TODO @dylan：这个类的代码，应该和对应的 antd 是一致的。调整下~看看相关的 vue 是不是也要调整掉。
 /** 消息类型枚举 */
 export enum MessageType {
   IMAGE = 'image', // 图片消息

apps/web-ele/src/components/form-create/components/use-api-select.tsx

@@ -145,8 +145,8 @@ export function useApiSelect(option: ApiSelectProps) {
             }
 
             return {
-              label: label,
+              label,
-              value: value,
+              value,
             };
           });
           return;

apps/web-ele/src/components/form-create/helpers.ts

@@ -202,10 +202,10 @@ export async function useFormCreateDesigner(designer: Ref) {
         value: 'id',
         options: [
           { label: '部门编号', value: 'id' },
-          { label: '部门名称', value: 'name' }
+          { label: '部门名称', value: 'name' },
-        ]
+        ],
-      }
+      },
-    ]
+    ],
   });
   const dictSelectRule = useDictSelectRule();
   const apiSelectRule0 = useSelectRule({

apps/web-ele/src/views/_core/profile/base-setting.vue

@@ -1,65 +1,102 @@
 <script setup lang="ts">
-import type { BasicOption } from '@vben/types';
+import type { Recordable } from '@vben/types';
 
 import type { VbenFormSchema } from '#/adapter/form';
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
-import { ProfileBaseSetting } from '@vben/common-ui';
+import { ProfileBaseSetting, z } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
-import { getUserInfoApi } from '#/api';
+import { ElMessage } from 'element-plus';
+
+import { updateUserProfile } from '#/api/system/user/profile';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();
 
 const profileBaseSettingRef = ref();
 
-const MOCK_ROLES_OPTIONS: BasicOption[] = [
-  {
-    label: '管理员',
-    value: 'super',
-  },
-  {
-    label: '用户',
-    value: 'user',
-  },
-  {
-    label: '测试',
-    value: 'test',
-  },
-];
-
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
-      fieldName: 'realName',
+      label: '用户昵称',
+      fieldName: 'nickname',
       component: 'Input',
-      label: '姓名',
-    },
-    {
-      fieldName: 'username',
-      component: 'Input',
-      label: '用户名',
-    },
-    {
-      fieldName: 'roles',
-      component: 'Select',
       componentProps: {
-        mode: 'tags',
+        placeholder: '请输入用户昵称',
-        options: MOCK_ROLES_OPTIONS,
       },
-      label: '角色',
+      rules: 'required',
     },
     {
-      fieldName: 'introduction',
+      label: '用户手机',
-      component: 'Textarea',
+      fieldName: 'mobile',
-      label: '个人简介',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户手机',
+      },
+      rules: z.string(),
+    },
+    {
+      label: '用户邮箱',
+      fieldName: 'email',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      label: '用户性别',
+      fieldName: 'sex',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
     },
   ];
 });
 
-onMounted(async () => {
+async function handleSubmit(values: Recordable<any>) {
-  const data = await getUserInfoApi();
+  try {
-  profileBaseSettingRef.value.getFormApi().setValues(data);
+    profileBaseSettingRef.value.getFormApi().setLoading(true);
-});
+    // 提交表单
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
+    // 关闭并提示
+    emit('success');
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  } catch (error) {
+    console.error(error);
+  } finally {
+    profileBaseSettingRef.value.getFormApi().setLoading(false);
+  }
+}
+
+/** 监听 profile 变化 */
+watch(
+  () => props.profile,
+  (newProfile) => {
+    if (newProfile) {
+      profileBaseSettingRef.value.getFormApi().setValues(newProfile);
+    }
+  },
+  { immediate: true },
+);
 </script>
 <template>
-  <ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
+  <ProfileBaseSetting
+    ref="profileBaseSettingRef"
+    :form-schema="formSchema"
+    @submit="handleSubmit"
+  />
 </template>

apps/web-ele/src/views/erp/stock/in/modules/item-form.vue

@@ -274,9 +274,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
+      <div class="mt-2 rounded border border-border bg-muted p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
+        <div class="flex justify-between text-sm text-muted-foreground">
-          <span class="text-foreground font-medium">合计：</span>
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/stock/move/modules/item-form.vue

@@ -294,9 +294,9 @@ onMounted(async () => {
     </template>
 
     <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
+      <div class="mt-2 rounded border border-border bg-muted p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
+        <div class="flex justify-between text-sm text-muted-foreground">
-          <span class="text-foreground font-medium">合计：</span>
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/erp/stock/out/modules/item-form.vue

@@ -273,8 +273,8 @@ onMounted(async () => {
 
     <template #bottom>
       <div class="mt-2 rounded border border-border bg-muted p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
+        <div class="flex justify-between text-sm text-muted-foreground">
-          <span class="text-foreground font-medium">合计：</span>
+          <span class="font-medium text-foreground">合计：</span>
           <div class="flex space-x-4">
             <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
             <span>

apps/web-ele/src/views/mp/components/index.ts

@@ -1,7 +1,7 @@
 export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
 export { default as WxLocation } from './wx-location/wx-location.vue';
 export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
-export { default as WxMsg } from './wx-msg/msg.vue';
+export { default as WxMsg } from './wx-msg/msg.vue'; // TODO @hw、@dylan：貌似和 antd 不同。antd 这里是 export { default as WxMsg } from './wx-msg/wx-msg.vue'; 看看哪个是对的
 export { default as WxMusic } from './wx-music/wx-music.vue';
 export { default as WxNews } from './wx-news/wx-news.vue';
 export { default as WxReply } from './wx-reply/wx-reply.vue';

apps/web-ele/src/views/mp/components/wx-location/wx-location.vue

@@ -10,9 +10,11 @@ import { ElCol, ElLink, ElMessage, ElRow } from 'element-plus';
 import { getTradeConfig } from '#/api/mall/trade/config';
 
 /** 微信消息 - 定位 */
-defineOptions({ name: 'Location' });
+defineOptions({ name: 'WxLocation' });
 
-const props = defineProps<WxLocationProps>();
+const props = withDefaults(defineProps<WxLocationProps>(), {
+  qqMapKey: '', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+});
 
 const fetchedQqMapKey = ref('');
 const resolvedQqMapKey = computed(

apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue

@@ -46,13 +46,15 @@ function getNickname(sendFrom: number) {
       </div>
       <div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
         <span
-          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
+          v-if="item.sendFrom === SendFrom.MpBot"
+          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[transparent]"
           :class="{
             '-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
               item.sendFrom === SendFrom.MpBot,
           }"
         ></span>
         <span
+          v-if="item.sendFrom === SendFrom.User"
           class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
           :class="{
             '-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':

apps/web-ele/src/views/mp/components/wx-news/wx-news.vue

@@ -18,7 +18,7 @@ defineExpose({
 
 <template>
   <div class="mx-auto flex w-full flex-col gap-[10px] bg-white">
-    <div v-for="(article, index) in articles" :key="index" class="news-div">
+    <div v-for="(article, index) in articles" :key="index">
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="mx-auto w-full">
@@ -26,11 +26,10 @@ defineExpose({
             <img
               :src="article.picUrl"
               :preview="false"
-              class="flex w-[100%] items-center justify-center object-cover"
+              class="w-[100px] object-cover"
             />
             <div
               class="absolute bottom-0 left-0 ml-[10px] inline-block w-[98%] whitespace-normal p-[1%] text-base text-white"
-              style="box-sizing: unset !important"
             >
               <span>{{ article.title }}</span>
             </div>

apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue

@@ -78,8 +78,6 @@ function onDelete() {
 /** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
-
-  // reply.value.type = 'image'
   reply.value.mediaId = item.mediaId;
   reply.value.url = item.url;
   reply.value.name = item.name;

apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue

@@ -8,8 +8,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
 
-import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import { WxMaterialSelect, WxNews } from '#/views/mp/components';
-import News from '#/views/mp/components/wx-news/wx-news.vue';
 
 defineOptions({ name: 'TabNews' });
 
@@ -48,7 +47,7 @@ function onDelete() {
         class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
         v-if="reply.articles && reply.articles.length > 0"
       >
-        <News :articles="reply.articles" />
+        <WxNews :articles="reply.articles" />
         <ElCol class="pt-[10px] text-center">
           <ElButton type="danger" circle @click="onDelete">
             <IconifyIcon icon="lucide:trash-2" />
@@ -78,7 +77,7 @@ function onDelete() {
         append-to-body
         destroy-on-close
       >
-        <MaterialSelect
+        <WxMaterialSelect
           type="news"
           :account-id="reply.accountId"
           :news-type="newsType"

apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue

@@ -3,8 +3,7 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
+import BenzAMRRecorder from 'benz-amr-recorder'; // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
-import BenzAMRRecorder from 'benz-amr-recorder';
 import { ElTag } from 'element-plus';
 
 /** 微信消息 - 语音 */
@@ -64,23 +63,24 @@ function amrStop() {
   playing.value = false;
   amr.value.stop();
 }
-// TODO dylan：下面样式有点问题
 </script>
 
 <template>
   <div
-    class="flex min-h-[50px] min-w-[120px] flex-col items-center justify-center rounded-[10px] bg-[#eaeaea] px-3 py-2"
+    class="flex h-[50px] w-[120px] cursor-pointer items-center justify-center rounded-[10px] bg-[#eaeaea] p-[5px]"
     @click="playVoice"
   >
-    <div class="flex items-center">
+    <el-icon>
       <IconifyIcon
         v-if="playing !== true"
         icon="lucide:circle-play"
         :size="32"
       />
       <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
-      <span class="ml-2 text-xs" v-if="duration">{{ duration }} 秒</span>
+      <span v-if="duration" class="ml-[5px] text-[11px]">
-    </div>
+        {{ duration }} 秒
+      </span>
+    </el-icon>
     <div v-if="content">
       <ElTag type="success" size="small">语音识别</ElTag>
       {{ content }}

apps/web-ele/src/views/mp/freePublish/data.ts

@@ -6,7 +6,7 @@ import { formatDateTime } from '@vben/utils';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
-let accountList: MpAccountApi.AccountSimple[] = [];
+let accountList: MpAccountApi.Account[] = [];
 getSimpleAccountList().then((data) => (accountList = data));
 
 /** 搜索表单配置 */

apps/web-naive/src/views/_core/profile/base-setting.vue

@@ -1,65 +1,101 @@
 <script setup lang="ts">
-import type { BasicOption } from '@vben/types';
+import type { Recordable } from '@vben/types';
 
 import type { VbenFormSchema } from '#/adapter/form';
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
-import { ProfileBaseSetting } from '@vben/common-ui';
+import { ProfileBaseSetting, z } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
-import { getUserInfoApi } from '#/api';
+import { message } from '#/adapter/naive';
+import { updateUserProfile } from '#/api/system/user/profile';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();
 
 const profileBaseSettingRef = ref();
 
-const MOCK_ROLES_OPTIONS: BasicOption[] = [
-  {
-    label: '管理员',
-    value: 'super',
-  },
-  {
-    label: '用户',
-    value: 'user',
-  },
-  {
-    label: '测试',
-    value: 'test',
-  },
-];
-
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
-      fieldName: 'realName',
+      label: '用户昵称',
+      fieldName: 'nickname',
       component: 'Input',
-      label: '姓名',
-    },
-    {
-      fieldName: 'username',
-      component: 'Input',
-      label: '用户名',
-    },
-    {
-      fieldName: 'roles',
-      component: 'Select',
       componentProps: {
-        mode: 'tags',
+        placeholder: '请输入用户昵称',
-        options: MOCK_ROLES_OPTIONS,
       },
-      label: '角色',
+      rules: 'required',
     },
     {
-      fieldName: 'introduction',
+      label: '用户手机',
-      component: 'Textarea',
+      fieldName: 'mobile',
-      label: '个人简介',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户手机',
+      },
+      rules: z.string(),
+    },
+    {
+      label: '用户邮箱',
+      fieldName: 'email',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      label: '用户性别',
+      fieldName: 'sex',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
     },
   ];
 });
 
-onMounted(async () => {
+async function handleSubmit(values: Recordable<any>) {
-  const data = await getUserInfoApi();
+  try {
-  profileBaseSettingRef.value.getFormApi().setValues(data);
+    profileBaseSettingRef.value.getFormApi().setLoading(true);
-});
+    // 提交表单
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
+    // 关闭并提示
+    emit('success');
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } catch (error) {
+    console.error(error);
+  } finally {
+    profileBaseSettingRef.value.getFormApi().setLoading(false);
+  }
+}
+
+/** 监听 profile 变化 */
+watch(
+  () => props.profile,
+  (newProfile) => {
+    if (newProfile) {
+      profileBaseSettingRef.value.getFormApi().setValues(newProfile);
+    }
+  },
+  { immediate: true },
+);
 </script>
 <template>
-  <ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
+  <ProfileBaseSetting
+    ref="profileBaseSettingRef"
+    :form-schema="formSchema"
+    @submit="handleSubmit"
+  />
 </template>

apps/web-tdesign/src/views/_core/profile/base-setting.vue

@@ -1,65 +1,101 @@
 <script setup lang="ts">
-import type { BasicOption } from '@vben/types';
+import type { Recordable } from '@vben/types';
 
 import type { VbenFormSchema } from '#/adapter/form';
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
-import { ProfileBaseSetting } from '@vben/common-ui';
+import { ProfileBaseSetting, z } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
-import { getUserInfoApi } from '#/api';
+import { message } from '#/adapter/tdesign';
+import { updateUserProfile } from '#/api/system/user/profile';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();
 
 const profileBaseSettingRef = ref();
 
-const MOCK_ROLES_OPTIONS: BasicOption[] = [
-  {
-    label: '管理员',
-    value: 'super',
-  },
-  {
-    label: '用户',
-    value: 'user',
-  },
-  {
-    label: '测试',
-    value: 'test',
-  },
-];
-
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
-      fieldName: 'realName',
+      label: '用户昵称',
+      fieldName: 'nickname',
       component: 'Input',
-      label: '姓名',
-    },
-    {
-      fieldName: 'username',
-      component: 'Input',
-      label: '用户名',
-    },
-    {
-      fieldName: 'roles',
-      component: 'Select',
       componentProps: {
-        mode: 'tags',
+        placeholder: '请输入用户昵称',
-        options: MOCK_ROLES_OPTIONS,
       },
-      label: '角色',
+      rules: 'required',
     },
     {
-      fieldName: 'introduction',
+      label: '用户手机',
-      component: 'Textarea',
+      fieldName: 'mobile',
-      label: '个人简介',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户手机',
+      },
+      rules: z.string(),
+    },
+    {
+      label: '用户邮箱',
+      fieldName: 'email',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      label: '用户性别',
+      fieldName: 'sex',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
     },
   ];
 });
 
-onMounted(async () => {
+async function handleSubmit(values: Recordable<any>) {
-  const data = await getUserInfoApi();
+  try {
-  profileBaseSettingRef.value.getFormApi().setValues(data);
+    profileBaseSettingRef.value.getFormApi().setLoading(true);
-});
+    // 提交表单
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
+    // 关闭并提示
+    emit('success');
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } catch (error) {
+    console.error(error);
+  } finally {
+    profileBaseSettingRef.value.getFormApi().setLoading(false);
+  }
+}
+
+/** 监听 profile 变化 */
+watch(
+  () => props.profile,
+  (newProfile) => {
+    if (newProfile) {
+      profileBaseSettingRef.value.getFormApi().setValues(newProfile);
+    }
+  },
+  { immediate: true },
+);
 </script>
 <template>
-  <ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
+  <ProfileBaseSetting
+    ref="profileBaseSettingRef"
+    :form-schema="formSchema"
+    @submit="handleSubmit"
+  />
 </template>

internal/lint-configs/eslint-config/src/configs/ignores.ts

@@ -46,6 +46,8 @@ export async function ignores(): Promise<Linter.Config[]> {
         '**/*.sh',
         '**/*.ttf',
         '**/*.woff',
+        '**/public/**',
+        '**/china.json',
       ],
     },
   ];

pnpm-workspace.yaml

@@ -136,8 +136,8 @@ catalog:
   highlight.js: ^11.11.1
   html-minifier-terser: ^7.2.0
   is-ci: ^4.1.0
-  jsencrypt: ^3.3.2
   jiti: ^2.6.1
+  jsencrypt: ^3.3.2
   json-bigint: ^1.0.0
   jsonc-eslint-parser: ^2.4.1
   jsonwebtoken: ^9.0.2
@@ -220,9 +220,9 @@ catalog:
   vue-router: ^4.5.1
   vue-tippy: ^6.7.1
   vue-tsc: ^3.1.4
+  vuedraggable: ^4.1.0
   vue3-print-nb: "^0.1.4"
   vue3-signature: ^0.2.4
-  vuedraggable: ^4.1.0
   video.js: ^7.21.6
   vxe-pc-ui: ^4.10.22
   vxe-table: ^4.17.14