diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 5f315ad38..ef663925f 100644
--- a/apps/web-antd/package.json
+++ b/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:",
diff --git a/apps/web-antd/src/assets/imgs/wechat.png b/apps/web-antd/src/assets/imgs/wechat.png
new file mode 100644
index 000000000..6afc5e41c
Binary files /dev/null and b/apps/web-antd/src/assets/imgs/wechat.png differ
diff --git a/apps/web-antd/src/store/index.ts b/apps/web-antd/src/store/index.ts
index 269586ee8..af0c4ab6f 100644
--- a/apps/web-antd/src/store/index.ts
+++ b/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 };
diff --git a/apps/web-antd/src/store/tagsView.ts b/apps/web-antd/src/store/tagsView.ts
new file mode 100644
index 000000000..396f581e8
--- /dev/null
+++ b/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);
+};
diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts
index 3a066fd4a..5877010a3 100644
--- a/apps/web-antd/src/utils/index.ts
+++ b/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;
+};
diff --git a/apps/web-antd/src/utils/routerHelper.ts b/apps/web-antd/src/utils/routerHelper.ts
index 0f3c52096..a9e99f54b 100644
--- a/apps/web-antd/src/utils/routerHelper.ts
+++ b/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[],
+  };
+};
diff --git a/apps/web-antd/src/views/mp/autoReply/data.ts b/apps/web-antd/src/views/mp/autoReply/data.ts
new file mode 100644
index 000000000..31c0481b5
--- /dev/null
+++ b/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),
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/autoReply/index.vue b/apps/web-antd/src/views/mp/autoReply/index.vue
index 06996f6d1..fb1b9ce3f 100644
--- a/apps/web-antd/src/views/mp/autoReply/index.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/ReplyForm.vue b/apps/web-antd/src/views/mp/autoReply/modules/ReplyForm.vue
new file mode 100644
index 000000000..d8e137083
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/ReplyTable.vue b/apps/web-antd/src/views/mp/autoReply/modules/ReplyTable.vue
new file mode 100644
index 000000000..bdfb41ade
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/form.vue b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
new file mode 100644
index 000000000..7f9b9ed38
--- /dev/null
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/types.ts b/apps/web-antd/src/views/mp/autoReply/modules/types.ts
new file mode 100644
index 000000000..f07a7d758
--- /dev/null
+++ b/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,
+}
diff --git a/apps/web-antd/src/views/mp/modules/wx-account-select/main.vue b/apps/web-antd/src/views/mp/modules/wx-account-select/main.vue
index 75272e669..8388a6e9a 100644
--- a/apps/web-antd/src/views/mp/modules/wx-account-select/main.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/components/TabVideo.vue b/apps/web-antd/src/views/mp/modules/wx-reply/components/TabVideo.vue
index a0bc1b5b1..f8d8f72df 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/components/TabVideo.vue
+++ b/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" />
diff --git a/apps/web-antd/src/views/mp/modules/wx-video-play/main.vue b/apps/web-antd/src/views/mp/modules/wx-video-play/main.vue
index 4e812b5c8..7a2b4a12c 100644
--- a/apps/web-antd/src/views/mp/modules/wx-video-play/main.vue
+++ b/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"
diff --git a/apps/web-ele/.env.development b/apps/web-ele/.env.development
index cb83c77f0..274ab994d 100644
--- a/apps/web-ele/.env.development
+++ b/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 为关闭
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index 9ded8eee4..3b6c93fe5 100644
--- a/apps/web-ele/package.json
+++ b/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:",
diff --git a/apps/web-ele/src/assets/imgs/wechat.png b/apps/web-ele/src/assets/imgs/wechat.png
new file mode 100644
index 000000000..6afc5e41c
Binary files /dev/null and b/apps/web-ele/src/assets/imgs/wechat.png differ
diff --git a/apps/web-ele/src/views/mp/autoReply/data.ts b/apps/web-ele/src/views/mp/autoReply/data.ts
new file mode 100644
index 000000000..541ad2cdc
--- /dev/null
+++ b/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),
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/autoReply/index.vue b/apps/web-ele/src/views/mp/autoReply/index.vue
new file mode 100644
index 000000000..fed1b9f6b
--- /dev/null
+++ b/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>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue b/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
new file mode 100644
index 000000000..f55afc365
--- /dev/null
+++ b/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>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue b/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue
new file mode 100644
index 000000000..bdfb41ade
--- /dev/null
+++ b/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>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/form.vue b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
new file mode 100644
index 000000000..a4a37438a
--- /dev/null
+++ b/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>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/types.ts b/apps/web-ele/src/views/mp/autoReply/modules/types.ts
new file mode 100644
index 000000000..f07a7d758
--- /dev/null
+++ b/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,
+}
diff --git a/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue b/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue
index d154b892f..abad94cce 100644
--- a/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue
+++ b/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"
diff --git a/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue b/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue
index 364b05890..1b7260576 100644
--- a/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue
+++ b/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"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 049d842ca..7be5a7c69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -159,6 +159,9 @@ catalogs:
     '@vee-validate/zod':
       specifier: ^4.15.1
       version: 4.15.1
+    '@videojs-player/vue':
+      specifier: ^1.0.0
+      version: 1.0.0
     '@vite-pwa/vitepress':
       specifier: ^1.0.0
       version: 1.0.1
@@ -543,6 +546,9 @@ catalogs:
     vee-validate:
       specifier: ^4.15.1
       version: 4.15.1
+    video.js:
+      specifier: ^7.21.6
+      version: 7.21.7
     vite:
       specifier: ^7.1.2
       version: 7.1.11
@@ -797,6 +803,9 @@ importers:
       '@vben/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@videojs-player/vue':
+        specifier: 'catalog:'
+        version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.22(typescript@5.9.3))
       '@vueuse/core':
         specifier: 'catalog:'
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
@@ -845,6 +854,9 @@ importers:
       tinymce:
         specifier: 'catalog:'
         version: 7.9.1
+      video.js:
+        specifier: 'catalog:'
+        version: 7.21.7
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
@@ -914,6 +926,9 @@ importers:
       '@vben/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@videojs-player/vue':
+        specifier: 'catalog:'
+        version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.22(typescript@5.9.3))
       '@vueuse/core':
         specifier: 'catalog:'
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
@@ -941,6 +956,9 @@ importers:
       tinymce:
         specifier: 'catalog:'
         version: 7.9.1
+      video.js:
+        specifier: 'catalog:'
+        version: 7.21.7
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
@@ -4953,6 +4971,9 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+  '@types/video.js@7.3.58':
+    resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==}
+
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
@@ -5164,6 +5185,26 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@videojs-player/vue@1.0.0':
+    resolution: {integrity: sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg==}
+    peerDependencies:
+      '@types/video.js': 7.x
+      video.js: 7.x
+      vue: ^3.5.17
+
+  '@videojs/http-streaming@2.16.3':
+    resolution: {integrity: sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      video.js: ^6 || ^7
+
+  '@videojs/vhs-utils@3.0.5':
+    resolution: {integrity: sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==}
+    engines: {node: '>=8', npm: '>=5'}
+
+  '@videojs/xhr@2.6.0':
+    resolution: {integrity: sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==}
+
   '@vite-pwa/vitepress@1.0.1':
     resolution: {integrity: sha512-INBxiNLZpef349KSmQ6zHWB4uqIgZgvJnwzH3bedW/7d/Ej0lK5HP95fiBdIc2wHUtmR3Znnegmt3zLESVWrpA==}
     peerDependencies:
@@ -5449,6 +5490,10 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
+  '@xmldom/xmldom@0.8.11':
+    resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
+    engines: {node: '>=10.0.0'}
+
   '@xyflow/svelte@1.4.0':
     resolution: {integrity: sha512-LXokbj1nEP8FROE/y9/xU11G4dM2+mGBiMmPU714Mmk+bGnyot+nZmyR8Y7OFBUahY1mnMNfeclLPJKGy3r7tA==}
     peerDependencies:
@@ -5488,6 +5533,9 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  aes-decrypter@3.1.3:
+    resolution: {integrity: sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==}
+
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -6741,6 +6789,9 @@ packages:
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
+  dom-walk@0.1.2:
+    resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
+
   dom-zindex@1.0.6:
     resolution: {integrity: sha512-FKWIhiU96bi3xpP9ewRMgANsoVmMUBnMnmpCT6dPMZOunVYJQmJhSRruoI0XSPoHeIif3kyEuiHbFrOJwEJaEA==}
 
@@ -7563,6 +7614,9 @@ packages:
     resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
     engines: {node: '>=6'}
 
+  global@4.4.0:
+    resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
+
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -7795,6 +7849,9 @@ packages:
     resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
     engines: {node: '>=12'}
 
+  individual@2.0.0:
+    resolution: {integrity: sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -7912,6 +7969,9 @@ packages:
     resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
     engines: {node: '>=18'}
 
+  is-function@1.0.2:
+    resolution: {integrity: sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==}
+
   is-generator-function@1.1.2:
     resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
     engines: {node: '>= 0.4'}
@@ -8216,6 +8276,9 @@ packages:
     resolution: {integrity: sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==}
     hasBin: true
 
+  keycode@2.2.1:
+    resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -8503,6 +8566,9 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  m3u8-parser@4.8.0:
+    resolution: {integrity: sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==}
+
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
@@ -8650,6 +8716,9 @@ packages:
   min-dash@4.2.3:
     resolution: {integrity: sha512-VLMYQI5+FcD9Ad24VcB08uA83B07OhueAlZ88jBK6PyupTvEJwllTMUqMy0wPGYs7pZUEtEEMWdHB63m3LtEcg==}
 
+  min-document@2.19.0:
+    resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
+
   min-dom@4.2.1:
     resolution: {integrity: sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==}
 
@@ -8742,6 +8811,10 @@ packages:
   moddle@6.2.3:
     resolution: {integrity: sha512-bLVN+ZHL3aKnhxc19XtjUfvdJsS3EsiEJC7bT6YPD11qYmTzvsxrGgyYz1Ouof7TZuGw0lDJ1OLmEnxcpQWk3Q==}
 
+  mpd-parser@0.22.1:
+    resolution: {integrity: sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==}
+    hasBin: true
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -8760,6 +8833,11 @@ packages:
     resolution: {integrity: sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==}
     engines: {node: '>=10'}
 
+  mux.js@6.0.1:
+    resolution: {integrity: sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==}
+    engines: {node: '>=8', npm: '>=5'}
+    hasBin: true
+
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -9194,6 +9272,10 @@ packages:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
+  pkcs7@1.0.4:
+    resolution: {integrity: sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==}
+    hasBin: true
+
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -10066,6 +10148,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rust-result@1.0.0:
+    resolution: {integrity: sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==}
+
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
@@ -10083,6 +10168,9 @@ packages:
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
+  safe-json-parse@4.0.0:
+    resolution: {integrity: sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==}
+
   safe-push-apply@1.0.0:
     resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
     engines: {node: '>= 0.4'}
@@ -11064,6 +11152,9 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  url-toolkit@2.2.5:
+    resolution: {integrity: sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==}
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -11083,6 +11174,15 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
+  video.js@7.21.7:
+    resolution: {integrity: sha512-T2s3WFAht7Zjr2OSJamND9x9Dn2O+Z5WuHGdh8jI5SYh5mkMdVTQ7vSRmA5PYpjXJ2ycch6jpMjkJEIEU2xxqw==}
+
+  videojs-font@3.2.0:
+    resolution: {integrity: sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==}
+
+  videojs-vtt.js@0.15.5:
+    resolution: {integrity: sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==}
+
   vite-hot-client@2.1.0:
     resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
     peerDependencies:
@@ -14898,6 +14998,8 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
+  '@types/video.js@7.3.58': {}
+
   '@types/web-bluetooth@0.0.16': {}
 
   '@types/web-bluetooth@0.0.20': {}
@@ -15123,6 +15225,35 @@ snapshots:
       - rollup
       - supports-color
 
+  '@videojs-player/vue@1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@types/video.js': 7.3.58
+      video.js: 7.21.7
+      vue: 3.5.22(typescript@5.9.3)
+
+  '@videojs/http-streaming@2.16.3(video.js@7.21.7)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      aes-decrypter: 3.1.3
+      global: 4.4.0
+      m3u8-parser: 4.8.0
+      mpd-parser: 0.22.1
+      mux.js: 6.0.1
+      video.js: 7.21.7
+
+  '@videojs/vhs-utils@3.0.5':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+      url-toolkit: 2.2.5
+
+  '@videojs/xhr@2.6.0':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+      is-function: 1.0.2
+
   '@vite-pwa/vitepress@1.0.1(vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0))':
     dependencies:
       vite-plugin-pwa: 1.1.0(vite@5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
@@ -15489,6 +15620,8 @@ snapshots:
       vue: 3.5.22(typescript@5.9.3)
       xe-utils: 3.7.9
 
+  '@xmldom/xmldom@0.8.11': {}
+
   '@xyflow/svelte@1.4.0(svelte@5.41.1)':
     dependencies:
       '@svelte-put/shortcut': 4.1.0(svelte@5.41.1)
@@ -15530,6 +15663,13 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  aes-decrypter@3.1.3:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      global: 4.4.0
+      pkcs7: 1.0.4
+
   agent-base@7.1.4: {}
 
   ajv-draft-04@1.0.0(ajv@8.13.0):
@@ -16928,6 +17068,8 @@ snapshots:
       domhandler: 5.0.3
       entities: 4.5.0
 
+  dom-walk@0.1.2: {}
+
   dom-zindex@1.0.6: {}
 
   domelementtype@2.3.0: {}
@@ -17934,6 +18076,11 @@ snapshots:
       kind-of: 6.0.3
       which: 1.3.1
 
+  global@4.4.0:
+    dependencies:
+      min-document: 2.19.0
+      process: 0.11.10
+
   globals@14.0.0: {}
 
   globals@15.15.0: {}
@@ -18179,6 +18326,8 @@ snapshots:
 
   indent-string@5.0.0: {}
 
+  individual@2.0.0: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -18292,6 +18441,8 @@ snapshots:
     dependencies:
       get-east-asian-width: 1.4.0
 
+  is-function@1.0.2: {}
+
   is-generator-function@1.1.2:
     dependencies:
       call-bound: 1.0.4
@@ -18557,6 +18708,8 @@ snapshots:
     dependencies:
       commander: 8.3.0
 
+  keycode@2.2.1: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -18822,6 +18975,12 @@ snapshots:
 
   lz-string@1.5.0: {}
 
+  m3u8-parser@4.8.0:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      global: 4.4.0
+
   magic-string@0.25.9:
     dependencies:
       sourcemap-codec: 1.4.8
@@ -18976,6 +19135,10 @@ snapshots:
 
   min-dash@4.2.3: {}
 
+  min-document@2.19.0:
+    dependencies:
+      dom-walk: 0.1.2
+
   min-dom@4.2.1:
     dependencies:
       component-event: 0.2.1
@@ -19077,6 +19240,13 @@ snapshots:
     dependencies:
       min-dash: 4.2.3
 
+  mpd-parser@0.22.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      '@xmldom/xmldom': 0.8.11
+      global: 4.4.0
+
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
@@ -19093,6 +19263,11 @@ snapshots:
       arrify: 2.0.1
       minimatch: 3.1.2
 
+  mux.js@6.0.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -19592,6 +19767,10 @@ snapshots:
 
   pirates@4.0.7: {}
 
+  pkcs7@1.0.4:
+    dependencies:
+      '@babel/runtime': 7.28.4
+
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -20453,6 +20632,10 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  rust-result@1.0.0:
+    dependencies:
+      individual: 2.0.0
+
   rw@1.3.3: {}
 
   sade@1.8.1:
@@ -20471,6 +20654,10 @@ snapshots:
 
   safe-buffer@5.2.1: {}
 
+  safe-json-parse@4.0.0:
+    dependencies:
+      rust-result: 1.0.0
+
   safe-push-apply@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -21581,6 +21768,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  url-toolkit@2.2.5: {}
+
   util-deprecate@1.0.2: {}
 
   vdirs@0.1.8(vue@3.5.22(typescript@5.9.3)):
@@ -21604,6 +21793,28 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
+  video.js@7.21.7:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/http-streaming': 2.16.3(video.js@7.21.7)
+      '@videojs/vhs-utils': 3.0.5
+      '@videojs/xhr': 2.6.0
+      aes-decrypter: 3.1.3
+      global: 4.4.0
+      keycode: 2.2.1
+      m3u8-parser: 4.8.0
+      mpd-parser: 0.22.1
+      mux.js: 6.0.1
+      safe-json-parse: 4.0.0
+      videojs-font: 3.2.0
+      videojs-vtt.js: 0.15.5
+
+  videojs-font@3.2.0: {}
+
+  videojs-vtt.js@0.15.5:
+    dependencies:
+      global: 4.4.0
+
   vite-hot-client@2.1.0(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 53e1e50a3..65a071919 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -76,6 +76,7 @@ catalog:
   '@vueuse/core': ^13.4.0
   '@vueuse/integrations': ^13.4.0
   '@vueuse/motion': ^3.0.3
+  '@videojs-player/vue': ^1.0.0
   ant-design-vue: ^4.2.6
   archiver: ^7.0.1
   autoprefixer: ^10.4.21
@@ -220,6 +221,7 @@ catalog:
   vuedraggable: ^4.1.0
   vxe-pc-ui: ^4.9.29
   vxe-table: ^4.16.11
+  video.js: ^7.21.6
   watermark-js-plus: ^1.6.2
   zod: ^3.25.67
   zod-defaults: ^0.1.3