+
+
+
+ );
+}
diff --git a/src/components/background/BackgroundLayer.tsx b/src/components/background/BackgroundLayer.tsx
index 780792b..6dc1cb8 100644
--- a/src/components/background/BackgroundLayer.tsx
+++ b/src/components/background/BackgroundLayer.tsx
@@ -1,87 +1,73 @@
-import { useEffect } from "react";
+import { useEffect, useRef, useCallback } from "react";
import { useBackgroundStore } from "@/stores/backgroundStore";
+import { useThemeStore } from "@/stores/themeStore";
import { useRouteStore } from "@/stores/routeStore";
import { useDevStore } from "@/stores/devStore";
const DEFAULT_BG = "/background.png";
export function BackgroundLayer() {
- const { type, image, color, blur, opacity, animationSpeed, fetchConfig } = useBackgroundStore();
+ const { type, image, blur, opacity } = useBackgroundStore();
+ const parallax = useThemeStore((s) => s.parallax);
const route = useRouteStore((s) => s.current);
const forceDisableContentBlur = useDevStore((s) => s.forceDisableContentBlur);
const showContentBlur = route !== "home";
+ const bgRef = useRef
+
+
+
+ {pageName}
+此页面正在装修中，也许它很快就会与你见面
+ {description && ( +{description}
+ )} +("enter");
+ const [phase, setPhase] = useState<"enter" | "visible">("enter");
+ const [version, setVersion] = useState("");
useEffect(() => {
- const t1 = setTimeout(() => setPhase("visible"), 50);
- const t2 = setTimeout(() => setPhase("exit"), 3500);
- return () => { clearTimeout(t1); clearTimeout(t2); };
+ getVersion().then(setVersion);
+ const t = setTimeout(() => setPhase("visible"), 50);
+ return () => clearTimeout(t);
}, []);
return (
-
+
{/* Centered logo */}
-
);
}
diff --git a/src/pages/debug/components.tsx b/src/pages/debug/components.tsx
new file mode 100644
index 0000000..dd91302
--- /dev/null
+++ b/src/pages/debug/components.tsx
@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+
+export function GlassCard({ children }: { children: ReactNode }) {
+ return
@@ -183,23 +200,6 @@ export function ThemeBgSetting() {
-
-
-
+
{/* Bottom bar */}
-
diff --git a/src/components/system/WindowControls.tsx b/src/components/system/WindowControls.tsx
index 5e06d36..af5399b 100644
--- a/src/components/system/WindowControls.tsx
+++ b/src/components/system/WindowControls.tsx
@@ -1,18 +1,21 @@
import { useState, useEffect } from "react";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { BUILD_MODE } from "@/lib/mode";
+import { TaskButton } from "@/components/task/TaskButton";
import clsx from "clsx";
interface WindowControlsProps {
showMinimize?: boolean;
showMaximize?: boolean;
showClose?: boolean;
+ isSub?: boolean;
}
export function WindowControls({
showMinimize = true,
showMaximize = true,
showClose = true,
+ isSub = false,
}: WindowControlsProps) {
const [isMaximized, setIsMaximized] = useState(false);
const appWindow = getCurrentWindow();
@@ -49,6 +52,14 @@ export function WindowControls({
{badgeLabel}
)}
+
+ {/* Task button — hidden in sub mode */}
+ {!isSub && (
+
{/* Bottom bar */}
-
+
);
diff --git a/src/components/system/TitleBar.tsx b/src/components/system/TitleBar.tsx
index be574cb..9f1631c 100644
--- a/src/components/system/TitleBar.tsx
+++ b/src/components/system/TitleBar.tsx
@@ -245,6 +245,7 @@ export function TitleBar({
showMinimize={showMinimize}
showMaximize={showMaximize}
showClose={showClose}
+ isSub={isSub}
/>
Provided by Lingke Koring Studio
- v{VERSION}
+
+ {version && v{version}}
+ {BUILD_MODE !== "run" && (
+
+ {BUILD_MODE === "dev" ? "DEV" : "BETA"}
+
+ )}
+
+
+ )}
+
{showMinimize && (
{children}
;
+}
+
+export function SettingRow({
+ label,
+ desc,
+ children,
+}: {
+ label: string;
+ desc: string;
+ children: ReactNode;
+}) {
+ return (
+
+
+ );
+}
+
+export function PageHeader({
+ title,
+ desc,
+}: {
+ title: string;
+ desc: string;
+}) {
+ return (
+
+
+ {label}
+{desc}
+{children}
+
+
+ );
+}
diff --git a/src/pages/debug/display-debug.tsx b/src/pages/debug/display-debug.tsx
new file mode 100644
index 0000000..47edfad
--- /dev/null
+++ b/src/pages/debug/display-debug.tsx
@@ -0,0 +1,39 @@
+import { useDevStore } from "@/stores/devStore";
+import { Button } from "@/components/ui/button";
+import { GlassCard, SettingRow, PageHeader } from "./components";
+
+export function DisplayDebug() {
+ const { forceDisableContentBlur, setForceDisableContentBlur } = useDevStore();
+
+ return (
+ {title}
+{desc}
+
+
+ );
+}
diff --git a/src/pages/debug/index.tsx b/src/pages/debug/index.tsx
new file mode 100644
index 0000000..f7c5e71
--- /dev/null
+++ b/src/pages/debug/index.tsx
@@ -0,0 +1,80 @@
+import { useRouteStore } from "@/stores/routeStore";
+import { Monitor, Paintbrush, CreditCard, ListTodo, ChevronRight, FlaskConical } from "lucide-react";
+
+const debugPages = [
+ {
+ key: "debug-splash" as const,
+ icon: Monitor,
+ title: "启动动画调试",
+ desc: "测试 Splash Screen 的显示、关闭与启动流程模拟",
+ color: "text-blue-500",
+ bg: "bg-blue-500/10",
+ },
+ {
+ key: "debug-display" as const,
+ icon: Paintbrush,
+ title: "显示效果调试",
+ desc: "调试背景遮罩、磨砂效果与视觉表现",
+ color: "text-purple-500",
+ bg: "bg-purple-500/10",
+ },
+ {
+ key: "debug-version-card" as const,
+ icon: CreditCard,
+ title: "版本卡片调试",
+ desc: "测试 VersionCard 在不同模式与更新状态下的表现",
+ color: "text-amber-500",
+ bg: "bg-amber-500/10",
+ },
+ {
+ key: "debug-task" as const,
+ icon: ListTodo,
+ title: "任务队列调试",
+ desc: "测试任务调度、进度条、日志与 Sheet 面板",
+ color: "text-cyan-500",
+ bg: "bg-cyan-500/10",
+ },
+];
+
+export function Debug() {
+ const navigate = useRouteStore((s) => s.navigate);
+
+ return (
+
+
+
+
+ + 遮罩控制 +
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/debug/splash-debug.tsx b/src/pages/debug/splash-debug.tsx
new file mode 100644
index 0000000..0ba311b
--- /dev/null
+++ b/src/pages/debug/splash-debug.tsx
@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { Play, Square, RotateCw } from "lucide-react";
+import { GlassCard, SettingRow, PageHeader } from "./components";
+
+const openSplash = async () => {
+ try {
+ const existing = await WebviewWindow.getByLabel("splashscreen");
+ if (existing) {
+ await existing.show();
+ await existing.setFocus();
+ return;
+ }
+ const splash = new WebviewWindow("splashscreen", {
+ url: "/splash.html",
+ width: 480,
+ height: 320,
+ decorations: false,
+ transparent: true,
+ center: true,
+ visible: true,
+ resizable: false,
+ minWidth: 480,
+ maxWidth: 480,
+ minHeight: 320,
+ maxHeight: 320,
+ } as any);
+ splash.once("tauri://error", (e) => console.error("Splash window error:", e));
+ } catch (err) {
+ console.error("Failed to open splash:", err);
+ }
+};
+
+const closeSplash = async () => {
+ try {
+ const splash = await WebviewWindow.getByLabel("splashscreen");
+ if (splash) await splash.close();
+ } catch (err) {
+ console.error("Failed to close splash:", err);
+ }
+};
+
+export function SplashDebug() {
+ const [splashVisible, setSplashVisible] = useState(false);
+
+ const handleOpen = async () => {
+ await openSplash();
+ setSplashVisible(true);
+ };
+
+ const handleClose = async () => {
+ await closeSplash();
+ setSplashVisible(false);
+ };
+
+ return (
+
+
+
+
+
+
+
+ 开发者工具
+调试启动器的各项功能与视觉效果
+
+ {debugPages.map((p) => (
+
+ ))}
+
+
+ + 这些工具仅用于开发调试，不会影响启动器的正常运行 +
+
+
+ );
+}
diff --git a/src/pages/debug/task-debug.tsx b/src/pages/debug/task-debug.tsx
new file mode 100644
index 0000000..c4c7e4d
--- /dev/null
+++ b/src/pages/debug/task-debug.tsx
@@ -0,0 +1,252 @@
+import { useTaskStore } from "@/stores/taskStore";
+import { useRouteStore } from "@/stores/routeStore";
+import type { TaskType } from "@/types/task";
+import { GlassCard, PageHeader } from "./components";
+import {
+ Download,
+ ArrowDownToLine,
+ RefreshCw,
+ Play,
+ User,
+ Zap,
+ Trash2,
+ ListTodo,
+ AlertCircle,
+ Check,
+ Ban,
+} from "lucide-react";
+
+const taskTypes: { type: TaskType; label: string; icon: typeof Download; color: string; bg: string }[] = [
+ { type: "install", label: "安装", icon: Download, color: "text-blue-500", bg: "bg-blue-500/10" },
+ { type: "download", label: "下载", icon: ArrowDownToLine, color: "text-cyan-500", bg: "bg-cyan-500/10" },
+ { type: "update", label: "更新", icon: RefreshCw, color: "text-purple-500", bg: "bg-purple-500/10" },
+ { type: "launch", label: "启动", icon: Play, color: "text-green-500", bg: "bg-green-500/10" },
+ { type: "auth", label: "认证", icon: User, color: "text-amber-500", bg: "bg-amber-500/10" },
+ { type: "sync", label: "同步", icon: RefreshCw, color: "text-indigo-500", bg: "bg-indigo-500/10" },
+ { type: "custom", label: "自定义", icon: Zap, color: "text-gray-500", bg: "bg-gray-500/10" },
+];
+
+function simulateTask(type: TaskType, title: string, duration: number, shouldFail = false) {
+ useTaskStore.getState().addTask(type, title, `模拟 ${duration / 1000}s 任务`, async (ctx) => {
+ const steps = 20;
+ const interval = duration / steps;
+ for (let i = 0; i <= steps; i++) {
+ if (ctx.abortSignal.aborted) throw new Error("已取消");
+ ctx.updateProgress({ current: i, total: steps, stage: `步骤 ${i}/${steps}` });
+ ctx.addLog("info", `进度 ${Math.round((i / steps) * 100)}%`);
+ if (i === Math.floor(steps / 2)) {
+ ctx.addLog("warn", "中间检查点");
+ }
+ if (shouldFail && i === steps - 2) {
+ ctx.addLog("error", "模拟失败：网络连接超时");
+ throw new Error("网络连接超时");
+ }
+ await new Promise((r) => setTimeout(r, interval));
+ }
+ ctx.addLog("info", "任务完成");
+ });
+}
+
+const statusIcons = {
+ pending: RefreshCw,
+ running: RefreshCw,
+ completed: Check,
+ failed: AlertCircle,
+ cancelled: Ban,
+};
+
+export function TaskDebug() {
+ const tasks = useTaskStore((s) => s.tasks);
+ const clearHistory = useTaskStore((s) => s.clearHistory);
+ const removeTask = useTaskStore((s) => s.removeTask);
+ const navigate = useRouteStore((s) => s.navigate);
+
+ const running = tasks.filter((t) => t.status === "running").length;
+ const pending = tasks.filter((t) => t.status === "pending").length;
+ const completed = tasks.filter((t) => t.status === "completed").length;
+ const failed = tasks.filter((t) => t.status === "failed").length;
+
+ return (
+
+
+
+
+ + 启动画面控制 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/debug/version-card-debug.tsx b/src/pages/debug/version-card-debug.tsx
new file mode 100644
index 0000000..e4e255e
--- /dev/null
+++ b/src/pages/debug/version-card-debug.tsx
@@ -0,0 +1,174 @@
+import { useDevStore } from "@/stores/devStore";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { VersionCard } from "@/components/VersionCard";
+import { checkForUpdates } from "@/api/update";
+import { GlassCard, PageHeader } from "./components";
+
+const modeOptions = [
+ { key: "dev", label: "开发版", color: "bg-amber-500" },
+ { key: "beta", label: "测试版", color: "bg-emerald-500" },
+ { key: "run", label: "正式版", color: "bg-blue-500" },
+] as const;
+
+const updateStateOptions = [
+ { key: "latest", label: "最新版" },
+ { key: "hasUpdate", label: "有更新" },
+ { key: "installed", label: "已下载" },
+] as const;
+
+export function VersionCardDebug() {
+ const {
+ previewMode,
+ setPreviewMode,
+ previewUpdateState,
+ setPreviewUpdateState,
+ overlayOpacity,
+ setOverlayOpacity,
+ blurAmount,
+ setBlurAmount,
+ } = useDevStore();
+
+ const resetPreview = () => {
+ setPreviewMode(null);
+ setPreviewUpdateState(null);
+ setOverlayOpacity(30);
+ setBlurAmount(12);
+ };
+
+ return (
+
+ {[
+ { label: "运行中", value: running, color: "text-blue-500" },
+ { label: "等待中", value: pending, color: "text-muted-foreground" },
+ { label: "已完成", value: completed, color: "text-green-500" },
+ { label: "失败", value: failed, color: "text-red-500" },
+ ].map((s) => (
+
+
+ ))}
+
+
+ {/* Quick actions */}
+ {s.label}
+{s.value}
+
+
+
+ {/* Add tasks by type */}
+ + 快速操作 +
+
+
+
+
+
+
+
+
+
+
+
+ 打开任务队列
+跳转到任务队列页面查看当前任务列表
+
+
+
+
+
+ 清空所有历史
+删除 localStorage 中的任务记录
+
+
+
+ {/* Batch test */}
+ + 添加模拟任务 +
+
+ {taskTypes.map((tt) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {tt.label}任务
++ 模拟 3s 成功任务 +
+
+
+
+
+
+
+
+ {/* Task list */}
+ {tasks.length > 0 && (
+ + 批量测试 +
+
+
+
+
+
+
+
+
+
+
+
+ 并行任务测试
+同时添加 3 个不同类型任务，验证并行执行
+
+
+
+
+
+ 取消任务测试
+添加 5s 长任务，可在任务队列中取消
+
+
+ )}
+ + 当前任务 ({tasks.length}) +
+
+ {tasks.map((t) => {
+ const StatusIcon = statusIcons[t.status];
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+
+ {t.title}
+{t.type} · {t.status} · {t.logs.length} 条日志
+
+
+ );
+}
diff --git a/src/pages/setting/personalization/theme-bg.tsx b/src/pages/setting/personalization/theme-bg.tsx
index bfc5be3..b5bff2d 100644
--- a/src/pages/setting/personalization/theme-bg.tsx
+++ b/src/pages/setting/personalization/theme-bg.tsx
@@ -1,10 +1,11 @@
import { useThemeStore, type DarkMode } from "@/stores/themeStore";
import { useBackgroundStore } from "@/stores/backgroundStore";
-import { useA11yStore } from "@/stores/a11yStore";
import { Switch } from "@/components/ui/switch";
import { Slider } from "@/components/ui/slider";
import { Button } from "@/components/ui/button";
import clsx from "clsx";
+import { open } from "@tauri-apps/plugin-dialog";
+import { convertFileSrc } from "@tauri-apps/api/core";
function GlassCard({ children }: { children: React.ReactNode }) {
return
+
+
+
+
+
+
+ + 模式颜色 +
+
+ {modeOptions.map((m) => (
+
+ ))}
+
+
+
+
+
+
+ + 更新状态模拟 +
+
+ {updateStateOptions.map((s) => (
+
+ ))}
+
+
+
+
+
+
+ + 磨砂层参数 +
+
+
+
+
+ setOverlayOpacity(Array.isArray(v) ? v[0] : v)
+ }
+ min={0}
+ max={100}
+ step={1}
+ />
+
+
+
+ 遮罩透明度
+
+
+ {overlayOpacity}%
+
+
+
+
+ setBlurAmount(Array.isArray(v) ? v[0] : v)
+ }
+ min={0}
+ max={40}
+ step={1}
+ />
+
+
+
+ 模糊强度
+
+
+ {blurAmount}px
+
+
+
+
+
+
+ + 快捷操作 +
+
+
+
+
+ 重置与检查
++ 重置所有预览参数或强制检查更新 +
+
+
+
+
+ {children}
;
@@ -107,11 +108,18 @@ function ThemePreviewCard({ mode, selected, onClick }: { mode: DarkMode; selecte
export function ThemeBgSetting() {
const { darkMode, setDarkMode, parallax, setParallax } = useThemeStore();
- const { opacity, setOpacity, blur, setBlur, reset } = useBackgroundStore();
- const { contentBlurOpacity, setContentBlurOpacity } = useA11yStore();
+ const { image, opacity, setOpacity, blur, setBlur, setImage, reset } = useBackgroundStore();
const handlePickImage = async () => {
- // TODO: 打开文件选择器
+ const selected = await open({
+ multiple: false,
+ filters: [
+ { name: "图片", extensions: ["png", "jpg", "jpeg", "webp", "gif", "bmp"] },
+ ],
+ });
+ if (selected) {
+ setImage(convertFileSrc(selected));
+ }
};
const handleReset = async () => {
@@ -146,6 +154,15 @@ export function ThemeBgSetting() {
选择图片
+ {image && image !== "/background.png" && (
+
+ 
+
+ )}
- setContentBlurOpacity(Array.isArray(v) ? v[0] : v)}
- />
-
-
-
- 强内容遮罩不透明度
-设置页面背景模糊遮罩的不透明度，当前 {contentBlurOpacity}%
-