feat: 添加对话页

apps/ai-easy-builder/src/app.ts

@@ -13,8 +13,8 @@ export const request: RequestConfig = {
   requestInterceptors: [
     (url, options) => {
       const baseUrl = process.env.NODE_ENV === 'production' ? '' : '/api'//'http://ab.dev.jbpm.shalu.com' // https://edesign.shalu.com'
-      const enterpriseCode = sessionStorage.getItem('enterpriseCode');
-      const token = localStorage.getItem('token_' + enterpriseCode);
+      // const enterpriseCode = sessionStorage.getItem('enterpriseCode');
+      const token = localStorage.getItem('token_a');
  
       if(token) {
         if(!options.headers) {

apps/ai-easy-builder/src/pages/home/index.less

@@ -0,0 +1,84 @@
+.ai-title {
+  /* 设置渐变背景 */
+  background: linear-gradient(to right, #4776e6 0%, #8e54e9 51%, #4776e6 100%);
+
+  background-size: 200% auto;
+
+  /* 将背景裁剪到文字 */
+  -webkit-background-clip: text;
+  background-clip: text;
+
+  /* 设置文字颜色为透明以显示背景 */
+  color: transparent;
+  font-size: 32px;
+  font-weight: bold;
+
+  /* 动画设置 */
+  animation: gradientAnim 5s linear infinite;
+}
+
+@keyframes gradientAnim {
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: 0% center;
+  }
+}
+
+.ant-bubble-list::-webkit-scrollbar {
+  display: none;
+}
+
+.ant-sender {
+  // border: none;
+  // position: relative;
+  border-color: transparent;
+  box-shadow: none;
+}
+.sender-wrapper {
+  --border-size: 1px;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  position: absolute;
+  top: var(--border-size);
+  right: var(--border-size);
+  bottom: var(--border-size);
+  left: var(--border-size);
+  padding: var(--border-size);
+  webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  // z-index: -1;
+  border-radius: 12px;
+
+  &::before {
+    content: "";
+    display: block;
+    background: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);
+    // box-shadow: 0 0 40px 20px --var(--border-bg);
+    width: calc(100%* 1.41421356237);
+    padding-bottom: calc(100%* 1.41421356237);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 100%;
+    z-index: -2;
+    animation: rotate 10s linear infinite;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(0turn);
+  }
+}

apps/ai-easy-builder/src/pages/home/index.tsx

@@ -9,16 +9,9 @@ import {
   AttachmentsProps,
 } from "@ant-design/x";
 import { useChat } from "@/hooks/useChat";
+import  "./index.less";
 
-import {
-  Card,
-  Flex,
-  message,
-  Button,
-  Space,
-  Spin,
-  Typography,
-} from "antd";
+import { Card, Flex, message, Button, Space, Spin, Typography } from "antd";
 import { useEffect, useRef, useState } from "react";
 import {
   BulbOutlined,
@@ -29,6 +22,7 @@ import {
   CopyOutlined,
   RedoOutlined,
   ReadOutlined,
+  FireOutlined,
 } from "@ant-design/icons";
 import type { GetProp, GetRef } from "antd";
 import MarkdownViewer from "@/components/ai/MarkdownViewer";
@@ -58,6 +52,12 @@ const roles: GetProp<typeof Bubble.List, "roles"> = {
       );
     },
     header: "易码工坊AI助手",
+    styles: {
+      content: {
+        background: "#fff",
+        width: "100%",
+      }
+    }
   },
   user: {
     placement: "end",
@@ -65,6 +65,11 @@ const roles: GetProp<typeof Bubble.List, "roles"> = {
     messageRender: (content) => {
       return <div style={{ whiteSpace: "pre-wrap" }}>{content}</div>;
     },
+    styles: {
+      content: {
+        background: "#fff",
+      }
+    }
   },
 };
 
@@ -81,7 +86,7 @@ export default () => {
     loading,
     loadingSession,
     addConversation,
-    setConversationList
+    setConversationList,
   } = useChat({
     app_name: "normal_ask",
     onSuccess: (msg) => {
@@ -274,16 +279,17 @@ export default () => {
 
   return (
     <>
-      <Card
-        className="w-full h-full"
-        styles={{
-          body: {
-            height: "calc(100vh - 48px)",
-          },
+      <div
+        className="w-[100vw] h-[100vh] overflow-hidden box-border p-12px"
+        style={{
+          backgroundImage: "linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)",
         }}
       >
         <XProvider direction="ltr">
-          <Flex style={{ height: "100%" }} gap={12}>
+          <Flex
+            style={{ height: "100%", maxWidth: 1200, margin: "0 auto" }}
+            gap={12}
+          >
             <Flex
               vertical
               style={{ flex: 1, overflow: "hidden", height: "100%" }}
@@ -296,68 +302,88 @@ export default () => {
               >
                 {!messages.length ? (
                   <>
-                    <div className="mt-20 mb-10">
-                      <Welcome
-                        icon={
-                          <img
-                            src={''}
-                            className="rounded-8px"
-                          />
-                        }
-                        title={`你好！我是AI易搭`}
-                        description={`我可以帮你一句话生成应用`}
-                      />
+                    <div className="mt-20 mb-10 flex items-center justify-center">
+                      <div className="w-50px">
+                        <svg className="icon h-32px w-32px" aria-hidden="true">
+                          <use xlinkHref="#icon-AI1"></use>
+                        </svg>
+                      </div>
+                      <div>
+                        <div className="ai-title">
+                          你好,我是易码工坊AI助手
+                        </div>
+                        <div className="text-18px text-#666">
+                          说出你的需求，我可以帮你生成应用~
+                        </div>
+                      </div>
                     </div>
 
                     <Prompts
-                      title={
-                        "✨ 你可以这样问我:"
-                      }
-                      items={[]}
-                      wrap
+                      // title={"✨ 你可以这样问我:"}
+                      items={[
+                        {
+                          key: "1",
+                          icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
+                          label: "创建客户管理系统",
+                          description: '123'
+                        },
+                        {
+                          key: "2",
+                          icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
+                          label: "创建资产管理系统",
+                          description: '123'
+                        },
+                        {
+                          key: "3",
+                          icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
+                          label: "创建项目管理系统",
+                          description: '123'
+                        },
+                        {
+                          key: "4",
+                          icon: <FireOutlined style={{ color: '#FF4D4F' }} />,
+                          label: "创建OA办公自动化管理系统",
+                          description: '123'
+                        },
+                      ]}
                       onItemClick={handlePromptItem}
+                      wrap
+                      styles={{
+                        item: {
+                          flex: "none",
+                          width: "calc(50% - 6px)",
+                        },
+                      }}
                     />
                   </>
                 ) : (
                   <Bubble.List
-                    style={{ maxHeight: contentHeight, padding: '0 20px' }}
+                    style={{ maxHeight: contentHeight, padding: "0 20px" }}
                     autoScroll
                     roles={roles}
                     items={messages}
                   />
                 )}
               </div>
-              <Prompts
+              <Suggestion
                 items={[
-                  {
-                    key: "1",
-                    icon: <BulbOutlined style={{ color: "#FFD700" }} />,
-                    label: "写需求",
-                  },
-                  {
-                    key: "2",
-                    icon: <SmileOutlined style={{ color: "#52C41A" }} />,
-                    label: "生成代码",
-                  },
-                  {
-                    key: "3",
-                    icon: <ReadOutlined style={{ color: "#52C41A" }} />,
-                    label: "问题解答",
-                  },
+                  { label: "创建客户管理系统", value: "report" },
+                  { label: "创建资产管理系统", value: "report" },
+                  { label: "创建客户管理系统", value: "report" },
+                  { label: "创建客户管理系统", value: "report" },
                 ]}
-                onItemClick={handlePromptItem}
-              />
-
-              <Suggestion
-                items={[{ label: "写一个应用介绍", value: "report" }]}
                 onSelect={submitMessage}
+                className="relative overflow-hidden"
               >
                 {({ onTrigger, onKeyDown }) => {
                   return (
+                    <>
+                    <div className="sender-wrapper"/>
+                    <div className="w-full p-1px">
                     <Sender
+                      submitType="shiftEnter"
                       ref={senderRef}
                       header={senderHeader}
-                      loading={loading}
                       prefix={
                         <Button
                           type="text"
@@ -381,17 +407,36 @@ export default () => {
                         setSenderVal(nextVal);
                       }}
                       onKeyDown={onKeyDown}
-                      placeholder="输入/获取快捷提示"
+                      placeholder="请输入应用名称以及需求描述"
                       onSubmit={submitMessage}
                       onCancel={handleStop}
+                      actions={(_, info) => {
+                        const { SendButton, LoadingButton, ClearButton } = info.components;
+                
+                        return (
+                          <Space size="small">
+                            <Typography.Text type="secondary">
+                              <small>`Shift + Enter`提交</small>
+                            </Typography.Text>
+                            <ClearButton />
+                            {loading ? (
+                              <LoadingButton type="default" disabled />
+                            ) : (
+                              <SendButton type="primary" disabled={false} />
+                            )}
+                          </Space>
+                        );
+                      }}
                     />
+                    </div>
+                    </>
                   );
                 }}
               </Suggestion>
             </Flex>
           </Flex>
         </XProvider>
-      </Card>
+      </div>
     </>
   );
 };