feat: 增加圈子静态页

src/views/chicken-circle/index.less

@@ -0,0 +1,76 @@
+.circle-box {
+  .top-input-card {
+    padding: 8px 12px;
+    background-color: #f2f3f5;
+    transition: all 0.2s;
+    border-radius: 8px;
+
+    textarea {
+      background-color: #f2f3f5 !important;
+      outline: none !important;
+      border: none !important;
+      box-shadow: none;
+    }
+
+    .choose-circle {
+      color: #3c6eee;
+      cursor: pointer;
+      display: inline-block;
+      font-size: 12px;
+      padding: 4px 10px 2px;
+      background-color: white;
+      border-radius: 14px 14px 14px 0;
+    }
+    &.card-focus {
+      border: 1px solid #3c6eee;
+      background-color: #fff;
+      textarea {
+        background-color: #fff !important;
+      }
+      .choose-circle {
+        // color: white;
+        background-color: rgba(60, 110, 238, 0.1);
+      }
+    }
+    .top-text-area {
+      background-color: #f2f3f5;
+    }
+  }
+  .publish-options {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    .left-box {
+      display: flex;
+      div {
+        margin-right: 20px;
+        cursor: pointer;
+        &:hover {
+          color: #3c6eee;
+        }
+      }
+    }
+  }
+}
+
+.pop-content {
+  &-item {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      background-color: #f2f3f5;
+    }
+    // margin-bottom: 20px;
+    padding: 10px 0;
+    .item-img {
+      width: 48px;
+      height: 48px;
+      border-radius: 10px;
+      margin-right: 20px;
+    }
+    .item-name {
+      padding-right: 40px;
+    }
+  }
+}

src/views/chicken-circle/index.tsx

@@ -1,18 +1,119 @@
-import { Input } from 'antd'
+import headImg from '@/imgs/head.jpg'
+import javaImg from '@/imgs/java.jpeg'
+import jobImg from '@/imgs/job.jpg'
+import {
+  FileImageOutlined,
+  MessageOutlined,
+  ShareAltOutlined,
+  SmileOutlined
+} from '@ant-design/icons'
+import { Avatar, Button, Card, Input, Popover, Tabs } from 'antd'
+import { useState } from 'react'
+import './index.less'
+
+const { Meta } = Card
 
 const { TextArea } = Input
 const Circle = () => {
+  const [hasFocus, setHasFocus] = useState(false)
+  const [comment, setComment] = useState('')
+
+  const toggleFocus = (flag: boolean) => {
+    setHasFocus(!flag)
+  }
+
+  const onChange = e => {
+    setComment(e.target.value)
+  }
+
+  const renderPopContent = () => {
+    return (
+      <Tabs
+        tabPosition='left'
+        size='small'
+        items={[
+          {
+            label: '推荐圈子',
+            key: '1',
+            children: (
+              <div className='pop-content'>
+                <div className='pop-content-item'>
+                  <img src={javaImg} className='item-img' />
+                  <span className='item-name'>JAVA圈子</span>
+                </div>
+                <div className='pop-content-item'>
+                  <img src={jobImg} className='item-img' />
+                  <span className='item-name'>求职圈子</span>
+                </div>
+              </div>
+            )
+          }
+        ]}
+      />
+    )
+  }
+
   return (
     <div className='circle-box'>
-      <div className='top-input-box'>
-        <TextArea
-          showCount
-          maxLength={100}
-          // onChange={onChange}
-          placeholder='disable resize'
-          style={{ height: 120, resize: 'none', outline: 'none' }}
+      <Card>
+        <div className={`top-input-card ${hasFocus ? 'card-focus' : ''}`}>
+          <TextArea
+            showCount
+            maxLength={1000}
+            onChange={onChange}
+            placeholder='与圈友们分享你得个人经验'
+            style={{
+              height: 120,
+              resize: 'none',
+              border: 'none',
+              backgroundColor: '#f2f3f5',
+              boxShadow: 'none'
+            }}
+            className='top-text-area'
+            onFocus={() => toggleFocus(false)}
+            onBlur={() => toggleFocus(true)}
+          />
+          <Popover placement='bottomLeft' trigger='click' content={renderPopContent}>
+            <div className='choose-circle'>选择圈子 {'>'}</div>
+          </Popover>
+        </div>
+        <div className='publish-options'>
+          <div className='left-box'>
+            <div>
+              <SmileOutlined />
+              <span style={{ marginLeft: '8px' }}>表情</span>
+            </div>
+            <div>
+              <FileImageOutlined />
+              <span style={{ marginLeft: '8px' }}>图片</span>
+            </div>
+          </div>
+          <div className='right-box'>
+            <Button type='primary' disabled={!comment.length}>
+              发布
+            </Button>
+          </div>
+        </div>
+      </Card>
+      <Card
+        style={{ marginTop: '10px' }}
+        actions={[
+          <div>
+            <ShareAltOutlined />
+            <span style={{ marginLeft: 8 }}>分享</span>
+          </div>,
+          <div>
+            <MessageOutlined />
+            <span style={{ marginLeft: 8 }}>2</span>
+          </div>
+        ]}
+      >
+        <Meta
+          avatar={<Avatar src={headImg} />}
+          title='鸡翅小弟'
+          description='每天练习，两年半定有所成。'
         />
-      </div>
+      </Card>
     </div>
   )
 }

src/views/chicken-circle/pop-content.tsx

@@ -0,0 +1,11 @@
+import { Tabs } from 'antd'
+
+const PopContent = () => {
+  return (
+    <div>
+      <Tabs />
+    </div>
+  )
+}
+
+export default PopContent

tsconfig.json

@@ -3,9 +3,9 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
@@ -14,8 +14,21 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"], // '@' 别名映射到 'src' 目录
+      "@assets/*": ["src/assets/*"],
+      "@views/*": ["src/views/*"],
+      "@utils/*": ["src/utils/*"],
+      "@components/*": ["src/components/*"],
+      "@imgs/*": ["src/imgs/*"],
+      "@constants/*": ["src/constants/*"],
+      "@store/*": ["src/store/*"],
+      "@features/*": ["src/store/feature/*"]
+    }
   },
-  "include": ["src"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }