✨ feat: 优化角色封面上传提示

src/components/EmptyGuide/index.tsx

@@ -0,0 +1,30 @@
+import { InboxOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './style';
+
+interface EmptyGuideProps {
+  extra?: string;
+  size: { height: number; width: number };
+}
+
+const EmptyGuide = (props: EmptyGuideProps) => {
+  const { styles } = useStyles();
+  const { size, extra } = props;
+
+  return (
+    <Flexbox
+      className={styles.guide}
+      align="center"
+      justify={'center'}
+      style={{ height: size.height, width: size.width }}
+    >
+      <InboxOutlined className={styles.icon} />
+      <p className={styles.info}>点击或拖拽文件到此区域上传</p>
+      {extra ? <p className={styles.extra}>{extra}</p> : null}
+    </Flexbox>
+  );
+};
+
+export default EmptyGuide;

src/components/EmptyGuide/style.ts

@@ -0,0 +1,24 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  guide: css`
+    cursor: pointer;
+
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+    border: 1px dashed ${token.colorBorder};
+    border-radius: ${token.borderRadius}px;
+  `,
+  icon: css`
+    font-size: 48px;
+    color: ${token.geekblue};
+  `,
+  info: css``,
+  extra: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+}));

src/constants/common.ts

@@ -15,10 +15,11 @@ export const MAX_README_LENGTH = 800;
 
 export const MAX_SYSTEM_ROLE_LENGTH = 9999;
 
+export const AVATAR_IMAGE_SIZE = 48;
 export const AVATAR_COMPRESS_SIZE = 256;
 
-export const COVER_IMAGE_WIDTH = 300;
-export const COVER_IMAGE_HEIGHT = 400;
+export const COVER_IMAGE_WIDTH = 320;
+export const COVER_IMAGE_HEIGHT = 480;
 
 export const COVER_COMPRESS_WIDTH = COVER_IMAGE_WIDTH * 2;
 export const COVER_COMPRESS_HEIGHT = COVER_IMAGE_HEIGHT * 2;

src/features/AgentViewer/Chat/index.tsx

@@ -36,10 +36,10 @@ function AgentViewer(props: Props) {
   );
 
   return (
-    <div ref={ref} className={classNames(styles.viewer, className)} style={style}>
+    <div ref={ref} className={classNames(styles.viewer, className)} style={{ height, ...style }}>
       <ToolBar className={styles.toolbar} viewer={viewer} />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} className={styles.loading} /> : null}
-      <canvas ref={canvasRef} className={styles.canvas} style={{ height }}></canvas>
+      <canvas ref={canvasRef} className={styles.canvas}></canvas>
     </div>
   );
 }

src/features/AgentViewer/Chat/style.ts

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

src/features/AgentViewer/Role/index.tsx

@@ -12,12 +12,11 @@ import { useStyles } from './style';
 
 interface Props {
   className?: string;
-  height?: number | string;
   style?: React.CSSProperties;
 }
 
 function AgentViewer(props: Props) {
-  const { className, style, height } = props;
+  const { className, style } = props;
   const { styles } = useStyles();
   const ref = useRef<HTMLDivElement>(null);
   const viewer = useViewerStore((s) => s.viewer);
@@ -78,7 +77,7 @@ function AgentViewer(props: Props) {
     <div ref={ref} className={classNames(styles.viewer, className)} style={style}>
       <ToolBar className={styles.toolbar} viewer={viewer} />
       {loading ? <PageLoading title={'模型加载中，请稍后...'} className={styles.loading} /> : null}
-      <canvas ref={canvasRef} className={styles.canvas} style={{ height }}></canvas>
+      <canvas ref={canvasRef} className={styles.canvas}></canvas>
     </div>
   );
 }

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

@@ -3,7 +3,11 @@ import { createStyles } from 'antd-style';
 import NextImage from 'next/image';
 import React, { CSSProperties, memo, useCallback } from 'react';
 
-import { DEFAULT_AGENT_AVATAR_URL } from '@/constants/common';
+import {
+  AVATAR_COMPRESS_SIZE,
+  AVATAR_IMAGE_SIZE,
+  DEFAULT_AGENT_AVATAR_URL,
+} from '@/constants/common';
 import { agentSelectors, useAgentStore } from '@/store/agent';
 import { createUploadImageHandler } from '@/utils/common';
 import { imageToBase64 } from '@/utils/imageToBase64';
@@ -35,7 +39,7 @@ interface AvatarWithUploadProps {
 }
 
 const AvatarWithUpload = memo<AvatarWithUploadProps>(
-  ({ size = 40, compressSize = 256, style, id }) => {
+  ({ size = AVATAR_IMAGE_SIZE, compressSize = AVATAR_COMPRESS_SIZE, style, id }) => {
     const { styles } = useStyle();
     const [meta, updateAgentMeta] = useAgentStore((s) => [
       agentSelectors.currentAgentMeta(s),

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

@@ -1,8 +1,14 @@
 import { Upload } from 'antd';
 import React, { CSSProperties, memo, useCallback } from 'react';
 
+import EmptyGuide from '@/components/EmptyGuide';
 import HolographicCard from '@/components/HolographicCard';
-import { COVER_COMPRESS_HEIGHT, COVER_COMPRESS_WIDTH } from '@/constants/common';
+import {
+  COVER_COMPRESS_HEIGHT,
+  COVER_COMPRESS_WIDTH,
+  COVER_IMAGE_HEIGHT,
+  COVER_IMAGE_WIDTH,
+} from '@/constants/common';
 import { agentSelectors, useAgentStore } from '@/store/agent';
 import { createUploadImageHandler } from '@/utils/common';
 import { coverImageToBase64 } from '@/utils/imageToBase64';
@@ -23,7 +29,7 @@ const CoverWithUpload = memo<CoverWithUploadProps>(
   ({
     compressSize = { height: COVER_COMPRESS_HEIGHT, width: COVER_COMPRESS_WIDTH },
     style,
-    size = { height: COVER_COMPRESS_HEIGHT, width: COVER_COMPRESS_WIDTH },
+    size = { height: COVER_IMAGE_HEIGHT, width: COVER_IMAGE_WIDTH },
   }) => {
     const [meta, updateAgentMeta] = useAgentStore((s) => [
       agentSelectors.currentAgentMeta(s),
@@ -43,9 +49,16 @@ const CoverWithUpload = memo<CoverWithUploadProps>(
     );
 
     return (
-      <div style={{ maxHeight: size.height, maxWidth: size.width, ...style }}>
+      <div style={{ height: size.height, width: size.width, ...style }}>
         <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
-          <HolographicCard img={meta?.cover} />
+          {meta?.cover ? (
+            <HolographicCard img={meta.cover} />
+          ) : (
+            <EmptyGuide
+              size={size}
+              extra={`支持单个文件上传，推荐尺寸为 ${size.width} * ${size.height} 的倍数`}
+            />
+          )}
         </Upload>
       </div>
     );

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

@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import React from 'react';
 
+import { COVER_COMPRESS_HEIGHT, COVER_COMPRESS_WIDTH } from '@/constants/common';
 import { INPUT_WIDTH_L, INPUT_WIDTH_M } from '@/constants/token';
 import CoverWithUpload from '@/panels/RolePanel/RoleEdit/Info/CoverWithUpload';
 import Greeting from '@/panels/RolePanel/RoleEdit/Info/Greeting';
@@ -81,7 +82,11 @@ const Info = (props: InfoProps) => {
             </FormItem>
           </div>
           <div className={styles.more}>
-            <FormItem label={'封面'} name={'cover'} desc="角色的封面，用于发现页展示角色" />
+            <FormItem
+              label={'封面'}
+              name={'cover'}
+              desc={`用于发现页展示角色，推荐尺寸 ${COVER_COMPRESS_WIDTH} * ${COVER_COMPRESS_HEIGHT}`}
+            />
             <CoverWithUpload />
           </div>
         </div>