feat(cherry-store): add cherry store (#8683)

* feat(discover): implement Discover feature with routing and UI components

- Added a new Discover page with sidebar and main content areas.
- Integrated routing for Discover, including subcategories and tabs.
- Created components for Discover sidebar and main content.
- Updated localization files to include new Discover titles and labels.
- Refactored existing components to accommodate the new Discover feature.
- Enhanced sidebar icons and navigation for better user experience.

* feat(discover): enhance Discover page with Tailwind CSS integration and routing improvements

- Added Tailwind CSS import to the entry point for styling.
- Updated the ThemeProvider to dynamically apply Tailwind themes based on user selection.
- Refactored Discover page to utilize new ROUTERS structure for better routing management.
- Simplified category handling in useDiscoverCategories hook by leveraging ROUTERS_ENTRIES.
- Introduced InternalCategory interface for better type management in Discover components.
- Cleaned up unused code and comments for improved readability.

* fix: update import statement for linguist-languages in update-languages.ts

* fix: standardize import quotes and improve localization files

- Updated import statements in use-mobile.ts and motionVariants.ts to use single quotes for consistency.
- Added new localization entries for the "discover" section in multiple language files, including English, Japanese, Russian, Traditional Chinese, Greek, Spanish, French, and Portuguese.

* refactor(discover): simplify Discover page structure and improve routing logic

- Refactored DiscoverPage component to streamline tab and sidebar handling.
- Updated routing logic to utilize a new ROUTERS_MAP for better category management.
- Removed unused props and simplified state management in useDiscoverCategories hook.
- Enhanced DiscoverSidebar and DiscoverMain components for improved clarity and performance.
- Adjusted CherryStoreType enum values for consistency in path definitions.

* fix: update file upload body type in MineruPreprocessProvider

- Changed the body of the fetch request from a Buffer to a Uint8Array to ensure proper handling of binary data during PDF uploads.

* fix: ensure Blob creation uses a copy of byte arrays for image handling

- Updated Blob creation in ImageGenerationMiddleware, ImageViewer, and MessageImage components to use `slice()` on byte arrays, preventing potential mutations of the original data.

* chore: update Vite React SWC plugin and adjust Electron config for conditional styling

- Upgraded `@vitejs/plugin-react-swc` from version 3.9.0 to 3.11.0 for improved performance and features.
- Modified Electron Vite configuration to conditionally apply styled-components plugin based on the VITEST environment variable.
- Updated snapshot tests for `InputEmbeddingDimension` and `Spinner` components to reflect style changes.

* chore: upgrade @swc/plugin-styled-components to version 9.0.2 in package.json and yarn.lock

* refactor: streamline styled-components plugin configuration in Electron Vite setup

- Consolidated the styled-components plugin configuration in the Electron Vite config file for improved readability and maintainability.
- Removed conditional application of the plugin based on the VITEST environment variable, ensuring consistent styling behavior across environments.

* i18n: update translations for discover section across multiple languages

- Replaced placeholder text with accurate translations for the "discover" section in English, Japanese, Russian, Traditional Chinese, Greek, Spanish, French, and Portuguese.
- Ensured consistency in terminology and improved clarity in user-facing messages.

* i18n: update "discover" title translations across multiple languages

- Updated the "discover" title in English, Japanese, Russian, Traditional Chinese, Greek, Spanish, French, and Portuguese to ensure accurate and consistent terminology.
- Adjusted related key mappings in the localization files for improved clarity in user-facing messages.

* chore: update lucide-react to version 0.536.0 and clean up tsconfig paths

* fix: update input style in snapshot tests and format message mentions in MessageContent component

.prettierrc

@@ -3,9 +3,11 @@
   "endOfLine": "lf",
   "jsonRecursiveSort": true,
   "jsonSortOrder": "{\"*\": \"lexical\"}",
-  "plugins": ["prettier-plugin-sort-json"],
+  "plugins": ["prettier-plugin-sort-json", "prettier-plugin-tailwindcss"],
   "printWidth": 120,
   "semi": false,
   "singleQuote": true,
+  "tailwindFunctions": ["clsx"],
+  "tailwindStylesheet": "./src/renderer/src/assets/styles/tailwind.css",
   "trailingComma": "none"
 }

components.json

@@ -0,0 +1,21 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+      "config": "",
+      "css": "src/renderer/src/assets/styles/tailwind.css",
+      "baseColor": "zinc",
+      "cssVariables": true,
+      "prefix": ""
+    },
+    "aliases": {
+      "components": "@renderer/ui/third-party",
+      "utils": "@renderer/utils",
+      "ui": "@renderer/ui",
+      "lib": "@renderer/lib",
+      "hooks": "@renderer/hooks"
+    },
+    "iconLibrary": "lucide"
+}

electron.vite.config.ts

@@ -58,6 +58,7 @@ export default defineConfig({
   },
   renderer: {
     plugins: [
+      (async () => (await import('@tailwindcss/vite')).default())(),
       react({
         tsDecorators: true,
         plugins: [

eslint.config.mjs

@@ -122,7 +122,8 @@ export default defineConfig([
       '.yarn/**',
       '.gitignore',
       'scripts/cloudflare-worker.js',
-      'src/main/integration/nutstore/sso/lib/**'
+      'src/main/integration/nutstore/sso/lib/**',
+      'src/renderer/src/ui/**'
     ]
   }
 ])

package.json

@@ -128,9 +128,17 @@
     "@opentelemetry/sdk-trace-node": "^2.0.0",
     "@opentelemetry/sdk-trace-web": "^2.0.0",
     "@playwright/test": "^1.52.0",
+    "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@reduxjs/toolkit": "^2.2.5",
     "@shikijs/markdown-it": "^3.9.1",
-    "@swc/plugin-styled-components": "^7.1.5",
+    "@swc/plugin-styled-components": "^9.0.2",
+    "@tailwindcss/vite": "^4.1.5",
     "@tanstack/react-query": "^5.27.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@testing-library/dom": "^10.4.0",
@@ -154,7 +162,7 @@
     "@uiw/codemirror-extensions-langs": "^4.23.14",
     "@uiw/codemirror-themes-all": "^4.23.14",
     "@uiw/react-codemirror": "^4.23.14",
-    "@vitejs/plugin-react-swc": "^3.9.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
@@ -168,7 +176,9 @@
     "axios": "^1.7.3",
     "browser-image-compression": "^2.0.2",
     "chardet": "^2.1.0",
+    "class-variance-authority": "^0.7.1",
     "cli-progress": "^3.12.0",
+    "clsx": "^2.1.1",
     "code-inspector-plugin": "^0.20.14",
     "color": "^5.0.0",
     "country-flag-emoji-polyfill": "0.1.8",
@@ -208,12 +218,13 @@
     "lint-staged": "^15.5.0",
     "lodash": "^4.17.21",
     "lru-cache": "^11.1.0",
-    "lucide-react": "^0.525.0",
+    "lucide-react": "^0.536.0",
     "macos-release": "^3.4.0",
     "markdown-it": "^14.1.0",
     "mermaid": "^11.7.0",
     "mime": "^4.0.4",
-    "motion": "^12.10.5",
+    "motion": "^12.12.1",
+    "next-themes": "^0.4.6",
     "notion-helper": "^1.3.22",
     "npx-scope-finder": "^1.2.0",
     "openai": "patch:openai@npm%3A5.1.0#~/.yarn/patches/openai-npm-5.1.0-0e7b3ccb07.patch",
@@ -222,6 +233,7 @@
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
     "prettier-plugin-sort-json": "^4.1.1",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "proxy-agent": "^6.5.0",
     "rc-virtual-list": "^3.18.6",
     "react": "^19.0.0",
@@ -252,13 +264,17 @@
     "strict-url-sanitise": "^0.0.1",
     "string-width": "^7.2.0",
     "styled-components": "^6.1.11",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.5",
     "tar": "^7.4.3",
     "tiny-pinyin": "^1.3.2",
     "tokenx": "^1.1.0",
     "tsx": "^4.20.3",
+    "tw-animate-css": "^1.3.6",
     "typescript": "^5.6.2",
     "undici": "6.21.2",
     "unified": "^11.0.5",
+    "usehooks-ts": "^3.1.1",
     "uuid": "^10.0.0",
     "vite": "npm:rolldown-vite@latest",
     "vitest": "^3.2.4",

scripts/update-languages.ts

@@ -1,6 +1,6 @@
 import { exec } from 'child_process'
 import * as fs from 'fs/promises'
-import linguistLanguages from 'linguist-languages'
+import * as linguistLanguages from 'linguist-languages'
 import * as path from 'path'
 import { promisify } from 'util'
 

src/main/knowledge/preprocess/MineruPreprocessProvider.ts

@@ -273,7 +273,7 @@ export default class MineruPreprocessProvider extends BasePreprocessProvider {
 
       const response = await fetch(uploadUrl, {
         method: 'PUT',
-        body: fileBuffer,
+        body: new Uint8Array(fileBuffer),
         headers: {
           'Content-Type': 'application/pdf'
         }

src/renderer/src/Router.tsx

@@ -7,12 +7,11 @@ import Sidebar from './components/app/Sidebar'
 import TabsContainer from './components/Tab/TabContainer'
 import NavigationHandler from './handler/NavigationHandler'
 import { useNavbarPosition } from './hooks/useSettings'
-import AgentsPage from './pages/agents/AgentsPage'
+import DiscoverPage from './pages/discover'
 import FilesPage from './pages/files/FilesPage'
 import HomePage from './pages/home/HomePage'
 import KnowledgePage from './pages/knowledge/KnowledgePage'
 import LaunchpadPage from './pages/launchpad/LaunchpadPage'
-import MinAppsPage from './pages/minapps/MinAppsPage'
 import PaintingsRoutePage from './pages/paintings/PaintingsRoutePage'
 import SettingsPage from './pages/settings/SettingsPage'
 import TranslatePage from './pages/translate/TranslatePage'
@@ -24,14 +23,15 @@ const Router: FC = () => {
     return (
       <Routes>
         <Route path="/" element={<HomePage />} />
-        <Route path="/agents" element={<AgentsPage />} />
+        {/* <Route path="/agents" element={<AgentsPage />} /> */}
         <Route path="/paintings/*" element={<PaintingsRoutePage />} />
         <Route path="/translate" element={<TranslatePage />} />
         <Route path="/files" element={<FilesPage />} />
         <Route path="/knowledge" element={<KnowledgePage />} />
-        <Route path="/apps" element={<MinAppsPage />} />
+        {/* <Route path="/apps" element={<MinAppsPage />} /> */}
         <Route path="/settings/*" element={<SettingsPage />} />
         <Route path="/launchpad" element={<LaunchpadPage />} />
+        <Route path="/discover/*" element={<DiscoverPage />} />
       </Routes>
     )
   }, [])

src/renderer/src/aiCore/middleware/feat/ImageGenerationMiddleware.ts

@@ -50,7 +50,9 @@ export const ImageGenerationMiddleware: CompletionsMiddleware =
               if (!block.file) return null
               const binaryData: Uint8Array = await FileManager.readBinaryImage(block.file)
               const mimeType = `${block.file.type}/${block.file.ext.slice(1)}`
-              return await toFile(new Blob([binaryData]), block.file.origin_name || 'image.png', { type: mimeType })
+              return await toFile(new Blob([binaryData.slice()]), block.file.origin_name || 'image.png', {
+                type: mimeType
+              })
             })
           )
           imageFiles = imageFiles.concat(userImages.filter(Boolean) as Blob[])

src/renderer/src/assets/styles/index.scss

@@ -49,6 +49,7 @@ body {
   font-family: var(--font-family);
   text-rendering: optimizeLegibility;
   transition: background-color 0.3s linear;
+  background-color: unset;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/renderer/src/assets/styles/tailwind.css

@@ -0,0 +1,146 @@
+@import 'tailwindcss' source('../../../../renderer');
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+/* 如需自定义:
+1. 清晰地组织自定义 CSS 到相应的层中。
+2. 基础样式（如全局重置、链接样式）放入 base 层；
+3. 可复用的组件样式（如果仍使用 @apply 或原生 CSS 嵌套创建）放入 components 层；
+4. 新的自定义工具类放入 utilities 层。 
+*/
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-marquee: marquee var(--duration) infinite linear;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/renderer/src/components/CodeBlockView/MermaidPreview.tsx

@@ -142,7 +142,7 @@ const MermaidPreview: React.FC<BasicPreviewProps> = ({ children, setTools }) =>
     <Spin spinning={isLoading} indicator={<LoadingIcon color="var(--color-text-2)" />}>
       <Flex vertical style={{ minHeight: isLoading ? '2rem' : 'auto' }}>
         {(mermaidError || error) && <PreviewError>{mermaidError || error}</PreviewError>}
-        <StyledMermaid ref={mermaidRef} className="mermaid  special-preview" />
+        <StyledMermaid ref={mermaidRef} className="mermaid special-preview" />
       </Flex>
     </Spin>
   )

src/renderer/src/components/ImageViewer.tsx

@@ -36,7 +36,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ src, style, ...props }) => {
         if (!match) throw new Error('无效的 base64 图片格式')
         const mimeType = match[1]
         const byteArray = Base64.toUint8Array(match[2])
-        const blob = new Blob([byteArray], { type: mimeType })
+        const blob = new Blob([byteArray.slice()], { type: mimeType })
         await navigator.clipboard.write([new ClipboardItem({ [mimeType]: blob })])
       } else if (src.startsWith('file://')) {
         // 处理本地文件路径

src/renderer/src/components/Popups/AddAssistantPopup.tsx

@@ -1,7 +1,7 @@
 import { TopView } from '@renderer/components/TopView'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
-import { useSystemAgents } from '@renderer/pages/agents'
+import { useSystemAgents } from '@renderer/pages/discover/pages/agents'
 import { createAssistantFromAgent } from '@renderer/services/AssistantService'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Agent, Assistant } from '@renderer/types'

src/renderer/src/components/Tab/TabContainer.tsx

@@ -12,16 +12,15 @@ import { ThemeMode } from '@renderer/types'
 import { classNames } from '@renderer/utils'
 import { Tooltip } from 'antd'
 import {
+  Compass,
   FileSearch,
   Folder,
   Home,
   Languages,
-  LayoutGrid,
   Monitor,
   Moon,
   Palette,
   Settings,
-  Sparkle,
   SquareTerminal,
   Sun,
   X
@@ -41,14 +40,14 @@ const getTabIcon = (tabId: string): React.ReactNode | undefined => {
   switch (tabId) {
     case 'home':
       return <Home size={14} />
-    case 'agents':
+    // case 'agents':
-      return <Sparkle size={14} />
+    //   return <Sparkle size={14} />
     case 'translate':
       return <Languages size={14} />
     case 'paintings':
       return <Palette size={14} />
-    case 'apps':
+    // case 'apps':
-      return <LayoutGrid size={14} />
+    //   return <LayoutGrid size={14} />
     case 'knowledge':
       return <FileSearch size={14} />
     case 'mcp':
@@ -57,6 +56,8 @@ const getTabIcon = (tabId: string): React.ReactNode | undefined => {
       return <Folder size={14} />
     case 'settings':
       return <Settings size={14} />
+    case 'discover':
+      return <Compass size={14} />
     default:
       return null
   }

src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
   <input
     data-testid="input-number"
     placeholder="请输入维度大小"
-    style="flex: 1;"
+    style="flex: 1 1 0%;"
     type="number"
     value="1536"
   />
@@ -43,7 +43,7 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
   <input
     data-testid="input-number"
     placeholder="请输入维度大小"
-    style="flex: 1;"
+    style="flex: 1 1 0%;"
     type="number"
     value=""
   />

src/renderer/src/components/__tests__/__snapshots__/Spinner.test.tsx.snap

@@ -26,6 +26,7 @@ exports[`Spinner > should match snapshot 1`] = `
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
+    style="color: unset;"
     viewBox="0 0 24 24"
     width="16"
     xmlns="http://www.w3.org/2000/svg"

src/renderer/src/components/app/Sidebar.tsx

@@ -16,16 +16,15 @@ import { isEmoji } from '@renderer/utils'
 import { Avatar, Tooltip } from 'antd'
 import {
   CircleHelp,
+  Compass,
   FileSearch,
   Folder,
   Languages,
-  LayoutGrid,
   MessageSquare,
   Monitor,
   Moon,
   Palette,
   Settings,
-  Sparkle,
   Sun
 } from 'lucide-react'
 import { FC } from 'react'
@@ -39,7 +38,7 @@ import { SidebarOpenedMinappTabs, SidebarPinnedApps } from './PinnedMinapps'
 const Sidebar: FC = () => {
   const { hideMinappPopup, openMinapp } = useMinappPopup()
   const { minappShow, currentMinappId } = useRuntime()
-  const { sidebarIcons } = useSettings()
+  // const { sidebarIcons } = useSettings()
   const { pinned } = useMinapps()
 
   const { pathname } = useLocation()
@@ -53,8 +52,8 @@ const Sidebar: FC = () => {
 
   const backgroundColor = useNavBackgroundColor()
 
-  const showPinnedApps = pinned.length > 0 && sidebarIcons.visible.includes('minapp')
+  // const showPinnedApps = pinned.length > 0 && sidebarIcons.visible.includes('minapp')
-
+  const showPinnedApps = pinned.length > 0
   const to = async (path: string) => {
     await modelGenerating()
     navigate(path)
@@ -148,22 +147,24 @@ const MainMenus: FC = () => {
 
   const iconMap = {
     assistants: <MessageSquare size={18} className="icon" />,
-    agents: <Sparkle size={18} className="icon" />,
+    // agents: <Sparkle size={18} className="icon" />,
     paintings: <Palette size={18} className="icon" />,
     translate: <Languages size={18} className="icon" />,
-    minapp: <LayoutGrid size={18} className="icon" />,
+    // minapp: <LayoutGrid size={18} className="icon" />,
     knowledge: <FileSearch size={18} className="icon" />,
-    files: <Folder size={17} className="icon" />
+    files: <Folder size={17} className="icon" />,
+    discover: <Compass size={18} className="icon" />
   }
 
   const pathMap = {
     assistants: '/',
-    agents: '/agents',
+    // agents: '/agents',
     paintings: `/paintings/${defaultPaintingProvider}`,
     translate: '/translate',
-    minapp: '/apps',
+    // minapp: '/apps',
     knowledge: '/knowledge',
-    files: '/files'
+    files: '/files',
+    discover: '/discover'
   }
 
   return sidebarIcons.visible.map((icon) => {

src/renderer/src/context/ThemeProvider.tsx

@@ -23,6 +23,12 @@ interface ThemeProviderProps extends PropsWithChildren {
   defaultTheme?: ThemeMode
 }
 
+const tailwindThemeChange = (theme: ThemeMode) => {
+  const root = window.document.documentElement
+  root.classList.remove('light', 'dark')
+  root.classList.add(theme)
+}
+
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   // 用户设置的主题
   const { theme: settedTheme, setTheme: setSettedTheme } = useSettings()
@@ -64,6 +70,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
 
   useEffect(() => {
     window.api.setTheme(settedTheme)
+    tailwindThemeChange(settedTheme)
   }, [settedTheme])
 
   return (

src/renderer/src/entryPoint.tsx

@@ -1,4 +1,5 @@
 import './assets/styles/index.scss'
+import './assets/styles/tailwind.css'
 import '@ant-design/v5-patch-for-react-19'
 
 import { createRoot } from 'react-dom/client'

src/renderer/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

src/renderer/src/i18n/label.ts

@@ -93,8 +93,8 @@ export const getProgressLabel = (key: string): string => {
 }
 
 const titleKeyMap = {
-  agents: 'title.agents',
+  // agents: 'title.agents',
-  apps: 'title.apps',
+  // apps: 'title.apps',
   files: 'title.files',
   home: 'title.home',
   knowledge: 'title.knowledge',
@@ -103,7 +103,8 @@ const titleKeyMap = {
   memories: 'title.memories',
   paintings: 'title.paintings',
   settings: 'title.settings',
-  translate: 'title.translate'
+  translate: 'title.translate',
+  discover: 'title.discover'
 } as const
 
 export const getTitleLabel = (key: string): string => {
@@ -127,7 +128,8 @@ const sidebarIconKeyMap = {
   translate: 'translate.title',
   minapp: 'minapp.title',
   knowledge: 'knowledge.title',
-  files: 'files.title'
+  files: 'files.title',
+  discover: 'discover.title'
 } as const
 
 export const getSidebarIconLabel = (key: string): string => {

src/renderer/src/i18n/locales/en-us.json

@@ -740,6 +740,13 @@
     "warning": "Warning",
     "you": "You"
   },
+  "discover": {
+    "install": "Installation",
+    "title": "Discover",
+    "uninstall": "uninstall",
+    "update": "update",
+    "update_all": "Full Update"
+  },
   "docs": {
     "title": "Docs"
   },
@@ -3443,6 +3450,7 @@
   "title": {
     "agents": "Agents",
     "apps": "Apps",
+    "discover": "Discover",
     "files": "Files",
     "home": "Home",
     "knowledge": "Knowledge Base",

src/renderer/src/i18n/locales/ja-jp.json

@@ -740,6 +740,13 @@
     "warning": "警告",
     "you": "あなた"
   },
+  "discover": {
+    "install": "インストール",
+    "title": "発見",
+    "uninstall": "アンインストール",
+    "update": "更新",
+    "update_all": "すべて更新"
+  },
   "docs": {
     "title": "ドキュメント"
   },
@@ -3443,6 +3450,7 @@
   "title": {
     "agents": "エージェント",
     "apps": "アプリ",
+    "discover": "発見",
     "files": "ファイル",
     "home": "ホーム",
     "knowledge": "ナレッジベース",

src/renderer/src/i18n/locales/ru-ru.json

@@ -740,6 +740,13 @@
     "warning": "Предупреждение",
     "you": "Вы"
   },
+  "discover": {
+    "install": "Установка",
+    "title": "Откройте для себя",
+    "uninstall": "десинь",
+    "update": "обновление",
+    "update_all": "Все обновления"
+  },
   "docs": {
     "title": "Документация"
   },
@@ -3443,6 +3450,7 @@
   "title": {
     "agents": "Агенты",
     "apps": "Приложения",
+    "discover": "Откройте для себя",
     "files": "Файлы",
     "home": "Главная",
     "knowledge": "База знаний",

src/renderer/src/i18n/locales/zh-cn.json

@@ -740,6 +740,13 @@
     "warning": "警告",
     "you": "用户"
   },
+  "discover": {
+    "install": "安装",
+    "title": "发现",
+    "uninstall": "卸载",
+    "update": "更新",
+    "update_all": "全部更新"
+  },
   "docs": {
     "title": "帮助文档"
   },
@@ -3443,6 +3450,7 @@
   "title": {
     "agents": "智能体",
     "apps": "小程序",
+    "discover": "发现",
     "files": "文件",
     "home": "首页",
     "knowledge": "知识库",

src/renderer/src/i18n/locales/zh-tw.json

@@ -740,6 +740,13 @@
     "warning": "警告",
     "you": "您"
   },
+  "discover": {
+    "install": "安裝",
+    "title": "發現",
+    "uninstall": "卸載",
+    "update": "更新",
+    "update_all": "全部更新"
+  },
   "docs": {
     "title": "說明文件"
   },
@@ -3443,6 +3450,7 @@
   "title": {
     "agents": "智能體",
     "apps": "小程序",
+    "discover": "發現",
     "files": "文件",
     "home": "主頁",
     "knowledge": "知識庫",

src/renderer/src/i18n/translate/el-gr.json

@@ -740,6 +740,13 @@
     "warning": "Προσοχή",
     "you": "Εσείς"
   },
+  "discover": {
+    "install": "Εγκατάσταση",
+    "title": "ανακάλυψη",
+    "uninstall": "απεγκατάσταση",
+    "update": "ενημέρωση",
+    "update_all": "Όλα τα πρόσφατα"
+  },
   "docs": {
     "title": "Βοήθεια"
   },
@@ -3439,6 +3446,7 @@
   "title": {
     "agents": "Πράκτορες",
     "apps": "Εφαρμογές",
+    "discover": "Ανακάλυψη",
     "files": "Αρχεία",
     "home": "Αρχική Σελίδα",
     "knowledge": "Βάση Γνώσης",

src/renderer/src/i18n/translate/es-es.json

@@ -740,6 +740,13 @@
     "warning": "Advertencia",
     "you": "Usuario"
   },
+  "discover": {
+    "install": "instalación",
+    "title": "Descubrir",
+    "uninstall": "desinstalar",
+    "update": "actualización",
+    "update_all": "Todo actualizado."
+  },
   "docs": {
     "title": "Documentación de Ayuda"
   },
@@ -3439,6 +3446,7 @@
   "title": {
     "agents": "Agentes",
     "apps": "Aplicaciones",
+    "discover": "Descubrir",
     "files": "Archivos",
     "home": "Inicio",
     "knowledge": "Base de conocimiento",

src/renderer/src/i18n/translate/fr-fr.json

@@ -740,6 +740,13 @@
     "warning": "Avertissement",
     "you": "Vous"
   },
+  "discover": {
+    "install": "installer",
+    "title": "Découvrir",
+    "uninstall": "désinstaller",
+    "update": "Mise à jour",
+    "update_all": "Mises à jour complètes"
+  },
   "docs": {
     "title": "Documentation d'aide"
   },
@@ -3439,6 +3446,7 @@
   "title": {
     "agents": "Agent intelligent",
     "apps": "Mini-programmes",
+    "discover": "Découvrir",
     "files": "Fichiers",
     "home": "Page d'accueil",
     "knowledge": "Base de connaissances",

src/renderer/src/i18n/translate/pt-pt.json

@@ -740,6 +740,13 @@
     "warning": "Aviso",
     "you": "Você"
   },
+  "discover": {
+    "install": "Instalação",
+    "title": "Descoberta",
+    "uninstall": "desinstalar",
+    "update": "atualização",
+    "update_all": "Todas as atualizações"
+  },
   "docs": {
     "title": "Documentação de Ajuda"
   },
@@ -3439,6 +3446,7 @@
   "title": {
     "agents": "Agentes",
     "apps": "Miniaplicativos",
+    "discover": "Descoberta",
     "files": "Arquivos",
     "home": "Página Inicial",
     "knowledge": "Base de Conhecimento",

src/renderer/src/pages/discover/components/DiscoverMain.tsx

@@ -0,0 +1,19 @@
+import React, { Suspense } from 'react'
+import { Navigate, Route, Routes } from 'react-router-dom'
+
+import { ROUTERS } from '../routers'
+
+const DiscoverContent: React.FC = () => {
+  return (
+    <Suspense fallback={null}>
+      <Routes>
+        <Route index element={<Navigate to="assistant" replace />} />
+        {ROUTERS.map((route) => (
+          <Route key={route.id} path={route.path} element={<route.component />} />
+        ))}
+      </Routes>
+    </Suspense>
+  )
+}
+
+export default DiscoverContent

src/renderer/src/pages/discover/components/DiscoverSidebar.tsx

@@ -0,0 +1,59 @@
+// 还没测,目前助手和小程序用不到这个
+
+import { Badge } from '@renderer/ui/badge'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuSubItem,
+  SidebarProvider
+} from '@renderer/ui/sidebar'
+
+import { InternalCategory } from '../type'
+
+interface DiscoverSidebarProps {
+  activeCategory: InternalCategory | undefined
+}
+
+export default function DiscoverSidebar({ activeCategory }: DiscoverSidebarProps) {
+  if (!activeCategory) {
+    return (
+      <Sidebar className="absolute top-0 left-0 h-full border-r">
+        <SidebarContent>
+          <p className="p-4 text-sm text-gray-500">No active category selected.</p>
+        </SidebarContent>
+      </Sidebar>
+    )
+  }
+
+  return (
+    <SidebarProvider className="relative h-full min-h-full w-full">
+      <Sidebar className="absolute top-0 left-0 h-full border-r">
+        <SidebarContent>
+          <SidebarMenu>
+            {activeCategory.items &&
+              activeCategory.items.length > 0 &&
+              activeCategory.items.map((subItem) => (
+                <SidebarMenuSubItem key={subItem.id}>
+                  <SidebarMenuButton
+                    isActive={subItem.id === activeCategory.items[0]?.id}
+                    onClick={() => {
+                      // onSelectSubcategory(subItem.id, subItem)
+                    }}
+                    size="sm">
+                    <span className="truncate">{subItem.name}</span>
+                    {typeof subItem.count === 'number' && (
+                      <Badge variant="secondary" className="ml-auto shrink-0">
+                        {subItem.count}
+                      </Badge>
+                    )}
+                  </SidebarMenuButton>
+                </SidebarMenuSubItem>
+              ))}
+          </SidebarMenu>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}

src/renderer/src/pages/discover/hooks/useDiscoverCategories.ts

@@ -0,0 +1,53 @@
+import { CherryStoreType } from '@renderer/types/cherryStore'
+import { useCallback, useMemo } from 'react'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+
+import { ROUTERS, ROUTERS_MAP } from '../routers'
+
+export function useDiscoverCategories() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const activeTabId = useMemo(() => {
+    // e.g., location.pathname = /discover/assistant, segments = ['discover', 'assistant']
+    const pathSegments = location.pathname.split('/').filter(Boolean)
+    const currentTabId = pathSegments[1] as CherryStoreType
+
+    return ROUTERS_MAP.has(currentTabId) ? currentTabId : ROUTERS[0].id
+  }, [location.pathname])
+
+  const activeCategoryId = useMemo(() => {
+    return searchParams.get('categoryId') || 'all'
+  }, [searchParams])
+
+  const handleSelectTab = useCallback(
+    (newTabId: string) => {
+      if (activeTabId !== newTabId) {
+        navigate(`/discover/${newTabId}`)
+      }
+    },
+    [activeTabId, navigate]
+  )
+
+  const handleSelectCategory = useCallback(
+    (newCategoryId: string) => {
+      if (activeCategoryId !== newCategoryId) {
+        setSearchParams({ categoryId: newCategoryId })
+      }
+    },
+    [activeCategoryId, setSearchParams]
+  )
+
+  const currentCategory = useMemo(() => {
+    return ROUTERS_MAP.get(activeTabId)
+  }, [activeTabId])
+
+  return {
+    activeTabId,
+    activeCategoryId,
+    currentCategory,
+    handleSelectTab,
+    handleSelectCategory
+  }
+}

src/renderer/src/pages/discover/index.tsx

@@ -0,0 +1,46 @@
+import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { Tabs } from '@renderer/ui/vercel-tabs'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import DiscoverMain from './components/DiscoverMain'
+import DiscoverSidebar from './components/DiscoverSidebar'
+import { useDiscoverCategories } from './hooks/useDiscoverCategories'
+import { ROUTERS } from './routers'
+
+export default function DiscoverPage() {
+  const { t } = useTranslation()
+  const { activeTabId, currentCategory, handleSelectTab } = useDiscoverCategories()
+
+  const tabs = useMemo(() => ROUTERS.map((router) => ({ id: router.id, label: router.title })), [])
+
+  return (
+    <div className="h-full w-full">
+      <div className="flex h-full w-full flex-col overflow-hidden">
+        <Navbar>
+          <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
+            {t('discover.title')}
+          </NavbarCenter>
+        </Navbar>
+
+        {ROUTERS.length > 0 && (
+          <div className="p-2 pl-0">
+            <Tabs tabs={tabs} activeTab={activeTabId} onTabChange={handleSelectTab} />
+          </div>
+        )}
+
+        <div className="flex flex-row overflow-hidden">
+          {currentCategory?.hasSidebar && (
+            <div className="w-64 flex-shrink-0 border-r">
+              <DiscoverSidebar activeCategory={currentCategory} />
+            </div>
+          )}
+
+          <main className="w-full overflow-hidden">
+            <DiscoverMain />
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}

src/renderer/src/pages/discover/pages/agents/AgentsPage.tsx

@@ -1,5 +1,4 @@
 import { ImportOutlined, PlusOutlined } from '@ant-design/icons'
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import CustomTag from '@renderer/components/CustomTag'
 import { HStack } from '@renderer/components/Layout'
 import ListItem from '@renderer/components/ListItem'
@@ -179,27 +178,28 @@ const AgentsPage: FC = () => {
 
   return (
     <Container>
-      <Navbar>
+      {/* <Navbar> */}
-        <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
+      {/* <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}> */}
-          {t('agents.title')}
+      {/* {t('agents.title')} */}
-          <Input
+      {/* <div className="flex justify-center p-2">
-            placeholder={t('common.search')}
+        <Input
-            className="nodrag"
+          placeholder={t('common.search')}
-            style={{ width: '30%', height: 28, borderRadius: 15, paddingLeft: 12 }}
+          className="nodrag"
-            size="small"
+          style={{ width: '30%', height: 28, borderRadius: 15, paddingLeft: 12 }}
-            variant="filled"
+          size="small"
-            allowClear
+          variant="filled"
-            onClear={handleSearchClear}
+          allowClear
-            suffix={<Search size={14} color="var(--color-icon)" onClick={handleSearch} />}
+          onClear={handleSearchClear}
-            value={searchInput}
+          suffix={<Search size={14} color="var(--color-icon)" onClick={handleSearch} />}
-            maxLength={50}
+          value={searchInput}
-            onChange={handleSearchInputChange}
+          maxLength={50}
-            onPressEnter={handleSearch}
+          onChange={handleSearchInputChange}
-            onBlur={handleSearchInputBlur}
+          onPressEnter={handleSearch}
-          />
+          onBlur={handleSearchInputBlur}
-          <div style={{ width: 80 }} />
+        />
-        </NavbarCenter>
+      </div> */}
-      </Navbar>
+      {/* </NavbarCenter> */}
+      {/* </Navbar> */}
 
       <Main id="content-container">
         <AgentsGroupList>
@@ -310,14 +310,13 @@ const AgentsPage: FC = () => {
 
 const Container = styled.div`
   display: flex;
-  flex: 1;
   flex-direction: column;
   height: 100%;
+  overflow: hidden;
 `
 
 const AgentsGroupList = styled(Scrollbar)`
   min-width: 160px;
-  height: calc(100vh - var(--navbar-height));
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -335,10 +334,10 @@ const AgentsGroupList = styled(Scrollbar)`
 const Main = styled.div`
   flex: 1;
   display: flex;
+  overflow: hidden;
 `
 
 const AgentsListContainer = styled.div`
-  height: calc(100vh - var(--navbar-height));
   flex: 1;
   display: flex;
   flex-direction: column;

src/renderer/src/pages/discover/pages/agents/components/AgentGroupIcon.tsx

@@ -1,4 +1,4 @@
-import { groupTranslations } from '@renderer/pages/agents/agentGroupTranslations'
+import { groupTranslations } from '@renderer/pages/discover/pages/agents/agentGroupTranslations'
 import { DynamicIcon, IconName } from 'lucide-react/dynamic'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'

src/renderer/src/pages/discover/pages/minapps/MinAppsPage.tsx

@@ -1,8 +1,6 @@
-import { Navbar, NavbarMain } from '@renderer/components/app/Navbar'
 import App from '@renderer/components/MinApp/MinApp'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useMinapps } from '@renderer/hooks/useMinapps'
-import { useNavbarPosition } from '@renderer/hooks/useSettings'
 import { Button, Input } from 'antd'
 import { Search, SettingsIcon } from 'lucide-react'
 import React, { FC, useState } from 'react'
@@ -16,7 +14,7 @@ const AppsPage: FC = () => {
   const { t } = useTranslation()
   const [search, setSearch] = useState('')
   const { minapps } = useMinapps()
-  const { isTopNavbar } = useNavbarPosition()
+  // const { isTopNavbar } = useNavbarPosition()
 
   const filteredApps = search
     ? minapps.filter(
@@ -37,38 +35,40 @@ const AppsPage: FC = () => {
 
   return (
     <Container onContextMenu={handleContextMenu}>
-      <Navbar>
+      {/* <Navbar> */}
-        <NavbarMain>
+      {/* <NavbarMain> */}
-          {t('minapp.title')}
+      {/* {t('minapp.title')} */}
-          <Input
+      <div className="p-2">
-            placeholder={t('common.search')}
+        <Input
-            className="nodrag"
+          placeholder={t('common.search')}
-            style={{
+          className="nodrag"
-              width: '30%',
+          style={{
-              height: 28,
+            width: '30%',
-              borderRadius: 15,
+            height: 28,
-              position: 'absolute',
+            borderRadius: 15,
-              left: '50vw',
+            position: 'absolute',
-              transform: 'translateX(-50%)'
+            left: '50vw',
-            }}
+            transform: 'translateX(-50%)'
-            size="small"
+          }}
-            variant="filled"
+          size="small"
-            suffix={<Search size={18} />}
+          variant="filled"
-            value={search}
+          suffix={<Search size={18} />}
-            onChange={(e) => setSearch(e.target.value)}
+          value={search}
-          />
+          onChange={(e) => setSearch(e.target.value)}
-          <Button
+        />
-            type="text"
+        <Button
-            className="nodrag"
+          type="text"
-            icon={<SettingsIcon size={18} color="var(--color-text-2)" />}
+          className="nodrag"
-            onClick={MinappSettingsPopup.show}
+          icon={<SettingsIcon size={18} color="var(--color-text-2)" />}
-          />
+          onClick={MinappSettingsPopup.show}
-        </NavbarMain>
+        />
-      </Navbar>
+      </div>
+      {/* </NavbarMain> */}
+      {/* </Navbar> */}
       <ContentContainer id="content-container">
         <MainContainer>
           <RightContainer>
-            {isTopNavbar && (
+            {/* {isTopNavbar && (
               <HeaderContainer>
                 <Input
                   placeholder={t('common.search')}
@@ -86,7 +86,7 @@ const AppsPage: FC = () => {
                   onClick={() => MinappSettingsPopup.show()}
                 />
               </HeaderContainer>
-            )}
+            )} */}
             <AppsContainerWrapper>
               <AppsContainer style={{ height: containerHeight }}>
                 {filteredApps.map((app) => (
@@ -114,24 +114,23 @@ const ContentContainer = styled.div`
   flex: 1;
   flex-direction: row;
   justify-content: center;
-  height: 100%;
+  overflow: hidden;
 `
 
-const HeaderContainer = styled.div`
+// const HeaderContainer = styled.div`
-  display: flex;
+//   display: flex;
-  flex-direction: row;
+//   flex-direction: row;
-  justify-content: center;
+//   justify-content: center;
-  align-items: center;
+//   align-items: center;
-  height: 60px;
+//   height: 60px;
-  width: 100%;
+//   width: 100%;
-  gap: 10px;
+//   gap: 10px;
-`
+// `
 
 const MainContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: row;
-  height: calc(100vh - var(--navbar-height));
 `
 
 const RightContainer = styled(Scrollbar)`
@@ -140,7 +139,6 @@ const RightContainer = styled(Scrollbar)`
   flex-direction: column;
   height: 100%;
   align-items: center;
-  height: calc(100vh - var(--navbar-height));
 `
 
 const AppsContainerWrapper = styled(Scrollbar)`

src/renderer/src/pages/discover/routers.ts

@@ -0,0 +1,50 @@
+import i18n from '@renderer/i18n'
+import { CherryStoreType } from '@renderer/types/cherryStore'
+import { lazy } from 'react'
+
+export const ROUTERS = [
+  {
+    id: CherryStoreType.ASSISTANT,
+    title: i18n.t('assistants.title'),
+    path: CherryStoreType.ASSISTANT,
+    component: lazy(() => import('./pages/agents/AgentsPage')),
+    hasSidebar: false, // 目前都没有侧边栏
+    items: [{ id: 'all', name: `All ${i18n.t('assistants.title')}` }] // 预设 "All" 子分类
+  },
+  {
+    id: CherryStoreType.MINI_APP,
+    title: i18n.t('minapp.title'),
+    path: CherryStoreType.MINI_APP,
+    component: lazy(() => import('./pages/minapps/MinAppsPage')),
+    hasSidebar: false, // 目前都没有侧边栏
+    items: [{ id: 'all', name: `All ${i18n.t('minapp.title')}` }] // 预设 "All" 子分类
+  }
+  //   {
+  //     id: CherryStoreType.TRANSLATE,
+  //     title: i18n.t('translate.title'),
+  //     path: 'translate',
+  //     component: lazy(() => import('../translate/TranslatePage'))
+  //   },
+  //   {
+  //     id: CherryStoreType.FILES,
+  //     title: i18n.t('files.title'),
+  //     path: 'files',
+  //     component: lazy(() => import('../files/FilesPage'))
+  //   },
+  //   {
+  //     id: CherryStoreType.PAINTINGS,
+  //     title: i18n.t('paintings.title'),
+  //     path: 'paintings/*',
+  //     isPrefix: true,
+  //     component: lazy(() => import('../paintings/PaintingsRoutePage'))
+  //   }
+  //   {
+  //     id: CherryStoreType.MCP_SERVER,
+  //     title: i18n.t('common.mcp'),
+  //     path: 'mcp-servers/*',
+  //     isPrefix: true,
+  //     component: lazy(() => import('../mcp-servers'))
+  //   }
+]
+
+export const ROUTERS_MAP = new Map(ROUTERS.map((router) => [router.id, router]))

src/renderer/src/pages/discover/type.ts

@@ -0,0 +1,7 @@
+export interface InternalCategory {
+  id: string
+  title: string
+  path: string
+  hasSidebar?: boolean
+  items: Array<{ id: string; name: string; count?: number }>
+}

src/renderer/src/pages/home/Messages/Blocks/index.tsx

@@ -3,7 +3,7 @@ import type { RootState } from '@renderer/store'
 import { messageBlocksSelectors } from '@renderer/store/messageBlock'
 import type { ImageMessageBlock, MainTextMessageBlock, Message, MessageBlock } from '@renderer/types/newMessage'
 import { MessageBlockStatus, MessageBlockType } from '@renderer/types/newMessage'
-import { AnimatePresence, motion } from 'motion/react'
+import { AnimatePresence, motion, type Variants } from 'motion/react'
 import React, { useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
@@ -25,7 +25,7 @@ interface AnimatedBlockWrapperProps {
   enableAnimation: boolean
 }
 
-const blockWrapperVariants = {
+const blockWrapperVariants: Variants = {
   visible: {
     opacity: 1,
     x: 0,

src/renderer/src/pages/home/Messages/MessageContent.tsx

@@ -15,7 +15,9 @@ const MessageContent: React.FC<Props> = ({ message }) => {
     <>
       {!isEmpty(message.mentions) && (
         <Flex gap="8px" wrap style={{ marginBottom: '10px' }}>
-          {message.mentions?.map((model) => <MentionTag key={getModelUniqId(model)}>{'@' + model.name}</MentionTag>)}
+          {message.mentions?.map((model) => (
+            <MentionTag key={getModelUniqId(model)}>{'@' + model.name}</MentionTag>
+          ))}
         </Flex>
       )}
       <MessageBlockRenderer blocks={message.blocks} message={message} />

src/renderer/src/pages/home/Messages/MessageImage.tsx

@@ -62,7 +62,10 @@ const MessageImage: FC<Props> = ({ block }) => {
               byteArrays.push(byteArray)
             }
 
-            const blob = new Blob(byteArrays, { type: mimeType })
+            const blob = new Blob(
+              byteArrays.map((b) => b.slice()),
+              { type: mimeType }
+            )
             await navigator.clipboard.write([new ClipboardItem({ [mimeType]: blob })])
           } else {
             throw new Error('无效的 base64 图片格式')

src/renderer/src/pages/launchpad/LaunchpadPage.tsx

@@ -20,7 +20,7 @@ const LaunchpadPage: FC = () => {
     {
       icon: <LayoutGrid size={32} className="icon" />,
       text: t('title.apps'),
-      path: '/apps',
+      path: '/discover/mini-app',
       bgColor: 'linear-gradient(135deg, #8B5CF6, #A855F7)' // 小程序：紫色，代表多功能和灵活性
     },
     {
@@ -38,7 +38,7 @@ const LaunchpadPage: FC = () => {
     {
       icon: <Sparkle size={32} className="icon" />,
       text: t('title.agents'),
-      path: '/agents',
+      path: '/discover/assistant',
       bgColor: 'linear-gradient(135deg, #6366F1, #4F46E5)' // AI助手：靛蓝渐变，代表智能和科技
     },
     {

src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx

@@ -11,7 +11,7 @@ import { getSidebarIconLabel } from '@renderer/i18n/label'
 import { useAppDispatch } from '@renderer/store'
 import { setSidebarIcons } from '@renderer/store/settings'
 import { message } from 'antd'
-import { FileSearch, Folder, Languages, LayoutGrid, MessageSquareQuote, Palette, Sparkle } from 'lucide-react'
+import { Compass, FileSearch, Folder, Languages, LayoutGrid, MessageSquareQuote, Palette, Sparkle } from 'lucide-react'
 import { FC, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -116,7 +116,8 @@ const SidebarIconsManager: FC<SidebarIconsManagerProps> = ({
       translate: <Languages size={16} />,
       minapp: <LayoutGrid size={16} />,
       knowledge: <FileSearch size={16} />,
-      files: <Folder size={15} />
+      files: <Folder size={15} />,
+      discover: <Compass size={15} />
     }),
     []
   )

src/renderer/src/store/migrate.ts

@@ -2006,6 +2006,28 @@ const migrateConfig = {
       logger.error('migrate 127 error', error as Error)
       return state
     }
+  },
+  '128': (state: RootState) => {
+    try {
+      const visibleIcons = state.settings.sidebarIcons.visible
+      if (visibleIcons.includes('discover')) {
+        return state
+      }
+      const filteredIcons = visibleIcons.filter((icon) => icon !== 'agents' && icon !== 'minapp')
+      return {
+        ...state,
+        settings: {
+          ...state.settings,
+          sidebarIcons: {
+            ...state.settings.sidebarIcons,
+            visible: [...filteredIcons, 'discover']
+          }
+        }
+      }
+    } catch (error) {
+      logger.error('migrate 128 error', error as Error)
+      return state
+    }
   }
 }
 

src/renderer/src/store/settings.ts

@@ -20,16 +20,25 @@ import { RemoteSyncState } from './backup'
 
 export type SendMessageShortcut = 'Enter' | 'Shift+Enter' | 'Ctrl+Enter' | 'Command+Enter' | 'Alt+Enter'
 
-export type SidebarIcon = 'assistants' | 'agents' | 'paintings' | 'translate' | 'minapp' | 'knowledge' | 'files'
+export type SidebarIcon =
+  | 'assistants'
+  | 'agents'
+  | 'paintings'
+  | 'translate'
+  | 'minapp'
+  | 'knowledge'
+  | 'files'
+  | 'discover'
 
 export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
   'assistants',
-  'agents',
+  // 'agents',
   'paintings',
   'translate',
-  'minapp',
+  // 'minapp',
   'knowledge',
-  'files'
+  'files',
+  'discover'
 ]
 
 export interface NutstoreSyncRuntime extends RemoteSyncState {}

src/renderer/src/types/cherryStore.ts

@@ -0,0 +1,24 @@
+export enum CherryStoreType {
+  ASSISTANT = 'assistant',
+  MINI_APP = 'mini-app'
+  // KNOWLEDGE = 'Knowledge',
+  // MCP_SERVER = 'MCP-Server',
+  // MODEL_PROVIDER = 'Model-Provider',
+  // AGENT = 'Agent',
+  // TRANSLATE = 'Translate',
+  // PAINTINGS = 'Paintings',
+  // FILES = 'Files'
+}
+
+export interface SubCategoryItem {
+  id: string
+  name: string
+  count?: number // count 是可选的，因为并非所有二级分类都有
+  isActive?: boolean
+}
+
+export interface Category {
+  id: CherryStoreType
+  title: string
+  items: SubCategoryItem[]
+}

src/renderer/src/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@renderer/utils/index"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/renderer/src/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@renderer/utils/index"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/renderer/src/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@renderer/utils/index"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/renderer/src/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@renderer/utils/index"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/renderer/src/ui/sheet.tsx

@@ -0,0 +1,137 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@renderer/utils/index"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/renderer/src/ui/sidebar.tsx

@@ -0,0 +1,724 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@renderer/hooks/use-mobile"
+import { cn } from "@renderer/utils/index"
+import { Button } from "@renderer/ui/button"
+import { Input } from "@renderer/ui/input"
+import { Separator } from "@renderer/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@renderer/ui/sheet"
+import { Skeleton } from "@renderer/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@renderer/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

src/renderer/src/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@renderer/utils/index"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/renderer/src/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@renderer/utils/index"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/renderer/src/ui/vercel-tabs.tsx

@@ -0,0 +1,130 @@
+import { cn } from '@renderer/utils'
+import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+interface Tab {
+  id: string
+  label: string
+}
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  tabs: Tab[]
+  activeTab?: string
+  onTabChange?: (tabId: string) => void
+}
+
+// 提取常用的性能优化类
+const PERFORMANCE_CLASSES = 'will-change-transform [backface-visibility:hidden] [transform-style:preserve-3d]'
+
+const TabsComponent = ({
+  ref,
+  className,
+  tabs,
+  activeTab,
+  onTabChange,
+  ...props
+}: TabsProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const [hoverStyle, setHoverStyle] = useState({ transform: 'translate3d(0px, 0px, 0px)', width: '0px' })
+  const [activeStyle, setActiveStyle] = useState({ transform: 'translate3d(0px, 0px, 0px)', width: '0px' })
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([])
+
+  const activeIndex = useMemo(() => {
+    if (activeTab) {
+      const index = tabs.findIndex((tab) => tab.id === activeTab)
+      return index !== -1 ? index : 0
+    }
+    return 0
+  }, [activeTab, tabs])
+
+  useEffect(() => {
+    if (hoveredIndex !== null) {
+      const hoveredElement = tabRefs.current[hoveredIndex]
+      if (hoveredElement) {
+        const { offsetLeft, offsetWidth } = hoveredElement
+        setHoverStyle({
+          transform: `translate3d(${offsetLeft}px, 0px, 0px)`,
+          width: `${offsetWidth}px`
+        })
+      }
+    }
+  }, [hoveredIndex])
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const activeElement = tabRefs.current[activeIndex]
+      if (activeElement) {
+        const { offsetLeft, offsetWidth } = activeElement
+        setActiveStyle({
+          transform: `translate3d(${offsetLeft}px, 0px, 0px)`,
+          width: `${offsetWidth}px`
+        })
+      }
+    })
+  }, [activeIndex]) // 使用 translate3d 强制启用硬件加速
+
+  return (
+    <div ref={ref} className={cn('relative', className)} {...props}>
+      <div className="relative">
+        {/* Hover Highlight */}
+        <div
+          className={cn(
+            'absolute flex h-[30px] items-center rounded-[6px]',
+            'bg-[#0e0f1114] dark:bg-[#ffffff1a]',
+            'transition-all duration-300 ease-out',
+            PERFORMANCE_CLASSES,
+            hoveredIndex !== null ? 'opacity-100' : 'opacity-0'
+          )}
+          style={{
+            transform: hoverStyle.transform,
+            width: hoverStyle.width
+          }}
+        />
+
+        {/* Active Indicator */}
+        <div
+          className={cn(
+            'absolute bottom-[-6px] h-[2px]',
+            'bg-[#0e0f11] dark:bg-white',
+            'transition-all duration-300 ease-out',
+            PERFORMANCE_CLASSES
+          )}
+          style={{
+            transform: activeStyle.transform,
+            width: activeStyle.width
+          }}
+        />
+
+        {/* Tabs */}
+        <div className="relative flex items-center space-x-[6px]">
+          {tabs.map((tab, index) => (
+            <div
+              key={tab.id}
+              ref={(el) => {
+                tabRefs.current[index] = el
+              }}
+              className={cn(
+                'h-[30px] cursor-pointer px-3 py-2 transition-colors duration-300',
+                index === activeIndex ? 'text-[#0e0e10] dark:text-white' : 'text-[#0e0f1199] dark:text-[#ffffff99]'
+              )}
+              onMouseEnter={() => setHoveredIndex(index)}
+              onMouseLeave={() => setHoveredIndex(null)}
+              onClick={() => {
+                onTabChange?.(tab.id)
+              }}>
+              <div className="flex h-full items-center justify-center text-sm leading-5 font-medium whitespace-nowrap">
+                {tab.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Tabs = React.memo(TabsComponent)
+
+Tabs.displayName = 'Tabs'
+
+export { Tabs }

src/renderer/src/utils/index.ts

@@ -1,7 +1,9 @@
 import { loggerService } from '@logger'
 import { Language, Model, ModelType, Provider } from '@renderer/types'
 import { ModalFuncProps } from 'antd'
+import { type ClassValue, clsx } from 'clsx'
 import { isEqual } from 'lodash'
+import { twMerge } from 'tailwind-merge'
 import { v4 as uuidv4 } from 'uuid'
 
 const logger = loggerService.withContext('Utils')
@@ -234,6 +236,10 @@ export function uniqueObjectArray<T>(array: T[]): T[] {
   return array.filter((obj, index, self) => index === self.findIndex((t) => isEqual(t, obj)))
 }
 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
 export * from './api'
 export * from './collection'
 export * from './file'

src/renderer/src/utils/motionVariants.ts

@@ -1,4 +1,6 @@
-export const lightbulbVariants = {
+import type { Variants } from 'motion/react'
+
+export const lightbulbVariants: Variants = {
   active: {
     opacity: [1, 0.2, 1],
     transition: {
@@ -17,7 +19,7 @@ export const lightbulbVariants = {
   }
 }
 
-export const lightbulbSoftVariants = {
+export const lightbulbSoftVariants: Variants = {
   active: {
     opacity: [1, 0.5, 1],
     transition: {

src/renderer/src/windows/selection/action/components/WindowFooter.tsx

@@ -151,7 +151,7 @@ const WindowFooter: FC<FooterProps> = ({
                 <Pause size={14} className="btn-icon loading-icon" style={{ position: 'absolute', left: 1, top: 1 }} />
                 <LoadingOutlined
                   style={{ fontSize: 16, position: 'absolute', left: 0, top: 0 }}
-                  className="btn-icon  loading-icon"
+                  className="btn-icon loading-icon"
                   spin
                 />
               </LoadingIconWrapper>

tsconfig.json

@@ -12,6 +12,10 @@
   "compilerOptions": {
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "useDefineForClassFields": true
+    "useDefineForClassFields": true,
+    "baseUrl": ".",
+    "paths": {
+      "@renderer/*": ["src/renderer/src/*"]
+    }
   }
 }

tsconfig.node.json

@@ -12,6 +12,7 @@
     "src/renderer/src/services/traceApi.ts"  ],
   "compilerOptions": {
     "composite": true,
+    "moduleResolution": "bundler",
     "types": [
       "electron-vite/node",
       "vitest/globals"
@@ -22,7 +23,8 @@
       "@main/*": ["src/main/*"],
       "@types": ["src/renderer/src/types/index.ts"],
       "@shared/*": ["packages/shared/*"],
-      "@mcp-trace/*": ["packages/mcp-trace/*"]
+      "@mcp-trace/*": ["packages/mcp-trace/*"],
+      "@modelcontextprotocol/sdk/*": ["node_modules/@modelcontextprotocol/sdk/dist/esm/*"]
     },
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,

vitest.config.ts

@@ -25,7 +25,8 @@ export default defineConfig({
       // 渲染进程单元测试配置
       {
         extends: true,
-        plugins: rendererConfig.plugins,
+        // exclude tailwindcss plugin
+        plugins: rendererConfig.plugins.filter((plugin: any) => plugin.name !== 'tailwindcss'),
         resolve: {
           alias: rendererConfig.resolve.alias
         },