tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

refactor: update UI components and styles, adjust configs

pull/11511/head
afc163 9 months ago
parent
99d6f8d527
commit
fea15d343a
9 changed files with 220 additions and 214 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      biome.json
  2. 8
      config/config.ts
  3. 4
      src/loading.tsx
  4. 4
      src/pages/account/center/components/ArticleListContent/index.style.ts
  5. 3
      src/pages/account/center/components/Articles/index.tsx
  6. 7
      src/pages/account/center/index.tsx
  7. 58
      src/pages/dashboard/analysis/components/ProportionSales.tsx
  8. 344
      src/pages/dashboard/analysis/components/SalesCard.tsx
  9. 4
      src/pages/dashboard/analysis/index.tsx

2
biome.json
View File

@ -14,6 +14,8 @@
"!**/dist/**",
"!**/server/**",
"!**/public/**",
"!**/coverage/**",
"!**/node_modules/**",
"!biome.json"
]
},

8
config/config.ts
View File

@ -45,13 +45,9 @@ export default defineConfig({
* @name 主题的配置
* @description 虽然叫主题，但是其实只是 less 的变量设置
* @doc antd的主题设置 https://ant.design/docs/react/customize-theme-cn
* @doc umi 的theme 配置 https://umijs.org/docs/api/config#theme
* @doc umi 的 theme 配置 https://umijs.org/docs/api/config#theme
*/
theme: {
// 如果不想要 configProvide 动态设置主题需要把这个设置为 default
// 只有设置为 variable， 才能使用 configProvide 动态设置主色调
'root-entry-name': 'variable',
},
// theme: { '@primary-color': '#1DA57A' }
/**
* @name moment 的国际化配置
* @description 如果对国际化没有要求，打开之后能减少js的包大小

4
src/loading.tsx
View File

@ -1,5 +1,7 @@
import { Skeleton } from 'antd';
const Loading: React.FC = () => <Skeleton style={{ margin: '24px 40px' }} active />;
const Loading: React.FC = () => (
<Skeleton style={{ margin: '24px 40px' }} active />
);
export default Loading;

4
src/pages/account/center/components/ArticleListContent/index.style.ts
View File

@ -10,8 +10,10 @@ const useStyles = createStyles(({ token }) => {
marginTop: '16px',
color: token.colorTextSecondary,
lineHeight: '22px',
display: 'flex',
gap: '8px',
alignItems: 'center',
'& > em': {
marginLeft: '16px',
color: token.colorTextDisabled,
fontStyle: 'normal',
},

3
src/pages/account/center/components/Articles/index.tsx
View File

@ -31,6 +31,9 @@ const Articles: React.FC = () => {
rowKey="id"
itemLayout="vertical"
dataSource={listData?.list || []}
style={{
margin: '0 -24px',
}}
renderItem={(item) => (
<List.Item
key={item.id}

7
src/pages/account/center/index.tsx
View File

@ -116,7 +116,6 @@ const TagList: React.FC<{
{inputVisible && (
<Input
ref={ref}
type="text"
size="small"
style={{
width: 78,
@ -227,7 +226,7 @@ const Center: React.FC = () => {
loading={loading}
>
{!loading && currentUser && (
<div>
<>
<div className={styles.avatarHolder}>
<img alt="" src={currentUser.avatar} />
<div className={styles.name}>{currentUser.name}</div>
@ -255,14 +254,14 @@ const Center: React.FC = () => {
))}
</Row>
</div>
</div>
</>
)}
</Card>
</Col>
<Col lg={17} md={24}>
<Card
className={styles.tabsCard}
bordered={false}
variant="borderless"
tabList={operationTabList}
activeTabKey={tabKey}
onTabChange={(_tabKey: string) => {

58
src/pages/dashboard/analysis/components/ProportionSales.tsx
View File

@ -1,6 +1,5 @@
import { Pie } from '@ant-design/plots';
import { Card, Radio, Typography } from 'antd';
import type { RadioChangeEvent } from 'antd/es/radio';
import { Card, Segmented, Typography } from 'antd';
import numeral from 'numeral';
import React from 'react';
import type { DataItem } from '../data.d';
@ -18,14 +17,14 @@ const ProportionSales = ({
dropdownGroup: React.ReactNode;
salesType: 'all' | 'online' | 'stores';
salesPieData: DataItem[];
handleChangeSalesType?: (e: RadioChangeEvent) => void;
handleChangeSalesType?: (value: 'all' | 'online' | 'stores') => void;
}) => {
const { styles } = useStyles();
return (
<Card
loading={loading}
className={styles.salesCard}
bordered={false}
variant="borderless"
title="销售额类别占比"
style={{
height: '100%',
@ -33,34 +32,35 @@ const ProportionSales = ({
extra={
<div className={styles.salesCardExtra}>
{dropdownGroup}
<div className={styles.salesTypeRadio}>
<Radio.Group value={salesType} onChange={handleChangeSalesType}>
<Radio.Button value="all">全部渠道</Radio.Button>
<Radio.Button value="online">线上</Radio.Button>
<Radio.Button value="stores">门店</Radio.Button>
</Radio.Group>
</div>
<Segmented
className={styles.salesTypeRadio}
value={salesType}
onChange={handleChangeSalesType}
options={[
{ label: '全部渠道', value: 'all' },
{ label: '线上', value: 'online' },
{ label: '门店', value: 'stores' },
]}
size="middle"
/>
</div>
}
>
<div>
<Text>销售额</Text>
<Pie
height={340}
radius={0.8}
innerRadius={0.5}
angleField="y"
colorField="x"
data={salesPieData as any}
legend={false}
label={{
position: 'spider',
text: (item: { x: number; y: number }) => {
return `${item.x}: ${numeral(item.y).format('0,0')}`;
},
}}
/>
</div>
<Text>销售额</Text>
<Pie
height={340}
radius={0.8}
innerRadius={0.5}
angleField="y"
colorField="x"
data={salesPieData as any}
legend={false}
label={{
position: 'spider',
text: (item: { x: number; y: number }) =>
`${item.x}: ${numeral(item.y).format('0,0')}`,
}}
/>
</Card>
);
};

344
src/pages/dashboard/analysis/components/SalesCard.tsx
View File

@ -39,180 +39,182 @@ const SalesCard = ({
return (
<Card
loading={loading}
bordered={false}
bodyStyle={{
padding: 0,
variant="borderless"
styles={{
body: {
padding: loading ? 24 : 0,
},
}}
>
<div className={styles.salesCard}>
<Tabs
tabBarExtraContent={
<div className={styles.salesExtraWrap}>
<div className={styles.salesExtra}>
<a
className={isActive('today')}
onClick={() => selectDate('today')}
>
今日
</a>
<a
className={isActive('week')}
onClick={() => selectDate('week')}
>
本周
</a>
<a
className={isActive('month')}
onClick={() => selectDate('month')}
>
本月
</a>
<a
className={isActive('year')}
onClick={() => selectDate('year')}
>
本年
</a>
</div>
<RangePicker
value={rangePickerValue}
onChange={handleRangePickerChange}
style={{
width: 256,
}}
/>
<Tabs
className={styles.salesCard}
tabBarExtraContent={
<div className={styles.salesExtraWrap}>
<div className={styles.salesExtra}>
<a
className={isActive('today')}
onClick={() => selectDate('today')}
>
今日
</a>
<a
className={isActive('week')}
onClick={() => selectDate('week')}
>
本周
</a>
<a
className={isActive('month')}
onClick={() => selectDate('month')}
>
本月
</a>
<a
className={isActive('year')}
onClick={() => selectDate('year')}
>
本年
</a>
</div>
}
size="large"
tabBarStyle={{
marginBottom: 24,
}}
items={[
{
key: 'sales',
label: '销售额',
children: (
<Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}>
<Column
height={300}
data={salesData}
xField="x"
yField="y"
paddingBottom={12}
axis={{
x: {
title: false,
},
y: {
title: false,
gridLineDash: null,
gridStroke: '#ccc',
},
}}
scale={{
x: { paddingInner: 0.4 },
}}
tooltip={{
name: '销售量',
channel: 'y',
}}
/>
</div>
</Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesRank}>
<h4 className={styles.rankingTitle}>门店销售额排名</h4>
<ul className={styles.rankingList}>
{rankingListData.map((item, i) => (
<li key={item.title}>
<span
className={`${styles.rankingItemNumber} ${
i < 3 ? styles.rankingItemNumberActive : ''
}`}
>
{i + 1}
</span>
<span
className={styles.rankingItemTitle}
title={item.title}
>
{item.title}
</span>
<span>{numeral(item.total).format('0,0')}</span>
</li>
))}
</ul>
</div>
</Col>
</Row>
),
},
{
key: 'views',
label: '访问量',
children: (
<Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}>
<Column
height={300}
data={salesData}
xField="x"
yField="y"
paddingBottom={12}
axis={{
x: {
title: false,
},
y: {
title: false,
},
}}
scale={{
x: { paddingInner: 0.4 },
}}
tooltip={{
name: '访问量',
channel: 'y',
}}
/>
</div>
</Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesRank}>
<h4 className={styles.rankingTitle}>门店访问量排名</h4>
<ul className={styles.rankingList}>
{rankingListData.map((item, i) => (
<li key={item.title}>
<span
className={`${
i < 3
? styles.rankingItemNumberActive
: styles.rankingItemNumber
}`}
>
{i + 1}
</span>
<span
className={styles.rankingItemTitle}
title={item.title}
>
{item.title}
</span>
<span>{numeral(item.total).format('0,0')}</span>
</li>
))}
</ul>
</div>
</Col>
</Row>
),
},
]}
/>
</div>
<RangePicker
value={rangePickerValue}
onChange={handleRangePickerChange}
variant="filled"
style={{
width: 256,
}}
/>
</div>
}
size="large"
tabBarStyle={{
marginBottom: 24,
}}
items={[
{
key: 'sales',
label: '销售额',
children: (
<Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}>
<Column
height={300}
data={salesData}
xField="x"
yField="y"
paddingBottom={12}
axis={{
x: {
title: false,
},
y: {
title: false,
gridLineDash: null,
gridStroke: '#ccc',
},
}}
scale={{
x: { paddingInner: 0.4 },
}}
tooltip={{
name: '销售量',
channel: 'y',
}}
/>
</div>
</Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesRank}>
<h4 className={styles.rankingTitle}>门店销售额排名</h4>
<ul className={styles.rankingList}>
{rankingListData.map((item, i) => (
<li key={item.title}>
<span
className={`${styles.rankingItemNumber} ${
i < 3 ? styles.rankingItemNumberActive : ''
}`}
>
{i + 1}
</span>
<span
className={styles.rankingItemTitle}
title={item.title}
>
{item.title}
</span>
<span>{numeral(item.total).format('0,0')}</span>
</li>
))}
</ul>
</div>
</Col>
</Row>
),
},
{
key: 'views',
label: '访问量',
children: (
<Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}>
<Column
height={300}
data={salesData}
xField="x"
yField="y"
paddingBottom={12}
axis={{
x: {
title: false,
},
y: {
title: false,
},
}}
scale={{
x: { paddingInner: 0.4 },
}}
tooltip={{
name: '访问量',
channel: 'y',
}}
/>
</div>
</Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesRank}>
<h4 className={styles.rankingTitle}>门店访问量排名</h4>
<ul className={styles.rankingList}>
{rankingListData.map((item, i) => (
<li key={item.title}>
<span
className={`${
i < 3
? styles.rankingItemNumberActive
: styles.rankingItemNumber
}`}
>
{i + 1}
</span>
<span
className={styles.rankingItemTitle}
title={item.title}
>
{item.title}
</span>
<span>{numeral(item.total).format('0,0')}</span>
</li>
))}
</ul>
</div>
</Col>
</Row>
),
},
]}
/>
</Card>
);
};

4
src/pages/dashboard/analysis/index.tsx
View File

@ -90,8 +90,8 @@ const Analysis: FC<AnalysisProps> = () => {
</Dropdown>
</span>
);
const handleChangeSalesType = (e: RadioChangeEvent) => {
setSalesType(e.target.value);
const handleChangeSalesType = (value: SalesType) => {
setSalesType(value);
};
const handleTabChange = (key: string) => {
setCurrentTabKey(key);

Write Preview
Loading…
Cancel
Save