feat: 前端样式修改
This commit is contained in:
tbphp
@@ -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("清除失败");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user