Merge branch 'master' of github.com:zou-y-t/web

package.json

@@ -6,15 +6,15 @@
   "private": true,
   "dependencies": {
     "@ant-design/charts": "2.1.1",
-    "@ant-design/pro-components": "2.7.9",
-    "@apollo/client": "3.10.4",
-    "antd": "5.17.3",
-    "axios": "1.6.8",
-    "cos-js-sdk-v5": "1.7.1",
+    "@ant-design/pro-components": "2.7.10",
+    "@apollo/client": "3.10.5",
+    "antd": "5.18.3",
+    "axios": "1.7.2",
+    "cos-js-sdk-v5": "1.8.1",
     "dayjs": "1.11.11",
     "dotenv": "16.4.5",
     "google-protobuf": "3.21.2",
-    "graphql": "16.8.1",
+    "graphql": "16.8.2",
     "graphql-ws": "5.16.0",
     "grpc-web": "1.5.0",
     "is-url": "1.2.4",
@@ -36,7 +36,7 @@
     "@graphql-codegen/typescript-react-apollo": "4.3.0",
     "@playwright/test": "1.44.1",
     "@types/is-url": "1.2.32",
-    "@types/node": "20.12.12",
+    "@types/node": "20.14.7",
     "@types/react": "18.3.3",
     "@types/react-custom-scrollbars": "4.0.13",
     "@types/react-dom": "18.3.0",
@@ -46,18 +46,18 @@
     "cross-env": "7.0.3",
     "customize-cra": "1.0.0",
     "husky": "9.0.11",
-    "lint-staged": "15.2.4",
-    "prettier": "3.2.5",
+    "lint-staged": "15.2.7",
+    "prettier": "3.3.2",
     "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
     "rimraf": "5.0.7",
-    "typescript": "5.4.5",
-    "web-vitals": "3.5.2",
+    "typescript": "5.5.2",
+    "web-vitals": "4.2.0",
     "webpack-bundle-analyzer": "4.10.2",
     "webpackbar": "6.0.1"
   },
   "peerDependencies": {
-    "electron": "30.0.7",
+    "electron": "31.0.2",
     "electron-builder": "24.13.3"
   },
   "resolutions": {

src/app/Components/Authenticate.tsx

@@ -13,6 +13,7 @@ interface AuthenticateProps {
 
 export const userRoles = ["user", "student", "teacher", "counselor"];
 export const tsinghuaRoles = ["student", "teacher", "counselor"];
+export const courseRoles = ["student", "admin"];
 
 const Authenticate: React.FC<AuthenticateProps> = ({
   user,

src/app/ShareSite/CoursePage/CourseDetail.tsx

@@ -0,0 +1,32 @@
+// 课程详情页面只有课程管理员可以编辑，普通学生只能查看
+
+import React from "react";
+// import {
+//   Badge,
+//   Button,
+//   Card,
+//   Divider,
+//   Drawer,
+//   Form,
+//   Modal,
+//   message,
+//   Rate,
+//   Row,
+//   Space,
+//   Spin,
+//   Tooltip,
+//   Typography,
+// } from "antd";
+// import { ReloadOutlined } from "@ant-design/icons";
+import { CourseProps } from ".";
+//import * as graphql from "@/generated/graphql";
+
+const CourseDetail: React.FC<CourseProps> = ({
+  course_uuid,
+  mode,
+  user,
+}: any) => {
+  return <></>;
+};
+
+export default CourseDetail;

src/app/ShareSite/CoursePage/CourseRating.tsx

@@ -3,12 +3,16 @@ import {
   Badge,
   Button,
   Card,
+  Divider,
   Drawer,
   Form,
+  Modal,
   message,
   Rate,
+  Row,
   Space,
   Spin,
+  Tooltip,
   Typography,
 } from "antd";
 import { ReloadOutlined } from "@ant-design/icons";
@@ -21,10 +25,11 @@ const CourseRating: React.FC<CourseProps> = ({
   mode,
   user,
 }: any) => {
+  const [ratingForm] = Form.useForm();
+  const chartRadarRef = useRef(null);
+  const [openModal, setOpenModal] = useState(false);
   const [openDrawer, setOpenDrawer] = useState(false);
   const [isRotating, setIsRotating] = useState(false);
-  const [form] = Form.useForm();
-  const chartRadarRef = useRef(null);
   const [loading, setLoading] = useState(true);
 
   const { data: courseRatingData, refetch: refetchCourseRating } =
@@ -44,7 +49,7 @@ const CourseRating: React.FC<CourseProps> = ({
 
   const [addCourseRating] = graphql.useAddCourseRatingMutation();
   const [updateCourseRating] = graphql.useUpdateCourseRatingMutation();
-  //const [deleteCourseRating] = graphql.useDeleteCourseRatingMutation();
+  const [deleteCourseRating] = graphql.useDeleteCourseRatingMutation();
 
   const showDrawer = () => {
     handleGetCourseRating();
@@ -66,14 +71,33 @@ const CourseRating: React.FC<CourseProps> = ({
       return;
     }
     if (data) {
-      form.setFieldsValue(courseRatingData?.course_rating_by_pk);
+      ratingForm.setFieldsValue(courseRatingData?.course_rating_by_pk);
     } else {
       message.error("获取评分失败");
     }
   };
 
+  const handleDeleteRating = async () => {
+    try {
+      await deleteCourseRating({
+        variables: {
+          course_id: course_uuid,
+          user_uuid: user.uuid,
+        },
+      });
+      message.success("评分已删除");
+      ratingForm.resetFields();
+      refetchCourseRating();
+      refetchCourseRatingTotal();
+      setOpenModal(false);
+    } catch (error) {
+      message.error("删除评分失败");
+      console.log(error);
+    }
+  };
+
   const handleSaveRating = async () => {
-    const values = await form.validateFields();
+    const values = await ratingForm.validateFields();
     if (
       values.dim1 === 0 ||
       values.dim2 === 0 ||
@@ -135,31 +159,15 @@ const CourseRating: React.FC<CourseProps> = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (!chartRadarRef.current) return;
+
+    const { avg } = courseRatingTotal?.course_rating_aggregate?.aggregate || {};
     const radarData = [
-      {
-        item: "任务量",
-        score: courseRatingTotal?.course_rating_aggregate?.aggregate?.avg?.dim1,
-      },
-      {
-        item: "内容难度",
-        score: courseRatingTotal?.course_rating_aggregate?.aggregate?.avg?.dim2,
-      },
-      {
-        item: "上课质量",
-        score: courseRatingTotal?.course_rating_aggregate?.aggregate?.avg?.dim3,
-      },
-      {
-        item: "考试作业讲课相关度",
-        score: courseRatingTotal?.course_rating_aggregate?.aggregate?.avg?.dim6,
-      },
-      {
-        item: "收获感",
-        score: courseRatingTotal?.course_rating_aggregate?.aggregate?.avg?.dim4,
-      },
-      {
-        item: "给分好坏",
-        score: courseRatingTotal?.course_rating_aggregate?.aggregate?.avg?.dim5,
-      },
+      { item: "任务量", score: avg?.dim1 },
+      { item: "内容难度", score: avg?.dim2 },
+      { item: "上课质量", score: avg?.dim3 },
+      { item: "考试作业讲课相关度", score: avg?.dim6 },
+      { item: "收获感", score: avg?.dim4 },
+      { item: "给分好坏", score: avg?.dim5 },
     ];
 
     const chart = new Chart({
@@ -281,28 +289,6 @@ const CourseRating: React.FC<CourseProps> = ({
         onClose={closeDrawer}
         open={openDrawer}
         key="course_rating"
-        footer={
-          <div
-            style={{
-              textAlign: "right",
-            }}
-          >
-            <Button
-              size="large"
-              onClick={closeDrawer}
-              style={{ width: 80, height: 40, marginRight: 12 }}
-            >
-              取消
-            </Button>
-            <Button
-              onClick={handleSaveRating}
-              style={{ width: 80, height: 40, marginRight: 12 }}
-              type="primary"
-            >
-              保存
-            </Button>
-          </div>
-        }
       >
         <Card
           hoverable
@@ -321,8 +307,11 @@ const CourseRating: React.FC<CourseProps> = ({
               课程评分旨在帮助同学们更好地了解课程情况，为选课提供参考，希望同学根据自身体验认真评分
               <br />
               <br />
-              2.
-              任务量和内容难度：星级越高表示任务量越小、内容难度越低，主要是为了反映任务量的多少和难度的高低，但
+              2. 任务量和内容难度：
+              <span style={{ fontWeight: "bold" }}>
+                星级越高表示任务量越小、内容难度越低
+              </span>
+              ，主要是为了反映任务量的多少和难度的高低，但
               <span style={{ fontWeight: "bold" }}>并非星级越高越合适</span>
               ，同学可以根据自身需求进行评判
               <br />
@@ -342,20 +331,20 @@ const CourseRating: React.FC<CourseProps> = ({
           }}
         >
           <Spin spinning={loading}>
-            <div
+            <Row
               ref={chartRadarRef}
               style={{ width: "100%", height: "36vh" }}
             />
           </Spin>
-          <div style={{ textAlign: "center", fontSize: "18px" }}>
+          <Row justify="center" style={{ fontSize: "18px" }}>
             已有
             <span style={{ color: "red", fontWeight: "bold" }}>
               {courseRatingTotal?.course_rating_aggregate.aggregate?.count}
             </span>
             人完成评分
-          </div>
+          </Row>
         </Card>
-        <br />
+        <Divider />
         <Card
           hoverable
           title={
@@ -372,7 +361,7 @@ const CourseRating: React.FC<CourseProps> = ({
             labelAlign="left"
             labelCol={{ span: 12 }}
             wrapperCol={{ span: 22 }}
-            form={form}
+            form={ratingForm}
             initialValues={{
               dim1: 0,
               dim2: 0,
@@ -449,8 +438,57 @@ const CourseRating: React.FC<CourseProps> = ({
               <Rate tooltips={relevanceDesc} style={{ fontSize: 35 }} />
             </Form.Item>
           </Form>
+          <Divider />
+          <Row justify="end">
+            <Tooltip
+              title={
+                courseRatingData?.course_rating_by_pk
+                  ? "删除评分"
+                  : "当前尚未评分，无法删除"
+              }
+            >
+              <Button
+                disabled={!courseRatingData?.course_rating_by_pk}
+                onClick={() => setOpenModal(true)}
+                style={{
+                  width: 80,
+                  height: 40,
+                  marginRight: 12,
+                  fontSize: "18px",
+                }}
+              >
+                删除
+              </Button>
+            </Tooltip>
+            <Tooltip title={"保存评分"}>
+              <Button
+                onClick={handleSaveRating}
+                style={{
+                  width: 80,
+                  height: 40,
+                  marginRight: 12,
+                  fontSize: "18px",
+                }}
+                type="primary"
+              >
+                保存
+              </Button>
+            </Tooltip>
+          </Row>
         </Card>
       </Drawer>
+      <Modal
+        open={openModal}
+        onCancel={() => setOpenModal(false)}
+        onOk={handleDeleteRating}
+        centered
+      >
+        <Typography.Text>
+          <span style={{ fontSize: "20px" }}>
+            确定要删除评分吗？删除后无法恢复
+          </span>
+        </Typography.Text>
+      </Modal>
     </>
   );
 };