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';
import { connect } from 'dva';
import { Dispatch } from 'redux';
import Link from 'umi/link';
import { GridContent } from '@ant-design/pro-layout';
import { RouteChildrenProps } from 'react-router';
import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd';
import styles from './Center.less';
......@@ -154,88 +155,91 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
const { currentUser, currentUserLoading } = this.props;
const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length);
return (
<Row gutter={24}>
<Col lg={7} md={24}>
<Card bordered={false} style={{ marginBottom: 24 }} loading={dataLoading}>
{!dataLoading ? (
<div>
<div className={styles.avatarHolder}>
<img alt="" src={currentUser.avatar} />
<div className={styles.name}>{currentUser.name}</div>
<div>{currentUser.signature}</div>
<GridContent>
<Row gutter={24}>
<Col lg={7} md={24}>
<Card bordered={false} style={{ marginBottom: 24 }} loading={dataLoading}>
{!dataLoading ? (
<div>
<div className={styles.avatarHolder}>
<img alt="" src={currentUser.avatar} />
<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 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>
) : 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>
) : 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>
</GridContent>
);
}
}
......
AccountSettings/src/index.tsx
View file @ 63d96d20
......@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { GridContent } from '@ant-design/pro-layout';
import { Menu } from 'antd';
import styles from './style.less';
import BaseView from './components/base';
......@@ -133,28 +134,30 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
}
const { mode, selectKey } = this.state;
return (
<div
className={styles.main}
ref={ref => {
if (ref) {
this.main = ref;
}
}}
>
<div className={styles.leftMenu}>
<Menu
mode={mode}
selectedKeys={[selectKey]}
onClick={({ key }) => this.selectKey(key as PAGE_NAME_UPPER_CAMEL_CASEStateKeys)}
>
{this.getMenu()}
</Menu>
<GridContent>
<div
className={styles.main}
ref={ref => {
if (ref) {
this.main = ref;
}
}}
>
<div className={styles.leftMenu}>
<Menu
mode={mode}
selectedKeys={[selectKey]}
onClick={({ key }) => this.selectKey(key as PAGE_NAME_UPPER_CAMEL_CASEStateKeys)}
>
{this.getMenu()}
</Menu>
</div>
<div className={styles.right}>
<div className={styles.title}>{this.getRightTitle()}</div>
{this.renderChildren()}
</div>
</div>
<div className={styles.right}>
<div className={styles.title}>{this.getRightTitle()}</div>
{this.renderChildren()}
</div>
</div>
</GridContent>
);
}
}
......
AccountSettings/src/style.less
View file @ 63d96d20
......@@ -7,7 +7,7 @@
padding-top: 16px;
padding-bottom: 16px;
overflow: auto;
background-color: @body-background;
background-color: @menu-bg;
.leftMenu {
width: 224px;
border-right: @border-width-base @border-style-base @border-color-split;
......
package.json
View file @ 63d96d20
{
"private": true,
"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-staged": "lint-staged",
"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