|
|
@@ -2,8 +2,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
|
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
|
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
|
|
import { openUrl, revealItemInDir } from "@tauri-apps/plugin-opener";
|
|
|
-import { Button, Divider, InputNumber, notification, Tooltip } from "antd";
|
|
|
-import { mockTasks, type Task } from "./mocks/tasks";
|
|
|
+import { Button, ConfigProvider, Divider, InputNumber, Layout, Menu, notification, Space, theme, Tooltip } from "antd";
|
|
|
+import { mockTasks } from "./mocks/tasks";
|
|
|
import {
|
|
|
EVT_RECORDING_FAILED,
|
|
|
EVT_RECORDING_FINISHED,
|
|
|
@@ -28,15 +28,21 @@ import {
|
|
|
} from "./lib/recorder";
|
|
|
import "./App.css";
|
|
|
import {
|
|
|
+ BankOutlined,
|
|
|
+ CloseOutlined,
|
|
|
FileImageOutlined,
|
|
|
FolderOpenOutlined,
|
|
|
+ LinkOutlined,
|
|
|
LoadingOutlined,
|
|
|
+ MinusOutlined,
|
|
|
PictureOutlined,
|
|
|
PlayCircleFilled,
|
|
|
StopOutlined,
|
|
|
VideoCameraOutlined,
|
|
|
} from "@ant-design/icons";
|
|
|
|
|
|
+const { Header, Content, Sider } = Layout;
|
|
|
+
|
|
|
/**
|
|
|
* 与 Rust 端常量保持一致（src-tauri/src/lib.rs）：
|
|
|
* LEFT_PANEL_WIDTH = 180
|
|
|
@@ -44,14 +50,12 @@ import {
|
|
|
*
|
|
|
* 导出以避免 noUnusedLocals 误报；后续如有组件需要可直接 import。
|
|
|
*/
|
|
|
-export const LEFT_PANEL_WIDTH = 180;
|
|
|
-export const TOOLBAR_HEIGHT = 48;
|
|
|
|
|
|
/** 工具栏右侧的尺寸预设（统一横屏：宽 × 高） */
|
|
|
const SIZE_PRESETS = [
|
|
|
- { label: "1920×1080", w: 1920, h: 1080 },
|
|
|
- { label: "1024×768", w: 1024, h: 768 },
|
|
|
{ label: "1280×720", w: 1280, h: 720 },
|
|
|
+ { label: "1920×1080", w: 1920, h: 1080 },
|
|
|
+ { label: "1024×768", w: 1024, h: 768 }
|
|
|
];
|
|
|
|
|
|
|
|
|
@@ -78,8 +82,11 @@ function App() {
|
|
|
const [activeId, setActiveId] = useState<string | null>(null);
|
|
|
|
|
|
const [contentSize, setContentSize] = useState<{ w: number; h: number }>({ w: 1280, h: 720 });
|
|
|
+ const contentSizeRef = useRef(contentSize);
|
|
|
const [customMode, setCustomMode] = useState(false);
|
|
|
-
|
|
|
+ const isCustomSize = useCallback(() => {
|
|
|
+ return !SIZE_PRESETS.find(({ w, h }) => w == contentSize.w && h == contentSize.h);
|
|
|
+ }, [contentSize])
|
|
|
// 录制状态机（由 lib/recorder.ts 内部单例维护，这里订阅以驱动按钮）
|
|
|
const [recordState, setRecordState] = useState<RecordState>(getRecordState());
|
|
|
|
|
|
@@ -96,7 +103,11 @@ function App() {
|
|
|
// antd 6 notification 必须用 hook + contextHolder 才能正确取到主题
|
|
|
const [notifyApi, notifyContext] = notification.useNotification();
|
|
|
|
|
|
- function handleSelectTask(t: Task) {
|
|
|
+ function handleSelectTask({ key }: { key: string }) {
|
|
|
+ const t = mockTasks.find((v) => v.id == key);
|
|
|
+ if (!t) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
setActiveId(t.id);
|
|
|
void loadInWebview(t.id, t.url);
|
|
|
}
|
|
|
@@ -383,239 +394,257 @@ function App() {
|
|
|
// 停止按钮仅在 recording 时可点
|
|
|
const stopDisabled = recordState !== "recording";
|
|
|
|
|
|
- const applyWorkAreaSize = useCallback(async (w: number, h: number) => {
|
|
|
+ const [collapsed, setCollapsed] = useState(false);
|
|
|
+
|
|
|
+ const applyWorkAreaSize = useCallback(async (w?: number, h?: number) => {
|
|
|
+ if (w && h) {
|
|
|
+ setContentSize({ w, h });
|
|
|
+ contentSizeRef.current = { w, h };
|
|
|
+ } else {
|
|
|
+ w = contentSize.w;
|
|
|
+ h = contentSize.h;
|
|
|
+ }
|
|
|
try {
|
|
|
// 先调主窗口，避免子 webview 越界
|
|
|
await invoke("set_window_size", {
|
|
|
- width: w + 180,
|
|
|
- height: h + 46,
|
|
|
+ width: w + (collapsed ? 30 : 180) + 4,
|
|
|
+ height: h + 48 + 24 + 4,
|
|
|
+ contentX: (collapsed ? 30 : 180) + 2,
|
|
|
+ contentY: 50,
|
|
|
contentWidth: w,
|
|
|
contentHeight: h
|
|
|
});
|
|
|
- setContentSize({ w, h })
|
|
|
} catch (e) {
|
|
|
- console.error("调整尺寸失败:", e);
|
|
|
+ console.error("调整尺寸失败 ", e);
|
|
|
}
|
|
|
- }, [setContentSize]);
|
|
|
+ }, [contentSize, setContentSize]);
|
|
|
|
|
|
- // 首次挂载时按默认 contentSize 调整窗口；依赖项故意为空（仅初始化用）。
|
|
|
useEffect(() => {
|
|
|
- applyWorkAreaSize(contentSize.w, contentSize.h);
|
|
|
- // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
+ applyWorkAreaSize();
|
|
|
}, []);
|
|
|
|
|
|
// 录制状态机（RecordState 类型已抽到 src/types/ipc.ts），录制功能下一阶段接入
|
|
|
+ const handleCollaspsed = useCallback(async (c: boolean) => {
|
|
|
+ setCollapsed(c);
|
|
|
+ try {
|
|
|
+ // 先调主窗口，避免子 webview 越界
|
|
|
+ await invoke("set_window_size", {
|
|
|
+ width: contentSize.w + (collapsed ? 30 : 180),
|
|
|
+ height: contentSize.h + 60,
|
|
|
+ contentWidth: contentSize.w,
|
|
|
+ contentHeight: contentSize.h
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.error("调整尺寸失败:", e);
|
|
|
+ }
|
|
|
+ }, [setCollapsed]);
|
|
|
+ const {
|
|
|
+ token: { colorBgContainer },
|
|
|
+ } = theme.useToken();
|
|
|
|
|
|
+ const [statusColor, setStatusColor] = useState("#888");
|
|
|
+ const [statusText, setStatusText] = useState("请选择任务");
|
|
|
return (
|
|
|
- <div className="flex h-screen w-screen overflow-hidden select-none">
|
|
|
- {/* antd notification 的渲染容器 —— 必须挂在树中 */}
|
|
|
- {notifyContext}
|
|
|
- {/* ===== 左栏：任务列表（180px） ===== */}
|
|
|
- <aside className="w-[180px] shrink-0 border-r border-gray-4 bg-gray-2 h-full flex flex-col">
|
|
|
- <div className="px-3 py-2 text-xs text-gray-7 border-b border-gray-4 select-none">
|
|
|
- 任务列表
|
|
|
- </div>
|
|
|
- <div className="flex-1 overflow-y-auto">
|
|
|
- <ul>
|
|
|
- {mockTasks.map((t) => {
|
|
|
- const active = activeId === t.id;
|
|
|
- return (
|
|
|
- <li
|
|
|
- key={t.id}
|
|
|
- className={
|
|
|
- "flex items-center justify-between px-3 py-2 text-sm cursor-pointer transition-colors " +
|
|
|
- (active
|
|
|
- ? "bg-primary-1 text-primary-7"
|
|
|
- : "hover:bg-gray-3 text-gray-10")
|
|
|
- }
|
|
|
- onClick={() => handleSelectTask(t)}
|
|
|
- >
|
|
|
- <span className="truncate">任务 {t.id}</span>
|
|
|
- <button
|
|
|
- type="button"
|
|
|
- title="在系统浏览器打开"
|
|
|
- className="ml-2 inline-flex items-center justify-center w-6 h-6 rounded-sm hover:bg-gray-4 text-gray-7 hover:text-primary-6"
|
|
|
- onClick={(e) => {
|
|
|
- e.stopPropagation();
|
|
|
- void openInBrowser(t.url);
|
|
|
- }}
|
|
|
- >
|
|
|
- {/* 外链图标（lucide external-link 同款 path，不引入新依赖） */}
|
|
|
- <svg
|
|
|
- width="14"
|
|
|
- height="14"
|
|
|
- viewBox="0 0 24 24"
|
|
|
- fill="none"
|
|
|
- stroke="currentColor"
|
|
|
- strokeWidth="2"
|
|
|
- strokeLinecap="round"
|
|
|
- strokeLinejoin="round"
|
|
|
- >
|
|
|
- <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
|
|
- <polyline points="15 3 21 3 21 9" />
|
|
|
- <line x1="10" y1="14" x2="21" y2="3" />
|
|
|
- </svg>
|
|
|
- </button>
|
|
|
- </li>
|
|
|
- );
|
|
|
- })}
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </aside>
|
|
|
-
|
|
|
- {/* ===== 右侧主区 ===== */}
|
|
|
- <main className="flex-1 flex flex-col min-w-0">
|
|
|
- {/* 工具栏（48px） */}
|
|
|
- <header className="h-12 shrink-0 flex items-center justify-between gap-2 px-3 border-b border-gray-4 bg-gray-1">
|
|
|
- {/* 左侧：操作按钮区 */}
|
|
|
- <div className="flex items-center gap-2">
|
|
|
- <Tooltip title={activeId ? "截图整页（覆盖之前的自动截图）" : "请先选择任务"} placement="top">
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- icon={<PictureOutlined />}
|
|
|
- disabled={!activeId}
|
|
|
- onClick={() => void handleManualCapture()}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- <Divider type="vertical" />
|
|
|
- {/* 开始按钮：仅 idle + 已选任务时可点 */}
|
|
|
- <Tooltip title={startConfig.tip} placement="top">
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- icon={startConfig.icon}
|
|
|
- disabled={startDisabled}
|
|
|
- onClick={() => void handleStartRecord()}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- {/* 停止按钮：仅 recording 时可用 */}
|
|
|
- <Tooltip
|
|
|
- title={
|
|
|
- stopDisabled
|
|
|
- ? "无进行中的录制"
|
|
|
- : "停止录制并落盘 mp4（F11）"
|
|
|
- }
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- icon={<StopOutlined />}
|
|
|
- disabled={stopDisabled}
|
|
|
- onClick={() => void handleStopRecord()}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- <Divider type="vertical" />
|
|
|
- {/* 打开文件夹：reveal mp4 → png → 兜底 screenshots 目录 */}
|
|
|
- <Tooltip
|
|
|
- title={
|
|
|
- !activeId
|
|
|
- ? "请先选择任务"
|
|
|
- : assets?.recording_exists
|
|
|
- ? "在文件管理器中显示录制视频"
|
|
|
- : assets?.screenshot_exists
|
|
|
- ? "在文件管理器中显示截图"
|
|
|
- : "打开截图目录"
|
|
|
- }
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- icon={<FolderOpenOutlined />}
|
|
|
- disabled={!assets}
|
|
|
- onClick={() => void handleOpenFolder()}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- {/* 预览截图：仅当 png 存在 */}
|
|
|
- <Tooltip
|
|
|
- title={
|
|
|
- !assets?.screenshot_exists
|
|
|
- ? "暂无截图可预览"
|
|
|
- : "在新窗口预览截图"
|
|
|
- }
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- icon={<FileImageOutlined />}
|
|
|
- disabled={!assets?.screenshot_exists}
|
|
|
- onClick={() => void handlePreviewImage()}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- {/* 预览视频：仅当 mp4 存在 */}
|
|
|
- <Tooltip
|
|
|
- title={
|
|
|
- !assets?.recording_exists
|
|
|
- ? "暂无录制视频可预览"
|
|
|
- : "在新窗口预览录制视频"
|
|
|
- }
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- icon={<VideoCameraOutlined />}
|
|
|
- disabled={!assets?.recording_exists}
|
|
|
- onClick={() => void handlePreviewVideo()}
|
|
|
- />
|
|
|
- </Tooltip>
|
|
|
- </div>
|
|
|
+ <Layout className="m-0 p-0 h-full overflow-hidden">
|
|
|
+ <Header className="app-title h-8 select-none" style={{ paddingLeft: 8 }} >
|
|
|
+ <div className="flex h-full flex-row items-center">
|
|
|
+ <Space size={4}>
|
|
|
+ <Button className="app-close" icon={<CloseOutlined />} size="large" type="text" />
|
|
|
+ <Button icon={<BankOutlined />} disabled size="large" type="text" />
|
|
|
+ <Button className="app-minimize" icon={<MinusOutlined />} size="large" type="text" />
|
|
|
+ </Space>
|
|
|
+ <div className="w-32" />
|
|
|
+ <Tooltip title={activeId ? "截图整页（覆盖之前的自动截图）" : "请先选择任务"} placement="right">
|
|
|
+ <Button
|
|
|
+
|
|
|
+ shape="circle"
|
|
|
+ icon={<PictureOutlined />}
|
|
|
+ disabled={!activeId}
|
|
|
+ onClick={handleManualCapture}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ <Divider orientation="vertical" />
|
|
|
+ {/* 开始按钮：仅 idle + 已选任务时可点 */}
|
|
|
+ <Tooltip title={startConfig.tip} placement="right">
|
|
|
+ <Button
|
|
|
+
|
|
|
+ shape="circle"
|
|
|
+ icon={startConfig.icon}
|
|
|
+ disabled={startDisabled}
|
|
|
+ onClick={() => void handleStartRecord()}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ {/* 停止按钮：仅 recording 时可用 */}
|
|
|
+ <Tooltip
|
|
|
+ title={
|
|
|
+ stopDisabled
|
|
|
+ ? "无进行中的录制"
|
|
|
+ : "停止录制并落盘 mp4（F11）"
|
|
|
+ }
|
|
|
+ placement="right"
|
|
|
+ >
|
|
|
+ <Button
|
|
|
+
|
|
|
+ shape="circle"
|
|
|
+ icon={<StopOutlined />}
|
|
|
+ disabled={stopDisabled}
|
|
|
+ onClick={() => void handleStopRecord()}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ <Divider orientation="vertical" />
|
|
|
+ {/* 打开文件夹：reveal mp4 → png → 兜底 screenshots 目录 */}
|
|
|
+ <Tooltip
|
|
|
+ title={
|
|
|
+ !activeId
|
|
|
+ ? "请先选择任务"
|
|
|
+ : assets?.recording_exists
|
|
|
+ ? "在文件管理器中显示录制视频"
|
|
|
+ : assets?.screenshot_exists
|
|
|
+ ? "在文件管理器中显示截图"
|
|
|
+ : "打开截图目录"
|
|
|
+ }
|
|
|
+ placement="right"
|
|
|
+ >
|
|
|
+ <Button
|
|
|
+
|
|
|
+ shape="circle"
|
|
|
+ icon={<FolderOpenOutlined />}
|
|
|
+ disabled={!assets}
|
|
|
+ onClick={() => void handleOpenFolder()}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ {/* 预览截图：仅当 png 存在 */}
|
|
|
+ <Tooltip
|
|
|
+ title={
|
|
|
+ !assets?.screenshot_exists
|
|
|
+ ? "暂无截图可预览"
|
|
|
+ : "在新窗口预览截图"
|
|
|
+ }
|
|
|
+ placement="right"
|
|
|
+ >
|
|
|
+ <Button
|
|
|
+
|
|
|
+ shape="circle"
|
|
|
+ icon={<FileImageOutlined />}
|
|
|
+ disabled={!assets?.screenshot_exists}
|
|
|
+ onClick={() => void handlePreviewImage()}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ {/* 预览视频：仅当 mp4 存在 */}
|
|
|
+ <Tooltip
|
|
|
+ title={
|
|
|
+ !assets?.recording_exists
|
|
|
+ ? "暂无录制视频可预览"
|
|
|
+ : "在新窗口预览录制视频"
|
|
|
+ }
|
|
|
+ placement="right"
|
|
|
+ >
|
|
|
+ <Button
|
|
|
+
|
|
|
+ shape="circle"
|
|
|
+ icon={<VideoCameraOutlined />}
|
|
|
+ disabled={!assets?.recording_exists}
|
|
|
+ onClick={() => void handlePreviewVideo()}
|
|
|
+ />
|
|
|
+ </Tooltip>
|
|
|
+ <div className="flex-1">
|
|
|
|
|
|
- {/* 右侧：尺寸预设 / 自定义 */}
|
|
|
- <div className="flex items-center gap-2">
|
|
|
- {!customMode ? (
|
|
|
- <>
|
|
|
- {SIZE_PRESETS.map((p) => (
|
|
|
- <Button
|
|
|
- key={p.label}
|
|
|
- size="small"
|
|
|
- disabled={contentSize.w == p.w && contentSize.h == p.h}
|
|
|
- onClick={() => applyWorkAreaSize(p.w, p.h)}
|
|
|
- >
|
|
|
- {p.label}
|
|
|
- </Button>
|
|
|
- ))}
|
|
|
- <Button size="small" onClick={() => setCustomMode(true)}>
|
|
|
- 自定义
|
|
|
- </Button>
|
|
|
- </>
|
|
|
- ) : (
|
|
|
- <>
|
|
|
- <InputNumber
|
|
|
- size="small"
|
|
|
- min={200}
|
|
|
- max={3840}
|
|
|
- value={contentSize.w}
|
|
|
- onChange={(v) => setContentSize({ w: v || 0, h: contentSize.h })}
|
|
|
- style={{ width: 80 }}
|
|
|
- />
|
|
|
- <span className="text-gray-7 select-none">×</span>
|
|
|
- <InputNumber
|
|
|
- size="small"
|
|
|
- min={200}
|
|
|
- max={2160}
|
|
|
- value={contentSize.h}
|
|
|
- onChange={(v) => setContentSize({ w: contentSize.w, h: v || 0 })}
|
|
|
- style={{ width: 80 }}
|
|
|
- />
|
|
|
+ </div>
|
|
|
+ {!customMode ? (
|
|
|
+ <>
|
|
|
+ {SIZE_PRESETS.map((p) => (
|
|
|
<Button
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- onClick={() => applyWorkAreaSize(contentSize.w, contentSize.h)}
|
|
|
+ key={p.label}
|
|
|
+ type={contentSize.w == p.w && contentSize.h == p.h ? "primary" : undefined}
|
|
|
+
|
|
|
+ onClick={contentSize.w != p.w || contentSize.h != p.h ? () => applyWorkAreaSize(p.w, p.h) as any : undefined}
|
|
|
>
|
|
|
- 应用
|
|
|
- </Button>
|
|
|
- <Button size="small" onClick={() => setCustomMode(false)}>
|
|
|
- 取消
|
|
|
+ {p.label}
|
|
|
</Button>
|
|
|
- </>
|
|
|
+ ))}
|
|
|
+ {isCustomSize() ?
|
|
|
+ <Button type="primary" onClick={() => setCustomMode(true)}>
|
|
|
+ 自定义（{contentSize.w}x{contentSize.h}）
|
|
|
+ </Button> : <Button onClick={() => setCustomMode(true)}>
|
|
|
+ 自定义
|
|
|
+ </Button>}
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <InputNumber
|
|
|
+
|
|
|
+ min={200}
|
|
|
+ max={3840}
|
|
|
+ value={contentSize.w}
|
|
|
+ onChange={(v) => setContentSize({ w: v || 0, h: contentSize.h })}
|
|
|
+ style={{ width: 80 }}
|
|
|
+ />
|
|
|
+ <span className="text-gray-7 select-none">×</span>
|
|
|
+ <InputNumber
|
|
|
+
|
|
|
+ min={200}
|
|
|
+ max={2160}
|
|
|
+ value={contentSize.h}
|
|
|
+ onChange={(v) => setContentSize({ w: contentSize.w, h: v || 0 })}
|
|
|
+ style={{ width: 80 }}
|
|
|
+ />
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={() => {
|
|
|
+ setCustomMode(false);
|
|
|
+ applyWorkAreaSize();
|
|
|
+
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 应用
|
|
|
+ </Button>
|
|
|
+ <Button onClick={() => {
|
|
|
+ setContentSize(contentSizeRef.current)
|
|
|
+ setCustomMode(false);
|
|
|
+ }}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </Header>
|
|
|
+ <Layout>
|
|
|
+ <Sider className="select-none" collapsible collapsed={collapsed} onCollapse={(c) => handleCollaspsed(c)} width={180} style={{ background: colorBgContainer }}>
|
|
|
+ <Menu
|
|
|
+ mode="inline"
|
|
|
+ defaultSelectedKeys={[activeId || '']}
|
|
|
+ selectedKeys={[activeId || '']}
|
|
|
+ style={{ height: '100%', borderInlineEnd: 0 }}
|
|
|
+ onClick={handleSelectTask}
|
|
|
+
|
|
|
+ >
|
|
|
+ {mockTasks.map((t) => <Menu.Item icon={<LinkOutlined />} key={t.id}>
|
|
|
+ {t.id}
|
|
|
+ </Menu.Item>
|
|
|
)}
|
|
|
+ </Menu>
|
|
|
+ </Sider>
|
|
|
+ <Layout className="flex flex-row">
|
|
|
+ <Content className="w-full m-0 p-1 flex-1" />
|
|
|
+ <div className="w-full h-6 flex items-center bg-red-400 px-2 text-gray-3">
|
|
|
+ <div className="bg-gray-6 rounded-full w-3 h-3 m-2" style={{ backgroundColor: statusColor }} />
|
|
|
+ <div className="w-32">{statusText}</div>
|
|
|
+ <span className="flex-1">{notifyContext}</span>
|
|
|
</div>
|
|
|
- </header>
|
|
|
-
|
|
|
- {/* 工作区占位：实际由 Rust child webview 覆盖在此区域之上 */}
|
|
|
- <section className="flex-1 bg-gray-7" />
|
|
|
- <section className="h-10 bg-gray-5 broder border-gray-7" />
|
|
|
- </main>
|
|
|
- </div>
|
|
|
+ </Layout>
|
|
|
+ </Layout>
|
|
|
+ </Layout >
|
|
|
);
|
|
|
}
|
|
|
|
|
|
-export default App;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+export default function Main() {
|
|
|
+ return <ConfigProvider theme={{
|
|
|
+ // 1. Use dark algorithm alone
|
|
|
+ algorithm: [theme.darkAlgorithm, theme.compactAlgorithm]
|
|
|
+ }}>
|
|
|
+ <App />
|
|
|
+ </ ConfigProvider>
|
|
|
+};
|
