From 88606a87163e3a32b629729c589584ec2c7df253 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Thu, 18 Jan 2024 12:57:04 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20style:=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=E5=BC=95=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/Preview/Guide.tsx | 35 ++++++++++++++++++++++++++++++++++
 src/features/Preview/index.tsx | 11 +++++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 src/features/Preview/Guide.tsx

diff --git a/src/features/Preview/Guide.tsx b/src/features/Preview/Guide.tsx
new file mode 100644
index 0000000..f747cd8
--- /dev/null
+++ b/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;
diff --git a/src/features/Preview/index.tsx b/src/features/Preview/index.tsx
index 3b3955f..52716e6 100644
--- a/src/features/Preview/index.tsx
+++ b/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