🍎style(button): Optimize the colors of all buttons to reduce visual fatigue

2025-07-14 19:49:40 +08:00
parent 52fe92ed7f
commit 5f011502d1
9 changed files with 134 additions and 224 deletions
--- a/web/src/components/table/ChannelsTable.js
+++ b/web/src/components/table/ChannelsTable.js
@@ -563,7 +563,7 @@ const ChannelsTable = () => {
            {
              node: 'item',
              name: t('复制'),
-              type: 'primary',
+              type: 'tertiary',
              onClick: () => {
                Modal.confirm({
                  title: t('确定是否要复制此渠道？'),
@@ -581,15 +581,15 @@ const ChannelsTable = () => {
                aria-label={t('测试单个渠道操作项目组')}
              >
                <Button
-                  theme='light'
                  size="small"
+                  type='tertiary'
                  onClick={() => testChannel(record, '')}
                >
                  {t('测试')}
                </Button>
                <Button
-                  theme='light'
                  size="small"
+                  type='tertiary'
                  icon={<IconTreeTriangleDown />}
                  onClick={() => {
                    setCurrentTestChannel(record);
@@ -605,8 +605,7 @@ const ChannelsTable = () => {
                  {
                    record.status === 1 ? (
                      <Button
-                        theme='light'
-                        type='warning'
+                        type='danger'
                        size="small"
                        onClick={() => manageChannel(record.id, 'disable', record)}
                      >
@@ -614,8 +613,6 @@ const ChannelsTable = () => {
                      </Button>
                    ) : (
                      <Button
-                        theme='light'
-                        type='secondary'
                        size="small"
                        onClick={() => manageChannel(record.id, 'enable', record)}
                      >
@@ -635,7 +632,6 @@ const ChannelsTable = () => {
                    ]}
                  >
                    <Button
-                      theme='light'
                      type='tertiary'
                      size="small"
                      icon={<IconTreeTriangleDown />}
@@ -645,8 +641,7 @@ const ChannelsTable = () => {
              ) : (
                record.status === 1 ? (
                  <Button
-                    theme='light'
-                    type='warning'
+                    type='danger'
                    size="small"
                    onClick={() => manageChannel(record.id, 'disable', record)}
                  >
@@ -654,8 +649,6 @@ const ChannelsTable = () => {
                  </Button>
                ) : (
                  <Button
-                    theme='light'
-                    type='secondary'
                    size="small"
                    onClick={() => manageChannel(record.id, 'enable', record)}
                  >
@@ -665,7 +658,6 @@ const ChannelsTable = () => {
              )}

              <Button
-                theme='light'
                type='tertiary'
                size="small"
                onClick={() => {
@@ -683,7 +675,6 @@ const ChannelsTable = () => {
              >
                <Button
                  icon={<IconMore />}
-                  theme='light'
                  type='tertiary'
                  size="small"
                />
@@ -695,23 +686,20 @@ const ChannelsTable = () => {
          return (
            <Space wrap>
              <Button
-                theme='light'
-                type='secondary'
+                type='tertiary'
                size="small"
                onClick={() => manageTag(record.key, 'enable')}
              >
                {t('启用全部')}
              </Button>
              <Button
-                theme='light'
-                type='warning'
+                type='tertiary'
                size="small"
                onClick={() => manageTag(record.key, 'disable')}
              >
                {t('禁用全部')}
              </Button>
              <Button
-                theme='light'
                type='tertiary'
                size="small"
                onClick={() => {
@@ -783,22 +771,13 @@ const ChannelsTable = () => {
        onCancel={() => setShowColumnSelector(false)}
        footer={
          <div className="flex justify-end">
-            <Button
-              theme="light"
-              onClick={() => initDefaultColumns()}
-            >
+            <Button onClick={() => initDefaultColumns()}>
              {t('重置')}
            </Button>
-            <Button
-              theme="light"
-              onClick={() => setShowColumnSelector(false)}
-            >
+            <Button onClick={() => setShowColumnSelector(false)}>
              {t('取消')}
            </Button>
-            <Button
-              type='primary'
-              onClick={() => setShowColumnSelector(false)}
-            >
+            <Button onClick={() => setShowColumnSelector(false)}>
              {t('确定')}
            </Button>
          </div>
@@ -1605,7 +1584,6 @@ const ChannelsTable = () => {
          <Button
            size='small'
            disabled={!enableBatchDelete}
-            theme='light'
            type='danger'
            className="w-full md:w-auto"
            onClick={() => {
@@ -1622,8 +1600,7 @@ const ChannelsTable = () => {
          <Button
            size='small'
            disabled={!enableBatchDelete}
-            theme='light'
-            type='primary'
+            type='tertiary'
            onClick={() => setShowBatchSetTag(true)}
            className="w-full md:w-auto"
          >
@@ -1638,8 +1615,7 @@ const ChannelsTable = () => {
                <Dropdown.Item>
                  <Button
                    size='small'
-                    theme='light'
-                    type='warning'
+                    type='tertiary'
                    className="w-full"
                    onClick={() => {
                      Modal.confirm({
@@ -1657,7 +1633,23 @@ const ChannelsTable = () => {
                <Dropdown.Item>
                  <Button
                    size='small'
-                    theme='light'
+                    className="w-full"
+                    onClick={() => {
+                      Modal.confirm({
+                        title: t('确定是否要修复数据库一致性？'),
+                        content: t('进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用'),
+                        onOk: () => fixChannelsAbilities(),
+                        size: 'sm',
+                        centered: true,
+                      });
+                    }}
+                  >
+                    {t('修复数据库一致性')}
+                  </Button>
+                </Dropdown.Item>
+                <Dropdown.Item>
+                  <Button
+                    size='small'
                    type='secondary'
                    className="w-full"
                    onClick={() => {
@@ -1676,7 +1668,6 @@ const ChannelsTable = () => {
                <Dropdown.Item>
                  <Button
                    size='small'
-                    theme='light'
                    type='danger'
                    className="w-full"
                    onClick={() => {
@@ -1692,25 +1683,6 @@ const ChannelsTable = () => {
                    {t('删除禁用通道')}
                  </Button>
                </Dropdown.Item>
-                <Dropdown.Item>
-                  <Button
-                    size='small'
-                    theme='light'
-                    type='tertiary'
-                    className="w-full"
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('确定是否要修复数据库一致性？'),
-                        content: t('进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用'),
-                        onOk: () => fixChannelsAbilities(),
-                        size: 'sm',
-                        centered: true,
-                      });
-                    }}
-                  >
-                    {t('修复数据库一致性')}
-                  </Button>
-                </Dropdown.Item>
              </Dropdown.Menu>
            }
          >
@@ -1721,8 +1693,7 @@ const ChannelsTable = () => {

          <Button
            size='small'
-            theme='light'
-            type='secondary'
+            type='tertiary'
            className="w-full md:w-auto"
            onClick={() => setCompactMode(!compactMode)}
          >
@@ -1825,8 +1796,7 @@ const ChannelsTable = () => {

          <Button
            size='small'
-            theme='light'
-            type='primary'
+            type='tertiary'
            className="w-full md:w-auto"
            onClick={refresh}
          >
@@ -1835,7 +1805,6 @@ const ChannelsTable = () => {

          <Button
            size='small'
-            theme='light'
            type='tertiary'
            onClick={() => setShowColumnSelector(true)}
            className="w-full md:w-auto"
@@ -1898,7 +1867,7 @@ const ChannelsTable = () => {
            </div>
            <Button
              size='small'
-              type="primary"
+              type="tertiary"
              htmlType="submit"
              loading={loading || searching}
              className="w-full md:w-auto"
@@ -1907,7 +1876,7 @@ const ChannelsTable = () => {
            </Button>
            <Button
              size='small'
-              theme='light'
+              type='tertiary'
              onClick={() => {
                if (formApi) {
                  formApi.reset();
@@ -2033,61 +2002,6 @@ const ChannelsTable = () => {
                  {t('共')} {currentTestChannel.models.split(',').length} {t('个模型')}
                </Typography.Text>
              </div>
-
-              {/* 搜索与操作按钮 */}
-              <div className="flex items-center justify-end gap-2 w-full">
-                <Input
-                  placeholder={t('搜索模型...')}
-                  value={modelSearchKeyword}
-                  onChange={(v) => {
-                    setModelSearchKeyword(v);
-                    setModelTablePage(1);
-                  }}
-                  className="!w-full"
-                  prefix={<IconSearch />}
-                  showClear
-                />
-
-                <Button
-                  theme='light'
-                  onClick={() => {
-                    if (selectedModelKeys.length === 0) {
-                      showError(t('请先选择模型！'));
-                      return;
-                    }
-                    copy(selectedModelKeys.join(',')).then((ok) => {
-                      if (ok) {
-                        showSuccess(t('已复制 ${count} 个模型').replace('${count}', selectedModelKeys.length));
-                      } else {
-                        showError(t('复制失败，请手动复制'));
-                      }
-                    });
-                  }}
-                >
-                  {t('复制已选')}
-                </Button>
-
-                <Button
-                  theme='light'
-                  type='primary'
-                  onClick={() => {
-                    if (!currentTestChannel) return;
-                    const successKeys = currentTestChannel.models
-                      .split(',')
-                      .filter((m) => m.toLowerCase().includes(modelSearchKeyword.toLowerCase()))
-                      .filter((m) => {
-                        const result = modelTestResults[`${currentTestChannel.id}-${m}`];
-                        return result && result.success;
-                      });
-                    if (successKeys.length === 0) {
-                      showInfo(t('暂无成功模型'));
-                    }
-                    setSelectedModelKeys(successKeys);
-                  }}
-                >
-                  {t('选择成功')}
-                </Button>
-              </div>
            </div>
          )
        }
@@ -2097,15 +2011,13 @@ const ChannelsTable = () => {
          <div className="flex justify-end">
            {isBatchTesting ? (
              <Button
-                theme='light'
-                type='warning'
+                type='danger'
                onClick={handleCloseModal}
              >
                {t('停止测试')}
              </Button>
            ) : (
              <Button
-                theme='light'
                type='tertiary'
                onClick={handleCloseModal}
              >
@@ -2113,8 +2025,6 @@ const ChannelsTable = () => {
              </Button>
            )}
            <Button
-              theme='light'
-              type='primary'
              onClick={batchTestModels}
              loading={isBatchTesting}
              disabled={isBatchTesting}
@@ -2139,6 +2049,58 @@ const ChannelsTable = () => {
        <div className="model-test-scroll">
          {currentTestChannel && (
            <div>
+              {/* 搜索与操作按钮 */}
+              <div className="flex items-center justify-end gap-2 w-full mb-2">
+                <Input
+                  placeholder={t('搜索模型...')}
+                  value={modelSearchKeyword}
+                  onChange={(v) => {
+                    setModelSearchKeyword(v);
+                    setModelTablePage(1);
+                  }}
+                  className="!w-full"
+                  prefix={<IconSearch />}
+                  showClear
+                />
+
+                <Button
+                  onClick={() => {
+                    if (selectedModelKeys.length === 0) {
+                      showError(t('请先选择模型！'));
+                      return;
+                    }
+                    copy(selectedModelKeys.join(',')).then((ok) => {
+                      if (ok) {
+                        showSuccess(t('已复制 ${count} 个模型').replace('${count}', selectedModelKeys.length));
+                      } else {
+                        showError(t('复制失败，请手动复制'));
+                      }
+                    });
+                  }}
+                >
+                  {t('复制已选')}
+                </Button>
+
+                <Button
+                  type='tertiary'
+                  onClick={() => {
+                    if (!currentTestChannel) return;
+                    const successKeys = currentTestChannel.models
+                      .split(',')
+                      .filter((m) => m.toLowerCase().includes(modelSearchKeyword.toLowerCase()))
+                      .filter((m) => {
+                        const result = modelTestResults[`${currentTestChannel.id}-${m}`];
+                        return result && result.success;
+                      });
+                    if (successKeys.length === 0) {
+                      showInfo(t('暂无成功模型'));
+                    }
+                    setSelectedModelKeys(successKeys);
+                  }}
+                >
+                  {t('选择成功')}
+                </Button>
+              </div>
              <Table
                columns={[
                  {
@@ -2197,8 +2159,7 @@ const ChannelsTable = () => {
                      const isTesting = testingModels.has(record.model);
                      return (
                        <Button
-                          theme='light'
-                          type='primary'
+                          type='tertiary'
                          onClick={() => testChannel(currentTestChannel, record.model)}
                          loading={isTesting}
                          size='small'
--- a/web/src/components/table/LogsTable.js
+++ b/web/src/components/table/LogsTable.js
@@ -697,22 +697,13 @@ const LogsTable = () => {
        onCancel={() => setShowColumnSelector(false)}
        footer={
          <div className='flex justify-end'>
-            <Button
-              theme='light'
-              onClick={() => initDefaultColumns()}
-            >
+            <Button onClick={() => initDefaultColumns()}>
              {t('重置')}
            </Button>
-            <Button
-              theme='light'
-              onClick={() => setShowColumnSelector(false)}
-            >
+            <Button onClick={() => setShowColumnSelector(false)}>
              {t('取消')}
            </Button>
-            <Button
-              type='primary'
-              onClick={() => setShowColumnSelector(false)}
-            >
+            <Button onClick={() => setShowColumnSelector(false)}>
              {t('确定')}
            </Button>
          </div>
@@ -1222,7 +1213,7 @@ const LogsTable = () => {
                    style={{
                      fontWeight: 500,
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-                      padding: 15,
+                      padding: 13,
                    }}
                    className='!rounded-lg'
                  >
@@ -1233,7 +1224,7 @@ const LogsTable = () => {
                    style={{
                      fontWeight: 500,
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-                      padding: 15,
+                      padding: 13,
                    }}
                    className='!rounded-lg'
                  >
@@ -1245,7 +1236,7 @@ const LogsTable = () => {
                      border: 'none',
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
                      fontWeight: 500,
-                      padding: 15,
+                      padding: 13,
                    }}
                    className='!rounded-lg'
                  >
@@ -1254,8 +1245,7 @@ const LogsTable = () => {
                </Space>

                <Button
-                  theme='light'
-                  type='secondary'
+                  type='tertiary'
                  className="w-full md:w-auto"
                  onClick={() => setCompactMode(!compactMode)}
                  size="small"
@@ -1384,7 +1374,7 @@ const LogsTable = () => {

                  <div className='flex gap-2 w-full sm:w-auto justify-end'>
                    <Button
-                      type='primary'
+                      type='tertiary'
                      htmlType='submit'
                      loading={loading}
                      size="small"
@@ -1392,7 +1382,7 @@ const LogsTable = () => {
                      {t('查询')}
                    </Button>
                    <Button
-                      theme='light'
+                      type='tertiary'
                      onClick={() => {
                        if (formApi) {
                          formApi.reset();
@@ -1407,7 +1397,6 @@ const LogsTable = () => {
                      {t('重置')}
                    </Button>
                    <Button
-                      theme='light'
                      type='tertiary'
                      onClick={() => setShowColumnSelector(true)}
                      size="small"
--- a/web/src/components/table/MjLogsTable.js
+++ b/web/src/components/table/MjLogsTable.js
@@ -741,22 +741,13 @@ const LogsTable = () => {
        onCancel={() => setShowColumnSelector(false)}
        footer={
          <div className="flex justify-end">
-            <Button
-              theme="light"
-              onClick={() => initDefaultColumns()}
-            >
+            <Button onClick={() => initDefaultColumns()}>
              {t('重置')}
            </Button>
-            <Button
-              theme="light"
-              onClick={() => setShowColumnSelector(false)}
-            >
+            <Button onClick={() => setShowColumnSelector(false)}>
              {t('取消')}
            </Button>
-            <Button
-              type='primary'
-              onClick={() => setShowColumnSelector(false)}
-            >
+            <Button onClick={() => setShowColumnSelector(false)}>
              {t('确定')}
            </Button>
          </div>
@@ -831,8 +822,7 @@ const LogsTable = () => {
                  )}
                </div>
                <Button
-                  theme='light'
-                  type='secondary'
+                  type='tertiary'
                  className="w-full md:w-auto"
                  onClick={() => setCompactMode(!compactMode)}
                  size="small"
@@ -897,7 +887,7 @@ const LogsTable = () => {
                    <div></div>
                    <div className="flex gap-2">
                      <Button
-                        type='primary'
+                        type='tertiary'
                        htmlType='submit'
                        loading={loading}
                        size="small"
@@ -905,7 +895,7 @@ const LogsTable = () => {
                        {t('查询')}
                      </Button>
                      <Button
-                        theme='light'
+                        type='tertiary'
                        onClick={() => {
                          if (formApi) {
                            formApi.reset();
@@ -920,7 +910,6 @@ const LogsTable = () => {
                        {t('重置')}
                      </Button>
                      <Button
-                        theme='light'
                        type='tertiary'
                        onClick={() => setShowColumnSelector(true)}
                        size="small"
--- a/web/src/components/table/RedemptionsTable.js
+++ b/web/src/components/table/RedemptionsTable.js
@@ -139,6 +139,7 @@ const RedemptionsTable = () => {
      title: '',
      dataIndex: 'operate',
      fixed: 'right',
+      width: 205,
      render: (text, record, index) => {
        // 创建更多操作的下拉菜单项
        const moreMenuItems = [
@@ -191,7 +192,6 @@ const RedemptionsTable = () => {
          <Space>
            <Popover content={record.key} style={{ padding: 20 }} position='top'>
              <Button
-                theme='light'
                type='tertiary'
                size="small"
              >
@@ -199,8 +199,6 @@ const RedemptionsTable = () => {
              </Button>
            </Popover>
            <Button
-              theme='light'
-              type='secondary'
              size="small"
              onClick={async () => {
                await copyText(record.key);
@@ -209,7 +207,6 @@ const RedemptionsTable = () => {
              {t('复制')}
            </Button>
            <Button
-              theme='light'
              type='tertiary'
              size="small"
              onClick={() => {
@@ -226,7 +223,6 @@ const RedemptionsTable = () => {
              menu={moreMenuItems}
            >
              <Button
-                theme='light'
                type='tertiary'
                size="small"
                icon={<IconMore />}
@@ -435,8 +431,7 @@ const RedemptionsTable = () => {
            <Text>{t('兑换码可以批量生成和分发，适合用于推广活动或批量充值。')}</Text>
          </div>
          <Button
-            theme='light'
-            type='secondary'
+            type='tertiary'
            className="w-full md:w-auto"
            onClick={() => setCompactMode(!compactMode)}
            size="small"
@@ -452,7 +447,6 @@ const RedemptionsTable = () => {
        <div className="flex flex-col sm:flex-row gap-2 w-full md:w-auto order-2 md:order-1">
          <div className="flex gap-2 w-full sm:w-auto">
            <Button
-              theme='light'
              type='primary'
              className="w-full sm:w-auto"
              onClick={() => {
@@ -466,7 +460,7 @@ const RedemptionsTable = () => {
              {t('添加兑换码')}
            </Button>
            <Button
-              type='warning'
+              type='tertiary'
              className="w-full sm:w-auto"
              onClick={async () => {
                if (selectedKeys.length === 0) {
@@ -539,7 +533,7 @@ const RedemptionsTable = () => {
            </div>
            <div className="flex gap-2 w-full md:w-auto">
              <Button
-                type="primary"
+                type="tertiary"
                htmlType="submit"
                loading={loading || searching}
                className="flex-1 md:flex-initial md:w-auto"
@@ -548,7 +542,7 @@ const RedemptionsTable = () => {
                {t('查询')}
              </Button>
              <Button
-                theme="light"
+                type="tertiary"
                onClick={() => {
                  if (formApi) {
                    formApi.reset();
--- a/web/src/components/table/TaskLogsTable.js
+++ b/web/src/components/table/TaskLogsTable.js
@@ -595,22 +595,13 @@ const LogsTable = () => {
        onCancel={() => setShowColumnSelector(false)}
        footer={
          <div className="flex justify-end">
-            <Button
-              theme="light"
-              onClick={() => initDefaultColumns()}
-            >
+            <Button onClick={() => initDefaultColumns()}>
              {t('重置')}
            </Button>
-            <Button
-              theme="light"
-              onClick={() => setShowColumnSelector(false)}
-            >
+            <Button onClick={() => setShowColumnSelector(false)}>
              {t('取消')}
            </Button>
-            <Button
-              type='primary'
-              onClick={() => setShowColumnSelector(false)}
-            >
+            <Button onClick={() => setShowColumnSelector(false)}>
              {t('确定')}
            </Button>
          </div>
@@ -667,8 +658,7 @@ const LogsTable = () => {
                  <Text>{t('任务记录')}</Text>
                </div>
                <Button
-                  theme='light'
-                  type='secondary'
+                  type='tertiary'
                  className="w-full md:w-auto"
                  onClick={() => setCompactMode(!compactMode)}
                  size="small"
@@ -733,7 +723,7 @@ const LogsTable = () => {
                    <div></div>
                    <div className="flex gap-2">
                      <Button
-                        type='primary'
+                        type='tertiary'
                        htmlType='submit'
                        loading={loading}
                        size="small"
@@ -741,7 +731,7 @@ const LogsTable = () => {
                        {t('查询')}
                      </Button>
                      <Button
-                        theme='light'
+                        type='tertiary'
                        onClick={() => {
                          if (formApi) {
                            formApi.reset();
@@ -756,7 +746,6 @@ const LogsTable = () => {
                        {t('重置')}
                      </Button>
                      <Button
-                        theme='light'
                        type='tertiary'
                        onClick={() => setShowColumnSelector(true)}
                        size="small"
--- a/web/src/components/table/TokensTable.js
+++ b/web/src/components/table/TokensTable.js
@@ -372,9 +372,8 @@ const TokensTable = () => {
              aria-label={t('项目操作按钮组')}
            >
              <Button
-                theme='light'
                size="small"
-                style={{ color: 'rgba(var(--semi-teal-7), 1)' }}
+                type='tertiary'
                onClick={() => {
                  if (chatsArray.length === 0) {
                    showError(t('请联系管理员配置聊天链接'));
@@ -395,11 +394,7 @@ const TokensTable = () => {
                menu={chatsArray}
              >
                <Button
-                  style={{
-                    padding: '4px 4px',
-                    color: 'rgba(var(--semi-teal-7), 1)',
-                  }}
-                  type='primary'
+                  type='tertiary'
                  icon={<IconTreeTriangleDown />}
                  size="small"
                ></Button>
@@ -407,7 +402,6 @@ const TokensTable = () => {
            </SplitButtonGroup>

            <Button
-              theme='light'
              type='tertiary'
              size="small"
              onClick={() => {
@@ -419,7 +413,6 @@ const TokensTable = () => {
            </Button>

            <Button
-              theme='light'
              type='danger'
              size="small"
              onClick={() => {
@@ -705,8 +698,7 @@ const TokensTable = () => {
            <Text>{t('令牌用于API访问认证，可以设置额度限制和模型权限。')}</Text>
          </div>
          <Button
-            theme="light"
-            type="secondary"
+            type="tertiary"
            className="w-full md:w-auto"
            onClick={() => setCompactMode(!compactMode)}
            size="small"
@@ -721,7 +713,6 @@ const TokensTable = () => {
      <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
        <div className="flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1">
          <Button
-            theme="light"
            type="primary"
            className="flex-1 md:flex-initial"
            onClick={() => {
@@ -735,8 +726,7 @@ const TokensTable = () => {
            {t('添加令牌')}
          </Button>
          <Button
-            theme="light"
-            type="warning"
+            type='tertiary'
            className="flex-1 md:flex-initial"
            onClick={() => {
              if (selectedKeys.length === 0) {
@@ -750,8 +740,7 @@ const TokensTable = () => {
                footer: (
                  <Space>
                    <Button
-                      type="primary"
-                      theme="solid"
+                      type='tertiary'
                      onClick={async () => {
                        let content = '';
                        for (let i = 0; i < selectedKeys.length; i++) {
@@ -765,7 +754,6 @@ const TokensTable = () => {
                      {t('名称+密钥')}
                    </Button>
                    <Button
-                      theme="light"
                      onClick={async () => {
                        let content = '';
                        for (let i = 0; i < selectedKeys.length; i++) {
@@ -786,8 +774,7 @@ const TokensTable = () => {
            {t('复制所选令牌')}
          </Button>
          <Button
-            theme="light"
-            type="danger"
+            type='danger'
            className="w-full md:w-auto"
            onClick={() => {
              if (selectedKeys.length === 0) {
@@ -844,7 +831,7 @@ const TokensTable = () => {
            </div>
            <div className="flex gap-2 w-full md:w-auto">
              <Button
-                type="primary"
+                type="tertiary"
                htmlType="submit"
                loading={loading || searching}
                className="flex-1 md:flex-initial md:w-auto"
@@ -853,7 +840,7 @@ const TokensTable = () => {
                {t('查询')}
              </Button>
              <Button
-                theme="light"
+                type='tertiary'
                onClick={() => {
                  if (formApi) {
                    formApi.reset();
--- a/web/src/components/table/UsersTable.js
+++ b/web/src/components/table/UsersTable.js
@@ -287,7 +287,6 @@ const UsersTable = () => {
        return (
          <Space>
            <Button
-              theme='light'
              type='tertiary'
              size="small"
              onClick={() => {
@@ -303,7 +302,6 @@ const UsersTable = () => {
              menu={moreMenuItems}
            >
              <Button
-                theme='light'
                type='tertiary'
                size="small"
                icon={<IconMore />}
@@ -525,8 +523,7 @@ const UsersTable = () => {
            <Text>{t('用户管理页面，可以查看和管理所有注册用户的信息、权限和状态。')}</Text>
          </div>
          <Button
-            theme='light'
-            type='secondary'
+            type='tertiary'
            className="w-full md:w-auto"
            onClick={() => setCompactMode(!compactMode)}
            size="small"
@@ -541,8 +538,6 @@ const UsersTable = () => {
      <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">
          <Button
-            theme='light'
-            type='primary'
            className="w-full md:w-auto"
            onClick={() => {
              setShowAddUser(true);
@@ -598,7 +593,7 @@ const UsersTable = () => {
            </div>
            <div className="flex gap-2 w-full md:w-auto">
              <Button
-                type="primary"
+                type="tertiary"
                htmlType="submit"
                loading={loading || searching}
                className="flex-1 md:flex-initial md:w-auto"
@@ -607,7 +602,7 @@ const UsersTable = () => {
                {t('查询')}
              </Button>
              <Button
-                theme="light"
+                type='tertiary'
                onClick={() => {
                  if (formApi) {
                    formApi.reset();
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -53,18 +53,18 @@ import {

 // 侧边栏图标颜色映射
 export const sidebarIconColors = {
-  dashboard: '#4F46E5', // 紫蓝色
+  dashboard: '#10B981', // 绿色
  terminal: '#10B981', // 绿色
  message: '#06B6D4', // 青色
  key: '#3B82F6', // 蓝色
-  chart: '#8B5CF6', // 紫色
+  chart: '#F59E0B', // 琥珀色
  image: '#EC4899', // 粉色
  check: '#F59E0B', // 琥珀色
  credit: '#F97316', // 橙色
  layers: '#EF4444', // 红色
  gift: '#F43F5E', // 玫红色
-  user: '#6366F1', // 靛蓝色
-  settings: '#6B7280', // 灰色
+  user: '#10B981', // 绿色
+  settings: '#F97316', // 橙色
 };

 // 获取侧边栏Lucide图标组件
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -59,6 +59,11 @@ code {

 .semi-navigation-item {
  margin-bottom: 4px !important;
+  padding: 4px 12px !important;
+}
+
+.semi-navigation-sub-title {
+  padding: 0 !important;
 }

 .semi-navigation-item-icon {
@@ -70,6 +75,7 @@ code {
  margin-right: 0;
 }

+.semi-navigation-item,
 .semi-navigation-sub-title {
  height: 100% !important;
 }