sionrui/frontend/app/web-gold/src/views/content-style/components/ExpandedRowContent.vue

<script setup>
import { CopyOutlined, SaveOutlined } from '@ant-design/icons-vue'
import ChatMessageRenderer from '@/components/ChatMessageRenderer.vue'

const props = defineProps({
  record: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['analyze', 'copy', 'saveToServer', 'createContent'])

function handleCopy() {
  emit('copy', props.record)
}

function handleSaveToServer() {
  emit('saveToServer', props.record)
}

function handleCreateContent() {
  emit('createContent', props.record)
}
</script>

<template>
  <div class="expanded-content">
    <!-- 未分析的行显示提示 -->
    <div v-if="!record.transcriptions && !record.prompt" class="no-analysis-tip">
      <a-empty description="该视频尚未分析">
        <template #image>
          <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="20" y="30" width="80" height="60" rx="4" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
            <circle cx="40" cy="50" r="8" fill="currentColor" opacity="0.4"/>
            <rect x="54" y="47" width="40" height="6" rx="3" fill="currentColor" opacity="0.4"/>
            <rect x="54" y="60" width="32" height="6" rx="3" fill="currentColor" opacity="0.4"/>
          </svg>
        </template>
        <a-button type="primary" @click="$emit('analyze', record)" :loading="record._analyzing">
          {{ record._analyzing ? '分析中…' : '开始分析' }}
        </a-button>
      </a-empty>
    </div>
    
    <!-- 已分析的行显示内容 -->
    <div v-else class="two-col">
      <!-- 左侧：原配音内容 -->
      <section class="col left-col">
        <div class="sub-title">原配音</div>
        <div class="transcript-box" v-if="record.transcriptions">
          <div class="transcript-content">{{ record.transcriptions }}</div>
        </div>
        <div v-else class="no-transcript">暂无转写文本，请先点击"分析"获取</div>
      </section>

      <!-- 右侧：提示词 -->
      <section class="col right-col">
        <div class="sub-title">提示词</div>
        
        <div class="prompt-display-wrapper">
          <ChatMessageRenderer 
            :content="record.prompt || ''"
            :is-streaming="record._analyzing || false"
          />
          <div v-if="!record.prompt" class="no-prompt">暂无提示词</div>
        </div>
        
        <div class="right-actions">
          <a-space>
            <a-button 
              size="small" 
              type="text" 
              class="copy-btn"
              :title="'复制'"
              @click="handleCopy">
              <template #icon>
                <CopyOutlined />
              </template>
            </a-button>
            <a-button 
              v-if="record.prompt"
              size="small" 
              type="text" 
              class="save-server-btn"
              :title="'保存'"
              @click="handleSaveToServer">
              <template #icon>
                <SaveOutlined />
              </template>
              保存
            </a-button>
            <a-button 
              type="dashed" 
              :disabled="!record.prompt || record._analyzing"
              @click="handleCreateContent">基于提示词去创作</a-button>
          </a-space>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped>
.expanded-content {
  padding: var(--space-4);
  background: var(--color-slate-50);
  border-radius: var(--radius-card);
  margin: var(--space-2) 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px;
}

.left-col .transcript-content {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-2);
}

.sub-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.no-transcript {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.prompt-display-wrapper {
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.no-prompt {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
}

.right-actions {
  margin-top: var(--space-2);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  cursor: pointer;
}

.copy-btn:hover {
  opacity: 0.8;
}


.no-analysis-tip {
  padding: var(--space-8) var(--space-5);
  text-align: center;
}

.no-analysis-tip :deep(.ant-empty) {
  margin: 0;
}

.no-analysis-tip :deep(.ant-empty-description) {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
</style>