From 11e56463b9f1957417d0c71e1bb5da96527fdaf3 Mon Sep 17 00:00:00 2001 From: 666ghj <670939375@qq.com> Date: Thu, 11 Dec 2025 18:11:46 +0800 Subject: [PATCH] Refactor Step2EnvSetup.vue for enhanced profile details and layout - Updated profile description to provide clearer context on entity initialization and behavior configuration. - Removed the expand button for profile details, simplifying the interface. - Adjusted the display logic to show all profiles directly, improving accessibility. - Enhanced modal layout with additional fields for real name, username, and profession, enriching user engagement. - Improved styling for better readability and visual consistency across profile sections. --- frontend/src/components/Step2EnvSetup.vue | 319 +++++++++++++++++----- 1 file changed, 255 insertions(+), 64 deletions(-) diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue index c2ede93..1a05e5d 100644 --- a/frontend/src/components/Step2EnvSetup.vue +++ b/frontend/src/components/Step2EnvSetup.vue @@ -58,7 +58,7 @@

POST /api/simulation/prepare

- 从知识图谱读取实体，使用 LLM 为每个实体生成详细的 Agent 人设与行为配置 + 结合上下文，自动调用工具从知识图谱梳理实体与关系，初始化模拟个体，并基于现实种子赋予他们独特的行为与记忆

@@ -81,13 +81,10 @@
已生成的 Agent 人设 -
-
+
{{ profile.bio || '暂无简介' }}

{{ topic }} - - +{{ profile.interested_topics.length - 4 }} + + +{{ profile.interested_topics.length - 3 }}
@@ -200,30 +197,81 @@
- {{ selectedProfile.user_name || selectedProfile.username }} +
+
+ {{ selectedProfile.realname }} + @{{ selectedProfile.username }} +
+ {{ selectedProfile.profession }} +
+
-
- 实体类型 - {{ selectedProfile.entity_type }} -
-
- 来源实体 - {{ selectedProfile.source_entity_name || '-' }} + +
+
+ 事件外显年龄 + {{ selectedProfile.age || '-' }} 岁 +
+
+ 事件外显性别 + {{ { male: '男', female: '女', other: '其他' }[selectedProfile.gender] || selectedProfile.gender }} +
+
+ 国家/地区 + {{ selectedProfile.country || '-' }} +
+
+ 事件外显MBTI + {{ selectedProfile.mbti || '-' }} +
+ +
人设简介 -

{{ selectedProfile.bio || selectedProfile.description || '暂无简介' }}

+

{{ selectedProfile.bio || '暂无简介' }}

-
- 性格特点 -

{{ selectedProfile.personality }}

+ + +
+ 现实种子关联话题 +
+ {{ topic }} +
-
- 兴趣标签 -
- {{ tag }} + + +
+ 详细人设背景 + + +
+
+ 事件全景经历 + 在此事件中的完整行为轨迹 +
+
+ 行为模式侧写 + 经验总结与行事风格偏好 +
+
+ 独特记忆印记 + 基于现实种子形成的记忆 +
+
+ 社会关系网络 + 个体链接与交互图谱 +
+
+ +
+

{{ selectedProfile.persona }}

@@ -733,25 +781,26 @@ onUnmounted(() => { letter-spacing: 0.5px; } -.expand-btn { - font-size: 12px; - color: #FF5722; - background: none; - border: none; - cursor: pointer; -} - .profiles-list { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: repeat(2, 1fr); gap: 12px; - max-height: 400px; + max-height: 320px; overflow-y: auto; - transition: max-height 0.3s ease; + padding-right: 4px; } -.profiles-list.expanded { - max-height: none; +.profiles-list::-webkit-scrollbar { + width: 4px; +} + +.profiles-list::-webkit-scrollbar-thumb { + background: #DDD; + border-radius: 2px; +} + +.profiles-list::-webkit-scrollbar-thumb:hover { + background: #CCC; } .profile-card { @@ -902,61 +951,134 @@ onUnmounted(() => { left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; + backdrop-filter: blur(4px); } .profile-modal { background: #FFF; - border-radius: 12px; + border-radius: 16px; width: 90%; - max-width: 500px; - max-height: 80vh; + max-width: 600px; + max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .modal-header { display: flex; justify-content: space-between; - align-items: center; - padding: 20px 24px; - border-bottom: 1px solid #E5E5E5; + align-items: flex-start; + padding: 24px; + background: #FFF; + border-bottom: 1px solid #F0F0F0; } -.modal-title { - font-size: 18px; +.modal-header-info { + flex: 1; +} + +.modal-name-row { + display: flex; + align-items: baseline; + gap: 10px; + margin-bottom: 8px; +} + +.modal-realname { + font-size: 20px; font-weight: 700; + color: #000; +} + +.modal-username { + font-family: 'JetBrains Mono', monospace; + font-size: 13px; + color: #999; +} + +.modal-profession { + font-size: 12px; + color: #666; + background: #F5F5F5; + padding: 4px 10px; + border-radius: 4px; + display: inline-block; + font-weight: 500; } .close-btn { width: 32px; height: 32px; border: none; - background: #F5F5F5; + background: none; + color: #999; border-radius: 50%; - font-size: 18px; + font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; + line-height: 1; + transition: color 0.2s; + padding: 0; } .close-btn:hover { - background: #E5E5E5; + color: #333; } .modal-body { padding: 24px; overflow-y: auto; + flex: 1; } +/* 基本信息网格 */ +.modal-info-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px 16px; + margin-bottom: 32px; + padding: 0; + background: transparent; + border-radius: 0; +} + +.info-item { + display: flex; + flex-direction: column; + gap: 4px; +} + +.info-label { + font-size: 11px; + color: #999; + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 600; +} + +.info-value { + font-size: 15px; + font-weight: 600; + color: #333; +} + +.info-value.mbti { + font-family: 'JetBrains Mono', monospace; + color: #FF5722; +} + +/* 模块区域 */ .modal-section { - margin-bottom: 20px; + margin-bottom: 28px; } .section-label { @@ -966,33 +1088,102 @@ onUnmounted(() => { color: #999; text-transform: uppercase; letter-spacing: 0.5px; - margin-bottom: 6px; + margin-bottom: 12px; } -.section-value { +.section-bio { font-size: 14px; color: #333; -} - -.section-text { - font-size: 13px; - color: #666; line-height: 1.6; margin: 0; + padding: 16px; + background: #F9F9F9; + border-radius: 6px; + border-left: 3px solid #E0E0E0; } -.tags-row { +/* 话题标签 */ +.topics-grid { display: flex; flex-wrap: wrap; - gap: 6px; + gap: 8px; } -.interest-tag { +.topic-item { font-size: 11px; - background: #F5F5F5; - color: #666; + color: #1565C0; + background: #E3F2FD; padding: 4px 10px; border-radius: 12px; + transition: all 0.2s; + border: none; +} + +.topic-item:hover { + background: #BBDEFB; + color: #0D47A1; +} + +/* 详细人设 */ +.persona-dimensions { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; + margin-bottom: 16px; +} + +.dimension-card { + background: #F8F9FA; + padding: 12px; + border-radius: 6px; + border-left: 3px solid #DDD; + transition: all 0.2s; +} + +.dimension-card:hover { + background: #F0F0F0; + border-left-color: #999; +} + +.dim-title { + display: block; + font-size: 12px; + font-weight: 700; + color: #333; + margin-bottom: 4px; +} + +.dim-desc { + display: block; + font-size: 10px; + color: #888; + line-height: 1.4; +} + +.persona-content { + max-height: none; + overflow: visible; + padding: 0; + background: transparent; + border: none; + border-radius: 0; +} + +.persona-content::-webkit-scrollbar { + width: 4px; +} + +.persona-content::-webkit-scrollbar-thumb { + background: #DDD; + border-radius: 2px; +} + +.section-persona { + font-size: 13px; + color: #555; + line-height: 1.8; + margin: 0; + text-align: justify; } /* System Logs */