From 00ee94263c7fd0aa5659e1ea7b25ae136a4cee54 Mon Sep 17 00:00:00 2001 From: lilith xia Date: Mon, 2 Sep 2024 18:55:12 +0800 Subject: [PATCH] style: modify style --- .commitlintrc.cjs | 2 +- .eslintrc.cjs | 27 +- .prettierrc.cjs | 12 +- README.md | 1 - index.html | 28 +- src/components/Layout/Layout.less | 4 +- src/pages/AuthorityManage/AdminFilter.ts | 15 + .../AuthorityManage/AuthorityManage.less | 6 +- src/pages/AuthorityManage/AuthorityManage.tsx | 71 ++- .../AdminLists/SelectGroup/SelectGroup.less | 31 + .../AdminLists/SelectGroup/SelectGroup.tsx | 63 ++ src/pages/HomePage/HomePage.tsx | 31 +- src/pages/HomePage/Homepage.less | 590 +++++++++--------- src/pages/Join/Join.less | 80 +-- src/pages/MobileHomepage/MobileHomepage.less | 4 +- src/pages/MobileJoin/MobileJoin.less | 102 +-- src/pages/MobileProgress/MobileProgress.less | 160 +++-- src/pages/MobileProgress/MobileProgress.tsx | 2 +- src/pages/MobileSignIn/MobileSignIn.less | 301 +++++---- src/pages/MobileSignIn/MobileSignIn.tsx | 5 +- src/pages/MobileSignUp/MobileSignUp.less | 209 +++---- src/pages/PersonalPage/PersonalPage.less | 551 ++++++++-------- src/pages/Progress/Progress.less | 97 ++- src/pages/Progress/Progress.tsx | 2 +- src/pages/Review/Review.less | 11 +- src/pages/Review/Review.tsx | 36 +- src/pages/Review/ReviewFitler.ts | 2 +- src/pages/Review/ReviewList.ts | 1 + .../ReviewGroupSelect/ReviewGroupSelect.less | 3 +- .../ReviewGroupSelect/ReviewGroupSelect.tsx | 4 +- .../components/ReviewTable/ReviewTable.tsx | 11 + .../components/ReviewYear/ReviewYear.less | 2 +- src/pages/SignIn/SignIn.less | 347 +++++----- src/pages/SignUp/SignUp.less | 264 ++++---- src/pages/SignUp/SignUp.tsx | 5 + src/pages/formM/index.less | 387 ++++++------ src/pages/formM/index.tsx | 3 +- src/pages/formW/index.less | 270 ++++---- src/pages/formW/index.tsx | 90 ++- .../homework/components/button/index.less | 36 +- .../homework/components/dropDown/index.less | 135 ++-- .../homework/components/files/index.less | 140 ++--- .../homework/components/input/index.less | 70 +-- .../components/pageWrap-mobile/index.less | 105 ++-- .../components/selector-mobile/index.less | 96 +-- .../homework/components/selector/index.less | 94 +-- .../homework/components/submitPage/index.less | 12 +- .../homework/components/table/index.less | 96 +-- .../homework/components/upload/index.less | 131 ++-- .../homework/components/uploadWrap/index.less | 133 ++-- .../pages/adminMode/browse/index.less | 67 +- .../homework/pages/adminMode/edit/index.less | 4 +- .../pages/adminMode/judge/comment/index.less | 38 +- .../adminMode/judge/homePreview/index.less | 104 +-- .../homework/pages/adminMode/judge/index.less | 26 +- .../adminMode/judge/writeComment/index.less | 40 +- .../pages/userMode/MobileSubmit/index.less | 506 +++++++-------- .../homework/pages/userMode/submit/index.less | 63 +- .../homework/pages/visitorMode/index.less | 42 +- src/pages/homework/types/index.ts | 3 +- src/pages/homework/utils/deData.ts | 8 +- src/pages/personalityTestM/index.less | 223 ++++--- src/pages/personalityTestW/index.less | 170 ++--- src/styles/homework_index.less | 2 +- src/styles/mixin.less | 190 +++--- src/styles/scrollbar.less | 49 +- src/styles/variables.less | 476 +++++++------- vite.config.ts | 1 + 68 files changed, 3580 insertions(+), 3310 deletions(-) create mode 100644 src/pages/AuthorityManage/AdminFilter.ts create mode 100644 src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.less create mode 100644 src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.tsx diff --git a/.commitlintrc.cjs b/.commitlintrc.cjs index 6eaf62b..422b194 100644 --- a/.commitlintrc.cjs +++ b/.commitlintrc.cjs @@ -1 +1 @@ -module.exports = {extends: ['@commitlint/config-conventional']} \ No newline at end of file +module.exports = { extends: ['@commitlint/config-conventional'] }; diff --git a/.eslintrc.cjs b/.eslintrc.cjs index feac7df..b5c5111 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -2,13 +2,13 @@ module.exports = { root: true, - env: {browser: true, es2020: true}, + env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking', 'plugin:react-hooks/recommended', - "prettier" + 'prettier', ], parser: '@typescript-eslint/parser', parserOptions: { @@ -19,16 +19,17 @@ module.exports = { }, plugins: ['react-refresh', 'prettier'], rules: { - 'react-refresh/only-export-components': [ - 'warn', - {allowConstantExport: true}, - ], + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], '@typescript-eslint/no-non-null-assertion': 'off', - "prettier/prettier": ["error", {}, { - usePrettierrc: true, - fileInfoOptions: {} - }], - "arrow-body-style": "off", - "prefer-arrow-callback": "off" + 'prettier/prettier': [ + 'error', + {}, + { + usePrettierrc: true, + fileInfoOptions: {}, + }, + ], + 'arrow-body-style': 'off', + 'prefer-arrow-callback': 'off', }, -} +}; diff --git a/.prettierrc.cjs b/.prettierrc.cjs index d22eee9..6278acc 100644 --- a/.prettierrc.cjs +++ b/.prettierrc.cjs @@ -1,8 +1,8 @@ module.exports = { - semi: true, - singleQuote: true, - "arrowParens": "always", - printWidth: 90, - tabWidth: 2, - endOfLine: 'auto', + semi: true, + singleQuote: true, + arrowParens: 'always', + printWidth: 90, + tabWidth: 2, + endOfLine: 'auto', }; diff --git a/README.md b/README.md index 228aec3..aa91e9c 100644 --- a/README.md +++ b/README.md @@ -49,4 +49,3 @@ 然后通过**commitlint**进行提交规范的检查，`git commit -m "(): "` [commit规范](https://juejin.cn/post/7091276495972204580) - diff --git a/index.html b/index.html index 84ba3dc..6437d8c 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,19 @@ - + - - - - + + + + MuxiFresh - - -
- - + + +
+ + diff --git a/src/components/Layout/Layout.less b/src/components/Layout/Layout.less index d930290..bc6aa7a 100644 --- a/src/components/Layout/Layout.less +++ b/src/components/Layout/Layout.less @@ -63,8 +63,6 @@ .layoutLinkTestTitle:hover { color: #1d1507; } - - } .layoutBox { @@ -79,4 +77,4 @@ box-shadow: 0 5px 10px #d4d4d4; } } -} \ No newline at end of file +} diff --git a/src/pages/AuthorityManage/AdminFilter.ts b/src/pages/AuthorityManage/AdminFilter.ts new file mode 100644 index 0000000..86293ba --- /dev/null +++ b/src/pages/AuthorityManage/AdminFilter.ts @@ -0,0 +1,15 @@ +export interface AdminFilter { + grade: string; + group: Group; + school: string; + status: string; +} + +export enum Group { + All = 'All', + // Android = 'Android', + Backend = 'Backend', + Design = 'Design', + Frontend = 'Frontend', + Product = 'Product', +} diff --git a/src/pages/AuthorityManage/AuthorityManage.less b/src/pages/AuthorityManage/AuthorityManage.less index fbcdde4..1aefdde 100644 --- a/src/pages/AuthorityManage/AuthorityManage.less +++ b/src/pages/AuthorityManage/AuthorityManage.less @@ -13,4 +13,8 @@ border-radius: 0.5vw; padding: 5vh 0 5vh 0; } -} \ No newline at end of file +} + +.selectGroup { + margin: 2vw; +} diff --git a/src/pages/AuthorityManage/AuthorityManage.tsx b/src/pages/AuthorityManage/AuthorityManage.tsx index bbb0738..13e94a0 100644 --- a/src/pages/AuthorityManage/AuthorityManage.tsx +++ b/src/pages/AuthorityManage/AuthorityManage.tsx @@ -5,14 +5,32 @@ import { get, post } from '../../fetch.ts'; import { AdminList, AdminRow, ChangeUserType } from './AdminList.ts'; import AdminLists from './components/AdminLists/AdminLists.tsx'; import { useNavigate } from 'react-router-dom'; +import SelectGroup from './components/AdminLists/SelectGroup/SelectGroup.tsx'; +import { AdminFilter, Group } from './AdminFilter.ts'; const AuthorityManage = () => { + const [adminFilter, setAdminFilter] = useState({ + grade: '', + group: Group.Product, + school: '', + status: '', + }); const [superAdmin, setSuperAdmin] = useState([]); const [admin, setAdmin] = useState([]); const [ordinary, setOrdinary] = useState([]); const [loading, setLoading] = useState(false); + const changeGroup = (group: Group) => { + setAdminFilter((preAdminFilter) => { + if (group === 'All') { + return preAdminFilter; + } else { + return { ...preAdminFilter, group: group }; + } + }); + }; + const navigate = useNavigate(); const getUserList = ( user_type: string, @@ -68,31 +86,36 @@ const AuthorityManage = () => { }; return ( -
-
- - - + <> +
+
+ +
+
+ + + +
-
+ ); }; diff --git a/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.less b/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.less new file mode 100644 index 0000000..b4a7ccf --- /dev/null +++ b/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.less @@ -0,0 +1,31 @@ +.reviewGroupSelect { + width: 20vw; + height: 540px; + margin-top: 3vh; + border-radius: 0.5vw; + box-shadow: 0 5px 10px #d4d4d4; + background-color: #ffffff; + display: flex; + justify-content: space-evenly; + flex-direction: column; + color: #818181; + font-size: 1.2vw; + transform: translateY(-11%); + + .reviewGroupSelectTitle { + padding: 0 2.5vw; + box-sizing: border-box; + } + + .reviewGroups { + height: 8vh; + display: flex; + justify-content: start; + align-items: center; + color: #818181; + padding-left: 2.5vw; + box-sizing: border-box; + font-size: 1.08vw; + cursor: pointer; + } +} diff --git a/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.tsx b/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.tsx new file mode 100644 index 0000000..0eaae53 --- /dev/null +++ b/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.tsx @@ -0,0 +1,63 @@ +import './SelectGroup.less'; +import React, { useCallback, useMemo, useState } from 'react'; +import { Group, AdminFilter } from '../../../AdminFilter'; +import { ConfigProvider, Menu } from 'antd'; + +type ReviewGroupSelectProps = { + adminFilter: AdminFilter; + changeGroup(group: Group): void; +}; + +const SelectGroup: React.FC = ({ adminFilter, changeGroup }) => { + const groups = useMemo( + () => [Group.All, Group.Product, Group.Frontend, Group.Backend, Group.Design], + [], + ); + const chineseGroups: { [key in Group]: string } = { + // Android: '安卓组', + All: '全部', + Backend: '后端组', + Design: '设计组', + Frontend: '前端组', + Product: '产品组', + }; + + const [selectedGroup, setSelectedGroup] = useState(adminFilter.group); + + const handleChange = useCallback( + (group: Group) => { + setSelectedGroup(group); + changeGroup(group); + }, + [changeGroup], + ); + + return ( +
+
选择组别
+ + handleChange(e.key as Group)} + items={groups.map((group) => ({ + key: group, + title: chineseGroups[group], + label:
{chineseGroups[group]}
, + }))} + style={{ height: '400px', textAlign: 'center' }} + /> + +
+ ); +}; + +export default SelectGroup; diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 6c78baf..f297002 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -32,7 +32,6 @@ const ShowInfo = ({ changeEditState }: { changeEditState: () => void }) => { const [newEmail, setNewEmail] = useState(''); const [verifyCode, setVerifyCode] = useState(''); const [isEmailModalOpen, setIsEmailModalOpen] = useState(false); - const [studentId, setStudentId] = useState(''); const [password, setPassword] = useState(''); const [isIdModalOpen, setIsIdModalOpen] = useState(false); @@ -175,6 +174,14 @@ const ShowInfo = ({ changeEditState }: { changeEditState: () => void }) => {
{userInfo.school || '待补充'}
)}
+
+
组别:
+ {isLoading ? ( + + ) : ( +
{userInfo.school || '待补充'}
+ )} +
学号:
{isLoading ? ( @@ -202,7 +209,7 @@ const ShowInfo = ({ changeEditState }: { changeEditState: () => void }) => { )}
- 修改信息 + 个人信息
void }) => { setUserInfo({ ...userInfo, school }); }; + const changeGroup = (value: string) => { + const group = value; + setUserInfo({ ...userInfo, group }); + }; + const changeQQ = (e: React.ChangeEvent) => { const qq = e.target.value; setUserInfo({ ...userInfo, qq }); @@ -474,6 +486,21 @@ const EditInfo = ({ changeEditState }: { changeEditState: () => void }) => { onChange={changeSchool} /> +
+
组别:
+
diff --git a/src/pages/formW/index.less b/src/pages/formW/index.less index 1aadd3c..aebeb1b 100644 --- a/src/pages/formW/index.less +++ b/src/pages/formW/index.less @@ -1,211 +1,211 @@ .FormWebpage { - position: absolute; - right: 0; - display: flex; - margin-top: 4vh; - width: 80vw; - height: 83vh; - overflow: auto; + position: absolute; + right: 0; + display: flex; + margin-top: 4vh; + width: 80vw; + height: 83vh; + overflow: auto; } * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } .FromForWeb { - width: 1150px; - height: 620px; - background-color: white; - box-sizing: content-box; - padding: 10px 21px 22px 22px; - display: flex; - flex-direction: column; - align-items: start; - position: relative; - box-shadow: 0 5px 10px #d4d4d4; - border-radius: 0.5vw; + width: 1150px; + height: 620px; + background-color: white; + box-sizing: content-box; + padding: 10px 21px 22px 22px; + display: flex; + flex-direction: column; + align-items: start; + position: relative; + box-shadow: 0 5px 10px #d4d4d4; + border-radius: 0.5vw; } .title_formweb { - width: 132px; - height: 50px; - border-left: 4px solid #F79B2E; - padding-top: 9px; - padding-left: 8px; - font-size: 31px; - font-family: MicrosoftYaHei-Bold-, MicrosoftYaHei-Bold; - font-weight: normal; + width: 132px; + height: 50px; + border-left: 4px solid #f79b2e; + padding-top: 9px; + padding-left: 8px; + font-size: 31px; + font-family: MicrosoftYaHei-Bold-, MicrosoftYaHei-Bold; + font-weight: normal; } .personInformationbox { - width: 1100px; - height: 143px; - display: flex; - align-items: center; - justify-content: space-between; + width: 1100px; + height: 143px; + display: flex; + align-items: center; + justify-content: space-between; } .avatar_formweb { + width: 110px; + height: 110px; + border: 1px solid black; + position: relative; + margin-left: 32px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + img { width: 110px; - height: 110px; - border: 1px solid black; - position: relative; - margin-left: 32px; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - img { - width: 110px; - } + } } .avatarDefault { - width: 110px; - height: 110px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + width: 110px; + height: 110px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .personInfoContent { - height: 128px; - display: flex; - flex-direction: column; - justify-content: space-around; + height: 128px; + display: flex; + flex-direction: column; + justify-content: space-around; } .term_formweb { - display: flex; - align-items: center; - height: 42px; + display: flex; + align-items: center; + height: 42px; } .detail_formweb { - font-size: 15px; - font-family: MicrosoftYaHei-, MicrosoftYaHei; - margin-right: 10px; + font-size: 15px; + font-family: MicrosoftYaHei-, MicrosoftYaHei; + margin-right: 10px; } .input_formweb, .select_formweb { - width: 130px; - height: 40px; - border-radius: 12px 12px 12px 12px; - text-align: center; - font-size: 16px; - box-shadow: 0 3px 7px #d4d4d4; + width: 130px; + height: 40px; + border-radius: 12px 12px 12px 12px; + text-align: center; + font-size: 16px; + box-shadow: 0 3px 7px #d4d4d4; } .contactContent { - margin-left: 15px; + margin-left: 15px; } .registerInformationbox { - width: 1100px; - height: 420px; - position: relative; + width: 1100px; + height: 420px; + position: relative; } .wantGroup { - position: absolute; - top: 10px; - left: 41px; + position: absolute; + top: 10px; + left: 41px; } .groupNums { - position: absolute; - top: 17px; - left: 260px; - font-size: 18px; - color: #959595; + position: absolute; + top: 17px; + left: 260px; + font-size: 18px; + color: #959595; } .reasonbox { - width: 420px; - height: 140px; - position: absolute; - left: 41px; - top: 65px; - display: flex; - align-items: center; + width: 420px; + height: 140px; + position: absolute; + left: 41px; + top: 65px; + display: flex; + align-items: center; } #group_reason { - width: 325px; - height: 130px; - padding: 5px; + width: 325px; + height: 130px; + padding: 5px; } .knowledgebox { - width: 480px; - height: 150px; - position: absolute; - left: 11px; - top: 230px; - display: flex; - align-items: center; + width: 480px; + height: 150px; + position: absolute; + left: 11px; + top: 230px; + display: flex; + align-items: center; } #group_knowledge { - width: 325px; - height: 150px; - padding: 5px; + width: 325px; + height: 150px; + padding: 5px; } .self_introbox { - width: 480px; - height: 180px; - position: absolute; - left: 500px; - top: 20px; - display: flex; - align-items: center; + width: 480px; + height: 180px; + position: absolute; + left: 500px; + top: 20px; + display: flex; + align-items: center; } #self_inro { - width: 402px; - height: 178px; - padding: 5px; + width: 402px; + height: 178px; + padding: 5px; } .questionbox_formweb { - position: absolute; - top: 250px; - left: 600px; - font-size: 19px; - font-family: MicrosoftYaHei-Bold-, MicrosoftYaHei-Bold; - font-weight: 500; - color: #5D5D5D; + position: absolute; + top: 250px; + left: 600px; + font-size: 19px; + font-family: MicrosoftYaHei-Bold-, MicrosoftYaHei-Bold; + font-weight: 500; + color: #5d5d5d; } .answerbox_formweb { - padding-top: 15px; - width: 471px; - display: flex; - justify-content: space-around; + padding-top: 15px; + width: 471px; + display: flex; + justify-content: space-around; } .send_formweb { - width: 93px; - height: 30px; - padding-top: 10px; - position: absolute; - bottom: 42px; - right: 62px; - border-radius: 5px; - background-color: #F79B2E; - color: white; - text-align: center; - font-weight: 1000; - font-size: 15px; - cursor: pointer; + width: 93px; + height: 30px; + padding-top: 10px; + position: absolute; + bottom: 42px; + right: 62px; + border-radius: 5px; + background-color: #f79b2e; + color: white; + text-align: center; + font-weight: 1000; + font-size: 15px; + cursor: pointer; } .textarea_formweb { - border-radius: 7px; - box-shadow: 0 5px 10px #d4d4d4; - resize: none; + border-radius: 7px; + box-shadow: 0 5px 10px #d4d4d4; + resize: none; } diff --git a/src/pages/formW/index.tsx b/src/pages/formW/index.tsx index c006e7c..11f5c28 100644 --- a/src/pages/formW/index.tsx +++ b/src/pages/formW/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { get, put, post } from '../../fetch'; import './index.less'; -import { ConfigProvider, message, Radio, Upload } from 'antd'; +import { ConfigProvider, message, Radio, Tooltip, Upload } from 'antd'; import ImgCrop from 'antd-img-crop'; import type { UploadFile, UploadProps } from 'antd/es/upload/interface'; import * as qiniu from 'qiniu-js'; @@ -29,8 +29,8 @@ const FormForWeb: React.FC = () => { qq: '', phone: '', }); //联系方式内容 - const [contactWayselect1, setcontactWayselect1] = useState('联系方式1'); //联系方式1 - const [contactWayselect2, setcontactWayselect2] = useState('联系方式2'); //联系方式2 + const [contactWayselect1, setcontactWayselect1] = useState('电话'); //联系方式1 + const [contactWayselect2, setcontactWayselect2] = useState('邮箱'); //联系方式2 const [reason, setreason] = useState(''); //心动原因 const [knowledge, setknowledge] = useState(''); //组别了解 const [wantGroup, setwantGroup] = useState(''); //心动组别 @@ -41,7 +41,7 @@ const FormForWeb: React.FC = () => { const chineseDict: { [key: string]: string } = { male: '男生', female: '女生', - Android: '安卓组', + // Android: '安卓组', Backend: '后端组', Design: '设计组', Frontend: '前端组', @@ -326,6 +326,30 @@ const FormForWeb: React.FC = () => { } }, []); + const options = [ + { + value: 'Product', + label: '产品组', + content: '引领头脑风暴，洞察市场需求，掌舵团队运营', + }, + { + value: 'Design', + label: '设计组', + content: '以美学之名，精雕细琢，呈现精美严谨的交互界面', + }, + { + value: 'Frontend', + label: '前端组', + content: '基于浏览器内核开发跨平台、跨终端的应用软件', + }, + { + value: 'Backend', + label: '后端组', + content: '后端服务、服务器运维、保障木犀产品长治久安', + }, + // { value: 'Android', label: '安卓组' }, + ]; + return (
{ value={grade} onChange={(e) => setgrade(e)} options={[ + { value: '2024', label: '2024' }, //新增 { value: '2023', label: '2023' }, { value: '2022', label: '2022' }, { value: '2021', label: '2021' }, @@ -655,7 +680,7 @@ const FormForWeb: React.FC = () => { className="select_formweb" value={chineseDict[wantGroup]} readOnly={true} - > + /> ) : (