Skip to content

Commit

Permalink
feat: improve theme designer
Browse files Browse the repository at this point in the history
  • Loading branch information
@honghui-qiao
honghui-qiao committed Jan 31, 2025
1 parent 4d0b371 commit bcad61d
Show file tree
Hide file tree
Showing 11 changed files with 215 additions and 69 deletions.
Empty file removed docs/components/theme-designer/Color.tsx
View file
Empty file.
Empty file removed docs/components/theme-designer/Radius.tsx
View file
Empty file.
Empty file removed docs/components/theme-designer/Spacing.tsx
View file
Empty file.
4 changes: 4 additions & 0 deletions docs/components/theme-designer/Typography.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,7 @@
.text-4 {
font-size: var(--bui-text-size-4);
}

.card-typography .bui-card-content {
color: var(--bui-color-fg-default);
}
31 changes: 18 additions & 13 deletions docs/components/theme-designer/Typography.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
import * as React from 'react';
import { Card, CardContent, CardHeader } from '@bifrostui/react';
import './Typography.less';

export const Typography = () => {
return (
<>
<h2>文本</h2>
<h3>标题</h3>
<div className="title-1">BUI Title 1</div>
<div className="title-2">BUI Title 2</div>
<div className="title-3">BUI Title 3</div>
<div className="title-4">BUI Title 4</div>
<div className="grid col-span-4">
<Card className="card-typography">
<CardHeader title="文本" />
<CardContent>
<h3>标题</h3>
<div className="title-1">BUI Title 1</div>
<div className="title-2">BUI Title 2</div>
<div className="title-3">BUI Title 3</div>
<div className="title-4">BUI Title 4</div>

<h3>正文</h3>
<div className="text-1">BUI Content 1</div>
<div className="text-2">BUI Content 2</div>
<div className="text-3">BUI Content 3</div>
<div className="text-4">BUI Content 4</div>
</>
<h3>正文</h3>
<div className="text-1">BUI Content 1</div>
<div className="text-2">BUI Content 2</div>
<div className="text-3">BUI Content 3</div>
<div className="text-4">BUI Content 4</div>
</CardContent>
</Card>
</div>
);
};
6 changes: 3 additions & 3 deletions docs/components/theme-designer/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const themes = [
];

export const tabList = [
{ title: '水果', index: 'fruits' },
{ title: '蔬菜', index: 'vegetables' },
{ title: '动物', index: 'animals' },
{ title: '选中的Tab', index: 'tab0' },
{ title: 'Tab 1', index: 'tab1' },
{ title: 'Tab 2', index: 'tab2' },
];
46 changes: 46 additions & 0 deletions docs/components/theme-designer/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,49 @@
.bui-theme-editor {
padding: var(--bui-spacing-md) var(--bui-spacing-lg);
border-radius: var(--bui-shape-radius-card);
background: var(--bui-color-bg-default);

display: grid;
gap: var(--bui-spacing-md);
grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid {
display: grid;
gap: var(--bui-spacing-md);
}

.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-span-2 {
grid-column: span 2 / span 2;
}

.col-span-4 {
grid-column: span 4 / span 4;
}

.col-span-6 {
grid-column: span 6 / span 6;
}

.col-span-8 {
grid-column: span 8 / span 8;
}

.col-span-12 {
grid-column: span 12 / span 12;
}

.card-btn-variations {
display: flex;

.bui-card-content {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
}
179 changes: 129 additions & 50 deletions docs/components/theme-designer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,30 @@ import {
CardFooter,
Radio,
RadioGroup,
Calendar,
List,
ListItem,
ListItemContent,
ListItemExtra,
Switch,
Slider,
} from '@bifrostui/react';
import { themes, tabList } from './constants';
import './index.less';
import { Typography } from './Typography';
import './index.less';

const ThemeDesigner = () => {
const [theme, setTheme] = useState('default');
const [activeTab, setActiveTab] = useState('fruits');
const [activeTab, setActiveTab] = useState(tabList[0].index);

const handleThemeChange = (_e, data) => {
document.querySelector('html')?.setAttribute('data-theme', data.value);
setTheme(data.value);
};

return (
<div className="bui-theme-editor">
<div className="theme-editor-menu">
<div className="bui-theme-editor grid grid-cols-12">
<div className="theme-editor-menu grid col-span-12">
<RadioGroup value={theme} onChange={handleThemeChange}>
{themes.map((item) => (
<Radio key={item.value} value={item.value}>
Expand All @@ -39,57 +46,129 @@ const ThemeDesigner = () => {

<Typography />

<h2>主题预览</h2>
<div className="editor-preview">
<Stack className="editor-preview-column" direction="row" spacing="8px">
<Button size="small" variant="contained" color="primary">
小号按钮
</Button>
<Button size="medium" variant="contained" color="primary">
中号按钮
</Button>
<Button size="large" variant="contained" color="primary">
大号按钮
</Button>
</Stack>
<Stack className="editor-preview-column" direction="row" spacing="8px">
<Button size="full" variant="contained" color="primary">
通栏按钮
</Button>
</Stack>
<div className="grid col-span-2">
<Card className="card-btn-variations">
<CardContent>
<Stack direction="column" spacing="8px">
<Button>取消</Button>
<Button variant="contained">确认</Button>
<Button variant="contained" color="primary">
购票
</Button>
<Button variant="contained" color="warning">
想看
</Button>
<Button variant="contained" color="info">
预售
</Button>
</Stack>
</CardContent>
</Card>
</div>

<div className="grid col-span-6">
<Card>
<CardContent>
<Stack
className="editor-preview-column"
direction="column"
spacing="8px"
>
<Button size="small" variant="contained" color="primary">
小按钮
</Button>
<Button size="medium" variant="contained" color="primary">
中按钮
</Button>
<Button size="large" variant="contained" color="primary">
大按钮
</Button>

<Stack className="editor-preview-column">
<Tabs style={{ marginBottom: '12px' }} value={activeTab}>
<Button size="full" variant="contained" color="primary">
通栏按钮
</Button>
</Stack>
</CardContent>
</Card>
</div>

<div className="grid col-span-8">
<Card>
<CardContent>
<Tabs style={{ marginBottom: '12px' }} value={activeTab}>
{tabList.map((item) => (
<Tab
key={item.index}
index={item.index}
onClick={() => setActiveTab(item.index)}
>
{item.title}
</Tab>
))}
</Tabs>
{tabList.map((item) => (
<Tab
key={item.index}
index={item.index}
onClick={() => setActiveTab(item.index)}
>
<TabPanel key={item.index} value={activeTab} index={item.index}>
{item.title}
</Tab>
</TabPanel>
))}
</Tabs>
{tabList.map((item) => (
<TabPanel key={item.index} value={activeTab} index={item.index}>
{item.title}
</TabPanel>
))}
</Stack>
</CardContent>
</Card>
</div>

<div className="grid col-span-4">
<Card>
<CardContent>
<Slider defaultValue={37.5} tipVisible />
</CardContent>
</Card>
</div>

<div className="grid col-span-4">
<Card>
<CardHeader title="显示与亮度" />
<CardContent>
<List size="medium">
<ListItem>
<ListItemContent primary="自动" />
<ListItemExtra>
<Switch color="primary" defaultChecked />
</ListItemExtra>
</ListItem>
<ListItem>
<ListItemContent primary="粗体文本" />
<ListItemExtra>
<Switch color="primary" />
</ListItemExtra>
</ListItem>
<ListItem>
<ListItemContent primary="原彩显示" />
<ListItemExtra>
<Switch color="primary" />
</ListItemExtra>
</ListItem>
</List>
</CardContent>
</Card>
</div>

<div className="grid col-span-4">
<Card>
<Calendar />
</Card>
</div>

<Stack className="editor-preview-column">
<Card style={{ width: '100%' }}>
<CardHeader title="订单" />
<CardContent>
<div>订单号：7a73fcggert235fag4</div>
<div>取餐码：235634</div>
<div>手机号: 134****5427</div>
</CardContent>
<CardFooter>
<Button color="primary">签收</Button>
</CardFooter>
</Card>
</Stack>
<div className="grid col-span-4">
<Card>
<CardHeader title="订单" />
<CardContent>
<div>订单编号：9527</div>
<div>下单时间：2025年9月9日</div>
<div>联系方式: 139****9999</div>
</CardContent>
<CardFooter>
<Button color="primary">取消订单</Button>
</CardFooter>
</Card>
</div>
</div>
);
Expand Down
2 changes: 0 additions & 2 deletions docs/guide/theme-designer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,4 @@
order: 1
---

# 主题定制器

<code src="../components/theme-designer/index.tsx" inline="true"></code>
3 changes: 2 additions & 1 deletion packages/bui-core/src/Button/Button.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
--bui-btn-opacity: 1;
--bui-btn-padding: 0 14px;
--bui-btn-border: 0;
--bui-btn-font-family: var(--bui-font-family);

outline: 0;
cursor: pointer;
Expand All @@ -55,7 +56,7 @@
height: var(--bui-btn-height);
padding: var(--bui-btn-padding);
line-height: var(--bui-line-height);
font-family: var(--bui-font-family);
font-family: var(--bui-btn-font-family);
opacity: var(--bui-btn-opacity);

@keyframes spin {
Expand Down
13 changes: 13 additions & 0 deletions packages/bui-styles/theme/pioneer-light.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@
--bui-btn-border-radius: 14px;
--bui-btn-height: 45px;
--bui-btn-font-size: 18px;
--bui-btn-font-family: alibabapuhuiti-heavy, chinese quote, segoe ui, roboto,
pingfang sc, hiragino sans gb, microsoft yahei, helvetica neue, helvetica,
arial, sans-serif;
}

.bui-btn-large {
Expand All @@ -146,4 +149,14 @@
.bui-btn-medium {
--bui-btn-border-radius: 6px;
}

.bui-btn-outlined {
--bui-btn-border: solid 1px var(--bui-color-fg-default);
--bui-btn-color: var(--bui-color-fg-default);
}

.bui-btn-contained {
--bui-btn-color: var(--bui-color-bg-view);
--bui-btn-bg: var(--bui-color-fg-default);
}
}

0 comments on commit bcad61d

Please sign in to comment.