✨ feat: 添加 3D 模型 Tab

src/constants/token.ts

@@ -18,5 +18,6 @@ export const LIST_GRID_HEIGHT = 108;
 export const INPUT_WIDTH_S = 240;
 export const INPUT_WIDTH_M = 320;
 export const INPUT_WIDTH_L = 480;
-
 export const INPUT_WIDTH_XL = 640;
+
+export const ROLE_VIEWER_HEIGHT = 640;

src/features/AgentViewer/Role/index.tsx

@@ -34,42 +34,42 @@ function AgentViewer(props: Props) {
       if (canvas) {
         viewer.setup(canvas);
         loadVrm(currentAgentModel);
-      }
 
-      const dragoverHandler = (event: DragEvent) => {
-        event.preventDefault();
-      };
+        const dragoverHandler = (event: DragEvent) => {
+          event.preventDefault();
+        };
 
-      const dropHandler = (event: DragEvent) => {
-        event.preventDefault();
+        const dropHandler = (event: DragEvent) => {
+          event.preventDefault();
 
-        const files = event.dataTransfer?.files;
-        if (!files) {
-          return;
-        }
+          const files = event.dataTransfer?.files;
+          if (!files) {
+            return;
+          }
 
-        const file = files[0];
-        if (!file) {
-          return;
-        }
+          const file = files[0];
+          if (!file) {
+            return;
+          }
 
-        const file_type = file.name.split('.').pop();
-        if (file_type === 'vrm') {
-          const blob = new Blob([file], { type: 'application/octet-stream' });
-          const modelKey = `model:${currentAgentId}`;
-          localforage.setItem(modelKey, blob).then(() => {
-            updateAgentConfig({ meta: { model: modelKey } });
-            loadVrm(modelKey);
-          });
-        }
-      };
+          const file_type = file.name.split('.').pop();
+          if (file_type === 'vrm') {
+            const blob = new Blob([file], { type: 'application/octet-stream' });
+            const modelKey = `model:${currentAgentId}`;
+            localforage.setItem(modelKey, blob).then(() => {
+              updateAgentConfig({ meta: { model: modelKey } });
+              loadVrm(modelKey);
+            });
+          }
+        };
 
-      canvas.addEventListener('dragover', dragoverHandler);
-      canvas.addEventListener('drop', dropHandler);
-      return () => {
-        canvas.removeEventListener('dragover', dragoverHandler);
-        canvas.removeEventListener('drop', dropHandler);
-      };
+        canvas.addEventListener('dragover', dragoverHandler);
+        canvas.addEventListener('drop', dropHandler);
+        return () => {
+          canvas.removeEventListener('dragover', dragoverHandler);
+          canvas.removeEventListener('drop', dropHandler);
+        };
+      }
     },
     [viewer, currentAgentId, currentAgentModel],
   );

src/features/AgentViewer/Role/style.ts

@@ -1,9 +1,11 @@
 import { createStyles } from 'antd-style';
 
+import { ROLE_VIEWER_HEIGHT } from '@/constants/token';
+
 export const useStyles = createStyles(({ css, token }) => ({
   viewer: css`
     position: relative;
-    height: 100%;
+    height: ${ROLE_VIEWER_HEIGHT}px;
     min-height: 0;
   `,
   toolbar: css`
@@ -19,8 +21,10 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   canvas: css`
     display: block;
+
     width: 100%;
     max-width: 100%;
+    height: 100%;
     max-height: 100%;
   `,
 }));

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

@@ -77,10 +77,11 @@ const Info = (props: InfoProps) => {
             </FormItem>
           </div>
           <div className={styles.more}>
-            <div className={styles.cover}>
-              <div className={styles.name}>角色封面</div>
-              <div className={styles.description}>用于发现页展示角色，点击图片自定义上传</div>
-            </div>
+            <FormItem
+              label={'角色说明'}
+              name={'readme'}
+              desc="角色的说明文件，用于发现页展示角色的详细说明"
+            />
             <CoverWithUpload />
           </div>
         </div>

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

@@ -0,0 +1,55 @@
+import { Form, FormItem } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import React from 'react';
+
+import AgentViewer from '@/features/AgentViewer/Role';
+
+import Touch from './Touch';
+
+interface ModelProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    display: flex;
+  `,
+  left: css`
+    flex: 2;
+    margin-right: 12px;
+    border-radius: ${token.borderRadius}px;
+  `,
+
+  right: css`
+    flex: 1;
+
+    max-height: 740px;
+    padding: 12px;
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadius}px;
+  `,
+}));
+
+const Model = (props: ModelProps) => {
+  const { style, className } = props;
+  const { styles } = useStyles();
+
+  return (
+    <Form>
+      <div className={classNames(className, styles.container)} style={style}>
+        <div className={styles.left}>
+          <Touch />
+        </div>
+        <div className={styles.right}>
+          <FormItem label={'模型预览'} name={'model'} desc="模型预览，可拖动模型文件以替换" />
+          <AgentViewer />
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export default Model;

src/panels/RolePanel/RoleEdit/index.tsx

@@ -4,8 +4,8 @@ import { TabsNav } from '@lobehub/ui';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
-import Touch from '../Touch';
 import Info from './Info';
+import Model from './Model';
 import Role from './Role';
 import Voice from './Voice';
 import { useStyles } from './style';
@@ -52,7 +52,7 @@ const RolePanel = (props: RolePanelProps) => {
         {tab === 'info' ? <Info /> : null}
         {tab === 'role' ? <Role /> : null}
         {tab === 'voice' ? <Voice /> : null}
-        {tab === 'model' ? <Touch /> : null}
+        {tab === 'model' ? <Model /> : null}
       </div>
     </div>
   );