feat: linear wrap

src/components/stateless/LinearWrap/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './index.module.less'
+const LinearWrap = ({children}) => {
+  return (
+    <section className={styles.linearWrap}>
+      <span className={styles.line} />
+      <span className={styles.line} />
+      <span className={styles.line} />
+      <span className={styles.line} />
+      <section>
+        {children}
+      </section>
+    </section>
+  )
+
+}
+export default LinearWrap

src/components/stateless/LinearWrap/index.module.less

@@ -0,0 +1,80 @@
+.linearWrap {
+  position: relative;
+  overflow: hidden;
+  padding: 3px;
+}
+.line {
+  position: absolute;
+}
+.line:nth-child(1) {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, orange);
+  animation: animate1 8s linear infinite;
+}
+@keyframes animate1 {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+.line:nth-child(2) {
+  top: -100%;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, red);
+  animation: animate2 8s linear infinite;
+  animation-delay: 2s;
+}
+@keyframes animate2 {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+.line:nth-child(3) {
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  background: linear-gradient(270deg, transparent, green);
+  animation: animate3 8s linear infinite;
+  animation-delay: 4s;
+}
+@keyframes animate3 {
+  0% {
+    right: -100%;
+    height: 2px;
+  }
+  50%,
+  100% {
+    height: 2px;
+    right: 100%;
+  }
+}
+.line:nth-child(4) {
+  bottom: -100%;
+  left: 0;
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(360deg, transparent, #3a86ff);
+  animation: animate4 8s linear infinite;
+  animation-delay: 6s;
+}
+@keyframes animate4 {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}

src/pages/home/index.jsx

@@ -2,6 +2,7 @@ import React, { version, useState, useRef } from 'react'
 import FixTabPanel from '@stateless/FixTabPanel'
 import TypedText from '@stateless/TypedText'
 import ReMarkdown from '@stateless/ReMarkdown'
+import LinearWrap from '@stateless/LinearWrap'
 import { Input, Flex, Button } from 'antd'
 import { SendOutlined } from '@ant-design/icons'
 
@@ -149,14 +150,17 @@ const Home = () => {
       <section style={{ width: 600, margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
         <Flex align="center">
-          <Input.TextArea
-            ref={textareaRef}
-            defaultValue={chatText}
-            placeholder="来，说点什么呗...Meta + Enter发送"
-            onChange={changeChatText}
-            onKeyDown={onInputKeyDown}
-            autoSize
-          />
+          <LinearWrap>
+            <Input.TextArea
+              ref={textareaRef}
+              defaultValue={chatText}
+              placeholder="来，说点什么呗...Meta + Enter发送"
+              onChange={changeChatText}
+              onKeyDown={onInputKeyDown}
+              autoSize
+              style={{width: 300,height: 30}}
+            />
+          </LinearWrap>
           <Button
             style={{ margin: '0 10px' }}
             icon={<SendOutlined rotate={-60} />}
@@ -171,11 +175,13 @@ const Home = () => {
           </Button>
         </Flex>
       </section>
+
       <section>
         {isStream && <div>正在输入...</div>}
         <section style={{ textAlign: 'right', color: '#666' }}>{dateTime}</section>
         <ReMarkdown markdownText={aiText} isLoading={isStream} />
       </section>
+
     </FixTabPanel>
   )
 }