feat: 功能

frontend/app/web-gold/src/components/PipelineProgress.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="pipeline-progress">
+    <!-- 状态和进度 -->
+    <div class="progress-header">
+      <span class="state-text">{{ stateLabel }}</span>
+      <span v-if="stateDescription" class="state-desc">{{ stateDescription }}</span>
+    </div>
+
+    <a-progress
+      :percent="displayProgress"
+      :status="progressStatus"
+      :stroke-color="progressColor"
+    />
+
+    <!-- 错误时显示 -->
+    <div v-if="isFailed && error" class="error-section">
+      <span class="error-text">{{ error }}</span>
+      <a-button size="small" @click="handleRetry">重试</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PipelineState } from '@/views/kling/hooks/pipeline/types'
+import { STATE_CONFIG } from '@/views/kling/hooks/pipeline/states'
+
+interface Props {
+  state: PipelineState | string
+  progress: number
+  isBusy: boolean
+  isReady: boolean
+  isFailed: boolean
+  isCompleted: boolean
+  error: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  retry: []
+  reset: []
+}>()
+
+const stateConfig = computed(() => STATE_CONFIG[props.state as PipelineState])
+const stateLabel = computed(() => stateConfig.value.label)
+const stateDescription = computed(() => stateConfig.value.description)
+
+const progressStatus = computed(() => {
+  if (props.isFailed) return 'exception'
+  if (props.isCompleted) return 'success'
+  return 'active'
+})
+
+const progressColor = computed(() => {
+  if (props.isFailed) return '#ff4d4f'
+  if (props.isCompleted) return '#52c41a'
+  return '#1890ff'
+})
+
+const displayProgress = computed(() => {
+  if (props.isFailed) return 0
+  return props.progress
+})
+
+function handleRetry() {
+  emit('retry')
+}
+</script>
+
+<style scoped lang="less">
+.pipeline-progress {
+  padding: 12px 16px;
+  background: var(--bg-primary);
+  border-radius: 8px;
+  border: 1px solid var(--border-light);
+  margin-bottom: 16px;
+}
+
+.progress-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 13px;
+
+  .state-text {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .state-desc {
+    color: var(--text-secondary);
+  }
+}
+
+.error-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: rgba(255, 77, 79, 0.1);
+  border-radius: 6px;
+
+  .error-text {
+    flex: 1;
+    color: #ff4d4f;
+    font-size: 13px;
+  }
+}
+</style>