mirror of
https://github.com/foxhui/WebAI2API.git
synced 2026-06-16 21:03:59 +08:00
refactor: 代码解耦合，完善WebUI功能，添加网页VNC
This commit is contained in:
foxhui
@@ -0,0 +1,229 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
export const useSettingsStore = defineStore('settings', {
|
||||
state: () => ({
|
||||
token: localStorage.getItem('admin_token') || '',
|
||||
serverConfig: {},
|
||||
browserConfig: {},
|
||||
workerConfig: [],
|
||||
poolConfig: {
|
||||
strategy: 'least_busy',
|
||||
failover: {
|
||||
enabled: false,
|
||||
maxRetries: 3
|
||||
}
|
||||
},
|
||||
adapterConfig: {},
|
||||
adaptersMeta: []
|
||||
}),
|
||||
|
||||
actions: {
|
||||
setToken(token) {
|
||||
this.token = token;
|
||||
if (token) {
|
||||
localStorage.setItem('admin_token', token);
|
||||
} else {
|
||||
localStorage.removeItem('admin_token');
|
||||
}
|
||||
},
|
||||
|
||||
getHeaders() {
|
||||
const headers = { 'Content-Type': 'application/json' };
|
||||
if (this.token) {
|
||||
headers['Authorization'] = `Bearer ${this.token}`;
|
||||
}
|
||||
return headers;
|
||||
},
|
||||
|
||||
async checkAuth() {
|
||||
try {
|
||||
const res = await fetch('/admin/status', {
|
||||
headers: this.getHeaders()
|
||||
});
|
||||
return res.status !== 401;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// 错误处理辅助函数
|
||||
async handleResponse(res, successMsg) {
|
||||
let data = {};
|
||||
try {
|
||||
data = await res.json();
|
||||
} catch (e) {
|
||||
// 忽略JSON解析错误
|
||||
}
|
||||
|
||||
if (res.ok) {
|
||||
if (successMsg) message.success(successMsg);
|
||||
return { success: true, data };
|
||||
} else {
|
||||
console.error('Request failed:', res.status, data);
|
||||
Modal.error({
|
||||
title: '保存失败',
|
||||
content: data.message || `请求未成功: ${res.status} ${res.statusText}`,
|
||||
okText: '好的'
|
||||
});
|
||||
return { success: false, data };
|
||||
}
|
||||
},
|
||||
|
||||
// --- 服务器配置 ---
|
||||
async fetchServerConfig() {
|
||||
try {
|
||||
const res = await fetch('/admin/config/server', { headers: this.getHeaders() });
|
||||
if (res.ok) this.serverConfig = await res.json();
|
||||
} catch (e) {
|
||||
console.error('Fetch server config failed', e);
|
||||
}
|
||||
},
|
||||
async saveServerConfig(config) {
|
||||
try {
|
||||
const res = await fetch('/admin/config/server', {
|
||||
method: 'POST',
|
||||
headers: this.getHeaders(),
|
||||
body: JSON.stringify(config)
|
||||
});
|
||||
const result = await this.handleResponse(res, '服务器设置保存成功');
|
||||
if (result.success) {
|
||||
this.serverConfig = config;
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
Modal.error({ title: '保存失败 (网络异常)', content: e.message });
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// --- 浏览器配置 ---
|
||||
async fetchBrowserConfig() {
|
||||
try {
|
||||
const res = await fetch('/admin/config/browser', { headers: this.getHeaders() });
|
||||
if (res.ok) this.browserConfig = await res.json();
|
||||
} catch (e) {
|
||||
console.error('Fetch browser config failed', e);
|
||||
}
|
||||
},
|
||||
async saveBrowserConfig(config) {
|
||||
try {
|
||||
const res = await fetch('/admin/config/browser', {
|
||||
method: 'POST',
|
||||
headers: this.getHeaders(),
|
||||
body: JSON.stringify(config)
|
||||
});
|
||||
const result = await this.handleResponse(res, '浏览器设置保存成功');
|
||||
if (result.success) {
|
||||
this.browserConfig = config;
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
Modal.error({ title: '保存失败 (网络异常)', content: e.message });
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// --- 工作实例配置 ---
|
||||
async fetchWorkerConfig() {
|
||||
try {
|
||||
// 端点已更改为 /admin/config/instances
|
||||
const res = await fetch('/admin/config/instances', { headers: this.getHeaders() });
|
||||
if (res.ok) this.workerConfig = await res.json();
|
||||
} catch (e) {
|
||||
console.error('Fetch instance configuration failed', e);
|
||||
}
|
||||
},
|
||||
async saveWorkerConfig(config) {
|
||||
try {
|
||||
// 端点已更改为 /admin/config/instances
|
||||
const res = await fetch('/admin/config/instances', {
|
||||
method: 'POST',
|
||||
headers: this.getHeaders(),
|
||||
body: JSON.stringify(config)
|
||||
});
|
||||
const result = await this.handleResponse(res, '实例配置保存成功');
|
||||
if (result.success) {
|
||||
this.workerConfig = config;
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
Modal.error({ title: '保存失败 (网络异常)', content: e.message });
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// --- 工作池配置 ---
|
||||
async fetchPoolConfig() {
|
||||
try {
|
||||
const res = await fetch('/admin/config/pool', { headers: this.getHeaders() });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
// 合并以确保结构存在
|
||||
this.poolConfig = {
|
||||
strategy: data.strategy || 'least_busy',
|
||||
failover: {
|
||||
enabled: data.failover?.enabled || false,
|
||||
maxRetries: data.failover?.maxRetries || 3
|
||||
}
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Fetch pool config failed', e);
|
||||
}
|
||||
},
|
||||
async savePoolConfig(config) {
|
||||
try {
|
||||
const res = await fetch('/admin/config/pool', {
|
||||
method: 'POST',
|
||||
headers: this.getHeaders(),
|
||||
body: JSON.stringify(config)
|
||||
});
|
||||
const result = await this.handleResponse(res, '工作池设置保存成功');
|
||||
if (result.success) {
|
||||
this.poolConfig = config;
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
Modal.error({ title: '保存失败 (网络异常)', content: e.message });
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// --- 适配器配置与元数据 ---
|
||||
async fetchAdaptersMeta() {
|
||||
try {
|
||||
const res = await fetch('/admin/adapters', { headers: this.getHeaders() });
|
||||
if (res.ok) this.adaptersMeta = await res.json();
|
||||
} catch (e) {
|
||||
console.error('Fetch adapters meta failed', e);
|
||||
}
|
||||
},
|
||||
async fetchAdapterConfig() {
|
||||
try {
|
||||
const res = await fetch('/admin/config/adapters', { headers: this.getHeaders() });
|
||||
if (res.ok) this.adapterConfig = await res.json();
|
||||
} catch (e) {
|
||||
console.error('Fetch adapter config failed', e);
|
||||
}
|
||||
},
|
||||
async saveAdapterConfig(config) {
|
||||
try {
|
||||
const res = await fetch('/admin/config/adapters', {
|
||||
method: 'POST',
|
||||
headers: this.getHeaders(),
|
||||
body: JSON.stringify(config)
|
||||
});
|
||||
const result = await this.handleResponse(res, '适配器设置保存成功');
|
||||
if (result.success) {
|
||||
// 通过合并更新本地状态
|
||||
this.adapterConfig = { ...this.adapterConfig, ...config };
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
Modal.error({ title: '保存失败 (网络异常)', content: e.message });
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useSettingsStore } from './settings';
|
||||
|
||||
export const useSystemStore = defineStore('system', {
|
||||
state: () => ({
|
||||
// 系统状态
|
||||
status: '',
|
||||
version: '1.0.0',
|
||||
systemVersion: '',
|
||||
uptime: 0,
|
||||
cpuUsage: 0,
|
||||
memoryUsage: {
|
||||
total: 0,
|
||||
used: 0,
|
||||
free: 0
|
||||
},
|
||||
|
||||
// 仪表盘统计信息
|
||||
stats: {
|
||||
totalRequests: 0,
|
||||
successRate: 0,
|
||||
activeWorkers: 0,
|
||||
totalWorkers: 0,
|
||||
avgResponseTime: 0
|
||||
}
|
||||
}),
|
||||
|
||||
actions: {
|
||||
// 获取系统状态
|
||||
async fetchStatus() {
|
||||
const settingsStore = useSettingsStore();
|
||||
try {
|
||||
const response = await fetch('/admin/status', {
|
||||
headers: settingsStore.getHeaders()
|
||||
});
|
||||
// 如果返回401，状态更新将失败，由App.vue的身份验证检查处理
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.$patch(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch system status:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取仪表盘统计信息
|
||||
async fetchStats() {
|
||||
const settingsStore = useSettingsStore();
|
||||
try {
|
||||
const response = await fetch('/admin/stats', {
|
||||
headers: settingsStore.getHeaders()
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.stats = data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch stats:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 重启服务
|
||||
async restartService(options = {}) {
|
||||
const settingsStore = useSettingsStore();
|
||||
const { loginMode, workerName } = options;
|
||||
try {
|
||||
const response = await fetch('/admin/restart', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
...settingsStore.getHeaders(),
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ loginMode, workerName })
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
message.success(data.message || '服务重启中...');
|
||||
return true;
|
||||
} else {
|
||||
message.error('重启失败');
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('重启请求失败');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// 停止服务
|
||||
async stopService() {
|
||||
const settingsStore = useSettingsStore();
|
||||
try {
|
||||
const response = await fetch('/admin/stop', {
|
||||
method: 'POST',
|
||||
headers: settingsStore.getHeaders()
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
message.success(data.message || '服务停止中...');
|
||||
return true;
|
||||
} else {
|
||||
message.error('停止失败');
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('停止请求失败');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user