refactor: improve UI responsiveness in settings components and refactor scrollbar hiding class.

app/styles/base.css

@@ -94,12 +94,14 @@ select:focus-visible {
     border-width: 0;
 }
 
-.scrollbar-hide {
+.scrollbar-hide,
+.no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
 
-.scrollbar-hide::-webkit-scrollbar {
+.scrollbar-hide::-webkit-scrollbar,
+.no-scrollbar::-webkit-scrollbar {
     display: none;
 }
 

components/settings/SourceSettings.tsx

@@ -61,7 +61,7 @@ export function SourceSettings({
         <div className="bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] shadow-[var(--shadow-sm)] p-6 mb-6">
             <div className="flex items-center justify-between mb-4">
                 <h2 className="text-xl font-semibold text-[var(--text-color)]">视频源管理</h2>
-                <div className="flex gap-2">
+                <div className="flex gap-2 flex-wrap">
                     <button
                         onClick={onRestoreDefaults}
                         className="px-4 py-2 rounded-[var(--radius-2xl)] bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] text-sm font-medium hover:bg-[color-mix(in_srgb,var(--accent-color)_10%,transparent)] transition-all duration-200 cursor-pointer"

components/settings/UserDanmakuSettings.tsx

@@ -56,7 +56,7 @@ export function UserDanmakuSettings() {
       <div className="space-y-4">
         {/* Add form */}
         <form onSubmit={handleAdd} className="space-y-3">
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-wrap">
             <input
               type="text"
               placeholder="API 名称"
@@ -89,13 +89,11 @@ export function UserDanmakuSettings() {
           {/* System default option */}
           <button
             onClick={() => userSourcesStore.setActiveDanmakuApi(null)}
-            className={`w-full flex items-center gap-3 px-4 py-2.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] text-left transition-all cursor-pointer ${
-              activeId === null ? 'border-[var(--accent-color)] bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'border-[var(--glass-border)]'
-            }`}
+            className={`w-full flex items-center gap-3 px-4 py-2.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] text-left transition-all cursor-pointer ${activeId === null ? 'border-[var(--accent-color)] bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'border-[var(--glass-border)]'
+              }`}
           >
-            <span className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
-              activeId === null ? 'border-[var(--accent-color)]' : 'border-[var(--glass-border)]'
-            }`}>
+            <span className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${activeId === null ? 'border-[var(--accent-color)]' : 'border-[var(--glass-border)]'
+              }`}>
               {activeId === null && <span className="w-2 h-2 rounded-full bg-[var(--accent-color)]" />}
             </span>
             <div className="min-w-0">
@@ -112,16 +110,14 @@ export function UserDanmakuSettings() {
           </button>
 
           {apis.map(api => (
-            <div key={api.id} className={`flex items-center gap-3 px-4 py-2.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] ${
-              activeId === api.id ? 'border-[var(--accent-color)] bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'border-[var(--glass-border)]'
-            }`}>
+            <div key={api.id} className={`flex items-center gap-3 px-4 py-2.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] ${activeId === api.id ? 'border-[var(--accent-color)] bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'border-[var(--glass-border)]'
+              }`}>
               <button
                 onClick={() => userSourcesStore.setActiveDanmakuApi(api.id)}
                 className="flex items-center gap-3 flex-1 min-w-0 text-left cursor-pointer"
               >
-                <span className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
-                  activeId === api.id ? 'border-[var(--accent-color)]' : 'border-[var(--glass-border)]'
-                }`}>
+                <span className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${activeId === api.id ? 'border-[var(--accent-color)]' : 'border-[var(--glass-border)]'
+                  }`}>
                   {activeId === api.id && <span className="w-2 h-2 rounded-full bg-[var(--accent-color)]" />}
                 </span>
                 <div className="min-w-0">

components/settings/import/ImportModalTabs.tsx

@@ -15,7 +15,7 @@ export function ImportModalTabs({ activeTab, onTabChange }: ImportModalTabsProps
 
     return (
         <div className="relative mb-6">
-            <div className="flex border-b border-[var(--glass-border)] relative overflow-x-auto whitespace-nowrap scrollbar-hide w-full">
+            <div className="flex border-b border-[var(--glass-border)] relative overflow-x-auto whitespace-nowrap no-scrollbar w-full">
                 {tabs.map((tab) => (
                     <button
                         key={tab.id}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "kvideo",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kvideo",
-      "version": "4.4.5",
+      "version": "4.4.6",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kvideo",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "private": true,
   "scripts": {
     "dev": "next dev",