feat(hooks): 添加媒体组件通用hook

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

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