🎨 chore: 调整角色设置页面布局

src/app/chat/Apps.tsx

@@ -1,23 +1,17 @@
-import { AgentPanel, DancePanel, RolePanel } from '@/panels';
+import { DancePanel, MarketPanel } from '@/panels';
 import { useConfigStore } from '@/store/config';
 import { PanelKey } from '@/types/config';
 
 export const apps = [
-  {
-    component: <AgentPanel />,
-    key: 'agent',
-    label: '角色',
-  },
   {
     component: <DancePanel />,
     key: 'dance',
     label: '跳舞',
   },
-
   {
-    component: <RolePanel />,
-    key: 'role',
-    label: '编辑',
+    component: <MarketPanel />,
+    key: 'market',
+    label: '发现',
   },
 ];
 

src/app/chat/SideBar/Header/index.tsx

@@ -2,7 +2,7 @@ import { TabsNav } from '@lobehub/ui';
 import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Agent from '@/features/Actions/Agent';
+import Market from '@/features/Actions/Market';
 
 import { useStyles } from './style';
 
@@ -18,7 +18,7 @@ const Index = () => {
   return (
     <Flexbox justify={'space-between'} horizontal align={'center'} className={styles.header}>
       <TabsNav items={options} size="small" activeKey={tab} onChange={setTab} variant={'compact'} />
-      <Agent key={'agent'} />
+      <Market key={'market'} />
     </Flexbox>
   );
 };

src/app/role/layout.tsx

@@ -2,7 +2,6 @@
 
 import { ReactNode, memo } from 'react';
 
-import Apps from '@/app/role/Apps';
 import AppLayout from '@/layout/AppLayout';
 import { HeaderNavKey } from '@/layout/type';
 
@@ -13,11 +12,7 @@ export interface LayoutProps {
 const LayoutDesktop = (props: LayoutProps) => {
   const { children } = props;
 
-  return (
-    <AppLayout headerKey={HeaderNavKey.Role}>
-      {children} <Apps />
-    </AppLayout>
-  );
+  return <AppLayout headerKey={HeaderNavKey.Role}>{children}</AppLayout>;
 };
 
 export default memo(LayoutDesktop);

src/app/role/page.tsx

@@ -5,6 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import TopBanner from '@/components/TopBanner';
 import RoleDisplay from '@/features/AgentViewer/RoleDisplay/index';
+import RoleInfo from '@/features/RoleInfo';
 import RoleEdit from '@/panels/RolePanel/RoleEdit';
 
 import SideBar from './SideBar';
@@ -15,15 +16,18 @@ const Role = () => {
   return (
     <Flexbox flex={1} height={'100%'} width={'100%'} horizontal>
       <SideBar />
-      <Flexbox horizontal className={styles.preview}>
-        <Flexbox className={styles.edit} flex={1}>
-          <TopBanner title={'Role Preview and Setting'} />
-          <RoleEdit />
-        </Flexbox>
-        <Flexbox className={styles.model} flex={1}>
-          <RoleDisplay />
+      <Flexbox className={styles.preview}>
+        <TopBanner title={'Role Preview and Setting'} />
+        <Flexbox horizontal>
+          <Flexbox className={styles.edit} flex={2}>
+            <RoleEdit />
+          </Flexbox>
+          <Flexbox className={styles.model} flex={1}>
+            <RoleDisplay />
+          </Flexbox>
         </Flexbox>
       </Flexbox>
+      <RoleInfo />
     </Flexbox>
   );
 };

src/app/role/style.ts

@@ -2,8 +2,8 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css }) => ({
   preview: css`
-    width: 100%;
-    margin: 64px;
+    width: 80rem;
+    margin: 32px auto;
   `,
   edit: css`
     padding: 0 24px;

src/features/Actions/Agent.tsx

@@ -2,17 +2,7 @@ import { ActionIcon } from '@lobehub/ui';
 import { PlusCircle } from 'lucide-react';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/constants/common';
-import { useConfigStore } from '@/store/config';
 
 export default () => {
-  const openPanel = useConfigStore((s) => s.openPanel);
-
-  return (
-    <ActionIcon
-      icon={PlusCircle}
-      onClick={() => openPanel('agent')}
-      title={'新的会话'}
-      size={DESKTOP_HEADER_ICON_SIZE}
-    />
-  );
+  return <ActionIcon icon={PlusCircle} title={'新建角色'} size={DESKTOP_HEADER_ICON_SIZE} />;
 };

src/features/AgentViewer/RoleDisplay/style.ts

@@ -14,8 +14,10 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   canvas: css`
     display: block;
+
     width: 100%;
     max-width: 100%;
+    height: 720px;
     max-height: 100%;
   `,
 }));

src/features/RoleInfo/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { DraggablePanel } from '@lobehub/ui';
-import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { memo, useState } from 'react';
 
@@ -11,8 +10,6 @@ import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/common';
 import Chat from '@/features/Actions/Chat';
 import UnSubscribeButton from '@/features/Actions/UnSubscribeButton';
 import { agentListSelectors, useAgentStore } from '@/store/agent';
-import { useConfigStore } from '@/store/config';
-import { useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -33,9 +30,7 @@ const Header = () => {
     s.activateAgent,
     s.deactivateAgent,
   ]);
-  const [openPanel] = useConfigStore((s) => [s.openPanel, s.closePanel]);
   const currentAgent = useAgentStore((s) => agentListSelectors.currentAgentItem(s));
-  const createSession = useSessionStore((s) => s.createSession);
 
   return (
     <DraggablePanel
@@ -56,20 +51,7 @@ const Header = () => {
       placement={'right'}
     >
       <AgentCard
-        actions={[
-          <Chat key={'chat'} />,
-          <Button
-            key="edit"
-            onClick={() => {
-              if (!currentAgent) return;
-              createSession(currentAgent);
-              openPanel('role');
-            }}
-          >
-            编辑
-          </Button>,
-          <UnSubscribeButton key="unsubscribe" />,
-        ]}
+        actions={[<Chat key={'chat'} />, <UnSubscribeButton key="unsubscribe" />]}
         agent={currentAgent}
         footer={<SystemRole systemRole={currentAgent?.systemRole} style={{ marginTop: 16 }} />}
       />

src/features/RoleList/index.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { HEADER_HEIGHT } from '@/constants/common';
-import Market from '@/features/Actions/Market';
+import Agent from '@/features/Actions/Agent';
 import Elsa from '@/features/RoleList/List/Elsa';
 
 import List from './List';
@@ -67,7 +67,7 @@ const SideBar = () => {
           type={'block'}
           value={searchName}
         />
-        <Market />
+        <Agent />
       </Flexbox>
       <div className={styles.list}>
         <Elsa />

src/features/SessionList/index.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { HEADER_HEIGHT } from '@/constants/common';
-import Agent from '@/features/Actions/Agent';
+import Market from '@/features/Actions/Market';
 
 import V from './Elsa';
 import List from './List';
@@ -65,7 +65,7 @@ const SideBar = () => {
           type={'block'}
           value={searchName}
         />
-        <Agent />
+        <Market />
       </Flexbox>
       <div className={styles.list}>
         <V />

src/panels/AgentPanel/Agent/index.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import React, { memo } from 'react';
 
 import TopBanner from '@/components/TopBanner';
-import RoleInfo from '@/features/RoleInfo';
 
 import AgentList from './List';
 
@@ -40,7 +39,6 @@ const Agent = (props: AgentProps) => {
         <TopBanner title="Hello, Let's Chat!" />
         <AgentList />
       </div>
-      <RoleInfo />
     </div>
   );
 };