kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: 更新多个组件的样式，调整颜色和布局以提升可读性和一致性

Browse Source
This commit is contained in:
Wenjie Zhang 2026-03-26 03:24:24 +08:00
parent cea53cc67c
commit a2f35cbeb2
5 changed files with 161 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/src/assets/css/extensions.less
View File

@ -53,7 +53,7 @@
border-radius: @radius;
cursor: pointer;
transition: all 0.2s;
border: 1px solid var(--gray-50);
border: 1px solid var(--gray-100);
background-color: var(--gray-0);
&:hover {
@ -81,7 +81,7 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--gray-400);
color: var(--gray-700);
font-size: 14px; // For emoji icons
}
@ -104,7 +104,7 @@
.item-desc {
font-size: 12px;
color: var(--gray-400);
color: var(--gray-700);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -117,7 +117,7 @@
}
.item-name {
color: var(--gray-900);
color: var(--main-700);
}
}
}
@ -131,7 +131,7 @@
.item-meta {
font-size: 12px;
color: var(--gray-500);
color: var(--gray-700);
}
.list-separator {
@ -400,3 +400,66 @@
pointer-events: none;
transition: opacity 0.2s;
}
/* Detail sections - shared between Tools and SubAgents */
.detail-section-container {
padding: 16px;
flex: 1;
overflow-y: auto;
.detail-section {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.section-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 8px;
svg {
color: var(--gray-500);
}
}
.section-content {
font-size: 13px;
color: var(--gray-600);
line-height: 1.6;
&.description {
white-space: pre-wrap;
word-break: break-word;
}
&.meta-info {
.meta-item {
display: flex;
gap: 12px;
font-size: 13px;
color: var(--gray-600);
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
.meta-label {
color: var(--gray-500);
min-width: 60px;
}
.meta-value {
color: var(--gray-700);
}
}
}
}
}
}

23
web/src/components/AgentChatComponent.vue
View File

@ -63,6 +63,10 @@
<MessageCirclePlus v-else class="nav-btn-icon" size="16" />
<span class="text">新对话</span>
</div>
<a-divider
v-if="currentThread?.title && currentThread.title !== '新的对话'"
type="vertical"
/>
<div
v-if="currentThread?.title && currentThread.title !== '新的对话'"
class="conversation-title"
@ -135,7 +139,7 @@
<!-- 打招呼区域 - 在输入框上方 -->
<div v-if="!conversations.length" class="chat-examples-input">
<h1>👋 您好，我是{{ currentAgentName }}！</h1>
<h1>{{ randomGreeting }}</h1>
</div>
<div v-if="showStartAgentSegment" class="agent-segment-wrapper">
@ -276,6 +280,7 @@ const {
} = storeToRefs(agentStore)
const { organization } = storeToRefs(infoStore)
// ==================== LOCAL CHAT & UI STATE ====================
const userInput = ref('')
const sendCooldownActive = ref(false)
@ -285,6 +290,18 @@ const useRunsApi =
import.meta.env.VITE_USE_RUNS_API === 'true' &&
localStorage.getItem('force_legacy_stream') !== 'true'
// 预设的打招呼文本
const greetingMessages = [
'👋 您好，有什么可以帮您？',
'👋 你好！有什么想聊的吗？',
'👋 嘿，有什么我可以帮助你的？',
'👋 欢迎！今天想讨论什么话题？',
'👋 你好呀，随时为你服务！'
]
// 随机选择一个打招呼文本
const randomGreeting = greetingMessages[Math.floor(Math.random() * greetingMessages.length)]
// 从智能体元数据获取示例问题
const exampleQuestions = computed(() => {
const agentId = currentAgentId.value
@ -1630,8 +1647,8 @@ watch(currentChatId, (threadId, oldThreadId) => {
}
.conversation-title {
font-size: 14px;
font-weight: 500;
font-size: 15px;
font-weight: 400;
color: var(--text-primary);
max-width: 200px;
overflow: hidden;

126
web/src/components/SubAgentsComponent.vue
View File

@ -89,61 +89,80 @@
</div>
</div>
<!-- Tab 导航 -->
<a-tabs v-model:activeKey="detailTab" class="detail-tabs">
<a-tab-pane key="general">
<template #tab>
<span class="tab-title"><Info :size="14" />信息</span>
</template>
<div class="tab-content">
<div class="info-grid">
<div class="info-item" v-if="currentAgent.description">
<label>描述</label>
<span>{{ currentAgent.description }}</span>
</div>
<div class="info-item" v-if="currentAgent.model">
<label>模型覆盖</label>
<span>{{ currentAgent.model }}</span>
</div>
<div class="info-item" v-if="currentAgent.tools && currentAgent.tools.length > 0">
<label>工具</label>
<span>
<a-tag v-for="tool in currentAgent.tools" :key="tool" size="small">
{{ tool }}
</a-tag>
</span>
</div>
<div class="info-item" v-if="currentAgent.is_builtin">
<label>类型</label>
<span><a-tag color="blue">内置</a-tag></span>
</div>
<div class="info-item">
<label>创建时间</label>
<span>{{ formatTime(currentAgent.created_at) }}</span>
</div>
<div class="info-item">
<label>更新时间</label>
<span>{{ formatTime(currentAgent.updated_at) }}</span>
</div>
<div class="info-item" v-if="currentAgent.created_by">
<label>创建人</label>
<span>{{ currentAgent.created_by }}</span>
</div>
</div>
<div class="detail-section-container">
<div class="detail-section">
<div class="section-header">
<MessageSquare :size="14" />
<span>系统提示词</span>
</div>
</a-tab-pane>
<a-tab-pane key="prompt">
<template #tab>
<span class="tab-title"><MessageSquare :size="14" />系统提示词</span>
</template>
<div class="tab-content">
<div class="section-content">
<div class="code-panel">
<pre class="code-panel-pre">{{ currentAgent.system_prompt }}</pre>
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
<div class="detail-section" v-if="currentAgent.description">
<div class="section-header">
<FileText :size="14" />
<span>描述</span>
</div>
<div class="section-content description">
{{ currentAgent.description }}
</div>
</div>
<div class="detail-section" v-if="currentAgent.model">
<div class="section-header">
<Cpu :size="14" />
<span>模型覆盖</span>
</div>
<div class="section-content">
{{ currentAgent.model }}
</div>
</div>
<div class="detail-section" v-if="currentAgent.tools && currentAgent.tools.length > 0">
<div class="section-header">
<Wrench :size="14" />
<span>工具</span>
</div>
<div class="section-content">
<a-tag v-for="tool in currentAgent.tools" :key="tool">{{ tool }}</a-tag>
</div>
</div>
<div class="detail-section" v-if="currentAgent.is_builtin">
<div class="section-header">
<Info :size="14" />
<span>类型</span>
</div>
<div class="section-content">
<a-tag color="blue">内置</a-tag>
</div>
</div>
<div class="detail-section">
<div class="section-header">
<Clock :size="14" />
<span>元信息</span>
</div>
<div class="section-content meta-info">
<div class="meta-item">
<span class="meta-label">创建时间</span>
<span class="meta-value">{{ formatTime(currentAgent.created_at) }}</span>
</div>
<div class="meta-item">
<span class="meta-label">更新时间</span>
<span class="meta-value">{{ formatTime(currentAgent.updated_at) }}</span>
</div>
<div class="meta-item" v-if="currentAgent.created_by">
<span class="meta-label">创建人</span>
<span class="meta-value">{{ currentAgent.created_by }}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
@ -207,7 +226,7 @@
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { Search, Bot, Pencil, Trash2, Info, MessageSquare } from 'lucide-vue-next'
import { Search, Bot, Pencil, Trash2, Info, MessageSquare, FileText, Cpu, Wrench, Clock } from 'lucide-vue-next'
import { subagentApi } from '@/apis/subagent_api'
import { toolApi } from '@/apis/tool_api'
import { formatFullDateTime } from '@/utils/time'
@ -219,7 +238,6 @@ const error = ref(null)
const subagents = ref([])
const searchQuery = ref('')
const currentAgent = ref(null)
const detailTab = ref('general')
const availableTools = ref([])
// 表单相关
@ -271,10 +289,9 @@ const fetchSubAgents = async () => {
currentAgent.value = null
}
}
// 默认选中第一项（切换到 tab 且当前未选中时）
// 默认选中第一项
if (!currentAgent.value && subagents.value.length > 0) {
currentAgent.value = getSortedSubAgents(subagents.value)[0]
detailTab.value = 'general'
}
} else {
error.value = result.message || '获取列表失败'
@ -310,7 +327,6 @@ const handleModelSelect = (spec) => {
// 选择 SubAgent
const selectAgent = (agent) => {
currentAgent.value = agent
detailTab.value = 'general'
}
// 显示添加模态框

36
web/src/components/ToolsManagerComponent.vue
View File

@ -78,7 +78,7 @@
</div>
</div>
<div class="tool-detail">
<div class="detail-section-container">
<div class="detail-section">
<div class="section-header">
<FileText :size="14" />
@ -238,40 +238,6 @@ defineExpose({
}
}
.tool-detail {
padding: 16px;
flex: 1;
overflow-y: auto;
.detail-section {
margin-bottom: 20px;
.section-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 8px;
svg {
color: var(--gray-500);
}
}
.section-content {
&.description {
font-size: 13px;
color: var(--gray-600);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
}
}
}
.args-table {
:deep(.ant-table) {
font-size: 12px;

2
web/src/layouts/AppLayout.vue
View File

@ -321,7 +321,7 @@ div.header,
border: 1px solid transparent;
border-radius: 12px;
background-color: transparent;
color: var(--gray-1000);
color: var(--gray-700);
font-size: 20px;
transition:
background-color 0.2s ease-in-out,