1081 lines
26 KiB
Vue
1081 lines
26 KiB
Vue
<template>
|
||
<div class="page-container settings">
|
||
<div class="page-header">
|
||
<h1>设置</h1>
|
||
</div>
|
||
|
||
<!-- 用户信息 -->
|
||
<div class="settings-section">
|
||
<div class="section-title">
|
||
<span class="section-icon">👤</span>
|
||
<span class="section-text">用户信息</span>
|
||
</div>
|
||
<div class="settings-card">
|
||
<div v-if="loadingUser" class="loading-small"><div class="spinner-small"></div>加载中...</div>
|
||
<template v-else>
|
||
<div class="settings-row">
|
||
<div class="row-label">
|
||
<span class="label-icon">用户名</span>
|
||
</div>
|
||
<div class="row-value">{{ userForm.username || '-' }}</div>
|
||
</div>
|
||
<div class="settings-row">
|
||
<div class="row-label">
|
||
<span class="label-icon">邮箱</span>
|
||
</div>
|
||
<div class="row-value">{{ userForm.email || '-' }}</div>
|
||
</div>
|
||
<div class="settings-row actions">
|
||
<button @click="openUserModal" class="btn-action">编辑资料</button>
|
||
<button @click="handleLogout" class="btn-action btn-logout">退出登录</button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模型设置 -->
|
||
<div class="settings-section">
|
||
<div class="section-title">
|
||
<span class="section-icon">🤖</span>
|
||
<span class="section-text">模型设置</span>
|
||
</div>
|
||
<div class="settings-card">
|
||
<div class="settings-row">
|
||
<div class="row-label">默认 Provider</div>
|
||
<div class="row-value">
|
||
<select v-model="modelSettings.default_provider" class="inline-select">
|
||
<option v-for="p in providers" :key="p.id" :value="p.id">
|
||
{{ p.name }} ({{ p.default_model }})
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="settings-row">
|
||
<div class="row-label">温度 (Temperature)</div>
|
||
<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" />
|
||
<span class="hint-inline">控制随机性，较低值更确定，较高值更有创造性</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="settings-row">
|
||
<div class="row-label">最大 Tokens</div>
|
||
<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" />
|
||
<span class="hint-inline">单次回复最大 token 数</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="settings-row">
|
||
<div class="row-label">
|
||
<span class="row-title">推理模式</span>
|
||
<span class="row-desc">使用 CoT 推理，消耗更多 token 但更准确</span>
|
||
</div>
|
||
<div class="row-value">
|
||
<label class="switch" @click.prevent="modelSettings.thinking_enabled = !modelSettings.thinking_enabled">
|
||
<input v-model="modelSettings.thinking_enabled" type="checkbox" />
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="settings-row actions">
|
||
<button @click="saveModelSettings" class="btn-primary">保存设置</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统提示词 -->
|
||
<div class="settings-section">
|
||
<div class="section-title">
|
||
<span class="section-icon">💬</span>
|
||
<span class="section-text">系统提示词</span>
|
||
</div>
|
||
<div class="settings-card">
|
||
<div class="settings-row full">
|
||
<textarea v-model="modelSettings.system_prompt" rows="4" placeholder="You are a helpful assistant."></textarea>
|
||
<span class="hint-block">设置默认系统提示词，可在新建会话时覆盖</span>
|
||
</div>
|
||
<div class="settings-row actions">
|
||
<button @click="saveSystemPrompt" class="btn-primary">保存提示词</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LLM Provider 管理 -->
|
||
<div class="settings-section">
|
||
<div class="section-title">
|
||
<span class="section-icon">🔌</span>
|
||
<span class="section-text">LLM Provider</span>
|
||
<button @click="showModal = true" class="btn-add">+ 添加</button>
|
||
</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="!providers.length" class="empty-card">
|
||
<p>暂无 Provider，点击上方按钮添加</p>
|
||
</div>
|
||
|
||
<div v-else class="settings-table-container">
|
||
<table class="settings-table">
|
||
<thead>
|
||
<tr>
|
||
<th>名称</th>
|
||
<th>API / 模型</th>
|
||
<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 v-if="testResult !== null || testing" class="modal-overlay" @click.self="testResult = null; testing = null">
|
||
<div class="modal result-modal" :class="{ success: testResult?.success === true, error: testResult?.success === false, loading: testing }">
|
||
<div v-if="testing" class="result-loading">
|
||
<div class="spinner-large"></div>
|
||
<p>测试连接中...</p>
|
||
</div>
|
||
<template v-else>
|
||
<div class="result-icon">
|
||
<span v-if="testResult.success">✓</span>
|
||
<span v-else>✗</span>
|
||
</div>
|
||
<h2>{{ testResult.success ? '连接成功' : '连接失败' }}</h2>
|
||
<pre v-if="testResult.json" class="result-json">{{ testResult.json }}</pre>
|
||
<div v-else class="result-message">{{ testResult.message }}</div>
|
||
<button @click="testResult = null" class="btn-primary">确定</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用户信息模态框 -->
|
||
<div v-if="showUserModal" class="modal-overlay" @click.self="closeUserModal">
|
||
<div class="modal">
|
||
<h2>编辑用户信息</h2>
|
||
<div class="form-group"><label>用户名</label><input v-model="userFormEdit.username" placeholder="输入用户名" /></div>
|
||
<div class="form-group"><label>邮箱</label><input v-model="userFormEdit.email" type="email" placeholder="输入邮箱" /></div>
|
||
<div class="form-group"><label>新密码 <span class="optional">(留空不修改)</span></label><input v-model="userFormEdit.password" type="password" placeholder="输入新密码" /></div>
|
||
<div v-if="userFormError" class="error">{{ userFormError }}</div>
|
||
<div class="modal-actions">
|
||
<button @click="closeUserModal" class="btn-secondary">取消</button>
|
||
<button @click="updateUser" :disabled="savingUser" class="btn-primary">{{ savingUser ? '保存中...' : '保存' }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加/编辑 Provider 模态框 -->
|
||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||
<div class="modal">
|
||
<h2>{{ editing ? '编辑 Provider' : '添加 Provider' }}</h2>
|
||
|
||
<div class="form-group"><label>名称</label><input v-model="form.name" placeholder="如: 我的 DeepSeek" /></div>
|
||
<div class="form-group"><label>Base URL</label><input v-model="form.base_url" placeholder="https://api.deepseek.com/chat/completions" /></div>
|
||
<div class="form-group"><label>API Key</label><input v-model="form.api_key" type="text" :placeholder="editing ? '留空则保持原密码' : 'sk-...'" /></div>
|
||
|
||
<div class="form-group">
|
||
<label>模型名称</label>
|
||
<input v-model="form.default_model" placeholder="deepseek-chat / gpt-4" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>最大 Tokens</label>
|
||
<input v-model.number="form.max_tokens" type="number" placeholder="8192" min="1" />
|
||
<span class="hint">单次回复最大 token 数，默认 8192</span>
|
||
</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 class="modal-actions">
|
||
<button @click="closeModal" class="btn-secondary">取消</button>
|
||
<button @click="saveProvider" :disabled="saving" class="btn-primary">{{ saving ? '保存中...' : '保存' }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { providersAPI } from '../utils/api.js'
|
||
import { useAuth } from '../utils/useAuth.js'
|
||
import { authAPI } from '../utils/api.js'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
const { logout } = useAuth()
|
||
|
||
const handleLogout = async () => {
|
||
if (!confirm('确定要退出登录吗？')) return
|
||
await logout(authAPI)
|
||
router.push('/auth')
|
||
}
|
||
|
||
const userForm = ref({ username: '', email: '', password: '' })
|
||
const userFormEdit = ref({ username: '', email: '', password: '' })
|
||
const showUserModal = ref(false)
|
||
const savingUser = ref(false)
|
||
const userFormError = ref('')
|
||
const loadingUser = ref(false)
|
||
|
||
const modelSettings = ref({
|
||
default_provider: null,
|
||
temperature: 0.7,
|
||
max_tokens: 8192,
|
||
thinking_enabled: false,
|
||
system_prompt: 'You are a helpful assistant.'
|
||
})
|
||
|
||
const fetchUserInfo = async () => {
|
||
loadingUser.value = true
|
||
try {
|
||
const res = await authAPI.getMe()
|
||
if (res.success && res.data) {
|
||
userForm.value.username = res.data.username || ''
|
||
userForm.value.email = res.data.email || ''
|
||
}
|
||
} catch (e) {
|
||
console.error('获取用户信息失败:', e)
|
||
} finally {
|
||
loadingUser.value = false
|
||
}
|
||
}
|
||
|
||
const openUserModal = () => {
|
||
userFormEdit.value = { ...userForm.value, password: '' }
|
||
userFormError.value = ''
|
||
showUserModal.value = true
|
||
}
|
||
|
||
const closeUserModal = () => {
|
||
showUserModal.value = false
|
||
userFormError.value = ''
|
||
}
|
||
|
||
const updateUser = async () => {
|
||
savingUser.value = true
|
||
userFormError.value = ''
|
||
try {
|
||
alert('用户信息已保存')
|
||
userForm.value.username = userFormEdit.value.username
|
||
userForm.value.email = userFormEdit.value.email
|
||
closeUserModal()
|
||
} catch (e) {
|
||
userFormError.value = e.message || '保存失败'
|
||
} finally {
|
||
savingUser.value = false
|
||
}
|
||
}
|
||
|
||
const saveModelSettings = async () => {
|
||
localStorage.setItem('modelSettings', JSON.stringify(modelSettings.value))
|
||
alert('模型设置已保存')
|
||
}
|
||
|
||
const saveSystemPrompt = async () => {
|
||
localStorage.setItem('defaultSystemPrompt', modelSettings.value.system_prompt)
|
||
alert('系统提示词已保存')
|
||
}
|
||
|
||
const providers = ref([])
|
||
const loading = ref(true)
|
||
const error = ref('')
|
||
const showModal = ref(false)
|
||
const editing = ref(null)
|
||
const saving = ref(false)
|
||
const testing = ref(null)
|
||
const testResult = ref(null)
|
||
const formError = ref('')
|
||
|
||
const form = ref({
|
||
name: '', base_url: '', api_key: '', default_model: '', max_tokens: 8192, is_default: false
|
||
})
|
||
|
||
const fetchProviders = async () => {
|
||
loading.value = true
|
||
error.value = ''
|
||
try {
|
||
const res = await providersAPI.list()
|
||
if (res.success) {
|
||
providers.value = res.data.providers || []
|
||
const defaultProvider = providers.value.find(p => p.is_default)
|
||
if (defaultProvider && !modelSettings.value.default_provider) {
|
||
modelSettings.value.default_provider = defaultProvider.id
|
||
}
|
||
}
|
||
else throw new Error(res.message)
|
||
} catch (e) { error.value = e.message }
|
||
finally { loading.value = false }
|
||
}
|
||
|
||
const closeModal = () => {
|
||
showModal.value = false
|
||
editing.value = null
|
||
form.value = { name: '', base_url: '', api_key: '', default_model: '', max_tokens: 8192, is_default: false }
|
||
formError.value = ''
|
||
}
|
||
|
||
const editProvider = async (p) => {
|
||
editing.value = p.id
|
||
try {
|
||
const res = await providersAPI.get(p.id)
|
||
if (res.success && res.data) {
|
||
form.value = {
|
||
name: res.data.name,
|
||
base_url: res.data.base_url,
|
||
api_key: res.data.api_key || '',
|
||
default_model: res.data.default_model,
|
||
max_tokens: res.data.max_tokens || 8192,
|
||
is_default: res.data.is_default
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('获取Provider详情失败:', e)
|
||
}
|
||
showModal.value = true
|
||
}
|
||
|
||
const saveProvider = async () => {
|
||
if (!form.value.base_url || !form.value.api_key || !form.value.default_model) {
|
||
formError.value = '请填写所有必填项'
|
||
return
|
||
}
|
||
|
||
saving.value = true
|
||
formError.value = ''
|
||
try {
|
||
const data = { ...form.value }
|
||
let res
|
||
if (editing.value) res = await providersAPI.update(editing.value, data)
|
||
else res = await providersAPI.create(data)
|
||
|
||
if (res.success) { closeModal(); fetchProviders() }
|
||
else throw new Error(res.message)
|
||
} catch (e) { formError.value = e.message }
|
||
finally { saving.value = false }
|
||
}
|
||
|
||
const testProvider = async (p) => {
|
||
testing.value = p.id
|
||
testResult.value = null
|
||
try {
|
||
const res = await providersAPI.test(p.id)
|
||
const isSuccess = res.success === true
|
||
testResult.value = {
|
||
success: isSuccess,
|
||
message: res.message || (isSuccess ? '连接成功' : '连接失败'),
|
||
json: JSON.stringify(res, null, 2)
|
||
}
|
||
} catch (e) {
|
||
testResult.value = {
|
||
success: false,
|
||
message: e.message || '测试失败',
|
||
json: JSON.stringify(e.response?.data || { error: e.message }, null, 2)
|
||
}
|
||
} finally {
|
||
testing.value = null
|
||
}
|
||
}
|
||
|
||
const deleteProvider = async (p) => {
|
||
if (!confirm(`删除「${p.name}」？`)) return
|
||
try {
|
||
const res = await providersAPI.delete(p.id)
|
||
if (res.success) fetchProviders()
|
||
else alert(res.message)
|
||
} catch (e) { alert('删除失败: ' + e.message) }
|
||
}
|
||
|
||
const toggleEnabled = async (p) => {
|
||
try {
|
||
const res = await providersAPI.update(p.id, { enabled: !p.enabled })
|
||
if (res.success) fetchProviders()
|
||
else alert(res.message)
|
||
} catch (e) { alert('更新失败: ' + e.message) }
|
||
}
|
||
|
||
onMounted(() => {
|
||
fetchUserInfo()
|
||
fetchProviders()
|
||
|
||
const savedSettings = localStorage.getItem('modelSettings')
|
||
if (savedSettings) {
|
||
try {
|
||
const parsed = JSON.parse(savedSettings)
|
||
modelSettings.value = { ...modelSettings.value, ...parsed }
|
||
} catch (e) {}
|
||
}
|
||
|
||
const savedPrompt = localStorage.getItem('defaultSystemPrompt')
|
||
if (savedPrompt) {
|
||
modelSettings.value.system_prompt = savedPrompt
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 通用设置部分 */
|
||
.settings-section {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.75rem;
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
.section-icon {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.section-text {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.btn-add {
|
||
margin-left: auto;
|
||
padding: 0.4rem 0.8rem;
|
||
background: var(--accent-primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-add:hover {
|
||
background: var(--accent-primary-hover);
|
||
}
|
||
|
||
/* 设置卡片 */
|
||
.settings-card {
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 设置行 */
|
||
.settings-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.85rem 1rem;
|
||
border-bottom: 1px solid var(--border-light);
|
||
}
|
||
|
||
.settings-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.settings-row.full {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.settings-row.actions {
|
||
justify-content: flex-end;
|
||
gap: 0.5rem;
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
.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-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;
|
||
}
|
||
|
||
/* 内联输入框 */
|
||
.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-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;
|
||
}
|
||
|
||
.hint-block {
|
||
font-size: 0.75rem;
|
||
color: var(--text-tertiary);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* 表格容器 */
|
||
.settings-table-container {
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.settings-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.settings-table th {
|
||
text-align: left;
|
||
padding: 0.85rem 1rem;
|
||
background: var(--bg-secondary);
|
||
font-weight: 600;
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
border-bottom: 1px solid var(--border-light);
|
||
}
|
||
|
||
.settings-table td {
|
||
padding: 0.85rem 1rem;
|
||
border-bottom: 1px solid var(--border-light);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.settings-table tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.settings-table tr:hover td {
|
||
background: var(--bg-hover);
|
||
}
|
||
|
||
/* 列宽 */
|
||
.name-col {
|
||
min-width: 140px;
|
||
}
|
||
|
||
.info-col {
|
||
min-width: 200px;
|
||
}
|
||
|
||
.switch-col {
|
||
text-align: center;
|
||
width: 80px;
|
||
}
|
||
|
||
.action-col {
|
||
text-align: center;
|
||
width: 80px;
|
||
}
|
||
|
||
.ops-col {
|
||
width: 220px;
|
||
min-width: 220px;
|
||
}
|
||
|
||
/* Provider 单元格 */
|
||
.provider-name {
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.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.default {
|
||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||
color: white;
|
||
}
|
||
|
||
.badge.enabled {
|
||
background: rgba(52, 211, 153, 0.2);
|
||
color: #16a34a;
|
||
}
|
||
|
||
.badge.disabled {
|
||
background: var(--bg-tertiary);
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 开关 */
|
||
.switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 40px;
|
||
height: 22px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
inset: 0;
|
||
background-color: #ccc;
|
||
transition: 0.3s;
|
||
border-radius: 22px;
|
||
}
|
||
|
||
.slider:before {
|
||
position: absolute;
|
||
content: "";
|
||
height: 16px;
|
||
width: 16px;
|
||
left: 3px;
|
||
bottom: 3px;
|
||
background-color: white;
|
||
transition: 0.3s;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
input:checked + .slider {
|
||
background-color: var(--accent-primary);
|
||
}
|
||
|
||
input:checked + .slider:before {
|
||
transform: translateX(18px);
|
||
}
|
||
|
||
/* 操作按钮 */
|
||
.ops-buttons {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.btn-op {
|
||
padding: 0.4rem 0.75rem;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 6px;
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn-op:hover {
|
||
background: var(--bg-hover);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.btn-op.btn-danger {
|
||
color: var(--danger-color);
|
||
border-color: var(--danger-bg);
|
||
}
|
||
|
||
.btn-op.btn-danger:hover {
|
||
background: var(--danger-bg);
|
||
}
|
||
|
||
/* 用户信息区域按钮 */
|
||
.btn-action {
|
||
padding: 0.45rem 0.9rem;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 6px;
|
||
font-size: 0.8rem;
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-action:hover {
|
||
background: var(--bg-hover);
|
||
border-color: var(--accent-primary);
|
||
}
|
||
|
||
.btn-action.btn-logout {
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.btn-action.btn-logout:hover {
|
||
background: var(--danger-bg);
|
||
border-color: var(--danger-color);
|
||
}
|
||
|
||
/* 主要按钮 */
|
||
.btn-primary {
|
||
padding: 0.5rem 1rem;
|
||
background: var(--accent-primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--accent-primary-hover);
|
||
}
|
||
|
||
.btn-secondary {
|
||
padding: 0.5rem 1rem;
|
||
background: var(--bg-secondary);
|
||
color: var(--text-primary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 6px;
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--bg-hover);
|
||
}
|
||
|
||
/* 模态框 */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal {
|
||
background: var(--bg-primary);
|
||
border-radius: 16px;
|
||
padding: 1.25rem;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
}
|
||
|
||
.modal h2 {
|
||
margin: 0 0 1.25rem;
|
||
color: var(--text-primary);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.result-modal {
|
||
text-align: center;
|
||
}
|
||
|
||
.result-modal.loading {
|
||
min-height: 120px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.result-loading {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.spinner-large {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 3px solid var(--border-light);
|
||
border-top-color: var(--accent-primary);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.result-modal .result-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 1rem;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.result-modal.success .result-icon {
|
||
background: rgba(52, 211, 153, 0.2);
|
||
color: #16a34a;
|
||
}
|
||
|
||
.result-modal.error .result-icon {
|
||
background: var(--danger-bg);
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.result-modal h2 {
|
||
margin: 0 0 0.75rem;
|
||
}
|
||
|
||
.result-modal .result-message {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.result-modal .result-json {
|
||
background: var(--bg-code);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 8px;
|
||
padding: 0.75rem;
|
||
margin: 0.75rem 0;
|
||
max-height: 150px;
|
||
overflow: auto;
|
||
font-size: 0.75rem;
|
||
text-align: left;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 0.75rem;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 0.65rem;
|
||
border: 1px solid var(--border-input);
|
||
border-radius: 8px;
|
||
background: var(--bg-input);
|
||
box-sizing: border-box;
|
||
color: var(--text-primary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.form-group .hint {
|
||
font-size: 0.75rem;
|
||
color: var(--text-tertiary);
|
||
margin-top: 4px;
|
||
display: block;
|
||
}
|
||
|
||
.switch-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 1rem 1.25rem;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.switch-card:hover {
|
||
border-color: var(--accent-primary);
|
||
}
|
||
|
||
.switch-card.active {
|
||
border-color: var(--accent-primary);
|
||
background: var(--accent-primary-light);
|
||
}
|
||
|
||
.switch-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.switch-title {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.switch-desc {
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.optional {
|
||
color: var(--text-tertiary);
|
||
font-weight: normal;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.error {
|
||
color: var(--danger-color);
|
||
background: var(--danger-bg);
|
||
padding: 0.75rem;
|
||
border-radius: 8px;
|
||
margin-top: 0.75rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* 加载状态 */
|
||
.loading,
|
||
.empty-card {
|
||
text-align: center;
|
||
padding: 3rem;
|
||
color: var(--text-secondary);
|
||
background: var(--bg-primary);
|
||
border: 1px solid var(--border-light);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.loading-small {
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.spinner-small {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 3px solid var(--border-light);
|
||
border-top-color: var(--accent-primary);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 0.5rem;
|
||
}
|
||
|
||
.spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 3px solid var(--border-light);
|
||
border-top-color: var(--accent-primary);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 1rem;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|