style(webui): 优化插件商店样式，使用固定头部 (#1585)

* fix: 修复 qq_login.tsx 类型错误

- onSelectionChange 的 key 参数可能为 null，添加空值检查

* style(webui): refactor plugin store layout with sticky header

packages/napcat-webui-frontend/src/pages/dashboard/plugin_store.tsx

@@ -9,6 +9,7 @@ import toast from 'react-hot-toast';
 import { IoMdRefresh, IoMdSearch, IoMdSettings } from 'react-icons/io';
 import clsx from 'clsx';
 import { EventSourcePolyfill } from 'event-source-polyfill';
+import { useLocalStorage } from '@uidotdev/usehooks';
 
 import PluginStoreCard, { InstallStatus } from '@/components/display_card/plugin_store_card';
 import PluginManager, { PluginItem } from '@/controllers/plugin_manager';
@@ -226,12 +227,22 @@ export default function PluginStorePage () {
     }
   };
 
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
   return (
     <>
       <title>插件商店 - NapCat WebUI</title>
       <div className="p-2 md:p-4 relative">
+        {/* 固定头部区域 */}
+        <div className={clsx(
+          'sticky top-14 z-10 backdrop-blur-sm py-4 px-4 rounded-sm mb-4 -mx-2 md:-mx-4 -mt-2 md:-mt-4 transition-colors',
+          hasBackground
+            ? 'bg-white/20 dark:bg-black/10'
+            : 'bg-transparent'
+        )}>
           {/* 头部 */}
-        <div className="flex mb-6 items-center justify-between flex-wrap gap-4">
+          <div className="flex mb-4 items-center justify-between flex-wrap gap-4">
             <div className="flex items-center gap-4">
               <h1 className="text-2xl font-bold">插件商店</h1>
               <Button
@@ -269,7 +280,7 @@ export default function PluginStorePage () {
           </div>
 
           {/* 搜索框 */}
-        <div className="mb-6">
+          <div className="mb-4">
             <Input
               placeholder="搜索插件名称、描述、作者或标签..."
               startContent={<IoMdSearch className="text-default-400" />}
@@ -279,15 +290,7 @@ export default function PluginStorePage () {
             />
           </div>
 
-        {/* 标签页 */}
+          {/* 标签页导航 */}
-        <div className="relative">
-          {/* 加载遮罩 - 只遮住插件列表区域 */}
-          {loading && (
-            <div className="absolute inset-0 bg-zinc-500/10 z-30 flex justify-center items-center backdrop-blur-sm rounded-lg">
-              <Spinner size='lg' />
-            </div>
-          )}
-
           <Tabs
             aria-label="Plugin Store Categories"
             className="max-w-full"
@@ -296,16 +299,30 @@ export default function PluginStorePage () {
             classNames={{
               tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md',
               cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
+              panel: 'hidden',
             }}
           >
             {tabs.map((tab) => (
               <Tab
                 key={tab.key}
                 title={`${tab.title} (${tab.count})`}
-              >
+              />
-                <EmptySection isEmpty={!categorizedPlugins[tab.key]?.length} />
+            ))}
+          </Tabs>
+        </div>
+
+        {/* 插件列表区域 */}
+        <div className="relative">
+          {/* 加载遮罩 - 只遮住插件列表区域 */}
+          {loading && (
+            <div className="absolute inset-0 bg-zinc-500/10 z-30 flex justify-center items-center backdrop-blur-sm rounded-lg">
+              <Spinner size='lg' />
+            </div>
+          )}
+
+          <EmptySection isEmpty={!categorizedPlugins[activeTab]?.length} />
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-start items-stretch gap-x-2 gap-y-4">
-                  {categorizedPlugins[tab.key]?.map((plugin) => {
+            {categorizedPlugins[activeTab]?.map((plugin) => {
               const installInfo = getPluginInstallInfo(plugin);
               return (
                 <PluginStoreCard
@@ -318,9 +335,6 @@ export default function PluginStorePage () {
               );
             })}
           </div>
-              </Tab>
-            ))}
-          </Tabs>
         </div>
       </div>