feat: 自动回复迁移

apps/web-antd/package.json

@@ -43,6 +43,7 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@videojs-player/vue": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
@@ -59,6 +60,7 @@
     "pinia": "catalog:",
     "steady-xml": "catalog:",
     "tinymce": "catalog:",
+    "video.js": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",

apps/web-antd/src/store/index.ts

@@ -1 +1,12 @@
+import type { App } from 'vue';
+
+import { createPinia } from 'pinia';
+
 export * from './auth';
+const store = createPinia();
+
+export const setupStore = (app: App<Element>) => {
+  app.use(store);
+};
+
+export { store };

apps/web-antd/src/store/tagsView.ts

@@ -0,0 +1,202 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+
+import { useUserStore } from '@vben/stores';
+
+import { defineStore } from 'pinia';
+
+import { router } from '#/router';
+import { findIndex } from '#/utils';
+import { getRawRoute } from '#/utils/routerHelper';
+
+import { store } from './index';
+
+const userStore = useUserStore();
+
+export interface TagsViewState {
+  visitedViews: RouteLocationNormalizedLoaded[];
+  cachedViews: Set<string>;
+  selectedTag?: RouteLocationNormalizedLoaded;
+}
+
+export const useTagsViewStore = defineStore('tagsView', {
+  state: (): TagsViewState => ({
+    visitedViews: [],
+    cachedViews: new Set(),
+    selectedTag: undefined,
+  }),
+  getters: {
+    getVisitedViews(): RouteLocationNormalizedLoaded[] {
+      return this.visitedViews;
+    },
+    getCachedViews(): string[] {
+      return [...this.cachedViews];
+    },
+    getSelectedTag(): RouteLocationNormalizedLoaded | undefined {
+      return this.selectedTag;
+    },
+  },
+  actions: {
+    // 新增缓存和tag
+    addView(view: RouteLocationNormalizedLoaded): void {
+      this.addVisitedView(view);
+      this.addCachedView();
+    },
+    // 新增tag
+    addVisitedView(view: RouteLocationNormalizedLoaded) {
+      if (this.visitedViews.some((v) => v.fullPath === view.fullPath)) return;
+      if (view.meta?.noTagsView) return;
+      const visitedView = Object.assign({}, view, {
+        title: view.meta?.title || 'no-name',
+      });
+
+      if (visitedView.meta) {
+        const titleSuffixList: string[] = [];
+        this.visitedViews.forEach((v) => {
+          if (
+            v.path === visitedView.path &&
+            v.meta?.title === visitedView.meta?.title
+          ) {
+            titleSuffixList.push((v.meta?.titleSuffix as string) || '1');
+          }
+        });
+        if (titleSuffixList.length > 0) {
+          let titleSuffix = 1;
+          while (titleSuffixList.includes(`${titleSuffix}`)) {
+            titleSuffix += 1;
+          }
+          visitedView.meta.titleSuffix =
+            titleSuffix === 1 ? undefined : `${titleSuffix}`;
+        }
+      }
+
+      this.visitedViews.push(visitedView);
+    },
+    // 新增缓存
+    addCachedView() {
+      const cacheMap: Set<string> = new Set();
+      for (const v of this.visitedViews) {
+        const item = getRawRoute(v);
+        const needCache = !item.meta?.noCache;
+        if (!needCache) {
+          continue;
+        }
+        const name = item.name as string;
+        cacheMap.add(name);
+      }
+      if (
+        [...this.cachedViews].sort().toString() ===
+        [...cacheMap].sort().toString()
+      )
+        return;
+      this.cachedViews = cacheMap;
+    },
+    // 删除某个
+    delView(view: RouteLocationNormalizedLoaded) {
+      this.delVisitedView(view);
+      this.delCachedView();
+    },
+    // 删除tag
+    delVisitedView(view: RouteLocationNormalizedLoaded) {
+      for (const [i, v] of this.visitedViews.entries()) {
+        if (v.fullPath === view.fullPath) {
+          this.visitedViews.splice(i, 1);
+          break;
+        }
+      }
+    },
+    // 删除缓存
+    delCachedView() {
+      const route = router.currentRoute.value;
+      const index = findIndex<string>(
+        this.getCachedViews,
+        (v) => v === route.name,
+      );
+      for (const v of this.visitedViews) {
+        if (v.name === route.name) {
+          return;
+        }
+      }
+      if (index > -1) {
+        this.cachedViews.delete(
+          this.getCachedViews[index] as unknown as string,
+        );
+      }
+    },
+    // 删除所有缓存和tag
+    delAllViews() {
+      this.delAllVisitedViews();
+      this.delCachedView();
+    },
+    // 删除所有tag
+    delAllVisitedViews() {
+      // const userStore = useUserStoreWithOut();
+
+      // const affixTags = this.visitedViews.filter((tag) => tag.meta.affix)
+      this.visitedViews = userStore.userInfo
+        ? this.visitedViews.filter((tag) => tag?.meta?.affix)
+        : [];
+    },
+    // 删除其他
+    delOthersViews(view: RouteLocationNormalizedLoaded) {
+      this.delOthersVisitedViews(view);
+      this.addCachedView();
+    },
+    // 删除其他tag
+    delOthersVisitedViews(view: RouteLocationNormalizedLoaded) {
+      this.visitedViews = this.visitedViews.filter((v) => {
+        return v?.meta?.affix || v.fullPath === view.fullPath;
+      });
+    },
+    // 删除左侧
+    delLeftViews(view: RouteLocationNormalizedLoaded) {
+      const index = findIndex<RouteLocationNormalizedLoaded>(
+        this.visitedViews,
+        (v) => v.fullPath === view.fullPath,
+      );
+      if (index > -1) {
+        this.visitedViews = this.visitedViews.filter((v, i) => {
+          return v?.meta?.affix || v.fullPath === view.fullPath || i > index;
+        });
+        this.addCachedView();
+      }
+    },
+    // 删除右侧
+    delRightViews(view: RouteLocationNormalizedLoaded) {
+      const index = findIndex<RouteLocationNormalizedLoaded>(
+        this.visitedViews,
+        (v) => v.fullPath === view.fullPath,
+      );
+      if (index > -1) {
+        this.visitedViews = this.visitedViews.filter((v, i) => {
+          return v?.meta?.affix || v.fullPath === view.fullPath || i < index;
+        });
+        this.addCachedView();
+      }
+    },
+    updateVisitedView(view: RouteLocationNormalizedLoaded) {
+      for (let v of this.visitedViews) {
+        if (v.fullPath === view.fullPath) {
+          v = Object.assign(v, view);
+          break;
+        }
+      }
+    },
+    // 设置当前选中的 tag
+    setSelectedTag(tag: RouteLocationNormalizedLoaded) {
+      this.selectedTag = tag;
+    },
+    setTitle(title: string, path?: string) {
+      for (const v of this.visitedViews) {
+        if (v.path === (path ?? this.selectedTag?.path)) {
+          v.meta.title = title;
+          break;
+        }
+      }
+    },
+  },
+  persist: false,
+});
+
+export const useTagsViewStoreWithOut = () => {
+  return useTagsViewStore(store);
+};

apps/web-antd/src/utils/index.ts

@@ -1,2 +1,29 @@
+import type { Recordable } from '@vben/types';
+
 export * from './rangePickerProps';
 export * from './routerHelper';
+
+/**
+ * 查找数组对象的某个下标
+ * @param {Array} ary 查找的数组
+ * @param {Function} fn 判断的方法
+ */
+type Fn<T = any> = (item: T, index: number, array: Array<T>) => boolean;
+export const findIndex = <T = Recordable<any>>(
+  ary: Array<T>,
+  fn: Fn<T>,
+): number => {
+  if (ary.findIndex) {
+    return ary.findIndex((item, index, array) => fn(item, index, array));
+  }
+  let index = -1;
+  ary.some((item: T, i: number, ary: Array<T>) => {
+    const ret: boolean = fn(item, i, ary);
+    if (ret) {
+      index = i;
+      return true;
+    }
+    return false;
+  });
+  return index;
+};

apps/web-antd/src/utils/routerHelper.ts

@@ -1,3 +1,8 @@
+import type {
+  RouteLocationNormalized,
+  RouteRecordNormalized,
+} from 'vue-router';
+
 import { defineAsyncComponent } from 'vue';
 
 const modules = import.meta.glob('../views/**/*.{vue,tsx}');
@@ -14,3 +19,20 @@ export function registerComponent(componentPath: string) {
     }
   }
 }
+
+export const getRawRoute = (
+  route: RouteLocationNormalized,
+): RouteLocationNormalized => {
+  if (!route) return route;
+  const { matched, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+  };
+};

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

@@ -0,0 +1,88 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+import { MsgType } from './modules/types';
+
+/** 获取表格列配置 */
+export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
+  const columns: VxeGridPropTypes.Columns = [];
+  // 请求消息类型列（仅消息回复显示）
+  if (msgType === MsgType.Message) {
+    columns.push({
+      field: 'requestMessageType',
+      title: '请求消息类型',
+      minWidth: 120,
+    });
+  }
+
+  // 关键词列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestKeyword',
+      title: '关键词',
+      minWidth: 150,
+    });
+  }
+
+  // 匹配类型列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestMatch',
+      title: '匹配类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH },
+      },
+    });
+  }
+
+  // 回复消息类型列
+  columns.push(
+    {
+      field: 'responseMessageType',
+      title: '回复消息类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
+      },
+    },
+    {
+      field: 'responseContent',
+      title: '回复内容',
+      minWidth: 200,
+      slots: { default: 'replyContent' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  );
+  return columns;
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}

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

@@ -1,29 +1,259 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import {
+  confirm,
+  ContentWrap,
+  DocAlert,
+  Page,
+  useVbenModal,
+} from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { message, Row, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ReplyContentCell from './modules/ReplyTable.vue';
+import { MsgType } from './modules/types';
+
+defineOptions({ name: 'MpAutoReply' });
+
+const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+async function onTabChange(_tabName: string) {
+  msgType.value = _tabName;
+  // 等待 msgType 更新完成
+  await nextTick();
+  const columns = useGridColumns(Number(msgType.value) as MsgType);
+  if (columns) {
+    // 使用 setGridOptions 更新列配置
+    gridApi.setGridOptions({ columns });
+    // 等待列配置更新完成
+    await nextTick();
+  }
+  await gridApi.query();
+  // 查询完成后更新数据长度
+  updateTableDataLength();
+}
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+
+  formModalApi
+    .setData({
+      isCreating: true,
+      msgType: Number(msgType.value) as MsgType,
+      accountId: formValues.accountId,
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: any) {
+  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  formModalApi
+    .setData({
+      isCreating: false,
+      msgType: Number(msgType.value) as MsgType,
+      row: data,
+    })
+    .open();
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: any) {
+  await confirm('是否确认删除此数据?');
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', ['自动回复']),
+    duration: 0,
+  });
+  try {
+    await MpAutoReplyApi.deleteAutoReply(row.id);
+    message.success('删除成功');
+    await gridApi.query();
+    // 查询完成后更新数据长度
+    updateTableDataLength();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(Number(msgType.value) as MsgType),
+    height: 'calc(100vh - 300px)',
+    // height: '600px',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await MpAutoReplyApi.getAutoReplyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: Number(msgType.value) as MsgType,
+            ...formValues,
+          });
+        },
+      },
+      // 禁用自动加载，等表单初始化完成后再加载
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+// 表格数据长度，用于判断是否显示新增按钮
+const tableDataLength = ref(0);
+
+// 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环）
+function updateTableDataLength() {
+  try {
+    if (!gridApi.grid) {
+      return;
+    }
+    const tableData = gridApi.grid.getTableData();
+    tableDataLength.value = tableData?.tableData?.length || 0;
+  } catch {
+    tableDataLength.value = 0;
+  }
+}
+
+// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
+const showCreateButton = computed(() => {
+  if (Number(msgType.value) !== MsgType.Follow) {
+    return true;
+  }
+  return tableDataLength.value <= 0;
+});
+
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  // 等待 WxAccountSelect 组件加载并设置默认值
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    // 如果 accountId 有值，说明已经准备好了
+    if (formValues.accountId) {
+      // 设置为最新提交的值
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      // 触发首次查询
+      await gridApi.query();
+      updateTableDataLength();
+    }
+  }
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/autoReply/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/autoReply/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <!-- tab 切换 -->
+    <ContentWrap>
+      <Tabs
+        v-model:active-key="msgType"
+        @change="(activeKey) => onTabChange(activeKey as string)"
+      >
+        <!-- tab 项 -->
+        <Tabs.TabPane :key="String(MsgType.Follow)">
+          <template #tab>
+            <Row align="middle">
+              <IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
+            </Row>
+          </template>
+        </Tabs.TabPane>
+        <Tabs.TabPane :key="String(MsgType.Message)">
+          <template #tab>
+            <Row align="middle">
+              <IconifyIcon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
+            </Row>
+          </template>
+        </Tabs.TabPane>
+        <Tabs.TabPane :key="String(MsgType.Keyword)">
+          <template #tab>
+            <Row align="middle">
+              <IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
+            </Row>
+          </template>
+        </Tabs.TabPane>
+      </Tabs>
+      <!-- 列表 -->
+      <FormModal
+        @success="
+          () => {
+            gridApi.query().then(() => {
+              updateTableDataLength();
+            });
+          }
+        "
+      />
+      <Grid table-title="自动回复列表">
+        <template #toolbar-tools>
+          <TableAction
+            v-if="showCreateButton"
+            :actions="[
+              {
+                label: $t('ui.actionTitle.create', ['自动回复']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['mp:auto-reply:create'],
+                onClick: handleCreate,
+              },
+            ]"
+          />
+        </template>
+        <template #replyContent="{ row }">
+          <ReplyContentCell :row="row" />
+        </template>
+        <template #actions="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'link',
+                icon: ACTION_ICON.EDIT,
+                auth: ['mp:auto-reply:update'],
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'link',
+                danger: true,
+                icon: ACTION_ICON.DELETE,
+                auth: ['mp:auto-reply:delete'],
+                popConfirm: {
+                  title: '是否确认删除此数据?',
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+    </ContentWrap>
   </Page>
 </template>

apps/web-antd/src/views/mp/autoReply/modules/ReplyForm.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
+
+import WxReplySelect from '#/views/mp/modules/wx-reply';
+
+import { MsgType } from './types';
+
+defineOptions({ name: 'ReplyForm' });
+
+const props = defineProps<{
+  modelValue: any;
+  msgType: MsgType;
+  reply: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:reply', v: Reply): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const reply = computed<Reply>({
+  get: () => props.reply,
+  set: (val) => emit('update:reply', val),
+});
+
+const replyForm = computed<any>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const formRef = ref(); // 表单 ref
+
+const RequestMessageTypes = [
+  'text',
+  'image',
+  'voice',
+  'video',
+  'shortvideo',
+  'location',
+  'link',
+]; // 允许选择的请求消息类型
+
+// 表单校验规则
+const rules = {
+  requestKeyword: [
+    { required: true, message: '请求的关键字不能为空', trigger: 'blur' },
+  ] as Rule[],
+  requestMatch: [
+    { required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
+  ] as Rule[],
+} as Record<string, Rule[]>;
+
+defineExpose({
+  resetFields: () => formRef.value?.resetFields(),
+  validate: async () => {
+    await formRef.value?.validate();
+  },
+});
+</script>
+
+<template>
+  <div>
+    <Form
+      ref="formRef"
+      :model="replyForm"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem
+        label="消息类型"
+        name="requestMessageType"
+        v-if="msgType === MsgType.Message"
+      >
+        <Select
+          v-model:value="replyForm.requestMessageType"
+          placeholder="请选择"
+        >
+          <SelectOption
+            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter(
+              (d) => RequestMessageTypes.includes(d.value as string),
+            )"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem
+        label="匹配类型"
+        name="requestMatch"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <Select
+          v-model:value="replyForm.requestMatch"
+          placeholder="请选择匹配类型"
+          allow-clear
+        >
+          <SelectOption
+            v-for="dict in getDictOptions(
+              DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+              'number',
+            )"
+            :key="String(dict.value)"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem
+        label="关键词"
+        name="requestKeyword"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <Input
+          v-model:value="replyForm.requestKeyword"
+          placeholder="请输入内容"
+          allow-clear
+        />
+      </FormItem>
+      <FormItem label="回复消息">
+        <WxReplySelect v-model="reply" />
+      </FormItem>
+    </Form>
+  </div>
+</template>
+
+<style scoped></style>

apps/web-antd/src/views/mp/autoReply/modules/ReplyTable.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import WxMusic from '#/views/mp/modules/wx-music';
+import WxNews from '#/views/mp/modules/wx-news';
+import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+
+defineOptions({ name: 'ReplyContentCell' });
+
+const props = defineProps<{
+  row: any;
+}>();
+</script>
+
+<template>
+  <div>
+    <div v-if="props.row.responseMessageType === 'text'">
+      {{ props.row.responseContent }}
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'voice'">
+      <WxVoicePlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'image'">
+      <a target="_blank" :href="props.row.responseMediaUrl">
+        <img :src="props.row.responseMediaUrl" style="width: 100px" />
+      </a>
+    </div>
+    <div
+      v-else-if="
+        props.row.responseMessageType === 'video' ||
+        props.row.responseMessageType === 'shortvideo'
+      "
+    >
+      <WxVideoPlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+        style="margin-top: 10px"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'news'">
+      <WxNews :articles="props.row.responseArticles" />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'music'">
+      <WxMusic
+        :title="props.row.responseTitle"
+        :description="props.row.responseDescription"
+        :thumb-media-url="props.row.responseThumbMediaUrl"
+        :music-url="props.row.responseMusicUrl"
+        :hq-music-url="props.row.responseHqMusicUrl"
+      />
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/mp/autoReply/modules/form.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+import { ReplyType } from '#/views/mp/modules/wx-reply/components/types';
+
+import ReplyForm from './ReplyForm.vue';
+import { MsgType } from './types';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
+
+const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
+const replyForm = ref<any>({});
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+});
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating
+    ? $t('ui.actionTitle.create', ['自动回复'])
+    : $t('ui.actionTitle.edit', ['自动回复']);
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    // 处理回复消息
+    const submitForm: any = { ...replyForm.value };
+    submitForm.responseMessageType = reply.value.type;
+    submitForm.responseContent = reply.value.content;
+    submitForm.responseMediaId = reply.value.mediaId;
+    submitForm.responseMediaUrl = reply.value.url;
+    submitForm.responseTitle = reply.value.title;
+    submitForm.responseDescription = reply.value.description;
+    submitForm.responseThumbMediaId = reply.value.thumbMediaId;
+    submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
+    submitForm.responseArticles = reply.value.articles;
+    submitForm.responseMusicUrl = reply.value.musicUrl;
+    submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
+
+    modalApi.lock();
+    try {
+      if (replyForm.value.id === undefined) {
+        await MpAutoReplyApi.createAutoReply(submitForm);
+        message.success('新增成功');
+      } else {
+        await MpAutoReplyApi.updateAutoReply(submitForm);
+        message.success('修改成功');
+      }
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      replyForm.value = {};
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: -1,
+      };
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      accountId?: number;
+      isCreating: boolean;
+      msgType: MsgType;
+      row?: any;
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+
+    if (data.isCreating) {
+      // 新建：初始化表单
+      replyForm.value = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+      };
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: data.accountId || -1,
+      };
+    } else if (data.row) {
+      // 编辑：加载数据
+      const rowData = data.row;
+      replyForm.value = { ...rowData };
+      delete replyForm.value.responseMessageType;
+      delete replyForm.value.responseContent;
+      delete replyForm.value.responseMediaId;
+      delete replyForm.value.responseMediaUrl;
+      delete replyForm.value.responseDescription;
+      delete replyForm.value.responseArticles;
+      reply.value = {
+        type: rowData.responseMessageType,
+        accountId: data.accountId || -1,
+        content: rowData.responseContent,
+        mediaId: rowData.responseMediaId,
+        url: rowData.responseMediaUrl,
+        title: rowData.responseTitle,
+        description: rowData.responseDescription,
+        thumbMediaId: rowData.responseThumbMediaId,
+        thumbMediaUrl: rowData.responseThumbMediaUrl,
+        articles: rowData.responseArticles,
+        musicUrl: rowData.responseMusicUrl,
+        hqMusicUrl: rowData.responseHqMusicUrl,
+      };
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <ReplyForm
+      v-if="formData"
+      v-model="replyForm"
+      v-model:reply="reply"
+      :msg-type="formData.msgType"
+      ref="formRef"
+    />
+  </Modal>
+</template>

apps/web-antd/src/views/mp/autoReply/modules/types.ts

@@ -0,0 +1,7 @@
+// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
+// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
+export enum MsgType {
+  Follow = 1,
+  Keyword = 3,
+  Message = 2,
+}

apps/web-antd/src/views/mp/modules/wx-account-select/main.vue

@@ -1,23 +1,26 @@
 <script lang="ts" setup>
 import type { MpAccountApi } from '#/api/mp/account';
 
-import { onMounted, reactive, ref, unref } from 'vue';
+import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { useTabs } from '@vben/hooks';
-
-import { message, Select } from 'ant-design-vue';
+import { message, Select, SelectOption } from 'ant-design-vue';
 
 import { getSimpleAccountList } from '#/api/mp/account';
+import { useTagsViewStore } from '#/store/tagsView';
 
 defineOptions({ name: 'WxAccountSelect' });
 
-const emit = defineEmits<{
-  (e: 'change', id: number, name: string): void;
+const props = defineProps<{
+  modelValue?: number;
 }>();
 
-// 消息弹窗
-const { closeCurrentTab } = useTabs(); // 视图操作
+const emit = defineEmits<{
+  (e: 'change', id: number, name: string): void;
+  (e: 'update:modelValue', id: number): void;
+}>();
+
+const { delView } = useTagsViewStore(); // 视图操作
 const { push, currentRoute } = useRouter();
 
 const account: MpAccountApi.AccountSimple = reactive({
@@ -27,37 +30,78 @@ const account: MpAccountApi.AccountSimple = reactive({
 
 const accountList = ref<MpAccountApi.AccountSimple[]>([]);
 
+// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
+const currentId = computed({
+  get: () => {
+    // 如果外部传入了 modelValue，优先使用外部的值
+    if (props.modelValue !== undefined && props.modelValue !== null) {
+      return props.modelValue;
+    }
+    return account.id;
+  },
+  set: (value: number) => {
+    // 更新内部状态
+    account.id = value;
+    // 同步到外部（表单系统）
+    emit('update:modelValue', value);
+    // 触发 change 事件（保持向后兼容）
+    const found = accountList.value.find(
+      (v: MpAccountApi.AccountSimple) => v.id === value,
+    );
+    if (found) {
+      account.name = found.name;
+      emit('change', value, found.name);
+    }
+  },
+});
+
+// 监听外部 modelValue 变化，同步到内部状态
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (
+      newValue !== undefined &&
+      newValue !== null &&
+      newValue !== account.id
+    ) {
+      account.id = newValue;
+      const found = accountList.value.find(
+        (v: MpAccountApi.AccountSimple) => v.id === newValue,
+      );
+      if (found) {
+        account.name = found.name;
+      }
+    }
+  },
+);
+
 /** 查询公众号列表 */
 async function handleQuery() {
   accountList.value = await getSimpleAccountList();
   if (accountList.value.length === 0) {
     message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
-    await closeCurrentTab(unref(currentRoute));
+    delView(unref(currentRoute));
     await push({ name: 'MpAccount' });
     return;
   }
-  // 默认选中第一个
-  const firstAccount = accountList.value[0];
-  if (firstAccount) {
-    account.id = firstAccount.id;
-    if (account.id) {
-      account.name = firstAccount.name;
-      emit('change', account.id, account.name);
-    }
-  }
-}
 
-/** 公众号变化 */
-function onChanged(value: any) {
-  if (value === undefined || Array.isArray(value)) return;
-  const id = typeof value === 'number' ? value : Number(value);
-  account.id = id;
-  const found = accountList.value.find(
-    (v: MpAccountApi.AccountSimple) => v.id === id,
-  );
-  if (account.id && found) {
-    account.name = found.name;
-    emit('change', account.id, account.name);
+  // 如果外部没有传入值（modelValue 为空），默认选中第一个
+  if (props.modelValue === undefined || props.modelValue === null) {
+    const firstAccount = accountList.value[0];
+    if (firstAccount) {
+      currentId.value = firstAccount.id;
+      account.name = firstAccount.name;
+      emit('change', firstAccount.id, firstAccount.name);
+    }
+  } else {
+    // 如果外部有值，同步到内部状态
+    const found = accountList.value.find(
+      (v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
+    );
+    if (found) {
+      account.id = props.modelValue;
+      account.name = found.name;
+    }
   }
 }
 
@@ -69,23 +113,12 @@ onMounted(() => {
 
 <template>
   <Select
-    v-model:value="account.id"
+    v-model:value="currentId"
     placeholder="请选择公众号"
-    class="!w-240px"
-    @change="onChanged"
+    style="width: 240px"
   >
-    <Select.Option
-      v-for="item in accountList"
-      :key="item.id"
-      :label="item.name"
-      :value="item.id"
-    >
+    <SelectOption v-for="item in accountList" :key="item.id" :value="item.id">
       {{ item.name }}
-    </Select.Option>
+    </SelectOption>
   </Select>
 </template>
-<style lang="scss" scoped>
-:deep(.ant-select-selector) {
-  width: 240px !important;
-}
-</style>

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { UploadFile } from 'ant-design-vue';
+import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 
 import type { Reply } from './types';
 
@@ -54,9 +55,65 @@ function beforeVideoUpload(file: UploadFile) {
   return useBeforeUpload(UploadType.Video, 10)(file as any);
 }
 
+/** 自定义上传请求 */
+async function customRequest(info: UploadRequestOption) {
+  const formData = new FormData();
+  formData.append('file', info.file as File);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  if (uploadData.title) {
+    formData.append('title', uploadData.title);
+  }
+  if (uploadData.introduction) {
+    formData.append('introduction', uploadData.introduction);
+  }
+
+  try {
+    const xhr = new XMLHttpRequest();
+
+    // 监听上传进度
+    xhr.upload.addEventListener('progress', (e) => {
+      if (e.lengthComputable) {
+        const percent = Math.round((e.loaded / e.total) * 100);
+        info.onProgress?.({ percent });
+      }
+    });
+
+    // 监听上传完成
+    xhr.addEventListener('load', () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          const res = JSON.parse(xhr.responseText);
+          onUploadSuccess(res);
+          info.onSuccess?.(res);
+        } catch {
+          info.onError?.(new Error('解析响应失败'));
+          message.error('上传失败：解析响应失败');
+        }
+      } else {
+        info.onError?.(new Error(`上传失败：HTTP ${xhr.status}`));
+        message.error('上传失败，请重试');
+      }
+    });
+
+    // 监听上传错误
+    xhr.addEventListener('error', () => {
+      info.onError?.(new Error('上传请求失败'));
+      message.error('上传失败，请重试');
+    });
+
+    // 发送请求
+    xhr.open('POST', UPLOAD_URL);
+    xhr.setRequestHeader('Authorization', HEADERS.Authorization);
+    xhr.send(formData);
+  } catch (error: any) {
+    info.onError?.(error);
+    message.error('上传失败，请重试');
+  }
+}
+
 /** 上传成功 */
-function onUploadSuccess(info: any) {
-  const res = info.response || info;
+function onUploadSuccess(res: any) {
   if (res.code !== 0) {
     message.error(`上传出错：${res.msg}`);
     return false;
@@ -66,7 +123,6 @@ function onUploadSuccess(info: any) {
   fileList.value = [];
   uploadData.title = '';
   uploadData.introduction = '';
-
   selectMaterial(res.data);
 }
 
@@ -127,18 +183,9 @@ function selectMaterial(item: any) {
           <!-- 文件上传 -->
           <Col :span="12">
             <Upload
-              :action="UPLOAD_URL"
-              :headers="HEADERS"
               :file-list="fileList"
-              :data="uploadData"
               :before-upload="beforeVideoUpload"
-              @change="
-                (info) => {
-                  if (info.file.status === 'done') {
-                    onUploadSuccess(info.file.response || info.file);
-                  }
-                }
-              "
+              :custom-request="customRequest"
             >
               <Button type="primary">
                 新建视频 <IconifyIcon icon="ep:upload" />

apps/web-antd/src/views/mp/modules/wx-video-play/main.vue

@@ -13,11 +13,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
+import { VideoPlayer } from '@videojs-player/vue';
 import { Modal } from 'ant-design-vue';
 
-// import { VideoPlayer } from '@videojs-player/vue';
-
-// import 'video.js/dist/video-js.css';
+import 'video.js/dist/video-js.css';
 
 defineOptions({ name: 'WxVideoPlayer' });
 
@@ -42,19 +43,23 @@ const playVideo = () => {
 <template>
   <div @click="playVideo()">
     <!-- 提示 -->
-    <div>
-      <Icon icon="ep:video-play" :size="32" class="mr-5px" />
+    <div class="flex cursor-pointer flex-col items-center">
+      <IconifyIcon icon="ep:video-play" class="size-5" />
       <p class="text-sm">点击播放视频</p>
     </div>
 
     <!-- 弹窗播放 -->
-    <Modal v-model:open="dialogVideo" title="视频播放" width="800px">
+    <Modal
+      v-model:open="dialogVideo"
+      title="视频播放"
+      width="900px"
+      :footer="null"
+    >
       <VideoPlayer
         v-if="dialogVideo"
         class="video-player vjs-big-play-centered"
         :src="props.url"
         poster=""
-        crossorigin="anonymous"
         controls
         playsinline
         :volume="0.6"

apps/web-ele/.env.development

@@ -5,8 +5,10 @@ VITE_BASE=/
 
 # 请求路径
 VITE_BASE_URL=http://47.103.66.220:48080
+# VITE_BASE_URL=http://192.168.1.49:48080
 # 接口地址
 VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
+# VITE_GLOB_API_URL=http://192.168.1.49:48080/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭

apps/web-ele/package.json

@@ -43,6 +43,7 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@videojs-player/vue": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "benz-amr-recorder": "^1.1.5",
@@ -52,6 +53,7 @@
     "highlight.js": "catalog:",
     "pinia": "catalog:",
     "tinymce": "catalog:",
+    "video.js": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",

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

@@ -0,0 +1,90 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+import { MsgType } from './modules/types';
+
+/** 获取表格列配置 */
+export function useGridColumns(
+  msgType: MsgType,
+): VxeTableGridOptions['columns'] {
+  const columns: VxeTableGridOptions['columns'] = [];
+  // 请求消息类型列（仅消息回复显示）
+  if (msgType === MsgType.Message) {
+    columns.push({
+      field: 'requestMessageType',
+      title: '请求消息类型',
+      minWidth: 120,
+    });
+  }
+
+  // 关键词列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestKeyword',
+      title: '关键词',
+      minWidth: 150,
+    });
+  }
+
+  // 匹配类型列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestMatch',
+      title: '匹配类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH },
+      },
+    });
+  }
+
+  // 回复消息类型列
+  columns.push(
+    {
+      field: 'responseMessageType',
+      title: '回复消息类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
+      },
+    },
+    {
+      field: 'responseContent',
+      title: '回复内容',
+      minWidth: 200,
+      slots: { default: 'replyContent' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  );
+  return columns;
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}

apps/web-ele/src/views/mp/autoReply/index.vue

@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import type { TabPaneName } from 'element-plus';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import { ContentWrap, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import {
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElRow,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ReplyContentCell from './modules/ReplyTable.vue';
+import { MsgType } from './modules/types';
+
+defineOptions({ name: 'MpAutoReply' });
+
+const msgType = ref<MsgType>(MsgType.Keyword); // 消息类型
+async function onTabChange(_tabName: TabPaneName) {
+  // 等待 msgType 更新完成
+  await nextTick();
+  const columns = useGridColumns(msgType.value);
+  if (columns) {
+    // 使用 setGridOptions 更新列配置
+    gridApi.setGridOptions({ columns });
+    // 等待列配置更新完成
+    await nextTick();
+  }
+  await gridApi.query();
+  // 查询完成后更新数据长度
+  updateTableDataLength();
+}
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+
+  formModalApi
+    .setData({
+      isCreating: true,
+      msgType: msgType.value,
+      accountId: formValues.accountId,
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: any) {
+  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  formModalApi
+    .setData({ isCreating: false, msgType: msgType.value, row: data })
+    .open();
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: any) {
+  await ElMessageBox.confirm('是否确认删除此数据?');
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', ['自动回复']),
+  });
+  try {
+    await MpAutoReplyApi.deleteAutoReply(row.id);
+    ElMessage.success('删除成功');
+    await gridApi.query();
+    // 查询完成后更新数据长度
+    updateTableDataLength();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(msgType.value),
+    height: 'calc(100vh - 300px)',
+    // height: '600px',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await MpAutoReplyApi.getAutoReplyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: msgType.value,
+            ...formValues,
+          });
+        },
+      },
+      // 禁用自动加载，等表单初始化完成后再加载
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+// 表格数据长度，用于判断是否显示新增按钮
+const tableDataLength = ref(0);
+
+// 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环）
+function updateTableDataLength() {
+  try {
+    if (!gridApi.grid) {
+      return;
+    }
+    const tableData = gridApi.grid.getTableData();
+    tableDataLength.value = tableData?.tableData?.length || 0;
+  } catch {
+    tableDataLength.value = 0;
+  }
+}
+
+// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
+const showCreateButton = computed(() => {
+  if (msgType.value !== MsgType.Follow) {
+    return true;
+  }
+  return tableDataLength.value <= 0;
+});
+
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  // 等待 WxAccountSelect 组件加载并设置默认值
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    // 如果 accountId 有值，说明已经准备好了
+    if (formValues.accountId) {
+      // 设置为最新提交的值
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      // 触发首次查询
+      await gridApi.query();
+      updateTableDataLength();
+    }
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+
+    <!-- tab 切换 -->
+    <ContentWrap>
+      <ElTabs v-model="msgType" @tab-change="onTabChange">
+        <!-- tab 项 -->
+        <ElTabPane :name="MsgType.Follow">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="ep:star" class="mr-2px" /> 关注时回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+        <ElTabPane :name="MsgType.Message">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+        <ElTabPane :name="MsgType.Keyword">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+      </ElTabs>
+      <!-- 列表 -->
+      <FormModal
+        @success="
+          () => {
+            gridApi.query().then(() => {
+              updateTableDataLength();
+            });
+          }
+        "
+      />
+      <Grid table-title="自动回复列表">
+        <template #toolbar-tools>
+          <TableAction
+            v-if="showCreateButton"
+            :actions="[
+              {
+                label: $t('ui.actionTitle.create', ['自动回复']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['mp:auto-reply:create'],
+                onClick: handleCreate,
+              },
+            ]"
+          />
+        </template>
+        <template #replyContent="{ row }">
+          <ReplyContentCell :row="row" />
+        </template>
+        <template #actions="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'primary',
+                link: true,
+                icon: ACTION_ICON.EDIT,
+                auth: ['mp:auto-reply:update'],
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'danger',
+                link: true,
+                icon: ACTION_ICON.DELETE,
+                auth: ['mp:auto-reply:delete'],
+                popConfirm: {
+                  title: '是否确认删除此数据?',
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+    </ContentWrap>
+  </Page>
+</template>

apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus';
+
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+import WxReplySelect from '#/views/mp/modules/wx-reply';
+
+import { MsgType } from './types';
+
+defineOptions({ name: 'ReplyForm' });
+
+const props = defineProps<{
+  modelValue: any;
+  msgType: MsgType;
+  reply: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:reply', v: Reply): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const reply = computed<Reply>({
+  get: () => props.reply,
+  set: (val) => emit('update:reply', val),
+});
+
+const replyForm = computed<any>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const formRef = ref<FormInstance | null>(null); // 表单 ref
+
+const RequestMessageTypes = [
+  'text',
+  'image',
+  'voice',
+  'video',
+  'shortvideo',
+  'location',
+  'link',
+]; // 允许选择的请求消息类型
+
+// 表单校验
+const rules = {
+  requestKeyword: [
+    { required: true, message: '请求的关键字不能为空', trigger: 'blur' },
+  ],
+  requestMatch: [
+    { required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
+  ],
+};
+
+defineExpose({
+  resetFields: () => formRef.value?.resetFields(),
+  validate: async () => formRef.value?.validate(),
+});
+</script>
+
+<template>
+  <div>
+    <ElForm ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
+      <ElFormItem
+        label="消息类型"
+        prop="requestMessageType"
+        v-if="msgType === MsgType.Message"
+      >
+        <ElSelect v-model="replyForm.requestMessageType" placeholder="请选择">
+          <template
+            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
+            :key="dict.value"
+          >
+            <ElOption
+              v-if="RequestMessageTypes.includes(dict.value as string)"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </template>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="匹配类型"
+        prop="requestMatch"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <ElSelect
+          v-model="replyForm.requestMatch"
+          placeholder="请选择匹配类型"
+          clearable
+        >
+          <ElOption
+            v-for="dict in getDictOptions(
+              DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+              'number',
+            )"
+            :key="String(dict.value)"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="关键词"
+        prop="requestKeyword"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <ElInput
+          v-model="replyForm.requestKeyword"
+          placeholder="请输入内容"
+          clearable
+        />
+      </ElFormItem>
+      <ElFormItem label="回复消息">
+        <WxReplySelect v-model="reply" />
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
+
+<style scoped></style>

apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import WxMusic from '#/views/mp/modules/wx-music';
+import WxNews from '#/views/mp/modules/wx-news';
+import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+
+defineOptions({ name: 'ReplyContentCell' });
+
+const props = defineProps<{
+  row: any;
+}>();
+</script>
+
+<template>
+  <div>
+    <div v-if="props.row.responseMessageType === 'text'">
+      {{ props.row.responseContent }}
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'voice'">
+      <WxVoicePlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'image'">
+      <a target="_blank" :href="props.row.responseMediaUrl">
+        <img :src="props.row.responseMediaUrl" style="width: 100px" />
+      </a>
+    </div>
+    <div
+      v-else-if="
+        props.row.responseMessageType === 'video' ||
+        props.row.responseMessageType === 'shortvideo'
+      "
+    >
+      <WxVideoPlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+        style="margin-top: 10px"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'news'">
+      <WxNews :articles="props.row.responseArticles" />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'music'">
+      <WxMusic
+        :title="props.row.responseTitle"
+        :description="props.row.responseDescription"
+        :thumb-media-url="props.row.responseThumbMediaUrl"
+        :music-url="props.row.responseMusicUrl"
+        :hq-music-url="props.row.responseHqMusicUrl"
+      />
+    </div>
+  </div>
+</template>

apps/web-ele/src/views/mp/autoReply/modules/form.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+import { ReplyType } from '#/views/mp/modules/wx-reply/components/types';
+
+import ReplyForm from './ReplyForm.vue';
+import { MsgType } from './types';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
+
+const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
+const replyForm = ref<any>({});
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+});
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating
+    ? $t('ui.actionTitle.create', ['自动回复'])
+    : $t('ui.actionTitle.edit', ['自动回复']);
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    // 处理回复消息
+    const submitForm: any = { ...replyForm.value };
+    submitForm.responseMessageType = reply.value.type;
+    submitForm.responseContent = reply.value.content;
+    submitForm.responseMediaId = reply.value.mediaId;
+    submitForm.responseMediaUrl = reply.value.url;
+    submitForm.responseTitle = reply.value.title;
+    submitForm.responseDescription = reply.value.description;
+    submitForm.responseThumbMediaId = reply.value.thumbMediaId;
+    submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
+    submitForm.responseArticles = reply.value.articles;
+    submitForm.responseMusicUrl = reply.value.musicUrl;
+    submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
+
+    modalApi.lock();
+    try {
+      if (replyForm.value.id === undefined) {
+        await MpAutoReplyApi.createAutoReply(submitForm);
+        ElMessage.success('新增成功');
+      } else {
+        await MpAutoReplyApi.updateAutoReply(submitForm);
+        ElMessage.success('修改成功');
+      }
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      replyForm.value = {};
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: -1,
+      };
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      accountId?: number;
+      isCreating: boolean;
+      msgType: MsgType;
+      row?: any;
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+
+    if (data.isCreating) {
+      // 新建：初始化表单
+      replyForm.value = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+      };
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: data.accountId || -1,
+      };
+    } else if (data.row) {
+      // 编辑：加载数据
+      const rowData = data.row;
+      replyForm.value = { ...rowData };
+      delete replyForm.value.responseMessageType;
+      delete replyForm.value.responseContent;
+      delete replyForm.value.responseMediaId;
+      delete replyForm.value.responseMediaUrl;
+      delete replyForm.value.responseDescription;
+      delete replyForm.value.responseArticles;
+      reply.value = {
+        type: rowData.responseMessageType,
+        accountId: data.accountId || -1,
+        content: rowData.responseContent,
+        mediaId: rowData.responseMediaId,
+        url: rowData.responseMediaUrl,
+        title: rowData.responseTitle,
+        description: rowData.responseDescription,
+        thumbMediaId: rowData.responseThumbMediaId,
+        thumbMediaUrl: rowData.responseThumbMediaUrl,
+        articles: rowData.responseArticles,
+        musicUrl: rowData.responseMusicUrl,
+        hqMusicUrl: rowData.responseHqMusicUrl,
+      };
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <ReplyForm
+      v-if="formData"
+      v-model="replyForm"
+      v-model:reply="reply"
+      :msg-type="formData.msgType"
+      ref="formRef"
+    />
+  </Modal>
+</template>

apps/web-ele/src/views/mp/autoReply/modules/types.ts

@@ -0,0 +1,7 @@
+// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
+// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
+export enum MsgType {
+  Follow = 1,
+  Keyword = 3,
+  Message = 2,
+}

apps/web-ele/src/views/mp/modules/wx-account-select/main.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MpAccountApi } from '#/api/mp/account';
 
-import { onMounted, reactive, ref, unref } from 'vue';
+import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { ElMessage } from 'element-plus';
@@ -11,8 +11,13 @@ import { useTagsViewStore } from '#/store/tagsView';
 
 defineOptions({ name: 'WxAccountSelect' });
 
+const props = defineProps<{
+  modelValue?: number;
+}>();
+
 const emit = defineEmits<{
   (e: 'change', id: number, name: string): void;
+  (e: 'update:modelValue', id: number): void;
 }>();
 
 const message = ElMessage; // 消息弹窗
@@ -26,6 +31,51 @@ const account: MpAccountApi.AccountSimple = reactive({
 
 const accountList = ref<MpAccountApi.AccountSimple[]>([]);
 
+// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
+const currentId = computed({
+  get: () => {
+    // 如果外部传入了 modelValue，优先使用外部的值
+    if (props.modelValue !== undefined && props.modelValue !== null) {
+      return props.modelValue;
+    }
+    return account.id;
+  },
+  set: (value: number) => {
+    // 更新内部状态
+    account.id = value;
+    // 同步到外部（表单系统）
+    emit('update:modelValue', value);
+    // 触发 change 事件（保持向后兼容）
+    const found = accountList.value.find(
+      (v: MpAccountApi.AccountSimple) => v.id === value,
+    );
+    if (found) {
+      account.name = found.name;
+      emit('change', value, found.name);
+    }
+  },
+});
+
+// 监听外部 modelValue 变化，同步到内部状态
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (
+      newValue !== undefined &&
+      newValue !== null &&
+      newValue !== account.id
+    ) {
+      account.id = newValue;
+      const found = accountList.value.find(
+        (v: MpAccountApi.AccountSimple) => v.id === newValue,
+      );
+      if (found) {
+        account.name = found.name;
+      }
+    }
+  },
+);
+
 /** 查询公众号列表 */
 async function handleQuery() {
   accountList.value = await getSimpleAccountList();
@@ -35,25 +85,31 @@ async function handleQuery() {
     await push({ name: 'MpAccount' });
     return;
   }
-  // 默认选中第一个
-  const firstAccount = accountList.value[0];
-  if (firstAccount) {
-    account.id = firstAccount.id;
-    if (account.id) {
+
+  // 如果外部没有传入值（modelValue 为空），默认选中第一个
+  if (props.modelValue === undefined || props.modelValue === null) {
+    const firstAccount = accountList.value[0];
+    if (firstAccount) {
+      currentId.value = firstAccount.id;
       account.name = firstAccount.name;
-      emit('change', account.id, account.name);
+      emit('change', firstAccount.id, firstAccount.name);
+    }
+  } else {
+    // 如果外部有值，同步到内部状态
+    const found = accountList.value.find(
+      (v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
+    );
+    if (found) {
+      account.id = props.modelValue;
+      account.name = found.name;
     }
   }
 }
 
 /** 公众号变化 */
 function onChanged(id?: number) {
-  const found = accountList.value.find(
-    (v: MpAccountApi.AccountSimple) => v.id === id,
-  );
-  if (account.id && found) {
-    account.name = found.name;
-    emit('change', account.id, account.name);
+  if (id) {
+    currentId.value = id;
   }
 }
 
@@ -65,7 +121,7 @@ onMounted(() => {
 
 <template>
   <el-select
-    v-model="account.id"
+    v-model="currentId"
     placeholder="请选择公众号"
     class="!w-240px"
     @change="onChanged"

apps/web-ele/src/views/mp/modules/wx-video-play/main.vue

@@ -13,9 +13,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-// import { VideoPlayer } from '@videojs-player/vue';
+import { VideoPlayer } from '@videojs-player/vue';
 
-// import 'video.js/dist/video-js.css';
+import 'video.js/dist/video-js.css';
 
 defineOptions({ name: 'WxVideoPlayer' });
 
@@ -52,7 +52,6 @@ const playVideo = () => {
         class="video-player vjs-big-play-centered"
         :src="props.url"
         poster=""
-        crossorigin="anonymous"
         controls
         playsinline
         :volume="0.6"