tg-live-game-web/src/views/live-stream/components/StreamEditForm.vue

<template>
  <div class="tab-content edit-content">
    <div class="drawer-body">
      <el-form ref="elFormRef" :model="form" :rules="rules" label-width="auto" class="stream-form">
        <el-form-item :label="t('名称') + ':'" prop="name">
          <el-input v-model="form.name" :placeholder="t('例如: 测试推流-001')" style="width: 300px" />
        </el-form-item>
        <el-form-item :label="t('LSS 节点') + ':'" prop="lssId">
          <el-select v-model="form.lssId" :placeholder="t('请选择 LSS 节点')" clearable filterable style="width: 300px">
            <el-option
              v-for="lss in lssOptions"
              :key="lss.lssId"
              :label="`${lss.lssId} - ${lss.lssName}`"
              :value="lss.lssId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('摄像头') + ':'" prop="cameraId">
          <el-select v-model="form.cameraId" :placeholder="t('请选择摄像头')" clearable filterable style="width: 300px">
            <el-option
              v-for="camera in cameraOptions"
              :key="camera.cameraId"
              :label="`${camera.cameraId} - ${camera.cameraName}`"
              :value="camera.cameraId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('推流方式') + ':'" prop="pushMethod">
          <el-select disabled v-model="form.pushMethod" :placeholder="t('请选择')" style="width: 300px">
            <el-option label="ffmpeg" value="ffmpeg" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('命令模板') + ':'" prop="commandTemplate">
          <CodeEditor
            v-model="form.commandTemplate"
            language="bash"
            height="400px"
            placeholder="#!/bin/bash&#10;# FFmpeg 命令模板，可使用 {RTSP_URL} 等变量"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button @click="$emit('cancel')">{{ t('取消') }}</el-button>
      <el-button type="primary" :loading="submitLoading" @click="$emit('submit')">
        {{ isEdit ? t('更新') : t('添加') }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import type { FormInstance, FormRules } from 'element-plus'
import CodeEditor from '@/components/CodeEditor.vue'
import type { LssNodeDTO, CameraInfoDTO } from '@/types'
import type { StreamForm } from '../types'

const { t } = useI18n({ useScope: 'global' })

defineProps<{
  form: StreamForm
  rules: FormRules
  isEdit: boolean
  submitLoading: boolean
  lssOptions: LssNodeDTO[]
  cameraOptions: CameraInfoDTO[]
}>()

defineEmits<{
  submit: []
  cancel: []
}>()

const elFormRef = ref<FormInstance>()

defineExpose({
  formRef: elFormRef
})
</script>
<style scoped lang="scss">
.tab-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.edit-content {
  .drawer-body {
    flex: 1;
    overflow-y: auto;
  }
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.stream-form {
  :deep(.el-form-item) {
    margin-bottom: 18px;
  }

  :deep(.el-form-item__label) {
    color: #606266;
    font-size: 14px;
  }
}

.drawer-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  gap: 12px;
}
</style>