tg-live-game-web/src/views/stream/config.vue

<template>
  <div class="page-container">
    <el-card :header="t('Cloudflare Stream 配置')">
      <el-form :model="config" label-width="160px" style="max-width: 600px">
        <el-form-item label="Account ID" required>
          <el-input v-model="config.accountId" placeholder="Cloudflare Account ID" />
          <div class="form-tip">在 Cloudflare Dashboard 右侧可以找到</div>
        </el-form-item>

        <el-form-item label="Customer Subdomain" required>
          <el-input v-model="config.customerSubdomain" placeholder="xxx（不含 customer- 前缀）">
            <template #prepend>customer-</template>
            <template #append>.cloudflarestream.com</template>
          </el-input>
          <div class="form-tip">{{ t('播放域名的子域名部分') }}</div>
        </el-form-item>

        <el-form-item label="API Token">
          <el-input
            v-model="config.apiToken"
            type="password"
            placeholder="Cloudflare API Token（可选）"
            show-password
          />
          <div class="form-tip">
            {{ t('仅在前端直接调用 API 时需要（不推荐）') }}
            <br />
            {{ t('推荐通过后端代理调用，避免暴露 Token') }}
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveConfig">{{ t('保存配置') }}</el-button>
          <el-button @click="testConnection">{{ t('测试连接') }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card :header="t('配置说明')" style="margin-top: 20px">
      <el-collapse>
        <el-collapse-item title="如何获取 Account ID" name="1">
          <ol>
            <li>
              登录
              <a href="https://dash.cloudflare.com" target="_blank">Cloudflare Dashboard</a>
            </li>
            <li>选择 Stream 产品</li>
            <li>在页面右侧可以看到 Account ID</li>
          </ol>
        </el-collapse-item>

        <el-collapse-item :title="t('如何获取 Customer Subdomain')" name="2">
          <ol>
            <li>进入 Stream 产品页面</li>
            <li>上传或选择任意视频</li>
            <li>
              查看播放地址，格式为
              <code>https://customer-xxx.cloudflarestream.com/{video_id}/...</code>
            </li>
            <li>
              <code>xxx</code>
              部分就是 Customer Subdomain
            </li>
          </ol>
        </el-collapse-item>

        <el-collapse-item title="如何创建 API Token" name="3">
          <ol>
            <li>
              访问
              <a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank">API Tokens 页面</a>
            </li>
            <li>点击 "Create Token"</li>
            <li>选择 "Stream - Edit" 模板或自定义权限</li>
            <li>创建后复制 Token</li>
          </ol>
          <el-alert type="warning" :closable="false" style="margin-top: 10px">
            <strong>安全提示：</strong>
            不要在前端代码中暴露 API Token。推荐在后端服务器中存储 Token，前端通过后端代理调用 API。
          </el-alert>
        </el-collapse-item>

        <el-collapse-item title="后端 API 代理示例" name="4"></el-collapse-item>
      </el-collapse>
    </el-card>

    <el-card :header="t('快速测试')" style="margin-top: 20px">
      <el-form label-width="100px" style="max-width: 800px">
        <el-form-item label="Video ID">
          <el-input v-model="testVideoId" placeholder="输入 Video ID 测试播放" style="width: 400px" />
          <el-button type="primary" style="margin-left: 10px" @click="testPlay" :disabled="!testVideoId">
            {{ t('测试播放') }}
          </el-button>
        </el-form-item>

        <el-form-item label="生成的地址" v-if="testVideoId && config.customerSubdomain">
          <div class="url-list">
            <div class="url-item">
              <span class="label">HLS:</span>
              <code>{{ testHlsUrl }}</code>
              <el-button link type="primary" @click="copyUrl(testHlsUrl)">{{ t('复制') }}</el-button>
            </div>
            <div class="url-item">
              <span class="label">DASH:</span>
              <code>{{ testDashUrl }}</code>
              <el-button link type="primary" @click="copyUrl(testDashUrl)">{{ t('复制') }}</el-button>
            </div>
            <div class="url-item">
              <span class="label">iframe:</span>
              <code>{{ testIframeUrl }}</code>
              <el-button link type="primary" @click="copyUrl(testIframeUrl)">{{ t('复制') }}</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 测试播放弹窗 -->
    <el-dialog v-model="playDialogVisible" :title="t('测试播放')" width="900px" destroy-on-close>
      <div class="player-container">
        <VideoPlayer
          v-if="playDialogVisible && testVideoId"
          :player-type="'hls'"
          :src="testHlsUrl"
          :autoplay="true"
          :controls="true"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import VideoPlayer from '@/components/VideoPlayer.vue'
import { useStreamStore } from '@/store/stream'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const streamStore = useStreamStore()

const config = reactive({
  accountId: '',
  customerSubdomain: '',
  apiToken: ''
})

const testVideoId = ref('')
const playDialogVisible = ref(false)

const testHlsUrl = computed(() => {
  if (!config.customerSubdomain || !testVideoId.value) return ''
  return `https://customer-${config.customerSubdomain}.cloudflarestream.com/${testVideoId.value}/manifest/video.m3u8`
})

const testDashUrl = computed(() => {
  if (!config.customerSubdomain || !testVideoId.value) return ''
  return `https://customer-${config.customerSubdomain}.cloudflarestream.com/${testVideoId.value}/manifest/video.mpd`
})

const testIframeUrl = computed(() => {
  if (!config.customerSubdomain || !testVideoId.value) return ''
  return `https://customer-${config.customerSubdomain}.cloudflarestream.com/${testVideoId.value}/iframe`
})

function saveConfig() {
  streamStore.initConfig({
    accountId: config.accountId,
    customerSubdomain: config.customerSubdomain,
    apiToken: config.apiToken
  })
  ElMessage.success('配置已保存')
}

function testConnection() {
  if (!config.customerSubdomain) {
    ElMessage.warning('请先填写 Customer Subdomain')
    return
  }

  // 简单测试：尝试访问域名
  const testUrl = `https://customer-${config.customerSubdomain}.cloudflarestream.com`
  window.open(testUrl, '_blank')
  ElMessage.info('已打开测试页面，请在新窗口中确认域名是否正确')
}

function testPlay() {
  if (!testVideoId.value) {
    ElMessage.warning('请输入 Video ID')
    return
  }
  if (!config.customerSubdomain) {
    ElMessage.warning('请先配置 Customer Subdomain')
    return
  }
  playDialogVisible.value = true
}

async function copyUrl(url: string) {
  if (!url) return
  try {
    await navigator.clipboard.writeText(url)
    ElMessage.success('已复制')
  } catch {
    ElMessage.error('复制失败')
  }
}

onMounted(() => {
  streamStore.loadConfig()
  const savedConfig = streamStore.config
  config.accountId = savedConfig.accountId || ''
  config.customerSubdomain = savedConfig.customerSubdomain || ''
  config.apiToken = savedConfig.apiToken || ''
})
</script>

<style lang="scss" scoped>
.page-container {
}

.form-tip {
  margin-top: 5px;
  font-size: 12px;
  color: #909399;
  line-height: 1.6;
}

.code-block {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: var(--radius-base);
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.url-list {
  .url-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;

    .label {
      width: 50px;
      font-weight: 500;
    }

    code {
      flex: 1;
      background-color: #f5f7fa;
      padding: 4px 8px;
      border-radius: var(--radius-base);
      font-size: 12px;
      word-break: break-all;
    }
  }
}

.player-container {
  width: 100%;
  height: 480px;
  background-color: #000;
  border-radius: var(--radius-base);
  overflow: hidden;
}

:deep(.el-collapse-item__header) {
  font-weight: 500;
}

:deep(.el-collapse-item__content) {
  padding-top: 10px;

  ol {
    padding-left: 20px;
    line-height: 2;
  }

  a {
    color: #409eff;
  }

  code {
    background-color: #f5f7fa;
    padding: 2px 6px;
    border-radius: var(--radius-base);
    font-size: 12px;
  }
}
</style>