fe-manage/src/hooks/useMediaComponent.js

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;
    if (emit) {
      emit("update:dialogVideoForm", { ...localDialogVideoForm.value });
    }
  };

  const fileBaseUrl = `${process.env.VUE_APP_BOE_API_URL}${process.env.VUE_APP_FILE_PATH}`;

  return {
    localDialogVideoForm,
    updateFormValue,
    fileBaseUrl,
  };
}