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

优化设置的前端样式

Browse Source
This commit is contained in:
Wenjie Zhang 2025-03-14 03:29:08 +08:00
parent b7ef7fa0c2
commit 89046fa31f
2 changed files with 141 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/src/assets/providers/siliconflow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@ -5,11 +5,8 @@
<p>配置文件也可以在 <code>saves/config/base.yaml</code> 中修改</p>
</template>
<template #actions>
<a-button type="primary" v-if="isNeedRestart" @click="sendRestart">
<ReloadOutlined />需要重启
</a-button>
<a-button v-else @click="sendRestart">
<ReloadOutlined />重启服务
<a-button :type="isNeedRestart ? 'primary' : 'default'" @click="sendRestart" :icon="h(ReloadOutlined)">
{{ isNeedRestart ? '需要重启' : '重启服务' }}
</a-button>
</template>
</HeaderComponent>
@ -121,12 +118,12 @@
>
<a-button type="text" :disabled="configStore.config.model_name == item.name" @click.stop><DeleteOutlined /></a-button>
</a-popconfirm>
<a-button type="text" @click.stop="handleEditCustomModel(item)"><EditOutlined /></a-button>
<a-button type="text" @click.stop="prepareToEditCustomModel(item)"><EditOutlined /></a-button>
</div>
</div>
<div class="api_base">{{ item.api_base }}</div>
</div>
<div class="card-models custom-model" @click="customModel.visible=true">
<div class="card-models custom-model" @click="prepareToAddCustomModel">
<div class="card-models__header">
<div class="name"> + 添加模型</div>
</div>
@ -135,7 +132,7 @@
class="custom-model-modal"
v-model:open="customModel.visible"
:title="customModel.modelTitle"
@ok="handleAddCustomModel"
@ok="handleAddOrEditCustomModel"
@cancel="handleCancelCustomModel"
:okText="'确认'"
:cancelText="'取消'"
@ -145,13 +142,13 @@
<p>添加的模型是兼容 OpenAI 的模型，比如 vllm，Ollama。</p>
<a-form :model="customModel" layout="vertical" >
<a-form-item label="模型名称" name="name" :rules="[{ required: true, message: '请输入模型名称' }]">
<a-input v-model:value="customModel.name" />
<a-input v-model:value="customModel.name" :disabled="customModel.edit_type == 'edit'"/>
</a-form-item>
<a-form-item label="API Base" name="api_base" :rules="[{ required: true, message: '请输入API Base' }]">
<a-input v-model:value="customModel.api_base"/>
<a-input v-model:value="customModel.api_base" />
</a-form-item>
<a-form-item label="API KEY" name="api_key">
<a-input v-model:value="customModel.api_key" autocomplete="off"/>
<a-input-password v-model:value="customModel.api_key" :visibilityToggle="false" autocomplete="new-password"/>
</a-form-item>
</a-form>
</a-modal>
@ -164,25 +161,47 @@
<div :class="{'model-icon': true, 'available': modelStatus[item]}">
<img :src="modelIcons[item]" alt="模型图标">
</div>
<h3>{{ modelNames[item].name }}</h3>
<a :href="modelNames[item].url" target="_blank"><InfoCircleOutlined /></a>
</div>
<div class="card-body" v-if="modelStatus[item]">
<div
:class="{'model_selected': modelProvider == item && configStore.config.model_name == model, 'card-models': true}"
v-for="(model, idx) in modelNames[item].models" :key="idx"
@click="handleChange('model_provider', item); handleChange('model_name', model)"
<div class="model-title-container">
<h3>{{ modelNames[item].name }}</h3>
<a :href="modelNames[item].url" target="_blank" class="model-url">
更多模型
</a>
</div>
<a-button
type="text"
class="expand-button"
@click="expandedModels[item] = !expandedModels[item]"
>
<div class="model_name">{{ model }}</div>
<span class="icon-wrapper" :class="{'rotated': expandedModels[item]}">
<DownOutlined />
</span>
</a-button>
</div>
<div class="card-body-wrapper" :class="{'expanded': expandedModels[item]}">
<div class="card-body" v-if="modelStatus[item]">
<div
:class="{'model_selected': modelProvider == item && configStore.config.model_name == model, 'card-models': true}"
v-for="(model, idx) in modelNames[item].models" :key="idx"
@click="handleChange('model_provider', item); handleChange('model_name', model)"
>
<div class="model_name">{{ model }}</div>
</div>
</div>
</div>
</div>
<div class="model-provider-card" v-for="(item, key) in notModelKeys" :key="key">
<div class="card-header">
<h3 style="font-weight: 400">{{ modelNames[item].name }}</h3>
<a :href="modelNames[item].url" target="_blank"><InfoCircleOutlined /></a>
<div class="model-icon">
<img :src="modelIcons[item]" alt="模型图标">
</div>
<div class="model-title-container">
<h3 style="font-weight: 400">{{ modelNames[item].name }}</h3>
<a :href="modelNames[item].url" target="_blank" class="model-url">
<InfoCircleOutlined /> 更多模型
</a>
</div>
<div class="missing-keys">
<small>需配置</small> <span v-for="(key, idx) in modelNames[item].env" :key="idx">{{ key }}</span>
需配置<span v-for="(key, idx) in modelNames[item].env" :key="idx">{{ key }}</span>
</div>
</div>
</div>
@ -212,6 +231,8 @@ import {
DeleteOutlined,
EditOutlined,
InfoCircleOutlined,
DownOutlined,
UpOutlined,
} from '@ant-design/icons-vue';
import HeaderComponent from '@/components/HeaderComponent.vue';
import TableConfigComponent from '@/components/TableConfigComponent.vue';
@ -228,7 +249,7 @@ const isNeedRestart = ref(false)
const customModel = reactive({
modelTitle: '添加自定义模型',
visible: false,
custom_id: '', // Add this line
custom_id: '',
name: '',
api_key: '',
api_base: '',
@ -249,6 +270,9 @@ const notModelKeys = computed(() => {
return Object.keys(modelStatus.value || {}).filter(key => !modelStatus.value?.[key])
})
// 模型展开状态管理
const expandedModels = reactive({})
const generateRandomHash = (length) => {
let chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
let hash = '';
@ -298,49 +322,35 @@ const handleChange = (key, e) => {
configStore.setConfigValue(key, e)
}
const handleAddCustomModel = async () => {
const handleAddOrEditCustomModel = async () => {
if (!customModel.name || !customModel.api_base) {
message.error('请填写完整模型信息')
message.error('请填写完整的模型名称和API Base信息。')
return
}
if (!configStore.config.custom_models) {
configStore.config.custom_models = []
}
let custom_models = configStore.config.custom_models || [];
const model_info = {
custom_id: customModel.custom_id,
custom_id: customModel.custom_id || `${customModel.name}-${generateRandomHash(4)}`,
name: customModel.name,
api_key: customModel.api_key,
api_base: customModel.api_base,
}
if (customModel.edit_type == 'add') {
if (configStore.config.custom_models.find(item => item.custom_id == customModel.custom_id)) {
message.error('模型ID已存在')
if (customModel.edit_type === 'add') {
if (custom_models.find(item => item.custom_id === customModel.custom_id)) {
message.error('模型ID已存在')
return
}
const modelHash = generateRandomHash(4)
model_info.custom_id = `${customModel.name}-${modelHash}`
configStore.config.custom_models.push(model_info)
custom_models.push(model_info)
} else {
configStore.config.custom_models = configStore.config.custom_models.map(item => {
if (item.custom_id == customModel.custom_id) {
if (item.name != customModel.name) {
const modelHash = generateRandomHash(4)
model_info.custom_id = `${customModel.name}-${modelHash}`
configStore.setConfigValue('model_name', model_info.custom_id)
}
return model_info
}
return item
})
// 如果 custom_id 相同，则更新
custom_models = custom_models.map(item => item.custom_id === customModel.custom_id ? model_info : item);
}
customModel.visible = false
await configStore.setConfigValue('custom_models', configStore.config.custom_models)
message.success('添加自定义模型成功')
customModel.visible = false;
await configStore.setConfigValue('custom_models', custom_models);
message.success(customModel.edit_type === 'add' ? '模型添加成功' : '模型修改成功');
}
const handleDeleteCustomModel = (custom_id) => {
@ -348,21 +358,32 @@ const handleDeleteCustomModel = (custom_id) => {
configStore.setConfigValue('custom_models', updatedModels);
}
const handleEditCustomModel = (item) => {
const prepareToEditCustomModel = (item) => {
customModel.modelTitle = '编辑自定义模型'
customModel.custom_id = item.custom_id
customModel.visible = true
customModel.edit_type = 'edit'
customModel.name = item.name
customModel.api_key = item.api_key
customModel.api_base = item.api_base
customModel.visible = true
customModel.edit_type = 'edit'
}
const handleCancelCustomModel = () => {
const prepareToAddCustomModel = () => {
customModel.modelTitle = '添加自定义模型'
customModel.edit_type = 'add'
customModel.visible = true
clearCustomModel()
}
const clearCustomModel = () => {
customModel.custom_id = ''
customModel.name = ''
customModel.api_key = ''
customModel.api_base = ''
}
const handleCancelCustomModel = () => {
clearCustomModel()
customModel.visible = false
}
@ -496,17 +517,31 @@ const sendRestart = () => {
padding: 12px;
.card-header {
display: flex;
align-items: center;
align-items: flex-start;
gap: 10px;
.model-title-container {
display: flex;
flex-direction: column;
flex: 1;
}
.model-url {
font-size: 12px;
width: fit-content;
color: var(--gray-500);
}
.model-icon {
width: 24px;
height: 24px;
width: 40px;
height: 40px;
// 灰度
filter: grayscale(100%);
img {
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid var(--gray-300);
}
&.available {
@ -514,10 +549,9 @@ const sendRestart = () => {
}
}
h3 {
margin: 0;
font-size: 1rem;
font-size: 0.9rem;
font-weight: bold;
}
@ -546,12 +580,53 @@ const sendRestart = () => {
}
.missing-keys {
margin-top: 4px;
color: var(--gray-600);
font-size: 12px;
& > span {
margin-left: 10px;
margin-left: 6px;
user-select: all;
background-color: var(--gray-100);
padding: 2px 6px;
border-radius: 4px;
color: var(--gray-800);
}
}
.expand-button {
margin-left: auto;
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
color: var(--gray-500);
&:hover {
background-color: var(--gray-100);
}
.icon-wrapper {
display: inline-flex;
transition: transform 0.5s ease;
&.rotated {
transform: rotate(180deg);
}
}
}
}
.card-body-wrapper {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
&.expanded {
max-height: 500px; /* 设置一个足够大的值 */
}
}
.card-body {
@ -606,7 +681,7 @@ const sendRestart = () => {
gap: 10px;
.card-models__header {
width: 100%;
height: 32px;
height: 24px;
display: flex;
justify-content: flex-start;
align-items: center;
@ -631,6 +706,10 @@ const sendRestart = () => {
.api_base {
font-size: 12px;
color: var(--gray-600);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
&:hover {