From 3a1d1a43eec8b3758e3a63b367c6f1956e22c3e8 Mon Sep 17 00:00:00 2001
From: shay7sev <shay7sev@gmail.com>
Date: Tue, 10 Mar 2026 14:15:53 +0800
Subject: [PATCH] perf(component): perf

---
 app/component/base/department/page.tsx        |   5 -
 app/component/base/placement/page.tsx         |  33 --
 app/component/base/select/page.tsx            |  69 ---
 app/component/label/ffmpeg/README.md          |  14 -
 .../label/ffmpeg/VideoFrameExtractor.tsx      | 401 ------------------
 app/component/label/ffmpeg/cap.test.ts        |  18 -
 app/component/label/ffmpeg/cap.ts             |  14 -
 app/component/label/ffmpeg/page.tsx           |   7 -
 app/component/label/login/page.tsx            |  37 --
 app/component/label/picture/page.tsx          |  41 --
 .../label/picture/standalone/page.tsx         |  11 -
 app/component/layout.tsx                      |  21 -
 app/component/media/dynamic/page.tsx          |   5 -
 app/component/media/static/page.tsx           |   5 -
 app/component/page.tsx                        |  12 -
 app/component/table/base/page.tsx             |   5 -
 components/label/LabelNossr.tsx               |   2 +-
 .../label/ffmpeg/ffmpeg.worker.ts             |   0
 .../label/ffmpeg}/processVideo.ts             |   6 +-
 19 files changed, 3 insertions(+), 703 deletions(-)
 delete mode 100644 app/component/base/department/page.tsx
 delete mode 100644 app/component/base/placement/page.tsx
 delete mode 100644 app/component/base/select/page.tsx
 delete mode 100644 app/component/label/ffmpeg/README.md
 delete mode 100644 app/component/label/ffmpeg/VideoFrameExtractor.tsx
 delete mode 100644 app/component/label/ffmpeg/cap.test.ts
 delete mode 100644 app/component/label/ffmpeg/cap.ts
 delete mode 100644 app/component/label/ffmpeg/page.tsx
 delete mode 100644 app/component/label/login/page.tsx
 delete mode 100644 app/component/label/picture/page.tsx
 delete mode 100644 app/component/label/picture/standalone/page.tsx
 delete mode 100644 app/component/layout.tsx
 delete mode 100644 app/component/media/dynamic/page.tsx
 delete mode 100644 app/component/media/static/page.tsx
 delete mode 100644 app/component/page.tsx
 delete mode 100644 app/component/table/base/page.tsx
 rename {app/component => components}/label/ffmpeg/ffmpeg.worker.ts (100%)
 rename {app/component/label/video2image => components/label/ffmpeg}/processVideo.ts (98%)

diff --git a/app/component/base/department/page.tsx b/app/component/base/department/page.tsx
deleted file mode 100644
index 2d1e5a3..0000000
--- a/app/component/base/department/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client"
-
-export default function ComponentBaseDepartmentPage() {
-  return <>ComponentBaseDepartmentPage</>
-}
diff --git a/app/component/base/placement/page.tsx b/app/component/base/placement/page.tsx
deleted file mode 100644
index cb539bf..0000000
--- a/app/component/base/placement/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-import {
-  Breadcrumbs,
-  Divider,
-  Paper,
-  Stack,
-  UnstyledButton,
-  Text,
-} from "@mantine/core"
-
-export default function ComponentBasePlacementPage() {
-  const items = [{ title: "布局组件" }].map((item) => (
-    <UnstyledButton key={item.title}>{item.title}</UnstyledButton>
-  ))
-
-  return (
-    <>
-      <Stack w="100%" h="calc(100vh - 56px)" p="md">
-        <Breadcrumbs>{items}</Breadcrumbs>
-        <Paper shadow="xs" p="0" flex={1} display="flex">
-          <Stack flex={1}>
-            <Stack flex={1} justify="center" align="center">
-              <Text c="dimmed">空</Text>
-            </Stack>
-          </Stack>
-          <Divider orientation="vertical"></Divider>
-          <Stack flex={2}></Stack>
-        </Paper>
-      </Stack>
-    </>
-  )
-}
diff --git a/app/component/base/select/page.tsx b/app/component/base/select/page.tsx
deleted file mode 100644
index 7141d16..0000000
--- a/app/component/base/select/page.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client"
-
-import TreeSelect from "@/components/tree-select"
-import { getCityTree } from "@/components/tree-select/api"
-import { TreeNode } from "@/components/tree-select/api/type"
-import { VirtualTreeSelect } from "@/components/tree-select/tree"
-import {
-  Breadcrumbs,
-  Flex,
-  Paper,
-  Stack,
-  TreeNodeData,
-  UnstyledButton,
-} from "@mantine/core"
-import { useCallback, useEffect, useState } from "react"
-
-const convertTreeNodeToTreeNodeData = (
-  list: TreeNode[],
-  level: number = 1
-): TreeNodeData[] =>
-  list.map((g) => ({
-    label: g.label,
-    value: g.value,
-    nodeProps: { level: level },
-    children:
-      g.children && g.children.length
-        ? convertTreeNodeToTreeNodeData(g.children, level + 1)
-        : [],
-  }))
-
-export default function ComponentBaseSelectPage() {
-  const items = [{ title: "选择组件" }].map((item) => (
-    <UnstyledButton key={item.title}>{item.title}</UnstyledButton>
-  ))
-
-  const [value, setValue] = useState<string>("")
-
-  const [treeData, setTreeData] = useState<TreeNodeData[]>([])
-  const asyncGetCityTree = useCallback(async () => {
-    const res = await getCityTree()
-    setTreeData(convertTreeNodeToTreeNodeData(res))
-  }, [])
-
-  useEffect(() => {
-    queueMicrotask(() => asyncGetCityTree())
-  }, [asyncGetCityTree])
-
-  return (
-    <>
-      <Stack w="100%" h="calc(100vh - 56px)" p="md">
-        <Breadcrumbs>{items}</Breadcrumbs>
-        <Paper shadow="xs" p={"md"} flex={1} display="flex">
-          <Flex h={"fit-content"} gap={"lg"}>
-            <TreeSelect treeData={treeData} />
-
-            <VirtualTreeSelect
-              data={treeData}
-              value={value}
-              onChange={setValue}
-              setCurrCityCode={() => {}}
-              w={"200px"}
-            />
-          </Flex>
-          <Flex>{value}</Flex>
-        </Paper>
-      </Stack>
-    </>
-  )
-}
diff --git a/app/component/label/ffmpeg/README.md b/app/component/label/ffmpeg/README.md
deleted file mode 100644
index 9878605..0000000
--- a/app/component/label/ffmpeg/README.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Video Frame Extractor (FFmpeg.wasm)
-
-## 运行位置
-- 纯前端：所有转码/抽帧在浏览器 Web Worker + WASM 内完成，不依赖后端服务。
-
-## 大文件最佳实践
-- 优先使用 WORKERFS 挂载输入文件，避免 `writeFile(arrayBuffer)` 将整段视频复制进 WASM 内存。
-- 抽帧建议走“单帧模式”：每次 `-ss <time> -frames:v 1` 只产出一张，读取后立即删除，避免在 WASM 内累积。
-- 输出建议使用 image2 序列 pattern（例如 `frame_%06d.jpg`）并配合 `-start_number`，避免 image2 的“必须是序列 pattern”报错路径。
-- UI 端必须对日志与图片列表做上限与释放（`URL.revokeObjectURL`），否则长视频会导致 JS 堆持续增长。
-
-## 故障恢复
-- 一旦出现 `Aborted()` / `memory access out of bounds`，当前 FFmpeg.wasm 实例可能进入不可恢复状态，需要 terminate 并重建实例/worker。
-
diff --git a/app/component/label/ffmpeg/VideoFrameExtractor.tsx b/app/component/label/ffmpeg/VideoFrameExtractor.tsx
deleted file mode 100644
index ac73e91..0000000
--- a/app/component/label/ffmpeg/VideoFrameExtractor.tsx
+++ /dev/null
@@ -1,401 +0,0 @@
-import {
-  ActionIcon,
-  Alert,
-  Box,
-  Button,
-  Card,
-  Container,
-  FileInput,
-  Flex,
-  Group,
-  Image,
-  Loader,
-  Progress,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core"
-import {
-  IconAlertCircle,
-  IconDownload,
-  IconMovie,
-  IconPhoto,
-} from "@tabler/icons-react"
-import { useEffect, useRef, useState } from "react"
-import { appendCapped } from "./cap"
-import type { WorkerResponse } from "./ffmpeg.worker"
-import { getServerImage } from "@/components/label/api/label"
-
-export default function VideoFrameExtractor() {
-  const [loaded, setLoaded] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [file, setFile] = useState<File | null>(null)
-  const [processing, setProcessing] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const [message, setMessage] = useState("Wait for loading...")
-  const [error, setError] = useState<string | null>(null)
-  const [images, setImages] = useState<{ url: string; name: string }[]>([])
-  const [logs, setLogs] = useState<string[]>([])
-
-  const workerRef = useRef<Worker | null>(null)
-  const messageRef = useRef<HTMLDivElement>(null)
-  const extractedCountRef = useRef(0)
-
-  const MAX_LOG_LINES = 300
-  const MAX_IMAGES = 1500
-
-  // Initialize Worker once
-  useEffect(() => {
-    queueMicrotask(() => {
-      if (!workerRef.current) {
-        setIsLoading(true)
-
-        const baseURL = window.location.origin + "/wasm"
-
-        const createWorker = () => {
-          const worker = new Worker(
-            new URL("./ffmpeg.worker.ts", import.meta.url)
-          )
-          workerRef.current = worker
-          return worker
-        }
-
-        const handleMessage = (event: MessageEvent<WorkerResponse>) => {
-          const { type } = event.data
-
-          switch (type) {
-            case "READY":
-              setLoaded(true)
-              setIsLoading(false)
-              setMessage("FFmpeg loaded successfully")
-              break
-            case "LOG":
-              if ("message" in event.data) {
-                const msg = event.data.message
-                setLogs((prev) => appendCapped(prev, [msg], MAX_LOG_LINES))
-                if (messageRef.current) {
-                  messageRef.current.scrollTop = messageRef.current.scrollHeight
-                }
-              }
-              break
-            case "PROGRESS":
-              if ("progress" in event.data) {
-                const p = Math.round(event.data.progress * 100)
-                setProgress(p)
-                setMessage(`Processing... ${p}%`)
-              }
-              break
-            case "SEGMENT_DATA":
-              if ("files" in event.data) {
-                const newImages = event.data.files.map((f: any) => {
-                  const blob = new Blob([f.data], { type: "image/jpeg" })
-                  return { url: URL.createObjectURL(blob), name: f.name }
-                })
-                extractedCountRef.current += newImages.length
-                setImages((prev) =>
-                  appendCapped(prev, newImages, MAX_IMAGES, (img) =>
-                    URL.revokeObjectURL((img as any).url)
-                  )
-                )
-                setMessage(
-                  `Processing... Extracted ${extractedCountRef.current} frames.`
-                )
-              }
-              break
-            case "DONE":
-              setMessage(
-                `Completed! Extracted ${extractedCountRef.current} frames.`
-              )
-              setProcessing(false)
-              break
-            case "FATAL":
-              if ("error" in event.data) {
-                setError(event.data.error)
-                setProcessing(false)
-                setLoaded(false)
-                setIsLoading(true)
-              }
-              if (workerRef.current) {
-                workerRef.current.terminate()
-                workerRef.current = null
-              }
-              {
-                const worker = createWorker()
-                worker.onmessage = handleMessage
-                worker.postMessage({ type: "LOAD", baseURL })
-              }
-              break
-            case "ERROR":
-              if ("error" in event.data) {
-                setError(event.data.error)
-                setProcessing(false)
-                setIsLoading(false)
-              }
-              break
-          }
-        }
-
-        const worker = createWorker()
-        worker.onmessage = handleMessage
-
-        worker.postMessage({ type: "LOAD", baseURL })
-      }
-    })
-    // Only create worker if not exists
-
-    // Cleanup worker on unmount?
-    // Usually good practice, but if we want to keep it alive for navigation back/forth,
-    // we might want to move it to Context.
-    // For this task, local cleanup is fine.
-    return () => {
-      if (workerRef.current) {
-        workerRef.current.terminate()
-        workerRef.current = null
-      }
-    }
-  }, [])
-
-  /**
-   * 将视频 Base64 转换为 File 对象
-   * @param {string} base64String - 视频 Base64 字符串
-   * @param {string} fileName - 文件名 (例如 'video.mp4')
-   * @returns {File}
-   */
-  function videoBase64ToFile(base64String: string, fileName: string) {
-    // 1. 提取 MIME 类型和数据
-    const parts = base64String.split(",")
-    const mime = parts[0].match(/:(.*?);/)?.[1] // 可能是 video/mp4, video/webm 等
-
-    // 2. 解码
-    const bstr = atob(parts[1])
-    let n = bstr.length
-    const u8arr = new Uint8Array(n)
-
-    // 3. 填充字节数组
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n)
-    }
-
-    // 4. 返回 File 对象
-    return new File([u8arr], fileName, { type: mime })
-  }
-
-  const getServerVideo = async () => {
-    const params = {
-      data_names: ["6874b86e341d1d0e4c75d0d5.h264"],
-      data_type: 0,
-      project_id: 9,
-    }
-    let text
-    const response = await getServerImage(params)
-    text = `data:video/h264;base64,${response}`
-
-    const fileRes = videoBase64ToFile(text, "6874b86e341d1d0e4c75d0d5.h264")
-
-    // const videoFile = new File([response], "6874b86e341d1d0e4c75d0d5.264", {
-    //   type: "video/264",
-    // })
-    setFile(fileRes)
-  }
-
-  function downloadFile(file: File | null) {
-    if (!file) return
-    // 创建一个临时的 DOM URL 指向内存中的文件
-    const url = URL.createObjectURL(file)
-
-    // 创建一个隐藏的 a 标签
-    const a = document.createElement("a")
-    a.style.display = "none"
-    a.href = url
-    a.download = file.name // 设置下载后的文件名
-
-    // 将标签添加到文档中并触发点击
-    document.body.appendChild(a)
-    a.click()
-
-    // 清理工作：移除标签并释放内存 URL
-    document.body.removeChild(a)
-    window.URL.revokeObjectURL(url)
-  }
-
-  const processVideo = () => {
-    if (!file || !loaded || !workerRef.current) return
-
-    setProcessing(true)
-    setProgress(0)
-    extractedCountRef.current = 0
-    for (const img of images) URL.revokeObjectURL(img.url)
-    setImages([])
-    setLogs([])
-    setError(null)
-    setMessage("Starting processing...")
-
-    // Extract 1 frame per second: -vf fps=1
-    // Optimize: Scale down to 720p max width to save memory
-    workerRef.current.postMessage({
-      type: "EXEC",
-      file,
-      args: [
-        "-vf",
-        "fps=1,scale='min(720,iw)':-2:flags=lanczos+accurate_rnd+full_chroma_int,unsharp=5:5:0.5:3:3:0",
-        "-q:v",
-        "2",
-        "frame_%03d.jpg",
-      ],
-      outputPattern: "frame_",
-    })
-  }
-
-  const downloadAll = () => {
-    images.forEach((img, index) => {
-      setTimeout(() => {
-        const a = document.createElement("a")
-        a.href = img.url
-        a.download = img.name
-        a.click()
-      }, index * 200)
-    })
-  }
-
-  return (
-    <Container size="lg" py="xl">
-      <Stack gap="lg">
-        <Title order={2}>Video Frame Extractor (Worker + Local WASM)</Title>
-        <Text c="dimmed">
-          Extract frames from your video files purely in the browser using
-          FFmpeg.wasm (Async Worker).
-        </Text>
-
-        {error && (
-          <Alert
-            icon={<IconAlertCircle size={16} />}
-            title="Error"
-            color="red"
-            withCloseButton
-            onClose={() => setError(null)}>
-            {error}
-          </Alert>
-        )}
-
-        <Card withBorder shadow="sm" p="lg" radius="md">
-          <Flex gap={"md"}>
-            <Button onClick={getServerVideo}>getServerVideo</Button>
-            <Button
-              onClick={() => {
-                downloadFile(file)
-              }}>
-              downloadFile
-            </Button>
-          </Flex>
-
-          <Stack gap="md">
-            <FileInput
-              label="Select Video File"
-              placeholder="Click to select MP4, WebM..."
-              // accept="video/*"
-              leftSection={<IconMovie size={16} />}
-              value={file}
-              onChange={setFile}
-              disabled={!loaded || processing}
-            />
-
-            {!loaded && isLoading && (
-              <Group>
-                <Loader size="sm" />
-                <Text size="sm">Loading FFmpeg core...</Text>
-              </Group>
-            )}
-
-            {loaded && (
-              <Group justify="flex-end">
-                <Button
-                  onClick={processVideo}
-                  disabled={!file || processing}
-                  loading={processing}
-                  leftSection={<IconPhoto size={16} />}>
-                  {processing ? "Processing..." : "Start Extraction"}
-                </Button>
-              </Group>
-            )}
-
-            {processing && (
-              <Stack gap="xs">
-                <Text size="sm">{message}</Text>
-                <Progress value={progress} animated />
-              </Stack>
-            )}
-          </Stack>
-        </Card>
-
-        {logs.length > 0 && (
-          <Card withBorder shadow="sm" p="xs" radius="md" bg="gray.0">
-            <Text size="xs" fw={500} mb="xs">
-              Logs
-            </Text>
-            <ScrollArea h={100} type="always" viewportRef={messageRef}>
-              <Box
-                style={{
-                  whiteSpace: "pre-wrap",
-                  fontFamily: "monospace",
-                  fontSize: "11px",
-                }}>
-                {logs.map((log, i) => (
-                  <div key={i}>{log}</div>
-                ))}
-              </Box>
-            </ScrollArea>
-          </Card>
-        )}
-
-        {images.length > 0 && (
-          <Stack gap="md">
-            <Group justify="space-between" align="center">
-              <Title order={3}>Extracted Frames ({images.length})</Title>
-              <Button
-                variant="outline"
-                leftSection={<IconDownload size={16} />}
-                onClick={downloadAll}>
-                Download All
-              </Button>
-            </Group>
-
-            <SimpleGrid cols={{ base: 2, sm: 3, md: 4 }} spacing="md">
-              {images.map((img) => (
-                <Card
-                  key={img.name}
-                  shadow="sm"
-                  padding="xs"
-                  radius="md"
-                  withBorder>
-                  <Card.Section>
-                    <Image
-                      src={img.url}
-                      height={160}
-                      alt={img.name}
-                      fit="cover"
-                    />
-                  </Card.Section>
-                  <Group justify="space-between" mt="xs" mb="xs">
-                    <Text fw={500} size="xs" truncate>
-                      {img.name}
-                    </Text>
-                    <ActionIcon
-                      variant="light"
-                      color="blue"
-                      component="a"
-                      href={img.url}
-                      download={img.name}>
-                      <IconDownload size={14} />
-                    </ActionIcon>
-                  </Group>
-                </Card>
-              ))}
-            </SimpleGrid>
-          </Stack>
-        )}
-      </Stack>
-    </Container>
-  )
-}
diff --git a/app/component/label/ffmpeg/cap.test.ts b/app/component/label/ffmpeg/cap.test.ts
deleted file mode 100644
index d0cae1e..0000000
--- a/app/component/label/ffmpeg/cap.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { appendCapped } from "./cap"
-
-describe("appendCapped", () => {
-  test("keeps all items when under max", () => {
-    expect(appendCapped([1, 2], [3], 10)).toEqual([1, 2, 3])
-  })
-
-  test("drops from head when exceeding max", () => {
-    expect(appendCapped([1, 2], [3, 4, 5], 3)).toEqual([3, 4, 5])
-  })
-
-  test("calls onDrop for dropped items", () => {
-    const dropped: number[] = []
-    const result = appendCapped([1, 2], [3, 4, 5], 3, (x) => dropped.push(x))
-    expect(result).toEqual([3, 4, 5])
-    expect(dropped).toEqual([1, 2])
-  })
-})
diff --git a/app/component/label/ffmpeg/cap.ts b/app/component/label/ffmpeg/cap.ts
deleted file mode 100644
index bc892d7..0000000
--- a/app/component/label/ffmpeg/cap.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const appendCapped = <T>(
-  prev: T[],
-  next: T[],
-  max: number,
-  onDrop?: (item: T) => void
-) => {
-  const merged = [...prev, ...next]
-  if (merged.length <= max) return merged
-  const dropCount = merged.length - max
-  if (onDrop) {
-    for (let i = 0; i < dropCount; i += 1) onDrop(merged[i])
-  }
-  return merged.slice(dropCount)
-}
diff --git a/app/component/label/ffmpeg/page.tsx b/app/component/label/ffmpeg/page.tsx
deleted file mode 100644
index c4c4082..0000000
--- a/app/component/label/ffmpeg/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client"
-
-import VideoFrameExtractor from "./VideoFrameExtractor"
-
-export default function ComponentLabelFfmpegPage() {
-  return <VideoFrameExtractor />
-}
diff --git a/app/component/label/login/page.tsx b/app/component/label/login/page.tsx
deleted file mode 100644
index 2bd8351..0000000
--- a/app/component/label/login/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client"
-
-import { userLogin } from "@/components/label/api/label"
-import { usePermissionStore } from "@/components/label/store/auth"
-import { Button } from "@mantine/core"
-
-export default function ComponentLabelLoginPage() {
-  const { setUserInfo, setUserPassword } = usePermissionStore()
-  const user_id = usePermissionStore.getState().user_id
-
-  // 用户登录
-  const handleUserLoginBtnClick = async () => {
-    try {
-      const res = await userLogin({
-        name: "admin",
-        password: "123456",
-      })
-      const { uid, name, token, refresh_token } = res
-      setUserInfo({
-        user_id: uid,
-        user_name: name,
-        token,
-        refresh_token,
-        detailInfo: res,
-      })
-      setUserPassword("123456")
-    } catch (error) {
-      console.log(error)
-    }
-  }
-  return (
-    <>
-      <Button onClick={handleUserLoginBtnClick}>Login</Button>
-      user_id:{user_id}
-    </>
-  )
-}
diff --git a/app/component/label/picture/page.tsx b/app/component/label/picture/page.tsx
deleted file mode 100644
index 14dc52b..0000000
--- a/app/component/label/picture/page.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client"
-
-import LabelContent from "@/components/label"
-import { useAppLayoutStore } from "@/components/layout/store"
-import { Breadcrumbs, Flex, Paper, Stack, UnstyledButton } from "@mantine/core"
-import { useMemo } from "react"
-
-export default function ComponentLabelPicturePage() {
-  const items = [{ title: "地图展示" }].map((item) => (
-    <UnstyledButton key={item.title}>{item.title}</UnstyledButton>
-  ))
-  const { isOpen } = useAppLayoutStore()
-  let leftWidth = useMemo(() => {
-    let width = 69
-    return !isOpen ? width : width + 160
-  }, [isOpen])
-  return (
-    <>
-      <Stack w="100%" h="calc(100vh - 56px)" p={"md"}>
-        <Flex justify={"space-between"} align={"center"} h={"16px"}>
-          <Breadcrumbs>{items}</Breadcrumbs>
-        </Flex>
-        <Paper
-          shadow="xs"
-          p="0"
-          flex={1}
-          display="flex"
-          style={{
-            overflow: "hidden",
-          }}>
-          <LabelContent
-            headerHeight={128}
-            leftWidth={leftWidth}
-            project_id={1}
-            task_id={3}
-          />
-        </Paper>
-      </Stack>
-    </>
-  )
-}
diff --git a/app/component/label/picture/standalone/page.tsx b/app/component/label/picture/standalone/page.tsx
deleted file mode 100644
index 3650f11..0000000
--- a/app/component/label/picture/standalone/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client"
-
-import LabelContent from "@/components/label"
-
-export default function ComponentLabelPictureStandalonePage() {
-  return (
-    <>
-      <LabelContent headerHeight={0} leftWidth={0} project_id={1} task_id={3} />
-    </>
-  )
-}
diff --git a/app/component/layout.tsx b/app/component/layout.tsx
deleted file mode 100644
index 11900c0..0000000
--- a/app/component/layout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import AppLayout from "@/components/layout/AppLayout"
-import { PathnameRecorder } from "@/components/layout/PathnameRecorder"
-import { componentList, showList } from "@/components/layout/common"
-
-async function getMenu() {
-  return [...componentList, ...showList]
-}
-
-export default async function Layout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const menu = await getMenu()
-  return (
-    <AppLayout menu={menu}>
-      {children}
-      <PathnameRecorder menu={menu} />
-    </AppLayout>
-  )
-}
diff --git a/app/component/media/dynamic/page.tsx b/app/component/media/dynamic/page.tsx
deleted file mode 100644
index 00e3dbb..0000000
--- a/app/component/media/dynamic/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client"
-
-export default function ComponentMediaDynamicPage() {
-  return <>ComponentMediaDynamicPage</>
-}
diff --git a/app/component/media/static/page.tsx b/app/component/media/static/page.tsx
deleted file mode 100644
index 3300250..0000000
--- a/app/component/media/static/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client"
-
-export default function ComponentMediaStaticPage() {
-  return <>ComponentMediaStaticPage</>
-}
diff --git a/app/component/page.tsx b/app/component/page.tsx
deleted file mode 100644
index 94673cf..0000000
--- a/app/component/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client"
-
-import { useRouter } from "next/navigation"
-import { useEffect } from "react"
-
-export default function ComponentPage() {
-  const router = useRouter()
-  useEffect(() => {
-    router.push("/component/base/department")
-  }, [router])
-  return <></>
-}
diff --git a/app/component/table/base/page.tsx b/app/component/table/base/page.tsx
deleted file mode 100644
index 8412a3e..0000000
--- a/app/component/table/base/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client"
-
-export default function ComponentTableBasePage() {
-  return <>ComponentTableBasePage</>
-}
diff --git a/components/label/LabelNossr.tsx b/components/label/LabelNossr.tsx
index 191981e..f246eab 100644
--- a/components/label/LabelNossr.tsx
+++ b/components/label/LabelNossr.tsx
@@ -10,7 +10,6 @@ import {
 } from "react"
 import ScaleComponent from "./components/ScaleComponent"
 
-import { processVideo } from "@/app/component/label/video2image/processVideo"
 import { Box, Button, Flex, LoadingOverlay, Stack } from "@mantine/core"
 import { notifications, showNotification } from "@mantine/notifications"
 import { getLabelResult, getServerImage } from "./api/label"
@@ -35,6 +34,7 @@ import RightQATools from "./components/RightQATools"
 import RightTaskTools from "./components/RightTaskTools"
 import ScaleToolContainer from "./components/ScaleToolContainer"
 import TopTools from "./components/TopTools"
+import { processVideo } from "./ffmpeg/processVideo"
 import {
   useImagesStore,
   useKeyEventStore,
diff --git a/app/component/label/ffmpeg/ffmpeg.worker.ts b/components/label/ffmpeg/ffmpeg.worker.ts
similarity index 100%
rename from app/component/label/ffmpeg/ffmpeg.worker.ts
rename to components/label/ffmpeg/ffmpeg.worker.ts
diff --git a/app/component/label/video2image/processVideo.ts b/components/label/ffmpeg/processVideo.ts
similarity index 98%
rename from app/component/label/video2image/processVideo.ts
rename to components/label/ffmpeg/processVideo.ts
index 551a43b..9662ad5 100644
--- a/app/component/label/video2image/processVideo.ts
+++ b/components/label/ffmpeg/processVideo.ts
@@ -1,6 +1,6 @@
 "use client"
 
-import type { WorkerMessage, WorkerResponse } from "../ffmpeg/ffmpeg.worker"
+import type { WorkerMessage, WorkerResponse } from "./ffmpeg.worker"
 
 export interface VideoFrameFile {
   name: string
@@ -161,9 +161,7 @@ export const processVideo = async (
     runTimeoutMs: number,
     runFirstFrameTimeoutMs: number
   ) => {
-    const worker = new Worker(
-      new URL("../ffmpeg/ffmpeg.worker.ts", import.meta.url)
-    )
+    const worker = new Worker(new URL("./ffmpeg.worker.ts", import.meta.url))
     const outputExt = getOutputExtFromArgs(runArgs)
     let frameIndex = 0
     const frames: VideoFrameFile[] = []