@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/ConfigCensorship.vue

@@ -1,387 +1,387 @@
-<script setup lang="ts">
-const showModel = ref(false)
-const formRef = ref()
-const formPathValue = ref({
-  path: '',
-})
-
-const { formValue } = useElFormContext()
-const isEvent = ref(inject('isEvent'))
-const isPlayout = ref(inject('isPlayout'))
-const { formRef: formRefCensorship } = useElFormContext()
-const { transcodeInput, packageInput } = useGetInputDetail({ formValue, isEvent })
-const input = computed(() => transcodeInput.value || packageInput.value)
-
-const { schemaObj: schemaObjCensorshipInfo } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'CensorshipInfo')
-const { schemaObj: schemaObjCensorshipConfigInfo } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'CensorshipConfigDTO')
-
-const { t } = useI18n()
-
-const [censorshipValue, censorshipAttrs] = useElField<boolean>('channelConfig.censorship')
-const [encoderIdValue] = useElField<number>('channelConfig.machineConfig.encoderId')
-const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.censorship.enable', [
-  {
-    validator: (rule, value, callback) => {
-      if (value && encoderIdValue.value === -1)
-        callback(new Error(t('SSConfig.this_feature_is_only_supported_when_using_nvenc_please_switch_to_nvenc_or_disable_the_feature_to_continue')))
-      callback()
-    },
-    trigger: ['blur', 'change'],
-  },
-])
-const [machineConfigValue] = useElField<boolean>('channelConfig.machineConfig')
-const [modelValue, modelAttrs] = useElField<number>('channelConfig.censorship.model', [
-  {
-    required: true,
-    message: t('channel.model_is_required'),
-    trigger: ['blur', 'change'],
-  },
-], { enabled: enableValue })
-
-const [scoreValue, scoreAttrs] = useElField<number>('channelConfig.censorship.score', [], { enabled: enableValue })
-
-onMounted(() => {
-  formRefCensorship.value.validateField('channelConfig.censorship.enable')
-})
-
-const loadPathEventMutation = useMutation(
-  (payload: {
-    machineConfig: any
-    path: string
-  }) => $transcodeApi('/api/transcode/channel-configs/load-ads', {
-    body: {
-      ...payload.machineConfig,
-      path: payload.path,
-    },
-    method: 'POST',
-  }),
-)
-
-const loadPathPlayoutMutation = useMutation(
-  (payload: {
-    machineConfig: any
-    path: string
-  }) => $playoutApi('/api/playout/channel-configs/load-ads', {
-    body: {
-      ...payload.machineConfig,
-      path: payload.path,
-    },
-    method: 'POST',
-  }),
-)
-
-const listSrcImagePath = ref()
-
-const listIconPath = computed(() => {
-  return censorshipValue.value?.data?.map(item => item?.imagePath)
-})
-
-watch([listIconPath, input], async (val) => {
-  if (val?.[0]?.length > 0 && val?.[1]) {
-    const promisesImage = getPromiseBase64(censorshipValue.value.data.map(item => item.imagePath))
-
-    const data = await Promise.all(promisesImage)
-    listSrcImagePath.value = data.map(item => item.data)
-  }
-}, { deep: true, immediate: true })
-
-function getPromiseBase64(arrPath: string[]) {
-  let serverConfig
-
-  if (isPlayout.value || isEvent.value) {
-    serverConfig = {
-      machineId: machineConfigValue.value?.machineId,
-      machineType: machineConfigValue.value?.machineType,
-      mode: machineConfigValue.value?.mode,
-    }
-  }
-  else {
-    serverConfig = {
-      machineId: input.value?.machineConfig?.machineId,
-      machineType: input.value?.machineConfig?.machineType,
-      mode: input.value?.machineConfig?.mode,
-      specMachineId: input.value?.machineConfig?.specMachineId || undefined,
-    }
-  }
-  return arrPath.map(async (item) => {
-    return isEvent.value
-      ? await $transcodeApi('/api/transcode/channel-configs/read-file', {
-        body: {
-          machineId: serverConfig?.machineId,
-          machineType: serverConfig?.machineType,
-          mode: serverConfig?.mode,
-          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
-          path: item,
-          base: 'base64',
-        },
-        method: 'POST',
-      })
-      : await $playoutApi('/api/playout/channel-configs/read-file', {
-        body: {
-          machineId: serverConfig?.machineId,
-          machineType: serverConfig?.machineType,
-          mode: serverConfig?.mode,
-          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
-          path: item,
-          base: 'base64',
-        },
-        method: 'POST',
-      })
-  })
-}
-
-const listConfigAds = ref([])
-const loadedPath = ref()
-async function onLoadPath() {
-  formRef.value.validate(async (valid: boolean) => {
-    let serverConfig
-
-    if (isPlayout.value || isEvent.value) {
-      serverConfig = {
-        machineId: machineConfigValue.value?.machineId,
-        machineType: machineConfigValue.value?.machineType,
-        mode: machineConfigValue.value?.mode,
-      }
-    }
-    else {
-      serverConfig = {
-        machineId: input.value?.machineConfig?.machineId,
-        machineType: input.value?.machineConfig?.machineType,
-        mode: input.value?.machineConfig?.mode,
-        specMachineId: input.value?.machineConfig?.specMachineId || undefined,
-      }
-    }
-    if (valid) {
-      const rs = await (isEvent.value ? loadPathEventMutation : loadPathPlayoutMutation).mutateAsync({
-        machineConfig: {
-          machineId: serverConfig?.machineId,
-          machineType: serverConfig?.machineType,
-          mode: serverConfig?.mode,
-          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
-        },
-        path: formPathValue.value.path,
-      })
-      console.log(rs)
-      loadedPath.value = formPathValue.value.path
-      ElMessage.success(t('base_library.load_path_successfully'))
-      if (rs?.results?.length > 0) {
-        listConfigAds.value = rs.results.filter(item => item.action === 'detect').map(item => ({ ...item, id: genUUID() }))
-      }
-      else {
-        listConfigAds.value = []
-      }
-    }
-  })
-}
-
-function onShowModel() {
-  if (!input.value) {
-    ElMessage({
-      message: t('Transcode.please_configure_the_input'),
-      type: 'warning',
-    })
-    return
-  }
-  showModel.value = true
-}
-
-const selectedConfig = ref()
-async function handleSelectConfig(config) {
-  if (config && config.action === 'detect') {
-    censorshipValue.value.action = config.action
-    censorshipValue.value.type = config.type
-    censorshipValue.value.score = config.score
-    censorshipValue.value.pathModel = formPathValue.value.path
-    modelValue.value = config.path
-    censorshipValue.value.data = config.items.map((item) => {
-      if (config.action === 'detect') {
-        return {
-          ...item,
-          enable: true,
-          imagePath: item.icon,
-        }
-      }
-    })
-
-    const promisesImage = getPromiseBase64(censorshipValue.value.data.map(item => item.imagePath))
-    const data = await Promise.all(promisesImage)
-    listSrcImagePath.value = data.map(item => item.data)
-
-    showModel.value = false
-    formPathValue.value.path = ''
-    loadedPath.value = ''
-    listConfigAds.value = []
-  }
-  else {
-    ElMessage.error($t('base_library.please_select_a_model'))
-    // ElMessage.error({
-    //   dangerouslyUseHTMLString: true,
-    //   message: $t('base_library.feature_mismatch_the_path_cannot_be_used_with_feature-name', ['<strong>Ads detect</strong>']),
-    // })
-  }
-}
-const currentRowId = ref()
-</script>
-
-<template>
-  <div class="grid grid-cols-[2fr_2fr_12fr] gap-2">
-    <el-form-item v-bind="enableAttrs" class="w-130px">
-      <template #label>
-        <SSInformationLabel :label="$t('SSConfig.form.label.enable')" :info="schemaObjCensorshipInfo.enable" />
-      </template>
-      <el-switch
-        v-model="enableValue"
-        :active-value="true"
-        :inactive-value="false"
-        :disabled="encoderIdValue === -1 && !enableValue"
-      />
-    </el-form-item>
-    <el-form-item v-bind="modelAttrs" class="w-80px">
-      <el-input v-model="modelValue" class="hidden" />
-      <el-button
-        class="w-full"
-        type="primary"
-        :disabled="!enableValue"
-        @click="onShowModel"
-      >
-        {{ $t('transcode.load') }}
-      </el-button>
-    </el-form-item>
-    <el-form-item v-if="censorshipValue?.pathModel" label="Path Model">
-      <el-text>{{ censorshipValue?.pathModel }}</el-text>
-    </el-form-item>
-  </div>
-  <template v-if="censorshipValue?.model">
-    <div class="grid grid-cols-[2fr_2fr_4fr_8fr] gap-2">
-      <el-form-item label="Type" v-bind="scoreAttrs">
-        <template #label>
-          <SSInformationLabel label="Type" :info="schemaObjCensorshipInfo.type" />
-        </template>
-        <el-text>{{ censorshipValue?.type }}</el-text>
-      </el-form-item>
-      <el-form-item label="Action" v-bind="scoreAttrs">
-        <template #label>
-          <SSInformationLabel label="Action" :info="schemaObjCensorshipInfo.action" />
-        </template>
-        <el-text>{{ censorshipValue?.action }}</el-text>
-      </el-form-item>
-      <el-form-item label="Score" v-bind="scoreAttrs">
-        <template #label>
-          <SSInformationLabel label="Score" :info="schemaObjCensorshipConfigInfo.score" />
-        </template>
-        <el-input-number
-          v-model="scoreValue"
-          controls-position="right"
-          :min="0"
-          :max="1"
-          :precision="2"
-          :step="0.05"
-          :disabled="!enableValue"
-        />
-      </el-form-item>
-      <el-form-item>
-        <template #label>
-          <SSInformationLabel label="Model" :info="schemaObjCensorshipInfo.model" />
-        </template>
-        <el-text truncate>
-          {{ censorshipValue?.model }}
-        </el-text>
-      </el-form-item>
-    </div>
-    <el-table :data="censorshipValue?.data || []" border style="width: 100%">
-      <el-table-column prop="enable" label="On/off item" align="center">
-        <template #default="{ row }">
-          <el-switch
-            v-model="row.enable"
-            :disabled="!enableValue"
-            :active-value="true"
-            :inactive-value="false"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column prop="id" label="ID" min-width="90">
-        <template #default="{ row, $index }">
-          <div class="flex items-center">
-            <el-avatar
-              class="mr-3"
-              :size="32"
-              :src="listSrcImagePath?.[$index]"
-            />
-            <span class="text-large font-600"> {{ row.id }} </span>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-  </template>
-  <el-dialog
-    v-model="showModel"
-    width="700"
-    destroy-on-close
-  >
-    <el-form
-      ref="formRef"
-      :model="formPathValue"
-      label-width="auto"
-      @submit.prevent
-    >
-      <el-form-item
-        prop="path"
-        :rules="[
-          {
-            required: true,
-            message: $t('transcode.please_input_path_model'),
-            trigger: ['blur', 'change'],
-          },
-        ]"
-      >
-        <template #label>
-          <SSInformationLabel :label="$t('transcode.path_model')" :info="schemaObjCensorshipConfigInfo.model" />
-        </template>
-        <div class="w-full flex justify-between gap-2">
-          <el-input v-model="formPathValue.path" :placeholder="$t('base_library.example_path_to_model')" />
-          <el-button type="primary" @click="onLoadPath">
-            {{ $t('SSConfig.load') }}
-          </el-button>
-        </div>
-      </el-form-item>
-    </el-form>
-
-    <div class="mt-4 text-14px text-#606266 font-bold dark:text-#CFD3DC">
-      {{ $t('library.model_list') }}
-    </div>
-    <div>
-      {{ $t('base_library.loaded_from') }}: <span class="font-bold">{{ loadedPath }}</span>
-    </div>
-    <el-radio-group v-model="currentRowId" class="w-full">
-      <el-table
-        row-key="id"
-        :current-row-key="currentRowId"
-        :data="listConfigAds"
-        border
-      >
-        <template #empty>
-          {{ loadedPath ? $t('base_library.no_model_not_found') : $t('base.no_data') }}
-        </template>
-        <el-table-column
-          label="#"
-          width="55"
-        >
-          <template #default="{ row }">
-            <el-radio :label="row.id" @click="selectedConfig = row">
-            &nbsp;
-            </el-radio>
-          </template>
-        </el-table-column>
-        <el-table-column prop="name" label="Name" />
-        <el-table-column prop="path" label="Path" show-overflow-tooltip />
-      </el-table>
-    </el-radio-group>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button :disabled="!currentRowId" type="primary" @click="handleSelectConfig(selectedConfig)">
-          {{ $t('base_library.select') }}
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</template>
+<script setup lang="ts">
+const showModel = ref(false)
+const formRef = ref()
+const formPathValue = ref({
+  path: '',
+})
+
+const { formValue } = useElFormContext()
+const isEvent = ref(inject('isEvent'))
+const isPlayout = ref(inject('isPlayout'))
+const { formRef: formRefCensorship } = useElFormContext()
+const { transcodeInput, packageInput } = useGetInputDetail({ formValue, isEvent })
+const input = computed(() => transcodeInput.value || packageInput.value)
+
+const { schemaObj: schemaObjCensorshipInfo } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'CensorshipInfo')
+const { schemaObj: schemaObjCensorshipConfigInfo } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'CensorshipConfigDTO')
+
+const { t } = useI18n()
+
+const [censorshipValue, censorshipAttrs] = useElField<boolean>('channelConfig.censorship')
+const [encoderIdValue] = useElField<number>('channelConfig.machineConfig.encoderId')
+const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.censorship.enable', [
+  {
+    validator: (rule, value, callback) => {
+      if (value && encoderIdValue.value === -1)
+        callback(new Error(t('SSConfig.this_feature_is_only_supported_when_using_nvenc_please_switch_to_nvenc_or_disable_the_feature_to_continue')))
+      callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+const [machineConfigValue] = useElField<boolean>('channelConfig.machineConfig')
+const [modelValue, modelAttrs] = useElField<number>('channelConfig.censorship.model', [
+  {
+    required: true,
+    message: t('channel.model_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], { enabled: enableValue })
+
+const [scoreValue, scoreAttrs] = useElField<number>('channelConfig.censorship.score', [], { enabled: enableValue })
+
+onMounted(() => {
+  formRefCensorship.value.validateField('channelConfig.censorship.enable')
+})
+
+const loadPathEventMutation = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $transcodeApi('/api/transcode/channel-configs/load-ads', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const loadPathPlayoutMutation = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $playoutApi('/api/playout/channel-configs/load-ads', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const listSrcImagePath = ref()
+
+const listIconPath = computed(() => {
+  return censorshipValue.value?.data?.map(item => item?.imagePath)
+})
+
+watch([listIconPath, input], async (val) => {
+  if (val?.[0]?.length > 0 && val?.[1]) {
+    const promisesImage = getPromiseBase64(censorshipValue.value.data.map(item => item.imagePath))
+
+    const data = await Promise.all(promisesImage)
+    listSrcImagePath.value = data.map(item => item.data)
+  }
+}, { deep: true, immediate: true })
+
+function getPromiseBase64(arrPath: string[]) {
+  let serverConfig
+
+  if (isPlayout.value || isEvent.value) {
+    serverConfig = {
+      machineId: machineConfigValue.value?.machineId,
+      machineType: machineConfigValue.value?.machineType,
+      mode: machineConfigValue.value?.mode,
+    }
+  }
+  else {
+    serverConfig = {
+      machineId: input.value?.machineConfig?.machineId,
+      machineType: input.value?.machineConfig?.machineType,
+      mode: input.value?.machineConfig?.mode,
+      specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+    }
+  }
+  return arrPath.map(async (item) => {
+    return isEvent.value
+      ? await $transcodeApi('/api/transcode/channel-configs/read-file', {
+        body: {
+          machineId: serverConfig?.machineId,
+          machineType: serverConfig?.machineType,
+          mode: serverConfig?.mode,
+          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+          path: item,
+          base: 'base64',
+        },
+        method: 'POST',
+      })
+      : await $playoutApi('/api/playout/channel-configs/read-file', {
+        body: {
+          machineId: serverConfig?.machineId,
+          machineType: serverConfig?.machineType,
+          mode: serverConfig?.mode,
+          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+          path: item,
+          base: 'base64',
+        },
+        method: 'POST',
+      })
+  })
+}
+
+const listConfigAds = ref([])
+const loadedPath = ref()
+async function onLoadPath() {
+  formRef.value.validate(async (valid: boolean) => {
+    let serverConfig
+
+    if (isPlayout.value || isEvent.value) {
+      serverConfig = {
+        machineId: machineConfigValue.value?.machineId,
+        machineType: machineConfigValue.value?.machineType,
+        mode: machineConfigValue.value?.mode,
+      }
+    }
+    else {
+      serverConfig = {
+        machineId: input.value?.machineConfig?.machineId,
+        machineType: input.value?.machineConfig?.machineType,
+        mode: input.value?.machineConfig?.mode,
+        specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+      }
+    }
+    if (valid) {
+      const rs = await (isEvent.value ? loadPathEventMutation : loadPathPlayoutMutation).mutateAsync({
+        machineConfig: {
+          machineId: serverConfig?.machineId,
+          machineType: serverConfig?.machineType,
+          mode: serverConfig?.mode,
+          specMachineId: input.value?.machineConfig?.specMachineId || undefined,
+        },
+        path: formPathValue.value.path,
+      })
+      console.log(rs)
+      loadedPath.value = formPathValue.value.path
+      ElMessage.success(t('base_library.load_path_successfully'))
+      if (rs?.results?.length > 0) {
+        listConfigAds.value = rs.results.filter(item => item.action === 'detect').map(item => ({ ...item, id: genUUID() }))
+      }
+      else {
+        listConfigAds.value = []
+      }
+    }
+  })
+}
+
+function onShowModel() {
+  if (!input.value) {
+    ElMessage({
+      message: t('Transcode.please_configure_the_input'),
+      type: 'warning',
+    })
+    return
+  }
+  showModel.value = true
+}
+
+const selectedConfig = ref()
+async function handleSelectConfig(config) {
+  if (config && config.action === 'detect') {
+    censorshipValue.value.action = config.action
+    censorshipValue.value.type = config.type
+    censorshipValue.value.score = config.score
+    censorshipValue.value.pathModel = formPathValue.value.path
+    modelValue.value = config.path
+    censorshipValue.value.data = config.items.map((item) => {
+      if (config.action === 'detect') {
+        return {
+          ...item,
+          enable: true,
+          imagePath: item.icon,
+        }
+      }
+    })
+
+    const promisesImage = getPromiseBase64(censorshipValue.value.data.map(item => item.imagePath))
+    const data = await Promise.all(promisesImage)
+    listSrcImagePath.value = data.map(item => item.data)
+
+    showModel.value = false
+    formPathValue.value.path = ''
+    loadedPath.value = ''
+    listConfigAds.value = []
+  }
+  else {
+    ElMessage.error($t('base_library.please_select_a_model'))
+    // ElMessage.error({
+    //   dangerouslyUseHTMLString: true,
+    //   message: $t('base_library.feature_mismatch_the_path_cannot_be_used_with_feature-name', ['<strong>Ads detect</strong>']),
+    // })
+  }
+}
+const currentRowId = ref()
+</script>
+
+<template>
+  <div class="grid grid-cols-[2fr_2fr_12fr] gap-2">
+    <el-form-item v-bind="enableAttrs" class="w-130px">
+      <template #label>
+        <SSInformationLabel :label="$t('SSConfig.form.label.enable')" :info="schemaObjCensorshipInfo.enable" />
+      </template>
+      <el-switch
+        v-model="enableValue"
+        :active-value="true"
+        :inactive-value="false"
+        :disabled="encoderIdValue === -1 && !enableValue"
+      />
+    </el-form-item>
+    <el-form-item v-bind="modelAttrs" class="w-80px">
+      <el-input v-model="modelValue" class="hidden" />
+      <el-button
+        class="w-full"
+        type="primary"
+        :disabled="!enableValue"
+        @click="onShowModel"
+      >
+        {{ $t('transcode.load') }}
+      </el-button>
+    </el-form-item>
+    <el-form-item v-if="censorshipValue?.pathModel" label="Path Model">
+      <el-text>{{ censorshipValue?.pathModel }}</el-text>
+    </el-form-item>
+  </div>
+  <template v-if="censorshipValue?.model">
+    <div class="grid grid-cols-[2fr_2fr_4fr_8fr] gap-2">
+      <el-form-item label="Type" v-bind="scoreAttrs">
+        <template #label>
+          <SSInformationLabel label="Type" :info="schemaObjCensorshipInfo.type" />
+        </template>
+        <el-text>{{ censorshipValue?.type }}</el-text>
+      </el-form-item>
+      <el-form-item label="Action" v-bind="scoreAttrs">
+        <template #label>
+          <SSInformationLabel label="Action" :info="schemaObjCensorshipInfo.action" />
+        </template>
+        <el-text>{{ censorshipValue?.action }}</el-text>
+      </el-form-item>
+      <el-form-item label="Score" v-bind="scoreAttrs">
+        <template #label>
+          <SSInformationLabel label="Score" :info="schemaObjCensorshipConfigInfo.score" />
+        </template>
+        <el-input-number
+          v-model="scoreValue"
+          controls-position="right"
+          :min="0"
+          :max="1"
+          :precision="2"
+          :step="0.05"
+          :disabled="!enableValue"
+        />
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <SSInformationLabel label="Model" :info="schemaObjCensorshipInfo.model" />
+        </template>
+        <el-text truncate>
+          {{ censorshipValue?.model }}
+        </el-text>
+      </el-form-item>
+    </div>
+    <el-table :data="censorshipValue?.data || []" border style="width: 100%">
+      <el-table-column prop="enable" label="On/off item" align="center">
+        <template #default="{ row }">
+          <el-switch
+            v-model="row.enable"
+            :disabled="!enableValue"
+            :active-value="true"
+            :inactive-value="false"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="id" label="ID" min-width="90">
+        <template #default="{ row, $index }">
+          <div class="flex items-center">
+            <el-avatar
+              class="mr-3"
+              :size="32"
+              :src="listSrcImagePath?.[$index]"
+            />
+            <span class="text-large font-600"> {{ row.id }} </span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </template>
+  <el-dialog
+    v-model="showModel"
+    width="700"
+    destroy-on-close
+  >
+    <el-form
+      ref="formRef"
+      :model="formPathValue"
+      label-width="auto"
+      @submit.prevent
+    >
+      <el-form-item
+        prop="path"
+        :rules="[
+          {
+            required: true,
+            message: $t('transcode.please_input_path_model'),
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <template #label>
+          <SSInformationLabel :label="$t('transcode.path_model')" :info="schemaObjCensorshipConfigInfo.model" />
+        </template>
+        <div class="w-full flex justify-between gap-2">
+          <el-input v-model="formPathValue.path" :placeholder="$t('base_library.example_path_to_model')" />
+          <el-button type="primary" @click="onLoadPath">
+            {{ $t('SSConfig.load') }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <div class="mt-4 text-14px text-#606266 font-bold dark:text-#CFD3DC">
+      {{ $t('library.model_list') }}
+    </div>
+    <div>
+      {{ $t('base_library.loaded_from') }}: <span class="font-bold">{{ loadedPath }}</span>
+    </div>
+    <el-radio-group v-model="currentRowId" class="w-full">
+      <el-table
+        row-key="id"
+        :current-row-key="currentRowId"
+        :data="listConfigAds"
+        border
+      >
+        <template #empty>
+          {{ loadedPath ? $t('base_library.no_model_not_found') : $t('base.no_data') }}
+        </template>
+        <el-table-column
+          label="#"
+          width="55"
+        >
+          <template #default="{ row }">
+            <el-radio :label="row.id" @click="selectedConfig = row">
+            &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="Name" />
+        <el-table-column prop="path" label="Path" show-overflow-tooltip />
+      </el-table>
+    </el-radio-group>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :disabled="!currentRowId" type="primary" @click="handleSelectConfig(selectedConfig)">
+          {{ $t('base_library.select') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>