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