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

style(web): 优化样式细节和调整组件边距

Browse Source
This commit is contained in:
Wenjie Zhang 2025-09-19 00:58:35 +08:00
parent 69c56d49e6
commit 347e7c5807
5 changed files with 75 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/AgentMessageComponent.vue
View File

@ -577,20 +577,27 @@ const toggleToolCall = (toolCallId) => {
table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: 16px;
margin: 2em 0;
font-size: 15px;
display: table;
outline: 1px solid var(--gray-100);
outline-offset: 14px;
border-radius: 12px;
thead tr th{
padding-top: 0;
}
thead th,
tbody th {
border: none;
border-bottom: 1.5px solid var(--gray-400);
border-bottom: 1px solid var(--gray-200);
}
tbody tr:last-child td {
border-bottom: 1.5px solid var(--gray-300);
border-bottom: 1px solid var(--gray-200);
border: none;
padding-bottom: 0;
}
}

32
web/src/components/ModelProvidersComponent.vue
View File

@ -178,7 +178,7 @@
<div v-if="providerConfig.allModels.length === 0" class="modal-no-models">
<a-alert v-if="!modelStatus[providerConfig.provider]" type="warning" message="请在 src/.env 中配置对应的 APIKEY，并重新启动服务" />
<div v-else>
<a-alert type="warning" message="该提供商暂未适配获取模型列表的方法，如果需要添加模型，请在 src/static/models.private.yml 中添加。（如没有此文件，则需要手动创建一个）" />
<a-alert type="warning" message="该提供商暂未适配获取模型列表的方法，如果需要添加模型，请在 src/static/models.private.yaml 中添加。（如没有此文件，则需要手动创建一个）" />
<img src="@/assets/pics/guides/how-to-add-models.png" alt="添加模型指引" style="width: 100%; height: 100%; margin-top: 16px;">
</div>
</div>
@ -447,7 +447,7 @@ const filteredModels = computed(() => {
<style lang="less" scoped>
.model-provider-card {
border: 1px solid var(--gray-200);
border: 1px solid var(--gray-150);
background-color: white;
border-radius: 8px;
margin-bottom: 16px;
@ -456,13 +456,12 @@ const filteredModels = computed(() => {
overflow: hidden;
&:hover {
border-color: var(--gray-300);
border-color: var(--gray-200);
}
// 自定义模型容器特殊样式
&.custom-models-card {
.card-header {
border-bottom: 1px solid var(--gray-200);
h3 {
color: var(--main-color);
@ -474,7 +473,6 @@ const filteredModels = computed(() => {
// 已配置provider的样式
&.configured-provider {
.card-header {
border-bottom: 1px solid var(--gray-200);
.model-icon {
&.available {
@ -490,7 +488,7 @@ const filteredModels = computed(() => {
&.unconfigured-provider {
.card-header {
background: #fafafa;
border-bottom: 1px solid var(--gray-200);
border-bottom: 1px solid var(--gray-150);
h3 {
color: var(--gray-700);
@ -511,7 +509,7 @@ const filteredModels = computed(() => {
align-items: center;
gap: 12px;
cursor: pointer;
padding: 16px 20px;
padding: 8px 16px;
background: white;
transition: all 0.3s ease;
@ -551,7 +549,7 @@ const filteredModels = computed(() => {
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid var(--gray-200);
border: 1px solid var(--gray-100);
border-radius: 6px;
}
@ -613,7 +611,7 @@ const filteredModels = computed(() => {
transition: all 0.2s ease;
&:hover {
background-color: var(--gray-100);
background-color: var(--gray-50);
color: var(--gray-700);
}
@ -644,13 +642,13 @@ const filteredModels = computed(() => {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
padding: 16px;
background: #fafafa;
background: var(--gray-10);
// 普通模型卡片样式
.card-models {
width: 100%;
border-radius: 6px;
border: 1px solid var(--gray-200);
border: 1px solid var(--gray-150);
padding: 12px 16px;
display: flex;
justify-content: space-between;
@ -661,8 +659,8 @@ const filteredModels = computed(() => {
min-height: 48px;
&:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border-color: var(--gray-400);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
border-color: var(--gray-200);
}
.model_name {
@ -701,12 +699,12 @@ const filteredModels = computed(() => {
min-height: 72px;
background: white;
border-radius: 6px;
border: 1px solid var(--gray-200);
border: 1px solid var(--gray-150);
transition: all 0.3s ease;
&:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
border-color: var(--gray-400);
border-color: var(--gray-200);
.card-models__header .action {
opacity: 1;
@ -884,7 +882,7 @@ const filteredModels = computed(() => {
padding: 4px 6px;
border-radius: 6px;
background-color: white;
border: 1px solid var(--gray-200);
border: 1px solid var(--gray-150);
&:hover {
background-color: var(--gray-50);
@ -909,7 +907,7 @@ const filteredModels = computed(() => {
&:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
border-color: var(--gray-300);
border-color: var(--gray-200);
}
}
}

25
web/src/components/ModelSelectorComponent.vue
View File

@ -64,9 +64,9 @@ const handleSelectModel = (provider, name) => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0.25rem 0.5rem;
padding: 4px 8px;
cursor: pointer;
border: 1px solid var(--gray-300);
border: 1px solid var(--gray-200);
border-radius: 8px;
display: flex;
align-items: center;
@ -90,27 +90,6 @@ const handleSelectModel = (provider, name) => {
}
.nav-btn {
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
color: var(--gray-900);
cursor: pointer;
width: auto;
transition: background-color 0.3s;
padding: 0.5rem 0.75rem;
.text {
margin-left: 10px;
}
&:hover {
background-color: var(--main-20);
}
}
.scrollable-menu {
max-height: 300px;
overflow-y: auto;

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

@ -6,7 +6,7 @@
<h3 class="title">用户管理</h3>
<p class="description">管理系统用户，请谨慎操作。删除用户后该用户将无法登录系统。</p>
</div>
<a-button type="primary" size="large" @click="showAddUserModal" class="add-btn">
<a-button type="primary" @click="showAddUserModal" class="add-btn">
<template #icon><PlusOutlined /></template>
添加用户
</a-button>

55
web/src/views/SettingView.vue
View File

@ -49,6 +49,10 @@
</a-select-option>
</a-select>
</div>
</div>
<h3>内容审查配置</h3>
<div class="section">
<!-- 内容审查配置 -->
<div class="card">
<span class="label">{{ items?.enable_content_guard.des }}</span>
<a-switch
@ -56,6 +60,21 @@
@change="handleChange('enable_content_guard', $event)"
/>
</div>
<div class="card" v-if="configStore.config?.enable_content_guard">
<span class="label">{{ items?.enable_content_guard_llm.des }}</span>
<a-switch
:checked="configStore.config?.enable_content_guard_llm"
@change="handleChange('enable_content_guard_llm', $event)"
/>
</div>
<div class="card card-select" v-if="configStore.config?.enable_content_guard && configStore.config?.enable_content_guard_llm">
<span class="label">{{ items?.content_guard_llm_model.des }}</span>
<ModelSelectorComponent
@select-model="handleContentGuardModelSelect"
:model_name="configStore.config?.content_guard_llm_model?.split('/').pop()"
:model_provider="configStore.config?.content_guard_llm_model?.split('/')[0]"
/>
</div>
</div>
<!-- 服务链接部分 -->
@ -198,6 +217,10 @@ const handleChatModelSelect = ({ provider, name }) => {
})
}
const handleContentGuardModelSelect = ({ provider, name }) => {
configStore.setConfigValue('content_guard_llm_model', `${provider}/${name}`)
}
onMounted(() => {
updateWindowWidth()
window.addEventListener('resize', updateWindowWidth)
@ -297,19 +320,33 @@ const openLink = (url) => {
padding: 0 20px;
margin-bottom: 40px;
h3 {
h3:not(:first-child) {
margin-top: 30px;
}
h3:first-child {
margin-top: 20px;
}
.section {
margin-top: 20px;
margin-top: 10px;
background-color: var(--gray-0);
padding: 20px;
padding: 12px 16px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 16px;
border: 1px solid var(--gray-200);
border: 1px solid var(--gray-150);
.content-guard-section {
h4 {
margin: 0 0 12px 0;
color: var(--gray-900);
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid var(--gray-150);
padding-bottom: 8px;
}
}
}
.card {
@ -335,20 +372,20 @@ const openLink = (url) => {
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
gap: 12px;
margin-top: 20px;
}
.service-link-card {
.service-link-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border: 1px solid var(--gray-300);
padding: 12px 16px;
border: 1px solid var(--gray-150);
border-radius: 8px;
background: white;
transition: all 0.2s;
min-height: 80px;
min-height: 60px;
&:hover {
box-shadow: 0 1px 8px var(--gray-200);