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

refactor: 优化组件样式和结构，移除多余的代码，增强可读性

Browse Source
This commit is contained in:
Wenjie Zhang 2026-03-19 18:32:14 +08:00
parent fb7fd6fae5
commit a2ffbb04ba
7 changed files with 177 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
@border-color: var(--gray-150); @border-color: var(--gray-150);
@bg-secondary: var(--gray-10); @bg-secondary: var(--gray-10);
@radius: 8px; @radius: 8px;
@mono-font: 'Monaco', 'Consolas', monospace;
// Root container for extension pages to ensure 100% height // Root container for extension pages to ensure 100% height
.extension-page-root { .extension-page-root {
@ -43,7 +44,7 @@
padding: 12px; padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 8px;
} }
} }
@ -52,16 +53,18 @@
border-radius: @radius; border-radius: @radius;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
border: 1px solid transparent; border: 1px solid var(--gray-50);
background-color: var(--gray-0);
&:hover { &:hover {
background-color: var(--gray-100); border-color: @border-color;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} }
&.active { &.active {
background-color: var(--gray-0); background-color: var(--gray-0);
border-color: @border-color; border-color: @border-color;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
} }
.item-header { .item-header {
@ -93,6 +96,20 @@
} }
} }
.item-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.item-desc {
font-size: 12px;
color: var(--gray-400);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.active { &.active {
.item-icon, .item-icon,
@ -106,12 +123,20 @@
} }
} }
.list-item .item-details-inline {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.item-meta {
font-size: 12px;
color: var(--gray-500);
}
.list-separator { .list-separator {
height: 1px; display: none;
background-color: var(--gray-150);
margin: 2px 12px;
opacity: 0.8; // Deepened from 0.5 to 0.8
flex-shrink: 0;
} }
/* Main Panel */ /* Main Panel */
@ -155,6 +180,36 @@
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.panel-title-row {
min-height: 32px;
}
.panel-title-stack {
min-height: 32px;
display: flex;
flex-direction: column;
justify-content: center;
}
.panel-title-meta {
font-size: 12px;
color: var(--gray-500);
border-radius: 4px;
margin-top: 4px;
display: inline-block;
user-select: text;
}
.panel-title-icon {
color: var(--gray-700);
flex-shrink: 0;
}
.panel-actions {
display: flex;
align-items: center;
}
} }
} }
@ -192,6 +247,22 @@
} }
} }
.detail-tabs {
.tab-content {
padding: 16px;
min-height: 300px;
height: 100%;
overflow: auto;
}
.empty-tab {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
}
.tab-title { .tab-title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -199,6 +270,76 @@
font-size: 14px; font-size: 14px;
} }
.info-grid {
display: grid;
gap: 16px;
.info-item {
display: flex;
flex-direction: column;
gap: 4px;
label {
font-size: 12px;
color: var(--gray-500);
font-weight: 500;
}
> span {
font-size: 14px;
color: var(--gray-900);
}
}
}
.extension-form {
.form-item {
margin-bottom: 16px;
}
}
.mono-text {
font-family: @mono-font;
}
.code-inline {
font-family: @mono-font;
font-size: 13px;
background: var(--gray-50);
padding: 8px 12px;
border-radius: 4px;
}
.code-pre {
font-family: @mono-font;
font-size: 12px;
background: var(--gray-50);
padding: 12px;
border-radius: 4px;
margin: 0;
overflow-x: auto;
}
.code-panel {
background: var(--gray-50);
border: 1px solid var(--gray-150);
border-radius: @radius;
padding: 16px;
}
.code-panel-pre {
margin: 0;
font-family: @mono-font;
font-size: 13px;
white-space: pre-wrap;
word-break: break-word;
color: var(--gray-700);
}
.text-break-all {
word-break: break-all;
}
/* Common helpers */ /* Common helpers */
.text-muted { .text-muted {
color: var(--gray-400); color: var(--gray-400);

26
web/src/assets/icons/subagents.svg
View File

@ -1,26 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<!-- Center agent -->
<circle cx="12" cy="12" r="3" />
<!-- Sub-agents -->
<circle cx="5" cy="5" r="2" />
<circle cx="19" cy="5" r="2" />
<circle cx="5" cy="19" r="2" />
<circle cx="19" cy="19" r="2" />
<!-- Connections -->
<line x1="9.5" y1="9.5" x2="6.5" y2="6.5" />
<line x1="14.5" y1="9.5" x2="17.5" y2="6.5" />
<line x1="9.5" y1="14.5" x2="6.5" y2="17.5" />
<line x1="14.5" y1="14.5" x2="17.5" y2="17.5" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 645 B

114
web/src/components/McpServersComponent.vue
View File

@ -67,7 +67,7 @@
<template v-else> <template v-else>
<div class="panel-top-bar"> <div class="panel-top-bar">
<h2 style="min-height: 32px"> <h2 class="panel-title-row">
<span class="server-icon-lg">{{ currentServer.icon || '🔌' }}</span> <span class="server-icon-lg">{{ currentServer.icon || '🔌' }}</span>
<span <span
><strong>{{ currentServer.name }}</strong></span ><strong>{{ currentServer.name }}</strong></span
@ -146,14 +146,14 @@
> >
<div class="info-item" v-if="currentServer.url"> <div class="info-item" v-if="currentServer.url">
<label>服务器 URL</label> <label>服务器 URL</label>
<span class="url-text">{{ currentServer.url }}</span> <span class="code-inline text-break-all">{{ currentServer.url }}</span>
</div> </div>
<div <div
class="info-item" class="info-item"
v-if="currentServer.headers && Object.keys(currentServer.headers).length > 0" v-if="currentServer.headers && Object.keys(currentServer.headers).length > 0"
> >
<label>请求头</label> <label>请求头</label>
<pre class="headers-pre">{{ <pre class="code-pre">{{
JSON.stringify(currentServer.headers, null, 2) JSON.stringify(currentServer.headers, null, 2)
}}</pre> }}</pre>
</div> </div>
@ -171,7 +171,7 @@
<template v-if="currentServer.transport === 'stdio'"> <template v-if="currentServer.transport === 'stdio'">
<div class="info-item" v-if="currentServer.command"> <div class="info-item" v-if="currentServer.command">
<label>命令</label> <label>命令</label>
<span class="command-text">{{ currentServer.command }}</span> <span class="code-inline">{{ currentServer.command }}</span>
</div> </div>
<div <div
class="info-item" class="info-item"
@ -189,7 +189,7 @@
v-if="currentServer.env && Object.keys(currentServer.env).length > 0" v-if="currentServer.env && Object.keys(currentServer.env).length > 0"
> >
<label>环境变量</label> <label>环境变量</label>
<pre class="headers-pre">{{ <pre class="code-pre">{{
JSON.stringify(currentServer.env, null, 2) JSON.stringify(currentServer.env, null, 2)
}}</pre> }}</pre>
</div> </div>
@ -351,7 +351,7 @@
</div> </div>
<!-- 表单模式 --> <!-- 表单模式 -->
<a-form v-if="formMode === 'form'" layout="vertical" class="server-form"> <a-form v-if="formMode === 'form'" layout="vertical" class="extension-form">
<a-form-item label="服务器名称" required class="form-item"> <a-form-item label="服务器名称" required class="form-item">
<a-input <a-input
v-model:value="form.name" v-model:value="form.name"
@ -953,97 +953,6 @@ defineExpose({
.server-icon { .server-icon {
font-size: 18px; font-size: 18px;
} }
.item-details {
display: flex;
flex-direction: column;
gap: 4px;
.transport-tag {
background: var(--gray-100);
border: none;
color: var(--gray-600);
border-radius: 4px;
font-size: 11px;
width: fit-content;
}
.item-desc {
font-size: 12px;
color: var(--gray-400);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
/* 右侧面板 */
.main-panel {
.detail-tabs {
.tab-content {
padding: 16px;
min-height: 300px;
height: 100%;
overflow: scroll;
}
.empty-tab {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
}
}
.info-grid {
display: grid;
gap: 16px;
.info-item {
display: flex;
flex-direction: column;
gap: 4px;
label {
font-size: 12px;
color: var(--gray-500);
font-weight: 500;
}
span {
font-size: 14px;
color: var(--gray-900);
}
.url-text {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 13px;
word-break: break-all;
background: var(--gray-50);
padding: 8px 12px;
border-radius: 4px;
}
.command-text {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 13px;
background: var(--gray-50);
padding: 8px 12px;
border-radius: 4px;
}
.headers-pre {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 12px;
background: var(--gray-50);
padding: 12px;
border-radius: 4px;
margin: 0;
overflow-x: auto;
}
}
} }
/* 工具列表样式 */ /* 工具列表样式 */
@ -1153,7 +1062,7 @@ defineExpose({
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
color: var(--gray-900); color: var(--gray-900);
font-family: 'Monaco', 'Consolas', monospace; font-family: @mono-font;
} }
.param-required { .param-required {
font-size: 11px; font-size: 11px;
@ -1168,7 +1077,7 @@ defineExpose({
background: var(--gray-100); background: var(--gray-100);
padding: 1px 6px; padding: 1px 6px;
border-radius: 3px; border-radius: 3px;
font-family: 'Monaco', 'Consolas', monospace; font-family: @mono-font;
} }
} }
@ -1189,14 +1098,9 @@ defineExpose({
margin-bottom: 16px; margin-bottom: 16px;
text-align: right; text-align: right;
} }
.server-form {
.form-item {
margin-bottom: 16px;
}
}
.json-mode { .json-mode {
.json-textarea { .json-textarea {
font-family: 'Monaco', 'Consolas', monospace; font-family: @mono-font;
font-size: 13px; font-size: 13px;
} }
.json-actions { .json-actions {

39
web/src/components/SkillsManagerComponent.vue
View File

@ -28,11 +28,11 @@
@click="selectSkill(skill)" @click="selectSkill(skill)"
> >
<div class="item-header"> <div class="item-header">
<Box :size="16" class="item-icon" /> <BookMarked :size="16" class="item-icon" />
<span class="item-name">{{ skill.name }}</span> <span class="item-name">{{ skill.name }}</span>
</div> </div>
<div class="item-details"> <div class="item-details item-details-inline">
<span class="item-slug">{{ skill.slug }}</span> <span class="item-slug item-meta mono-text">{{ skill.slug }}</span>
<div class="item-badges"> <div class="item-badges">
<span <span
v-if="skill.tool_dependencies?.length" v-if="skill.tool_dependencies?.length"
@ -63,7 +63,7 @@
<template v-else> <template v-else>
<div class="panel-top-bar"> <div class="panel-top-bar">
<div class="skill-summary"> <div class="panel-title-stack">
<h2>{{ currentSkill.name }}</h2> <h2>{{ currentSkill.name }}</h2>
<!-- <code>{{ currentSkill.slug }}</code> --> <!-- <code>{{ currentSkill.slug }}</code> -->
</div> </div>
@ -279,7 +279,7 @@ import {
FolderPlus, FolderPlus,
File, File,
Search, Search,
Box, BookMarked,
FileCode, FileCode,
Eye, Eye,
Edit3 Edit3
@ -655,14 +655,6 @@ defineExpose({
.list-item { .list-item {
.item-details { .item-details {
display: flex;
justify-content: space-between;
align-items: center;
.item-slug {
font-size: 12px;
color: var(--gray-400);
font-family: monospace;
}
.item-badges { .item-badges {
display: flex; display: flex;
gap: 4px; gap: 4px;
@ -681,27 +673,6 @@ defineExpose({
} }
} }
/* 右侧面板 */
.main-panel {
.panel-top-bar {
.skill-summary {
min-height: 32px;
display: flex;
flex-direction: column;
justify-content: center;
code {
font-size: 12px;
color: var(--gray-500);
background: @bg-secondary;
padding: 2px 6px;
border-radius: 4px;
margin-top: 4px;
display: inline-block;
}
}
}
}
.workspace { .workspace {
display: flex; display: flex;
flex: 1; flex: 1;

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

@ -33,7 +33,7 @@
@click="selectAgent(agent)" @click="selectAgent(agent)"
> >
<div class="item-header"> <div class="item-header">
<img :src="subagentsIcon" alt="SubAgent" class="agent-icon-svg" /> <Bot :size="16" class="item-icon" />
<span class="item-name">{{ agent.name }}</span> <span class="item-name">{{ agent.name }}</span>
</div> </div>
<div class="item-details"> <div class="item-details">
@ -56,8 +56,8 @@
<template v-else> <template v-else>
<div class="panel-top-bar"> <div class="panel-top-bar">
<h2 style="min-height: 32px"> <h2 class="panel-title-row">
<img :src="subagentsIcon" alt="SubAgent" class="agent-icon-lg-svg" /> <Bot :size="18" class="panel-title-icon" />
<span <span
><strong>{{ currentAgent.name }}</strong></span ><strong>{{ currentAgent.name }}</strong></span
> >
@ -138,8 +138,8 @@
<span class="tab-title"><MessageSquare :size="14" />系统提示词</span> <span class="tab-title"><MessageSquare :size="14" />系统提示词</span>
</template> </template>
<div class="tab-content"> <div class="tab-content">
<div class="prompt-display"> <div class="code-panel">
<pre>{{ currentAgent.system_prompt }}</pre> <pre class="code-panel-pre">{{ currentAgent.system_prompt }}</pre>
</div> </div>
</div> </div>
</a-tab-pane> </a-tab-pane>
@ -157,9 +157,8 @@
@cancel="formModalVisible = false" @cancel="formModalVisible = false"
:maskClosable="false" :maskClosable="false"
width="600px" width="600px"
class="subagent-modal"
> >
<a-form layout="vertical" class="subagent-form"> <a-form layout="vertical" class="extension-form">
<a-form-item label="名称" required class="form-item"> <a-form-item label="名称" required class="form-item">
<a-input <a-input
v-model:value="form.name" v-model:value="form.name"
@ -212,7 +211,6 @@ import { Search, Bot, Pencil, Trash2, Info, MessageSquare } from 'lucide-vue-nex
import { subagentApi } from '@/apis/subagent_api' import { subagentApi } from '@/apis/subagent_api'
import { toolApi } from '@/apis/tool_api' import { toolApi } from '@/apis/tool_api'
import { formatFullDateTime } from '@/utils/time' import { formatFullDateTime } from '@/utils/time'
import subagentsIcon from '@/assets/icons/subagents.svg'
import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue' import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue'
// 状态 // 状态
@ -453,45 +451,6 @@ defineExpose({
<style lang="less" scoped> <style lang="less" scoped>
@import '@/assets/css/extensions.less'; @import '@/assets/css/extensions.less';
.list-item {
.agent-icon-svg {
width: 16px;
height: 16px;
color: var(--gray-500);
flex-shrink: 0;
}
.item-details {
display: flex;
flex-direction: column;
gap: 4px;
.builtin-tag {
background: var(--color-primary-50);
border: none;
color: var(--color-primary-600);
border-radius: 4px;
font-size: 11px;
width: fit-content;
}
.item-desc {
font-size: 12px;
color: var(--gray-400);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.agent-icon-lg-svg {
width: 18px;
height: 18px;
color: var(--gray-700);
flex-shrink: 0;
}
.model-override-row { .model-override-row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -506,62 +465,4 @@ defineExpose({
} }
} }
/* 右侧面板 */
.main-panel {
.detail-tabs {
.tab-content {
padding: 16px;
min-height: 300px;
height: 100%;
overflow: scroll;
}
}
}
.info-grid {
display: grid;
gap: 16px;
.info-item {
display: flex;
flex-direction: column;
gap: 4px;
label {
font-size: 12px;
color: var(--gray-500);
font-weight: 500;
}
span {
font-size: 14px;
color: var(--gray-900);
}
}
}
.prompt-display {
background: var(--gray-50);
border: 1px solid var(--gray-150);
border-radius: 8px;
padding: 16px;
pre {
margin: 0;
font-family: 'Monaco', 'Consolas', monospace;
font-size: 13px;
white-space: pre-wrap;
word-break: break-word;
color: var(--gray-700);
}
}
/* 模态框样式 */
.subagent-modal {
.subagent-form {
.form-item {
margin-bottom: 16px;
}
}
}
</style> </style>

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

@ -45,8 +45,8 @@
<Wrench :size="16" class="item-icon" /> <Wrench :size="16" class="item-icon" />
<span class="item-name">{{ tool.name }}</span> <span class="item-name">{{ tool.name }}</span>
</div> </div>
<div class="item-details"> <div class="item-details item-details-inline">
<span class="item-category">{{ <span class="item-category item-meta">{{
categoryLabels[tool.category] || tool.category categoryLabels[tool.category] || tool.category
}}</span> }}</span>
<div class="item-tags"> <div class="item-tags">
@ -72,9 +72,9 @@
<template v-else> <template v-else>
<div class="panel-top-bar"> <div class="panel-top-bar">
<div class="tool-summary"> <div class="panel-title-stack">
<h2>{{ currentTool.name }}</h2> <h2>{{ currentTool.name }}</h2>
<code>{{ currentTool.id }}</code> <code class="panel-title-meta">{{ currentTool.id }}</code>
</div> </div>
</div> </div>
@ -221,13 +221,6 @@ defineExpose({
.list-item { .list-item {
.item-details { .item-details {
display: flex;
justify-content: space-between;
align-items: center;
.item-category {
font-size: 12px;
color: var(--gray-600);
}
.item-tags { .item-tags {
display: flex; display: flex;
gap: 2px; gap: 2px;
@ -245,26 +238,6 @@ defineExpose({
} }
} }
/* 右侧面板 */
.main-panel {
.panel-top-bar {
.tool-summary {
min-height: 32px;
display: flex;
flex-direction: column;
justify-content: center;
code {
font-size: 12px;
color: var(--gray-500);
border-radius: 4px;
margin-top: 4px;
display: inline-block;
user-select: text;
}
}
}
}
.tool-detail { .tool-detail {
padding: 16px; padding: 16px;
flex: 1; flex: 1;

10
web/src/views/ExtensionsView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="extensions-view"> <div class="extensions-view extension-page-root">
<div class="extensions-header"> <div class="extensions-header">
<a-tabs v-model:activeKey="activeTab" class="extensions-tabs"> <a-tabs v-model:activeKey="activeTab" class="extensions-tabs">
<a-tab-pane key="tools" tab="工具" /> <a-tab-pane key="tools" tab="工具" />
@ -213,13 +213,9 @@ const handleImportUpload = async ({ file, onSuccess, onError }) => {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.extensions-view { @import '@/assets/css/extensions.less';
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
background-color: var(--gray-0);
.extensions-view {
.extensions-header { .extensions-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;