feat: 调整分组的效果 (#6561)

1，未分组标签改为未分组
2，列表展示效果持久化
3，增加一个管理列表展示效过的store

Co-authored-by: linshuhao <nmnm1996>

src/renderer/src/hooks/useStore.ts

@@ -1,5 +1,12 @@
 import { useAppDispatch, useAppSelector } from '@renderer/store'
-import { setShowAssistants, setShowTopics, toggleShowAssistants, toggleShowTopics } from '@renderer/store/settings'
+import {
+  setAssistantsTabSortType,
+  setShowAssistants,
+  setShowTopics,
+  toggleShowAssistants,
+  toggleShowTopics
+} from '@renderer/store/settings'
+import { AssistantsSortType } from '@renderer/types'
 
 export function useShowAssistants() {
   const showAssistants = useAppSelector((state) => state.settings.showAssistants)
@@ -22,3 +29,13 @@ export function useShowTopics() {
     toggleShowTopics: () => dispatch(toggleShowTopics())
   }
 }
+
+export function useAssistantsTabSortType() {
+  const AssistantsTabSortType = useAppSelector((state) => state.settings.assistantsTabSortType)
+  const dispatch = useAppDispatch()
+
+  return {
+    AssistantsTabSortType,
+    setAssistantsTabSortType: (sortType: AssistantsSortType) => dispatch(setAssistantsTabSortType(sortType))
+  }
+}

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

@@ -105,7 +105,7 @@
         "showByTags": "タグ表示"
       },
       "tags": {
-        "untagged": "未分類タグ",
+        "untagged": "未分類",
         "none": "タグなし",
         "manage": "タグ管理",
         "add": "タグ追加",

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

@@ -111,7 +111,7 @@
         "none": "暂无标签",
         "manage": "标签管理",
         "add": "添加标签",
-        "untagged": "未分组标签",
+        "untagged": "未分组",
         "modify": "修改标签",
         "delete": "删除标签",
         "settings": {

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

@@ -105,7 +105,7 @@
         "showByTags": "標籤展示"
       },
       "tags": {
-        "untagged": "未分組標籤",
+        "untagged": "未分組",
         "none": "暫無標籤",
         "manage": "標籤管理",
         "add": "添加標籤",

src/renderer/src/pages/home/Tabs/AssistantsTab.tsx

@@ -3,8 +3,9 @@ import DragableList from '@renderer/components/DragableList'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { useAssistants } from '@renderer/hooks/useAssistant'
+import { useAssistantsTabSortType } from '@renderer/hooks/useStore'
 import { useTags } from '@renderer/hooks/useTags'
-import { Assistant } from '@renderer/types'
+import { Assistant, AssistantsSortType } from '@renderer/types'
 import { Divider, Tooltip } from 'antd'
 import { FC, useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,19 +13,13 @@ import styled from 'styled-components'
 
 import AssistantItem from './components/AssistantItem'
 
-type SortType = '' | 'tags' | 'list'
-
 interface AssistantsTabProps {
-  sortBy: SortType
-  setSortBy: (assistant: SortType) => void
   activeAssistant: Assistant
   setActiveAssistant: (assistant: Assistant) => void
   onCreateAssistant: () => void
   onCreateDefaultAssistant: () => void
 }
 const Assistants: FC<AssistantsTabProps> = ({
-  sortBy,
-  setSortBy,
   activeAssistant,
   setActiveAssistant,
   onCreateAssistant,
@@ -35,6 +30,7 @@ const Assistants: FC<AssistantsTabProps> = ({
   const { addAgent } = useAgents()
   const { t } = useTranslation()
   const { getGroupedAssistants } = useTags()
+  const { AssistantsTabSortType = 'list', setAssistantsTabSortType } = useAssistantsTabSortType()
   const containerRef = useRef<HTMLDivElement>(null)
 
   const onDelete = useCallback(
@@ -50,14 +46,14 @@ const Assistants: FC<AssistantsTabProps> = ({
   )
 
   const handleSortByChange = useCallback(
-    (sortType: SortType) => {
+    (sortType: AssistantsSortType) => {
-      setSortBy(sortType)
+      setAssistantsTabSortType(sortType)
     },
-    [setSortBy]
+    [setAssistantsTabSortType]
   )
   return (
     <Container className="assistants-tab" ref={containerRef}>
-      {sortBy === 'tags' && (
+      {AssistantsTabSortType === 'tags' && (
         <div style={{ marginBottom: '8px' }}>
           {getGroupedAssistants.map((group) => (
             <TagsContainer key={group.tag}>
@@ -72,7 +68,7 @@ const Assistants: FC<AssistantsTabProps> = ({
                   key={assistant.id}
                   assistant={assistant}
                   isActive={assistant.id === activeAssistant.id}
-                  sortBy={sortBy}
+                  sortBy={AssistantsTabSortType}
                   onSwitch={setActiveAssistant}
                   onDelete={onDelete}
                   addAgent={addAgent}
@@ -85,7 +81,7 @@ const Assistants: FC<AssistantsTabProps> = ({
           ))}
         </div>
       )}
-      {sortBy === 'list' && (
+      {AssistantsTabSortType === 'list' && (
         <DragableList
           list={assistants}
           onUpdate={updateAssistants}
@@ -97,7 +93,7 @@ const Assistants: FC<AssistantsTabProps> = ({
               key={assistant.id}
               assistant={assistant}
               isActive={assistant.id === activeAssistant.id}
-              sortBy={sortBy}
+              sortBy={AssistantsTabSortType}
               onSwitch={setActiveAssistant}
               onDelete={onDelete}
               addAgent={addAgent}

src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx

@@ -21,7 +21,7 @@ import { useTags } from '@renderer/hooks/useTags'
 import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
 import { getDefaultModel, getDefaultTopic } from '@renderer/services/AssistantService'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
-import { Assistant } from '@renderer/types'
+import { Assistant, AssistantsSortType } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import { hasTopicPendingRequests } from '@renderer/utils/queue'
 import { Dropdown } from 'antd'
@@ -35,14 +35,14 @@ import * as tinyPinyin from 'tiny-pinyin'
 interface AssistantItemProps {
   assistant: Assistant
   isActive: boolean
-  sortBy: 'tags' | 'list'
+  sortBy: AssistantsSortType
   onSwitch: (assistant: Assistant) => void
   onDelete: (assistant: Assistant) => void
   onCreateDefaultAssistant: () => void
   addAgent: (agent: any) => void
   addAssistant: (assistant: Assistant) => void
   onTagClick?: (tag: string) => void
-  handleSortByChange?: (sortType: '' | 'tags' | 'list') => void
+  handleSortByChange?: (sortType: AssistantsSortType) => void
 }
 
 const AssistantItem: FC<AssistantItemProps> = ({

src/renderer/src/pages/home/Tabs/index.tsx

@@ -25,7 +25,6 @@ interface Props {
 }
 
 type Tab = 'assistants' | 'topic' | 'settings'
-type SortType = '' | 'tags' | 'list'
 
 let _tab: any = ''
 
@@ -39,7 +38,6 @@ const HomeTabs: FC<Props> = ({
   style
 }) => {
   const { addAssistant } = useAssistants()
-  const [sortBy, setSortBy] = useState<SortType>('list')
   const [tab, setTab] = useState<Tab>(position === 'left' ? _tab || 'assistants' : 'topic')
   const { topicPosition } = useSettings()
   const { defaultAssistant } = useDefaultAssistant()
@@ -131,8 +129,6 @@ const HomeTabs: FC<Props> = ({
       <TabContent className="home-tabs-content">
         {tab === 'assistants' && (
           <Assistants
-            setSortBy={setSortBy}
-            sortBy={sortBy}
             activeAssistant={activeAssistant}
             setActiveAssistant={setActiveAssistant}
             onCreateAssistant={onCreateAssistant}

src/renderer/src/store/settings.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { TRANSLATE_PROMPT } from '@renderer/config/prompts'
 import {
+  AssistantsSortType,
   CodeStyleVarious,
   LanguageVarious,
   MathEngine,
@@ -38,6 +39,7 @@ export type UserTheme = {
 export interface SettingsState {
   showAssistants: boolean
   showTopics: boolean
+  assistantsTabSortType: AssistantsSortType
   sendMessageShortcut: SendMessageShortcut
   language: LanguageVarious
   targetLanguage: TranslateLanguageVarious
@@ -181,6 +183,7 @@ export type MultiModelMessageStyle = 'horizontal' | 'vertical' | 'fold' | 'grid'
 export const initialState: SettingsState = {
   showAssistants: true,
   showTopics: true,
+  assistantsTabSortType: 'list',
   sendMessageShortcut: 'Enter',
   language: navigator.language as LanguageVarious,
   targetLanguage: 'english' as TranslateLanguageVarious,
@@ -328,6 +331,9 @@ const settingsSlice = createSlice({
     toggleShowTopics: (state) => {
       state.showTopics = !state.showTopics
     },
+    setAssistantsTabSortType: (state, action: PayloadAction<AssistantsSortType>) => {
+      state.assistantsTabSortType = action.payload
+    },
     setSendMessageShortcut: (state, action: PayloadAction<SendMessageShortcut>) => {
       state.sendMessageShortcut = action.payload
     },
@@ -658,6 +664,7 @@ export const {
   toggleShowAssistants,
   setShowTopics,
   toggleShowTopics,
+  setAssistantsTabSortType,
   setSendMessageShortcut,
   setLanguage,
   setTargetLanguage,

src/renderer/src/types/index.ts

@@ -28,6 +28,8 @@ export type Assistant = {
   tags?: string[] // 助手标签
 }
 
+export type AssistantsSortType = 'tags' | 'list'
+
 export type AssistantMessage = {
   role: 'user' | 'assistant'
   content: string