feat: 前端样式修改
This commit is contained in:
tbphp
@@ -43,7 +43,7 @@ const mockGroups: Group[] = [
|
||||
display_name: "Silicon测试组",
|
||||
description: "Silicon Flow测试API组",
|
||||
sort: 3,
|
||||
channel_type: "silicon",
|
||||
channel_type: "openai",
|
||||
upstreams: [{ url: "https://api.siliconflow.cn", weight: 1 }],
|
||||
config: {
|
||||
test_model: "qwen-turbo",
|
||||
@@ -53,6 +53,215 @@ const mockGroups: Group[] = [
|
||||
created_at: "2024-01-03T00:00:00Z",
|
||||
updated_at: "2024-01-03T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "openai-main",
|
||||
display_name: "OpenAI主组",
|
||||
description: "OpenAI主要API组",
|
||||
sort: 1,
|
||||
channel_type: "openai",
|
||||
upstreams: [
|
||||
{ url: "https://api.openai.com", weight: 1 },
|
||||
{ url: "https://api.openai.com/v1", weight: 2 },
|
||||
],
|
||||
config: {
|
||||
test_model: "gpt-3.5-turbo",
|
||||
param_overrides: { temperature: 0.7 },
|
||||
request_timeout: 30000,
|
||||
},
|
||||
created_at: "2024-01-01T00:00:00Z",
|
||||
updated_at: "2024-01-01T00:00:00Z",
|
||||
},
|
||||
];
|
||||
|
||||
const mockAPIKeys: APIKey[] = [
|
||||
@@ -490,47 +699,37 @@ export const keysApi = {
|
||||
},
|
||||
|
||||
// 批量切换密钥状态
|
||||
async batchToggleKeys(keyIds: string[], status: 0 | 1): Promise<void> {
|
||||
async batchToggleKeys(_keyIds: string[], _status: 0 | 1): Promise<void> {
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
// 模拟批量操作
|
||||
const numKeys = keyIds.length;
|
||||
console.warn(`Mock: 批量${status === 1 ? "启用" : "禁用"}${numKeys}个密钥`, keyIds);
|
||||
// 模拟批量操作成功
|
||||
},
|
||||
|
||||
// 批量删除密钥
|
||||
async batchDeleteKeys(keyIds: string[]): Promise<void> {
|
||||
async batchDeleteKeys(_keyIds: string[]): Promise<void> {
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
// 模拟批量删除
|
||||
const numKeys = keyIds.length;
|
||||
console.warn(`Mock: 批量删除${numKeys}个密钥`, keyIds);
|
||||
// 模拟批量删除成功
|
||||
},
|
||||
|
||||
// 切换单个密钥状态
|
||||
async toggleKeyStatus(keyId: string, status: 0 | 1): Promise<void> {
|
||||
async toggleKeyStatus(_keyId: string, _status: 0 | 1): Promise<void> {
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
console.warn(`Mock: ${status === 1 ? "启用" : "禁用"}密钥 ${keyId}`);
|
||||
// 模拟切换状态成功
|
||||
},
|
||||
|
||||
// 删除单个密钥
|
||||
async deleteKeyById(keyId: string): Promise<void> {
|
||||
async deleteKeyById(_keyId: string): Promise<void> {
|
||||
await new Promise(resolve => setTimeout(resolve, 400));
|
||||
|
||||
console.warn(`Mock: 删除密钥 ${keyId}`);
|
||||
// 模拟删除成功
|
||||
},
|
||||
|
||||
// 验证密钥
|
||||
async validateKeys(groupId: number): Promise<{ valid_count: number; invalid_count: number }> {
|
||||
async validateKeys(_groupId: number): Promise<{ valid_count: number; invalid_count: number }> {
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
// 模拟验证结果
|
||||
const validCount = Math.floor(Math.random() * 10) + 5;
|
||||
const invalidCount = Math.floor(Math.random() * 3);
|
||||
|
||||
console.warn(`Mock: 验证分组${groupId}的密钥，有效：${validCount}，无效：${invalidCount}`);
|
||||
|
||||
return {
|
||||
valid_count: validCount,
|
||||
invalid_count: invalidCount,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { NCard, NGrid, NGridItem, NSpace, NTag } from "naive-ui";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
// 模拟数据
|
||||
@@ -51,41 +52,41 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="stats-container">
|
||||
<div class="stats-grid">
|
||||
<div
|
||||
v-for="(stat, index) in stats"
|
||||
:key="stat.title"
|
||||
class="stat-card modern-card"
|
||||
:style="{ animationDelay: `${index * 0.07}s` }"
|
||||
>
|
||||
<div class="stat-header">
|
||||
<div class="stat-icon" :style="{ background: stat.color }">
|
||||
{{ stat.icon }}
|
||||
</div>
|
||||
<div
|
||||
class="stat-trend"
|
||||
:class="{ 'trend-up': stat.trendUp, 'trend-down': !stat.trendUp }"
|
||||
<n-space vertical size="medium">
|
||||
<n-grid :cols="4" :x-gap="20" :y-gap="20" responsive="screen">
|
||||
<n-grid-item v-for="(stat, index) in stats" :key="stat.title" span="1">
|
||||
<n-card
|
||||
:bordered="false"
|
||||
class="stat-card"
|
||||
:style="{ animationDelay: `${index * 0.07}s` }"
|
||||
>
|
||||
{{ stat.trend }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-header">
|
||||
<div class="stat-icon" :style="{ background: stat.color }">
|
||||
{{ stat.icon }}
|
||||
</div>
|
||||
<n-tag :type="stat.trendUp ? 'success' : 'error'" size="small" class="stat-trend">
|
||||
{{ stat.trend }}
|
||||
</n-tag>
|
||||
</div>
|
||||
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-title">{{ stat.title }}</div>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-title">{{ stat.title }}</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-bar">
|
||||
<div
|
||||
class="stat-bar-fill"
|
||||
:style="{
|
||||
background: stat.color,
|
||||
width: `${animatedValues[stat.title] * 100}%`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div
|
||||
class="stat-bar-fill"
|
||||
:style="{
|
||||
background: stat.color,
|
||||
width: `${animatedValues[stat.title] * 100}%`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -95,20 +96,19 @@ onMounted(() => {
|
||||
animation: fadeInUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: slideInUp 0.2s ease-out both;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
@@ -131,32 +131,16 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.stat-trend {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.trend-up {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.trend-down {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.trend-up::before {
|
||||
content: "↗";
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.trend-down::before {
|
||||
content: "↘";
|
||||
.stat-trend:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
@@ -215,14 +199,20 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
/* 响应式网格 */
|
||||
:deep(.n-grid-item) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 20px;
|
||||
@media (max-width: 1200px) {
|
||||
:deep(.n-grid) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:deep(.n-grid) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { keysApi } from "@/api/keys";
|
||||
import type { TaskInfo } from "@/types/models";
|
||||
import { NButton, NCard, NProgress, NText } from "naive-ui";
|
||||
import { onBeforeUnmount, onMounted, ref } from "vue";
|
||||
|
||||
const taskInfo = ref<TaskInfo>({ is_running: false });
|
||||
@@ -22,8 +23,8 @@ function startPolling() {
|
||||
const task = await keysApi.getTaskStatus();
|
||||
taskInfo.value = task;
|
||||
visible.value = task.is_running;
|
||||
} catch (error) {
|
||||
console.error("获取任务状态失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
@@ -53,30 +54,46 @@ function handleClose() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="visible" class="global-task-progress">
|
||||
<n-card v-if="visible" class="global-task-progress" :bordered="false" size="small">
|
||||
<div class="progress-container">
|
||||
<div class="progress-header">
|
||||
<div class="progress-info">
|
||||
<span class="progress-icon">⚡</span>
|
||||
<div class="progress-details">
|
||||
<div class="progress-title">{{ taskInfo.task_name || "正在处理任务" }}</div>
|
||||
<div class="progress-subtitle">
|
||||
<n-text strong class="progress-title">
|
||||
{{ taskInfo.task_name || "正在处理任务" }}
|
||||
</n-text>
|
||||
<n-text depth="3" class="progress-subtitle">
|
||||
{{ getProgressText() }} ({{ getProgressPercentage() }}%)
|
||||
</div>
|
||||
</n-text>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="handleClose" class="close-btn" title="隐藏进度条">✕</button>
|
||||
<n-button quaternary circle size="small" @click="handleClose" title="隐藏进度条">
|
||||
<template #icon>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" :style="{ width: `${getProgressPercentage()}%` }" />
|
||||
</div>
|
||||
<n-progress
|
||||
:percentage="getProgressPercentage()"
|
||||
:show-indicator="false"
|
||||
processing
|
||||
type="line"
|
||||
:height="6"
|
||||
border-radius="3px"
|
||||
class="progress-bar"
|
||||
/>
|
||||
|
||||
<div v-if="taskInfo.message" class="progress-message">
|
||||
<n-text v-if="taskInfo.message" depth="3" class="progress-message">
|
||||
{{ taskInfo.message }}
|
||||
</div>
|
||||
</n-text>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -87,9 +104,9 @@ function handleClose() {
|
||||
z-index: 9999;
|
||||
width: 360px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #e1e5e9;
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@@ -105,7 +122,7 @@ function handleClose() {
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
padding: 16px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
@@ -144,79 +161,23 @@ function handleClose() {
|
||||
.progress-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.progress-subtitle {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #4ade80, #22c55e);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-message {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
border-radius: var(--border-radius-sm);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { keysApi } from "@/api/keys";
|
||||
import type { Group } from "@/types/models";
|
||||
import { useMessage } from "naive-ui";
|
||||
import { NButton, NCard, NEmpty, NInput, NSpin, NTag, useMessage } from "naive-ui";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
interface Props {
|
||||
@@ -41,6 +41,18 @@ function handleGroupClick(group: Group) {
|
||||
emit("group-select", group);
|
||||
}
|
||||
|
||||
// 获取渠道类型的标签颜色
|
||||
function getChannelTagType(channelType: string) {
|
||||
switch (channelType) {
|
||||
case "openai":
|
||||
return "success";
|
||||
case "gemini":
|
||||
return "info";
|
||||
default:
|
||||
return "default";
|
||||
}
|
||||
}
|
||||
|
||||
// 简单的创建分组功能（演示用）
|
||||
async function createDemoGroup() {
|
||||
try {
|
||||
@@ -60,8 +72,8 @@ async function createDemoGroup() {
|
||||
|
||||
message.success(`创建分组成功: ${newGroup.display_name}`);
|
||||
emit("refresh");
|
||||
} catch (error) {
|
||||
console.error("创建分组失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
message.error("创建分组失败");
|
||||
}
|
||||
}
|
||||
@@ -69,113 +81,105 @@ async function createDemoGroup() {
|
||||
|
||||
<template>
|
||||
<div class="group-list-container">
|
||||
<div class="group-list-card">
|
||||
<n-card class="group-list-card modern-card" :bordered="false" size="small">
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-section">
|
||||
<input v-model="searchText" placeholder="搜索分组名称..." class="search-input" />
|
||||
<n-input v-model:value="searchText" placeholder="搜索分组名称..." size="small" clearable>
|
||||
<template #prefix>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</n-input>
|
||||
</div>
|
||||
|
||||
<!-- 分组列表 -->
|
||||
<div class="groups-section">
|
||||
<div v-if="loading" class="loading-state">加载中...</div>
|
||||
<div v-else-if="filteredGroups.length === 0" class="empty-state">
|
||||
<div class="empty-text">
|
||||
{{ searchText ? "未找到匹配的分组" : "暂无分组" }}
|
||||
<n-spin :show="loading" size="small">
|
||||
<div v-if="filteredGroups.length === 0 && !loading" class="empty-container">
|
||||
<n-empty size="small" :description="searchText ? '未找到匹配的分组' : '暂无分组'" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="groups-list">
|
||||
<div
|
||||
v-for="group in filteredGroups"
|
||||
:key="group.id"
|
||||
class="group-item"
|
||||
:class="{ active: selectedGroup?.id === group.id }"
|
||||
@click="handleGroupClick(group)"
|
||||
>
|
||||
<div class="group-icon">
|
||||
<span v-if="group.channel_type === 'openai'">🤖</span>
|
||||
<span v-else-if="group.channel_type === 'gemini'">💎</span>
|
||||
<span v-else-if="group.channel_type === 'silicon'">⚡</span>
|
||||
<span v-else>🔧</span>
|
||||
</div>
|
||||
<div class="group-content">
|
||||
<div class="group-name">
|
||||
{{ group.display_name || group.name }}
|
||||
<div v-else class="groups-list">
|
||||
<div
|
||||
v-for="group in filteredGroups"
|
||||
:key="group.id"
|
||||
class="group-item"
|
||||
:class="{ active: selectedGroup?.id === group.id }"
|
||||
@click="handleGroupClick(group)"
|
||||
>
|
||||
<div class="group-icon">
|
||||
<span v-if="group.channel_type === 'openai'">🤖</span>
|
||||
<span v-else-if="group.channel_type === 'gemini'">💎</span>
|
||||
<span v-else>🔧</span>
|
||||
</div>
|
||||
<div class="group-info">
|
||||
<span class="channel-type">{{ group.channel_type }}</span>
|
||||
<span class="group-id">#{{ group.id }}</span>
|
||||
<div class="group-content">
|
||||
<div class="group-name">{{ group.display_name || group.name }}</div>
|
||||
<div class="group-meta">
|
||||
<n-tag size="tiny" :type="getChannelTagType(group.channel_type)">
|
||||
{{ group.channel_type }}
|
||||
</n-tag>
|
||||
<span class="group-id">#{{ group.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-spin>
|
||||
</div>
|
||||
|
||||
<!-- 添加分组按钮 -->
|
||||
<div class="add-section">
|
||||
<button class="add-button" @click="createDemoGroup">
|
||||
<span class="add-icon">+</span>
|
||||
添加分组
|
||||
</button>
|
||||
<n-button type="primary" size="small" block @click="createDemoGroup">
|
||||
<template #icon>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
|
||||
</svg>
|
||||
</template>
|
||||
创建分组
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.n-card__content) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.groups-section::-webkit-scrollbar {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.group-list-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.group-list-card {
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.group-list-card:hover {
|
||||
transform: none;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.search-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.groups-section {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin-bottom: 12px;
|
||||
height: calc(100% - 82px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #6c757d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 12px;
|
||||
.empty-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.groups-list {
|
||||
@@ -191,33 +195,34 @@ async function createDemoGroup() {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.group-item:hover {
|
||||
background: #f8f9fa;
|
||||
border-color: #e9ecef;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-color: rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.group-item.active {
|
||||
background: #007bff;
|
||||
background: var(--primary-gradient);
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
border-color: transparent;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.group-icon {
|
||||
font-size: 14px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -234,58 +239,34 @@ async function createDemoGroup() {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.group-info {
|
||||
.group-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
font-size: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.channel-type {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.group-id {
|
||||
opacity: 0.6;
|
||||
opacity: 0.7;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.group-item.active .group-id {
|
||||
opacity: 0.8;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.add-section {
|
||||
border-top: 1px solid #e9ecef;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #007bff;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
.groups-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
@@ -313,7 +294,7 @@ async function createDemoGroup() {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.group-info {
|
||||
.group-meta {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,8 +93,7 @@ async function loadKeys() {
|
||||
);
|
||||
keys.value = result.data;
|
||||
totalKeys.value = result.total;
|
||||
} catch (error) {
|
||||
console.error("加载密钥失败:", error);
|
||||
} catch (_error) {
|
||||
window.$message.error("加载密钥失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
@@ -129,8 +128,7 @@ async function testKey(_key: APIKey) {
|
||||
} else {
|
||||
window.$message.error("密钥测试失败: 无效的API密钥");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("测试密钥失败:", error);
|
||||
} catch (_error) {
|
||||
window.$message.error("测试失败");
|
||||
}
|
||||
}
|
||||
@@ -150,8 +148,7 @@ async function restoreKey(key: APIKey) {
|
||||
await keysApi.toggleKeyStatus(key.id.toString(), 1);
|
||||
window.$message.success("密钥已恢复");
|
||||
await loadKeys();
|
||||
} catch (error) {
|
||||
console.error("恢复密钥失败:", error);
|
||||
} catch (_error) {
|
||||
window.$message.error("恢复失败");
|
||||
}
|
||||
}
|
||||
@@ -167,8 +164,7 @@ async function deleteKey(key: APIKey) {
|
||||
await keysApi.deleteKeyById(key.id.toString());
|
||||
window.$message.success("密钥已删除");
|
||||
await loadKeys();
|
||||
} catch (error) {
|
||||
console.error("删除密钥失败:", error);
|
||||
} catch (_error) {
|
||||
window.$message.error("删除失败");
|
||||
}
|
||||
}
|
||||
@@ -222,8 +218,8 @@ async function copyAllKeys() {
|
||||
.catch(() => {
|
||||
window.$message.error("复制失败");
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("导出失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
window.$message.error("导出失败");
|
||||
}
|
||||
}
|
||||
@@ -244,8 +240,8 @@ async function copyValidKeys() {
|
||||
.catch(() => {
|
||||
window.$message.error("复制失败");
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("导出失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
window.$message.error("导出失败");
|
||||
}
|
||||
}
|
||||
@@ -266,8 +262,8 @@ async function copyInvalidKeys() {
|
||||
.catch(() => {
|
||||
window.$message.error("复制失败");
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("导出失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
window.$message.error("导出失败");
|
||||
}
|
||||
}
|
||||
@@ -286,8 +282,8 @@ async function restoreAllInvalid() {
|
||||
try {
|
||||
window.$message.success("所有无效密钥已恢复");
|
||||
await loadKeys();
|
||||
} catch (error) {
|
||||
console.error("恢复失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
window.$message.error("恢复失败");
|
||||
}
|
||||
}
|
||||
@@ -300,8 +296,8 @@ async function validateAllKeys() {
|
||||
try {
|
||||
const result = await keysApi.validateKeys(props.selectedGroup.id);
|
||||
window.$message.success(`验证完成: 有效${result.valid_count}个，无效${result.invalid_count}个`);
|
||||
} catch (error) {
|
||||
console.error("验证失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
window.$message.error("验证失败");
|
||||
}
|
||||
}
|
||||
@@ -320,8 +316,8 @@ async function clearAllInvalid() {
|
||||
try {
|
||||
window.$message.success("所有无效密钥已清除");
|
||||
await loadKeys();
|
||||
} catch (error) {
|
||||
console.error("清除失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
window.$message.error("清除失败");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,8 +16,8 @@ export function useAuthService() {
|
||||
localStorage.setItem(AUTH_KEY, key);
|
||||
authKey.value = key;
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("Login failed:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -25,7 +25,7 @@ export interface Group {
|
||||
display_name: string;
|
||||
description: string;
|
||||
sort: number;
|
||||
channel_type: "openai" | "gemini" | "silicon" | "chutes";
|
||||
channel_type: "openai" | "gemini";
|
||||
upstreams: UpstreamInfo[];
|
||||
config: Record<string, unknown>;
|
||||
api_keys?: APIKey[];
|
||||
|
||||
@@ -45,7 +45,6 @@ http.interceptors.response.use(
|
||||
// Something happened in setting up the request that triggered an Error
|
||||
window.$message.error("请求设置错误");
|
||||
}
|
||||
console.error("API Error:", error);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,58 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import BaseInfoCard from "@/components/BaseInfoCard.vue";
|
||||
import LineChart from "@/components/LineChart.vue";
|
||||
import { NSpace } from "naive-ui";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- <div class="dashboard-header">
|
||||
<h2 class="dashboard-title">仪表盘</h2>
|
||||
<p class="dashboard-subtitle">系统概览与实时监控</p>
|
||||
</div> -->
|
||||
|
||||
<div class="dashboard-content">
|
||||
<base-info-card />
|
||||
<line-chart class="dashboard-chart" />
|
||||
</div>
|
||||
<n-space vertical size="large">
|
||||
<n-space vertical size="large">
|
||||
<base-info-card />
|
||||
<line-chart class="dashboard-chart" />
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
.dashboard-header-card {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
animation: fadeInUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
background: var(--primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dashboard-chart {
|
||||
animation: fadeInUp 0.2s ease-out 0.2s both;
|
||||
}
|
||||
@@ -76,9 +58,5 @@ import LineChart from "@/components/LineChart.vue";
|
||||
.dashboard-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,8 +22,8 @@ async function loadGroups() {
|
||||
if (groups.value.length > 0 && !selectedGroup.value) {
|
||||
selectedGroup.value = groups.value[0];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载分组失败:", error);
|
||||
} catch (_error) {
|
||||
// 错误已记录
|
||||
window.$message.error("加载分组失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
|
||||
@@ -1,58 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import { NCard, NH3, NSpace, NTag, NText } from "naive-ui";
|
||||
// 这里可以添加日志管理相关的逻辑
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="logs-container">
|
||||
<div class="page-header">
|
||||
<h2 class="page-title">系统日志</h2>
|
||||
<p class="page-subtitle">查看系统运行日志和操作记录</p>
|
||||
</div>
|
||||
<n-space vertical size="large">
|
||||
<!-- 占位符内容 -->
|
||||
<div class="content-placeholder">
|
||||
<n-card :bordered="false" class="placeholder-card">
|
||||
<n-space vertical align="center" size="large">
|
||||
<div class="placeholder-icon">📋</div>
|
||||
<n-h3 class="placeholder-title">日志管理功能</n-h3>
|
||||
<n-text depth="2" class="placeholder-description">
|
||||
此功能正在开发中，将提供完整的系统日志查看和管理功能，包括实时日志、历史记录和日志分析。
|
||||
</n-text>
|
||||
|
||||
<div class="content-placeholder">
|
||||
<div class="placeholder-card modern-card">
|
||||
<div class="placeholder-icon">📋</div>
|
||||
<h3 class="placeholder-title">日志管理功能</h3>
|
||||
<p class="placeholder-description">
|
||||
此功能正在开发中，将提供完整的系统日志查看和管理功能，包括实时日志、历史记录和日志分析。
|
||||
</p>
|
||||
<div class="placeholder-features">
|
||||
<div class="feature-item">📝 实时日志流</div>
|
||||
<div class="feature-item">🔍 日志搜索过滤</div>
|
||||
<div class="feature-item">📈 错误统计分析</div>
|
||||
<div class="feature-item">💾 日志导出功能</div>
|
||||
</div>
|
||||
<n-space wrap size="medium" class="placeholder-features">
|
||||
<n-tag type="info" size="medium">📝 实时日志流</n-tag>
|
||||
<n-tag type="info" size="medium">🔍 日志搜索过滤</n-tag>
|
||||
<n-tag type="info" size="medium">📈 错误统计分析</n-tag>
|
||||
<n-tag type="info" size="medium">💾 日志导出功能</n-tag>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</div>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logs-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
.page-header-card {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
animation: fadeInUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
background: var(--primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -61,6 +54,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
animation: fadeInUp 0.2s ease-out 0.1s both;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
@@ -68,41 +62,42 @@
|
||||
max-width: 500px;
|
||||
padding: 48px 32px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin: 0 0 16px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.placeholder-description {
|
||||
font-size: 1rem;
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 32px 0;
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.placeholder-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 12px 16px;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: var(--border-radius-md);
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -111,8 +106,12 @@
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.placeholder-features {
|
||||
grid-template-columns: 1fr;
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { settingsApi, type SettingCategory } from "@/api/settings";
|
||||
import { NTooltip } from "naive-ui";
|
||||
import { NButton, NCard, NForm, NFormItem, NInput, NInputNumber, NTooltip } from "naive-ui";
|
||||
import { ref } from "vue";
|
||||
|
||||
const settingList = ref<SettingCategory[]>([]);
|
||||
@@ -90,7 +90,7 @@ async function handleSubmit() {
|
||||
|
||||
<n-input-number
|
||||
v-if="item.type === 'int'"
|
||||
v-model:value="form[item.key]"
|
||||
v-model:value="form[item.key] as number"
|
||||
:min="item.min_value! >= 0 ? item.min_value : undefined"
|
||||
class="modern-input setting-input"
|
||||
placeholder="请输入数值"
|
||||
@@ -98,7 +98,7 @@ async function handleSubmit() {
|
||||
/>
|
||||
<n-input
|
||||
v-else
|
||||
v-model:value="form[item.key]"
|
||||
v-model:value="form[item.key] as string"
|
||||
class="modern-input setting-input"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
|
||||
Reference in New Issue
Block a user