feat(): 重构界面
This commit is contained in:
+123
-627
@@ -1,645 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { TrayIcon } from "@tauri-apps/api/tray";
|
||||
import { Image } from "@tauri-apps/api/image";
|
||||
import { Menu, MenuItem } from "@tauri-apps/api/menu";
|
||||
import { fetch } from "@tauri-apps/plugin-http";
|
||||
import { isPermissionGranted, requestPermission, sendNotification } from "@tauri-apps/plugin-notification";
|
||||
import { enable as enableAutostart, disable as disableAutostart, isEnabled as isAutostartEnabled } from "@tauri-apps/plugin-autostart";
|
||||
import {
|
||||
SettingOutlined,
|
||||
DashboardOutlined,
|
||||
ToolOutlined,
|
||||
FileTextOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
|
||||
// ===== 常量 =====
|
||||
const API_BASE = "https://crm.yunvip123.com/api";
|
||||
const LOGIN_URL = `${API_BASE}/SystemUser/Login`;
|
||||
const CHECK_URL = `${API_BASE}/DemandManage/QueryIndexCount`;
|
||||
import StatusHeader from "./components/StatusHeader.vue";
|
||||
import LoginForm from "./components/LoginForm.vue";
|
||||
import MonitorControl from "./components/MonitorControl.vue";
|
||||
import SettingsPanel from "./components/SettingsPanel.vue";
|
||||
import LogViewer from "./components/LogViewer.vue";
|
||||
import AppStatusBar from "./components/AppStatusBar.vue";
|
||||
import CloseDialog from "./components/CloseDialog.vue";
|
||||
import { useMonitorStore } from "./stores/monitor";
|
||||
|
||||
// ===== 响应式数据 =====
|
||||
const username = ref("");
|
||||
const password = ref("");
|
||||
const message = ref("");
|
||||
const isLoading = ref(false);
|
||||
const isLoggedIn = ref(false);
|
||||
const isMonitoring = ref(false);
|
||||
const autoStartEnabled = ref(false);
|
||||
const logs = ref<{ timestamp: string; level: string; message: string; category: string }[]>([]);
|
||||
const showLogs = ref(false);
|
||||
const showConfig = ref(false);
|
||||
const networkStatus = ref({
|
||||
is_connected: false,
|
||||
api_reachable: false,
|
||||
response_time: null as number | null,
|
||||
last_check: "",
|
||||
});
|
||||
const activeTab = ref("monitor");
|
||||
const store = useMonitorStore();
|
||||
|
||||
const config = ref({
|
||||
check_interval: 60,
|
||||
auto_start: false,
|
||||
show_notifications: true,
|
||||
network_timeout: 30,
|
||||
});
|
||||
|
||||
// ===== 内部状态 =====
|
||||
let sessionId = "";
|
||||
let userGid = "";
|
||||
let userName = "";
|
||||
let monitorTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
// ===== 日志 =====
|
||||
function addLog(level: string, msg: string, category: string) {
|
||||
const now = new Date();
|
||||
const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")} ${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}:${String(now.getSeconds()).padStart(2, "0")}`;
|
||||
logs.value.push({ timestamp, level, message: msg, category });
|
||||
if (logs.value.length > 1000) logs.value.shift();
|
||||
}
|
||||
|
||||
// ===== 通知 =====
|
||||
async function notify(title: string, body: string) {
|
||||
if (!config.value.show_notifications) return;
|
||||
let granted = await isPermissionGranted();
|
||||
if (!granted) {
|
||||
const permission = await requestPermission();
|
||||
granted = permission === "granted";
|
||||
}
|
||||
if (granted) {
|
||||
sendNotification({ title, body, actionTypeId: "crm-open" });
|
||||
addLog("INFO", `通知: ${title} - ${body}`, "NOTIFICATION");
|
||||
}
|
||||
}
|
||||
|
||||
// ===== API 调用 =====
|
||||
async function apiLogin(): Promise<boolean> {
|
||||
try {
|
||||
const body = JSON.stringify({ Account: username.value, PassWord: password.value });
|
||||
const resp = await fetch(LOGIN_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Content-Length": String(new TextEncoder().encode(body).length),
|
||||
"Host": "crm.yunvip123.com",
|
||||
"Cache-Control": "no-cache",
|
||||
},
|
||||
body,
|
||||
});
|
||||
|
||||
console.log(Object.fromEntries(resp.headers.entries()));
|
||||
|
||||
const setCookie = resp.headers.get("set-cookie") || "";
|
||||
const match = setCookie.match(/ASP\.NET_SessionId=([^;]+)/);
|
||||
if (match) sessionId = match[1];
|
||||
addLog("DEBUG", `SessionId: ${sessionId || "(未提取)"}`, "LOGIN");
|
||||
|
||||
const data = await resp.json();
|
||||
if (data.success && data.data) {
|
||||
userGid = data.data.GID;
|
||||
userName = data.data.SU_UserName || "用户";
|
||||
if (!sessionId) {
|
||||
addLog("WARN", "未能从响应头提取SessionId，API检查将使用无Cookie模式", "LOGIN");
|
||||
}
|
||||
isLoggedIn.value = true;
|
||||
addLog("INFO", `登录成功，用户: ${userName}, GID: ${userGid}`, "LOGIN");
|
||||
return true;
|
||||
} else {
|
||||
addLog("ERROR", `登录失败: ${data.msg}`, "LOGIN");
|
||||
return false;
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `登录请求失败: ${e.message || e}`, "LOGIN");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function apiCheckStatus(): Promise<void> {
|
||||
if (!userGid) {
|
||||
addLog("WARN", "会话已失效，请重新登录", "SCHEDULER");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(CHECK_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Cookie: `ASP.NET_SessionId=${sessionId}`,
|
||||
},
|
||||
body: JSON.stringify({ UserGID: userGid }),
|
||||
});
|
||||
|
||||
const result = await resp.json();
|
||||
if (result.success && result.data) {
|
||||
const d = result.data;
|
||||
const pending = d.PendingCount || 0;
|
||||
const stayclose = d.StaycloseCount || 0;
|
||||
const confirm = d.ConfirmCount || 0;
|
||||
|
||||
addLog("INFO", `检查完成 - 待处理: ${pending}, 待关闭: ${stayclose}, 待确认: ${confirm}`, "SCHEDULER");
|
||||
|
||||
if (pending > 0 || stayclose > 0 || confirm > 0) {
|
||||
const msgs: string[] = [];
|
||||
if (pending > 0) msgs.push(`待处理工单: ${pending}`);
|
||||
if (stayclose > 0) msgs.push(`待关闭工单: ${stayclose}`);
|
||||
if (confirm > 0) msgs.push(`待确认工单: ${confirm}`);
|
||||
await notify("工单提醒", msgs.join("，"));
|
||||
}
|
||||
} else {
|
||||
addLog("WARN", `API 返回异常: ${result.msg}`, "SCHEDULER");
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `API 检查失败: ${e.message || e}`, "SCHEDULER");
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 网络检测 =====
|
||||
async function checkNetworkStatus() {
|
||||
isLoading.value = true;
|
||||
let isConnected = false;
|
||||
let apiReachable = false;
|
||||
let responseTime: number | null = null;
|
||||
|
||||
// 检查基本网络
|
||||
try {
|
||||
const resp = await fetch("https://www.baidu.com", { method: "GET", connectTimeout: config.value.network_timeout * 1000 });
|
||||
console.log("Network check response:", resp);
|
||||
console.log(resp.headers);
|
||||
|
||||
isConnected = resp.ok;
|
||||
} catch { /* 网络不通 */ }
|
||||
|
||||
// 检查 API 服务器
|
||||
if (isConnected) {
|
||||
try {
|
||||
const apiStart = Date.now();
|
||||
const resp = await fetch(LOGIN_URL, { method: "HEAD", connectTimeout: config.value.network_timeout * 1000 });
|
||||
responseTime = Date.now() - apiStart;
|
||||
apiReachable = resp.status < 500;
|
||||
} catch { /* API 不可达 */ }
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
networkStatus.value = {
|
||||
is_connected: isConnected,
|
||||
api_reachable: apiReachable,
|
||||
response_time: responseTime,
|
||||
last_check: `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")} ${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}:${String(now.getSeconds()).padStart(2, "0")}`,
|
||||
};
|
||||
|
||||
addLog("INFO", `网络检查完成 - 连接: ${isConnected}, API可达: ${apiReachable}`, "NETWORK");
|
||||
message.value = "网络状态检查完成";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
// ===== 保存设置 =====
|
||||
function saveSettings() {
|
||||
if (!username.value.trim() || !password.value.trim()) {
|
||||
message.value = "请输入用户名和密码";
|
||||
return;
|
||||
}
|
||||
message.value = "设置保存成功";
|
||||
addLog("INFO", "用户凭据已保存", "CONFIG");
|
||||
}
|
||||
|
||||
// ===== 监控控制 =====
|
||||
async function startMonitoring() {
|
||||
if (!username.value.trim() || !password.value.trim()) {
|
||||
message.value = "请先设置用户名和密码";
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
const ok = await apiLogin();
|
||||
if (!ok) {
|
||||
message.value = "登录失败，无法开始监控";
|
||||
isLoading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 启动定时检查（先立即执行一次，再按间隔定时）
|
||||
isMonitoring.value = true;
|
||||
await apiCheckStatus();
|
||||
monitorTimer = setInterval(() => {
|
||||
apiCheckStatus();
|
||||
}, config.value.check_interval * 1000);
|
||||
|
||||
addLog("INFO", "监控已启动", "MONITOR");
|
||||
message.value = `监控已开始，欢迎 ${userName}！`;
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
function stopMonitoring() {
|
||||
if (monitorTimer) {
|
||||
clearInterval(monitorTimer);
|
||||
monitorTimer = null;
|
||||
}
|
||||
isMonitoring.value = false;
|
||||
isLoggedIn.value = false;
|
||||
sessionId = "";
|
||||
userGid = "";
|
||||
addLog("INFO", "监控已停止", "MONITOR");
|
||||
message.value = "监控已停止";
|
||||
}
|
||||
|
||||
// ===== 手动检查 =====
|
||||
async function manualCheck() {
|
||||
if (!isLoggedIn.value) {
|
||||
message.value = "请先开始监控（登录）";
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
await apiCheckStatus();
|
||||
message.value = "手动检查完成";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
// ===== 配置更新 =====
|
||||
async function updateConfig() {
|
||||
isLoading.value = true;
|
||||
|
||||
// 自启动
|
||||
try {
|
||||
if (config.value.auto_start) {
|
||||
await enableAutostart();
|
||||
} else {
|
||||
await disableAutostart();
|
||||
}
|
||||
autoStartEnabled.value = config.value.auto_start;
|
||||
addLog("INFO", `自启动设置: ${config.value.auto_start ? "启用" : "禁用"}`, "CONFIG");
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `自启动设置失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
|
||||
// 如果监控中，重启定时器以应用新间隔
|
||||
if (isMonitoring.value && monitorTimer) {
|
||||
clearInterval(monitorTimer);
|
||||
monitorTimer = setInterval(() => {
|
||||
apiCheckStatus();
|
||||
}, config.value.check_interval * 1000);
|
||||
addLog("INFO", `检查间隔已更新为: ${config.value.check_interval}秒`, "CONFIG");
|
||||
}
|
||||
|
||||
message.value = "配置更新成功";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
// ===== 系统托盘 =====
|
||||
async function setupTray() {
|
||||
try {
|
||||
const mainWindow = getCurrentWindow();
|
||||
|
||||
// 创建托盘菜单
|
||||
const menu = await Menu.new({
|
||||
items: [
|
||||
await MenuItem.new({
|
||||
id: "show",
|
||||
text: "显示设置",
|
||||
action: async () => {
|
||||
await mainWindow.show();
|
||||
await mainWindow.setFocus();
|
||||
}
|
||||
}),
|
||||
await MenuItem.new({
|
||||
id: "quit",
|
||||
text: "退出",
|
||||
action: async () => {
|
||||
await mainWindow.destroy();
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
// 创建托盘图标
|
||||
const icon = await Image.fromPath("icons/32x32.png");
|
||||
await TrayIcon.new({
|
||||
icon,
|
||||
tooltip: "工单监控系统",
|
||||
menu,
|
||||
menuOnLeftClick: false,
|
||||
action: async (event) => {
|
||||
if (event.type === "Click" && event.button === "Left") {
|
||||
await mainWindow.show();
|
||||
await mainWindow.setFocus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
addLog("INFO", "系统托盘创建成功", "SYSTEM");
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `系统托盘创建失败: ${e.message || e}`, "SYSTEM");
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 最小化到托盘 =====
|
||||
async function minimizeToTray() {
|
||||
try {
|
||||
const mainWindow = getCurrentWindow();
|
||||
await mainWindow.hide();
|
||||
} catch (e: any) {
|
||||
message.value = `最小化失败: ${e}`;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 日志操作 =====
|
||||
function toggleLogs() {
|
||||
showLogs.value = !showLogs.value;
|
||||
}
|
||||
|
||||
function clearLogs() {
|
||||
logs.value = [];
|
||||
message.value = "日志已清除";
|
||||
}
|
||||
|
||||
function toggleConfig() {
|
||||
showConfig.value = !showConfig.value;
|
||||
if (showConfig.value) {
|
||||
config.value.auto_start = autoStartEnabled.value;
|
||||
}
|
||||
}
|
||||
|
||||
function clearMessage() {
|
||||
message.value = "";
|
||||
}
|
||||
|
||||
function formatResponseTime(time: number | null) {
|
||||
return time ? `${time}ms` : "N/A";
|
||||
}
|
||||
|
||||
function getNetworkStatusText() {
|
||||
if (!networkStatus.value.is_connected) return "网络断开";
|
||||
if (!networkStatus.value.api_reachable) return "API不可达";
|
||||
return "网络正常";
|
||||
}
|
||||
|
||||
// ===== 生命周期 =====
|
||||
onMounted(async () => {
|
||||
// 初始化系统托盘
|
||||
await setupTray();
|
||||
|
||||
// 检查自启动状态
|
||||
try {
|
||||
autoStartEnabled.value = await isAutostartEnabled();
|
||||
config.value.auto_start = autoStartEnabled.value;
|
||||
} catch { /* ignore */ }
|
||||
|
||||
addLog("INFO", "应用程序启动完成", "SYSTEM");
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (monitorTimer) clearInterval(monitorTimer);
|
||||
});
|
||||
onMounted(() => store.initialize());
|
||||
onUnmounted(() => store.cleanup());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="app">
|
||||
<div class="app__header">
|
||||
<h1 class="app__title">系统监控设置</h1>
|
||||
<div class="app__status">
|
||||
<div class="status-row">
|
||||
<span class="status-indicator" :class="{ 'status-indicator--active': isLoggedIn }"></span>
|
||||
<span class="status-text">
|
||||
{{ isLoggedIn ? '已登录' : '未登录' }}
|
||||
{{ isMonitoring ? ' - 监控中' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<span class="network-indicator" :class="{
|
||||
'network-indicator--connected': networkStatus.is_connected,
|
||||
'network-indicator--api': networkStatus.api_reachable
|
||||
}"></span>
|
||||
<span class="network-text">
|
||||
{{ getNetworkStatusText() }}
|
||||
<span v-if="networkStatus.response_time" class="response-time">
|
||||
({{ formatResponseTime(networkStatus.response_time) }})
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-layout class="app-layout">
|
||||
<a-layout-header class="app-header">
|
||||
<StatusHeader />
|
||||
</a-layout-header>
|
||||
|
||||
<div class="app__content">
|
||||
<!-- 设置表单 -->
|
||||
<div class="settings-card">
|
||||
<h2 class="settings-card__title">登录设置</h2>
|
||||
<form class="settings-form" @submit.prevent="saveSettings">
|
||||
<div class="form-group">
|
||||
<label for="username" class="form-group__label">用户名</label>
|
||||
<input id="username" v-model="username" type="text" class="form-group__input" placeholder="请输入用户名" :disabled="isLoading" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password" class="form-group__label">密码</label>
|
||||
<input id="password" v-model="password" type="password" class="form-group__input" placeholder="请输入密码" :disabled="isLoading" />
|
||||
</div>
|
||||
<button type="submit" class="btn btn--primary" :disabled="isLoading">
|
||||
{{ isLoading ? '保存中...' : '保存设置' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<a-layout-content class="app-content">
|
||||
<a-tabs v-model:activeKey="activeTab" tab-position="left" class="main-tabs">
|
||||
<a-tab-pane key="monitor">
|
||||
<template #tab>
|
||||
<span><DashboardOutlined /> 监控</span>
|
||||
</template>
|
||||
<MonitorControl />
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="actions-card">
|
||||
<h2 class="actions-card__title">监控控制</h2>
|
||||
<div class="actions-grid">
|
||||
<button class="btn btn--success" :disabled="isLoading || isMonitoring" @click="startMonitoring">
|
||||
{{ isLoading ? '启动中...' : '开始监控' }}
|
||||
</button>
|
||||
<button class="btn btn--warning" :disabled="isLoading || !isMonitoring" @click="stopMonitoring">
|
||||
停止监控
|
||||
</button>
|
||||
<button class="btn btn--info" :disabled="isLoading || !isLoggedIn" @click="manualCheck">
|
||||
{{ isLoading ? '检查中...' : '手动检查API' }}
|
||||
</button>
|
||||
<button class="btn btn--secondary" :disabled="isLoading" @click="minimizeToTray">
|
||||
最小化到托盘
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a-tab-pane key="login">
|
||||
<template #tab>
|
||||
<span><SettingOutlined /> 账号</span>
|
||||
</template>
|
||||
<LoginForm />
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- 测试按钮 -->
|
||||
<div class="actions-card">
|
||||
<h2 class="actions-card__title">测试功能</h2>
|
||||
<div class="actions-grid">
|
||||
<button class="btn btn--primary" :disabled="isLoading" @click="checkNetworkStatus">
|
||||
{{ isLoading ? '检查中...' : '网络检测' }}
|
||||
</button>
|
||||
<button class="btn btn--info" @click="toggleLogs">
|
||||
{{ showLogs ? '隐藏日志' : '显示日志' }}
|
||||
</button>
|
||||
<button class="btn btn--primary" @click="toggleConfig">
|
||||
{{ showConfig ? '隐藏配置' : '显示配置' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a-tab-pane key="settings">
|
||||
<template #tab>
|
||||
<span><ToolOutlined /> 配置</span>
|
||||
</template>
|
||||
<SettingsPanel />
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- 配置面板 -->
|
||||
<div v-if="showConfig" class="config-card">
|
||||
<h2 class="config-card__title">高级配置</h2>
|
||||
<div class="config-form">
|
||||
<div class="form-group">
|
||||
<label for="check_interval" class="form-group__label">检查间隔（秒）</label>
|
||||
<input id="check_interval" v-model.number="config.check_interval" type="number" min="10" max="3600" class="form-group__input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="network_timeout" class="form-group__label">网络超时（秒）</label>
|
||||
<input id="network_timeout" v-model.number="config.network_timeout" type="number" min="5" max="120" class="form-group__input" />
|
||||
</div>
|
||||
<div class="form-group form-group--checkbox">
|
||||
<label class="checkbox-label">
|
||||
<input v-model="config.auto_start" type="checkbox" class="checkbox-input" />
|
||||
<span class="checkbox-text">开机自启动</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group form-group--checkbox">
|
||||
<label class="checkbox-label">
|
||||
<input v-model="config.show_notifications" type="checkbox" class="checkbox-input" />
|
||||
<span class="checkbox-text">显示系统通知</span>
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn--primary" :disabled="isLoading" @click="updateConfig">
|
||||
{{ isLoading ? '保存中...' : '保存配置' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a-tab-pane key="logs">
|
||||
<template #tab>
|
||||
<span><FileTextOutlined /> 日志</span>
|
||||
</template>
|
||||
<LogViewer />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-layout-content>
|
||||
|
||||
<!-- 日志面板 -->
|
||||
<div v-if="showLogs" class="logs-card">
|
||||
<div class="logs-header">
|
||||
<h2 class="logs-card__title">系统日志</h2>
|
||||
<button class="btn btn--small btn--secondary" @click="clearLogs">清除日志</button>
|
||||
</div>
|
||||
<div class="logs-content">
|
||||
<div v-if="logs.length === 0" class="logs-empty">暂无日志记录</div>
|
||||
<div v-else class="logs-list">
|
||||
<div v-for="log in [...logs].reverse()" :key="`${log.timestamp}-${log.message}`" class="log-entry" :class="`log-entry--${log.level.toLowerCase()}`">
|
||||
<span class="log-time">{{ log.timestamp }}</span>
|
||||
<span class="log-category">[{{ log.category }}]</span>
|
||||
<span class="log-level">{{ log.level }}</span>
|
||||
<span class="log-message">{{ log.message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppStatusBar />
|
||||
</a-layout>
|
||||
|
||||
<!-- 消息显示 -->
|
||||
<div v-if="message" class="message-card">
|
||||
<div class="message-card__content">
|
||||
<p class="message-card__text">{{ message }}</p>
|
||||
<button class="message-card__close" @click="clearMessage">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<CloseDialog />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.app__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.app__title { color: white; font-size: 24px; font-weight: 600; margin: 0; }
|
||||
.app__status { display: flex; flex-direction: column; gap: 8px; }
|
||||
.status-row { display: flex; align-items: center; gap: 8px; }
|
||||
.status-indicator {
|
||||
width: 12px; height: 12px; border-radius: 50%;
|
||||
background-color: #dc3545; transition: background-color 0.3s ease;
|
||||
}
|
||||
.status-indicator--active { background-color: #28a745; }
|
||||
.status-text { color: white; font-size: 14px; font-weight: 500; }
|
||||
.network-indicator {
|
||||
width: 12px; height: 12px; border-radius: 50%;
|
||||
background-color: #dc3545; transition: background-color 0.3s ease;
|
||||
}
|
||||
.network-indicator--connected { background-color: #ffc107; }
|
||||
.network-indicator--api { background-color: #28a745; }
|
||||
.network-text { color: white; font-size: 12px; font-weight: 400; }
|
||||
.response-time { color: #ccc; font-size: 11px; }
|
||||
.app__content { display: grid; gap: 20px; max-width: 600px; margin: 0 auto; }
|
||||
.settings-card, .actions-card, .config-card, .logs-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 12px; padding: 24px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.settings-card__title, .actions-card__title, .config-card__title, .logs-card__title {
|
||||
color: #333; font-size: 18px; font-weight: 600; margin: 0 0 20px 0;
|
||||
}
|
||||
.settings-form, .config-form { display: flex; flex-direction: column; gap: 16px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group__label { color: #555; font-size: 14px; font-weight: 500; }
|
||||
.form-group__input {
|
||||
padding: 12px 16px; border: 2px solid #e1e5e9; border-radius: 8px;
|
||||
font-size: 14px; transition: border-color 0.3s ease; background: white;
|
||||
}
|
||||
.form-group__input:focus { outline: none; border-color: #667eea; }
|
||||
.form-group__input:disabled { background-color: #f8f9fa; cursor: not-allowed; }
|
||||
.actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
|
||||
.btn {
|
||||
padding: 12px 20px; border: none; border-radius: 8px;
|
||||
font-size: 14px; font-weight: 500; cursor: pointer;
|
||||
transition: all 0.3s ease; text-align: center;
|
||||
}
|
||||
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
.btn--primary { background: #667eea; color: white; }
|
||||
.btn--primary:hover:not(:disabled) { background: #5a6fd8; transform: translateY(-2px); }
|
||||
.btn--success { background: #28a745; color: white; }
|
||||
.btn--success:hover:not(:disabled) { background: #218838; transform: translateY(-2px); }
|
||||
.btn--warning { background: #ffc107; color: #212529; }
|
||||
.btn--warning:hover:not(:disabled) { background: #e0a800; transform: translateY(-2px); }
|
||||
.btn--info { background: #17a2b8; color: white; }
|
||||
.btn--info:hover:not(:disabled) { background: #138496; transform: translateY(-2px); }
|
||||
.btn--secondary { background: #6c757d; color: white; }
|
||||
.btn--secondary:hover:not(:disabled) { background: #545b62; transform: translateY(-2px); }
|
||||
.btn--small { padding: 6px 12px; font-size: 12px; }
|
||||
.message-card {
|
||||
background: rgba(255, 255, 255, 0.95); border-radius: 12px;
|
||||
padding: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
.message-card__content { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
|
||||
.message-card__text { color: #333; font-size: 14px; margin: 0; flex: 1; }
|
||||
.message-card__close {
|
||||
background: none; border: none; font-size: 20px; color: #999;
|
||||
cursor: pointer; padding: 0; width: 24px; height: 24px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 4px; transition: all 0.3s ease;
|
||||
}
|
||||
.message-card__close:hover { background: #f8f9fa; color: #333; }
|
||||
.form-group--checkbox { flex-direction: row; align-items: center; }
|
||||
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
|
||||
.checkbox-input { width: 16px; height: 16px; }
|
||||
.checkbox-text { color: #555; font-size: 14px; font-weight: 500; }
|
||||
.logs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.logs-content {
|
||||
max-height: 400px; overflow-y: auto;
|
||||
border: 1px solid #e1e5e9; border-radius: 8px; background: #f8f9fa;
|
||||
}
|
||||
.logs-empty { padding: 20px; text-align: center; color: #999; font-style: italic; }
|
||||
.logs-list { padding: 8px; }
|
||||
.log-entry {
|
||||
display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px;
|
||||
padding: 4px 8px; font-family: 'Courier New', monospace; font-size: 12px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
.log-entry:last-child { border-bottom: none; }
|
||||
.log-entry--info { color: #0066cc; }
|
||||
.log-entry--warn { color: #ff8800; }
|
||||
.log-entry--error { color: #cc0000; }
|
||||
.log-entry--debug { color: #666; }
|
||||
.log-time { color: #666; font-weight: 500; }
|
||||
.log-category { color: #0066cc; font-weight: 600; }
|
||||
.log-level { font-weight: 600; text-transform: uppercase; }
|
||||
.log-message { word-break: break-word; }
|
||||
@media (max-width: 768px) {
|
||||
.app { padding: 16px; }
|
||||
.app__header { flex-direction: column; gap: 12px; text-align: center; }
|
||||
.actions-grid { grid-template-columns: 1fr; }
|
||||
.log-entry { grid-template-columns: 1fr; gap: 4px; }
|
||||
.logs-content { max-height: 300px; }
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.app-layout {
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.app-header {
|
||||
background: transparent !important;
|
||||
height: auto !important;
|
||||
line-height: normal !important;
|
||||
padding: 16px 24px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.app-content {
|
||||
padding: 0 24px 24px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.main-tabs {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
gap: 16px;
|
||||
}
|
||||
.main-tabs :deep(.ant-tabs-nav) {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 12px;
|
||||
padding: 12px 0;
|
||||
min-width: 100px;
|
||||
}
|
||||
.main-tabs :deep(.ant-tabs-nav::before) {
|
||||
border: none;
|
||||
}
|
||||
.main-tabs :deep(.ant-tabs-tab) {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
padding: 10px 20px !important;
|
||||
margin: 0 !important;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.main-tabs :deep(.ant-tabs-tab:hover) {
|
||||
color: #fff !important;
|
||||
}
|
||||
.main-tabs :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.main-tabs :deep(.ant-tabs-ink-bar) {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.main-tabs :deep(.ant-tabs-content-holder) {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
border: none !important;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ExclamationCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { useMonitorStore } from "../stores/monitor";
|
||||
|
||||
const store = useMonitorStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-statusbar">
|
||||
<span v-if="store.isPostponed" class="statusbar-item statusbar-item--warning">
|
||||
<ExclamationCircleOutlined /> 监控已推迟，1小时后自动恢复
|
||||
</span>
|
||||
<span v-if="store.isPostponed && store.message" class="statusbar-sep" />
|
||||
<span v-if="store.message" class="statusbar-item statusbar-item--info">
|
||||
<InfoCircleOutlined /> {{ store.message }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-statusbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
height: 28px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(8px);
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.statusbar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
}
|
||||
.statusbar-item--warning {
|
||||
color: #ffe58f;
|
||||
}
|
||||
.statusbar-item--info {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.statusbar-sep {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useMonitorStore } from "../stores/monitor";
|
||||
|
||||
const store = useMonitorStore();
|
||||
const rememberClose = ref(false);
|
||||
|
||||
function handleClose(action: "minimize" | "close") {
|
||||
store.handleCloseAction(action, rememberClose.value);
|
||||
rememberClose.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="store.showCloseDialog"
|
||||
title="关闭窗口"
|
||||
:width="340"
|
||||
centered
|
||||
>
|
||||
<div class="dialog-body">
|
||||
<p class="dialog-tip">请选择关闭窗口时的操作：</p>
|
||||
<a-checkbox v-model:checked="rememberClose">记住我的选择</a-checkbox>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<a-button @click="handleClose('minimize')">最小化到托盘</a-button>
|
||||
<a-button danger type="primary" @click="handleClose('close')">直接退出程序</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dialog-body {
|
||||
padding: 4px 0 8px;
|
||||
}
|
||||
.dialog-tip {
|
||||
margin: 0 0 12px;
|
||||
color: #555;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { DeleteOutlined, DownloadOutlined } from "@ant-design/icons-vue";
|
||||
import { useMonitorStore } from "../stores/monitor";
|
||||
|
||||
const store = useMonitorStore();
|
||||
const reversedLogs = computed(() => [...store.logs].reverse());
|
||||
|
||||
const levelColor: Record<string, string> = {
|
||||
INFO: "blue",
|
||||
WARN: "orange",
|
||||
ERROR: "red",
|
||||
DEBUG: "default",
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="log-viewer">
|
||||
<div class="log-viewer__toolbar">
|
||||
<span class="log-viewer__count">共 {{ store.logs.length }} 条日志</span>
|
||||
<a-space>
|
||||
<a-button size="small" :disabled="store.logs.length === 0" @click="store.exportLogs()">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
导出
|
||||
</a-button>
|
||||
<a-button size="small" danger @click="store.clearLogs()">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
清除
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<a-empty v-if="store.logs.length === 0" description="暂无日志记录" />
|
||||
|
||||
<div v-else class="log-viewer__list">
|
||||
<div
|
||||
v-for="log in reversedLogs"
|
||||
:key="`${log.timestamp}-${log.message}`"
|
||||
class="log-item"
|
||||
>
|
||||
<span class="log-item__time">{{ log.timestamp }}</span>
|
||||
<a-tag :color="levelColor[log.level] || 'default'" size="small" class="log-item__tag">
|
||||
{{ log.level }}
|
||||
</a-tag>
|
||||
<a-tag color="geekblue" size="small" class="log-item__tag">{{ log.category }}</a-tag>
|
||||
<span class="log-item__msg">{{ log.message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.log-viewer__toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.log-viewer__count {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
.log-viewer__list {
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 6px;
|
||||
background: #fafafa;
|
||||
}
|
||||
.log-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-family: "Courier New", Consolas, monospace;
|
||||
}
|
||||
.log-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.log-item__time {
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.log-item__tag {
|
||||
flex-shrink: 0;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.log-item__msg {
|
||||
word-break: break-word;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import { useMonitorStore } from "../stores/monitor";
|
||||
|
||||
const store = useMonitorStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<a-radio-group v-model:value="store.loginMode" :disabled="store.isMonitoring">
|
||||
<a-radio-button value="password">账号密码登录</a-radio-button>
|
||||
<a-radio-button value="token">Token 登录</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<template v-if="store.loginMode === 'password'">
|
||||
<a-form-item label="用户名">
|
||||
<a-input
|
||||
v-model:value="store.username"
|
||||
placeholder="请输入用户名"
|
||||
:disabled="store.isLoading"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="密码">
|
||||
<a-input-password
|
||||
v-model:value="store.password"
|
||||
placeholder="请输入密码"
|
||||
:disabled="store.isLoading"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<a-form-item label="ASP.NET_SessionId">
|
||||
<a-input
|
||||
v-model:value="store.tokenSessionId"
|
||||
placeholder="请输入 ASP.NET_SessionId"
|
||||
:disabled="store.isLoading"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-typography-text type="secondary" style="font-size: 12px; display: block; margin-bottom: 12px;">
|
||||
从浏览器开发者工具 (F12) → Application → Cookies 中复制 ASP.NET_SessionId 的值
|
||||
</a-typography-text>
|
||||
</template>
|
||||
|
||||
<a-form-item>
|
||||
<a-checkbox v-model:checked="store.rememberPassword">
|
||||
记住{{ store.loginMode === 'password' ? '密码' : 'Token' }}
|
||||
</a-checkbox>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" :loading="store.isLoading" @click="store.saveSettings()">
|
||||
保存设置
|
||||
</a-button>
|
||||
<a-button type="primary" :loading="store.isLoading" :disabled="store.isMonitoring" style="background: #52c41a; border-color: #52c41a" @click="store.startMonitoring()">
|
||||
开始监控
|
||||
</a-button>
|
||||
<a-button danger :disabled="store.isLoading || !store.isMonitoring" @click="store.stopMonitoring()">
|
||||
停止监控
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ReloadOutlined,
|
||||
MinusCircleOutlined,
|
||||
BellOutlined,
|
||||
WifiOutlined,
|
||||
ClockCircleOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { useMonitorStore } from "../stores/monitor";
|
||||
|
||||
const store = useMonitorStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="monitor-control">
|
||||
<div class="ticket-dashboard">
|
||||
<div class="ticket-card ticket-card--pending">
|
||||
<a-statistic title="待处理" :value="store.ticketCounts.pending" :value-style="{ color: store.ticketCounts.pending > 0 ? '#cf1322' : '#3f8600' }" />
|
||||
</div>
|
||||
<div class="ticket-card ticket-card--stayclose">
|
||||
<a-statistic title="待关闭" :value="store.ticketCounts.stayclose" :value-style="{ color: store.ticketCounts.stayclose > 0 ? '#d46b08' : '#3f8600' }" />
|
||||
</div>
|
||||
<div class="ticket-card ticket-card--confirm">
|
||||
<a-statistic title="待确认" :value="store.ticketCounts.confirm" :value-style="{ color: store.ticketCounts.confirm > 0 ? '#1677ff' : '#3f8600' }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="store.ticketCounts.lastCheck" class="last-check">
|
||||
<ClockCircleOutlined /> 上次检查：{{ store.ticketCounts.lastCheck }}
|
||||
</div>
|
||||
|
||||
<a-space wrap :size="[12, 12]" style="margin-top: 20px">
|
||||
<a-button :loading="store.isLoading" :disabled="!store.isLoggedIn" @click="store.manualCheck()">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
手动检查
|
||||
</a-button>
|
||||
<a-button @click="store.checkNetworkStatus()">
|
||||
<template #icon><WifiOutlined /></template>
|
||||
网络检测
|
||||
</a-button>
|
||||
<a-button @click="store.testNotification()">
|
||||
<template #icon><BellOutlined /></template>
|
||||
测试通知
|
||||
</a-button>
|
||||
<a-button @click="store.minimizeToTray()">
|
||||
<template #icon><MinusCircleOutlined /></template>
|
||||
最小化到托盘
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.monitor-control {
|
||||
padding-top: 4px;
|
||||
}
|
||||
.ticket-dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ticket-card {
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.ticket-card--pending {
|
||||
background: #fff1f0;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
.ticket-card--stayclose {
|
||||
background: #fff7e6;
|
||||
border: 1px solid #ffd591;
|
||||
}
|
||||
.ticket-card--confirm {
|
||||
background: #e6f4ff;
|
||||
border: 1px solid #91caff;
|
||||
}
|
||||
.last-check {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import { useMonitorStore } from "../stores/monitor";
|
||||
|
||||
const store = useMonitorStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="检查间隔（秒）">
|
||||
<a-input-number
|
||||
v-model:value="store.config.check_interval"
|
||||
:min="10"
|
||||
:max="3600"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="网络超时（秒）">
|
||||
<a-input-number
|
||||
v-model:value="store.config.network_timeout"
|
||||
:min="5"
|
||||
:max="120"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="开机自启动">
|
||||
<a-switch v-model:checked="store.config.auto_start" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="启动后自动监控">
|
||||
<a-switch v-model:checked="store.config.auto_monitor" />
|
||||
<div class="form-hint">需同时开启「记住密码」</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="显示系统通知">
|
||||
<a-switch v-model:checked="store.config.show_notifications" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="通知提示音">
|
||||
<a-switch
|
||||
v-model:checked="store.config.notification_sound"
|
||||
:disabled="!store.config.show_notifications"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="关闭窗口行为">
|
||||
<a-radio-group v-model:value="store.config.close_action">
|
||||
<a-radio value="ask">每次询问</a-radio>
|
||||
<a-radio value="minimize">最小化到托盘</a-radio>
|
||||
<a-radio value="close">直接退出</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" :loading="store.isLoading" @click="store.updateConfig()">
|
||||
保存配置
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-hint {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
CheckCircleFilled,
|
||||
CloseCircleFilled,
|
||||
SyncOutlined,
|
||||
PauseCircleFilled,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { APP_NAME, useMonitorStore } from "../stores/monitor";
|
||||
|
||||
const store = useMonitorStore();
|
||||
|
||||
function getNetworkStatusText() {
|
||||
if (!store.networkStatus.is_connected) return "网络断开";
|
||||
if (!store.networkStatus.api_reachable) return "API不可达";
|
||||
return "网络正常";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="status-header">
|
||||
<h1 class="status-header__title">{{ APP_NAME }}</h1>
|
||||
<a-space :size="12">
|
||||
<a-tag :color="store.isLoggedIn ? 'success' : 'error'">
|
||||
<template #icon>
|
||||
<CheckCircleFilled v-if="store.isLoggedIn" />
|
||||
<CloseCircleFilled v-else />
|
||||
</template>
|
||||
{{ store.isLoggedIn ? "已登录" : "未登录" }}
|
||||
</a-tag>
|
||||
<a-tag v-if="store.isMonitoring" :color="store.isPostponed ? 'warning' : 'processing'">
|
||||
<template #icon>
|
||||
<PauseCircleFilled v-if="store.isPostponed" />
|
||||
<SyncOutlined v-else :spin="true" />
|
||||
</template>
|
||||
{{ store.isPostponed ? "已推迟1小时" : "监控中" }}
|
||||
</a-tag>
|
||||
<a-tag
|
||||
:color="store.networkStatus.api_reachable ? 'success' : store.networkStatus.is_connected ? 'warning' : 'error'"
|
||||
>
|
||||
{{ getNetworkStatusText() }}
|
||||
</a-tag>
|
||||
<span v-if="store.networkStatus.response_time" class="response-time">
|
||||
{{ store.networkStatus.response_time }}ms
|
||||
</span>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
.status-header__title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
.response-time {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,547 @@
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { TrayIcon } from "@tauri-apps/api/tray";
|
||||
import { Image } from "@tauri-apps/api/image";
|
||||
import { Menu, MenuItem } from "@tauri-apps/api/menu";
|
||||
import { fetch } from "@tauri-apps/plugin-http";
|
||||
import {
|
||||
isPermissionGranted,
|
||||
requestPermission,
|
||||
} from "@tauri-apps/plugin-notification";
|
||||
import {
|
||||
enable as enableAutostart,
|
||||
disable as disableAutostart,
|
||||
isEnabled as isAutostartEnabled,
|
||||
} from "@tauri-apps/plugin-autostart";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
||||
import { resolveResource } from "@tauri-apps/api/path";
|
||||
|
||||
export const APP_NAME = "工单系统监测";
|
||||
const API_BASE = "https://crm.yunvip123.com/api";
|
||||
const LOGIN_URL = `${API_BASE}/SystemUser/Login`;
|
||||
const CHECK_URL = `${API_BASE}/DemandManage/QueryIndexCount`;
|
||||
|
||||
export interface LogEntry {
|
||||
timestamp: string;
|
||||
level: string;
|
||||
message: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
export interface TicketCounts {
|
||||
pending: number;
|
||||
stayclose: number;
|
||||
confirm: number;
|
||||
lastCheck: string;
|
||||
}
|
||||
|
||||
export function useMonitor() {
|
||||
// ===== 响应式数据 =====
|
||||
const username = ref("");
|
||||
const password = ref("");
|
||||
const rememberPassword = ref(false);
|
||||
const message = ref("");
|
||||
const isLoading = ref(false);
|
||||
const isLoggedIn = ref(false);
|
||||
const isMonitoring = ref(false);
|
||||
const isPostponed = ref(false);
|
||||
const autoStartEnabled = ref(false);
|
||||
const logs = ref<LogEntry[]>([]);
|
||||
const ticketCounts = ref<TicketCounts>({
|
||||
pending: 0, stayclose: 0, confirm: 0, lastCheck: "",
|
||||
});
|
||||
const networkStatus = ref({
|
||||
is_connected: false,
|
||||
api_reachable: false,
|
||||
response_time: null as number | null,
|
||||
last_check: "",
|
||||
});
|
||||
const config = ref({
|
||||
check_interval: 60,
|
||||
auto_start: false,
|
||||
auto_monitor: false,
|
||||
show_notifications: true,
|
||||
notification_sound: true,
|
||||
network_timeout: 30,
|
||||
});
|
||||
|
||||
// ===== 内部状态 =====
|
||||
let sessionId = "";
|
||||
let userGid = "";
|
||||
let userName = "";
|
||||
let monitorTimer: ReturnType<typeof setInterval> | null = null;
|
||||
let postponeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let unlistenNotification: UnlistenFn | null = null;
|
||||
|
||||
// ===== 工具函数 =====
|
||||
function formatTime(date: Date): string {
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function addLog(level: string, msg: string, category: string) {
|
||||
logs.value.push({ timestamp: formatTime(new Date()), level, message: msg, category });
|
||||
if (logs.value.length > 1000) logs.value.shift();
|
||||
}
|
||||
|
||||
function clearLogs() {
|
||||
logs.value = [];
|
||||
message.value = "日志已清除";
|
||||
}
|
||||
|
||||
function clearMessage() {
|
||||
message.value = "";
|
||||
}
|
||||
|
||||
// ===== 通知声音 =====
|
||||
function playNotificationSound() {
|
||||
if (!config.value.notification_sound) return;
|
||||
try {
|
||||
const ctx = new AudioContext();
|
||||
const oscillator = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
oscillator.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
oscillator.frequency.setValueAtTime(880, ctx.currentTime);
|
||||
oscillator.frequency.setValueAtTime(660, ctx.currentTime + 0.15);
|
||||
gain.gain.setValueAtTime(0.3, ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4);
|
||||
oscillator.start(ctx.currentTime);
|
||||
oscillator.stop(ctx.currentTime + 0.4);
|
||||
} catch { /* 静默失败 */ }
|
||||
}
|
||||
|
||||
// ===== 通知 =====
|
||||
async function notify(title: string, body: string) {
|
||||
if (!config.value.show_notifications) return;
|
||||
let granted = await isPermissionGranted();
|
||||
if (!granted) {
|
||||
const permission = await requestPermission();
|
||||
granted = permission === "granted";
|
||||
}
|
||||
if (granted) {
|
||||
try {
|
||||
await invoke("send_clickable_notification", { title, body });
|
||||
playNotificationSound();
|
||||
addLog("INFO", `通知: ${title} - ${body}`, "NOTIFICATION");
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `发送通知失败: ${e}`, "NOTIFICATION");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== API =====
|
||||
async function apiLogin(): Promise<boolean> {
|
||||
try {
|
||||
const body = JSON.stringify({ Account: username.value, PassWord: password.value });
|
||||
const resp = await fetch(LOGIN_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Content-Length": String(new TextEncoder().encode(body).length),
|
||||
Host: "crm.yunvip123.com",
|
||||
"Cache-Control": "no-cache",
|
||||
Cookie: "",
|
||||
},
|
||||
body,
|
||||
credentials: "omit",
|
||||
});
|
||||
|
||||
const setCookie = resp.headers.get("set-cookie") || "";
|
||||
const match = setCookie.match(/ASP\.NET_SessionId=([^;]+)/);
|
||||
if (match) sessionId = match[1];
|
||||
addLog("DEBUG", `SessionId: ${sessionId || "(未提取)"}`, "LOGIN");
|
||||
|
||||
const data = await resp.json();
|
||||
if (data.success && data.data) {
|
||||
userGid = data.data.GID;
|
||||
userName = data.data.SU_UserName || "用户";
|
||||
if (!sessionId) {
|
||||
addLog("WARN", "未能从响应头提取SessionId", "LOGIN");
|
||||
}
|
||||
isLoggedIn.value = true;
|
||||
addLog("INFO", `登录成功，用户: ${userName}, GID: ${userGid}`, "LOGIN");
|
||||
return true;
|
||||
} else {
|
||||
addLog("ERROR", `登录失败: ${data.msg}`, "LOGIN");
|
||||
return false;
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `登录请求失败: ${e.message || e}`, "LOGIN");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function apiCheckStatus(isRetry = false): Promise<void> {
|
||||
if (!userGid) {
|
||||
addLog("WARN", "会话已失效，尝试重新登录", "SCHEDULER");
|
||||
if (!isRetry) await tryReLogin();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const resp = await fetch(CHECK_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Cookie: `ASP.NET_SessionId=${sessionId}`,
|
||||
},
|
||||
body: JSON.stringify({ UserGID: userGid }),
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (result.success && result.data) {
|
||||
const d = result.data;
|
||||
const pending = d.PendingCount || 0;
|
||||
const stayclose = d.StaycloseCount || 0;
|
||||
const confirm = d.ConfirmCount || 0;
|
||||
ticketCounts.value = {
|
||||
pending, stayclose, confirm,
|
||||
lastCheck: formatTime(new Date()),
|
||||
};
|
||||
addLog("INFO", `检查完成 - 待处理: ${pending}, 待关闭: ${stayclose}, 待确认: ${confirm}`, "SCHEDULER");
|
||||
if (pending > 0 || stayclose > 0 || confirm > 0) {
|
||||
const msgs: string[] = [];
|
||||
if (pending > 0) msgs.push(`待处理工单: ${pending}`);
|
||||
if (stayclose > 0) msgs.push(`待关闭工单: ${stayclose}`);
|
||||
if (confirm > 0) msgs.push(`待确认工单: ${confirm}`);
|
||||
await notify("工单提醒", msgs.join("，"));
|
||||
}
|
||||
} else {
|
||||
addLog("WARN", `API 返回异常: ${result.msg}`, "SCHEDULER");
|
||||
if (!isRetry && isSessionExpiredMsg(result.msg)) {
|
||||
await tryReLogin();
|
||||
}
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `API 检查失败: ${e.message || e}`, "SCHEDULER");
|
||||
}
|
||||
}
|
||||
|
||||
function isSessionExpiredMsg(msg: string | undefined): boolean {
|
||||
if (!msg) return false;
|
||||
const keywords = ["session", "expired", "unauthorized", "登录", "过期", "失效", "超时"];
|
||||
const lower = msg.toLowerCase();
|
||||
return keywords.some((k) => lower.includes(k));
|
||||
}
|
||||
|
||||
async function tryReLogin(): Promise<void> {
|
||||
if (!username.value || !password.value) {
|
||||
addLog("WARN", "无法自动重登录：缺少凭据", "SESSION");
|
||||
return;
|
||||
}
|
||||
addLog("INFO", "会话可能已过期，正在自动重新登录...", "SESSION");
|
||||
const ok = await apiLogin();
|
||||
if (ok) {
|
||||
addLog("INFO", "自动重新登录成功，继续检查", "SESSION");
|
||||
await apiCheckStatus(true);
|
||||
} else {
|
||||
addLog("ERROR", "自动重新登录失败，请手动重新登录", "SESSION");
|
||||
message.value = "会话已过期且自动重登录失败，请手动操作";
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 网络检测 =====
|
||||
async function checkNetworkStatus() {
|
||||
isLoading.value = true;
|
||||
let isConnected = false;
|
||||
let apiReachable = false;
|
||||
let responseTime: number | null = null;
|
||||
|
||||
try {
|
||||
const resp = await fetch("https://www.baidu.com", {
|
||||
method: "GET",
|
||||
connectTimeout: config.value.network_timeout * 1000,
|
||||
});
|
||||
isConnected = resp.ok;
|
||||
} catch {
|
||||
/* 网络不通 */
|
||||
}
|
||||
|
||||
if (isConnected) {
|
||||
try {
|
||||
const apiStart = Date.now();
|
||||
const resp = await fetch(LOGIN_URL, {
|
||||
method: "HEAD",
|
||||
connectTimeout: config.value.network_timeout * 1000,
|
||||
});
|
||||
responseTime = Date.now() - apiStart;
|
||||
apiReachable = resp.status < 500;
|
||||
} catch {
|
||||
/* API 不可达 */
|
||||
}
|
||||
}
|
||||
|
||||
networkStatus.value = {
|
||||
is_connected: isConnected,
|
||||
api_reachable: apiReachable,
|
||||
response_time: responseTime,
|
||||
last_check: formatTime(new Date()),
|
||||
};
|
||||
addLog("INFO", `网络检查完成 - 连接: ${isConnected}, API可达: ${apiReachable}`, "NETWORK");
|
||||
message.value = "网络状态检查完成";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
// ===== 凭据存储 =====
|
||||
function loadCredentials() {
|
||||
try {
|
||||
const saved = localStorage.getItem("crm_credentials");
|
||||
if (saved) {
|
||||
const data = JSON.parse(saved);
|
||||
username.value = data.username || "";
|
||||
password.value = data.password || "";
|
||||
rememberPassword.value = data.remember || false;
|
||||
addLog("INFO", "已加载保存的凭据", "CONFIG");
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `加载凭据失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
}
|
||||
|
||||
function saveCredentials() {
|
||||
try {
|
||||
if (rememberPassword.value) {
|
||||
localStorage.setItem(
|
||||
"crm_credentials",
|
||||
JSON.stringify({ username: username.value, password: password.value, remember: true })
|
||||
);
|
||||
addLog("INFO", "凭据已保存到本地", "CONFIG");
|
||||
} else {
|
||||
localStorage.removeItem("crm_credentials");
|
||||
addLog("INFO", "已清除本地凭据", "CONFIG");
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `保存凭据失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
}
|
||||
|
||||
function loadConfig() {
|
||||
try {
|
||||
const saved = localStorage.getItem("crm_config");
|
||||
if (saved) {
|
||||
const data = JSON.parse(saved);
|
||||
config.value = { ...config.value, ...data };
|
||||
addLog("INFO", "已加载保存的配置", "CONFIG");
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `加载配置失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
}
|
||||
|
||||
function saveConfigToStorage() {
|
||||
try {
|
||||
localStorage.setItem("crm_config", JSON.stringify(config.value));
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
if (!username.value.trim() || !password.value.trim()) {
|
||||
message.value = "请输入用户名和密码";
|
||||
return;
|
||||
}
|
||||
saveCredentials();
|
||||
message.value = "设置保存成功";
|
||||
addLog("INFO", "用户凭据已保存", "CONFIG");
|
||||
}
|
||||
|
||||
function exportLogs() {
|
||||
if (logs.value.length === 0) {
|
||||
message.value = "暂无日志可导出";
|
||||
return;
|
||||
}
|
||||
const lines = logs.value.map(
|
||||
(l) => `[${l.timestamp}] [${l.level}] [${l.category}] ${l.message}`
|
||||
);
|
||||
const blob = new Blob([lines.join("\n")], { type: "text/plain;charset=utf-8" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `monitor-logs-${formatTime(new Date()).replaceAll(/[: ]/g, "-")}.txt`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
addLog("INFO", `已导出 ${logs.value.length} 条日志`, "SYSTEM");
|
||||
message.value = "日志导出成功";
|
||||
}
|
||||
|
||||
// ===== 监控控制 =====
|
||||
async function startMonitoring() {
|
||||
if (!username.value.trim() || !password.value.trim()) {
|
||||
message.value = "请先设置用户名和密码";
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
const ok = await apiLogin();
|
||||
if (!ok) {
|
||||
message.value = "登录失败，无法开始监控";
|
||||
isLoading.value = false;
|
||||
return;
|
||||
}
|
||||
isMonitoring.value = true;
|
||||
await apiCheckStatus();
|
||||
monitorTimer = setInterval(() => apiCheckStatus(), config.value.check_interval * 1000);
|
||||
addLog("INFO", "监控已启动", "MONITOR");
|
||||
message.value = `监控已开始，欢迎 ${userName}！`;
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
function stopMonitoring() {
|
||||
if (monitorTimer) { clearInterval(monitorTimer); monitorTimer = null; }
|
||||
if (postponeTimer) { clearTimeout(postponeTimer); postponeTimer = null; }
|
||||
isPostponed.value = false;
|
||||
isMonitoring.value = false;
|
||||
isLoggedIn.value = false;
|
||||
sessionId = "";
|
||||
userGid = "";
|
||||
addLog("INFO", "监控已停止", "MONITOR");
|
||||
message.value = "监控已停止";
|
||||
}
|
||||
|
||||
function postponeMonitoring() {
|
||||
if (!isMonitoring.value) return;
|
||||
if (monitorTimer) { clearInterval(monitorTimer); monitorTimer = null; }
|
||||
if (postponeTimer) { clearTimeout(postponeTimer); }
|
||||
isPostponed.value = true;
|
||||
addLog("INFO", "监控已推迟1小时", "MONITOR");
|
||||
message.value = "监控已推迟1小时，将在1小时后自动恢复";
|
||||
postponeTimer = setTimeout(() => {
|
||||
isPostponed.value = false;
|
||||
postponeTimer = null;
|
||||
apiCheckStatus();
|
||||
monitorTimer = setInterval(() => apiCheckStatus(), config.value.check_interval * 1000);
|
||||
addLog("INFO", "推迟结束，监控已自动恢复", "MONITOR");
|
||||
message.value = "推迟结束，监控已自动恢复";
|
||||
}, 60 * 60 * 1000);
|
||||
}
|
||||
|
||||
async function manualCheck() {
|
||||
if (!isLoggedIn.value) { message.value = "请先开始监控（登录）"; return; }
|
||||
isLoading.value = true;
|
||||
await apiCheckStatus();
|
||||
message.value = "手动检查完成";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
async function testNotification() {
|
||||
await notify("工单提醒（测试）", "待处理工单: 3，待关闭工单: 1，待确认工单: 2");
|
||||
}
|
||||
|
||||
// ===== 配置更新 =====
|
||||
async function updateConfig() {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
if (config.value.auto_start) await enableAutostart();
|
||||
else await disableAutostart();
|
||||
autoStartEnabled.value = config.value.auto_start;
|
||||
addLog("INFO", `自启动设置: ${config.value.auto_start ? "启用" : "禁用"}`, "CONFIG");
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `自启动设置失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
if (isMonitoring.value && monitorTimer) {
|
||||
clearInterval(monitorTimer);
|
||||
monitorTimer = setInterval(() => apiCheckStatus(), config.value.check_interval * 1000);
|
||||
addLog("INFO", `检查间隔已更新为: ${config.value.check_interval}秒`, "CONFIG");
|
||||
}
|
||||
saveConfigToStorage();
|
||||
message.value = "配置更新成功";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
// ===== 系统托盘 =====
|
||||
async function setupTray() {
|
||||
try {
|
||||
const mainWindow = getCurrentWindow();
|
||||
const menu = await Menu.new({
|
||||
items: [
|
||||
await MenuItem.new({
|
||||
id: "show",
|
||||
text: "显示面板",
|
||||
action: async () => {
|
||||
await mainWindow.unminimize();
|
||||
await mainWindow.show();
|
||||
await mainWindow.setFocus();
|
||||
},
|
||||
}),
|
||||
await MenuItem.new({
|
||||
id: "quit",
|
||||
text: "退出",
|
||||
action: async () => { await mainWindow.destroy(); },
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
// 使用 Tauri 资源路径解析图标
|
||||
const iconPath = await resolveResource("icons/32x32.png");
|
||||
const icon = await Image.fromPath(iconPath);
|
||||
|
||||
await TrayIcon.new({
|
||||
icon,
|
||||
tooltip: APP_NAME,
|
||||
menu,
|
||||
menuOnLeftClick: false,
|
||||
action: async (event) => {
|
||||
if (event.type === "Click" && event.button === "Left") {
|
||||
await mainWindow.unminimize();
|
||||
await mainWindow.show();
|
||||
await mainWindow.setFocus();
|
||||
}
|
||||
},
|
||||
});
|
||||
addLog("INFO", "系统托盘创建成功", "SYSTEM");
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `系统托盘创建失败: ${e.message || e}`, "SYSTEM");
|
||||
}
|
||||
}
|
||||
|
||||
async function minimizeToTray() {
|
||||
try {
|
||||
await getCurrentWindow().hide();
|
||||
} catch (e: any) {
|
||||
message.value = `最小化失败: ${e}`;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 网络状态文本 =====
|
||||
function getNetworkStatusText() {
|
||||
if (!networkStatus.value.is_connected) return "网络断开";
|
||||
if (!networkStatus.value.api_reachable) return "API不可达";
|
||||
return "网络正常";
|
||||
}
|
||||
|
||||
// ===== 生命周期 =====
|
||||
onMounted(async () => {
|
||||
loadConfig();
|
||||
loadCredentials();
|
||||
await setupTray();
|
||||
try {
|
||||
autoStartEnabled.value = await isAutostartEnabled();
|
||||
config.value.auto_start = autoStartEnabled.value;
|
||||
} catch { /* ignore */ }
|
||||
unlistenNotification = await listen<string>("notification-action", (event) => {
|
||||
if (event.payload === "postpone_1h") postponeMonitoring();
|
||||
});
|
||||
addLog("INFO", "应用程序启动完成", "SYSTEM");
|
||||
checkNetworkStatus();
|
||||
|
||||
if (config.value.auto_monitor && rememberPassword.value && username.value && password.value) {
|
||||
addLog("INFO", "自动登录并开始监控...", "SYSTEM");
|
||||
await startMonitoring();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (monitorTimer) clearInterval(monitorTimer);
|
||||
if (postponeTimer) clearTimeout(postponeTimer);
|
||||
unlistenNotification?.();
|
||||
});
|
||||
|
||||
return {
|
||||
// 状态
|
||||
username, password, rememberPassword, message, isLoading,
|
||||
isLoggedIn, isMonitoring, isPostponed, autoStartEnabled,
|
||||
logs, networkStatus, config, ticketCounts,
|
||||
// 方法
|
||||
addLog, clearLogs, clearMessage, saveSettings, exportLogs,
|
||||
startMonitoring, stopMonitoring, manualCheck,
|
||||
testNotification, checkNetworkStatus, updateConfig,
|
||||
minimizeToTray, getNetworkStatusText,
|
||||
};
|
||||
}
|
||||
+4
-1
@@ -1,4 +1,7 @@
|
||||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import Antd from "ant-design-vue";
|
||||
import "ant-design-vue/dist/reset.css";
|
||||
import App from "./App.vue";
|
||||
|
||||
createApp(App).mount("#app");
|
||||
createApp(App).use(createPinia()).use(Antd).mount("#app");
|
||||
|
||||
@@ -0,0 +1,613 @@
|
||||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { TrayIcon } from "@tauri-apps/api/tray";
|
||||
import { Image } from "@tauri-apps/api/image";
|
||||
import { Menu, MenuItem } from "@tauri-apps/api/menu";
|
||||
import { fetch } from "@tauri-apps/plugin-http";
|
||||
import {
|
||||
isPermissionGranted,
|
||||
requestPermission,
|
||||
} from "@tauri-apps/plugin-notification";
|
||||
import {
|
||||
enable as enableAutostart,
|
||||
disable as disableAutostart,
|
||||
isEnabled as isAutostartEnabled,
|
||||
} from "@tauri-apps/plugin-autostart";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
||||
import { resolveResource } from "@tauri-apps/api/path";
|
||||
|
||||
export const APP_NAME = "工单系统监测";
|
||||
const API_BASE = "https://crm.yunvip123.com/api";
|
||||
const LOGIN_URL = `${API_BASE}/SystemUser/Login`;
|
||||
const CHECK_URL = `${API_BASE}/DemandManage/QueryIndexCount`;
|
||||
|
||||
export interface LogEntry {
|
||||
timestamp: string;
|
||||
level: string;
|
||||
message: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
export interface TicketCounts {
|
||||
pending: number;
|
||||
stayclose: number;
|
||||
confirm: number;
|
||||
lastCheck: string;
|
||||
}
|
||||
|
||||
export const useMonitorStore = defineStore("monitor", () => {
|
||||
// ===== 响应式数据 =====
|
||||
const username = ref("");
|
||||
const password = ref("");
|
||||
const rememberPassword = ref(false);
|
||||
const loginMode = ref<"password" | "token">("password");
|
||||
const tokenSessionId = ref("");
|
||||
const message = ref("");
|
||||
const isLoading = ref(false);
|
||||
const isLoggedIn = ref(false);
|
||||
const isMonitoring = ref(false);
|
||||
const isPostponed = ref(false);
|
||||
const autoStartEnabled = ref(false);
|
||||
const logs = ref<LogEntry[]>([]);
|
||||
const ticketCounts = ref<TicketCounts>({
|
||||
pending: 0, stayclose: 0, confirm: 0, lastCheck: "",
|
||||
});
|
||||
const networkStatus = ref({
|
||||
is_connected: false,
|
||||
api_reachable: false,
|
||||
response_time: null as number | null,
|
||||
last_check: "",
|
||||
});
|
||||
const config = ref({
|
||||
check_interval: 60,
|
||||
auto_start: false,
|
||||
auto_monitor: false,
|
||||
show_notifications: true,
|
||||
notification_sound: true,
|
||||
network_timeout: 30,
|
||||
close_action: "ask" as "ask" | "minimize" | "close",
|
||||
});
|
||||
const showCloseDialog = ref(false);
|
||||
|
||||
// ===== 内部状态 =====
|
||||
let sessionId = "";
|
||||
let userGid = "";
|
||||
let userName = "";
|
||||
let monitorTimer: ReturnType<typeof setInterval> | null = null;
|
||||
let postponeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let unlistenNotification: UnlistenFn | null = null;
|
||||
let unlistenClose: UnlistenFn | null = null;
|
||||
|
||||
// ===== 工具函数 =====
|
||||
function formatTime(date: Date): string {
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function addLog(level: string, msg: string, category: string) {
|
||||
logs.value.push({ timestamp: formatTime(new Date()), level, message: msg, category });
|
||||
if (logs.value.length > 1000) logs.value.shift();
|
||||
}
|
||||
|
||||
function clearLogs() {
|
||||
logs.value = [];
|
||||
message.value = "日志已清除";
|
||||
}
|
||||
|
||||
function clearMessage() {
|
||||
message.value = "";
|
||||
}
|
||||
|
||||
// ===== 通知声音 =====
|
||||
function playNotificationSound() {
|
||||
if (!config.value.notification_sound) return;
|
||||
try {
|
||||
const ctx = new AudioContext();
|
||||
const oscillator = ctx.createOscillator();
|
||||
const gain = ctx.createGain();
|
||||
oscillator.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
oscillator.frequency.setValueAtTime(880, ctx.currentTime);
|
||||
oscillator.frequency.setValueAtTime(660, ctx.currentTime + 0.15);
|
||||
gain.gain.setValueAtTime(0.3, ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4);
|
||||
oscillator.start(ctx.currentTime);
|
||||
oscillator.stop(ctx.currentTime + 0.4);
|
||||
} catch { /* 静默失败 */ }
|
||||
}
|
||||
|
||||
// ===== 通知 =====
|
||||
async function notify(title: string, body: string) {
|
||||
if (!config.value.show_notifications) return;
|
||||
let granted = await isPermissionGranted();
|
||||
if (!granted) {
|
||||
const permission = await requestPermission();
|
||||
granted = permission === "granted";
|
||||
}
|
||||
if (granted) {
|
||||
try {
|
||||
await invoke("send_clickable_notification", { title, body });
|
||||
playNotificationSound();
|
||||
addLog("INFO", `通知: ${title} - ${body}`, "NOTIFICATION");
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `发送通知失败: ${e}`, "NOTIFICATION");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== API =====
|
||||
async function apiLogin(): Promise<boolean> {
|
||||
try {
|
||||
const body = JSON.stringify({ Account: username.value, PassWord: password.value });
|
||||
const resp = await fetch(LOGIN_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Content-Length": String(new TextEncoder().encode(body).length),
|
||||
Host: "crm.yunvip123.com",
|
||||
"Cache-Control": "no-cache",
|
||||
Cookie: "",
|
||||
},
|
||||
body,
|
||||
credentials: "omit",
|
||||
});
|
||||
|
||||
const setCookie = resp.headers.get("set-cookie") || "";
|
||||
const match = setCookie.match(/ASP\.NET_SessionId=([^;]+)/);
|
||||
if (match) sessionId = match[1];
|
||||
addLog("DEBUG", `SessionId: ${sessionId || "(未提取)"}`, "LOGIN");
|
||||
|
||||
const data = await resp.json();
|
||||
if (data.success && data.data) {
|
||||
userGid = data.data.GID;
|
||||
userName = data.data.SU_UserName || "用户";
|
||||
if (!sessionId) {
|
||||
addLog("WARN", "未能从响应头提取SessionId", "LOGIN");
|
||||
}
|
||||
isLoggedIn.value = true;
|
||||
addLog("INFO", `登录成功，用户: ${userName}, GID: ${userGid}`, "LOGIN");
|
||||
return true;
|
||||
} else {
|
||||
addLog("ERROR", `登录失败: ${data.msg}`, "LOGIN");
|
||||
return false;
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `登录请求失败: ${e.message || e}`, "LOGIN");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function apiCheckStatus(isRetry = false): Promise<void> {
|
||||
if (!userGid && loginMode.value === "password") {
|
||||
addLog("WARN", "会话已失效，尝试重新登录", "SCHEDULER");
|
||||
if (!isRetry) await tryReLogin();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const body: Record<string, string> = {};
|
||||
if (userGid) body.UserGID = userGid;
|
||||
const resp = await fetch(CHECK_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Cookie: `ASP.NET_SessionId=${sessionId}`,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (result.success && result.data) {
|
||||
const d = result.data;
|
||||
const pending = d.PendingCount || 0;
|
||||
const stayclose = d.StaycloseCount || 0;
|
||||
const confirm = d.ConfirmCount || 0;
|
||||
ticketCounts.value = {
|
||||
pending, stayclose, confirm,
|
||||
lastCheck: formatTime(new Date()),
|
||||
};
|
||||
addLog("INFO", `检查完成 - 待处理: ${pending}, 待关闭: ${stayclose}, 待确认: ${confirm}`, "SCHEDULER");
|
||||
if (pending > 0 || stayclose > 0 || confirm > 0) {
|
||||
const msgs: string[] = [];
|
||||
if (pending > 0) msgs.push(`待处理工单: ${pending}`);
|
||||
if (stayclose > 0) msgs.push(`待关闭工单: ${stayclose}`);
|
||||
if (confirm > 0) msgs.push(`待确认工单: ${confirm}`);
|
||||
await notify("工单提醒", msgs.join("，"));
|
||||
}
|
||||
} else {
|
||||
addLog("WARN", `API 返回异常: ${result.msg}`, "SCHEDULER");
|
||||
if (!isRetry && isSessionExpiredMsg(result.msg)) {
|
||||
await tryReLogin();
|
||||
}
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `API 检查失败: ${e.message || e}`, "SCHEDULER");
|
||||
}
|
||||
}
|
||||
|
||||
function isSessionExpiredMsg(msg: string | undefined): boolean {
|
||||
if (!msg) return false;
|
||||
const keywords = ["session", "expired", "unauthorized", "登录", "过期", "失效", "超时"];
|
||||
const lower = msg.toLowerCase();
|
||||
return keywords.some((k) => lower.includes(k));
|
||||
}
|
||||
|
||||
async function tryReLogin(): Promise<void> {
|
||||
if (loginMode.value === "token") {
|
||||
addLog("WARN", "Token 模式下无法自动重登录，请更换新的 Token", "SESSION");
|
||||
message.value = "Token 可能已过期，请更换新的 Token";
|
||||
return;
|
||||
}
|
||||
if (!username.value || !password.value) {
|
||||
addLog("WARN", "无法自动重登录：缺少凭据", "SESSION");
|
||||
return;
|
||||
}
|
||||
addLog("INFO", "会话可能已过期，正在自动重新登录...", "SESSION");
|
||||
const ok = await apiLogin();
|
||||
if (ok) {
|
||||
addLog("INFO", "自动重新登录成功，继续检查", "SESSION");
|
||||
await apiCheckStatus(true);
|
||||
} else {
|
||||
addLog("ERROR", "自动重新登录失败，请手动重新登录", "SESSION");
|
||||
message.value = "会话已过期且自动重登录失败，请手动操作";
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 网络检测 =====
|
||||
async function checkNetworkStatus() {
|
||||
isLoading.value = true;
|
||||
let isConnected = false;
|
||||
let apiReachable = false;
|
||||
let responseTime: number | null = null;
|
||||
|
||||
try {
|
||||
const resp = await fetch("https://www.baidu.com", {
|
||||
method: "GET",
|
||||
connectTimeout: config.value.network_timeout * 1000,
|
||||
});
|
||||
isConnected = resp.ok;
|
||||
} catch {
|
||||
/* 网络不通 */
|
||||
}
|
||||
|
||||
if (isConnected) {
|
||||
try {
|
||||
const apiStart = Date.now();
|
||||
const resp = await fetch(LOGIN_URL, {
|
||||
method: "HEAD",
|
||||
connectTimeout: config.value.network_timeout * 1000,
|
||||
});
|
||||
responseTime = Date.now() - apiStart;
|
||||
apiReachable = resp.status < 500;
|
||||
} catch {
|
||||
/* API 不可达 */
|
||||
}
|
||||
}
|
||||
|
||||
networkStatus.value = {
|
||||
is_connected: isConnected,
|
||||
api_reachable: apiReachable,
|
||||
response_time: responseTime,
|
||||
last_check: formatTime(new Date()),
|
||||
};
|
||||
addLog("INFO", `网络检查完成 - 连接: ${isConnected}, API可达: ${apiReachable}`, "NETWORK");
|
||||
message.value = "网络状态检查完成";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
// ===== 凭据存储 =====
|
||||
function loadCredentials() {
|
||||
try {
|
||||
const saved = localStorage.getItem("crm_credentials");
|
||||
if (saved) {
|
||||
const data = JSON.parse(saved);
|
||||
username.value = data.username || "";
|
||||
password.value = data.password || "";
|
||||
rememberPassword.value = data.remember || false;
|
||||
loginMode.value = data.loginMode || "password";
|
||||
tokenSessionId.value = data.tokenSessionId || "";
|
||||
addLog("INFO", "已加载保存的凭据", "CONFIG");
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `加载凭据失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
}
|
||||
|
||||
function saveCredentials() {
|
||||
try {
|
||||
if (rememberPassword.value) {
|
||||
localStorage.setItem(
|
||||
"crm_credentials",
|
||||
JSON.stringify({
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
remember: true,
|
||||
loginMode: loginMode.value,
|
||||
tokenSessionId: tokenSessionId.value,
|
||||
})
|
||||
);
|
||||
addLog("INFO", "凭据已保存到本地", "CONFIG");
|
||||
} else {
|
||||
localStorage.removeItem("crm_credentials");
|
||||
addLog("INFO", "已清除本地凭据", "CONFIG");
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `保存凭据失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
}
|
||||
|
||||
function loadConfig() {
|
||||
try {
|
||||
const saved = localStorage.getItem("crm_config");
|
||||
if (saved) {
|
||||
const data = JSON.parse(saved);
|
||||
config.value = { ...config.value, ...data };
|
||||
addLog("INFO", "已加载保存的配置", "CONFIG");
|
||||
}
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `加载配置失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
}
|
||||
|
||||
function saveConfigToStorage() {
|
||||
try {
|
||||
localStorage.setItem("crm_config", JSON.stringify(config.value));
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
if (loginMode.value === "password") {
|
||||
if (!username.value.trim() || !password.value.trim()) {
|
||||
message.value = "请输入用户名和密码";
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!tokenSessionId.value.trim()) {
|
||||
message.value = "请输入 Token (ASP.NET_SessionId)";
|
||||
return;
|
||||
}
|
||||
}
|
||||
saveCredentials();
|
||||
message.value = "设置保存成功";
|
||||
addLog("INFO", "用户凭据已保存", "CONFIG");
|
||||
}
|
||||
|
||||
function exportLogs() {
|
||||
if (logs.value.length === 0) {
|
||||
message.value = "暂无日志可导出";
|
||||
return;
|
||||
}
|
||||
const lines = logs.value.map(
|
||||
(l) => `[${l.timestamp}] [${l.level}] [${l.category}] ${l.message}`
|
||||
);
|
||||
const blob = new Blob([lines.join("\n")], { type: "text/plain;charset=utf-8" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `monitor-logs-${formatTime(new Date()).replaceAll(/[: ]/g, "-")}.txt`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
addLog("INFO", `已导出 ${logs.value.length} 条日志`, "SYSTEM");
|
||||
message.value = "日志导出成功";
|
||||
}
|
||||
|
||||
// ===== 监控控制 =====
|
||||
async function startMonitoring() {
|
||||
if (loginMode.value === "password") {
|
||||
if (!username.value.trim() || !password.value.trim()) {
|
||||
message.value = "请先设置用户名和密码";
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
const ok = await apiLogin();
|
||||
if (!ok) {
|
||||
message.value = "登录失败，无法开始监控";
|
||||
isLoading.value = false;
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!tokenSessionId.value.trim()) {
|
||||
message.value = "请先输入 Token (ASP.NET_SessionId)";
|
||||
return;
|
||||
}
|
||||
isLoading.value = true;
|
||||
sessionId = tokenSessionId.value.trim();
|
||||
isLoggedIn.value = true;
|
||||
addLog("INFO", `使用 Token 登录，SessionId: ${sessionId.substring(0, 8)}...`, "LOGIN");
|
||||
}
|
||||
isMonitoring.value = true;
|
||||
await apiCheckStatus();
|
||||
monitorTimer = setInterval(() => apiCheckStatus(), config.value.check_interval * 1000);
|
||||
addLog("INFO", "监控已启动", "MONITOR");
|
||||
message.value = loginMode.value === "password"
|
||||
? `监控已开始，欢迎 ${userName}！`
|
||||
: "监控已开始（Token 登录）";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
function stopMonitoring() {
|
||||
if (monitorTimer) { clearInterval(monitorTimer); monitorTimer = null; }
|
||||
if (postponeTimer) { clearTimeout(postponeTimer); postponeTimer = null; }
|
||||
isPostponed.value = false;
|
||||
isMonitoring.value = false;
|
||||
isLoggedIn.value = false;
|
||||
sessionId = "";
|
||||
userGid = "";
|
||||
addLog("INFO", "监控已停止", "MONITOR");
|
||||
message.value = "监控已停止";
|
||||
}
|
||||
|
||||
function postponeMonitoring() {
|
||||
if (!isMonitoring.value) return;
|
||||
if (monitorTimer) { clearInterval(monitorTimer); monitorTimer = null; }
|
||||
if (postponeTimer) { clearTimeout(postponeTimer); }
|
||||
isPostponed.value = true;
|
||||
addLog("INFO", "监控已推迟1小时", "MONITOR");
|
||||
message.value = "监控已推迟1小时，将在1小时后自动恢复";
|
||||
postponeTimer = setTimeout(() => {
|
||||
isPostponed.value = false;
|
||||
postponeTimer = null;
|
||||
apiCheckStatus();
|
||||
monitorTimer = setInterval(() => apiCheckStatus(), config.value.check_interval * 1000);
|
||||
addLog("INFO", "推迟结束，监控已自动恢复", "MONITOR");
|
||||
message.value = "推迟结束，监控已自动恢复";
|
||||
}, 60 * 60 * 1000);
|
||||
}
|
||||
|
||||
async function manualCheck() {
|
||||
if (!isLoggedIn.value) { message.value = "请先开始监控（登录）"; return; }
|
||||
isLoading.value = true;
|
||||
await apiCheckStatus();
|
||||
message.value = "手动检查完成";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
async function testNotification() {
|
||||
await notify("工单提醒（测试）", "待处理工单: 3，待关闭工单: 1，待确认工单: 2");
|
||||
}
|
||||
|
||||
// ===== 配置更新 =====
|
||||
async function updateConfig() {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
if (config.value.auto_start) await enableAutostart();
|
||||
else await disableAutostart();
|
||||
autoStartEnabled.value = config.value.auto_start;
|
||||
addLog("INFO", `自启动设置: ${config.value.auto_start ? "启用" : "禁用"}`, "CONFIG");
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `自启动设置失败: ${e.message || e}`, "CONFIG");
|
||||
}
|
||||
if (isMonitoring.value && monitorTimer) {
|
||||
clearInterval(monitorTimer);
|
||||
monitorTimer = setInterval(() => apiCheckStatus(), config.value.check_interval * 1000);
|
||||
addLog("INFO", `检查间隔已更新为: ${config.value.check_interval}秒`, "CONFIG");
|
||||
}
|
||||
saveConfigToStorage();
|
||||
message.value = "配置更新成功";
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
// ===== 系统托盘 =====
|
||||
async function setupTray() {
|
||||
try {
|
||||
const mainWindow = getCurrentWindow();
|
||||
const menu = await Menu.new({
|
||||
items: [
|
||||
await MenuItem.new({
|
||||
id: "show",
|
||||
text: "显示面板",
|
||||
action: async () => {
|
||||
await mainWindow.unminimize();
|
||||
await mainWindow.show();
|
||||
await mainWindow.setFocus();
|
||||
},
|
||||
}),
|
||||
await MenuItem.new({
|
||||
id: "quit",
|
||||
text: "退出",
|
||||
action: async () => { await mainWindow.destroy(); },
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
const iconPath = await resolveResource("icons/32x32.png");
|
||||
const icon = await Image.fromPath(iconPath);
|
||||
|
||||
await TrayIcon.new({
|
||||
icon,
|
||||
tooltip: APP_NAME,
|
||||
menu,
|
||||
menuOnLeftClick: false,
|
||||
action: async (event) => {
|
||||
if (event.type === "Click" && event.button === "Left") {
|
||||
await mainWindow.unminimize();
|
||||
await mainWindow.show();
|
||||
await mainWindow.setFocus();
|
||||
}
|
||||
},
|
||||
});
|
||||
addLog("INFO", "系统托盘创建成功", "SYSTEM");
|
||||
} catch (e: any) {
|
||||
addLog("ERROR", `系统托盘创建失败: ${e.message || e}`, "SYSTEM");
|
||||
}
|
||||
}
|
||||
|
||||
async function minimizeToTray() {
|
||||
try {
|
||||
await getCurrentWindow().hide();
|
||||
} catch (e: any) {
|
||||
message.value = `最小化失败: ${e}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCloseAction(action: "minimize" | "close", remember: boolean) {
|
||||
showCloseDialog.value = false;
|
||||
if (remember) {
|
||||
config.value.close_action = action;
|
||||
saveConfigToStorage();
|
||||
addLog("INFO", `关闭行为已设为: ${action === "minimize" ? "最小化到托盘" : "直接退出"}`, "SYSTEM");
|
||||
}
|
||||
if (action === "minimize") {
|
||||
await getCurrentWindow().hide();
|
||||
} else {
|
||||
await getCurrentWindow().destroy();
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 生命周期（由 App.vue 调用）=====
|
||||
async function initialize() {
|
||||
loadConfig();
|
||||
loadCredentials();
|
||||
await setupTray();
|
||||
try {
|
||||
autoStartEnabled.value = await isAutostartEnabled();
|
||||
config.value.auto_start = autoStartEnabled.value;
|
||||
} catch { /* ignore */ }
|
||||
unlistenNotification = await listen<string>("notification-action", (event) => {
|
||||
if (event.payload === "postpone_1h") postponeMonitoring();
|
||||
});
|
||||
unlistenClose = await listen<void>("close-requested", async () => {
|
||||
const action = config.value.close_action;
|
||||
if (action === "minimize") {
|
||||
await getCurrentWindow().hide();
|
||||
} else if (action === "close") {
|
||||
await getCurrentWindow().destroy();
|
||||
} else {
|
||||
showCloseDialog.value = true;
|
||||
}
|
||||
});
|
||||
addLog("INFO", "应用程序启动完成", "SYSTEM");
|
||||
checkNetworkStatus();
|
||||
|
||||
if (config.value.auto_monitor && rememberPassword.value) {
|
||||
const canAutoStart = loginMode.value === "token"
|
||||
? !!tokenSessionId.value
|
||||
: !!(username.value && password.value);
|
||||
if (canAutoStart) {
|
||||
addLog("INFO", "自动登录并开始监控...", "SYSTEM");
|
||||
await startMonitoring();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
if (monitorTimer) clearInterval(monitorTimer);
|
||||
if (postponeTimer) clearTimeout(postponeTimer);
|
||||
unlistenNotification?.();
|
||||
unlistenClose?.();
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
username, password, rememberPassword, loginMode, tokenSessionId,
|
||||
message, isLoading,
|
||||
isLoggedIn, isMonitoring, isPostponed, autoStartEnabled,
|
||||
logs, networkStatus, config, ticketCounts,
|
||||
showCloseDialog,
|
||||
// 方法
|
||||
initialize, cleanup,
|
||||
addLog, clearLogs, clearMessage, saveSettings, exportLogs,
|
||||
startMonitoring, stopMonitoring, manualCheck,
|
||||
testNotification, checkNetworkStatus, updateConfig,
|
||||
minimizeToTray, handleCloseAction,
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user