Skip to content

GitLab

P
pro-blocks
Commit 63d96d20 authored by 陈帅's avatar 陈帅
Browse files
Options

support dark theme

parent abe38651
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 104 deletions
AccountCenter/src/index.tsx
View file @ 63d96d20
...@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'; ...@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import Link from 'umi/link'; import Link from 'umi/link';
import { GridContent } from '@ant-design/pro-layout';
import { RouteChildrenProps } from 'react-router'; import { RouteChildrenProps } from 'react-router';
import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd'; import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd';
import styles from './Center.less'; import styles from './Center.less';
...@@ -154,88 +155,91 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< ...@@ -154,88 +155,91 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
const { currentUser, currentUserLoading } = this.props; const { currentUser, currentUserLoading } = this.props;
const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length); const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length);
return ( return (
<Row gutter={24}> <GridContent>
<Col lg={7} md={24}> <Row gutter={24}>
<Card bordered={false} style={{ marginBottom: 24 }} loading={dataLoading}> <Col lg={7} md={24}>
{!dataLoading ? ( <Card bordered={false} style={{ marginBottom: 24 }} loading={dataLoading}>
<div> {!dataLoading ? (
<div className={styles.avatarHolder}> <div>
<img alt="" src={currentUser.avatar} /> <div className={styles.avatarHolder}>
<div className={styles.name}>{currentUser.name}</div> <img alt="" src={currentUser.avatar} />
<div>{currentUser.signature}</div> <div className={styles.name}>{currentUser.name}</div>
<div>{currentUser.signature}</div>
</div>
<div className={styles.detail}>
<p>
<i className={styles.title} />
{currentUser.title}
</p>
<p>
<i className={styles.group} />
{currentUser.group}
</p>
<p>
<i className={styles.address} />
{currentUser.geographic.province.label}
{currentUser.geographic.city.label}
</p>
</div>
<Divider dashed />
<div className={styles.tags}>
<div className={styles.tagsTitle}>标签</div>
{currentUser.tags.concat(newTags).map(item => {
return <Tag key={item.key}>{item.label}</Tag>;
})}
{inputVisible && (
<Input
ref={ref => this.saveInputRef(ref)}
type="text"
size="small"
style={{ width: 78 }}
value={inputValue}
onChange={this.handleInputChange}
onBlur={this.handleInputConfirm}
onPressEnter={this.handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag
onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }}
>
<Icon type="plus" />
</Tag>
)}
</div>
<Divider style={{ marginTop: 16 }} dashed />
<div className={styles.team}>
<div className={styles.teamTitle}>团队</div>
<Row gutter={36}>
{currentUser.notice &&
currentUser.notice.map(item => (
<Col key={item.id} lg={24} xl={12}>
<Link to={item.href}>
<Avatar size="small" src={item.logo} />
{item.member}
</Link>
</Col>
))}
</Row>
</div>
</div> </div>
<div className={styles.detail}> ) : null}
<p> </Card>
<i className={styles.title} /> </Col>
{currentUser.title} <Col lg={17} md={24}>
</p> <Card
<p> className={styles.tabsCard}
<i className={styles.group} /> bordered={false}
{currentUser.group} tabList={operationTabList}
</p> activeTabKey={tabKey}
<p> onTabChange={this.onTabChange}
<i className={styles.address} /> >
{currentUser.geographic.province.label} {this.renderChildrenByTabKey(tabKey)}
{currentUser.geographic.city.label} </Card>
</p> </Col>
</div> </Row>
<Divider dashed /> </GridContent>
<div className={styles.tags}>
<div className={styles.tagsTitle}>标签</div>
{currentUser.tags.concat(newTags).map(item => {
return <Tag key={item.key}>{item.label}</Tag>;
})}
{inputVisible && (
<Input
ref={ref => this.saveInputRef(ref)}
type="text"
size="small"
style={{ width: 78 }}
value={inputValue}
onChange={this.handleInputChange}
onBlur={this.handleInputConfirm}
onPressEnter={this.handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag
onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }}
>
<Icon type="plus" />
</Tag>
)}
</div>
<Divider style={{ marginTop: 16 }} dashed />
<div className={styles.team}>
<div className={styles.teamTitle}>团队</div>
<Row gutter={36}>
{currentUser.notice && currentUser.notice.map(item => (
<Col key={item.id} lg={24} xl={12}>
<Link to={item.href}>
<Avatar size="small" src={item.logo} />
{item.member}
</Link>
</Col>
))}
</Row>
</div>
</div>
) : null}
</Card>
</Col>
<Col lg={17} md={24}>
<Card
className={styles.tabsCard}
bordered={false}
tabList={operationTabList}
activeTabKey={tabKey}
onTabChange={this.onTabChange}
>
{this.renderChildrenByTabKey(tabKey)}
</Card>
</Col>
</Row>
); );
} }
} }
......
AccountSettings/src/index.tsx
View file @ 63d96d20
...@@ -2,6 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { FormattedMessage } from 'umi-plugin-react/locale'; import { FormattedMessage } from 'umi-plugin-react/locale';
import { GridContent } from '@ant-design/pro-layout';
import { Menu } from 'antd'; import { Menu } from 'antd';
import styles from './style.less'; import styles from './style.less';
import BaseView from './components/base'; import BaseView from './components/base';
...@@ -133,28 +134,30 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component< ...@@ -133,28 +134,30 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
} }
const { mode, selectKey } = this.state; const { mode, selectKey } = this.state;
return ( return (
<div <GridContent>
className={styles.main} <div
ref={ref => { className={styles.main}
if (ref) { ref={ref => {
this.main = ref; if (ref) {
} this.main = ref;
}} }
> }}
<div className={styles.leftMenu}> >
<Menu <div className={styles.leftMenu}>
mode={mode} <Menu
selectedKeys={[selectKey]} mode={mode}
onClick={({ key }) => this.selectKey(key as PAGE_NAME_UPPER_CAMEL_CASEStateKeys)} selectedKeys={[selectKey]}
> onClick={({ key }) => this.selectKey(key as PAGE_NAME_UPPER_CAMEL_CASEStateKeys)}
{this.getMenu()} >
</Menu> {this.getMenu()}
</Menu>
</div>
<div className={styles.right}>
<div className={styles.title}>{this.getRightTitle()}</div>
{this.renderChildren()}
</div>
</div> </div>
<div className={styles.right}> </GridContent>
<div className={styles.title}>{this.getRightTitle()}</div>
{this.renderChildren()}
</div>
</div>
); );
} }
} }
......
AccountSettings/src/style.less
View file @ 63d96d20
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
padding-top: 16px; padding-top: 16px;
padding-bottom: 16px; padding-bottom: 16px;
overflow: auto; overflow: auto;
background-color: @body-background; background-color: @menu-bg;
.leftMenu { .leftMenu {
width: 224px; width: 224px;
border-right: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split;
......
package.json
View file @ 63d96d20
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "cross-env PAGES_PATH='ResultSuccess/src' umi dev", "dev": "cross-env PAGES_PATH='AccountSettings/src' umi dev",
"lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier", "lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier",
"lint-staged": "lint-staged", "lint-staged": "lint-staged",
"lint-staged:ts": "tslint", "lint-staged:ts": "tslint",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment