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

feat: 调整样式和布局，优化组件视觉效果

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Wenjie Zhang 2026-04-29 00:45:15 +08:00
parent 204e627839
commit 73304c61d9
10 changed files with 64 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/assets/css/extension-detail.less
View File

@ -7,7 +7,7 @@
background-color: var(--gray-0);
.detail-top-bar {
padding: 12px var(--page-padding);
padding: 7px var(--page-padding);
display: flex;
align-items: center;
gap: 16px;
@ -26,6 +26,7 @@
font-size: 14px;
cursor: pointer;
padding: 4px 8px;
margin-left: -8px;
border-radius: 6px;
transition:
color 0.15s,
@ -66,7 +67,7 @@
h2 {
margin: 0;
font-size: 18px;
font-size: 16px;
font-weight: 600;
color: var(--gray-900);
overflow: hidden;

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

@ -402,7 +402,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border-radius: 6px;
border-style: solid;
border-width: 1px;
box-shadow: none;
@ -463,25 +463,6 @@
}
}
.panel-status-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
background: var(--gray-100);
color: var(--gray-600);
font-size: 12px;
font-weight: 600;
line-height: 1;
&.warning {
background: var(--color-warning-50);
color: var(--color-warning-900);
}
}
.item-meta {
font-size: 12px;
color: var(--gray-700);
@ -576,7 +557,7 @@
:deep(.ant-tabs-nav) {
margin: 0;
padding: 0 16px;
padding: 0 var(--page-padding);
flex-shrink: 0;
border-bottom: 1px solid @border-color;

40
web/src/assets/css/main.css
View File

@ -56,3 +56,43 @@ body {
.lucide-icon-btn svg {
flex-shrink: 0;
}
.card-tag {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
font-size: 11px;
font-weight: 600;
line-height: 1;
background: var(--gray-100);
color: var(--gray-600);
border-radius: 4px;
}
.card-tag.tag-purple,
.card-tag.tag-cyan {
background: var(--color-accent-50);
color: var(--color-accent-700);
}
.card-tag.tag-blue {
background: var(--color-info-50);
color: var(--color-info-700);
}
.card-tag.tag-red,
.card-tag.tag-orange {
background: var(--color-error-50);
color: var(--color-error-700);
}
.card-tag.tag-green {
background: var(--color-success-50);
color: var(--color-success-700);
}
.card-tag.tag-gold {
background: var(--color-warning-50);
color: var(--color-warning-900);
}

4
web/src/components/ConversationNavSection.vue
View File

@ -260,13 +260,13 @@ const renameChat = async (chatId) => {
}
&.active {
background: var(--main-30);
background-color: color-mix(in srgb, var(--main-color) 6%, var(--gray-0));
color: var(--main-color);
font-weight: 600;
.actions-mask {
opacity: 1;
background: linear-gradient(to right, transparent, var(--main-30) 20px);
background: linear-gradient(to right, transparent, color-mix(in srgb, var(--main-color) 6%, var(--gray-0)) 20px);
}
}

2
web/src/components/FileTreeComponent.vue
View File

@ -175,7 +175,7 @@ const handleNodeClick = (data) => {
display: flex;
align-items: center;
width: 100%;
padding: 0 4px;
padding: 0;
height: 32px;
/* 隐藏切换器 */

44
web/src/components/KnowledgeBaseCard.vue
View File

@ -503,6 +503,7 @@ const deleteDatabase = () => {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.chunk-preset-label {
@ -516,47 +517,4 @@ const deleteDatabase = () => {
cursor: help;
font-size: 14px;
}
.card-tag {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
line-height: 1;
background: var(--gray-100);
color: var(--gray-600);
&.tag-purple {
background: #f3e8ff;
color: #7c3aed;
}
&.tag-blue {
background: var(--color-info-50);
color: var(--color-info-700);
}
&.tag-red {
background: var(--color-error-50);
color: var(--color-error-700);
}
&.tag-green {
background: var(--color-success-50);
color: var(--color-success-700);
}
&.tag-gold {
background: #fef3c7;
color: #d97706;
}
&.tag-cyan {
background: #cffafe;
color: #0891b2;
}
&.tag-orange {
background: #fff7ed;
color: #ea580c;
}
}
</style>

11
web/src/components/extensions/SkillDetailView.vue
View File

@ -19,13 +19,6 @@
</div>
<div class="detail-actions">
<a-space :size="8">
<span
v-if="currentSkillStatusLabel"
class="panel-status-chip"
:class="{ warning: currentSkillStatusTone === 'warning' }"
>
{{ currentSkillStatusLabel }}
</span>
<button
v-if="currentSkill?.is_builtin_spec && currentSkill?.status === 'not_installed'"
type="button"
@ -724,7 +717,7 @@ onMounted(() => {
flex-shrink: 0;
.tree-header {
padding: 10px 12px 0;
padding: 10px var(--page-padding) 0;
display: flex;
justify-content: space-between;
align-items: center;
@ -757,7 +750,7 @@ onMounted(() => {
flex: 1;
overflow-y: auto;
height: 100%;
padding: 8px 0;
padding: 8px calc(var(--page-padding) - 4px);
}
}

34
web/src/components/extensions/ToolsCardList.vue
View File

@ -2,23 +2,17 @@
<div class="tools-cards-page extension-page-root">
<PageShoulder search-placeholder="搜索工具..." v-model:search="searchQuery">
<template #filters>
<a-dropdown trigger="click">
<a-button
class="lucide-icon-btn"
:class="{ active: !!selectedCategory }"
style="margin-left: 4px"
>
<SlidersHorizontal :size="14" />
</a-button>
<template #overlay>
<a-menu :selectedKeys="[selectedCategory || 'all']" @click="handleCategorySelect">
<a-menu-item key="all">全部分类</a-menu-item>
<a-menu-item v-for="cat in categories" :key="cat">
{{ categoryLabels[cat] || cat }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-select
v-model:value="selectedCategory"
style="width: 120px"
placeholder="全部分类"
allow-clear
>
<a-select-option value="">全部分类</a-select-option>
<a-select-option v-for="cat in categories" :key="cat" :value="cat">
{{ categoryLabels[cat] || cat }}
</a-select-option>
</a-select>
</template>
<template #actions>
<a-tooltip title="刷新工具">
@ -119,7 +113,7 @@
<script setup>
import { computed, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { Wrench, RefreshCw, SlidersHorizontal, FileText, Tag, Tags, List } from 'lucide-vue-next'
import { Wrench, RefreshCw, FileText, Tag, Tags, List } from 'lucide-vue-next'
import { toolApi } from '@/apis/tool_api'
import { getToolIcon } from '@/components/ToolCallingResult/toolRegistry'
import ExtensionCardGrid from './ExtensionCardGrid.vue'
@ -180,10 +174,6 @@ const selectTool = (tool) => {
detailVisible.value = true
}
const handleCategorySelect = ({ key }) => {
selectedCategory.value = key === 'all' ? '' : key
}
const fetchTools = async () => {
loading.value = true
try {

42
web/src/components/shared/InfoCard.vue
View File

@ -254,48 +254,6 @@ const normalizedTags = computed(() => {
}
}
.card-tag {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
line-height: 1;
background: var(--gray-100);
color: var(--gray-600);
&.tag-purple {
background: #f3e8ff;
color: #7c3aed;
}
&.tag-blue {
background: var(--color-info-50);
color: var(--color-info-700);
}
&.tag-red {
background: var(--color-error-50);
color: var(--color-error-700);
}
&.tag-green {
background: var(--color-success-50);
color: var(--color-success-700);
}
&.tag-gold {
background: #fef3c7;
color: #d97706;
}
&.tag-cyan {
background: #cffafe;
color: #0891b2;
}
&.tag-orange {
background: #fff7ed;
color: #ea580c;
}
}
.card-action-btn {
display: inline-flex;

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

@ -577,7 +577,7 @@ div.header,
&.active {
border-color: transparent;
background-color: var(--main-30);
background-color: color-mix(in srgb, var(--main-color) 6%, var(--gray-0));
font-weight: 600;
color: var(--main-color);
}