✨ feat: 添加角色编辑页面

src/app/role/page.tsx

@@ -4,20 +4,28 @@ import React, { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import RoleDisplay from '@/features/AgentViewer/RoleDisplay';
-import RoleInfo from '@/features/RoleInfo';
+import RoleHeader from '@/features/RoleHeader';
+import RoleEdit from '@/panels/RolePanel/RoleEdit';
 
 import SideBar from './SideBar';
+import { useStyles } from './style';
 
-const Chat = () => {
+const Role = () => {
+  const { styles } = useStyles();
   return (
     <Flexbox flex={1} height={'100%'} width={'100%'} horizontal>
       <SideBar />
-      <Flexbox height={'100%'} width={'100%'}>
-        <RoleDisplay />
+      <Flexbox flex={1} style={{ position: 'relative' }} height={'100%'} width={'100%'}>
+        <RoleHeader />
+        <Flexbox height={'100%'} horizontal>
+          <RoleEdit className={styles.edit} />
+          <Flexbox width={'30%'}>
+            <RoleDisplay />
+          </Flexbox>
+        </Flexbox>
       </Flexbox>
-      <RoleInfo />
     </Flexbox>
   );
 };
 
-export default memo(Chat);
+export default memo(Role);

src/app/role/style.ts

@@ -1,24 +1,10 @@
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 
-import { CHAT_INPUT_MIN_HEIGHT, CHAT_INPUT_WIDTH } from '@/constants/common';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  docker: css`
-    height: ${CHAT_INPUT_MIN_HEIGHT}px;
-    padding: 0 ${token.paddingSM}px;
-    background-color: ${rgba(token.colorBgLayout, 0.8)};
-    backdrop-filter: saturate(180%) blur(10px);
-  `,
-  content: css`
-    width: ${CHAT_INPUT_WIDTH};
-    max-width: 100vw;
-
-    @media (max-width: 768px) {
-      width: 100%;
-    }
-  `,
-  alert: css`
-    margin-top: ${token.marginXS}px;
+export const useStyles = createStyles(({ css }) => ({
+  edit: css`
+    width: 100%;
+    max-width: 1024px;
+    margin: 0 auto;
+    padding: 0 24px;
   `,
 }));

src/features/ChatInfo/Operations/index.tsx

@@ -36,10 +36,10 @@ const Operations = memo<MyListProps>(({ mobile }) => {
     // },
     {
       icon: Settings2Icon,
-      label: '角色设定',
+      label: '对话设定',
       key: 'setting',
       onClick: () => {
-        openPanel('role');
+        Modal.info({ title: '对话设定', content: '暂未开放' });
       },
       hidden: activeId === LOBE_VIDOL_DEFAULT_AGENT_ID,
     },

src/features/RoleHeader/index.tsx

@@ -0,0 +1,40 @@
+import { Space } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AgentMeta from '@/components/agent/AgentMeta';
+import ToggleChatSideBar from '@/features/Actions/ToggleChatSideBar';
+import Video from '@/features/Actions/Video';
+import Voice from '@/features/Actions/Voice';
+import { agentListSelectors, useAgentStore } from '@/store/agent';
+
+import { useStyles } from './style';
+
+interface Props {
+  className?: string;
+}
+export default (props: Props) => {
+  const { className } = props;
+  const { styles } = useStyles();
+  const [currentAgent] = useAgentStore((s) => [agentListSelectors.currentAgentItem(s)]);
+
+  return (
+    <Flexbox
+      justify={'space-between'}
+      horizontal
+      align={'center'}
+      className={classNames(styles.header, className)}
+    >
+      <Space>
+        {/*<ToggleSessionList />*/}
+        <AgentMeta meta={currentAgent?.meta} />
+      </Space>
+      <Space>
+        <Voice key={'voice'} />
+        <Video key={'video'} />
+        <ToggleChatSideBar key={'sidebar'} />
+      </Space>
+    </Flexbox>
+  );
+};

src/features/RoleHeader/style.ts

@@ -0,0 +1,15 @@
+import { createStyles } from 'antd-style';
+
+import { CHAT_HEADER_HEIGHT } from '@/constants/common';
+
+const useStyles = createStyles(({ token, css }) => ({
+  header: css`
+    height: ${CHAT_HEADER_HEIGHT}px;
+    padding: ${token.paddingSM}px;
+  `,
+  player: css`
+    min-width: 480px;
+  `,
+}));
+
+export { useStyles };

src/features/RoleList/index.tsx

@@ -8,8 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 import { HEADER_HEIGHT } from '@/constants/common';
 import Market from '@/features/Actions/Market';
 
+import V from './Elsa';
 import List from './List';
-import V from './V';
 
 const useStyles = createStyles(({ css, token, prefixCls }) => ({
   list: css`

src/panels/RolePanel/Info/index.tsx → src/panels/RolePanel/RoleEdit/Info/index.tsx

@@ -1,11 +1,10 @@
-import { FormFooter } from '@lobehub/ui';
-import { Button, Form, Input, message } from 'antd';
+import { Form, Input } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
-import React from 'react';
+import { debounce, isEqual } from 'lodash-es';
+import React, { useEffect } from 'react';
 
-import HolographicCard from '@/components/HolographicCard';
-import { sessionSelectors, useSessionStore } from '@/store/session';
+import { agentListSelectors, useAgentStore } from '@/store/agent';
 
 const FormItem = Form.Item;
 
@@ -17,11 +16,8 @@ interface InfoProps {
 const useStyles = createStyles(({ css, token }) => ({
   config: css`
     flex: 3;
-
     margin-right: 12px;
     padding: 12px;
-
-    border: 1px solid ${token.colorBorderSecondary};
     border-radius: ${token.borderRadius}px;
   `,
   container: css`
@@ -43,22 +39,19 @@ const Info = (props: InfoProps) => {
   const { style, className } = props;
   const { styles } = useStyles();
   const [form] = Form.useForm();
-  const [currentAgent, updateAgentConfig] = useSessionStore((s) => [
-    sessionSelectors.currentAgent(s),
-    s.updateAgentConfig,
-  ]);
+  const currentAgent = useAgentStore((s) => agentListSelectors.currentAgentItem(s), isEqual);
+  const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
+
+  useEffect(() => {
+    form.setFieldsValue(currentAgent);
+  }, [currentAgent, form]);
 
   return (
     <Form
       form={form}
       initialValues={currentAgent}
+      onValuesChange={debounce(updateAgentConfig, 100)}
       layout="horizontal"
-      onFinish={() => {
-        form.validateFields().then((values) => {
-          updateAgentConfig(values);
-          message.success('保存成功');
-        });
-      }}
       requiredMark={false}
     >
       <div className={classNames(className, styles.container)} style={style}>
@@ -79,6 +72,16 @@ const Info = (props: InfoProps) => {
             >
               <Input placeholder="请输入角色描述" />
             </FormItem>
+            <FormItem
+              label={'招呼'}
+              name="greeting"
+              rules={[{ message: '请输入角色与你打招呼时的用语', required: true }]}
+            >
+              <Input.TextArea
+                autoSize={{ maxRows: 6, minRows: 6 }}
+                placeholder="请输入角色与你打招呼时的用语"
+              />
+            </FormItem>
             <FormItem
               label={'说明'}
               name={['meta', 'readme']}
@@ -91,17 +94,6 @@ const Info = (props: InfoProps) => {
               />
             </FormItem>
           </div>
-          <div className={styles.more}>
-            <HolographicCard img={currentAgent?.meta.cover} />
-          </div>
-        </div>
-        <div className={styles.footer}>
-          <FormFooter>
-            <Button htmlType="button">取消</Button>
-            <Button htmlType="submit" type="primary">
-              应用
-            </Button>
-          </FormFooter>
         </div>
       </div>
     </Form>

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

@@ -1,5 +1,4 @@
-import { FormFooter } from '@lobehub/ui';
-import { Button, Form, Input, message } from 'antd';
+import { Form, Input, message } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import React from 'react';
@@ -16,11 +15,8 @@ interface InfoProps {
 const useStyles = createStyles(({ css, token }) => ({
   config: css`
     flex: 3;
-
     margin-right: 12px;
     padding: 12px;
-
-    border: 1px solid ${token.colorBorderSecondary};
     border-radius: ${token.borderRadius}px;
   `,
   container: css`
@@ -67,38 +63,17 @@ const Info = (props: InfoProps) => {
         <div className={styles.form}>
           <div className={styles.config}>
             <FormItem
-              label={'系统角色'}
               name="systemRole"
               rules={[{ message: '请输入角色的系统设定', required: true }]}
             >
               <Input.TextArea
-                autoSize={{ maxRows: 16, minRows: 16 }}
+                autoSize={{ maxRows: 24, minRows: 24 }}
                 placeholder="请输入角色的系统设定"
-                showCount
-              />
-            </FormItem>
-            <FormItem
-              label={'招呼用语'}
-              name="greeting"
-              rules={[{ message: '请输入角色与你打招呼时的用语', required: true }]}
-            >
-              <Input.TextArea
-                autoSize={{ maxRows: 3, minRows: 1 }}
-                placeholder="请输入角色与你打招呼时的用语"
+                showCount // TODO: 这里应该计算 Token 数量
               />
             </FormItem>
           </div>
         </div>
-        <div className={styles.footer}>
-          <FormFooter>
-            <Button htmlType="button" onClick={() => {}}>
-              取消
-            </Button>
-            <Button htmlType="submit" type="primary">
-              应用
-            </Button>
-          </FormFooter>
-        </div>
       </div>
     </Form>
   );

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

@@ -0,0 +1,75 @@
+import { Avatar } from '@lobehub/ui';
+import { Form } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import { debounce, isEqual } from 'lodash-es';
+import React, { useEffect } from 'react';
+
+import HolographicCard from '@/components/HolographicCard';
+import { agentListSelectors, useAgentStore } from '@/store/agent';
+
+const FormItem = Form.Item;
+
+interface InfoProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const useStyles = createStyles(({ css, token }) => ({
+  config: css`
+    flex: 3;
+    margin-right: 12px;
+    padding: 12px;
+    border-radius: ${token.borderRadius}px;
+  `,
+  container: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  footer: css`
+    margin-top: 20px;
+  `,
+  form: css`
+    display: flex;
+  `,
+  more: css`
+    flex: 2;
+  `,
+}));
+
+const Info = (props: InfoProps) => {
+  const { style, className } = props;
+  const { styles } = useStyles();
+  const [form] = Form.useForm();
+  const currentAgent = useAgentStore((s) => agentListSelectors.currentAgentItem(s), isEqual);
+  const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
+
+  useEffect(() => {
+    form.setFieldsValue(currentAgent);
+  }, [currentAgent, form]);
+
+  return (
+    <Form
+      form={form}
+      initialValues={currentAgent}
+      onValuesChange={debounce(updateAgentConfig, 100)}
+      layout="horizontal"
+      requiredMark={false}
+    >
+      <div className={classNames(className, styles.container)} style={style}>
+        <div className={styles.form}>
+          <div className={styles.config}>
+            <FormItem label={'头像'} name={['meta', 'avatar']}>
+              <Avatar src={currentAgent?.meta.avatar} size={96} />
+            </FormItem>
+            <FormItem label={'立绘'} name={['meta', 'cover']}>
+              <HolographicCard img={currentAgent?.meta.cover} />
+            </FormItem>
+          </div>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export default Info;