From 5c6a5696d8bfcbd886147369d08ecc7e99188a06 Mon Sep 17 00:00:00 2001 From: 666ghj <670939375@qq.com> Date: Thu, 11 Dec 2025 22:56:15 +0800 Subject: [PATCH] Refactor Step2EnvSetup.vue for improved configuration clarity and styling - Removed redundant headers and updated labels for time configuration to enhance readability. - Added a new morning time period display for better simulation detail. - Simplified platform configuration titles for clarity and consistency. - Adjusted CSS styles for improved visual hierarchy and user experience across various sections. --- frontend/src/components/Step2EnvSetup.vue | 128 ++++++++++------------ 1 file changed, 59 insertions(+), 69 deletions(-) diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue index f6e9319..0f87048 100644 --- a/frontend/src/components/Step2EnvSetup.vue +++ b/frontend/src/components/Step2EnvSetup.vue @@ -137,9 +137,6 @@
-
- 时间配置 -
模拟时长 @@ -154,7 +151,7 @@ {{ 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 }}
@@ -169,6 +166,11 @@ {{ 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?.morning_hours?.[0] }}:00-{{ simulationConfig.time_config?.morning_hours?.slice(-1)[0] }}:00 + ×{{ simulationConfig.time_config?.morning_activity_multiplier }} +
低谷时段 {{ simulationConfig.time_config?.off_peak_hours?.[0] }}:00-{{ simulationConfig.time_config?.off_peak_hours?.slice(-1)[0] }}:00 @@ -265,12 +267,12 @@
- 平台推荐算法配置 + 推荐算法配置
- Twitter + 平台 1：广场 / 信息流
@@ -297,7 +299,7 @@
- Reddit + 平台 2：话题 / 社区
@@ -332,7 +334,7 @@
@@ -1128,7 +1130,7 @@ onUnmounted(() => { } .profile-card:hover { - border-color: #FF5722; + border-color: #999; background: #FFF; } @@ -1198,40 +1200,40 @@ onUnmounted(() => { /* Config Detail Panel */ .config-detail-panel { margin-top: 16px; - display: flex; - flex-direction: column; - gap: 16px; } .config-block { - background: #FFFFFF; - border: 1px solid #EEF2F6; - border-radius: 10px; - overflow: hidden; + margin-top: 16px; + border-top: 1px solid #E5E5E5; + padding-top: 12px; +} + +.config-block:first-child { + margin-top: 0; + border-top: none; + padding-top: 0; } .config-block-header { display: flex; justify-content: space-between; align-items: center; - padding: 12px 16px; - background: #F8FAFC; - border-bottom: 1px solid #EEF2F6; + margin-bottom: 12px; } .config-block-title { font-size: 12px; font-weight: 600; - color: #475569; + color: #666; text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.5px; } .config-block-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; - background: #6366F1; - color: #FFF; + background: #F1F5F9; + color: #475569; padding: 2px 8px; border-radius: 10px; } @@ -1240,14 +1242,13 @@ onUnmounted(() => { .config-grid { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 1px; - background: #EEF2F6; - padding: 1px; + gap: 12px; } .config-item { - background: #FFF; - padding: 14px 16px; + background: #F9F9F9; + padding: 12px 14px; + border-radius: 6px; display: flex; flex-direction: column; gap: 4px; @@ -1267,7 +1268,7 @@ onUnmounted(() => { /* Time Periods */ .time-periods { - padding: 12px 16px; + margin-top: 12px; display: flex; flex-direction: column; gap: 8px; @@ -1278,7 +1279,7 @@ onUnmounted(() => { align-items: center; gap: 12px; padding: 8px 12px; - background: #F8FAFC; + background: #F9F9F9; border-radius: 6px; } @@ -1311,9 +1312,9 @@ onUnmounted(() => { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; - padding: 16px; max-height: 400px; overflow-y: auto; + padding-right: 4px; } .agents-cards::-webkit-scrollbar { @@ -1330,16 +1331,16 @@ onUnmounted(() => { } .agent-card { - background: #FFF; - border: 1px solid #E2E8F0; - border-radius: 10px; - padding: 16px; + background: #F9F9F9; + border: 1px solid #E5E5E5; + border-radius: 6px; + padding: 14px; transition: all 0.2s ease; } .agent-card:hover { - border-color: #CBD5E1; - box-shadow: 0 4px 12px rgba(0,0,0,0.04); + border-color: #999; + background: #FFF; } /* Agent Card Header */ @@ -1519,23 +1520,25 @@ onUnmounted(() => { .platforms-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 1px; - background: #EEF2F6; + gap: 12px; } .platform-card { - background: #FFF; - padding: 16px; + background: #F9F9F9; + padding: 14px; + border-radius: 6px; } .platform-card-header { - margin-bottom: 12px; + margin-bottom: 10px; + padding-bottom: 8px; + border-bottom: 1px solid #E5E5E5; } .platform-name { - font-size: 14px; + font-size: 13px; font-weight: 600; - color: #1E293B; + color: #333; } .platform-params { @@ -1564,22 +1567,20 @@ onUnmounted(() => { /* Reasoning Content */ .reasoning-content { - padding: 16px; display: flex; flex-direction: column; - gap: 12px; + gap: 10px; } .reasoning-item { - padding: 12px 16px; - background: #F8FAFC; - border-radius: 8px; - border-left: 3px solid #6366F1; + padding: 12px 14px; + background: #F9F9F9; + border-radius: 6px; } .reasoning-text { font-size: 13px; - color: #475569; + color: #555; line-height: 1.7; margin: 0; } @@ -1904,11 +1905,12 @@ onUnmounted(() => { .box-label { display: block; - font-size: 11px; + font-size: 12px; font-weight: 600; - color: #999; + color: #666; text-transform: uppercase; - margin-bottom: 8px; + letter-spacing: 0.5px; + margin-bottom: 12px; } .narrative-box { @@ -1921,26 +1923,14 @@ onUnmounted(() => { } .narrative-box .box-label { - display: flex; - align-items: center; - color: #64748B; + display: block; + color: #666; font-size: 12px; - letter-spacing: 0.05em; + letter-spacing: 0.5px; margin-bottom: 12px; font-weight: 600; } -.narrative-box .box-label::before { - content: ''; - display: block; - width: 6px; - height: 6px; - background: #6366F1; - border-radius: 50%; - margin-right: 8px; - box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15); -} - .narrative-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px;