feat: 添加城市选择栏 (#16)

5piderMan-Team · Jan 20, 2024 · 59d53ca · 59d53ca
1 parent ccd7c55
commit 59d53ca
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 111 deletions.
diff --git a/src/backend/dao.py b/src/backend/dao.py
@@ -2,7 +2,6 @@
 
 from sqlalchemy import func
 from sqlalchemy.orm import Session
-from sqlalchemy import func
 
 from .models import Job
 

diff --git a/src/backend/main.py b/src/backend/main.py
@@ -1,4 +1,3 @@
-import logging
 from pathlib import Path
 
 import uvicorn
@@ -11,7 +10,7 @@
 
 staticdir = Path(__file__).parent.parent.parent.joinpath("web/dist")
 # 目前采用 src 目录结构，导致打包时静态文件路径和开发时不一致，暂时先这样处理。
-if ~staticdir.exists():
+if not staticdir.exists():
     staticdir = Path(__file__).parent.parent.joinpath("web/dist")
 
 app = FastAPI()

diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { Layout, theme } from "antd";
+import { Layout } from "antd";
 
 const { Content } = Layout;
 import FooterWarp from "./components/FooterWarp";
@@ -9,15 +8,15 @@ import JobList from "./components/JobList/index.jsx";
 const ContentWarp = () => {
   return (
     <Content className="flex items-center justify-center">
-      <JobList className="w-3/5" />
+      <JobList />
     </Content>
   );
 };
 
 const App = () => {
-  const {
-    token: { colorBgContainer },
-  } = theme.useToken();
+  // const {
+  //   token: { colorBgContainer },
+  // } = theme.useToken();
   return (
     <Layout className="layout">
       <Navbar />

diff --git a/web/src/backend/job.js b/web/src/backend/job.js
@@ -2,8 +2,13 @@ import axios from "axios";
 
 const serverUrl = "";
 
-const getJobs = () => {
-  return axios.get(serverUrl + "/api/jobs").then((response) => {
+const getJobs = (city) => {
+  let url = serverUrl + "/api/jobs";
+  if (city !== undefined) {
+    url = url + "?city=" + city;
+  }
+
+  return axios.get(url).then((response) => {
     return response.data;
   });
 };

diff --git a/web/src/chart.jsx b/web/src/chart.jsx
@@ -1,69 +1,62 @@
-import ReactECharts from 'echarts-for-react';
-import {Col, Row} from "antd";
-import React from "react";
+import ReactECharts from "echarts-for-react";
+import { Col, Row } from "antd";
 
 const option = {
-    xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  xAxis: {
+    type: "category",
+    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  },
+  yAxis: {
+    type: "value",
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: "line",
     },
-    yAxis: {
-        type: 'value'
-    },
-    series: [
-        {
-            data: [150, 230, 224, 218, 135, 147, 260],
-            type: 'line'
-        }
-    ]
+  ],
 };
 
 function Chart() {
-    return (
-        <ReactECharts
-            option={option}
-            notMerge={true}
-            lazyUpdate={true}
-        />
-    )
+  return <ReactECharts option={option} notMerge={true} lazyUpdate={true} />;
 }
 
 export default function Charts() {
-    return (
-        <div>
-            <Row>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-            </Row>
-            <Row>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-            </Row>
-            <Row>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-                <Col span={8}>
-                    <Chart/>
-                </Col>
-            </Row>
-        </div>
-    )
+  return (
+    <div>
+      <Row>
+        <Col span={8}>
+          <Chart />
+        </Col>
+        <Col span={8}>
+          <Chart />
+        </Col>
+        <Col span={8}>
+          <Chart />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={8}>
+          <Chart />
+        </Col>
+        <Col span={8}>
+          <Chart />
+        </Col>
+        <Col span={8}>
+          <Chart />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={8}>
+          <Chart />
+        </Col>
+        <Col span={8}>
+          <Chart />
+        </Col>
+        <Col span={8}>
+          <Chart />
+        </Col>
+      </Row>
+    </div>
+  );
 }
diff --git a/web/src/components/JobList/index.jsx b/web/src/components/JobList/index.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import * as api from "../../backend/job";
-import { Table } from "antd";
+import { Select, Table } from "antd";
+import { Flex, Radio } from "antd";
 
 const columns = [
   {
@@ -25,23 +26,116 @@ const columns = [
   },
 ];
 
+const cityList = [
+  "全国",
+  "北京",
+  "深圳",
+  "上海",
+  "广州",
+  "成都",
+  "杭州",
+  "武汉",
+  "苏州",
+  "南京",
+  "西安",
+  "长沙",
+  "东莞",
+  "重庆",
+  "佛山",
+  "无锡",
+  "合肥",
+  "宁波",
+  "郑州",
+  "珠海",
+  "常州",
+  "嘉兴",
+  "中山",
+  "大连",
+  "厦门",
+  "天津",
+  "惠州",
+  "福州",
+  "济南",
+  "青岛",
+  "昆明",
+  "南昌",
+  "长春",
+  "南通",
+  "贵阳",
+  "沈阳",
+  "南宁",
+  "温州",
+  "湖州",
+];
+
 export default function JobList(prop) {
   const [dataSource, setDataSource] = React.useState([]);
+  const [city, setCity] = React.useState("全国");
 
   React.useEffect(() => {
-    api.getJobs().then((data) => {
+    api.getJobs(city).then((data) => {
       let counter = 1;
       data.map((item) => {
         item.key = counter++;
         return item;
       });
       setDataSource(data);
     });
-  }, []);
+  }, [city]);
+
+  const handleCityChange = (e) => {
+    console.log(e.target.value);
+    setCity(e.target.value);
+  };
+
+  const handleCitySelect = (e) => {
+    console.log(e);
+    setCity(e);
+  };
+
+  const citySpilt = 11;
+  const minCityList = cityList.slice(0, citySpilt);
+  const lastCityList = cityList.slice(citySpilt);
 
   return (
     <>
-      <Table dataSource={dataSource} columns={columns} {...prop} />
+      <Flex vertical className=" w-3/5 items-center mt-16 mb-16">
+        <div className="flex w-full items-center justify-between">
+          <div className=" text-sm font-bold mr-4">工作地点</div>
+          <div>
+            <Radio.Group value={city} defaultValue="全国">
+              {minCityList.map((item) => (
+                <Radio.Button
+                  value={item}
+                  key={item}
+                  onChange={handleCityChange}
+                >
+                  {item}
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+            <Select
+              className=" w-18"
+              placeholder="更多"
+              placement={city}
+              onChange={handleCitySelect}
+            >
+              {lastCityList.map((item) => (
+                <Select.Option value={item} key={item}>
+                  {item}
+                </Select.Option>
+              ))}
+            </Select>
+          </div>
+        </div>
+
+        <Table
+          className=" mt-4 w-full"
+          dataSource={dataSource}
+          columns={columns}
+          {...prop}
+        />
+      </Flex>
     </>
   );
 }
diff --git a/web/src/components/Navbar/index.jsx b/web/src/components/Navbar/index.jsx
@@ -1,34 +1,29 @@
-import React from "react";
-import {Menu, Layout} from "antd";
+import { Menu, Layout } from "antd";
 
-const {Header} = Layout;
+const { Header } = Layout;
 import SearchBar from "../SearchBar";
 
 const items = [
-    {
-        key: "home",
-        title: "首页",
-        label: (
-            <a href="/">首页</a>
-        ),
-    },
+  {
+    key: "home",
+    title: "首页",
+    label: <a href="/">首页</a>,
+  },
 ];
 
 export default function Navbar() {
-    return (
-        <Header
-            className="flex justify-between items-center bg-gray-800"
-        >
-            <div className="text-white text-xl">5piderMan</div>
-            <div className="flex justify-between items-center">
-                <Menu
-                    className="bg-transparent"
-                    theme="dark"
-                    mode="horizontal"
-                    items={items}
-                />
-                <SearchBar className="w-12"/>
-            </div>
-        </Header>
-    )
-}
+  return (
+    <Header className="flex justify-between items-center bg-gray-800">
+      <div className="text-white text-xl">5piderMan</div>
+      <div className="flex justify-between items-center">
+        <Menu
+          className="bg-transparent"
+          theme="dark"
+          mode="horizontal"
+          items={items}
+        />
+        <SearchBar className="w-12" />
+      </div>
+    </Header>
+  );
+}
diff --git a/web/src/components/SearchBar/index.jsx b/web/src/components/SearchBar/index.jsx
@@ -1,15 +1,9 @@
-import React from 'react';
-import {Input} from 'antd';
+import { Input } from "antd";
 
-const {Search} = Input;
+const { Search } = Input;
 
 const onSearch = (value, _e, info) => console.log(info?.source, value);
 
 export default function SearchBar() {
-    return (
-        <Search
-            placeholder="输入以搜索岗位"
-            onSearch={onSearch}
-        />
-    );
-}
+  return <Search placeholder="输入以搜索岗位" onSearch={onSearch} />;
+}