Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: the miniapp sorting problem, resolve #1725 #1785

Merged
merged 2 commits into from
Feb 17, 2025
Merged

fix: the miniapp sorting problem, resolve #1725 #1785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
addc2f8
fix: Fix the miniapp sorting problem, resolve #1725
ousugo Feb 16, 2025
80f9a3e
fix: correction of the capitalization of Perplexity names
ousugo Feb 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/renderer/src/config/minapps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import AIStudioLogo from '@renderer/assets/images/apps/aistudio.svg?url'
import BaiduAiAppLogo from '@renderer/assets/images/apps/baidu-ai.png?url'
import BaicuanAppLogo from '@renderer/assets/images/apps/baixiaoying.webp?url'
import BoltAppLogo from '@renderer/assets/images/apps/bolt.svg?url'
import CozeAppLogo from '@renderer/assets/images/apps/coze.webp?url'
import DevvAppLogo from '@renderer/assets/images/apps/devv.png?url'
import DoubaoAppLogo from '@renderer/assets/images/apps/doubao.png?url'
import DuckDuckGoAppLogo from '@renderer/assets/images/apps/duckduckgo.webp?url'
Expand All @@ -18,6 +19,7 @@ import KimiAppLogo from '@renderer/assets/images/apps/kimi.jpg?url'
import MetasoAppLogo from '@renderer/assets/images/apps/metaso.webp?url'
import NamiAiLogo from '@renderer/assets/images/apps/nm.png?url'
import NamiAiSearchLogo from '@renderer/assets/images/apps/nm-search.webp?url'
import NotebookLMAppLogo from '@renderer/assets/images/apps/notebooklm.svg?url'
import PerplexityAppLogo from '@renderer/assets/images/apps/perplexity.webp?url'
import PoeAppLogo from '@renderer/assets/images/apps/poe.webp?url'
import ZhipuProviderLogo from '@renderer/assets/images/apps/qingyan.png?url'
Expand All @@ -29,10 +31,8 @@ import TiangongAiLogo from '@renderer/assets/images/apps/tiangong.png?url'
import WanZhiAppLogo from '@renderer/assets/images/apps/wanzhi.jpg?url'
import XiaoYiAppLogo from '@renderer/assets/images/apps/xiaoyi.webp?url'
import TencentYuanbaoAppLogo from '@renderer/assets/images/apps/yuanbao.png?url'
import NotebookLMAppLogo from '@renderer/assets/images/apps/notebooklm.svg?url'
import YuewenAppLogo from '@renderer/assets/images/apps/yuewen.png?url'
import ZhihuAppLogo from '@renderer/assets/images/apps/zhihu.png?url'
import CozeAppLogo from '@renderer/assets/images/apps/coze.webp?url'
import ClaudeAppLogo from '@renderer/assets/images/models/claude.png?url'
import HailuoModelLogo from '@renderer/assets/images/models/hailuo.png?url'
import QwenModelLogo from '@renderer/assets/images/models/qwen.png?url'
Expand Down Expand Up @@ -171,7 +171,7 @@ export const DEFAULT_MIN_APPS: MinAppType[] = [
},
{
id: 'perplexity',
name: 'perplexity',
name: 'Perplexity',
logo: PerplexityAppLogo,
url: 'https://www.perplexity.ai/'
},
Expand Down Expand Up @@ -306,7 +306,7 @@ export const DEFAULT_MIN_APPS: MinAppType[] = [
id: 'notebooklm',
name: 'NotebookLM',
logo: NotebookLMAppLogo,
url: 'https://notebooklm.google.com/',
url: 'https://notebooklm.google.com/'
},
{
id: 'coze',
Expand Down
140 changes: 57 additions & 83 deletions src/renderer/src/pages/settings/DisplaySettings/MiniAppIconsManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,50 +23,6 @@ interface MiniAppManagerProps {

type ListType = 'visible' | 'disabled'

// 添加 reorderLists 函数的接口定义
interface ReorderListsParams {
sourceList: MinAppType[]
destList: MinAppType[]
sourceIndex: number
destIndex: number
isSameList: boolean
}

interface ReorderListsResult {
sourceList: MinAppType[]
destList: MinAppType[]
}

// 添加 reorderLists 函数
const reorderLists = ({
sourceList,
destList,
sourceIndex,
destIndex,
isSameList
}: ReorderListsParams): ReorderListsResult => {
if (isSameList) {
// 在同一列表内重新排序
const newList = [...sourceList]
const [removed] = newList.splice(sourceIndex, 1)
newList.splice(destIndex, 0, removed)
return {
sourceList: newList,
destList: destList
}
} else {
// 在不同列表间移动
const newSourceList = [...sourceList]
const [removed] = newSourceList.splice(sourceIndex, 1)
const newDestList = [...destList]
newDestList.splice(destIndex, 0, removed)
return {
sourceList: newSourceList,
destList: newDestList
}
}
}

const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
visibleMiniApps,
disabledMiniApps,
Expand All @@ -92,25 +48,35 @@ const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
if (!result.destination) return

const { source, destination } = result
const sourceList = source.droppableId as ListType
const destList = destination.droppableId as ListType

if (source.droppableId === destination.droppableId) return

const newLists = reorderLists({
sourceList: sourceList === 'visible' ? visibleMiniApps : disabledMiniApps,
destList: destList === 'visible' ? visibleMiniApps : disabledMiniApps,
sourceIndex: source.index,
destIndex: destination.index,
isSameList: sourceList === destList
})

handleListUpdate(
sourceList === 'visible' ? newLists.sourceList : newLists.destList,
sourceList === 'visible' ? newLists.destList : newLists.sourceList
)

if (source.droppableId === destination.droppableId) {
// 在同一列表内重新排序
const list = source.droppableId === 'visible' ? [...visibleMiniApps] : [...disabledMiniApps]
const [removed] = list.splice(source.index, 1)
list.splice(destination.index, 0, removed)

if (source.droppableId === 'visible') {
handleListUpdate(list, disabledMiniApps)
} else {
handleListUpdate(visibleMiniApps, list)
}
return
}

// 在不同列表间移动
const sourceList = source.droppableId === 'visible' ? [...visibleMiniApps] : [...disabledMiniApps]
const destList = destination.droppableId === 'visible' ? [...visibleMiniApps] : [...disabledMiniApps]

const [removed] = sourceList.splice(source.index, 1)
const targetList = destList.filter((app) => app.id !== removed.id)
targetList.splice(destination.index, 0, removed)

const newVisibleMiniApps = destination.droppableId === 'visible' ? targetList : sourceList
const newDisabledMiniApps = destination.droppableId === 'disabled' ? targetList : sourceList

handleListUpdate(newVisibleMiniApps, newDisabledMiniApps)
},
[disabledMiniApps, handleListUpdate, visibleMiniApps]
[visibleMiniApps, disabledMiniApps, handleListUpdate]
)

const onMoveMiniApp = useCallback(
Expand Down Expand Up @@ -153,17 +119,15 @@ const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
<Droppable droppableId={listType}>
{(provided: DroppableProvided) => (
<ProgramList ref={provided.innerRef} {...provided.droppableProps}>
<ScrollContainer>
{(listType === 'visible' ? visibleMiniApps : disabledMiniApps).map((program, index) => (
<Draggable key={program.id} draggableId={String(program.id)} index={index}>
{(provided: DraggableProvided) => renderProgramItem(program, provided, listType)}
</Draggable>
))}
{disabledMiniApps.length === 0 && listType === 'disabled' && (
<EmptyPlaceholder>{t('settings.display.minApp.empty')}</EmptyPlaceholder>
)}
{provided.placeholder}
</ScrollContainer>
{(listType === 'visible' ? visibleMiniApps : disabledMiniApps).map((program, index) => (
<Draggable key={program.id} draggableId={String(program.id)} index={index}>
{(provided: DraggableProvided) => renderProgramItem(program, provided, listType)}
</Draggable>
))}
{disabledMiniApps.length === 0 && listType === 'disabled' && (
<EmptyPlaceholder>{t('settings.display.minApp.empty')}</EmptyPlaceholder>
)}
{provided.placeholder}
</ProgramList>
)}
</Droppable>
Expand All @@ -181,12 +145,6 @@ const AppLogo = styled.img`
object-fit: contain;
`

const ScrollContainer = styled.div`
overflow-y: auto;
height: 100%;
padding-right: 5px;
`

const ProgramSection = styled.div`
display: flex;
gap: 20px;
Expand All @@ -208,13 +166,29 @@ const ProgramList = styled.div`
height: 365px;
min-height: 365px;
padding: 10px;
padding-right: 5px;
background: var(--color-background-soft);
border-radius: 8px;
border: 1px solid var(--color-border);
display: flex;
flex-direction: column;
overflow-y: hidden;
overflow-y: auto;

scroll-behavior: smooth;

&::-webkit-scrollbar {
width: 6px;
}

&::-webkit-scrollbar-track {
background: transparent;
}

&::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
}

&::-webkit-scrollbar-thumb:hover {
background: var(--color-border-hover);
}
`

const ProgramItem = styled.div`
Expand Down