diff --git a/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx b/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx
index 2983c901..4c31de2b 100644
--- a/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx
+++ b/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx
@@ -14,6 +14,7 @@ const ItemRoot = styled.div`
     text-align: center;
     font-weight: bold;
     line-height: 44px;
+    text-wrap: nowrap;
   }
 `;
 
diff --git a/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx b/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx
index 08f2522a..7259abfa 100644
--- a/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx
+++ b/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Translate } from '../translate';
 import { OfficialGachaIndex, OfficialGachaType, util } from 'genshin-gacha-kit';
 import { useAsync } from '@capital/common';
-import { PillTabs, PillTabPane, LoadingSpinner } from '@capital/component';
+import { PillTabs, LoadingSpinner } from '@capital/component';
 import { GachaPool } from './GachaPool';
 import _groupBy from 'lodash/groupBy';
 import './index.less';
@@ -32,16 +32,13 @@ const GenshinPanel: React.FC = React.memo(() => {
 
       {loading && <LoadingSpinner />}
 
-      <PillTabs>
-        {(gachaList ?? []).map((item) => (
-          <PillTabPane
-            key={item.gacha_id}
-            tab={`${item.gacha_name}(${item.begin_time} - ${item.end_time})`}
-          >
-            <GachaPool gachaId={item.gacha_id} />
-          </PillTabPane>
-        ))}
-      </PillTabs>
+      <PillTabs
+        items={(gachaList ?? []).map((item) => ({
+          key: String(item.gacha_id),
+          label: `${item.gacha_name}(${item.begin_time} - ${item.end_time})`,
+          children: <GachaPool gachaId={item.gacha_id} />,
+        }))}
+      />
     </div>
   );
 });
diff --git a/client/web/src/components/PillTabs.tsx b/client/web/src/components/PillTabs.tsx
index dd9d2cfd..9a30968d 100644
--- a/client/web/src/components/PillTabs.tsx
+++ b/client/web/src/components/PillTabs.tsx
@@ -5,11 +5,7 @@ import './PillTabs.less';
 
 /**
  * @example
- * <PillTabs>
- *  <PillTabPane key="1" tab={t('全部')}>
- *    ...
- *  </PillTabPane>
- * </PillTabs>
+ * <PillTabs items={[...]} />
  */
 export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
   return (
@@ -20,4 +16,7 @@ export const PillTabs: React.FC<TabsProps> = React.memo((props) => {
 });
 PillTabs.displayName = 'PillTabs';
 
+/**
+ * @deprecated
+ */
 export const PillTabPane = Tabs.TabPane;
diff --git a/client/web/src/components/modals/GroupDetail/Role/index.tsx b/client/web/src/components/modals/GroupDetail/Role/index.tsx
index 21814615..ae5dffb1 100644
--- a/client/web/src/components/modals/GroupDetail/Role/index.tsx
+++ b/client/web/src/components/modals/GroupDetail/Role/index.tsx
@@ -1,5 +1,5 @@
 import { Loading } from '@/components/Loading';
-import { PillTabPane, PillTabs } from '@/components/PillTabs';
+import { PillTabs } from '@/components/PillTabs';
 import { AllPermission } from 'tailchat-shared';
 import React, { useMemo, useState } from 'react';
 import { t, useGroupInfo } from 'tailchat-shared';
@@ -61,44 +61,57 @@ export const GroupRole: React.FC<GroupPermissionProps> = React.memo((props) => {
         </div>
 
         <div className="flex-1 overflow-y-auto">
-          <PillTabs defaultActiveKey="permission">
-            <PillTabPane
-              key="summary"
-              tab={t('概述')}
-              disabled={roleId === AllPermission}
-            >
-              {currentRoleInfo && (
-                <RoleSummary
-                  currentRoleInfo={currentRoleInfo}
-                  onChangeRoleName={handleChangeRoleName}
-                  onDeleteRole={async () => {
-                    await handleDeleteRole();
-                    setRoleId(AllPermission); // 删除身份组后切换到所有人
-                  }}
-                />
-              )}
-            </PillTabPane>
-            <PillTabPane key="permission" tab={t('权限')}>
-              <RolePermission
-                roleId={roleId}
-                fallbackPermissions={groupInfo?.fallbackPermissions ?? []}
-                currentRoleInfo={currentRoleInfo}
-                onSavePermission={handleSavePermission}
-              />
-            </PillTabPane>
-            <PillTabPane
-              key="member"
-              tab={t('管理成员')}
-              disabled={roleId === AllPermission}
-            >
-              {currentRoleInfo && (
-                <RoleMember
-                  groupId={groupId}
-                  currentRoleInfo={currentRoleInfo}
-                />
-              )}
-            </PillTabPane>
-          </PillTabs>
+          <PillTabs
+            defaultActiveKey="permission"
+            items={[
+              {
+                key: 'summary',
+                label: t('概述'),
+                disabled: roleId === AllPermission,
+                children: (
+                  <>
+                    {currentRoleInfo && (
+                      <RoleSummary
+                        currentRoleInfo={currentRoleInfo}
+                        onChangeRoleName={handleChangeRoleName}
+                        onDeleteRole={async () => {
+                          await handleDeleteRole();
+                          setRoleId(AllPermission); // 删除身份组后切换到所有人
+                        }}
+                      />
+                    )}
+                  </>
+                ),
+              },
+              {
+                key: 'permission',
+                label: t('权限'),
+                children: (
+                  <RolePermission
+                    roleId={roleId}
+                    fallbackPermissions={groupInfo?.fallbackPermissions ?? []}
+                    currentRoleInfo={currentRoleInfo}
+                    onSavePermission={handleSavePermission}
+                  />
+                ),
+              },
+              {
+                key: 'member',
+                label: t('管理成员'),
+                disabled: roleId === AllPermission,
+                children: (
+                  <>
+                    {currentRoleInfo && (
+                      <RoleMember
+                        groupId={groupId}
+                        currentRoleInfo={currentRoleInfo}
+                      />
+                    )}
+                  </>
+                ),
+              },
+            ]}
+          />
         </div>
       </div>
     </Loading>
diff --git a/client/web/src/plugin/PluginStore/index.tsx b/client/web/src/plugin/PluginStore/index.tsx
index b946d849..704ebc80 100644
--- a/client/web/src/plugin/PluginStore/index.tsx
+++ b/client/web/src/plugin/PluginStore/index.tsx
@@ -44,60 +44,74 @@ export const PluginStore: React.FC = React.memo(() => {
 
   return (
     <div className="p-2 w-full">
-      <PillTabs>
-        <PillTabPane key="1" tab={t('已安装')}>
-          <Divider orientation="left">{t('已安装')}</Divider>
+      <PillTabs
+        items={[
+          {
+            key: '1',
+            label: t('已安装'),
+            children: (
+              <>
+                <Divider orientation="left">{t('已安装')}</Divider>
 
-          <div className="flex flex-wrap">
-            {_uniqBy([...builtinPlugins, ...installedPluginList], 'name').map(
-              (plugin) => (
-                <PluginStoreItem
-                  key={plugin.name}
-                  manifest={plugin}
-                  installed={true}
-                  builtin={builtinPluginNameList.includes(plugin.name)}
-                />
-              )
-            )}
-          </div>
-        </PillTabPane>
+                <div className="flex flex-wrap">
+                  {_uniqBy(
+                    [...builtinPlugins, ...installedPluginList],
+                    'name'
+                  ).map((plugin) => (
+                    <PluginStoreItem
+                      key={plugin.name}
+                      manifest={plugin}
+                      installed={true}
+                      builtin={builtinPluginNameList.includes(plugin.name)}
+                    />
+                  ))}
+                </div>
+              </>
+            ),
+          },
+          {
+            key: '2',
+            label: t('全部'),
+            children: (
+              <>
+                <Divider orientation="left">{t('内置插件')}</Divider>
 
-        <PillTabPane key="2" tab={t('全部')}>
-          <Divider orientation="left">{t('内置插件')}</Divider>
+                <div className="flex flex-wrap">
+                  {builtinPlugins.map((plugin) => (
+                    <PluginStoreItem
+                      key={plugin.name}
+                      manifest={plugin}
+                      installed={installedPluginNameList.includes(plugin.name)}
+                      builtin={true}
+                    />
+                  ))}
+                </div>
 
-          <div className="flex flex-wrap">
-            {builtinPlugins.map((plugin) => (
-              <PluginStoreItem
-                key={plugin.name}
-                manifest={plugin}
-                installed={installedPluginNameList.includes(plugin.name)}
-                builtin={true}
-              />
-            ))}
-          </div>
+                <Divider orientation="left">{t('插件中心')}</Divider>
 
-          <Divider orientation="left">{t('插件中心')}</Divider>
-
-          <div className="flex flex-wrap">
-            {allPlugins
-              .filter((p) => !builtinPluginNameList.includes(p.name)) // 插件中心只显示不包含内置插件的插件
-              .map((plugin) => (
-                <PluginStoreItem
-                  key={plugin.name}
-                  manifest={plugin}
-                  installed={installedPluginNameList.includes(plugin.name)}
-                />
-              ))}
-          </div>
-        </PillTabPane>
-
-        <PillTabPane
-          tab={<span className="text-green-400">{t('手动安装')}</span>}
-          key="3"
-        >
-          <ManualInstall />
-        </PillTabPane>
-      </PillTabs>
+                <div className="flex flex-wrap">
+                  {allPlugins
+                    .filter((p) => !builtinPluginNameList.includes(p.name)) // 插件中心只显示不包含内置插件的插件
+                    .map((plugin) => (
+                      <PluginStoreItem
+                        key={plugin.name}
+                        manifest={plugin}
+                        installed={installedPluginNameList.includes(
+                          plugin.name
+                        )}
+                      />
+                    ))}
+                </div>
+              </>
+            ),
+          },
+          {
+            key: '3',
+            label: <span className="text-green-400">{t('手动安装')}</span>,
+            children: <ManualInstall />,
+          },
+        ]}
+      />
     </div>
   );
 });
diff --git a/client/web/src/routes/Main/Content/Inbox/Sidebar.tsx b/client/web/src/routes/Main/Content/Inbox/Sidebar.tsx
index 5f078d35..654b45e5 100644
--- a/client/web/src/routes/Main/Content/Inbox/Sidebar.tsx
+++ b/client/web/src/routes/Main/Content/Inbox/Sidebar.tsx
@@ -136,14 +136,20 @@ export const InboxSidebar: React.FC = React.memo(() => {
       </SectionHeader>
 
       <div className="overflow-hidden">
-        <PillTabs>
-          <PillTabPane key="1" tab={`${t('全部')}`}>
-            {fullList.map((item) => renderInbox(item))}
-          </PillTabPane>
-          <PillTabPane key="2" tab={`${t('未读')} (${unreadList.length})`}>
-            {unreadList.map((item) => renderInbox(item))}
-          </PillTabPane>
-        </PillTabs>
+        <PillTabs
+          items={[
+            {
+              key: '1',
+              label: `${t('全部')}`,
+              children: <>{fullList.map((item) => renderInbox(item))}</>,
+            },
+            {
+              key: '2',
+              label: `${t('未读')} (${unreadList.length})`,
+              children: <>{unreadList.map((item) => renderInbox(item))}</>,
+            },
+          ]}
+        />
       </div>
     </CommonSidebarWrapper>
   );
diff --git a/client/web/src/routes/Main/Content/Personal/Friends/index.tsx b/client/web/src/routes/Main/Content/Personal/Friends/index.tsx
index 9b93cd67..890bb470 100644
--- a/client/web/src/routes/Main/Content/Personal/Friends/index.tsx
+++ b/client/web/src/routes/Main/Content/Personal/Friends/index.tsx
@@ -1,11 +1,12 @@
 import React, { useCallback, useState } from 'react';
-import { PillTabPane, PillTabs } from '@/components/PillTabs';
+import { PillTabs } from '@/components/PillTabs';
 import { AddFriend } from './AddFriend';
 import { t, useAppSelector, useGlobalConfigStore } from 'tailchat-shared';
 import { RequestSend } from './RequestSend';
 import { RequestReceived } from './RequestReceived';
 import { FriendList } from './FriendList';
 import { Badge } from 'antd';
+import _compact from 'lodash/compact';
 
 /**
  * 主要内容组件
@@ -27,50 +28,50 @@ export const FriendPanel: React.FC = React.memo(() => {
 
   return (
     <div className="w-full">
-      <PillTabs activeKey={activeKey} onChange={setActiveKey}>
-        <PillTabPane tab={t('全部')} key="1">
-          <FriendList onSwitchToAddFriend={handleSwitchToAddFriend} />
-        </PillTabPane>
-
-        {!disableAddFriend && (
-          <>
-            <PillTabPane
-              tab={
-                <Badge
-                  className="text-black dark:text-white"
-                  size="small"
-                  count={send.length}
-                >
-                  {t('已发送')}
-                </Badge>
-              }
-              key="2"
-            >
-              <RequestSend requests={send} />
-            </PillTabPane>
-            <PillTabPane
-              tab={
-                <Badge
-                  className="text-black dark:text-white"
-                  size="small"
-                  count={received.length}
-                >
-                  {t('待处理')}
-                </Badge>
-              }
-              key="3"
-            >
-              <RequestReceived requests={received} />
-            </PillTabPane>
-            <PillTabPane
-              tab={<span className="text-green-400">{t('添加好友')}</span>}
-              key="add"
-            >
-              <AddFriend />
-            </PillTabPane>
-          </>
-        )}
-      </PillTabs>
+      <PillTabs
+        activeKey={activeKey}
+        onChange={setActiveKey}
+        items={_compact([
+          {
+            key: '1',
+            label: t('全部'),
+            children: (
+              <FriendList onSwitchToAddFriend={handleSwitchToAddFriend} />
+            ),
+          },
+          !disableAddFriend && {
+            key: '2',
+            label: (
+              <Badge
+                className="text-black dark:text-white"
+                size="small"
+                count={send.length}
+              >
+                {t('已发送')}
+              </Badge>
+            ),
+            children: <RequestSend requests={send} />,
+          },
+          !disableAddFriend && {
+            key: '3',
+            label: (
+              <Badge
+                className="text-black dark:text-white"
+                size="small"
+                count={received.length}
+              >
+                {t('待处理')}
+              </Badge>
+            ),
+            children: <RequestReceived requests={received} />,
+          },
+          !disableAddFriend && {
+            key: '4',
+            label: <span className="text-green-400">{t('添加好友')}</span>,
+            children: <AddFriend />,
+          },
+        ])}
+      />
     </div>
   );
 });
diff --git a/server/plugins/com.msgbyte.tasks/web/plugins/com.msgbyte.tasks/src/TasksPanel/index.tsx b/server/plugins/com.msgbyte.tasks/web/plugins/com.msgbyte.tasks/src/TasksPanel/index.tsx
index 026d0095..1b73f156 100644
--- a/server/plugins/com.msgbyte.tasks/web/plugins/com.msgbyte.tasks/src/TasksPanel/index.tsx
+++ b/server/plugins/com.msgbyte.tasks/web/plugins/com.msgbyte.tasks/src/TasksPanel/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useAsyncFn } from '@capital/common';
-import { PillTabs, PillTabPane } from '@capital/component';
+import { PillTabs } from '@capital/component';
 import type { TaskItemType } from './type';
 import { TaskItem } from './TaskItem';
 import { NewTask } from './NewTask';
@@ -25,27 +25,36 @@ const TasksPanel: React.FC = React.memo(() => {
 
       <NewTask onSuccess={fetch} />
 
-      <PillTabs>
-        <PillTabPane key={1} tab={Translate.undone}>
-          <div>
-            {tasks
-              .filter((t) => !t.done)
-              .map((task) => (
-                <TaskItem key={task._id} task={task} />
-              ))}
-          </div>
-        </PillTabPane>
-
-        <PillTabPane key={2} tab={Translate.done}>
-          <div>
-            {tasks
-              .filter((t) => t.done)
-              .map((task) => (
-                <TaskItem key={task._id} task={task} />
-              ))}
-          </div>
-        </PillTabPane>
-      </PillTabs>
+      <PillTabs
+        items={[
+          {
+            key: '1',
+            label: Translate.undone,
+            children: (
+              <div>
+                {tasks
+                  .filter((t) => !t.done)
+                  .map((task) => (
+                    <TaskItem key={task._id} task={task} />
+                  ))}
+              </div>
+            ),
+          },
+          {
+            key: '2',
+            label: Translate.done,
+            children: (
+              <div>
+                {tasks
+                  .filter((t) => t.done)
+                  .map((task) => (
+                    <TaskItem key={task._id} task={task} />
+                  ))}
+              </div>
+            ),
+          },
+        ]}
+      />
     </div>
   );
 });