@jiangood/open-admin 1.0.0-beta.5

package/src/pages/userCenter/ChangePassword.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {Button, Form, Input, Modal} from "antd";
+
+
+import {history} from 'umi'
+import {HttpUtils} from "../../framework";
+
+export default class extends React.Component {
+
+
+    onFinish = (values) => {
+        HttpUtils.post('admin/userCenter/updatePwd', values).then(() => {
+            Modal.success({
+                title: '提示',
+                content: '修改密码成功',
+                onOk: () => {
+                    SysUtils.setToken(null)
+                    history.push('/login')
+                }
+            })
+        })
+    }
+
+    validator = (rule, value) => {
+        return new Promise((resolve, reject) => {
+            HttpUtils.get("admin/sysUser/pwdStrength", {password: value}).then(response => {
+                const rs = response.data
+                if (!rs.success) {
+                    reject(rs.message)
+                }
+                resolve()
+            })
+        })
+
+    }
+
+    render() {
+        return <div>
+
+            <Form onFinish={this.onFinish} style={{maxWidth: 400}}>
+
+                <Form.Item name='newPassword'
+                           label='新密码'
+                           extra={'请输入字母、数字、特殊字符'}
+                           rules={[
+                               {required: true},
+                               {
+                                   validator: this.validator
+                               }
+                           ]}
+                >
+                    <Input.Password></Input.Password>
+                </Form.Item>
+
+                <Form.Item wrapperCol={{offset: 5}} style={{marginTop: 40}}>
+                    <Button type="primary" htmlType="submit">
+                        确定
+                    </Button>
+                </Form.Item>
+            </Form>
+
+        </div>
+    }
+}

package/src/pages/userCenter/index.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import {Avatar, Card, Col, Row, Tabs} from "antd";
+import ChangePassword from "./ChangePassword";
+import {HttpUtils, Page} from "../../framework";
+
+export default class extends React.Component {
+
+    state = {
+        info: {}
+    }
+
+    componentDidMount() {
+        HttpUtils.get('admin/userCenter/info').then(rs => {
+            this.setState({info: rs})
+        })
+    }
+
+    render() {
+        const {info} = this.state;
+        return <Page padding backgroundGray>
+            <Row gutter={[16, 16]}>
+                <Col md={6} sm={24}>
+                    <Card title='个人信息'>
+
+                        <div className='flex-center' style={{marginBottom: 32}}>
+                            <Avatar size={128} title='点击修改头像'/>
+                        </div>
+
+
+                        <table className='tmgg-table'>
+                            <tbody>
+                            <tr>
+                                <td>用户名称</td>
+                                <td align='right'>{info.name}</td>
+                            </tr>
+                            <tr>
+                                <td>账号</td>
+                                <td align='right'>{info.account}</td>
+                            </tr>
+                            <tr>
+                                <td>手机号码</td>
+                                <td>{info.phone}</td>
+                            </tr>
+                            <tr>
+                                <td>用户邮箱</td>
+                                <td>{info.email}</td>
+                            </tr>
+                            <tr>
+                                <td>所属部门</td>
+                                <td>{info.unit} {info.dept}</td>
+                            </tr>
+                            <tr>
+                                <td>所属角色</td>
+                                <td>{info.roles}</td>
+                            </tr>
+                            <tr>
+                                <td>创建日期</td>
+                                <td>{info.createTime}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </Card>
+                </Col>
+                <Col md={18} sm={24}>
+                    <Card title='个人设置'>
+                        <Tabs
+                            items={[
+                                {
+                                    label: '修改密码', key: 'pwd', children: <div>
+                                        <ChangePassword/>
+                                    </div>
+                                },
+                                {
+                                    label: '消息订阅', key: 'topic', children: <div>
+                                        当账号管理邮箱后，系统消息会发送邮件给您
+                                    </div>
+                                }
+                            ]}
+                            tabPosition='left'
+                        >
+                        </Tabs>
+                    </Card>
+                </Col>
+            </Row>
+
+
+        </Page>
+
+    }
+}

package/src/pages/userCenter/manual.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {HttpUtils, Page, ProTable} from "../../framework";
+
+
+export default class extends React.Component {
+
+
+    tableRef = React.createRef()
+
+    columns = [
+
+        {
+            title: '名称',
+            dataIndex: 'name',
+
+
+        },
+
+        {
+            title: '版本',
+            dataIndex: 'version',
+            render(version) {
+                return 'v' + version;
+            }
+        },
+
+        {
+            title: '文件',
+            dataIndex: 'fileId',
+            render(id) {
+                const url = ('admin/sysFile/preview/' + id);
+                return <a href={url} target='_blank'>查看文件</a>
+            }
+
+        },
+
+        {
+            title: '更新时间',
+            dataIndex: 'updateTime',
+        },
+    ]
+
+
+    render() {
+        return <Page>
+            <ProTable
+                actionRef={this.tableRef}
+                request={(params) => HttpUtils.get('admin/sysManual/pageForUser', params)}
+                columns={this.columns}
+            />
+        </Page>
+
+
+    }
+}
+
+

package/src/pages/userCenter/message.jsx

@@ -0,0 +1,103 @@
+import React from "react";
+import {Button, Card, Tabs, Tag} from "antd";
+import {ProTable} from "../../framework";
+
+export default class extends React.Component {
+
+    tableRef = React.createRef()
+
+    read = (record) => {
+        HttpUtils.post("admin/user/msg/read", record).then(rs => {
+            this.tableRef.current.reload()
+        })
+    }
+
+    columns = [
+        {
+            title: '时间',
+            dataIndex: 'createTime',
+            width: 150
+        },
+        {
+            title: '标题',
+            dataIndex: 'title',
+        },
+        {
+            title: '内容',
+            dataIndex: 'content',
+            render(content, row) {
+                return <div dangerouslySetInnerHTML={{__html: content}}/>
+            }
+        },
+        {
+            title: '已读时间',
+            dataIndex: 'readTime',
+            width: 150
+        },
+        {
+            title: '状态',
+            dataIndex: 'isRead',
+            render: (v, row) => {
+                return v == true ? <Tag color='green'>已读</Tag> : <Tag color='red'>未读</Tag>;
+            },
+            width: 80
+        },
+
+        {
+            title: '-',
+            dataIndex: 'option',
+            render: (read, row) => {
+                if (!row.isRead)
+                    return <Button size='small' onClick={() => this.read(row)}> 标记已读 </Button>
+            }, width: 80
+        }
+    ]
+
+    render() {
+        return <Card variant={"borderless"}>
+
+            <Tabs defaultActiveKey="0" destroyOnHidden
+            >
+                <Tabs.TabPane key='0' tab='所有消息'>
+                    <ProTable
+                        actionRef={this.tableRef}
+                        request={(params) => HttpUtils.get("admin/user/msg/page", params)}
+                        columns={this.columns}
+                        toolbarOptions={{showSearch: false}}
+                        size='small'
+                    />
+                </Tabs.TabPane>
+                <Tabs.TabPane key='1' tab='未读消息'>
+                    <ProTable
+                        actionRef={this.tableRef}
+                        request={(params) => HttpUtils.get("admin/user/msg/page?read=false", params)}
+                        columns={this.columns}
+                        rowSelection={false}
+                        rowKey='id'
+                        toolbarOptions={{showSearch: false}}
+                        size='small'
+                    />
+
+
+                </Tabs.TabPane>
+                <Tabs.TabPane key='2' tab='已读消息'>
+
+                    <ProTable
+                        actionRef={this.tableRef}
+                        request={(params) => HttpUtils.get("admin/user/msg/page?read=true", params)}
+                        rowSelection={false}
+                        rowKey='id'
+                        toolbarOptions={{showSearch: false}}
+                        options={false}
+                        size='small'
+                        columns={this.columns}
+                    />
+
+
+                </Tabs.TabPane>
+
+            </Tabs>
+
+        </Card>
+    }
+}

package/src/style/global.less

@@ -0,0 +1,51 @@
+/*主要在layout中导入*/
+table.tmgg-table {
+  width: 100%;
+  border-collapse: collapse; /* 合并边框 */
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
+  table-layout: fixed;
+
+  th {
+    background-color: #f2f2f2; /* 背景色 */
+    color: #333; /* 文字颜色 */
+    font-weight: bold; /* 加粗 */
+    padding: 12px 15px; /* 内边距 */
+    text-align: left; /* 文字对齐 */
+    border-bottom: 2px solid #ddd; /* 底部边框 */
+  }
+
+  td {
+    padding: 10px 15px; /* 内边距 */
+    border-bottom: 1px solid #ddd; /* 底部边框 */
+    text-align: left; /* 文字对齐 */
+  }
+
+  /* 表格行悬停效果 */
+
+  tr:hover {
+    background-color: #f5f5f5; /* 悬停背景色 */
+  }
+
+  /* 斑马纹效果 - 交替行颜色 */
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+
+  /* 响应式表格 - 在小屏幕上添加水平滚动 */
+  @media screen and (max-width: 600px) {
+    table {
+      display: block;
+      overflow-x: auto;
+    }
+  }
+
+
+}
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+