CN.344590310454187:225f654b22f88c5b441dfcfa7fbf5808_6972fd0916320a77cf69ea73.6973040816320a77cf69eb7f.6973040845d45f26295a5184:Trae CN.T(2026/1/23 13:15:52)

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "16"

src/api/table.js

@@ -20,4 +20,12 @@ export function editItem(data) {
     method: 'post',
     data
   })
+}
+
+export function addItem(data) {
+  return request({
+    url: '/table/add',
+    method: 'post',
+    data
+  })
 }

src/mock/index.js

@@ -26,6 +26,7 @@ Mock.mock(/\/excel\/list/, "get", excelAPI.excelList);
 Mock.mock(/\/table\/list/, "post", tableAPI.tableList);
 Mock.mock(/\/table\/delete/, "post", tableAPI.deleteItem);
 Mock.mock(/\/table\/edit/, "post", tableAPI.editItem);
+Mock.mock(/\/table\/add/, "post", tableAPI.addItem);
 
 // monitor
 Mock.mock(/\/monitor/, "post", monitor.monitor);

src/mock/table.js

@@ -56,4 +56,17 @@ export default {
       code: 20000,
     };
   },
+  addItem: (config) => {
+    const data = JSON.parse(config.body);
+    const newItem = {
+      ...data,
+      id: List.length > 0 ? Math.max(...List.map(item => item.id)) + 1 : 1,
+      date: new Date().toISOString().slice(0, 19).replace('T', ' ')
+    };
+    List.unshift(newItem);
+    return {
+      code: 20000,
+      data: newItem
+    };
+  },
 };

src/views/table/forms/addForm.jsx

@@ -0,0 +1,53 @@
+import React, { Component } from "react";
+import { Form, Input, Rate, Select, Modal } from "antd";
+
+class AddForm extends Component {
+  render() {
+    const {
+      visible,
+      onCancel,
+      onOk,
+      form,
+      confirmLoading,
+    } = this.props;
+    const { getFieldDecorator } = form;
+    const formItemLayout = {
+      labelCol: {
+        sm: { span: 4 },
+      },
+      wrapperCol: {
+        sm: { span: 16 },
+      },
+    };
+    return (
+      <Modal
+        title="新增数据"
+        visible={visible}
+        onCancel={onCancel}
+        onOk={onOk}
+        confirmLoading={confirmLoading}
+      >
+        <Form {...formItemLayout}>
+          <Form.Item label="标题:">
+            {getFieldDecorator("title", {
+              rules: [{ required: true, message: "请输入标题!" }, { max: 20, message: "标题最大长度为20!" }],
+            })(<Input placeholder="请输入标题" maxLength={20} />)}
+          </Form.Item>
+          <Form.Item label="作者:">
+            {getFieldDecorator("author", {
+              rules: [{ required: true, message: "请输入作者!" }],
+            })(<Input placeholder="请输入作者" />)}
+          </Form.Item>
+          <Form.Item label="推荐指数:">
+            {getFieldDecorator("star", {
+              rules: [{ required: true, message: "请选择推荐指数!" }],
+              initialValue: 1,
+            })(<Rate count={3} />)}
+          </Form.Item>
+        </Form>
+      </Modal>
+    );
+  }
+}
+
+export default Form.create({ name: "AddForm" })(AddForm);

src/views/table/index.jsx

@@ -11,8 +11,9 @@ import {
   message,
   Select
 } from "antd";
-import { tableList, deleteItem,editItem } from "@/api/table";
+import { tableList, deleteItem,editItem,addItem } from "@/api/table";
 import EditForm from "./forms/editForm"
+import AddForm from "./forms/addForm"
 const { Column } = Table;
 const { Panel } = Collapse;
 class TableComponent extends Component {
@@ -30,6 +31,8 @@ class TableComponent extends Component {
     },
     editModalVisible: false,
     editModalLoading: false,
+    addModalVisible: false,
+    addModalLoading: false,
     currentRowData: {
       id: 0,
       author: "",
@@ -141,7 +144,7 @@ class TableComponent extends Component {
         message.success("编辑成功!")
         this.fetchData()
       }).catch(e => {
-        message.success("编辑失败,请重试!")
+        message.error("编辑失败,请重试!")
       })
 
     });
@@ -150,29 +153,86 @@ class TableComponent extends Component {
   handleCancel = _ => {
     this.setState({
       editModalVisible: false,
+      addModalVisible: false,
+    });
+  };
+
+  handleClearSearch = () => {
+    this.setState({
+      listQuery: {
+        pageNumber: 1,
+        pageSize: 10,
+        title: "",
+        star: "",
+        status: ""
+      }
+    }, () => {
+      // 重置表单输入框
+      if (this.searchFormRef) {
+        this.searchFormRef.resetFields();
+      }
+      this.fetchData();
+    });
+  };
+
+  handleAdd = () => {
+    this.setState({
+      addModalVisible: true,
+    });
+  };
+
+  handleAddOk = _ => {
+    const { form } = this.addFormRef.props;
+    form.validateFields((err, fieldsValue) => {
+      if (err) {
+        return;
+      }
+      const values = {
+        ...fieldsValue,
+        'star': '★'.repeat(fieldsValue['star']),
+        'date': new Date().toISOString().slice(0, 19).replace('T', ' '),
+        'status': 'published',
+        'readings': 0
+      };
+      this.setState({ addModalLoading: true, });
+      addItem(values).then((response) => {
+        form.resetFields();
+        this.setState({ addModalVisible: false, addModalLoading: false });
+        message.success("添加成功!")
+        this.fetchData()
+      }).catch(e => {
+        message.error("添加失败,请重试!")
+      })
     });
   };
   render() {
     return (
       <div className="app-container">
         <Collapse defaultActiveKey={["1"]}>
           <Panel header="筛选" key="1">
-            <Form layout="inline">
+            <Form layout="inline" ref={formRef => this.searchFormRef = formRef}>
               <Form.Item label="标题:">
-                <Input onChange={this.filterTitleChange} />
+                <Input 
+                  value={this.state.listQuery.title} 
+                  onChange={this.filterTitleChange} 
+                />
               </Form.Item>
               <Form.Item label="类型:">
                 <Select
                   style={{ width: 120 }}
+                  value={this.state.listQuery.status}
                   onChange={this.filterStatusChange}>
+                  <Select.Option value="">全部</Select.Option>
                   <Select.Option value="published">published</Select.Option>
                   <Select.Option value="draft">draft</Select.Option>
                 </Select>
               </Form.Item>
               <Form.Item label="推荐指数:">
                 <Select
                   style={{ width: 120 }}
+                  value={this.state.listQuery.star}
                   onChange={this.filterStarChange}>
+                  <Select.Option value="">全部</Select.Option>
                   <Select.Option value={1}>★</Select.Option>
                   <Select.Option value={2}>★★</Select.Option>
                   <Select.Option value={3}>★★★</Select.Option>
@@ -183,6 +243,16 @@ class TableComponent extends Component {
                   搜索
                 </Button>
               </Form.Item>
+              <Form.Item>
+                <Button onClick={this.handleClearSearch}>
+                  清除搜索
+                </Button>
+              </Form.Item>
+              <Form.Item>
+                <Button onClick={this.handleAdd} type="primary" icon="plus">
+                  新增数据
+                </Button>
+              </Form.Item>
             </Form>
           </Panel>
         </Collapse>
@@ -209,7 +279,7 @@ class TableComponent extends Component {
             );
           }}/>
           <Column title="时间" dataIndex="date" key="date" width={195} align="center"/>
-          <Column title="操作" key="action" width={195} align="center"render={(text, row) => (
+          <Column title="操作" key="action" width={195} align="center" render={(text, row) => (
             <span>
               <Button type="primary" shape="circle" icon="edit" title="编辑" onClick={this.handleEdit.bind(null,row)}/>
               <Divider type="vertical" />
@@ -236,6 +306,13 @@ class TableComponent extends Component {
           confirmLoading={this.state.editModalLoading}
           onCancel={this.handleCancel}
           onOk={this.handleOk}
+        />
+        <AddForm
+          wrappedComponentRef={formRef => this.addFormRef = formRef}
+          visible={this.state.addModalVisible}
+          confirmLoading={this.state.addModalLoading}
+          onCancel={this.handleCancel}
+          onOk={this.handleAddOk}
         />  
       </div>
     );

src/views/user/forms/add-user-form.jsx

@@ -31,7 +31,7 @@ class AddUserForm extends Component {
     };
     return (
       <Modal
-        title="编辑"
+        title="新增"
         visible={visible}
         onCancel={onCancel}
         onOk={onOk}
@@ -62,6 +62,11 @@ class AddUserForm extends Component {
             {getFieldDecorator("description", {
             })(<TextArea rows={4} placeholder="请输入用户描述" />)}
           </Form.Item>
+          <Form.Item label="密码:">
+            {getFieldDecorator("password", {
+              rules: [{ required: true, message: "请输入密码!" }],
+            })(<Input.Password placeholder="请输入密码" />)}
+          </Form.Item>
         </Form>
       </Modal>
     );

src/views/user/forms/edit-user-form.jsx

@@ -57,6 +57,26 @@ class EditUserForm extends Component {
               initialValue: description,
             })(<TextArea rows={4} placeholder="请输入用户描述" />)}
           </Form.Item>
+          <Form.Item label="密码:">
+            {getFieldDecorator("password", {
+              rules: [{ 
+                validator: (rule, value, callback) => {
+                  if (value) {
+                    const username = this.props.form.getFieldValue('name');
+                    if (value.includes(username)) {
+                      callback("密码不能包含用户名内容!");
+                    } else if (value.length < 2) {
+                      callback("密码至少需要包含两个字符!");
+                    } else {
+                      callback();
+                    }
+                  } else {
+                    callback();
+                  }
+                }
+              }],
+            })(<Input.Password placeholder="请输入新密码(留空则不修改)" />)}
+          </Form.Item>
         </Form>
       </Modal>
     );