diff --git a/src/components/EmptyGuide/index.tsx b/src/components/EmptyGuide/index.tsx
new file mode 100644
index 00000000..9f59004c
--- /dev/null
+++ b/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 (
+
+
+ 点击或拖拽文件到此区域上传
+ {extra ? {extra}
: null}
+
+ );
+};
+
+export default EmptyGuide;
diff --git a/src/components/EmptyGuide/style.ts b/src/components/EmptyGuide/style.ts
new file mode 100644
index 00000000..9a612c91
--- /dev/null
+++ b/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};
+ `,
+}));
diff --git a/src/constants/common.ts b/src/constants/common.ts
index 2277ae2a..dfcbf0ed 100644
--- a/src/constants/common.ts
+++ b/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;
diff --git a/src/features/AgentViewer/Chat/index.tsx b/src/features/AgentViewer/Chat/index.tsx
index fa005edf..0c801df8 100644
--- a/src/features/AgentViewer/Chat/index.tsx
+++ b/src/features/AgentViewer/Chat/index.tsx
@@ -36,10 +36,10 @@ function AgentViewer(props: Props) {
);
return (
-
+
);
}
diff --git a/src/features/AgentViewer/Chat/style.ts b/src/features/AgentViewer/Chat/style.ts
index d2042088..36429d9f 100644
--- a/src/features/AgentViewer/Chat/style.ts
+++ b/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%;
`,
}));
diff --git a/src/features/AgentViewer/Role/index.tsx b/src/features/AgentViewer/Role/index.tsx
index 627fc259..ec2edf0d 100644
--- a/src/features/AgentViewer/Role/index.tsx
+++ b/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
(null);
const viewer = useViewerStore((s) => s.viewer);
@@ -78,7 +77,7 @@ function AgentViewer(props: Props) {
);
}
diff --git a/src/panels/RolePanel/RoleEdit/Info/AvatarWithUpload/index.tsx b/src/panels/RolePanel/RoleEdit/Info/AvatarWithUpload/index.tsx
index 502eb10f..3aaba8ea 100644
--- a/src/panels/RolePanel/RoleEdit/Info/AvatarWithUpload/index.tsx
+++ b/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(
- ({ 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),
diff --git a/src/panels/RolePanel/RoleEdit/Info/CoverWithUpload/index.tsx b/src/panels/RolePanel/RoleEdit/Info/CoverWithUpload/index.tsx
index 1b055d29..99b89618 100644
--- a/src/panels/RolePanel/RoleEdit/Info/CoverWithUpload/index.tsx
+++ b/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(
({
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(
);
return (
-
+
void 0} maxCount={1}>
-
+ {meta?.cover ? (
+
+ ) : (
+
+ )}
);
diff --git a/src/panels/RolePanel/RoleEdit/Info/index.tsx b/src/panels/RolePanel/RoleEdit/Info/index.tsx
index 1ce60344..7180cdb7 100644
--- a/src/panels/RolePanel/RoleEdit/Info/index.tsx
+++ b/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) => {
-
+