💄 style: 补充说明引导

src/features/Preview/Guide.tsx

@@ -0,0 +1,35 @@
+import { Steps } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css }) => ({
+  step: css`
+    .ant-steps-item-content {
+      padding-bottom: 24px;
+    }
+  `,
+}));
+
+const Guide = memo(() => {
+  const { styles } = useStyles();
+  return (
+    <Steps
+      className={styles.step}
+      current={-1}
+      direction="vertical"
+      items={[
+        {
+          description: '进入设置，填写 Midjourney API 代理地址',
+          title: '绑定 Midjourney API 服务',
+        },
+        {
+          description: '输入框中输入提示词，点击生成按钮开始生成',
+          title: '开始出图',
+        },
+      ]}
+      style={{ gap: 24, width: 'fit-content' }}
+    />
+  );
+});
+
+export default Guide;

src/features/Preview/index.tsx

@@ -1,10 +1,11 @@
 import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import { midjourneySelectors, useStore } from '@/store';
 
+import Guide from './Guide';
 import ImagePreview from './Image';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -48,7 +49,13 @@ const Preview = memo(() => {
       padding={16}
       style={{ borderRadius: inLobeChat ? 8 : 24 }}
     >
-      {showImage && <ImagePreview />}
+      {showImage ? (
+        <ImagePreview />
+      ) : (
+        <Center height={'100%'} width={'100%'}>
+          <Guide />
+        </Center>
+      )}
       {taskLoading && progress !== 100 && (
         <div className={styles.process}>
           <Progress