🎨 style(channels-table): standardize operation component size to small

All operation-related UI controls in `ChannelsTable` (buttons, dropdowns,
switches, inputs, tags, etc.) now explicitly use `size="small"`.

Reasons & benefits:
- Creates a more compact and consistent look across the table and modals.
- Improves visual coherence between desktop and mobile views.
- Purely presentational; no functional logic is affected.

No database changes or API interactions are involved.
This commit is contained in:
t0ng7u
2025-06-24 18:02:34 +08:00
parent 44495b153a
commit 0c5d4ca0a7

View File

@@ -1528,6 +1528,7 @@ const ChannelsTable = () => {
<div className="flex flex-col md:flex-row justify-between gap-4"> <div className="flex flex-col md:flex-row justify-between gap-4">
<div className="flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto order-2 md:order-1"> <div className="flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto order-2 md:order-1">
<Button <Button
size='small'
disabled={!enableBatchDelete} disabled={!enableBatchDelete}
theme='light' theme='light'
type='danger' type='danger'
@@ -1544,6 +1545,7 @@ const ChannelsTable = () => {
</Button> </Button>
<Button <Button
size='small'
disabled={!enableBatchDelete} disabled={!enableBatchDelete}
theme='light' theme='light'
type='primary' type='primary'
@@ -1554,11 +1556,13 @@ const ChannelsTable = () => {
</Button> </Button>
<Dropdown <Dropdown
size='small'
trigger='click' trigger='click'
render={ render={
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item> <Dropdown.Item>
<Button <Button
size='small'
theme='light' theme='light'
type='warning' type='warning'
className="!rounded-full w-full" className="!rounded-full w-full"
@@ -1577,6 +1581,7 @@ const ChannelsTable = () => {
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Button <Button
size='small'
theme='light' theme='light'
type='secondary' type='secondary'
className="!rounded-full w-full" className="!rounded-full w-full"
@@ -1595,6 +1600,7 @@ const ChannelsTable = () => {
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Button <Button
size='small'
theme='light' theme='light'
type='danger' type='danger'
className="!rounded-full w-full" className="!rounded-full w-full"
@@ -1613,6 +1619,7 @@ const ChannelsTable = () => {
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item> <Dropdown.Item>
<Button <Button
size='small'
theme='light' theme='light'
type='tertiary' type='tertiary'
className="!rounded-full w-full" className="!rounded-full w-full"
@@ -1632,15 +1639,15 @@ const ChannelsTable = () => {
</Dropdown.Menu> </Dropdown.Menu>
} }
> >
<Button theme='light' type='tertiary' icon={<IconSetting />} className="!rounded-full w-full md:w-auto"> <Button size='small' theme='light' type='tertiary' className="!rounded-full w-full md:w-auto">
{t('批量操作')} {t('批量操作')}
</Button> </Button>
</Dropdown> </Dropdown>
<Button <Button
size='small'
theme='light' theme='light'
type='secondary' type='secondary'
icon={<IconDescend />}
className="!rounded-full w-full md:w-auto" className="!rounded-full w-full md:w-auto"
onClick={() => setCompactMode(!compactMode)} onClick={() => setCompactMode(!compactMode)}
> >
@@ -1654,6 +1661,7 @@ const ChannelsTable = () => {
{t('使用ID排序')} {t('使用ID排序')}
</Typography.Text> </Typography.Text>
<Switch <Switch
size='small'
checked={idSort} checked={idSort}
onChange={(v) => { onChange={(v) => {
localStorage.setItem('id-sort', v + ''); localStorage.setItem('id-sort', v + '');
@@ -1673,6 +1681,7 @@ const ChannelsTable = () => {
{t('开启批量操作')} {t('开启批量操作')}
</Typography.Text> </Typography.Text>
<Switch <Switch
size='small'
checked={enableBatchDelete} checked={enableBatchDelete}
onChange={(v) => { onChange={(v) => {
localStorage.setItem('enable-batch-delete', v + ''); localStorage.setItem('enable-batch-delete', v + '');
@@ -1686,6 +1695,7 @@ const ChannelsTable = () => {
{t('标签聚合模式')} {t('标签聚合模式')}
</Typography.Text> </Typography.Text>
<Switch <Switch
size='small'
checked={enableTagMode} checked={enableTagMode}
onChange={(v) => { onChange={(v) => {
localStorage.setItem('enable-tag-mode', v + ''); localStorage.setItem('enable-tag-mode', v + '');
@@ -1702,6 +1712,7 @@ const ChannelsTable = () => {
{t('状态筛选')} {t('状态筛选')}
</Typography.Text> </Typography.Text>
<Select <Select
size='small'
value={statusFilter} value={statusFilter}
onChange={(v) => { onChange={(v) => {
localStorage.setItem('channel-status-filter', v); localStorage.setItem('channel-status-filter', v);
@@ -1709,7 +1720,6 @@ const ChannelsTable = () => {
setActivePage(1); setActivePage(1);
loadChannels(1, pageSize, idSort, enableTagMode, activeTypeKey, v); loadChannels(1, pageSize, idSort, enableTagMode, activeTypeKey, v);
}} }}
size="small"
> >
<Select.Option value="all">{t('全部')}</Select.Option> <Select.Option value="all">{t('全部')}</Select.Option>
<Select.Option value="enabled">{t('已启用')}</Select.Option> <Select.Option value="enabled">{t('已启用')}</Select.Option>
@@ -1724,6 +1734,7 @@ const ChannelsTable = () => {
<div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full"> <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
<div className="flex gap-2 w-full md:w-auto order-2 md:order-1"> <div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
<Button <Button
size='small'
theme='light' theme='light'
type='primary' type='primary'
icon={<IconPlus />} icon={<IconPlus />}
@@ -1739,9 +1750,9 @@ const ChannelsTable = () => {
</Button> </Button>
<Button <Button
size='small'
theme='light' theme='light'
type='primary' type='primary'
icon={<IconRefresh />}
className="!rounded-full w-full md:w-auto" className="!rounded-full w-full md:w-auto"
onClick={refresh} onClick={refresh}
> >
@@ -1749,9 +1760,9 @@ const ChannelsTable = () => {
</Button> </Button>
<Button <Button
size='small'
theme='light' theme='light'
type='tertiary' type='tertiary'
icon={<IconSetting />}
onClick={() => setShowColumnSelector(true)} onClick={() => setShowColumnSelector(true)}
className="!rounded-full w-full md:w-auto" className="!rounded-full w-full md:w-auto"
> >
@@ -1773,6 +1784,7 @@ const ChannelsTable = () => {
> >
<div className="relative w-full md:w-64"> <div className="relative w-full md:w-64">
<Form.Input <Form.Input
size='small'
field="searchKeyword" field="searchKeyword"
prefix={<IconSearch />} prefix={<IconSearch />}
placeholder={t('渠道ID名称密钥API地址')} placeholder={t('渠道ID名称密钥API地址')}
@@ -1783,6 +1795,7 @@ const ChannelsTable = () => {
</div> </div>
<div className="w-full md:w-48"> <div className="w-full md:w-48">
<Form.Input <Form.Input
size='small'
field="searchModel" field="searchModel"
prefix={<IconSearch />} prefix={<IconSearch />}
placeholder={t('模型关键字')} placeholder={t('模型关键字')}
@@ -1791,8 +1804,9 @@ const ChannelsTable = () => {
pure pure
/> />
</div> </div>
<div className="w-full md:w-48"> <div className="w-full md:w-32">
<Form.Select <Form.Select
size='small'
field="searchGroup" field="searchGroup"
placeholder={t('选择分组')} placeholder={t('选择分组')}
optionList={[ optionList={[
@@ -1811,6 +1825,7 @@ const ChannelsTable = () => {
/> />
</div> </div>
<Button <Button
size='small'
type="primary" type="primary"
htmlType="submit" htmlType="submit"
loading={loading || searching} loading={loading || searching}
@@ -1819,6 +1834,7 @@ const ChannelsTable = () => {
{t('查询')} {t('查询')}
</Button> </Button>
<Button <Button
size='small'
theme='light' theme='light'
onClick={() => { onClick={() => {
if (formApi) { if (formApi) {