同步屏客户端
@ -0,0 +1,25 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
src-tauri/target/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Broadcast Client</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "broadcast-client",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc --noEmit && vite build",
|
||||||
|
"test": "vitest",
|
||||||
|
"test:run": "vitest run",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"tauri": "tauri"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tauri-apps/api": "^2",
|
||||||
|
"@tauri-apps/plugin-opener": "^2",
|
||||||
|
"@tauri-apps/plugin-store": "^2",
|
||||||
|
"element-plus": "^2.11.4",
|
||||||
|
"vue": "^3.5.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tauri-apps/cli": "^2",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"typescript": "~5.6.2",
|
||||||
|
"vite": "^6.0.3",
|
||||||
|
"vitest": "^3.2.4",
|
||||||
|
"vue-tsc": "^2.1.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
[package]
|
||||||
|
name = "broadcast-client"
|
||||||
|
version = "0.1.0"
|
||||||
|
description = "Broadcast Ruler Client"
|
||||||
|
authors = ["team"]
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
[lib]
|
||||||
|
name = "broadcast_client_lib"
|
||||||
|
crate-type = ["staticlib", "cdylib", "rlib"]
|
||||||
|
|
||||||
|
[build-dependencies]
|
||||||
|
tauri-build = { version = "2", features = [] }
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
tauri = { version = "2", features = [] }
|
||||||
|
tauri-plugin-opener = "2"
|
||||||
|
tauri-plugin-store = "2"
|
||||||
|
serde = { version = "1", features = ["derive"] }
|
||||||
|
serde_json = "1"
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
fn main() {
|
||||||
|
println!("cargo:rustc-check-cfg=cfg(mobile)");
|
||||||
|
tauri_build::build()
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"$schema": "../gen/schemas/desktop-schema.json",
|
||||||
|
"identifier": "default",
|
||||||
|
"description": "Default capability for broadcast window",
|
||||||
|
"windows": ["main", "sync-config"],
|
||||||
|
"permissions": [
|
||||||
|
"core:default",
|
||||||
|
"core:window:allow-set-position",
|
||||||
|
"core:window:allow-set-size",
|
||||||
|
"core:window:allow-start-dragging",
|
||||||
|
"opener:default",
|
||||||
|
"store:default"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{"default":{"identifier":"default","description":"Default capability for broadcast window","local":true,"windows":["main","sync-config"],"permissions":["core:default","core:window:allow-set-position","core:window:allow-set-size","core:window:allow-start-dragging","opener:default","store:default"]}}
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 504 B |
|
After Width: | Height: | Size: 763 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 480 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 617 B |
|
After Width: | Height: | Size: 860 B |
|
After Width: | Height: | Size: 1002 B |
|
After Width: | Height: | Size: 669 B |
@ -0,0 +1,5 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||||
|
<background android:drawable="@color/ic_launcher_background"/>
|
||||||
|
</adaptive-icon>
|
||||||
|
After Width: | Height: | Size: 711 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 841 B |
|
After Width: | Height: | Size: 758 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 774 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<resources>
|
||||||
|
<color name="ic_launcher_background">#fff</color>
|
||||||
|
</resources>
|
||||||
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 389 B |
|
After Width: | Height: | Size: 638 B |
|
After Width: | Height: | Size: 638 B |
|
After Width: | Height: | Size: 736 B |
|
After Width: | Height: | Size: 534 B |
|
After Width: | Height: | Size: 669 B |
|
After Width: | Height: | Size: 669 B |
|
After Width: | Height: | Size: 971 B |
|
After Width: | Height: | Size: 638 B |
|
After Width: | Height: | Size: 882 B |
|
After Width: | Height: | Size: 882 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 875 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,6 @@
|
|||||||
|
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
|
||||||
|
|
||||||
|
// 原生启动入口，转交到库内 run()。
|
||||||
|
fn main() {
|
||||||
|
broadcast_client_lib::run()
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://schema.tauri.app/config/2",
|
||||||
|
"productName": "broadcast-client",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"identifier": "com.ziyun.broadcastclient",
|
||||||
|
"build": {
|
||||||
|
"beforeDevCommand": "npm run dev",
|
||||||
|
"devUrl": "http://localhost:1420",
|
||||||
|
"beforeBuildCommand": "npm run build",
|
||||||
|
"frontendDist": "../dist"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"windows": [
|
||||||
|
{
|
||||||
|
"label": "main",
|
||||||
|
"title": "Broadcast Client",
|
||||||
|
"width": 1280,
|
||||||
|
"height": 256,
|
||||||
|
"x": 0,
|
||||||
|
"y": 0,
|
||||||
|
"decorations": false,
|
||||||
|
"transparent": false,
|
||||||
|
"shadow": false,
|
||||||
|
"alwaysOnTop": true,
|
||||||
|
"resizable": false,
|
||||||
|
"maximizable": false,
|
||||||
|
"fullscreen": false,
|
||||||
|
"visible": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"security": {
|
||||||
|
"csp": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bundle": {
|
||||||
|
"active": false,
|
||||||
|
"targets": "all"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<section
|
||||||
|
class="segment"
|
||||||
|
:style="{
|
||||||
|
left: `${segment.left}px`,
|
||||||
|
top: `${segment.top}px`,
|
||||||
|
width: `${segment.sliceWidth}px`,
|
||||||
|
height: `${segment.height}px`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="segment-track"
|
||||||
|
:style="{
|
||||||
|
width: `${totalWidth}px`,
|
||||||
|
height: `${segment.height}px`,
|
||||||
|
transform: `translateX(${-segment.sourceX}px)`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<RulerTicks
|
||||||
|
v-if="showRuler"
|
||||||
|
:ticks="ticks"
|
||||||
|
:total-width="totalWidth"
|
||||||
|
:segment-height="segment.height"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<WindowAreasLayer :slices="segmentAreaSlices" />
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from "vue";
|
||||||
|
import type { Segment, Tick } from "../models/ruler";
|
||||||
|
import type { WindowAreaSlice } from "../services/windowAreaSliceService";
|
||||||
|
import RulerTicks from "./RulerTicks.vue";
|
||||||
|
import WindowAreasLayer from "./WindowAreasLayer.vue";
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
segment: Segment;
|
||||||
|
ticks: Tick[];
|
||||||
|
totalWidth: number;
|
||||||
|
showRuler: boolean;
|
||||||
|
windowAreaSlices: WindowAreaSlice[];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const segmentAreaSlices = computed(() =>
|
||||||
|
props.windowAreaSlices.filter((item) => item.segmentIndex === props.segment.index),
|
||||||
|
);
|
||||||
|
</script>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ruler-track" :style="{ width: `${totalWidth}px`, height: `${segmentHeight}px` }">
|
||||||
|
<div
|
||||||
|
v-for="tick in ticks"
|
||||||
|
:key="`${tick.type}-${tick.x}`"
|
||||||
|
class="tick"
|
||||||
|
:class="tick.type"
|
||||||
|
:style="{ left: `${tick.x}px` }"
|
||||||
|
>
|
||||||
|
<span v-if="tick.type === 'major'" class="tick-label">{{ tick.label }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Tick } from "../models/ruler";
|
||||||
|
|
||||||
|
// 当前分段内可见的刻度数据与尺寸入参。
|
||||||
|
defineProps<{
|
||||||
|
ticks: Tick[];
|
||||||
|
totalWidth: number;
|
||||||
|
segmentHeight: number;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div class="children-layer">
|
||||||
|
<div
|
||||||
|
v-for="slice in slices"
|
||||||
|
:key="`${slice.childId}-${slice.segmentIndex}-${slice.renderLeft}`"
|
||||||
|
class="child-slice"
|
||||||
|
:class="slice.className"
|
||||||
|
:style="{
|
||||||
|
left: `${slice.renderLeft}px`,
|
||||||
|
top: `${slice.renderTop}px`,
|
||||||
|
width: `${slice.renderWidth}px`,
|
||||||
|
height: `${slice.renderHeight}px`,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { ChildSlice } from "../models/ruler";
|
||||||
|
|
||||||
|
// 分段内要绘制的子元素切片列表。
|
||||||
|
defineProps<{
|
||||||
|
slices: ChildSlice[];
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div class="window-areas-layer">
|
||||||
|
<section
|
||||||
|
v-for="slice in slices"
|
||||||
|
:key="`${slice.area.id}-${slice.segmentIndex}-${slice.renderLeft}`"
|
||||||
|
class="window-area"
|
||||||
|
:style="{
|
||||||
|
left: `${slice.renderLeft}px`,
|
||||||
|
top: `${slice.renderTop}px`,
|
||||||
|
width: `${slice.renderWidth}px`,
|
||||||
|
height: `${slice.renderHeight}px`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="window-area-inner"
|
||||||
|
:style="{
|
||||||
|
width: `${slice.area.width}px`,
|
||||||
|
height: `${slice.area.height}px`,
|
||||||
|
transform: `translateX(${-slice.clipOffset}px)`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="window-no-region">
|
||||||
|
<span
|
||||||
|
class="window-no-text"
|
||||||
|
:class="{ circle: slice.area.windowNumberCircle }"
|
||||||
|
:style="{
|
||||||
|
fontSize: `${slice.area.windowNumberStyle.fontSize}px`,
|
||||||
|
color: slice.area.windowNumberStyle.color,
|
||||||
|
fontWeight: slice.area.windowNumberStyle.fontWeight,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ slice.area.windowNumber }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="window-text-region">
|
||||||
|
<div
|
||||||
|
class="window-text-line"
|
||||||
|
:style="{
|
||||||
|
fontSize: `${slice.area.staticTextStyle.fontSize}px`,
|
||||||
|
color: slice.area.staticTextStyle.color,
|
||||||
|
fontWeight: slice.area.staticTextStyle.fontWeight,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ slice.area.staticText }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="window-text-line"
|
||||||
|
:style="{
|
||||||
|
fontSize: `${slice.area.dynamicTextStyle.fontSize}px`,
|
||||||
|
color: slice.area.dynamicTextStyle.color,
|
||||||
|
fontWeight: slice.area.dynamicTextStyle.fontWeight,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ slice.area.dynamicText }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { WindowAreaSlice } from "../services/windowAreaSliceService";
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
slices: WindowAreaSlice[];
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import { computed, type Ref } from "vue";
|
||||||
|
import { buildSegments } from "../services/segmentService";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据屏宽和配置生成分段布局及容器高度。
|
||||||
|
*/
|
||||||
|
export function useSegmentLayout(
|
||||||
|
screenWidth: Ref<number>,
|
||||||
|
totalWidth: Ref<number>,
|
||||||
|
segmentHeight: Ref<number>,
|
||||||
|
) {
|
||||||
|
const segments = computed(() =>
|
||||||
|
buildSegments(screenWidth.value, totalWidth.value, segmentHeight.value),
|
||||||
|
);
|
||||||
|
const containerHeight = computed(() => segments.value.length * segmentHeight.value);
|
||||||
|
return { segments, containerHeight };
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { createApp } from "vue";
|
||||||
|
import ElementPlus from "element-plus/es";
|
||||||
|
import "element-plus/theme-chalk/index.css";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import "./styles.css";
|
||||||
|
|
||||||
|
// 前端入口：挂载 Vue 根组件。
|
||||||
|
createApp(App).use(ElementPlus).mount("#app");
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
import { DEFAULT_SEGMENT_HEIGHT } from "../models/ruler";
|
||||||
|
import { buildSegments, normalizeScreenWidth } from "./segmentService";
|
||||||
|
|
||||||
|
const TOTAL_WIDTH = 5000;
|
||||||
|
|
||||||
|
// 分段算法核心用例。
|
||||||
|
describe("segmentService", () => {
|
||||||
|
// 非法屏宽应回退默认值。
|
||||||
|
it("normalizes invalid screen width", () => {
|
||||||
|
expect(normalizeScreenWidth(0)).toBe(1920);
|
||||||
|
expect(normalizeScreenWidth(-1)).toBe(1920);
|
||||||
|
expect(normalizeScreenWidth(Number.NaN)).toBe(1920);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 分段数量与前两段布局应符合规则。
|
||||||
|
it("builds segments with correct count and size", () => {
|
||||||
|
const width = 1080;
|
||||||
|
const segments = buildSegments(width, TOTAL_WIDTH, DEFAULT_SEGMENT_HEIGHT);
|
||||||
|
|
||||||
|
expect(segments.length).toBe(Math.ceil(TOTAL_WIDTH / width));
|
||||||
|
expect(segments[0]).toMatchObject({
|
||||||
|
index: 0,
|
||||||
|
sourceX: 0,
|
||||||
|
sliceWidth: 1080,
|
||||||
|
top: 0,
|
||||||
|
height: DEFAULT_SEGMENT_HEIGHT,
|
||||||
|
});
|
||||||
|
expect(segments[1]).toMatchObject({
|
||||||
|
index: 1,
|
||||||
|
sourceX: 1080,
|
||||||
|
sliceWidth: 1080,
|
||||||
|
top: DEFAULT_SEGMENT_HEIGHT,
|
||||||
|
height: DEFAULT_SEGMENT_HEIGHT,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 最后一段应被裁剪到剩余宽度。
|
||||||
|
it("clips the last segment width correctly", () => {
|
||||||
|
const width = 1080;
|
||||||
|
const segments = buildSegments(width, TOTAL_WIDTH, DEFAULT_SEGMENT_HEIGHT);
|
||||||
|
const last = segments[segments.length - 1];
|
||||||
|
|
||||||
|
expect(last.sliceWidth).toBe(TOTAL_WIDTH - 1080 * 4);
|
||||||
|
expect(last.sourceX + last.sliceWidth).toBe(TOTAL_WIDTH);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
import { MAJOR_TICK_GAP, MINOR_TICK_GAP } from "../models/ruler";
|
||||||
|
import { buildTicks } from "./tickService";
|
||||||
|
|
||||||
|
const TOTAL_WIDTH = 800;
|
||||||
|
|
||||||
|
// 刻度生成规则验证。
|
||||||
|
describe("tickService", () => {
|
||||||
|
// 刻度应覆盖整个主容器宽度。
|
||||||
|
it("builds ticks covering full ruler width", () => {
|
||||||
|
const ticks = buildTicks(TOTAL_WIDTH);
|
||||||
|
|
||||||
|
expect(ticks[0].x).toBe(0);
|
||||||
|
expect(ticks[ticks.length - 1].x).toBe(TOTAL_WIDTH);
|
||||||
|
expect(ticks.length).toBe(TOTAL_WIDTH / MINOR_TICK_GAP + 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 每 100px 应生成一个大刻度并附带标签。
|
||||||
|
it("marks major ticks every 100px", () => {
|
||||||
|
const ticks = buildTicks(TOTAL_WIDTH);
|
||||||
|
const majors = ticks.filter((tick) => tick.type === "major");
|
||||||
|
|
||||||
|
expect(majors[0]).toMatchObject({ x: 0, label: "0" });
|
||||||
|
expect(majors[1]).toMatchObject({ x: MAJOR_TICK_GAP, label: "100" });
|
||||||
|
expect(majors.every((tick) => tick.x % MAJOR_TICK_GAP === 0)).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,393 @@
|
|||||||
|
:root {
|
||||||
|
color-scheme: light;
|
||||||
|
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.broadcast-root {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-track {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruler-track {
|
||||||
|
position: relative;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 1px;
|
||||||
|
background: #7f8da8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick.minor {
|
||||||
|
height: 16px;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick.major {
|
||||||
|
height: 34px;
|
||||||
|
background: #c4d2ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick-label {
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
left: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
color: #d9e4ff;
|
||||||
|
opacity: 0.9;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.children-layer {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.child-slice {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 0;
|
||||||
|
background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.child-banner.alt {
|
||||||
|
background: linear-gradient(90deg, #8e44ad 0%, #9b59b6 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.child-banner.warn {
|
||||||
|
background: linear-gradient(90deg, #d35400 0%, #f39c12 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-root {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #eef1f6;
|
||||||
|
color: #111;
|
||||||
|
padding: 0 16px 16px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-page {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-card {
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-collapse {
|
||||||
|
border: 1px solid #b8c3d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #d9e1f0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-collapse .el-collapse-item__header {
|
||||||
|
padding: 0 14px;
|
||||||
|
background: #d0dbef;
|
||||||
|
color: #1f2d3d;
|
||||||
|
border-bottom: 1px solid #b8c3d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-collapse .el-collapse-item__wrap {
|
||||||
|
background: #f8fbff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-collapse .el-collapse-item__content {
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-scroll {
|
||||||
|
max-height: 42vh;
|
||||||
|
overflow: auto;
|
||||||
|
padding-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-scroll--tall {
|
||||||
|
max-height: 56vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-between {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area-item {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input-number {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-title {
|
||||||
|
margin: 12px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-desc {
|
||||||
|
margin: 0;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-form {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
max-width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-row input[type="number"] {
|
||||||
|
width: 160px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #c8c8c8;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-row {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segments-panel {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segments-panel h2 {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-grid {
|
||||||
|
margin-top: 8px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 90px 120px 160px;
|
||||||
|
gap: 6px 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-grid-header {
|
||||||
|
color: #95a5a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border: 1px solid #c8c8c8;
|
||||||
|
background: #fff;
|
||||||
|
color: #222;
|
||||||
|
padding: 6px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.primary {
|
||||||
|
background: #1677ff;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #1677ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-list {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 44px 110px 90px 90px 70px;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segment-row input[type="number"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 4px 6px;
|
||||||
|
border: 1px solid #c8c8c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-hint {
|
||||||
|
margin-top: 8px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socket-status {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socket-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socket-status.running .socket-dot {
|
||||||
|
background: #2ecc71;
|
||||||
|
box-shadow: 0 0 6px rgba(46, 204, 113, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.socket-status.stopped .socket-dot {
|
||||||
|
background: #e74c3c;
|
||||||
|
box-shadow: 0 0 6px rgba(231, 76, 60, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.areas-panel {
|
||||||
|
margin-top: 18px;
|
||||||
|
padding-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-area-list {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-area-card {
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-area-title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-area-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 8px 12px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-area-grid .field-row {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-area-grid input[type="text"],
|
||||||
|
.window-area-grid input[type="number"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border: 1px solid #c8c8c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-areas-layer {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-area {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #000;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-area-inner {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-no-region {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-right: none;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-no-text.circle {
|
||||||
|
width: 2.2em;
|
||||||
|
height: 2.2em;
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-text-region {
|
||||||
|
flex: 2.5;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-text-line {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
|
// @ts-expect-error process is a Node.js global
|
||||||
|
const host = process.env.TAURI_DEV_HOST;
|
||||||
|
|
||||||
|
export default defineConfig(() => ({
|
||||||
|
plugins: [vue()],
|
||||||
|
clearScreen: false,
|
||||||
|
server: {
|
||||||
|
port: 1420,
|
||||||
|
strictPort: true,
|
||||||
|
host: host || false,
|
||||||
|
hmr: host
|
||||||
|
? {
|
||||||
|
protocol: "ws",
|
||||||
|
host,
|
||||||
|
port: 1421,
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
watch: {
|
||||||
|
ignored: ["**/src-tauri/**"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||