feat: 优化界面样式
This commit is contained in:
parent
ecdadfd3c6
commit
96dcb5d20e
|
|
@ -63,9 +63,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-card">
|
<div class="settings-card">
|
||||||
<div class="settings-row">
|
<div class="settings-row">
|
||||||
<div class="row-label">默认 Provider</div>
|
<div class="row-label">
|
||||||
|
<span class="row-title">默认 Provider</span>
|
||||||
|
<span class="row-desc">选择默认使用的 LLM Provider</span>
|
||||||
|
</div>
|
||||||
<div class="row-value">
|
<div class="row-value">
|
||||||
<select v-model="modelSettings.default_provider" class="inline-select">
|
<select v-model="modelSettings.default_provider" class="inline-select" @change="saveDefaultProvider">
|
||||||
|
<option :value="null" disabled>选择 Provider</option>
|
||||||
<option v-for="p in providers" :key="p.id" :value="p.id">
|
<option v-for="p in providers" :key="p.id" :value="p.id">
|
||||||
{{ p.name }} ({{ p.default_model }})
|
{{ p.name }} ({{ p.default_model }})
|
||||||
</option>
|
</option>
|
||||||
|
|
@ -75,19 +79,13 @@
|
||||||
<div class="settings-row">
|
<div class="settings-row">
|
||||||
<div class="row-label">温度 (Temperature)</div>
|
<div class="row-label">温度 (Temperature)</div>
|
||||||
<div class="row-value">
|
<div class="row-value">
|
||||||
<div class="input-with-hint">
|
<input v-model.number="modelSettings.temperature" type="number" min="0" max="2" step="0.1" class="inline-input" />
|
||||||
<input v-model.number="modelSettings.temperature" type="number" min="0" max="2" step="0.1" class="inline-input" />
|
|
||||||
<span class="hint-inline">控制随机性，较低值更确定，较高值更有创造性</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-row">
|
<div class="settings-row">
|
||||||
<div class="row-label">最大 Tokens</div>
|
<div class="row-label">最大 Tokens</div>
|
||||||
<div class="row-value">
|
<div class="row-value">
|
||||||
<div class="input-with-hint">
|
<input v-model.number="modelSettings.max_tokens" type="number" min="100" max="32000" class="inline-input" />
|
||||||
<input v-model.number="modelSettings.max_tokens" type="number" min="100" max="32000" class="inline-input" />
|
|
||||||
<span class="hint-inline">单次回复最大 token 数</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-row">
|
<div class="settings-row">
|
||||||
|
|
@ -130,59 +128,61 @@
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<span class="section-icon">🔌</span>
|
<span class="section-icon">🔌</span>
|
||||||
<span class="section-text">LLM Provider</span>
|
<span class="section-text">LLM Provider</span>
|
||||||
<button @click="showModal = true" class="btn-add">+ 添加</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="loading" class="loading"><div class="spinner"></div>加载中...</div>
|
<div v-if="loading" class="loading"><div class="spinner"></div>加载中...</div>
|
||||||
<div v-else-if="error" class="error">{{ error }}</div>
|
<div v-else-if="error" class="error">{{ error }}</div>
|
||||||
<div v-else-if="!providers.length" class="empty-card">
|
<div v-else-if="providers.length" class="settings-table-container">
|
||||||
<p>暂无 Provider，点击上方按钮添加</p>
|
<table class="settings-table">
|
||||||
</div>
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>名称</th>
|
||||||
|
<th>API / 模型</th>
|
||||||
|
<th class="switch-col">启用</th>
|
||||||
|
<th class="ops-col">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="p in providers" :key="p.id">
|
||||||
|
<td class="name-col">
|
||||||
|
<div class="provider-name">{{ p.name }}</div>
|
||||||
|
<div class="provider-badges">
|
||||||
|
<span v-if="p.is_default" class="badge badge-default">默认</span>
|
||||||
|
<span v-if="p.enabled" class="badge badge-enabled">启用</span>
|
||||||
|
<span v-else class="badge badge-disabled">禁用</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="info-col">
|
||||||
|
<div class="info-item">{{ p.base_url }}</div>
|
||||||
|
<div class="info-item sub">模型: {{ p.default_model }}</div>
|
||||||
|
<div class="info-item sub">最大Tokens: {{ p.max_tokens || 8192 }}</div>
|
||||||
|
</td>
|
||||||
|
<td class="switch-col">
|
||||||
|
<label class="switch" @click.prevent="toggleEnabled(p)">
|
||||||
|
<input type="checkbox" :checked="p.enabled" />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
<td class="ops-col">
|
||||||
|
<div class="ops-buttons">
|
||||||
|
<button @click="editProvider(p)" class="btn-op">编辑</button>
|
||||||
|
<button @click="testProvider(p)" :disabled="testing === p.id" class="btn-op">
|
||||||
|
{{ testing === p.id ? '测试中...' : '测试' }}
|
||||||
|
</button>
|
||||||
|
<button @click="deleteProvider(p)" class="btn-op btn-danger">删除</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-else class="settings-table-container">
|
<!-- 添加按钮 -->
|
||||||
<table class="settings-table">
|
<div class="settings-card">
|
||||||
<thead>
|
<div class="settings-row actions">
|
||||||
<tr>
|
<button @click="showModal = true" class="btn-primary">+ 添加 Provider</button>
|
||||||
<th>名称</th>
|
</div>
|
||||||
<th>API / 模型</th>
|
</div>
|
||||||
<th class="action-col">启用</th>
|
|
||||||
<th class="ops-col">操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="p in providers" :key="p.id">
|
|
||||||
<td class="name-col">
|
|
||||||
<div class="provider-name">{{ p.name }}</div>
|
|
||||||
<div class="provider-badges">
|
|
||||||
<span v-if="p.is_default" class="badge default">默认</span>
|
|
||||||
<span v-if="p.enabled" class="badge enabled">启用</span>
|
|
||||||
<span v-else class="badge disabled">禁用</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="info-col">
|
|
||||||
<div class="info-item">{{ p.base_url }}</div>
|
|
||||||
<div class="info-item sub">模型: {{ p.default_model }}</div>
|
|
||||||
<div class="info-item sub">最大Tokens: {{ p.max_tokens || 8192 }}</div>
|
|
||||||
</td>
|
|
||||||
<td class="switch-col">
|
|
||||||
<label class="switch" @click.prevent="toggleEnabled(p)">
|
|
||||||
<input type="checkbox" :checked="p.enabled" />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</td>
|
|
||||||
<td class="ops-col">
|
|
||||||
<div class="ops-buttons">
|
|
||||||
<button @click="editProvider(p)" class="btn-op">编辑</button>
|
|
||||||
<button @click="testProvider(p)" :disabled="testing === p.id" class="btn-op">
|
|
||||||
{{ testing === p.id ? '测试中...' : '测试' }}
|
|
||||||
</button>
|
|
||||||
<button @click="deleteProvider(p)" class="btn-op btn-danger">删除</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 测试结果弹窗 -->
|
<!-- 测试结果弹窗 -->
|
||||||
|
|
@ -238,18 +238,6 @@
|
||||||
<input v-model.number="form.max_tokens" type="number" placeholder="8192" min="1" />
|
<input v-model.number="form.max_tokens" type="number" placeholder="8192" min="1" />
|
||||||
<span class="hint">单次回复最大 token 数，默认 8192</span>
|
<span class="hint">单次回复最大 token 数，默认 8192</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label class="switch-card" :class="{ active: form.is_default }">
|
|
||||||
<div class="switch-content">
|
|
||||||
<span class="switch-title">设为默认 Provider</span>
|
|
||||||
<span class="switch-desc">新会话将默认使用此 Provider</span>
|
|
||||||
</div>
|
|
||||||
<label class="switch">
|
|
||||||
<input v-model="form.is_default" type="checkbox" />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="formError" class="error">{{ formError }}</div>
|
<div v-if="formError" class="error">{{ formError }}</div>
|
||||||
|
|
||||||
|
|
@ -376,7 +364,7 @@ const testResult = ref(null)
|
||||||
const formError = ref('')
|
const formError = ref('')
|
||||||
|
|
||||||
const form = ref({
|
const form = ref({
|
||||||
name: '', base_url: '', api_key: '', default_model: '', max_tokens: 8192, is_default: false
|
name: '', base_url: '', api_key: '', default_model: '', max_tokens: 8192
|
||||||
})
|
})
|
||||||
|
|
||||||
const fetchProviders = async () => {
|
const fetchProviders = async () => {
|
||||||
|
|
@ -399,7 +387,7 @@ const fetchProviders = async () => {
|
||||||
const closeModal = () => {
|
const closeModal = () => {
|
||||||
showModal.value = false
|
showModal.value = false
|
||||||
editing.value = null
|
editing.value = null
|
||||||
form.value = { name: '', base_url: '', api_key: '', default_model: '', max_tokens: 8192, is_default: false }
|
form.value = { name: '', base_url: '', api_key: '', default_model: '', max_tokens: 8192 }
|
||||||
formError.value = ''
|
formError.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -411,10 +399,9 @@ const editProvider = async (p) => {
|
||||||
form.value = {
|
form.value = {
|
||||||
name: res.data.name,
|
name: res.data.name,
|
||||||
base_url: res.data.base_url,
|
base_url: res.data.base_url,
|
||||||
api_key: res.data.api_key || '',
|
api_key: '', // 不显示原密码
|
||||||
default_model: res.data.default_model,
|
default_model: res.data.default_model,
|
||||||
max_tokens: res.data.max_tokens || 8192,
|
max_tokens: res.data.max_tokens || 8192
|
||||||
is_default: res.data.is_default
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
@ -424,8 +411,13 @@ const editProvider = async (p) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const saveProvider = async () => {
|
const saveProvider = async () => {
|
||||||
if (!form.value.base_url || !form.value.api_key || !form.value.default_model) {
|
if (!form.value.base_url || !form.value.default_model) {
|
||||||
formError.value = '请填写所有必填项'
|
formError.value = '请填写必填项（Base URL 和模型名称）'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 编辑时 api_key 可以为空（表示不修改密码）
|
||||||
|
if (!editing.value && !form.value.api_key) {
|
||||||
|
formError.value = '请填写 API Key'
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -434,8 +426,11 @@ const saveProvider = async () => {
|
||||||
try {
|
try {
|
||||||
const data = { ...form.value }
|
const data = { ...form.value }
|
||||||
let res
|
let res
|
||||||
if (editing.value) res = await providersAPI.update(editing.value, data)
|
if (editing.value) {
|
||||||
else res = await providersAPI.create(data)
|
res = await providersAPI.update(editing.value, data)
|
||||||
|
} else {
|
||||||
|
res = await providersAPI.create(data)
|
||||||
|
}
|
||||||
|
|
||||||
if (res.success) { closeModal(); fetchProviders() }
|
if (res.success) { closeModal(); fetchProviders() }
|
||||||
else throw new Error(res.message)
|
else throw new Error(res.message)
|
||||||
|
|
@ -482,6 +477,22 @@ const toggleEnabled = async (p) => {
|
||||||
} catch (e) { alert('更新失败: ' + e.message) }
|
} catch (e) { alert('更新失败: ' + e.message) }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const saveDefaultProvider = async () => {
|
||||||
|
try {
|
||||||
|
// 取消所有 Provider 的默认状态
|
||||||
|
for (const p of providers.value) {
|
||||||
|
if (p.is_default && p.id !== modelSettings.value.default_provider) {
|
||||||
|
await providersAPI.update(p.id, { is_default: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 设置选中的 Provider 为默认
|
||||||
|
if (modelSettings.value.default_provider) {
|
||||||
|
await providersAPI.update(modelSettings.value.default_provider, { is_default: true })
|
||||||
|
}
|
||||||
|
await fetchProviders()
|
||||||
|
} catch (e) { alert('设置默认 Provider 失败: ' + e.message) }
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchUserInfo()
|
fetchUserInfo()
|
||||||
fetchProviders()
|
fetchProviders()
|
||||||
|
|
@ -524,14 +535,12 @@ onMounted(() => {
|
||||||
.row-label { min-width: 140px; color: var(--text-secondary); font-size: 0.85rem; flex-shrink: 0; }
|
.row-label { min-width: 140px; color: var(--text-secondary); font-size: 0.85rem; flex-shrink: 0; }
|
||||||
.row-title { display: block; font-weight: 500; color: var(--text-primary); font-size: 0.9rem; }
|
.row-title { display: block; font-weight: 500; color: var(--text-primary); font-size: 0.9rem; }
|
||||||
.row-desc { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.15rem; }
|
.row-desc { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.15rem; }
|
||||||
.row-value { flex: 1; color: var(--text-primary); font-size: 0.9rem; }
|
.row-value { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
|
||||||
|
.row-value .switch { margin-left: auto; }
|
||||||
|
|
||||||
/* 内联输入框 */
|
/* 内联输入框 */
|
||||||
.inline-select, .inline-input { padding: 0.5rem 0.75rem; border: 1px solid var(--border-input); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); font-size: 0.85rem; min-width: 180px; }
|
.inline-select, .inline-input { padding: 0.5rem 0.75rem; border: 1px solid var(--border-input); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); font-size: 0.85rem; }
|
||||||
.inline-input { width: 120px; }
|
.inline-input { width: 120px; }
|
||||||
.inline-input { width: 120px; }
|
|
||||||
.input-with-hint { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
|
|
||||||
.hint-inline { font-size: 0.75rem; color: var(--text-tertiary); }
|
|
||||||
textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-size: 0.85rem; resize: vertical; min-height: 80px; box-sizing: border-box; }
|
textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font-size: 0.85rem; resize: vertical; min-height: 80px; box-sizing: border-box; }
|
||||||
.hint-block { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.5rem; }
|
.hint-block { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.5rem; }
|
||||||
|
|
||||||
|
|
@ -545,19 +554,19 @@ textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-input);
|
||||||
|
|
||||||
/* 列宽 */
|
/* 列宽 */
|
||||||
.name-col { width: 15%; min-width: 120px; }
|
.name-col { width: 15%; min-width: 120px; }
|
||||||
.info-col { width: 55%; min-width: 150px; }
|
.info-col { width: 60%; min-width: 200px; }
|
||||||
.switch-col { text-align: center; width: 10%; }
|
.switch-col { text-align: center; width: 80px; }
|
||||||
.action-col { text-align: center; width: 10%; }
|
.action-col { text-align: center; width: 80px; }
|
||||||
.ops-col { width: 10%; min-width: 180px; }
|
.ops-col { width: 15%; min-width: 180px; text-align: center; }
|
||||||
|
|
||||||
/* Provider 单元格 */
|
/* Provider 单元格 */
|
||||||
.provider-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
|
.provider-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
|
||||||
.provider-badges { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
|
.provider-badges { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
|
||||||
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 20px; font-size: 0.65rem; font-weight: 500; }
|
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 20px; font-size: 0.65rem; font-weight: 500; }
|
||||||
|
|
||||||
.badge.default { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
|
.badge-default { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
|
||||||
.badge.enabled { background: rgba(52, 211, 153, 0.2); color: #16a34a; }
|
.badge-enabled { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
|
||||||
.badge.disabled { background: var(--bg-tertiary); color: var(--text-tertiary); }
|
.badge-disabled { background: var(--bg-tertiary); color: var(--text-tertiary); border: 1px solid var(--border-light); }
|
||||||
.info-item { font-size: 0.8rem; color: var(--text-primary); word-break: break-all; }
|
.info-item { font-size: 0.8rem; color: var(--text-primary); word-break: break-all; }
|
||||||
.info-item.sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.2rem; }
|
.info-item.sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.2rem; }
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@ class ProviderUpdate(BaseModel):
|
||||||
base_url: Optional[str] = None
|
base_url: Optional[str] = None
|
||||||
api_key: Optional[str] = None
|
api_key: Optional[str] = None
|
||||||
default_model: Optional[str] = None
|
default_model: Optional[str] = None
|
||||||
|
max_tokens: Optional[int] = None
|
||||||
is_default: Optional[bool] = None
|
is_default: Optional[bool] = None
|
||||||
enabled: Optional[bool] = None
|
enabled: Optional[bool] = None
|
||||||
|
|
||||||
|
|
@ -61,11 +62,6 @@ def create_provider(
|
||||||
"""Create a new LLM provider"""
|
"""Create a new LLM provider"""
|
||||||
db = SessionLocal()
|
db = SessionLocal()
|
||||||
try:
|
try:
|
||||||
# If this is set as default, unset other defaults
|
|
||||||
if provider.is_default:
|
|
||||||
db.query(LLMProvider).filter(
|
|
||||||
LLMProvider.user_id == current_user.id
|
|
||||||
).update({"is_default": False})
|
|
||||||
|
|
||||||
db_provider = LLMProvider(
|
db_provider = LLMProvider(
|
||||||
user_id=current_user.id,
|
user_id=current_user.id,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue