Просмотр исходного кода

🎨 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.
t0ng7u 8 месяцев назад
Родитель
Сommit
0c5d4ca0a7
1 измененных файлов с 22 добавлено и 6 удалено
  1. 22 6
      web/src/components/table/ChannelsTable.js

+ 22 - 6
web/src/components/table/ChannelsTable.js

@@ -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) {