diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue index e4955b1..f6e9319 100644 --- a/frontend/src/components/Step2EnvSetup.vue +++ b/frontend/src/components/Step2EnvSetup.vue @@ -134,27 +134,211 @@

-
-
- 模拟时长 - {{ simulationConfig.time_config?.total_simulation_hours || '-' }} 小时 +
+ +
+
+ 时间配置 +
+
+
+ 模拟时长 + {{ simulationConfig.time_config?.total_simulation_hours || '-' }} 小时 +
+
+ 每轮时长 + {{ simulationConfig.time_config?.minutes_per_round || '-' }} 分钟 +
+
+ 总轮次 + {{ Math.floor((simulationConfig.time_config?.total_simulation_hours * 60 / simulationConfig.time_config?.minutes_per_round)) || '-' }} 轮 +
+
+ 每小时Agent数 + {{ simulationConfig.time_config?.agents_per_hour_min }}-{{ simulationConfig.time_config?.agents_per_hour_max }} +
+
+
+
+ 高峰时段 + {{ simulationConfig.time_config?.peak_hours?.join(':00, ') }}:00 + ×{{ simulationConfig.time_config?.peak_activity_multiplier }} +
+
+ 工作时段 + {{ simulationConfig.time_config?.work_hours?.[0] }}:00-{{ simulationConfig.time_config?.work_hours?.slice(-1)[0] }}:00 + ×{{ simulationConfig.time_config?.work_activity_multiplier }} +
+
+ 低谷时段 + {{ simulationConfig.time_config?.off_peak_hours?.[0] }}:00-{{ simulationConfig.time_config?.off_peak_hours?.slice(-1)[0] }}:00 + ×{{ simulationConfig.time_config?.off_peak_activity_multiplier }} +
+
-
- 总轮次 - {{ (simulationConfig.time_config?.total_simulation_hours * 60 / simulationConfig.time_config?.minutes_per_round) || '-' }} 轮 + + +
+
+ Agent 配置 + {{ simulationConfig.agent_configs?.length || 0 }} 个 +
+
+
+ +
+
+ Agent {{ agent.agent_id }} + {{ agent.entity_name }} +
+
+ {{ agent.entity_type }} + {{ agent.stance }} +
+
+ + +
+ 活跃时段 +
+
+
+
+ 0 + 6 + 12 + 18 + 24 +
+
+ + +
+
+
+ 发帖/时 + {{ agent.posts_per_hour }} +
+
+ 评论/时 + {{ agent.comments_per_hour }} +
+
+ 响应延迟 + {{ agent.response_delay_min }}-{{ agent.response_delay_max }}min +
+
+
+
+ 活跃度 + + + {{ (agent.activity_level * 100).toFixed(0) }}% + +
+
+ 情感倾向 + + {{ agent.sentiment_bias > 0 ? '+' : '' }}{{ agent.sentiment_bias?.toFixed(1) }} + +
+
+ 影响力 + {{ agent.influence_weight?.toFixed(1) }} +
+
+
+
+
-
- 平台配置 - - Twitter - Reddit - + + +
+
+ 平台推荐算法配置 +
+
+
+
+ Twitter +
+
+
+ 时效权重 + {{ simulationConfig.twitter_config.recency_weight }} +
+
+ 热度权重 + {{ simulationConfig.twitter_config.popularity_weight }} +
+
+ 相关性权重 + {{ simulationConfig.twitter_config.relevance_weight }} +
+
+ 病毒阈值 + {{ simulationConfig.twitter_config.viral_threshold }} +
+
+ 回音室强度 + {{ simulationConfig.twitter_config.echo_chamber_strength }} +
+
+
+
+
+ Reddit +
+
+
+ 时效权重 + {{ simulationConfig.reddit_config.recency_weight }} +
+
+ 热度权重 + {{ simulationConfig.reddit_config.popularity_weight }} +
+
+ 相关性权重 + {{ simulationConfig.reddit_config.relevance_weight }} +
+
+ 病毒阈值 + {{ simulationConfig.reddit_config.viral_threshold }} +
+
+ 回音室强度 + {{ simulationConfig.reddit_config.echo_chamber_strength }} +
+
+
+
- - -
- LLM 配置推理 -

{{ simulationConfig.generation_reasoning.split('|')[0] }} ...

+ + +
+
+ LLM 配置推理 +
+
+
+

{{ reason.trim() }}

+
+
@@ -1011,67 +1195,392 @@ onUnmounted(() => { } /* Config Preview */ -.config-preview { - background: #FAFAFA; - border-radius: 6px; - padding: 16px; +/* Config Detail Panel */ +.config-detail-panel { margin-top: 16px; + display: flex; + flex-direction: column; + gap: 16px; } -.config-section { +.config-block { + background: #FFFFFF; + border: 1px solid #EEF2F6; + border-radius: 10px; + overflow: hidden; +} + +.config-block-header { display: flex; justify-content: space-between; align-items: center; - padding: 10px 0; - border-bottom: 1px dashed #E0E0E0; + padding: 12px 16px; + background: #F8FAFC; + border-bottom: 1px solid #EEF2F6; } -.config-section:last-child { - border-bottom: none; -} - -.config-label { +.config-block-title { font-size: 12px; - color: #666; -} - -.config-value { - font-size: 14px; font-weight: 600; - color: #333; + color: #475569; + text-transform: uppercase; + letter-spacing: 0.05em; } -.platform-tag { - display: inline-block; +.config-block-badge { font-family: 'JetBrains Mono', monospace; - font-size: 10px; - background: #333; + font-size: 11px; + background: #6366F1; color: #FFF; padding: 2px 8px; - border-radius: 3px; - margin-left: 6px; + border-radius: 10px; } -.reasoning-section { - margin-top: 16px; - padding-top: 16px; - border-top: 1px solid #E0E0E0; +/* Config Grid */ +.config-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1px; + background: #EEF2F6; + padding: 1px; } -.reasoning-label { - display: block; +.config-item { + background: #FFF; + padding: 14px 16px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.config-item-label { + font-size: 11px; + color: #94A3B8; +} + +.config-item-value { + font-family: 'JetBrains Mono', monospace; + font-size: 16px; + font-weight: 600; + color: #1E293B; +} + +/* Time Periods */ +.time-periods { + padding: 12px 16px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.period-item { + display: flex; + align-items: center; + gap: 12px; + padding: 8px 12px; + background: #F8FAFC; + border-radius: 6px; +} + +.period-label { + font-size: 12px; + font-weight: 500; + color: #64748B; + min-width: 70px; +} + +.period-hours { + font-family: 'JetBrains Mono', monospace; + font-size: 11px; + color: #475569; + flex: 1; +} + +.period-multiplier { + font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; - color: #999; + color: #6366F1; + background: #EEF2FF; + padding: 2px 6px; + border-radius: 4px; +} + +/* Agents Cards */ +.agents-cards { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + padding: 16px; + max-height: 400px; + overflow-y: auto; +} + +.agents-cards::-webkit-scrollbar { + width: 4px; +} + +.agents-cards::-webkit-scrollbar-thumb { + background: #DDD; + border-radius: 2px; +} + +.agents-cards::-webkit-scrollbar-thumb:hover { + background: #CCC; +} + +.agent-card { + background: #FFF; + border: 1px solid #E2E8F0; + border-radius: 10px; + padding: 16px; + transition: all 0.2s ease; +} + +.agent-card:hover { + border-color: #CBD5E1; + box-shadow: 0 4px 12px rgba(0,0,0,0.04); +} + +/* Agent Card Header */ +.agent-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 14px; + padding-bottom: 12px; + border-bottom: 1px solid #F1F5F9; +} + +.agent-identity { + display: flex; + flex-direction: column; + gap: 2px; +} + +.agent-id { + font-family: 'JetBrains Mono', monospace; + font-size: 10px; + color: #94A3B8; +} + +.agent-name { + font-size: 14px; + font-weight: 600; + color: #1E293B; +} + +.agent-tags { + display: flex; + gap: 6px; +} + +.agent-type { + font-size: 10px; + color: #64748B; + background: #F1F5F9; + padding: 2px 8px; + border-radius: 4px; +} + +.agent-stance { + font-size: 10px; + font-weight: 500; text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 8px; + padding: 2px 8px; + border-radius: 4px; +} + +.stance-neutral { + background: #F1F5F9; + color: #64748B; +} + +.stance-supportive { + background: #DCFCE7; + color: #16A34A; +} + +.stance-opposing { + background: #FEE2E2; + color: #DC2626; +} + +.stance-observer { + background: #FEF3C7; + color: #D97706; +} + +/* Agent Timeline */ +.agent-timeline { + margin-bottom: 14px; +} + +.timeline-label { + display: block; + font-size: 10px; + color: #94A3B8; + margin-bottom: 6px; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.mini-timeline { + display: flex; + gap: 2px; + height: 16px; + background: #F8FAFC; + border-radius: 4px; + padding: 3px; +} + +.timeline-hour { + flex: 1; + background: #E2E8F0; + border-radius: 2px; + transition: all 0.2s; +} + +.timeline-hour.active { + background: linear-gradient(180deg, #6366F1, #818CF8); +} + +.timeline-marks { + display: flex; + justify-content: space-between; + margin-top: 4px; + font-family: 'JetBrains Mono', monospace; + font-size: 9px; + color: #94A3B8; +} + +/* Agent Params */ +.agent-params { + display: flex; + flex-direction: column; + gap: 10px; +} + +.param-group { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; +} + +.param-item { + display: flex; + flex-direction: column; + gap: 2px; +} + +.param-item .param-label { + font-size: 10px; + color: #94A3B8; +} + +.param-item .param-value { + font-family: 'JetBrains Mono', monospace; + font-size: 12px; + font-weight: 600; + color: #475569; +} + +.param-value.with-bar { + display: flex; + align-items: center; + gap: 6px; +} + +.mini-bar { + height: 4px; + background: linear-gradient(90deg, #6366F1, #A855F7); + border-radius: 2px; + min-width: 4px; + max-width: 40px; +} + +.param-value.positive { + color: #16A34A; +} + +.param-value.negative { + color: #DC2626; +} + +.param-value.neutral { + color: #64748B; +} + +.param-value.highlight { + color: #6366F1; +} + +/* Platforms Grid */ +.platforms-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1px; + background: #EEF2F6; +} + +.platform-card { + background: #FFF; + padding: 16px; +} + +.platform-card-header { + margin-bottom: 12px; +} + +.platform-name { + font-size: 14px; + font-weight: 600; + color: #1E293B; +} + +.platform-params { + display: flex; + flex-direction: column; + gap: 8px; +} + +.param-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.param-label { + font-size: 12px; + color: #64748B; +} + +.param-value { + font-family: 'JetBrains Mono', monospace; + font-size: 12px; + font-weight: 600; + color: #1E293B; +} + +/* Reasoning Content */ +.reasoning-content { + padding: 16px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.reasoning-item { + padding: 12px 16px; + background: #F8FAFC; + border-radius: 8px; + border-left: 3px solid #6366F1; } .reasoning-text { - font-size: 12px; - color: #666; - line-height: 1.6; + font-size: 13px; + color: #475569; + line-height: 1.7; margin: 0; }