🎨 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:
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user