From 29e1f53c1eb0aac0c628366ae533ec344094a71b Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Fri, 6 Jun 2025 16:41:10 +0800
Subject: [PATCH] refactor: move minapp settings to minapp page

---
 src/renderer/src/components/app/Navbar.tsx    |  21 +++
 src/renderer/src/i18n/locales/zh-cn.json      |   2 +-
 src/renderer/src/i18n/locales/zh-tw.json      |   2 +-
 src/renderer/src/pages/apps/AppsPage.tsx      |  52 ++++--
 .../MiniappSettings/MiniAppIconsManager.tsx   |   0
 .../MiniappSettings/MiniAppSettings.tsx       | 156 +++++++++---------
 .../src/pages/settings/SettingsPage.tsx       |  14 --
 7 files changed, 141 insertions(+), 106 deletions(-)
 rename src/renderer/src/pages/{settings => apps}/MiniappSettings/MiniAppIconsManager.tsx (100%)
 rename src/renderer/src/pages/{settings => apps}/MiniappSettings/MiniAppSettings.tsx (57%)

diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index e5fe83b98c..e6176c2a00 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -34,6 +34,15 @@ export const NavbarRight: FC<Props> = ({ children, ...props }) => {
   )
 }
 
+export const NavbarMain: FC<Props> = ({ children, ...props }) => {
+  const isFullscreen = useFullscreen()
+  return (
+    <NavbarMainContainer {...props} $isFullscreen={isFullscreen}>
+      {children}
+    </NavbarMainContainer>
+  )
+}
+
 const NavbarContainer = styled.div`
   min-width: 100%;
   display: flex;
@@ -72,3 +81,15 @@ const NavbarRightContainer = styled.div<{ $isFullscreen: boolean }>`
   padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWindows ? '140px' : isLinux ? '120px' : '12px')};
   justify-content: flex-end;
 `
+
+const NavbarMainContainer = styled.div<{ $isFullscreen: boolean }>`
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 ${isMac ? '20px' : 0};
+  font-weight: bold;
+  color: var(--color-text-1);
+  padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWindows ? '140px' : isLinux ? '120px' : '12px')};
+`
diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json
index 4f9b6c2fae..67f233915f 100644
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -1698,7 +1698,7 @@
         "search_message_in_chat": "在当前对话中搜索消息",
         "show_app": "显示/隐藏应用",
         "show_settings": "打开设置",
-        "title": "快捷方式",
+        "title": "快捷键",
         "toggle_new_context": "清除上下文",
         "toggle_show_assistants": "切换助手显示",
         "toggle_show_topics": "切换话题显示",
diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json
index 61bd018af2..bb337fa365 100644
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@@ -1688,7 +1688,7 @@
         "search_message_in_chat": "在當前對話中搜尋訊息",
         "show_app": "顯示/隱藏應用程式",
         "show_settings": "開啟設定",
-        "title": "快速方式",
+        "title": "快捷鍵",
         "toggle_new_context": "清除上下文",
         "toggle_show_assistants": "切換助手顯示",
         "toggle_show_topics": "切換話題顯示",
diff --git a/src/renderer/src/pages/apps/AppsPage.tsx b/src/renderer/src/pages/apps/AppsPage.tsx
index 5348ac4367..31cb3f2392 100644
--- a/src/renderer/src/pages/apps/AppsPage.tsx
+++ b/src/renderer/src/pages/apps/AppsPage.tsx
@@ -1,18 +1,22 @@
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { Navbar, NavbarMain } from '@renderer/components/app/Navbar'
 import { useMinapps } from '@renderer/hooks/useMinapps'
-import { Input } from 'antd'
-import { Search } from 'lucide-react'
-import React, { FC, useState } from 'react'
+import { Button, Input } from 'antd'
+import { Search, SettingsIcon, X } from 'lucide-react'
+import React, { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router'
 import styled from 'styled-components'
 
 import App from './App'
+import MiniAppSettings from './MiniappSettings/MiniAppSettings'
 import NewAppButton from './NewAppButton'
 
 const AppsPage: FC = () => {
   const { t } = useTranslation()
   const [search, setSearch] = useState('')
   const { minapps } = useMinapps()
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+  const location = useLocation()
 
   const filteredApps = search
     ? minapps.filter(
@@ -31,31 +35,51 @@ const AppsPage: FC = () => {
     e.preventDefault()
   }
 
+  useEffect(() => {
+    setIsSettingsOpen(false)
+  }, [location.key])
+
   return (
     <Container onContextMenu={handleContextMenu}>
       <Navbar>
-        <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
+        <NavbarMain>
           {t('minapp.title')}
           <Input
             placeholder={t('common.search')}
             className="nodrag"
-            style={{ width: '30%', height: 28, borderRadius: 15 }}
+            style={{
+              width: '30%',
+              height: 28,
+              borderRadius: 15,
+              position: 'absolute',
+              left: '50vw',
+              transform: 'translateX(-50%)'
+            }}
             size="small"
             variant="filled"
             suffix={<Search size={18} />}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
+            disabled={isSettingsOpen}
           />
-          <div style={{ width: 80 }} />
-        </NavbarCenter>
+          <Button
+            type="text"
+            className="nodrag"
+            icon={isSettingsOpen ? <X size={18} /> : <SettingsIcon size={18} color="var(--color-text-2)" />}
+            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+          />
+        </NavbarMain>
       </Navbar>
       <ContentContainer id="content-container">
-        <AppsContainer style={{ height: containerHeight }}>
-          {filteredApps.map((app) => (
-            <App key={app.id} app={app} />
-          ))}
-          <NewAppButton />
-        </AppsContainer>
+        {isSettingsOpen && <MiniAppSettings />}
+        {!isSettingsOpen && (
+          <AppsContainer style={{ height: containerHeight }}>
+            {filteredApps.map((app) => (
+              <App key={app.id} app={app} />
+            ))}
+            <NewAppButton />
+          </AppsContainer>
+        )}
       </ContentContainer>
     </Container>
   )
diff --git a/src/renderer/src/pages/settings/MiniappSettings/MiniAppIconsManager.tsx b/src/renderer/src/pages/apps/MiniappSettings/MiniAppIconsManager.tsx
similarity index 100%
rename from src/renderer/src/pages/settings/MiniappSettings/MiniAppIconsManager.tsx
rename to src/renderer/src/pages/apps/MiniappSettings/MiniAppIconsManager.tsx
diff --git a/src/renderer/src/pages/settings/MiniappSettings/MiniAppSettings.tsx b/src/renderer/src/pages/apps/MiniappSettings/MiniAppSettings.tsx
similarity index 57%
rename from src/renderer/src/pages/settings/MiniappSettings/MiniAppSettings.tsx
rename to src/renderer/src/pages/apps/MiniappSettings/MiniAppSettings.tsx
index 740599abf1..30d0496ffd 100644
--- a/src/renderer/src/pages/settings/MiniappSettings/MiniAppSettings.tsx
+++ b/src/renderer/src/pages/apps/MiniappSettings/MiniAppSettings.tsx
@@ -1,8 +1,8 @@
 import { UndoOutlined } from '@ant-design/icons' // 导入重置图标
 import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
-import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { useSettings } from '@renderer/hooks/useSettings'
+import { SettingDescription, SettingDivider, SettingRowTitle, SettingTitle } from '@renderer/pages/settings'
 import { useAppDispatch } from '@renderer/store'
 import {
   setMaxKeepAliveMinapps,
@@ -12,9 +12,9 @@ import {
 import { Button, message, Slider, Switch, Tooltip } from 'antd'
 import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router'
 import styled from 'styled-components'
 
-import { SettingContainer, SettingDescription, SettingDivider, SettingGroup, SettingRowTitle, SettingTitle } from '..'
 import MiniAppIconsManager from './MiniAppIconsManager'
 
 // 默认小程序缓存数量
@@ -22,10 +22,10 @@ const DEFAULT_MAX_KEEPALIVE = 3
 
 const MiniAppSettings: FC = () => {
   const { t } = useTranslation()
-  const { theme } = useTheme()
   const dispatch = useAppDispatch()
   const { maxKeepAliveMinapps, showOpenedMinappsInSidebar, minappsOpenLinkExternal } = useSettings()
   const { minapps, disabled, updateMinapps, updateDisabledMinapps } = useMinapps()
+  const navigate = useNavigate()
 
   const [visibleMiniApps, setVisibleMiniApps] = useState(minapps)
   const [disabledMiniApps, setDisabledMiniApps] = useState(disabled || [])
@@ -72,83 +72,87 @@ const MiniAppSettings: FC = () => {
   }, [])
 
   return (
-    <SettingContainer theme={theme}>
+    <Container>
       {contextHolder} {/* 添加消息上下文 */}
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.miniapps.title')}</SettingTitle>
-        <SettingDivider />
-
-        <SettingTitle
-          style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-          <span>{t('settings.miniapps.display_title')}</span>
-          <ResetButtonWrapper>
-            <Button onClick={handleResetMinApps}>{t('common.reset')}</Button>
-          </ResetButtonWrapper>
-        </SettingTitle>
-        <BorderedContainer>
-          <MiniAppIconsManager
-            visibleMiniApps={visibleMiniApps}
-            disabledMiniApps={disabledMiniApps}
-            setVisibleMiniApps={setVisibleMiniApps}
-            setDisabledMiniApps={setDisabledMiniApps}
-          />
-        </BorderedContainer>
-        <SettingDivider />
-        <SettingRow style={{ height: 40, alignItems: 'center' }}>
-          <SettingLabelGroup>
-            <SettingRowTitle>{t('settings.miniapps.open_link_external.title')}</SettingRowTitle>
-          </SettingLabelGroup>
-          <Switch
-            checked={minappsOpenLinkExternal}
-            onChange={(checked) => dispatch(setMinappsOpenLinkExternal(checked))}
-          />
-        </SettingRow>
-        <SettingDivider />
-
-        {/* 缓存小程序数量设置 */}
-        <SettingRow>
-          <SettingLabelGroup>
-            <SettingRowTitle>{t('settings.miniapps.cache_title')}</SettingRowTitle>
-            <SettingDescription>{t('settings.miniapps.cache_description')}</SettingDescription>
-          </SettingLabelGroup>
-          <CacheSettingControls>
-            <SliderWithResetContainer>
-              <Tooltip title={t('settings.miniapps.reset_tooltip')} placement="top">
-                <ResetButton onClick={handleResetCacheLimit}>
-                  <UndoOutlined />
-                </ResetButton>
-              </Tooltip>
-              <Slider
-                min={1}
-                max={10}
-                value={maxKeepAliveMinapps}
-                onChange={handleCacheChange}
-                marks={{
-                  1: '1',
-                  5: '5',
-                  10: 'Max'
-                }}
-                tooltip={{ formatter: (value) => `${value}` }}
-              />
-            </SliderWithResetContainer>
-          </CacheSettingControls>
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingLabelGroup>
-            <SettingRowTitle>{t('settings.miniapps.sidebar_title')}</SettingRowTitle>
-            <SettingDescription>{t('settings.miniapps.sidebar_description')}</SettingDescription>
-          </SettingLabelGroup>
-          <Switch
-            checked={showOpenedMinappsInSidebar}
-            onChange={(checked) => dispatch(setShowOpenedMinappsInSidebar(checked))}
-          />
-        </SettingRow>
-      </SettingGroup>
-    </SettingContainer>
+      <SettingTitle
+        style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+        <span>{t('settings.miniapps.display_title')}</span>
+        <ResetButtonWrapper>
+          <Button onClick={handleResetMinApps}>{t('common.reset')}</Button>
+        </ResetButtonWrapper>
+      </SettingTitle>
+      <BorderedContainer>
+        <MiniAppIconsManager
+          visibleMiniApps={visibleMiniApps}
+          disabledMiniApps={disabledMiniApps}
+          setVisibleMiniApps={setVisibleMiniApps}
+          setDisabledMiniApps={setDisabledMiniApps}
+        />
+      </BorderedContainer>
+      <SettingDivider />
+      <SettingRow style={{ height: 40, alignItems: 'center' }}>
+        <SettingLabelGroup>
+          <SettingRowTitle>{t('settings.miniapps.open_link_external.title')}</SettingRowTitle>
+        </SettingLabelGroup>
+        <Switch
+          checked={minappsOpenLinkExternal}
+          onChange={(checked) => dispatch(setMinappsOpenLinkExternal(checked))}
+        />
+      </SettingRow>
+      <SettingDivider />
+      {/* 缓存小程序数量设置 */}
+      <SettingRow>
+        <SettingLabelGroup>
+          <SettingRowTitle>{t('settings.miniapps.cache_title')}</SettingRowTitle>
+          <SettingDescription>{t('settings.miniapps.cache_description')}</SettingDescription>
+        </SettingLabelGroup>
+        <CacheSettingControls>
+          <SliderWithResetContainer>
+            <Tooltip title={t('settings.miniapps.reset_tooltip')} placement="top">
+              <ResetButton onClick={handleResetCacheLimit}>
+                <UndoOutlined />
+              </ResetButton>
+            </Tooltip>
+            <Slider
+              min={1}
+              max={10}
+              value={maxKeepAliveMinapps}
+              onChange={handleCacheChange}
+              marks={{
+                1: '1',
+                5: '5',
+                10: 'Max'
+              }}
+              tooltip={{ formatter: (value) => `${value}` }}
+            />
+          </SliderWithResetContainer>
+        </CacheSettingControls>
+      </SettingRow>
+      <SettingDivider />
+      <SettingRow>
+        <SettingLabelGroup>
+          <SettingRowTitle>{t('settings.miniapps.sidebar_title')}</SettingRowTitle>
+          <SettingDescription>{t('settings.miniapps.sidebar_description')}</SettingDescription>
+        </SettingLabelGroup>
+        <Switch
+          checked={showOpenedMinappsInSidebar}
+          onChange={(checked) => dispatch(setShowOpenedMinappsInSidebar(checked))}
+        />
+      </SettingRow>
+      <SettingDivider />
+      <SettingRow style={{ justifyContent: 'flex-end' }}>
+        <Button onClick={() => navigate('/apps')}>{t('common.close')}</Button>
+      </SettingRow>
+    </Container>
   )
 }
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`
+
 // 修改和新增样式
 const SettingRow = styled.div`
   display: flex;
diff --git a/src/renderer/src/pages/settings/SettingsPage.tsx b/src/renderer/src/pages/settings/SettingsPage.tsx
index 5048eabf74..7ce087313c 100644
--- a/src/renderer/src/pages/settings/SettingsPage.tsx
+++ b/src/renderer/src/pages/settings/SettingsPage.tsx
@@ -1,5 +1,4 @@
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
-import { useSidebarIconShow } from '@renderer/hooks/useSidebarIcon'
 import ModelSettings from '@renderer/pages/settings/ModelSettings/ModelSettings'
 import {
   Cloud,
@@ -7,7 +6,6 @@ import {
   Globe,
   HardDrive,
   Info,
-  LayoutGrid,
   MonitorCog,
   Package,
   Rocket,
@@ -28,7 +26,6 @@ import DisplaySettings from './DisplaySettings/DisplaySettings'
 import GeneralSettings from './GeneralSettings'
 import MCPSettings from './MCPSettings'
 import { McpSettingsNavbar } from './MCPSettings/McpSettingsNavbar'
-import MiniAppSettings from './MiniappSettings/MiniAppSettings'
 import ProvidersList from './ProviderSettings'
 import QuickAssistantSettings from './QuickAssistantSettings'
 import QuickPhraseSettings from './QuickPhraseSettings'
@@ -40,8 +37,6 @@ const SettingsPage: FC = () => {
   const { pathname } = useLocation()
   const { t } = useTranslation()
 
-  const showMiniAppSettings = useSidebarIconShow('minapp')
-
   const isRoute = (path: string): string => (pathname.startsWith(path) ? 'active' : '')
 
   return (
@@ -88,14 +83,6 @@ const SettingsPage: FC = () => {
               {t('settings.display.title')}
             </MenuItem>
           </MenuItemLink>
-          {showMiniAppSettings && (
-            <MenuItemLink to="/settings/miniapps">
-              <MenuItem className={isRoute('/settings/miniapps')}>
-                <LayoutGrid size={18} />
-                {t('settings.miniapps.title')}
-              </MenuItem>
-            </MenuItemLink>
-          )}
           <MenuItemLink to="/settings/shortcut">
             <MenuItem className={isRoute('/settings/shortcut')}>
               <Command size={18} />
@@ -141,7 +128,6 @@ const SettingsPage: FC = () => {
             <Route path="mcp/*" element={<MCPSettings />} />
             <Route path="general" element={<GeneralSettings />} />
             <Route path="display" element={<DisplaySettings />} />
-            {showMiniAppSettings && <Route path="miniapps" element={<MiniAppSettings />} />}
             <Route path="shortcut" element={<ShortcutSettings />} />
             <Route path="quickAssistant" element={<QuickAssistantSettings />} />
             <Route path="selectionAssistant" element={<SelectionAssistantSettings />} />