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 { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 1em 0; margin: 2em 0;
font-size: 16px; font-size: 15px;
display: table; display: table;
outline: 1px solid var(--gray-100);
outline-offset: 14px;
border-radius: 12px;
thead tr th{
padding-top: 0;
}
thead th, thead th,
tbody th { tbody th {
border: none; border: none;
border-bottom: 1.5px solid var(--gray-400); border-bottom: 1px solid var(--gray-200);
} }
tbody tr:last-child td { tbody tr:last-child td {
border-bottom: 1.5px solid var(--gray-300); border-bottom: 1px solid var(--gray-200);
border: none; 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"> <div v-if="providerConfig.allModels.length === 0" class="modal-no-models">
<a-alert v-if="!modelStatus[providerConfig.provider]" type="warning" message="请在 src/.env 中配置对应的 APIKEY，并重新启动服务" /> <a-alert v-if="!modelStatus[providerConfig.provider]" type="warning" message="请在 src/.env 中配置对应的 APIKEY，并重新启动服务" />
<div v-else> <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;"> <img src="@/assets/pics/guides/how-to-add-models.png" alt="添加模型指引" style="width: 100%; height: 100%; margin-top: 16px;">
</div> </div>
</div> </div>
@ -447,7 +447,7 @@ const filteredModels = computed(() => {
<style lang="less" scoped> <style lang="less" scoped>
.model-provider-card { .model-provider-card {
border: 1px solid var(--gray-200); border: 1px solid var(--gray-150);
background-color: white; background-color: white;
border-radius: 8px; border-radius: 8px;
margin-bottom: 16px; margin-bottom: 16px;
@ -456,13 +456,12 @@ const filteredModels = computed(() => {
overflow: hidden; overflow: hidden;
&:hover { &:hover {
border-color: var(--gray-300); border-color: var(--gray-200);
} }
// 自定义模型容器特殊样式 // 自定义模型容器特殊样式
&.custom-models-card { &.custom-models-card {
.card-header { .card-header {
border-bottom: 1px solid var(--gray-200);
h3 { h3 {
color: var(--main-color); color: var(--main-color);
@ -474,7 +473,6 @@ const filteredModels = computed(() => {
// 已配置provider的样式 // 已配置provider的样式
&.configured-provider { &.configured-provider {
.card-header { .card-header {
border-bottom: 1px solid var(--gray-200);
.model-icon { .model-icon {
&.available { &.available {
@ -490,7 +488,7 @@ const filteredModels = computed(() => {
&.unconfigured-provider { &.unconfigured-provider {
.card-header { .card-header {
background: #fafafa; background: #fafafa;
border-bottom: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-150);
h3 { h3 {
color: var(--gray-700); color: var(--gray-700);
@ -511,7 +509,7 @@ const filteredModels = computed(() => {
align-items: center; align-items: center;
gap: 12px; gap: 12px;
cursor: pointer; cursor: pointer;
padding: 16px 20px; padding: 8px 16px;
background: white; background: white;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -551,7 +549,7 @@ const filteredModels = computed(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border: 1px solid var(--gray-200); border: 1px solid var(--gray-100);
border-radius: 6px; border-radius: 6px;
} }
@ -613,7 +611,7 @@ const filteredModels = computed(() => {
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
background-color: var(--gray-100); background-color: var(--gray-50);
color: var(--gray-700); color: var(--gray-700);
} }
@ -644,13 +642,13 @@ const filteredModels = computed(() => {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px; gap: 12px;
padding: 16px; padding: 16px;
background: #fafafa; background: var(--gray-10);
// 普通模型卡片样式 // 普通模型卡片样式
.card-models { .card-models {
width: 100%; width: 100%;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--gray-200); border: 1px solid var(--gray-150);
padding: 12px 16px; padding: 12px 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -661,8 +659,8 @@ const filteredModels = computed(() => {
min-height: 48px; min-height: 48px;
&:hover { &:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
border-color: var(--gray-400); border-color: var(--gray-200);
} }
.model_name { .model_name {
@ -701,12 +699,12 @@ const filteredModels = computed(() => {
min-height: 72px; min-height: 72px;
background: white; background: white;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--gray-200); border: 1px solid var(--gray-150);
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); 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 { .card-models__header .action {
opacity: 1; opacity: 1;
@ -884,7 +882,7 @@ const filteredModels = computed(() => {
padding: 4px 6px; padding: 4px 6px;
border-radius: 6px; border-radius: 6px;
background-color: white; background-color: white;
border: 1px solid var(--gray-200); border: 1px solid var(--gray-150);
&:hover { &:hover {
background-color: var(--gray-50); background-color: var(--gray-50);
@ -909,7 +907,7 @@ const filteredModels = computed(() => {
&:hover { &:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); 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; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
padding: 0.25rem 0.5rem; padding: 4px 8px;
cursor: pointer; cursor: pointer;
border: 1px solid var(--gray-300); border: 1px solid var(--gray-200);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; 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 { .scrollable-menu {
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;

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

@ -6,7 +6,7 @@
<h3 class="title">用户管理</h3> <h3 class="title">用户管理</h3>
<p class="description">管理系统用户，请谨慎操作。删除用户后该用户将无法登录系统。</p> <p class="description">管理系统用户，请谨慎操作。删除用户后该用户将无法登录系统。</p>
</div> </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> <template #icon><PlusOutlined /></template>
添加用户 添加用户
</a-button> </a-button>

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

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