🎨 fix: 角色侧边栏可滚动

src/app/role/SideBar/index.tsx

@@ -1,14 +1,20 @@
 import { DraggablePanel } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 
-import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token';
+import { HEADER_HEIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token';
 import RoleList from '@/features/RoleList';
 import { useGlobalStore } from '@/store/global';
 
 const useStyles = createStyles(({ css }) => ({
+  content: css`
+    display: flex;
+    flex-direction: column;
+    height: 100% !important;
+  `,
   sidebar: css`
     display: flex;
     flex-direction: column;
+    height: calc(100vh - ${HEADER_HEIGHT}px);
   `,
 }));
 
@@ -19,6 +25,7 @@ const SideBar = () => {
   return (
     <DraggablePanel
       className={styles.sidebar}
+      classNames={{ content: styles.content }}
       maxWidth={SIDEBAR_MAX_WIDTH}
       minWidth={SIDEBAR_WIDTH}
       mode={'fixed'}

src/app/role/style.ts

@@ -2,6 +2,7 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css }) => ({
   preview: css`
+    overflow: auto;
     width: 80rem;
     margin: 32px auto;
   `,

src/constants/agent.ts

@@ -1,5 +1,3 @@
-import { nanoid } from 'ai';
-
 import { DEFAULT_AGENT_AVATAR_URL } from '@/constants/common';
 import { DEFAULT_TOUCH_CONFIG } from '@/constants/touch';
 import { DEFAULT_TTS_CONFIG } from '@/constants/tts';
@@ -31,7 +29,6 @@ export const DEFAULT_VIDOL_AGENT: Agent = {
 };
 
 export const DEFAULT_AGENT_CONFIG = {
-  agentId: nanoid(),
   greeting: '',
   systemRole: '',
   meta: {

src/features/RoleList/List/index.tsx

@@ -1,3 +1,4 @@
+import { Empty } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import LazyLoad from 'react-lazy-load';
@@ -36,7 +37,12 @@ const SessionList = memo<SessionListProps>(({ filter }) => {
           />
         </LazyLoad>
       ))}
-      {agentListIds.length === 0 && <div></div>}
+      {agentListIds.length === 0 && (
+        <Empty
+          description={'暂无角色，可以通过 + 创建自定义角色，也可通过发现页添加角色'}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      )}
     </>
   );
 });

src/features/RoleList/index.tsx

@@ -12,6 +12,10 @@ import Elsa from '@/features/RoleList/List/Elsa';
 import List from './List';
 
 const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  role: css`
+    overflow-y: auto;
+    height: 100%;
+  `,
   list: css`
     padding: 8px;
   `,
@@ -44,12 +48,12 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
   `,
 }));
 
-const SideBar = () => {
+const RoleList = () => {
   const { styles } = useStyles();
   const [searchName, setSearchName] = useState<string>();
 
   return (
-    <>
+    <div className={styles.role}>
       <Flexbox
         justify={'space-between'}
         horizontal
@@ -95,8 +99,8 @@ const SideBar = () => {
           ]}
         />
       </div>
-    </>
+    </div>
   );
 };
 
-export default SideBar;
+export default RoleList;

src/features/Settings/model/openai.tsx

@@ -54,7 +54,6 @@ const Config = (props: ConfigProps) => {
         onValuesChange={debounce(setOpenAIConfig, 100)}
         style={{ display: 'flex', flexGrow: 1 }}
       >
-        {/* @ts-ignore */}
         <FormGroup icon={BotIcon} title={'OpenAI 语言模型'}>
           <FormItem desc={'Role GPT 模型'} label={'模型'} name="model">
             <Select

src/panels/RolePanel/RoleEdit/Role/index.tsx

@@ -1,15 +1,11 @@
 import { Form, FormItem } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
-import { isEqual } from 'lodash-es';
 import React from 'react';
 
 import { INPUT_WIDTH_L, INPUT_WIDTH_XL } from '@/constants/token';
 import Greeting from '@/panels/RolePanel/RoleEdit/Role/Greeting';
 import SystemRole from '@/panels/RolePanel/RoleEdit/Role/SystemRole';
-import { agentSelectors, useAgentStore } from '@/store/agent';
-
-import { useSyncSettings } from '../useSyncSetting';
 
 interface InfoProps {
   className?: string;
@@ -36,28 +32,22 @@ const useStyles = createStyles(({ css, token }) => ({
 const Info = (props: InfoProps) => {
   const { style, className } = props;
   const { styles } = useStyles();
-  const [form] = Form.useForm();
-  const currentAgent = useAgentStore((s) => agentSelectors.currentAgentItem(s), isEqual);
-
-  useSyncSettings(form);
 
   return (
-    <Form form={form} initialValues={currentAgent} layout="horizontal">
+    <Form>
       <div className={classNames(className, styles.container)} style={style}>
-        <div className={styles.form}>
-          <div className={styles.config}>
-            <FormItem label={'招呼'} desc={'与角色初次聊天时的招呼用语'} name="greeting">
-              <Greeting style={{ width: INPUT_WIDTH_L }} />
-            </FormItem>
-            <FormItem
-              name="systemRole"
-              divider
-              label="系统角色设定"
-              desc="角色的背景设定，在与角色聊天时会发送给模型"
-            >
-              <SystemRole style={{ width: INPUT_WIDTH_XL }} />
-            </FormItem>
-          </div>
+        <div className={styles.config}>
+          <FormItem label={'招呼'} desc={'与角色初次聊天时的招呼用语'} name="greeting">
+            <Greeting style={{ width: INPUT_WIDTH_L }} />
+          </FormItem>
+          <FormItem
+            name="systemRole"
+            divider
+            label="系统角色设定"
+            desc="角色的背景设定，在与角色聊天时会发送给模型"
+          >
+            <SystemRole style={{ width: INPUT_WIDTH_XL }} />
+          </FormItem>
         </div>
       </div>
     </Form>

src/store/agent/index.ts

@@ -1,3 +1,4 @@
+import { nanoid } from 'ai';
 import { produce } from 'immer';
 import { merge } from 'lodash-es';
 import { DeepPartial } from 'utility-types';
@@ -93,7 +94,10 @@ const createAgentStore: StateCreator<AgentStore, [['zustand/devtools', never]]>
   },
   createNewAgent: () => {
     const { localAgentList } = get();
-    const newAgent: Agent = DEFAULT_AGENT_CONFIG;
+    const newAgent: Agent = {
+      agentId: nanoid(),
+      ...DEFAULT_AGENT_CONFIG,
+    };
 
     const newList = produce(localAgentList, (draft) => {
       draft.unshift(newAgent);