feat: add qwenlm minapp

src/renderer/src/components/Icons/MinAppIcon.tsx

@@ -0,0 +1,39 @@
+import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
+import { MinAppType } from '@renderer/types'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  app: MinAppType
+  size?: number
+  style?: React.CSSProperties
+}
+
+const MinAppIcon: FC<Props> = ({ app, size = 48, style }) => {
+  const _app = DEFAULT_MIN_APPS.find((item) => item.id === app.id)
+
+  if (!_app) {
+    return null
+  }
+
+  return (
+    <Container
+      src={_app.logo}
+      style={{
+        border: _app.bodered ? '0.5px solid var(--color-border)' : 'none',
+        width: `${size}px`,
+        height: `${size}px`,
+        backgroundColor: _app.background,
+        ...style
+      }}
+    />
+  )
+}
+
+const Container = styled.img`
+  border-radius: 16px;
+  user-select: none;
+  -webkit-user-drag: none;
+`
+
+export default MinAppIcon

src/renderer/src/components/Popups/MinAppsPopover.tsx

@@ -1,11 +1,10 @@
 import { Center } from '@renderer/components/Layout'
-import { getAllMinApps } from '@renderer/config/minapps'
+import { useMinapps } from '@renderer/hooks/useMinapps'
-import { useSettings } from '@renderer/hooks/useSettings'
 import App from '@renderer/pages/apps/App'
 import { Popover } from 'antd'
 import { Empty } from 'antd'
 import { isEmpty } from 'lodash'
-import { FC, useMemo, useState } from 'react'
+import { FC, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import styled from 'styled-components'
 
@@ -15,16 +14,9 @@ interface Props {
   children: React.ReactNode
 }
 
-const AppStorePopover: FC<Props> = ({ children }) => {
+const MinAppsPopover: FC<Props> = ({ children }) => {
   const [open, setOpen] = useState(false)
-  const { miniAppIcons } = useSettings()
+  const { minapps } = useMinapps()
-  const allApps = useMemo(() => getAllMinApps(), [])
-
-  // 只显示可见的小程序
-  const visibleApps = useMemo(() => {
-    if (!miniAppIcons?.visible) return allApps
-    return allApps.filter((app) => miniAppIcons.visible.includes(app.id))
-  }, [allApps, miniAppIcons?.visible])
 
   useHotkeys('esc', () => {
     setOpen(false)
@@ -37,10 +29,10 @@ const AppStorePopover: FC<Props> = ({ children }) => {
   const content = (
     <PopoverContent>
       <AppsContainer>
-        {visibleApps.map((app) => (
+        {minapps.map((app) => (
           <App key={app.id} app={app} onClick={handleClose} size={50} />
         ))}
-        {isEmpty(visibleApps) && (
+        {isEmpty(minapps) && (
           <Center>
             <Empty />
           </Center>
@@ -70,4 +62,4 @@ const AppsContainer = styled.div`
   gap: 18px;
 `
 
-export default AppStorePopover
+export default MinAppsPopover

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

@@ -16,6 +16,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
 import DragableList from '../DragableList'
+import MinAppIcon from '../Icons/MinAppIcon'
 import MinApp from '../MinApp'
 import UserPopup from '../Popups/UserPopup'
 
@@ -149,14 +150,7 @@ const PinnedApps: FC = () => {
             <StyledLink>
               <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
                 <Icon onClick={() => MinApp.start(app)}>
-                  <AppIcon
+                  <MinAppIcon size={20} app={app} style={{ borderRadius: 6 }} />
-                    src={app.logo}
-                    style={{
-                      width: '20px',
-                      height: '20px',
-                      border: app.bodered ? '0.5px solid var(--color-border)' : 'none'
-                    }}
-                  />
                 </Icon>
               </Dropdown>
             </StyledLink>
@@ -246,10 +240,6 @@ const StyledLink = styled.div`
   }
 `
 
-const AppIcon = styled.img`
-  border-radius: 6px;
-`
-
 const AppsContainer = styled.div`
   display: flex;
   flex: 1;

src/renderer/src/config/minapps.ts

@@ -17,6 +17,7 @@ import NamiAiSearchLogo from '@renderer/assets/images/apps/nm.webp'
 import PerplexityAppLogo from '@renderer/assets/images/apps/perplexity.webp'
 import PoeAppLogo from '@renderer/assets/images/apps/poe.webp'
 import ZhipuProviderLogo from '@renderer/assets/images/apps/qingyan.png'
+import QwenlmAppLogo from '@renderer/assets/images/apps/qwenlm.webp'
 import SensetimeAppLogo from '@renderer/assets/images/apps/sensetime.png'
 import SparkDeskAppLogo from '@renderer/assets/images/apps/sparkdesk.png'
 import ThinkAnyLogo from '@renderer/assets/images/apps/thinkany.webp'
@@ -35,7 +36,7 @@ import SiliconFlowProviderLogo from '@renderer/assets/images/providers/silicon.p
 import MinApp from '@renderer/components/MinApp'
 import { MinAppType } from '@renderer/types'
 
-const _apps: MinAppType[] = [
+export const DEFAULT_MIN_APPS: MinAppType[] = [
   {
     id: 'openai',
     name: 'ChatGPT',
@@ -253,14 +254,16 @@ const _apps: MinAppType[] = [
     logo: GrokAppLogo,
     url: 'https://x.com/i/grok',
     bodered: true
+  },
+  {
+    id: 'qwenlm',
+    name: 'QwenLM',
+    logo: QwenlmAppLogo,
+    url: 'https://qwenlm.ai/'
   }
 ]
 
-export function getAllMinApps() {
-  return _apps as MinAppType[]
-}
-
 export function startMinAppById(id: string) {
-  const app = getAllMinApps().find((app) => app?.id === id)
+  const app = DEFAULT_MIN_APPS.find((app) => app?.id === id)
   app && MinApp.start(app)
 }

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

@@ -1,3 +1,4 @@
+import MinAppIcon from '@renderer/components/Icons/MinAppIcon'
 import MinApp from '@renderer/components/MinApp'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { MinAppType } from '@renderer/types'
@@ -40,14 +41,7 @@ const App: FC<Props> = ({ app, onClick, size = 60 }) => {
   return (
     <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
       <Container onClick={handleClick}>
-        <AppIcon
+        <MinAppIcon size={size} app={app} />
-          src={app.logo}
-          style={{
-            border: app.bodered ? '0.5px solid var(--color-border)' : 'none',
-            width: `${size}px`,
-            height: `${size}px`
-          }}
-        />
         <AppTitle>{app.name}</AppTitle>
       </Container>
     </Dropdown>
@@ -63,12 +57,6 @@ const Container = styled.div`
   overflow: hidden;
 `
 
-const AppIcon = styled.img`
-  border-radius: 16px;
-  user-select: none;
-  -webkit-user-drag: none;
-`
-
 const AppTitle = styled.div`
   font-size: 12px;
   margin-top: 5px;

src/renderer/src/pages/home/Navbar.tsx

@@ -1,7 +1,7 @@
 import { FormOutlined, SearchOutlined } from '@ant-design/icons'
 import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
-import AppStorePopover from '@renderer/components/Popups/AppStorePopover'
+import MinAppsPopover from '@renderer/components/Popups/MinAppsPopover'
 import SearchPopup from '@renderer/components/Popups/SearchPopup'
 import { isMac, isWindows } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
@@ -84,11 +84,11 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
             <i className="iconfont icon-icon-adaptive-width"></i>
           </NarrowIcon>
           {sidebarIcons.visible.includes('minapp') && (
-            <AppStorePopover>
+            <MinAppsPopover>
               <NarrowIcon>
                 <i className="iconfont icon-appstore" />
               </NarrowIcon>
-            </AppStorePopover>
+            </MinAppsPopover>
           )}
           {topicPosition === 'right' && (
             <NarrowIcon onClick={toggleShowTopics}>

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

@@ -1,5 +1,5 @@
 import { isMac } from '@renderer/config/constant'
-import { getAllMinApps } from '@renderer/config/minapps'
+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'
@@ -59,9 +59,9 @@ const DisplaySettings: FC = () => {
   }, [dispatch])
 
   const handleResetMinApps = useCallback(() => {
-    setVisibleMiniApps(getAllMinApps())
+    setVisibleMiniApps(DEFAULT_MIN_APPS)
     setDisabledMiniApps([])
-    updateMinapps(getAllMinApps())
+    updateMinapps(DEFAULT_MIN_APPS)
     updateDisabledMinapps([])
   }, [updateDisabledMinapps, updateMinapps])
 

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

@@ -7,10 +7,10 @@ import {
   DroppableProvided,
   DropResult
 } from '@hello-pangea/dnd'
-import { getAllMinApps } from '@renderer/config/minapps'
+import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { MinAppType } from '@renderer/types'
-import { FC, useCallback, useMemo } from 'react'
+import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -74,7 +74,6 @@ const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
   setDisabledMiniApps
 }) => {
   const { t } = useTranslation()
-  const allApps = useMemo(() => getAllMinApps(), [])
   const { pinned, updateMinapps, updateDisabledMinapps, updatePinnedMinapps } = useMinapps()
 
   const handleListUpdate = useCallback(
@@ -130,7 +129,7 @@ const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
   )
 
   const renderProgramItem = (program: MinAppType, provided: DraggableProvided, listType: ListType) => {
-    const { name, logo } = allApps.find((app) => app.id === program.id) || { name: program.name, logo: '' }
+    const { name, logo } = DEFAULT_MIN_APPS.find((app) => app.id === program.id) || { name: program.name, logo: '' }
 
     return (
       <ProgramItem ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>

src/renderer/src/store/minapps.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { getAllMinApps } from '@renderer/config/minapps'
+import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
 import { MinAppType, SidebarIcon } from '@renderer/types'
 
 export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
@@ -19,7 +19,7 @@ export interface MinAppsState {
 }
 
 const initialState: MinAppsState = {
-  enabled: getAllMinApps(),
+  enabled: DEFAULT_MIN_APPS,
   disabled: [],
   pinned: []
 }

src/renderer/src/types/index.ts

@@ -134,6 +134,7 @@ export type MinAppType = {
   logo: string
   url: string
   bodered?: boolean
+  background?: string
 }
 
 export interface FileType {