feat(inbox activity): 同步了一下lzn写的activity界面 为inbox 添加了 展开状态的视图

package.json

@@ -13,6 +13,7 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
     "antd": "^4.21.3",
+    "craco": "^0.0.3",
     "craco-less": "^2.0.0",
     "inquirer": "^8.2.4",
     "react": "^18.1.0",

src/App.scss

@@ -6,3 +6,6 @@
 :before {
   box-sizing: border-box;
 }
+body {
+  background-color: rgba(237, 237, 237, 1);
+}

src/components/TopBar/index.scss

@@ -0,0 +1,13 @@
+.topBar {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    padding: 14px;
+    padding-left: 20px;
+    background-color: white;
+    .breadCrumbItem {
+      a {
+        color: rgba(24, 144, 255, 1);
+      }
+    }
+  }

src/components/TopBar/index.tsx

@@ -0,0 +1,40 @@
+import { RollbackOutlined } from '@ant-design/icons'
+import { Breadcrumb, Button } from 'antd'
+import React from 'react'
+import { useLocation, Link } from 'react-router-dom'
+import './index.scss'
+
+function TopBar() {
+  const breadcrumbNameMap: Record<string, string> = {
+    '/activity': '活动广场',
+    '/inbox': '收件箱',
+    '/manage': '活动管理',
+    '/account': '我的帐号',
+    '/review': '活动评审',
+  }
+  const location = useLocation()
+  const pathSnippets = location.pathname.split('/').filter((i) => i)
+  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
+    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
+    return (
+      <Breadcrumb.Item key={url} className="breadCrumbItem">
+        <Link to={url}>{breadcrumbNameMap[url]}</Link>
+      </Breadcrumb.Item>
+    )
+  })
+  const breadcrumbItems = [
+    <Breadcrumb.Item key="home" className="breadCrumbItem">
+      <Link to="/">主页</Link>
+    </Breadcrumb.Item>,
+  ].concat(extraBreadcrumbItems)
+  return (
+    <div className="topBar">
+      <Breadcrumb style={{ marginTop: '5px' }}>{breadcrumbItems}</Breadcrumb>
+      <Button type="link" icon={<RollbackOutlined />}>
+        返回上一级
+      </Button>
+    </div>
+  )
+}
+
+export default TopBar

src/pages/activity/index.scss

@@ -0,0 +1,72 @@
+.activity {
+    .searchBody {
+      height: 150px;
+      background-color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+      .searchBar {
+        width: 800px;
+        height: 50px;
+        .ant-input-search-button {
+          height: 50px;
+        }
+        .ant-input {
+          height: 50px;
+        }
+      }
+    }
+    .pageBody {
+      max-width: 1500px;
+      margin: 0 auto;
+    }
+    .filterBody {
+      height: 150px;
+      width: 100%;
+      border-radius: 5px;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+      margin-top: 25px;
+      padding-top: 24px;
+      padding-left: 100px;
+      display: flex;
+      background-color: white;
+      align-items: center;
+      .formGroup {
+        display: flex;
+        flex-direction: row;
+      }
+      .filterButton {
+        margin-right: 20px;
+      }
+    }
+    .activitiesBody {
+      margin-top: 50px;
+      display: flex;
+      flex-basis: 20px;
+      flex-wrap: wrap;
+      gap: 20px;
+      row-gap: 50px;
+      .activityContent {
+        height: 7em;
+      }
+      .ant-card-meta-description {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .activityCard {
+        height: 360px;
+        width: 360px;
+        border-radius: 5px;
+        .additionContent {
+          display: flex;
+          align-items: flex-end;
+          flex-direction: column;
+          color: rgb(167, 167, 167);
+        }
+      }
+    }
+  }

src/pages/activity/index.tsx

@@ -1,7 +1,160 @@
-import React from 'react'
+import { RollbackOutlined, SearchOutlined } from '@ant-design/icons'
+import { Breadcrumb, Button, Card, Form, Radio, Select } from 'antd'
+import Input from 'antd/lib/input'
+// import React, { Fragment } from 'react'
+// import { Link, useLocation } from 'react-router-dom'
+import TopBar from '../../components/TopBar'
+import './index.scss'
+
+const { Search } = Input
+const { Option } = Select
+const { Meta } = Card
 
 function Activity() {
-  return <div>Activity</div>
+  const ActivityCard = (props: {
+    coverUrl: string
+    title: string
+    description: string
+    time: string
+    author: string
+  }) => {
+    return (
+      <Card hoverable className="activityCard" cover={<img alt="activity cover" src={props.coverUrl} height="180px" />}>
+        <Meta title={props.title} description={props.description} className="activityContent" />
+        <div className="additionContent">
+          <div className="time">{props.time}</div>
+          <div className="author">{props.author}</div>
+        </div>
+      </Card>
+    )
+  }
+  const onSearch = () => {
+    console.log('searching')
+  }
+  return (
+    <div className="activity">
+      <TopBar />
+      <div className="searchBody">
+        <Search placeholder="搜索比赛活动或关键词" className="searchBar" onSearch={onSearch} enterButton={`搜索`} />
+      </div>
+      <div className="pageBody">
+        <div className="filterBody">
+          <Form name="filterFrom">
+            <Form.Item>
+              <Radio.Group defaultValue="all" size="large">
+                <Radio.Button value="all" className="filterButton">
+                  全部
+                </Radio.Button>
+                <Radio.Button value="b" className="filterButton">
+                  #科技节
+                </Radio.Button>
+                <Radio.Button value="c" className="filterButton">
+                  #人文
+                </Radio.Button>
+                <Radio.Button value="d" className="filterButton">
+                  #安全知识竞赛
+                </Radio.Button>
+                <Radio.Button value="e" className="filterButton">
+                  #互联网+
+                </Radio.Button>
+              </Radio.Group>
+            </Form.Item>
+            <div className="formGroup">
+              <Form.Item>
+                <Select defaultValue="组织单位" size="large" style={{ width: 120, marginRight: '20px' }}>
+                  <Option value="组织单位" disabled>
+                    组织单位
+                  </Option>
+                  <Option value="lucy">Lucy</Option>
+                  <Option value="Yiminghe">yiminghe</Option>
+                </Select>
+              </Form.Item>
+              <Form.Item>
+                <Radio.Group defaultValue="a" size="large">
+                  <Radio.Button value="a" className="filterButton">
+                    Hangzhou
+                  </Radio.Button>
+                  <Radio.Button value="b" className="filterButton">
+                    Shanghai
+                  </Radio.Button>
+                  <Radio.Button value="c" className="filterButton">
+                    Beijing
+                  </Radio.Button>
+                  <Radio.Button value="d" className="filterButton">
+                    Chengdu
+                  </Radio.Button>
+                </Radio.Group>
+              </Form.Item>
+            </div>
+          </Form>
+        </div>
+        <div className="activitiesBody">
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+          <ActivityCard
+            coverUrl="https://img.js.design/assets/smartFill/img432164da758808.jpg"
+            title="“创新杯”创新创业大赛"
+            description="挑战自我，创新突破，挑战杯有你更精彩!截止报名时间为3月25日，报名请加QQ群来参与吧！"
+            time="2022/07/10"
+            author="计软网安学院"
+          />
+        </div>
+      </div>
+    </div>
+  )
 }
-
 export default Activity

src/pages/home/index.scss

@@ -60,7 +60,7 @@
   }
 }
 .site-layout-background {
-  background: #fff;
+  background: rgba(237, 237, 237, 1);
   .login-form {
     display: flex;
     flex-direction: column;
@@ -90,3 +90,6 @@
   background: #fff;
   color: #002140;
 }
+.sidebar {
+  background-color: white;
+}

src/pages/home/index.tsx

@@ -96,7 +96,7 @@ const Home = () => {
           // collapsed={collapsed}
           // onCollapse={(value) => setCollapsed(value)}
           width={200}
-          className="site-layout-background"
+          className="site-layout-background sidebar"
         >
           {userState === 'offline' ? <LoginForm finishCb={onFinish}></LoginForm> : <p>已经登陆</p>}
           <Menu handleClickMenuItem={handleClickMenuItem} navigation={navigation}></Menu>

src/pages/inbox/components/Massage/Massage.scss

@@ -0,0 +1,51 @@
+.inbox-massage-nav-unfold {
+  width: 1370px;
+  height: 13px;
+  margin-top: 20px;
+  margin: 0px 150px;
+  padding-top: 4px;
+  border-radius: 5px 5px 0px 0px;
+  background-color: rgb(220, 220, 220);
+  .inbox-massage-display-switch-button {
+    margin-left: 1343px;
+    width: 15px;
+    height: 4px;
+    padding: 0px;
+  }
+}
+
+.inbox-massage-body-unfold {
+  width: 1370px;
+  height: 250px;
+  margin: 0px 150px 54px 150px;
+  font-family: HarmonyOS Sans SC;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  background-color: rgb(255, 255, 255);
+  border-radius: 0px 0px 5px 5px;
+  .inbox-massage-header {
+    font-size: 24px;
+    width: 1370px;
+    height: 40px;
+    margin: 0px;
+    padding-left: 18px;
+    border-bottom: solid rgb(237, 237, 237) 1px;
+  }
+  .inbox-massage-contents {
+    width: 1370px;
+    height: 160px;
+    padding: 9px 0px 0px 27px;
+    line-height: 22px;
+    border-bottom: solid rgb(237, 237, 237) 1px;
+    overflow-y: auto;
+  }
+  .inbox-massage-footer-post {
+    color: rgba(24, 144, 255, 1);
+    line-height: 22px;
+    font-size: 14px;
+    padding: 8px 0px 0px 27px;
+  }
+  .inbox-massage-footer-button {
+    float: right;
+    margin-right: 17px;
+  }
+}