网站组 2024-2025计划

[youyc22]

饼（持续更新）

1. 重要基础功能修复

   • 新生导师申请的一系列有关问题 #1972

2. UI优化

   • 对手机、平板等各端的适配
     • 重点关注：赛事互动-积分榜、赛事互动-代码提交、资源共享-课程评测页面
   • 网站整体风格统一 #1996
   • 提升视觉效果、提升交互性
     • 使用动画
   • 暗色模式跟随系统设置 #1842

3. 用户注册相关拓展

   • 允许自定义头像 #1859
   • 关联 Github 账户
     • 为资源分享做准备
   • 关联 微信 账户
     • 为微信推送和未来的小程序做准备

4. 赛事相关功能拓展

   • 代码提交支持多文件提交
     • 多个文件一起编译
   • 比赛轮次可暂停&选择参赛队伍 #1843
   • 比赛介绍页面时间线显示推送链接 #1845
   • 数据分析页面功能拓展
     • 例如：增加代码胜率分析
   • 软设作品展示页面
     • 提供试玩链接/展示视频等

5. 信息更新

   • 首页-部门、首页-比赛、weekly内容更新（实现自动更新）

6. 搜索引擎优化（SEO）

   • 搜索引擎优化 #1864

7. Overleaf维护

   • Overleaf平台开放注册使用 #1844

8. 课程评测和资源分享

   • 课程评测相关功能拓展 #2083
   • 其他经验分享功能

9. More...

• PR 预览
• Live2d Cubism2 Cubism4

[youyc22]

前端工作计划

第一次部会（9.22）

• 主要任务：配置环境（web、hasura、api均能正常运行）
• 剩余时间：理解网站整体架构，了解前端从开发、测试到生产的整体流程，尝试理解项目中各个文件的作用
• 下周之前的任务：看src文件夹中的代码，将代码文件与页面一一对应起来，可以尝试改变UI看看效果

第二次部会（9.29）

• 主要任务：理解网站整体架构，了解前端从开发、测试到生产的整体流程，尝试理解项目中各个文件的作用
• 之后两周（根据进度调整）的任务：代码整理（调整代码顺序）
  • ContestSite：
  • HomeSite & UserSite：
  • ShareSite：
  • InfoSite：

[youyc22]

代码整理的具体要求

流程与方法

1. 调整代码顺序，理解每部分大致功能（用分割线分隔各部分）

   • 把所有不需要每次渲染时更新（不依赖于hooks和props）的定义移到组件外面
   • 把states和props的定义移到组件最前面
   • 把获取数据用的hook放在第二位、useEffect放在第三位
   • 把其他函数分门别类放在后面
   • 在调整的过程中理解代码的作用

2. 尝试改变UI，体会代码与页面之间的关系

   • 可以先尝试修改return部分，例如将某个组件添加或删除
   • 记得在修改之前commit所有更改，方便之后回退
   • Feel free to explore!

3. 修复antd升级和暗色模式导致的API和样式不兼容

   • 观察代码，如有删除线的API意味着已弃用，搜索antd官方文档改用相应新API
   • F12打开开发者工具中的控制台/console，点开每个页面，解决控制台中报的warning
   • 点开每一个页面，若有明显样式错误的地方（可与当前官网比较）尝试修复
   • 切换到暗色模式，重复上一步，善用PageProps中的mode（可学习src/index.tsx的写法）

4. 代码文件分割成文件夹（HonorApplicationPage、MentorApplicationPage）

   • 参考src/app/ShareSite/CoursePage的分割方法，注意入口文件是index.tsx
   • 最后的return要简洁，长的组件和带有业务逻辑的函数拿到前面定义

5. 进一步规整代码，可参考的要求有

   • 明确所有变量的类型，避免使用any
   • 几个页面都使用了的业务逻辑函数可以在src/api新建ts文件提高复用
   • 几个页面都使用了的组件可以在src/app/Components新建tsx文件提高复用
   • 思考每个组件和功能更简单的实现方法

参考的文件结构

import X from XXX;
/* ---------------- 接口和类型定义 ---------------- */
interface XXXProps {
    mode: String;
}
/* ---------------- 不随渲染刷新的常量和组件 ---------------- */
const Container = ({mode}) => styled.div`
    color: ${mode}
`;
/* ---------------- 主页面 ---------------- */
const XXXPage: React.FC<XXXProps> = ({mode}) => {
    /* ---------------- States 和引入的 Hooks ---------------- */
    const [mode, setMode] = useState("black");
    const url = useUrl();
    /* ---------------- 从数据库获取数据的 Hooks ---------------- */
    const {data, error} = useXXXSuspenseQuery({
        variables: {
            key: value;
        }
    });
    /* ---------------- useEffect ---------------- */
    useEffect(() => console.log(error), [error]);
    /* ---------------- 业务逻辑函数 ---------------- */
    const handleUpload = (file: XXX) => {
        return uploadFile(file);
    };
    /* ---------------- 随渲染刷新的组件 ---------------- */
    const Content = () => {
        if (mode === "black") return <Button onClick={handleUpload} />;
        else return "This is empty.";
    };
    /* ---------------- 页面组件 ---------------- */
    return (
        <Container mode={mode}>
            <Content />
        </Container>
    );
}

export default XXXPage;