@appthen/cli 1.2.11 → 1.2.13

package/tests/test-app/src/pages/StudentWeaknessList.tsx

@@ -0,0 +1,547 @@
+/**
+ * 学生知识点薄弱项列表
+ * 记录和管理学生的知识点薄弱项
+ *
+ * @type Page
+ * @route /student-weakness
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+import { Modal, Page, Text, View } from '@appthen/react';
+import { Button, Card, Form, Input, Rate, Select, Space, Table, Tag } from '@appthen/antd';
+
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  weaknessList?: {
+    /* @example 1 */id?: number,
+    /* @example 张三 */studentName?: string,
+    /* @example 数学 */subject?: string,
+    /* @example 二次函数 */knowledgePoint?: string,
+    /* @example 2 */level?: number,
+    /* @example 公式记忆不牢固 */note?: string,
+    /* @example 2024-01-15 10:30:25 */createTime?: string,
+  }[];
+  loading?: boolean;
+  searchKeyword?: string;
+  subjectFilter?: string;
+  levelFilter?: string;
+  modalVisible?: boolean;
+  editingRecord?: any;
+  formValues?: any;
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    weaknessList: [
+      {
+        id: 1,
+        studentName: '张三',
+        subject: '数学',
+        knowledgePoint: '二次函数',
+        level: 2,
+        note: '公式记忆不牢固',
+        createTime: '2024-01-15 10:30:25',
+      },
+      {
+        id: 2,
+        studentName: '张三',
+        subject: '数学',
+        knowledgePoint: '三角函数',
+        level: 3,
+        note: '计算经常出错',
+        createTime: '2024-02-20 14:15:30',
+      },
+      {
+        id: 3,
+        studentName: '李四',
+        subject: '语文',
+        knowledgePoint: '古诗词背诵',
+        level: 1,
+        note: '完全不会背诵',
+        createTime: '2024-03-10 09:45:18',
+      },
+      {
+        id: 4,
+        studentName: '李四',
+        subject: '英语',
+        knowledgePoint: '时态运用',
+        level: 2,
+        note: '过去完成时掌握不好',
+        createTime: '2024-04-05 16:20:45',
+      },
+      {
+        id: 5,
+        studentName: '王五',
+        subject: '数学',
+        knowledgePoint: '立体几何',
+        level: 3,
+        note: '空间想象力不足',
+        createTime: '2024-05-12 11:55:28',
+      },
+      {
+        id: 6,
+        studentName: '王五',
+        subject: '物理',
+        knowledgePoint: '牛顿定律',
+        level: 2,
+        note: '受力分析不熟练',
+        createTime: '2024-05-13 09:20:15',
+      },
+      {
+        id: 7,
+        studentName: '赵六',
+        subject: '化学',
+        knowledgePoint: '化学方程式',
+        level: 1,
+        note: '配平困难',
+        createTime: '2024-05-14 15:30:45',
+      },
+      {
+        id: 8,
+        studentName: '钱七',
+        subject: '英语',
+        knowledgePoint: '阅读理解',
+        level: 3,
+        note: '长难句理解困难',
+        createTime: '2024-05-15 10:10:20',
+      },
+    ],
+    loading: false,
+    searchKeyword: '',
+    subjectFilter: '',
+    levelFilter: '',
+    modalVisible: false,
+    formValues: {},
+  };
+
+  handleSearch(value) {
+    this.setState({
+      searchKeyword: value,
+    });
+  }
+
+  handleSubjectFilter(value) {
+    this.setState({
+      subjectFilter: value,
+    });
+  }
+
+  handleLevelFilter(value) {
+    this.setState({
+      levelFilter: value,
+    });
+  }
+
+  handleAdd() {
+    this.setState({
+      modalVisible: true,
+      editingRecord: null,
+      formValues: {},
+    });
+  }
+
+  handleEdit(record) {
+    this.setState({
+      modalVisible: true,
+      editingRecord: record,
+      formValues: {
+        ...record,
+      },
+    });
+  }
+
+  handleDelete(record) {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除 ${record.studentName} 的 ${record.knowledgePoint} 薄弱项记录吗？`,
+      onOk: () => {
+        const weaknessList = this.state.weaknessList?.filter(
+          item => item.id !== record.id
+        );
+        this.setState({
+          weaknessList,
+        });
+        message.success('删除成功');
+      },
+    });
+  }
+
+  handleModalOk() {
+    const { editingRecord, formValues, weaknessList } = this.state;
+    if (
+      !formValues.studentName ||
+      !formValues.subject ||
+      !formValues.knowledgePoint
+    ) {
+      message.error('请填写完整信息');
+      return;
+    }
+    if (editingRecord) {
+      const updatedList = weaknessList?.map(item => {
+        if (item.id === editingRecord.id) {
+          return {
+            ...item,
+            ...formValues,
+            level: formValues.level || 2,
+          };
+        }
+        return item;
+      });
+      this.setState({
+        weaknessList: updatedList,
+      });
+      message.success('更新成功');
+    } else {
+      const newRecord = {
+        id: Date.now(),
+        ...formValues,
+        level: formValues.level || 2,
+        createTime: new Date()
+          .toLocaleString('zh-CN', {
+            hour12: false,
+          })
+          .replace(/\//g, '-'),
+      };
+      this.setState({
+        weaknessList: [newRecord, ...(weaknessList || [])],
+      });
+      message.success('添加成功');
+    }
+    this.setState({
+      modalVisible: false,
+    });
+  }
+
+  handleModalCancel() {
+    this.setState({
+      modalVisible: false,
+    });
+  }
+
+  handleFormChange(field, value) {
+    const formValues = {
+      ...this.state.formValues,
+    };
+    formValues[field] = value;
+    this.setState({
+      formValues,
+    });
+  }
+
+  getSubjectTag(subject) {
+    const colorMap = {
+      数学: 'blue',
+      语文: 'green',
+      英语: 'purple',
+      物理: 'orange',
+      化学: 'red',
+      生物: 'cyan',
+    };
+    return <Tag color={colorMap[subject] || 'default'}>{subject}</Tag>;
+  }
+
+  getLevelTag(level) {
+    const levelMap = {
+      1: {
+        text: '严重薄弱',
+        color: 'red',
+      },
+      2: {
+        text: '一般薄弱',
+        color: 'orange',
+      },
+      3: {
+        text: '略有不足',
+        color: 'gold',
+      },
+    };
+    const info = levelMap[level] || levelMap[2];
+    return <Tag color={info.color}>{info.text}</Tag>;
+  }
+
+  getFilteredData() {
+    const { weaknessList, searchKeyword, subjectFilter, levelFilter } =
+      this.state;
+    return weaknessList?.filter(item => {
+      const matchSearch =
+        !searchKeyword ||
+        item.studentName?.includes(searchKeyword) ||
+        item.knowledgePoint?.includes(searchKeyword);
+      const matchSubject = !subjectFilter || item.subject === subjectFilter;
+      const matchLevel = !levelFilter || item.level === parseInt(levelFilter);
+      return matchSearch && matchSubject && matchLevel;
+    });
+  }
+
+  getStatistics() {
+    const { weaknessList } = this.state;
+    const subjectStats = {};
+    const levelStats = {
+      1: 0,
+      2: 0,
+      3: 0,
+    };
+    weaknessList?.forEach(item => {
+      subjectStats[item.subject] = (subjectStats[item.subject] || 0) + 1;
+      levelStats[item.level] = (levelStats[item.level] || 0) + 1;
+    });
+    return {
+      subjectStats,
+      levelStats,
+    };
+  }
+
+  render() {
+    const {
+      searchKeyword,
+      subjectFilter,
+      levelFilter,
+      modalVisible,
+      editingRecord,
+      formValues,
+    } = this.state;
+    const filteredData = this.getFilteredData();
+    const { subjectStats, levelStats } = this.getStatistics();
+    return (
+      <Page className="p-[24px] bg-[var(--gray-50)] min-h-screen">
+        <View className="mb-[24px]">
+          <h1 className="text-2xl font-bold text-[#1f2937]">
+            学生知识点薄弱项记录
+          </h1>
+          <p className="text-[#6b7280] text-sm mt-[4px]">
+            记录和管理学生的知识点薄弱项，帮助学生针对性提升
+          </p>
+        </View>
+        <View className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-[24px]">
+          <Card>
+            <View className="text-[var(--center)]">
+              <View className="text-3xl font-bold text-[var(--blue-600)]">
+                {0}
+              </View>
+              <View className="text-[#6b7280] text-sm">薄弱项总数</View>
+            </View>
+          </Card>
+          <Card>
+            <View className="text-[var(--center)]">
+              <View className="text-3xl font-bold text-[var(--red-600)]">
+                <Text>{levelStats[1]}</Text>
+              </View>
+              <View className="text-[#6b7280] text-sm">严重薄弱</View>
+            </View>
+          </Card>
+          <Card>
+            <View className="text-[var(--center)]">
+              <View className="text-3xl font-bold text-[var(--orange-600)]">
+                <Text>{levelStats[2]}</Text>
+              </View>
+              <View className="text-[#6b7280] text-sm">一般薄弱</View>
+            </View>
+          </Card>
+          <Card>
+            <View className="text-[var(--center)]">
+              <View className="text-3xl font-bold text-[var(--yellow-600)]">
+                <Text>{levelStats[3]}</Text>
+              </View>
+              <View className="text-[#6b7280] text-sm">略有不足</View>
+            </View>
+          </Card>
+        </View>
+        <Card className="mb-[24px]">
+          <View className="gap-4 flex flex-wrap items-center">
+            <Input
+              placeholder="搜索学生/知识点"
+              value={searchKeyword}
+              onChange={e => this.handleSearch(e.target.value)}
+              className=""
+            />
+            <Select
+              placeholder="选择科目"
+              value={subjectFilter}
+              onChange={value => this.handleSubjectFilter(value)}
+              allowClear={true}
+              className=""
+            >
+              <Select.Option value="数学">数学</Select.Option>
+              <Select.Option value="语文">语文</Select.Option>
+              <Select.Option value="英语">英语</Select.Option>
+              <Select.Option value="物理">物理</Select.Option>
+              <Select.Option value="化学">化学</Select.Option>
+              <Select.Option value="生物">生物</Select.Option>
+            </Select>
+            <Select
+              placeholder="掌握程度"
+              value={levelFilter}
+              onChange={value => this.handleLevelFilter(value)}
+              allowClear={true}
+              className=""
+            >
+              <Select.Option value="1">严重薄弱</Select.Option>
+              <Select.Option value="2">一般薄弱</Select.Option>
+              <Select.Option value="3">略有不足</Select.Option>
+            </Select>
+            <View className="flex-1" />
+            <Button type="primary" onClick={() => this.handleAdd()}>
+              + 添加薄弱项
+            </Button>
+          </View>
+        </Card>
+        <Card>
+          <Table
+            loading={this.state.loading}
+            columns={[
+              { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+              {
+                title: '学生姓名',
+                dataIndex: 'studentName',
+                key: 'studentName',
+                width: 120,
+              },
+              {
+                title: '科目',
+                dataIndex: 'subject',
+                key: 'subject',
+                width: 100,
+                render: text => <View>{this.getSubjectTag(text)}</View>,
+              },
+              {
+                title: '知识点',
+                dataIndex: 'knowledgePoint',
+                key: 'knowledgePoint',
+                width: 150,
+              },
+              {
+                title: '掌握程度',
+                dataIndex: 'level',
+                key: 'level',
+                width: 120,
+                render: text => <View>{this.getLevelTag(text)}</View>,
+              },
+              {
+                title: '备注说明',
+                dataIndex: 'note',
+                key: 'note',
+                ellipsis: true,
+              },
+              {
+                title: '记录时间',
+                dataIndex: 'createTime',
+                key: 'createTime',
+                width: 180,
+              },
+              {
+                title: '操作',
+                key: 'action',
+                width: 150,
+                fixed: 'right',
+                render: (text, record) => (
+                  <Space>
+                    <Button type="link" onClick={() => this.handleEdit(record)}>
+                      编辑
+                    </Button>
+                    <Button
+                      type="link"
+                      danger={true}
+                      onClick={() => this.handleDelete(record)}
+                    >
+                      删除
+                    </Button>
+                  </Space>
+                ),
+              },
+            ]}
+            dataSource={filteredData}
+            rowKey="id"
+            pagination={{
+              pageSize: 10,
+              showTotal: function (total) {
+                return `共 ${total} 条`;
+              },
+            }}
+            scroll={{ x: 1200, scrollToFirstRowOnChange: true }}
+            showHeader={true}
+            size="default"
+            tableLayout=""
+          />
+        </Card>
+        <Modal
+          title={editingRecord ? '编辑薄弱项' : '添加薄弱项'}
+          open={modalVisible}
+          onOk={() => this.handleModalOk()}
+          onCancel={() => this.handleModalCancel()}
+          width={600}
+          okText="确定"
+          cancelText="取消"
+        >
+          <Form layout="vertical">
+            <Form.Item label="学生姓名" required={true}>
+              <Input
+                placeholder="请输入学生姓名"
+                value={formValues.studentName}
+                onChange={e =>
+                  this.handleFormChange('studentName', e.target.value)
+                }
+              />
+            </Form.Item>
+            <Form.Item label="科目" required={true}>
+              <Select
+                placeholder="请选择科目"
+                value={formValues.subject}
+                onChange={value => this.handleFormChange('subject', value)}
+              >
+                <Select.Option value="数学">数学</Select.Option>
+                <Select.Option value="语文">语文</Select.Option>
+                <Select.Option value="英语">英语</Select.Option>
+                <Select.Option value="物理">物理</Select.Option>
+                <Select.Option value="化学">化学</Select.Option>
+                <Select.Option value="生物">生物</Select.Option>
+              </Select>
+            </Form.Item>
+            <Form.Item label="知识点" required={true}>
+              <Input
+                placeholder="请输入薄弱的知识点"
+                value={formValues.knowledgePoint}
+                onChange={e =>
+                  this.handleFormChange('knowledgePoint', e.target.value)
+                }
+              />
+            </Form.Item>
+            <Form.Item label="掌握程度">
+              <View className="gap-4 flex items-center">
+                <Rate
+                  count={3}
+                  value={formValues.level || 2}
+                  onChange={value => this.handleFormChange('level', value)}
+                  character="★"
+                />
+                <Text className="text-[#6b7280] text-sm">
+                  {formValues.level === 1 && '严重薄弱'}
+                  {formValues.level === 2 && '一般薄弱'}
+                  {formValues.level === 3 && '略有不足'}
+                </Text>
+              </View>
+              <View className="text-[#9ca3af] text-xs mt-[4px]">
+                1星=严重薄弱，2星=一般薄弱，3星=略有不足
+              </View>
+            </Form.Item>
+            <Form.Item label="备注说明">
+              <Input.TextArea
+                placeholder="请输入备注说明（可选）"
+                value={formValues.note}
+                onChange={e => this.handleFormChange('note', e.target.value)}
+                rows={3}
+              />
+            </Form.Item>
+          </Form>
+        </Modal>
+      </Page>
+    );
+  }
+}
+
+export default Document;