feat: minApp supports show/hide, add to the sidebar

src/renderer/src/components/MinApp/index.tsx

@@ -202,23 +202,40 @@ const EmptyView = styled.div`
 export default class MinApp {
   static topviewId = 0
   static onClose = () => {}
+  static isOpening = false
+
+  static async start(app: MinAppType) {
+    if (this.isOpening) return
+    this.isOpening = true
+    
+    try {
+      // 先关闭现有的小程序
+      await this.close()
+      
+      // 确保 webview 完全卸载
+      await new Promise(resolve => setTimeout(resolve, 100))
+
+      store.dispatch(setMinappShow(true))
+      return new Promise<any>((resolve) => {
+        TopView.show(
+          <PopupContainer
+            app={app}
+            resolve={(v) => {
+              resolve(v)
+              this.close()
+            }}
+          />,
+          'MinApp'
+        )
+      })
+    } finally {
+      this.isOpening = false
+    }
+  }
+
   static close() {
+    if (!this.isOpening) return
     TopView.hide('MinApp')
     store.dispatch(setMinappShow(false))
   }
-  static start(app: MinAppType) {
-    store.dispatch(setMinappShow(true))
-    return new Promise<any>((resolve) => {
-      TopView.show(
-        <PopupContainer
-          app={app}
-          resolve={(v) => {
-            resolve(v)
-            this.close()
-          }}
-        />,
-        'MinApp'
-      )
-    })
-  }
 }

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

@@ -1,6 +1,7 @@
 import { FileSearchOutlined, FolderOutlined, PictureOutlined, TranslationOutlined } from '@ant-design/icons'
 import { isMac } from '@renderer/config/constant'
 import { isLocalAi, UserAvatar } from '@renderer/config/env'
+import { getAllMinApps } from '@renderer/config/minapps'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import useAvatar from '@renderer/hooks/useAvatar'
 import { modelGenerating, useRuntime } from '@renderer/hooks/useRuntime'
@@ -21,8 +22,9 @@ const Sidebar: FC = () => {
   const { minappShow } = useRuntime()
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { windowStyle, sidebarIcons } = useSettings()
+  const { windowStyle, sidebarIcons, miniAppIcons } = useSettings()
   const { theme, toggleTheme } = useTheme()
+  const allApps = getAllMinApps()
 
   const isRoute = (path: string): string => (pathname === path ? 'active' : '')
   const isRoutes = (path: string): string => (pathname.startsWith(path) ? 'active' : '')
@@ -72,6 +74,27 @@ const Sidebar: FC = () => {
     })
   }
 
+  const renderPinnedApps = () => {
+    if (!miniAppIcons?.pinned) return null
+    const pinnedApps = allApps.filter((app) => miniAppIcons.pinned.includes(app.id))
+    return pinnedApps.map((app) => (
+      <Tooltip key={app.id} title={app.name} mouseEnterDelay={0.8} placement="right">
+        <StyledLink>
+          <Icon onClick={() => MinApp.start(app)}>
+            <AppIcon
+              src={app.logo}
+              style={{
+                width: '20px',
+                height: '20px',
+                border: app.bodered ? '0.5px solid var(--color-border)' : 'none'
+              }}
+            />
+          </Icon>
+        </StyledLink>
+      </Tooltip>
+    ))
+  }
+
   return (
     <Container
       id="app-sidebar"
@@ -81,7 +104,12 @@ const Sidebar: FC = () => {
       }}>
       <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
       <MainMenus>
-        <Menus onClick={MinApp.onClose}>{renderMainMenus()}</Menus>
+        <ScrollContainer>
+          <Menus onClick={MinApp.onClose}>
+            {renderMainMenus()}
+            {renderPinnedApps()}
+          </Menus>
+        </ScrollContainer>
       </MainMenus>
       <Menus onClick={MinApp.onClose}>
         <Tooltip title={t('settings.theme.title')} mouseEnterDelay={0.8} placement="right">
@@ -129,6 +157,7 @@ const AvatarImg = styled(Avatar)`
 const MainMenus = styled.div`
   display: flex;
   flex: 1;
+  overflow: hidden;
 `
 
 const Menus = styled.div`
@@ -182,4 +211,31 @@ const StyledLink = styled.div`
   }
 `
 
+const AppIcon = styled.img`
+  border-radius: 6px;
+`
+
+const ScrollContainer = styled.div`
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+
+  &::-webkit-scrollbar {
+    width: 0px;
+  }
+
+  &:hover::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+`
+
 export default Sidebar

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

@@ -264,7 +264,9 @@
       "error.get_embedding_dimensions": "Failed to get embedding dimensions"
     },
     "minapp": {
-      "title": "MinApp"
+      "title": "MinApp",
+      "sidebar.add.title": "Add minAPP to sidebar",
+      "sidebar.remove.title": "Remove minAPP from sidebar"
     },
     "ollama": {
       "keep_alive_time.description": "The time in minutes to keep the connection alive, default is 5 minutes.",
@@ -405,6 +407,10 @@
       "display.sidebar.disabled": "Hide my sidebar icons",
       "display.sidebar.chat.hiddenMessage": "Assistants are basic functions, not supported for hiding",
       "display.sidebar.empty": "Drag the hidden feature from the left side here",
+      "display.minApp.title": "MinApp  Settings",
+      "display.minApp.visible": "Visible MinApp",
+      "display.minApp.disabled": "Hidden MinApp",
+      "display.minApp.empty": "Drag minApp from the left to hide them here",
       "display.topic.title": "Topic Settings",
       "display.custom.css": "Custom CSS",
       "display.custom.css.placeholder": "/* Put custom CSS here */",

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

@@ -262,7 +262,9 @@
       "copy.success": "コピーしました！"
     },
     "minapp": {
-      "title": "ミニアプリ"
+      "title": "ミニアプリ",
+      "sidebar.add.title": "ミニプログラムをサイドバーに追加",
+      "sidebar.remove.title": "サイドバーからアプレットを削除する"
     },
     "ollama": {
       "keep_alive_time.description": "モデルがメモリに保持される時間（デフォルト：5分）",
@@ -406,6 +408,10 @@
       "display.topic.title": "トピック設定",
       "display.custom.css": "カスタムCSS",
       "display.custom.css.placeholder": "/* ここにカスタムCSSを入力 */",
+      "display.minApp.title": "ミニプログラム表示設定",
+      "display.minApp.visible": "表示中ミニプログラム",
+      "display.minApp.disabled": "非表示ミニプログラム",
+      "display.minApp.empty": "非表示にしたいアプレットを左からここまでドラッグします",
       "input.auto_translate_with_space": "スペースを3回押して翻訳",
       "messages.divider": "メッセージ間に区切り線を表示",
       "messages.input.paste_long_text_as_file": "長いテキストをファイルとして貼り付け",

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

@@ -264,7 +264,9 @@
       "error.get_embedding_dimensions": "Не удалось получить размерность встраивания"
     },
     "minapp": {
-      "title": "Встроенные приложения"
+      "title": "Встроенные приложения",
+      "sidebar.add.title": "Добавить мини-программу на боковую панель",
+      "sidebar.remove.title": "Удалить апплет из боковой панели"
     },
     "ollama": {
       "keep_alive_time.description": "Время в минутах, в течение которого модель остается активной, по умолчанию 5 минут.",
@@ -405,6 +407,10 @@
       "display.sidebar.disabled": "Скрыть значок на боковой панели",
       "display.sidebar.chat.hiddenMessage": "Помощник является базовой функцией и не поддерживает скрытие",
       "display.sidebar.empty": "Перетащите скрываемую функцию с левой стороны сюда",
+      "display.minApp.title": "Настройки отображения мини программы",
+      "display.minApp.visible": "Отображаемый апплет",
+      "display.minApp.disabled": "скрытый апплет",
+      "display.minApp.empty": "Перетащите апплет, который хотите скрыть, слева сюда",
       "display.topic.title": "Настройки топиков",
       "display.custom.css": "Пользовательский CSS",
       "display.custom.css.placeholder": "/* Здесь введите пользовательский CSS */",

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

@@ -265,7 +265,9 @@
       "error.get_embedding_dimensions": "获取嵌入维度失败"
     },
     "minapp": {
-      "title": "小程序"
+      "title": "小程序",
+      "sidebar.add.title": "添加小程序到侧边栏",
+      "sidebar.remove.title": "从侧边栏移除小程序"
     },
     "ollama": {
       "keep_alive_time.description": "对话后模型在内存中保持的时间（默认：5分钟）",
@@ -406,6 +408,10 @@
       "display.sidebar.disabled": "隐藏我的侧边栏图标",
       "display.sidebar.chat.hiddenMessage": "助手是基础功能，不支持隐藏",
       "display.sidebar.empty": "把要隐藏的功能从左侧拖拽到这里",
+      "display.minApp.title": "小程序显示设置",
+      "display.minApp.visible": "显示的小程序",
+      "display.minApp.disabled": "隐藏的小程序",
+      "display.minApp.empty": "把要隐藏的小程序从左侧拖拽到这里",
       "display.topic.title": "话题设置",
       "display.custom.css": "自定义 CSS",
       "display.custom.css.placeholder": "/* 这里写自定义CSS */",

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

@@ -264,7 +264,9 @@
       "error.get_embedding_dimensions": "獲取嵌入維度失敗"
     },
     "minapp": {
-      "title": "小程序"
+      "title": "小程序",
+      "sidebar.add.title": "新增小程式到側邊欄",
+      "sidebar.remove.title": "從側邊欄移除小程式"
     },
     "ollama": {
       "keep_alive_time.description": "對話後模型在記憶體中保持的時間（預設為 5 分鐘）。",
@@ -409,6 +411,14 @@
       "display.custom.css": "自定義 CSS",
       "display.custom.css.placeholder": "/* 這裡寫自定義 CSS */",
       "input.auto_translate_with_space": "快速敲擊3次空格翻譯",
+     "display": {
+        "minApp": {
+          "title": "小程序顯示設定",
+          "visible": "顯示的小程序",
+          "disabled": "隱藏的小程序",
+          "empty": "把要隱藏的小程序從左側拖拽到這裡"
+        }
+      },
       "messages.divider": "訊息間顯示分隔線",
       "messages.input.paste_long_text_as_file": "將長文本貼上為檔案",
       "messages.input.send_shortcuts": "發送快捷鍵",

src/renderer/src/pages/apps/App.tsx

@@ -1,8 +1,14 @@
 import MinApp from '@renderer/components/MinApp'
+import { useAppDispatch, useAppSelector } from '@renderer/store'
+import { setMiniAppIcons } from '@renderer/store/settings'
 import { MinAppType } from '@renderer/types'
+import type { MenuProps } from 'antd'
+import { Dropdown } from 'antd'
 import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+
 interface Props {
   app: MinAppType
   onClick?: () => void
@@ -10,23 +16,49 @@ interface Props {
 }
 
 const App: FC<Props> = ({ app, onClick, size = 60 }) => {
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+  const { miniAppIcons } = useAppSelector((state) => state.settings)
+  const isPinned = miniAppIcons?.pinned.includes(app.id)
+
   const handleClick = () => {
     MinApp.start(app)
     onClick?.()
   }
 
+  const menuItems: MenuProps['items'] = [
+    {
+      key: 'togglePin',
+      label: isPinned ? t('minapp.sidebar.remove.title') : t('minapp.sidebar.add.title'),
+      onClick: () => {
+        const newPinned = isPinned
+          ? miniAppIcons.pinned.filter((id) => id !== app.id)
+          : [...(miniAppIcons.pinned || []), app.id]
+
+        dispatch(
+          setMiniAppIcons({
+            ...miniAppIcons,
+            pinned: newPinned
+          })
+        )
+      }
+    }
+  ]
+
   return (
-    <Container onClick={handleClick}>
+    <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
-      <AppIcon
+      <Container onClick={handleClick}>
-        src={app.logo}
+        <AppIcon
-        style={{
+          src={app.logo}
-          border: app.bodered ? '0.5px solid var(--color-border)' : 'none',
+          style={{
-          width: `${size}px`,
+            border: app.bodered ? '0.5px solid var(--color-border)' : 'none',
-          height: `${size}px`
+            width: `${size}px`,
-        }}
+            height: `${size}px`
-      />
+          }}
-      <AppTitle>{app.name}</AppTitle>
+        />
-    </Container>
+        <AppTitle>{app.name}</AppTitle>
+      </Container>
+    </Dropdown>
   )
 }
 

src/renderer/src/pages/apps/AppsPage.tsx

@@ -2,9 +2,10 @@ import { SearchOutlined } from '@ant-design/icons'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { Center } from '@renderer/components/Layout'
 import { getAllMinApps } from '@renderer/config/minapps'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { Empty, Input } from 'antd'
 import { isEmpty } from 'lodash'
-import { FC, useMemo, useState } from 'react'
+import React, { FC, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -13,16 +14,34 @@ import App from './App'
 const AppsPage: FC = () => {
   const { t } = useTranslation()
   const [search, setSearch] = useState('')
-  const apps = useMemo(() => getAllMinApps(), [])
+  const { miniAppIcons } = useSettings()
+  const allApps = useMemo(() => getAllMinApps(), [])
+
+  // 只显示可见的小程序
+  const visibleApps = useMemo(() => {
+    if (!miniAppIcons?.visible) return allApps
+    return allApps.filter((app) => miniAppIcons.visible.includes(app.id))
+  }, [allApps, miniAppIcons?.visible])
 
   const filteredApps = search
-    ? apps.filter(
+    ? visibleApps.filter(
         (app) => app.name.toLowerCase().includes(search.toLowerCase()) || app.url.includes(search.toLowerCase())
       )
-    : apps
+    : visibleApps
+
+  // Calculate the required number of lines
+  const itemsPerRow = Math.floor(930 / 115) // Maximum width divided by the width of each item (including spacing)
+  const rowCount = Math.ceil(filteredApps.length / itemsPerRow)
+  // Each line height is 85px (60px icon + 5px margin + 12px text + spacing)
+  const containerHeight = rowCount * 85 + (rowCount - 1) * 25 // 25px is the line spacing.
+
+  // Disable right-click menu in blank area
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault()
+  }
 
   return (
-    <Container>
+    <Container onContextMenu={handleContextMenu}>
       <Navbar>
         <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
           {t('minapp.title')}
@@ -40,7 +59,7 @@ const AppsPage: FC = () => {
         </NavbarCenter>
       </Navbar>
       <ContentContainer id="content-container">
-        <AppsContainer>
+        <AppsContainer style={{ height: containerHeight }}>
           {filteredApps.map((app) => (
             <App key={app.id} app={app} />
           ))}
@@ -68,7 +87,7 @@ const ContentContainer = styled.div`
   flex-direction: row;
   justify-content: center;
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 50px;
 `
 
@@ -77,9 +96,7 @@ const AppsContainer = styled.div`
   min-width: 0;
   max-width: 930px;
   width: 100%;
-  max-height: 520px;
+  grid-template-columns: repeat(auto-fill, 90px);
-  min-height: 520px;
-  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
   gap: 25px;
   justify-content: center;
 `

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

@@ -3,9 +3,11 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useAppDispatch } from '@renderer/store'
 import {
+  DEFAULT_MINIAPP_ICONS,
   DEFAULT_SIDEBAR_ICONS,
   setClickAssistantToShowTopic,
   setCustomCss,
+  setMiniAppIcons,
   setShowTopicTime,
   setSidebarIcons
 } from '@renderer/store/settings'
@@ -16,6 +18,7 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '..'
+import MiniAppIconsManager from './MiniAppIconsManager'
 import SidebarIconsManager from './SidebarIconsManager'
 
 const DisplaySettings: FC = () => {
@@ -29,7 +32,8 @@ const DisplaySettings: FC = () => {
     clickAssistantToShowTopic,
     showTopicTime,
     customCss,
-    sidebarIcons
+    sidebarIcons,
+    miniAppIcons
   } = useSettings()
   const { theme: themeMode } = useTheme()
   const { t } = useTranslation()
@@ -37,6 +41,8 @@ const DisplaySettings: FC = () => {
 
   const [visibleIcons, setVisibleIcons] = useState(sidebarIcons?.visible || DEFAULT_SIDEBAR_ICONS)
   const [disabledIcons, setDisabledIcons] = useState(sidebarIcons?.disabled || [])
+  const [visibleMiniApps, setVisibleMiniApps] = useState(miniAppIcons?.visible || DEFAULT_MINIAPP_ICONS)
+  const [disabledMiniApps, setDisabledMiniApps] = useState(miniAppIcons?.disabled || [])
 
   // 使用useCallback优化回调函数
   const handleWindowStyleChange = useCallback(
@@ -52,6 +58,18 @@ const DisplaySettings: FC = () => {
     dispatch(setSidebarIcons({ visible: DEFAULT_SIDEBAR_ICONS, disabled: [] }))
   }, [dispatch])
 
+  const handleResetMinApps = useCallback(() => {
+    setVisibleMiniApps(DEFAULT_MINIAPP_ICONS)
+    setDisabledMiniApps([])
+    dispatch(
+      setMiniAppIcons({
+        visible: DEFAULT_MINIAPP_ICONS,
+        disabled: [],
+        pinned: miniAppIcons?.pinned || []
+      })
+    )
+  }, [dispatch, miniAppIcons?.pinned])
+
   return (
     <SettingContainer theme={themeMode}>
       <SettingGroup theme={theme}>
@@ -142,6 +160,22 @@ const DisplaySettings: FC = () => {
           }}
         />
       </SettingGroup>
+      <SettingGroup theme={theme}>
+        <SettingTitle
+          style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span>{t('settings.display.minApp.title')}</span>
+          <ResetButtonWrapper>
+            <Button onClick={handleResetMinApps}>{t('common.reset')}</Button>
+          </ResetButtonWrapper>
+        </SettingTitle>
+        <SettingDivider />
+        <MiniAppIconsManager
+          visibleMiniApps={visibleMiniApps}
+          disabledMiniApps={disabledMiniApps}
+          setVisibleMiniApps={setVisibleMiniApps}
+          setDisabledMiniApps={setDisabledMiniApps}
+        />
+      </SettingGroup>
     </SettingContainer>
   )
 }

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

@@ -0,0 +1,256 @@
+import { CloseOutlined } from '@ant-design/icons'
+import {
+  DragDropContext,
+  Draggable,
+  DraggableProvided,
+  Droppable,
+  DroppableProvided,
+  DropResult
+} from '@hello-pangea/dnd'
+import { getAllMinApps } from '@renderer/config/minapps'
+import { useAppDispatch } from '@renderer/store'
+import { FC, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { MinAppIcon, setMiniAppIcons } from '../../../store/settings'
+
+interface MiniAppManagerProps {
+  visibleMiniApps: MinAppIcon[]
+  disabledMiniApps: MinAppIcon[]
+  setVisibleMiniApps: (programs: MinAppIcon[]) => void
+  setDisabledMiniApps: (programs: MinAppIcon[]) => void
+}
+
+// 将可复用的类型和常量提取出来
+type ListType = 'visible' | 'disabled'
+interface AppInfo {
+  name: string
+  logo?: string
+}
+
+const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
+  visibleMiniApps,
+  disabledMiniApps,
+  setVisibleMiniApps,
+  setDisabledMiniApps
+}) => {
+  const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+  const allApps = useMemo(() => getAllMinApps(), [])
+
+  // 创建 app 信息的 Map 缓存
+  const appInfoMap = useMemo(() => {
+    return allApps.reduce(
+      (acc, app) => {
+        acc[String(app.id)] = { name: app.name, logo: app.logo }
+        return acc
+      },
+      {} as Record<string, AppInfo>
+    )
+  }, [allApps])
+
+  const getAppInfo = useCallback(
+    (id: MinAppIcon) => {
+      return appInfoMap[String(id)] || { name: id, logo: '' }
+    },
+    [appInfoMap]
+  )
+
+  const handleListUpdate = useCallback(
+    (visible: MinAppIcon[], disabled: MinAppIcon[]) => {
+      setVisibleMiniApps(visible)
+      setDisabledMiniApps(disabled)
+      dispatch(setMiniAppIcons({ visible, disabled, pinned: [] }))
+    },
+    [dispatch, setVisibleMiniApps, setDisabledMiniApps]
+  )
+
+  const onDragEnd = useCallback(
+    (result: DropResult) => {
+      const { source, destination } = result
+      if (!destination) return
+
+      const sourceList = source.droppableId === 'visible' ? visibleMiniApps : disabledMiniApps
+      const destList = destination.droppableId === 'visible' ? visibleMiniApps : disabledMiniApps
+
+      if (source.droppableId === destination.droppableId) {
+        const newList = [...sourceList]
+        const [removed] = newList.splice(source.index, 1)
+        newList.splice(destination.index, 0, removed)
+
+        handleListUpdate(
+          source.droppableId === 'visible' ? newList : visibleMiniApps,
+          source.droppableId === 'disabled' ? newList : disabledMiniApps
+        )
+      } else {
+        const sourceNewList = [...sourceList]
+        const [removed] = sourceNewList.splice(source.index, 1)
+        const destNewList = [...destList]
+        destNewList.splice(destination.index, 0, removed)
+
+        handleListUpdate(
+          destination.droppableId === 'visible' ? destNewList : sourceNewList,
+          destination.droppableId === 'disabled' ? destNewList : sourceNewList
+        )
+      }
+    },
+    [visibleMiniApps, disabledMiniApps, handleListUpdate]
+  )
+
+  const onMoveMiniApp = useCallback(
+    (program: MinAppIcon, fromList: ListType) => {
+      const isMovingToVisible = fromList === 'disabled'
+      const newVisible = isMovingToVisible
+        ? [...visibleMiniApps, program]
+        : visibleMiniApps.filter((p) => p !== program)
+      const newDisabled = isMovingToVisible
+        ? disabledMiniApps.filter((p) => p !== program)
+        : [...disabledMiniApps, program]
+
+      handleListUpdate(newVisible, newDisabled)
+    },
+    [visibleMiniApps, disabledMiniApps, handleListUpdate]
+  )
+
+  const renderProgramItem = (program: MinAppIcon, provided: DraggableProvided, listType: ListType) => {
+    const { name, logo } = getAppInfo(program)
+
+    return (
+      <ProgramItem ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+        <ProgramContent>
+          <AppLogo src={logo} alt={name} />
+          <span>{name}</span>
+        </ProgramContent>
+        <CloseButton onClick={() => onMoveMiniApp(program, listType)}>
+          <CloseOutlined />
+        </CloseButton>
+      </ProgramItem>
+    )
+  }
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <ProgramSection>
+        {(['visible', 'disabled'] as const).map((listType) => (
+          <ProgramColumn key={listType}>
+            <h4>{t(`settings.display.minApp.${listType}`)}</h4>
+            <Droppable droppableId={listType}>
+              {(provided: DroppableProvided) => (
+                <ProgramList ref={provided.innerRef} {...provided.droppableProps}>
+                  <ScrollContainer>
+                    {(listType === 'visible' ? visibleMiniApps : disabledMiniApps).map((program, index) => (
+                      <Draggable key={program} draggableId={String(program)} index={index}>
+                        {(provided: DraggableProvided) => renderProgramItem(program, provided, listType)}
+                      </Draggable>
+                    ))}
+                    {disabledMiniApps.length === 0 && listType === 'disabled' && (
+                      <EmptyPlaceholder>{t('settings.display.minApp.empty')}</EmptyPlaceholder>
+                    )}
+                    {provided.placeholder}
+                  </ScrollContainer>
+                </ProgramList>
+              )}
+            </Droppable>
+          </ProgramColumn>
+        ))}
+      </ProgramSection>
+    </DragDropContext>
+  )
+}
+
+const AppLogo = styled.img`
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  object-fit: contain;
+`
+
+const ScrollContainer = styled.div`
+  overflow-y: auto;
+  height: 100%;
+`
+
+const ProgramSection = styled.div`
+  display: flex;
+  gap: 20px;
+  padding: 10px;
+  background: var(--color-background);
+`
+
+const ProgramColumn = styled.div`
+  flex: 1;
+
+  h4 {
+    margin-bottom: 10px;
+    color: var(--color-text);
+    font-weight: normal;
+  }
+`
+
+const ProgramList = styled.div`
+  height: 365px;
+  min-height: 365px;
+  padding: 10px;
+  background: var(--color-background-soft);
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+`
+
+const ProgramItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  cursor: move;
+`
+
+const ProgramContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  .iconfont {
+    font-size: 16px;
+    color: var(--color-text);
+  }
+
+  span {
+    color: var(--color-text);
+  }
+`
+
+const CloseButton = styled.div`
+  cursor: pointer;
+  color: var(--color-text-2);
+  opacity: 0;
+  transition: all 0.2s;
+
+  &:hover {
+    color: var(--color-text);
+  }
+
+  ${ProgramItem}:hover & {
+    opacity: 1;
+  }
+`
+
+const EmptyPlaceholder = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-2);
+  text-align: center;
+  padding: 20px;
+  font-size: 14px;
+`
+
+export default MiniAppIconsManager

src/renderer/src/store/migrate.ts

@@ -9,7 +9,7 @@ import { isEmpty } from 'lodash'
 import { createMigrate } from 'redux-persist'
 
 import { RootState } from '.'
-import { DEFAULT_SIDEBAR_ICONS } from './settings'
+import { DEFAULT_MINIAPP_ICONS, DEFAULT_SIDEBAR_ICONS } from './settings'
 
 const migrateConfig = {
   '2': (state: RootState) => {
@@ -789,6 +789,11 @@ const migrateConfig = {
       visible: DEFAULT_SIDEBAR_ICONS,
       disabled: []
     }
+    state.settings.miniAppIcons = {
+      visible: DEFAULT_MINIAPP_ICONS,
+      disabled: [],
+      pinned: []
+    }
     return state
   }
 }

src/renderer/src/store/settings.ts

@@ -1,4 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { getAllMinApps } from '@renderer/config/minapps'
 import { TRANSLATE_PROMPT } from '@renderer/config/prompts'
 import { CodeStyleVarious, LanguageVarious, ThemeMode } from '@renderer/types'
 
@@ -15,6 +16,11 @@ export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
   'knowledge',
   'files'
 ]
+const [minApps] = await Promise.all([getAllMinApps()])
+
+export type MinAppIcon = (typeof minApps)[number]['id'] // 假设每个小程序对象有 type 字段
+
+export const DEFAULT_MINIAPP_ICONS: MinAppIcon[] = minApps.map((app) => app.id)
 
 export interface SettingsState {
   showAssistants: boolean
@@ -61,6 +67,11 @@ export interface SettingsState {
     disabled: SidebarIcon[]
   }
   narrowMode: boolean
+  miniAppIcons: {
+    visible: MinAppIcon[]
+    disabled: MinAppIcon[]
+    pinned: MinAppIcon[]
+  }
 }
 
 const initialState: SettingsState = {
@@ -105,7 +116,12 @@ const initialState: SettingsState = {
     visible: DEFAULT_SIDEBAR_ICONS,
     disabled: []
   },
-  narrowMode: false
+  narrowMode: false,
+  miniAppIcons: {
+    visible: DEFAULT_MINIAPP_ICONS,
+    disabled: [],
+    pinned: []
+  }
 }
 
 const settingsSlice = createSlice({
@@ -235,6 +251,12 @@ const settingsSlice = createSlice({
     },
     setNarrowMode: (state, action: PayloadAction<boolean>) => {
       state.narrowMode = action.payload
+    },
+    setMiniAppIcons: (
+      state,
+      action: PayloadAction<{ visible: MinAppIcon[]; disabled: MinAppIcon[]; pinned: MinAppIcon[] }>
+    ) => {
+      state.miniAppIcons = action.payload
     }
   }
 })
@@ -280,7 +302,8 @@ export const {
   setCustomCss,
   setTopicNamingPrompt,
   setSidebarIcons,
-  setNarrowMode
+  setNarrowMode,
+  setMiniAppIcons
 } = settingsSlice.actions
 
 export default settingsSlice.reducer