监控、OSD
This commit is contained in:
zhongluofeng
@@ -0,0 +1,775 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||
import { listen, emit, type UnlistenFn } from '@tauri-apps/api/event'
|
||||
import { getCurrentWindow } from '@tauri-apps/api/window'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
|
||||
// ===== 数据契约（与主窗口 MonitorModule 共享，此处独立声明避免循环依赖） =====
|
||||
interface OsdItem {
|
||||
key: string
|
||||
groupId: string
|
||||
sensorName: string
|
||||
hardwareName: string
|
||||
type: string
|
||||
unit: string
|
||||
special?: 'net-up' | 'net-down'
|
||||
}
|
||||
|
||||
interface ColorTheme {
|
||||
hardware: Record<string, string>
|
||||
sensor: Record<string, string>
|
||||
}
|
||||
|
||||
/** 警告色配置：阈值百分比 + 警告/严重颜色 */
|
||||
interface AlertConfig {
|
||||
/** 警告色开关 */
|
||||
enabled: boolean
|
||||
/** 警告阈值百分比（达到即变警告色，如 80） */
|
||||
warnThreshold: number
|
||||
/** 严重阈值百分比（达到即变严重色，如 90） */
|
||||
criticalThreshold: number
|
||||
/** 警告色（淡红，hex） */
|
||||
warnColor: string
|
||||
/** 严重色（大红，hex） */
|
||||
criticalColor: string
|
||||
/** 各硬件类型的最大值（用于将温度等非百分比值转为百分比）
|
||||
* CPU 温度墙默认 100，GPU 默认 85 */
|
||||
maxValues: Record<string, number>
|
||||
}
|
||||
|
||||
interface OsdConfig {
|
||||
overlayEnabled: boolean
|
||||
overlayItems: OsdItem[]
|
||||
positionXPct: number
|
||||
positionYPct: number
|
||||
overlayOpacity: number
|
||||
fontSize: number
|
||||
showUnit: boolean
|
||||
showLabel: boolean
|
||||
labelLanguage: 'zh' | 'en'
|
||||
/** 布局：'single' 单行分组式（组间用 | 分隔，固定宽度），
|
||||
* 'group' 分组横排（标题在上+数据列在下），'multiline' 多行（每组一行，左对齐，类小飞机） */
|
||||
layout: 'single' | 'group' | 'multiline'
|
||||
updateIntervalMs: number
|
||||
/** 鼠标穿透：true 时窗口不接收鼠标事件（需关闭穿透才能拖动） */
|
||||
clickThrough: boolean
|
||||
/** 默认文字颜色（hex），颜色主题关闭时使用 */
|
||||
fontColor: string
|
||||
/** 字体不透明度 0-100（独立于悬浮窗透明度） */
|
||||
fontOpacity: number
|
||||
/** 悬浮窗背景色（CSS 颜色字符串，如 rgba(0,0,0,0.55)） */
|
||||
bgColor: string
|
||||
/** 启用颜色主题（按硬件/传感器类型着色） */
|
||||
colorThemeEnabled: boolean
|
||||
/** 颜色主题配置 */
|
||||
colorTheme: ColorTheme
|
||||
/** 字体描边开关（默认关闭） */
|
||||
fontStrokeEnabled: boolean
|
||||
/** 字体描边厚度（px，默认 1） */
|
||||
fontStrokeWidth: number
|
||||
/** 字体描边颜色（hex，默认 #000000） */
|
||||
fontStrokeColor: string
|
||||
/** 警告色配置 */
|
||||
alert: AlertConfig
|
||||
/** 悬浮窗窗口保存位置（null=使用百分比计算默认位置） */
|
||||
overlayX?: number | null
|
||||
overlayY?: number | null
|
||||
}
|
||||
|
||||
interface SensorEntry {
|
||||
name: string
|
||||
type: string
|
||||
hardwareName: string
|
||||
value: number | null
|
||||
unit: string
|
||||
}
|
||||
|
||||
interface SensorGroup {
|
||||
id: string
|
||||
sensors: SensorEntry[]
|
||||
}
|
||||
|
||||
interface SensorSnapshot {
|
||||
groups: SensorGroup[]
|
||||
}
|
||||
|
||||
interface NetworkSpeed {
|
||||
downloadBps: number
|
||||
uploadBps: number
|
||||
}
|
||||
|
||||
interface OsdStatePayload {
|
||||
config: OsdConfig
|
||||
snapshot: SensorSnapshot | null
|
||||
networkSpeed: NetworkSpeed | null
|
||||
}
|
||||
|
||||
// ===== 默认颜色主题（小飞机风格） =====
|
||||
const DEFAULT_COLOR_THEME: ColorTheme = {
|
||||
hardware: {
|
||||
cpu: '#4A9EFF',
|
||||
gpuintel: '#9D4EFF',
|
||||
gpuamd: '#9D4EFF',
|
||||
gpunvidia: '#9D4EFF',
|
||||
memory: '#FF9F4A',
|
||||
storage: '#4AFF9F',
|
||||
motherboard: '#FFD700',
|
||||
superio: '#B0B0B0',
|
||||
embeddedcontroller: '#B0B0B0',
|
||||
battery: '#FF4A9F',
|
||||
network: '#4AFFFF',
|
||||
psu: '#FF4A4A',
|
||||
},
|
||||
sensor: {
|
||||
temperature: '#FF6B6B',
|
||||
load: '#4A9EFF',
|
||||
power: '#FFD700',
|
||||
voltage: '#9D4EFF',
|
||||
fan: '#B0B0B0',
|
||||
clock: '#4AFF9F',
|
||||
data: '#FF9F4A',
|
||||
smalldata: '#FF9F4A',
|
||||
throughput: '#4AFFFF',
|
||||
level: '#FF4A9F',
|
||||
control: '#FFA500',
|
||||
frequency: '#4AFF9F',
|
||||
factor: '#FF4A4A',
|
||||
timespan: '#B0B0B0',
|
||||
energy: '#FFD700',
|
||||
noise: '#B0B0B0',
|
||||
conductivity: '#4AFFFF',
|
||||
humidity: '#4A9EFF',
|
||||
flow: '#4AFFFF',
|
||||
},
|
||||
}
|
||||
|
||||
/** 默认警告色配置：CPU 温度墙 100°C，GPU 85°C；百分比类直接用值 */
|
||||
const DEFAULT_ALERT_CONFIG: AlertConfig = {
|
||||
enabled: false,
|
||||
warnThreshold: 80,
|
||||
criticalThreshold: 90,
|
||||
warnColor: '#FF6B6B',
|
||||
criticalColor: '#FF0000',
|
||||
maxValues: {
|
||||
cpu: 100,
|
||||
gpu: 85,
|
||||
gpuintel: 85,
|
||||
gpuamd: 85,
|
||||
gpunvidia: 85,
|
||||
},
|
||||
}
|
||||
|
||||
/** 计算某项的警告百分比（0-100）
|
||||
* 百分比类传感器（load/level）直接用值；温度等需除以该硬件类型的最大值 */
|
||||
function itemAlertPct(item: OsdItem, value: number): number {
|
||||
if (value == null || !isFinite(value)) return 0
|
||||
// 百分比类传感器直接用值
|
||||
if (item.type === 'load' || item.type === 'level') {
|
||||
return value
|
||||
}
|
||||
// 温度等需除以该硬件类型的最大值
|
||||
if (item.type === 'temperature') {
|
||||
const alert = config.value?.alert ?? DEFAULT_ALERT_CONFIG
|
||||
// GPU 系列合并查找
|
||||
let gkey = item.groupId
|
||||
if (gkey.startsWith('gpu')) gkey = 'gpu'
|
||||
const max = alert.maxValues[gkey] ?? alert.maxValues[item.groupId] ?? 100
|
||||
return (value / max) * 100
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
/** 获取项的警告色（若达到阈值），否则返回 null */
|
||||
function itemAlertColor(item: OsdItem): string | null {
|
||||
const alert = config.value?.alert
|
||||
if (!alert?.enabled) return null
|
||||
const value = getOsdItemValue(item)
|
||||
if (value == null || !isFinite(value)) return null
|
||||
const pct = itemAlertPct(item, value)
|
||||
if (pct >= alert.criticalThreshold) return alert.criticalColor
|
||||
if (pct >= alert.warnThreshold) return alert.warnColor
|
||||
return null
|
||||
}
|
||||
|
||||
// ===== 标签生成（根据 labelLanguage 返回中文通俗标题或英文传感器名） =====
|
||||
|
||||
/** 是否英文模式 */
|
||||
function isEn(): boolean {
|
||||
return config.value?.labelLanguage === 'en'
|
||||
}
|
||||
|
||||
// ===== 分组（group / multiline / single 布局用） =====
|
||||
|
||||
interface OsdGroup {
|
||||
/** 分组 key：cpu / gpu / memory / storage / network / ... */
|
||||
key: string
|
||||
/** 分组标题：CPU / GPU / 内存 / 网络 ... */
|
||||
label: string
|
||||
items: OsdItem[]
|
||||
}
|
||||
|
||||
/** 将显示项按硬件类型分组（GPU 系列合并为 gpu，网速特殊项归入 network） */
|
||||
function groupOsdItems(items: OsdItem[]): OsdGroup[] {
|
||||
const groups: OsdGroup[] = []
|
||||
const map = new Map<string, OsdGroup>()
|
||||
for (const item of items) {
|
||||
let gkey: string
|
||||
if (item.special === 'net-up' || item.special === 'net-down') {
|
||||
gkey = 'network'
|
||||
} else if (item.groupId.startsWith('gpu')) {
|
||||
gkey = 'gpu'
|
||||
} else {
|
||||
gkey = item.groupId
|
||||
}
|
||||
let g = map.get(gkey)
|
||||
if (!g) {
|
||||
g = { key: gkey, label: groupLabel(gkey), items: [] }
|
||||
map.set(gkey, g)
|
||||
groups.push(g)
|
||||
}
|
||||
g.items.push(item)
|
||||
}
|
||||
return groups
|
||||
}
|
||||
|
||||
/** 分组标题 */
|
||||
function groupLabel(gkey: string): string {
|
||||
if (isEn()) {
|
||||
switch (gkey) {
|
||||
case 'cpu': return 'CPU'
|
||||
case 'gpu': return 'GPU'
|
||||
case 'memory': return 'RAM'
|
||||
case 'storage': return 'DISK'
|
||||
case 'network': return 'NET'
|
||||
case 'motherboard': return 'MB'
|
||||
case 'battery': return 'BAT'
|
||||
case 'psu': return 'PSU'
|
||||
default: return gkey.toUpperCase().slice(0, 6)
|
||||
}
|
||||
}
|
||||
switch (gkey) {
|
||||
case 'cpu': return 'CPU'
|
||||
case 'gpu': return 'GPU'
|
||||
case 'memory': return '内存'
|
||||
case 'storage': return '存储'
|
||||
case 'network': return '网络'
|
||||
case 'motherboard': return '主板'
|
||||
case 'battery': return '电池'
|
||||
case 'psu': return '电源'
|
||||
default: return gkey
|
||||
}
|
||||
}
|
||||
|
||||
/** 网络方向箭头 */
|
||||
function netArrow(item: OsdItem): string {
|
||||
if (item.special === 'net-up') return '↑'
|
||||
if (item.special === 'net-down') return '↓'
|
||||
return ''
|
||||
}
|
||||
|
||||
// ===== 固定宽度格式化（group / multiline 布局用，避免数据变动导致宽度跳动） =====
|
||||
|
||||
/** 右对齐补空格到指定宽度 */
|
||||
function padNum(s: string, width: number): string {
|
||||
return s.length >= width ? s : ' '.repeat(width - s.length) + s
|
||||
}
|
||||
|
||||
/** 固定宽度数值（不含单位），按传感器类型决定小数位和宽度 */
|
||||
function fmtFixedValue(v: number | null, item: OsdItem): string {
|
||||
if (v == null || !isFinite(v)) return '--'
|
||||
if (item.special === 'net-up' || item.special === 'net-down') {
|
||||
// 分割显示的数值部分：6 字符宽度
|
||||
if (v >= 1_048_576) return padNum((v / 1_048_576).toFixed(2), 6)
|
||||
if (v >= 1024) return padNum((v / 1024).toFixed(1), 6)
|
||||
return padNum(v.toFixed(0), 6)
|
||||
}
|
||||
switch (item.type) {
|
||||
case 'load':
|
||||
case 'level':
|
||||
return padNum(Math.round(v).toString(), 3) // 0-100 → 3 字符
|
||||
case 'temperature':
|
||||
return padNum(Math.round(v).toString(), 3) // 0-150 → 3 字符
|
||||
case 'power':
|
||||
case 'voltage':
|
||||
return padNum(v.toFixed(2), 5) // 12.34 → 5 字符
|
||||
case 'clock':
|
||||
case 'frequency':
|
||||
return padNum(Math.round(v).toString(), 4) // 4500 → 4 字符
|
||||
case 'fan':
|
||||
return padNum(Math.round(v).toString(), 4) // 3500 → 4 字符
|
||||
case 'data':
|
||||
case 'smalldata':
|
||||
return padNum(v.toFixed(1), 5) // 1024.0 → 5 字符
|
||||
default:
|
||||
return padNum(v.toFixed(1), 5)
|
||||
}
|
||||
}
|
||||
|
||||
/** 固定宽度单位（网速分割显示时返回 4 字符单位） */
|
||||
function fmtFixedUnit(item: OsdItem): string {
|
||||
if (item.special === 'net-up' || item.special === 'net-down') {
|
||||
const v = getOsdItemValue(item)
|
||||
if (v == null || !isFinite(v)) return ' '
|
||||
if (v >= 1_048_576) return 'MB/s'
|
||||
if (v >= 1024) return 'KB/s'
|
||||
return ' B/s'
|
||||
}
|
||||
if (!config.value?.showUnit) return ''
|
||||
switch (item.type) {
|
||||
case 'temperature': return '°C'
|
||||
case 'load': return '%'
|
||||
case 'power': return 'W'
|
||||
case 'voltage': return 'V'
|
||||
case 'fan': return 'RPM'
|
||||
case 'clock':
|
||||
case 'frequency': return 'MHz'
|
||||
case 'data':
|
||||
case 'smalldata': return 'GB'
|
||||
case 'level': return '%'
|
||||
default: return item.unit || ''
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 状态 =====
|
||||
const config = ref<OsdConfig | null>(null)
|
||||
const snapshot = ref<SensorSnapshot | null>(null)
|
||||
const networkSpeed = ref<NetworkSpeed | null>(null)
|
||||
let unlistenFns: UnlistenFn[] = []
|
||||
|
||||
// ===== 数据查询 =====
|
||||
function getOsdItemValue(item: OsdItem): number | null {
|
||||
if (item.special === 'net-up') return networkSpeed.value?.uploadBps ?? null
|
||||
if (item.special === 'net-down') return networkSpeed.value?.downloadBps ?? null
|
||||
if (!snapshot.value) return null
|
||||
for (const g of snapshot.value.groups) {
|
||||
if (g.id !== item.groupId) continue
|
||||
const s = g.sensors.find(s =>
|
||||
s.hardwareName === item.hardwareName && s.name === item.sensorName && s.type === item.type
|
||||
)
|
||||
if (s) return s.value ?? null
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// ===== 颜色主题 =====
|
||||
|
||||
/** 将 hex 颜色 + 不透明度(0-100) 转为 rgba 字符串 */
|
||||
function withOpacity(hex: string, opacityPct: number): string {
|
||||
const a = Math.max(0, Math.min(100, opacityPct)) / 100
|
||||
// 解析 #RGB / #RRGGBB / #RRGGBBAA
|
||||
let h = hex.replace('#', '').trim()
|
||||
if (h.length === 3) h = h.split('').map(c => c + c).join('')
|
||||
if (h.length === 8) {
|
||||
// 已含 alpha，先解析再用新 alpha 覆盖
|
||||
h = h.slice(0, 6)
|
||||
}
|
||||
if (h.length !== 6 || /[^0-9a-fA-F]/.test(h)) return hex // 解析失败，原样返回
|
||||
const r = parseInt(h.slice(0, 2), 16)
|
||||
const g = parseInt(h.slice(2, 4), 16)
|
||||
const b = parseInt(h.slice(4, 6), 16)
|
||||
return `rgba(${r}, ${g}, ${b}, ${a})`
|
||||
}
|
||||
|
||||
function itemColor(item: OsdItem): string {
|
||||
const opacity = config.value?.fontOpacity ?? 100
|
||||
if (!config.value?.colorThemeEnabled) return withOpacity(config.value?.fontColor ?? '#ffffff', opacity)
|
||||
const theme = config.value.colorTheme ?? DEFAULT_COLOR_THEME
|
||||
// 优先按硬件类型着色
|
||||
const hwColor = theme.hardware[item.groupId]
|
||||
if (hwColor) return withOpacity(hwColor, opacity)
|
||||
// 其次按传感器类型着色
|
||||
const sensorColor = theme.sensor[item.type]
|
||||
if (sensorColor) return withOpacity(sensorColor, opacity)
|
||||
return withOpacity(config.value?.fontColor ?? '#ffffff', opacity)
|
||||
}
|
||||
|
||||
/** 项颜色（含警告色优先：达到阈值时覆盖为警告/严重色） */
|
||||
function itemColorWithAlert(item: OsdItem): string {
|
||||
const opacity = config.value?.fontOpacity ?? 100
|
||||
const alertCol = itemAlertColor(item)
|
||||
if (alertCol) return withOpacity(alertCol, opacity)
|
||||
return itemColor(item)
|
||||
}
|
||||
|
||||
/** 分组标题警告色：组内任一项达到严重阈值则标题变严重色，达到警告阈值则变警告色，否则用默认色 */
|
||||
function groupLabelColor(g: OsdGroup): string {
|
||||
const opacity = config.value?.fontOpacity ?? 100
|
||||
const alert = config.value?.alert
|
||||
if (!alert?.enabled) return withOpacity(config.value?.fontColor ?? '#ffffff', opacity)
|
||||
let maxPct = 0
|
||||
for (const item of g.items) {
|
||||
const v = getOsdItemValue(item)
|
||||
if (v == null || !isFinite(v)) continue
|
||||
const pct = itemAlertPct(item, v)
|
||||
if (pct > maxPct) maxPct = pct
|
||||
}
|
||||
if (maxPct >= alert.criticalThreshold) return withOpacity(alert.criticalColor, opacity)
|
||||
if (maxPct >= alert.warnThreshold) return withOpacity(alert.warnColor, opacity)
|
||||
return withOpacity(config.value?.fontColor ?? '#ffffff', opacity)
|
||||
}
|
||||
|
||||
const fontColor = computed(() => withOpacity(config.value?.fontColor ?? '#ffffff', config.value?.fontOpacity ?? 100))
|
||||
|
||||
/** 字体描边样式（通过 8 方向 text-shadow 实现描边效果） */
|
||||
const fontStrokeStyle = computed(() => {
|
||||
if (!config.value?.fontStrokeEnabled) return ''
|
||||
const w = config.value?.fontStrokeWidth ?? 1
|
||||
const c = config.value?.fontStrokeColor ?? '#000000'
|
||||
// 8 方向阴影构成描边
|
||||
const s = `${w}px 0 0 ${c}, -${w}px 0 0 ${c}, 0 ${w}px 0 ${c}, 0 -${w}px 0 ${c}, ${w}px ${w}px 0 ${c}, -${w}px -${w}px 0 ${c}, ${w}px -${w}px 0 ${c}, -${w}px ${w}px 0 ${c}`
|
||||
return `text-shadow: ${s}`
|
||||
})
|
||||
|
||||
/** 分组后的显示项（group / multiline 布局用） */
|
||||
const osdGroups = computed<OsdGroup[]>(() => {
|
||||
if (!config.value?.overlayItems?.length) return []
|
||||
return groupOsdItems(config.value.overlayItems)
|
||||
})
|
||||
|
||||
// ===== 窗口拖动（右键长按触发，由 Rust 后端检测并发事件） =====
|
||||
async function startNativeDrag() {
|
||||
try {
|
||||
await getCurrentWindow().startDragging()
|
||||
} catch {
|
||||
/* 忽略 */
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 实际内容尺寸测量与上报（替代不准确的估算） =====
|
||||
const osdRootEl = ref<HTMLElement | null>(null)
|
||||
let measureTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
/** 测量 osd-bar 实际渲染尺寸，上报给主窗口调整窗口大小 */
|
||||
async function measureAndReportSize() {
|
||||
await nextTick()
|
||||
const root = osdRootEl.value
|
||||
if (!root) return
|
||||
const bar = root.querySelector<HTMLElement>('.osd-bar')
|
||||
if (!bar) return
|
||||
// 用 getBoundingClientRect 取实际尺寸（逻辑像素）
|
||||
const rect = bar.getBoundingClientRect()
|
||||
if (rect.width === 0 || rect.height === 0) return
|
||||
// 额外留 1px 余量避免边缘裁切
|
||||
await emit('osd-content-size', { width: Math.ceil(rect.width) + 1, height: Math.ceil(rect.height) + 1 })
|
||||
}
|
||||
|
||||
/** 防抖测量（数据频繁更新时合并） */
|
||||
function scheduleMeasure() {
|
||||
if (measureTimer) clearTimeout(measureTimer)
|
||||
measureTimer = setTimeout(() => {
|
||||
measureTimer = null
|
||||
void measureAndReportSize()
|
||||
}, 50)
|
||||
}
|
||||
|
||||
// ===== 应用鼠标穿透 =====
|
||||
// 同时调用 Tauri setIgnoreCursorEvents（处理 webview2 子窗口）和 Rust WS_EX_TRANSPARENT（处理原生窗口）
|
||||
// 仅靠原生 WS_EX_TRANSPARENT 不足：Tauri 窗口包含 webview2 子窗口，需两者都设置才能完全穿透
|
||||
async function applyClickThrough(ignore: boolean) {
|
||||
// 1. Tauri API：处理 webview2 层的鼠标事件穿透
|
||||
try {
|
||||
await getCurrentWindow().setIgnoreCursorEvents(ignore)
|
||||
} catch (e) {
|
||||
console.error('[OSD] setIgnoreCursorEvents 失败:', e)
|
||||
}
|
||||
// 2. Rust 原生：设置 WS_EX_TRANSPARENT 扩展样式（更可靠的原生层穿透）
|
||||
try {
|
||||
await invoke('osd_set_click_through', { label: 'osd-overlay', enabled: ignore })
|
||||
} catch (e) {
|
||||
console.error('[OSD] osd_set_click_through 失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 应用置顶（使用 Rust 原生命令） =====
|
||||
async function applyTopmost(topmost: boolean) {
|
||||
try {
|
||||
await invoke('osd_set_topmost', { label: 'osd-overlay', topmost })
|
||||
} catch (e) {
|
||||
console.error('[OSD] 设置置顶失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听配置变化：应用点击穿透
|
||||
watch(() => config.value?.clickThrough, (ignore) => {
|
||||
if (ignore === undefined) return
|
||||
applyClickThrough(Boolean(ignore))
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
// 应用原生样式（NoActivate + ToolWindow，不获取焦点）
|
||||
try {
|
||||
await invoke('osd_apply_overlay_style', { label: 'osd-overlay' })
|
||||
} catch (e) {
|
||||
console.error('[OSD] 应用原生样式失败:', e)
|
||||
}
|
||||
|
||||
// 默认置顶
|
||||
await applyTopmost(true)
|
||||
|
||||
// 启动任务栏覆盖监视（系统 UI 出现时暂时取消置顶）
|
||||
try {
|
||||
await invoke('osd_start_topmost_watch')
|
||||
} catch (e) {
|
||||
console.error('[OSD] 启动置顶监视失败:', e)
|
||||
}
|
||||
|
||||
// 监听主窗口推送的 OSD 状态
|
||||
unlistenFns.push(await listen<OsdStatePayload>('osd-state-update', (e) => {
|
||||
config.value = e.payload.config
|
||||
snapshot.value = e.payload.snapshot
|
||||
networkSpeed.value = e.payload.networkSpeed
|
||||
// 数据/配置变化后重新测量尺寸
|
||||
scheduleMeasure()
|
||||
}))
|
||||
|
||||
// 监听系统 UI 覆盖事件
|
||||
unlistenFns.push(await listen('osd-system-ui-active', async () => {
|
||||
await applyTopmost(false)
|
||||
}))
|
||||
|
||||
unlistenFns.push(await listen('osd-system-ui-inactive', async () => {
|
||||
await applyTopmost(true)
|
||||
}))
|
||||
})
|
||||
|
||||
/** 鼠标按下：仅在关闭穿透时响应左键拖动 */
|
||||
async function onMouseDown(e: MouseEvent) {
|
||||
if (e.button !== 0) return // 仅左键
|
||||
if (config.value?.clickThrough) return // 穿透模式下不响应
|
||||
e.preventDefault()
|
||||
// 确保穿透已关闭（双保险：防止穿透状态不同步导致 startDragging 无效）
|
||||
await applyClickThrough(false)
|
||||
// 使用 Tauri 官方 startDragging API（比 SendMessageW(WM_NCLBUTTONDOWN) 从其他线程调用更可靠）
|
||||
await startNativeDrag()
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
unlistenFns.forEach(fn => fn())
|
||||
// 停止监视线程
|
||||
invoke('osd_stop_watch').catch(() => {})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="config"
|
||||
ref="osdRootEl"
|
||||
class="osd-root select-none"
|
||||
:style="`font-size: ${config.fontSize}px; ${fontStrokeStyle}`"
|
||||
@mousedown="onMouseDown"
|
||||
>
|
||||
<!-- ===== 单行布局：分组式，组间用 | 分隔，固定宽度 ===== -->
|
||||
<div
|
||||
v-if="config.overlayItems.length && config.layout === 'single'"
|
||||
class="osd-bar osd-bar-single"
|
||||
:style="{ background: config.bgColor }"
|
||||
>
|
||||
<template v-for="(g, gi) in osdGroups" :key="g.key">
|
||||
<span v-if="gi > 0" class="osd-sg-sep" :style="{ color: fontColor }">|</span>
|
||||
<span class="osd-sg-group">
|
||||
<span v-if="config.showLabel" class="osd-sg-label" :style="{ color: groupLabelColor(g) }">{{ g.label }}</span>
|
||||
<span
|
||||
v-for="item in g.items"
|
||||
:key="item.key"
|
||||
class="osd-sg-item"
|
||||
:style="{ color: itemColorWithAlert(item) }"
|
||||
>
|
||||
<span v-if="netArrow(item)" class="osd-net-arrow">{{ netArrow(item) }}</span>
|
||||
<span class="osd-fixed-num">{{ fmtFixedValue(getOsdItemValue(item), item) }}</span>
|
||||
<span class="osd-fixed-unit">{{ fmtFixedUnit(item) }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- ===== 分组横排布局：每组标题在上 + 数据列在下，固定宽度 ===== -->
|
||||
<div
|
||||
v-else-if="config.overlayItems.length && config.layout === 'group'"
|
||||
class="osd-bar osd-bar-group"
|
||||
:style="{ background: config.bgColor }"
|
||||
>
|
||||
<div v-for="g in osdGroups" :key="g.key" class="osd-group">
|
||||
<div class="osd-group-header" :style="{ color: groupLabelColor(g) }">{{ g.label }}</div>
|
||||
<div class="osd-group-data">
|
||||
<span
|
||||
v-for="item in g.items"
|
||||
:key="item.key"
|
||||
class="osd-group-item"
|
||||
:style="{ color: itemColorWithAlert(item) }"
|
||||
>
|
||||
<span v-if="netArrow(item)" class="osd-net-arrow">{{ netArrow(item) }}</span>
|
||||
<span class="osd-fixed-num">{{ fmtFixedValue(getOsdItemValue(item), item) }}</span>
|
||||
<span class="osd-fixed-unit">{{ fmtFixedUnit(item) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 多行布局：每组一行，左对齐，类小飞机 ===== -->
|
||||
<div
|
||||
v-else-if="config.overlayItems.length && config.layout === 'multiline'"
|
||||
class="osd-bar osd-bar-multiline"
|
||||
:style="{ background: config.bgColor }"
|
||||
>
|
||||
<div v-for="g in osdGroups" :key="g.key" class="osd-line">
|
||||
<span class="osd-line-label" :style="{ color: groupLabelColor(g) }">{{ g.label }}</span>
|
||||
<span
|
||||
v-for="item in g.items"
|
||||
:key="item.key"
|
||||
class="osd-line-item"
|
||||
:style="{ color: itemColorWithAlert(item) }"
|
||||
>
|
||||
<span v-if="netArrow(item)" class="osd-net-arrow">{{ netArrow(item) }}</span>
|
||||
<span class="osd-fixed-num">{{ fmtFixedValue(getOsdItemValue(item), item) }}</span>
|
||||
<span class="osd-fixed-unit">{{ fmtFixedUnit(item) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无显示项占位 -->
|
||||
<div v-else class="osd-empty">未配置显示项</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 根容器：填满窗口 */
|
||||
.osd-root {
|
||||
font-family: 'Cascadia Code', 'Consolas', 'Microsoft YaHei', monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
background: transparent;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* OSD 容器：inline-flex 让宽度自适应内容，每项紧凑排列 */
|
||||
.osd-bar {
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 3px 4px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ===== 单行布局：分组式，组间用 | 分隔 ===== */
|
||||
.osd-bar-single {
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.osd-sg-sep {
|
||||
opacity: 0.4;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.osd-sg-group {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.osd-sg-label {
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.osd-sg-item {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* ===== 分组横排布局：每组标题在上 + 数据列在下 ===== */
|
||||
.osd-bar-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.osd-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.osd-group-header {
|
||||
font-size: 0.85em;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
padding-bottom: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.osd-group-data {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.osd-group-item {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* ===== 多行布局：每组一行，左对齐，类小飞机 ===== */
|
||||
.osd-bar-multiline {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.osd-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.osd-line-label {
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
min-width: 4ch;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.osd-line-item {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* ===== 固定宽度文本（group / multiline 布局用，white-space: pre 保留 padNum 补的空格） ===== */
|
||||
.osd-fixed-num {
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.osd-fixed-unit {
|
||||
opacity: 0.7;
|
||||
white-space: pre;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.osd-net-arrow {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.osd-empty {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user