From 0f14b1625f5966bb744f8ebeb8716e6dbff20631 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sat, 11 Oct 2025 15:39:38 +0800
Subject: [PATCH] feat(video): add video page and sidebar integration

- Add new video page component with basic structure
- Include video icon in sidebar and launchpad
- Update i18n labels for video feature
- Increment store version and add migration for video icon
---
 src/renderer/src/Router.tsx                      |  2 ++
 src/renderer/src/components/Tab/TabContainer.tsx |  3 +++
 src/renderer/src/components/app/Sidebar.tsx      |  9 ++++++---
 src/renderer/src/i18n/label.ts                   |  6 ++++--
 src/renderer/src/i18n/locales/en-us.json         |  6 +++++-
 .../src/pages/launchpad/LaunchpadPage.tsx        |  8 +++++++-
 .../DisplaySettings/SidebarIconsManager.tsx      |  6 ++++--
 src/renderer/src/pages/video/VideoPage.tsx       | 16 ++++++++++++++++
 src/renderer/src/store/index.ts                  |  2 +-
 src/renderer/src/store/migrate.ts                | 13 +++++++++++++
 src/renderer/src/types/index.ts                  |  1 +
 11 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 src/renderer/src/pages/video/VideoPage.tsx

diff --git a/src/renderer/src/Router.tsx b/src/renderer/src/Router.tsx
index edaebfa144..72ce119533 100644
--- a/src/renderer/src/Router.tsx
+++ b/src/renderer/src/Router.tsx
@@ -20,6 +20,7 @@ import PaintingsRoutePage from './pages/paintings/PaintingsRoutePage'
 import SettingsPage from './pages/settings/SettingsPage'
 import AssistantPresetsPage from './pages/store/assistants/presets/AssistantPresetsPage'
 import TranslatePage from './pages/translate/TranslatePage'
+import { VideoPage } from './pages/video/VideoPage'
 
 const Router: FC = () => {
   const { navbarPosition } = useNavbarPosition()
@@ -40,6 +41,7 @@ const Router: FC = () => {
           <Route path="/code" element={<CodeToolsPage />} />
           <Route path="/settings/*" element={<SettingsPage />} />
           <Route path="/launchpad" element={<LaunchpadPage />} />
+          <Route path="/video" element={<VideoPage />} />
         </Routes>
       </ErrorBoundary>
     )
diff --git a/src/renderer/src/components/Tab/TabContainer.tsx b/src/renderer/src/components/Tab/TabContainer.tsx
index 6747066c6e..17184086b9 100644
--- a/src/renderer/src/components/Tab/TabContainer.tsx
+++ b/src/renderer/src/components/Tab/TabContainer.tsx
@@ -32,6 +32,7 @@ import {
   Sparkle,
   Sun,
   Terminal,
+  Video,
   X
 } from 'lucide-react'
 import { useCallback, useEffect, useMemo } from 'react'
@@ -106,6 +107,8 @@ const getTabIcon = (
       return <Settings size={14} />
     case 'code':
       return <Terminal size={14} />
+    case 'video':
+      return <Video size={14} />
     default:
       return null
   }
diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index 8de40ff15c..c3b1e58e66 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -26,7 +26,8 @@ import {
   Palette,
   Settings,
   Sparkle,
-  Sun
+  Sun,
+  Video
 } from 'lucide-react'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -139,7 +140,8 @@ const MainMenus: FC = () => {
     knowledge: <FileSearch size={18} className="icon" />,
     files: <Folder size={18} className="icon" />,
     notes: <NotepadText size={18} className="icon" />,
-    code_tools: <Code size={18} className="icon" />
+    code_tools: <Code size={18} className="icon" />,
+    video: <Video size={18} className="icon" />
   }
 
   const pathMap = {
@@ -151,7 +153,8 @@ const MainMenus: FC = () => {
     knowledge: '/knowledge',
     files: '/files',
     code_tools: '/code',
-    notes: '/notes'
+    notes: '/notes',
+    video: '/video'
   }
 
   return sidebarIcons.visible.map((icon) => {
diff --git a/src/renderer/src/i18n/label.ts b/src/renderer/src/i18n/label.ts
index 376aec32e3..4bcd5c67b2 100644
--- a/src/renderer/src/i18n/label.ts
+++ b/src/renderer/src/i18n/label.ts
@@ -146,7 +146,8 @@ const titleKeyMap = {
   notes: 'title.notes',
   paintings: 'title.paintings',
   settings: 'title.settings',
-  translate: 'title.translate'
+  translate: 'title.translate',
+  video: 'title.video'
 } as const
 
 export const getTitleLabel = (key: string): string => {
@@ -172,7 +173,8 @@ const sidebarIconKeyMap = {
   knowledge: 'knowledge.title',
   files: 'files.title',
   code_tools: 'code.title',
-  notes: 'notes.title'
+  notes: 'notes.title',
+  video: 'video.title'
 } as const
 
 export const getSidebarIconLabel = (key: string): string => {
diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index 74b2911dd1..1054f199b2 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -4486,7 +4486,8 @@
     "paintings": "Paintings",
     "settings": "Settings",
     "store": "Assistant Library",
-    "translate": "Translate"
+    "translate": "Translate",
+    "video": "Video"
   },
   "trace": {
     "backList": "Back To List",
@@ -4644,6 +4645,9 @@
     "saveDataError": "Failed to save data, please try again.",
     "title": "Update"
   },
+  "video": {
+    "title": "Video"
+  },
   "warning": {
     "missing_provider": "The supplier does not exist; reverted to the default supplier {{provider}}. This may cause issues."
   },
diff --git a/src/renderer/src/pages/launchpad/LaunchpadPage.tsx b/src/renderer/src/pages/launchpad/LaunchpadPage.tsx
index 4b51632b58..975bfff833 100644
--- a/src/renderer/src/pages/launchpad/LaunchpadPage.tsx
+++ b/src/renderer/src/pages/launchpad/LaunchpadPage.tsx
@@ -2,7 +2,7 @@ import App from '@renderer/components/MinApp/MinApp'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
-import { Code, FileSearch, Folder, Languages, LayoutGrid, NotepadText, Palette, Sparkle } from 'lucide-react'
+import { Code, FileSearch, Folder, Languages, LayoutGrid, NotepadText, Palette, Sparkle, Video } from 'lucide-react'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
@@ -63,6 +63,12 @@ const LaunchpadPage: FC = () => {
       text: t('title.notes'),
       path: '/notes',
       bgColor: 'linear-gradient(135deg, #F97316, #FB923C)' // 笔记：橙色，代表活力和清晰思路
+    },
+    {
+      icon: <Video size={32} className="icon" />,
+      text: t('title.video'),
+      path: '/video',
+      bgColor: 'linear-gradient(135deg, #7C3AED, #A78BFA)' // Video Generation: deep purple, representing creativity and dynamic media
     }
   ]
 
diff --git a/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx b/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx
index e79af44eb6..ed30bcd5d5 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx
@@ -21,7 +21,8 @@ import {
   MessageSquareQuote,
   NotepadText,
   Palette,
-  Sparkle
+  Sparkle,
+  Video
 } from 'lucide-react'
 import { FC, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -127,7 +128,8 @@ const SidebarIconsManager: FC<SidebarIconsManagerProps> = ({
       knowledge: <FileSearch size={16} />,
       files: <Folder size={16} />,
       notes: <NotepadText size={16} />,
-      code_tools: <Code size={16} />
+      code_tools: <Code size={16} />,
+      video: <Video size={16} />
     }),
     []
   )
diff --git a/src/renderer/src/pages/video/VideoPage.tsx b/src/renderer/src/pages/video/VideoPage.tsx
new file mode 100644
index 0000000000..1ce6c41325
--- /dev/null
+++ b/src/renderer/src/pages/video/VideoPage.tsx
@@ -0,0 +1,16 @@
+// interface VideoPageProps {}
+
+import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { useTranslation } from 'react-i18next'
+
+export const VideoPage = () => {
+  const { t } = useTranslation()
+  return (
+    <div className="flex flex-1 flex-col">
+      <Navbar>
+        <NavbarCenter style={{ borderRight: 'none' }}>{t('video.title')}</NavbarCenter>
+      </Navbar>
+      <div className="flex flex-1">video page</div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/store/index.ts b/src/renderer/src/store/index.ts
index f3f0fa3dda..d38c0a23ed 100644
--- a/src/renderer/src/store/index.ts
+++ b/src/renderer/src/store/index.ts
@@ -65,7 +65,7 @@ const persistedReducer = persistReducer(
   {
     key: 'cherry-studio',
     storage,
-    version: 160,
+    version: 161,
     blacklist: ['runtime', 'messages', 'messageBlocks', 'tabs'],
     migrate
   },
diff --git a/src/renderer/src/store/migrate.ts b/src/renderer/src/store/migrate.ts
index 89738b5821..5cffb58054 100644
--- a/src/renderer/src/store/migrate.ts
+++ b/src/renderer/src/store/migrate.ts
@@ -2654,6 +2654,19 @@ const migrateConfig = {
       logger.error('migrate 160 error', error as Error)
       return state
     }
+  },
+  '161': (state: RootState) => {
+    try {
+      if (state.settings && state.settings.sidebarIcons) {
+        if (!state.settings.sidebarIcons.visible.includes('video')) {
+          state.settings.sidebarIcons.visible = [...state.settings.sidebarIcons.visible, 'video']
+        }
+      }
+      return state
+    } catch (error) {
+      logger.error('migrate 161 error', error as Error)
+      return state
+    }
   }
 }
 
diff --git a/src/renderer/src/types/index.ts b/src/renderer/src/types/index.ts
index d8845cd1cc..55b574fc9d 100644
--- a/src/renderer/src/types/index.ts
+++ b/src/renderer/src/types/index.ts
@@ -534,6 +534,7 @@ export type SidebarIcon =
   | 'files'
   | 'code_tools'
   | 'notes'
+  | 'video'
 
 export type ExternalToolResult = {
   mcpTools?: MCPTool[]