From a8ccd4798a9f4a7463e4fc3f4b2edcab0b754055 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Mon, 24 Nov 2025 16:07:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(hooks):=20=E6=B7=BB=E5=8A=A0=E5=AA=92?=
 =?UTF-8?q?=E4=BD=93=E7=BB=84=E4=BB=B6=E9=80=9A=E7=94=A8hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建 useMediaComponent hook 处理媒体组件公共逻辑
- 实现本地表单数据响应式拷贝与深度监听更新
- 提供表单字段更新方法并触发事件通知
- 定义文件基础URL常量便于统一管理
- 支持 dialogVideoForm 属性的双向绑定更新
- 集成 Vue Composition API 的 ref 和 watch 功能
---
 src/hooks/useMediaComponent.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/hooks/useMediaComponent.js

diff --git a/src/hooks/useMediaComponent.js b/src/hooks/useMediaComponent.js
new file mode 100644
index 00000000..939f795a
--- /dev/null
+++ b/src/hooks/useMediaComponent.js
@@ -0,0 +1,34 @@
+import { ref, watch } from "vue";
+
+/**
+ * 通用媒体组件hook，用于处理媒体组件的公共逻辑
+ * @param {Object} props - 组件props
+ * @param {Function} emit - 组件emit函数
+ */
+export function useMediaComponent(props, emit) {
+  // Create a reactive copy of the prop for local modifications
+  const localDialogVideoForm = ref({ ...props.dialogVideoForm });
+
+  // Watch for changes in the prop and update the local copy
+  watch(
+    () => props.dialogVideoForm,
+    (newVal) => {
+      Object.assign(localDialogVideoForm.value, newVal);
+    },
+    { deep: true }
+  );
+
+  // Update form values and emit changes
+  const updateFormValue = (field, value) => {
+    localDialogVideoForm.value[field] = value;
+    emit("update:dialogVideoForm", { ...localDialogVideoForm.value });
+  };
+
+  const fileBaseUrl = "http://home.hzer.xyz:9960/upload";
+
+  return {
+    localDialogVideoForm,
+    updateFormValue,
+    fileBaseUrl,
+  };
+}