style(ui): hide scrollbars across all browsers and optimize form layout

- Hide scrollbars globally with cross-browser support:
  * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none }
  * Firefox: scrollbar-width: none
  * IE 10+: -ms-overflow-style: none
- Remove custom scrollbar styling (width, colors, hover states)
- Reorganize BasicFormFields layout:
  * Move icon picker to top center as a clickable preview (80x80)
  * Change name and notes fields to horizontal grid layout (md:grid-cols-2)
  * Remove icon preview section from bottom
  * Improve visual hierarchy and space efficiency

This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality.

src/components/providers/forms/BasicFormFields.tsx

@@ -45,74 +45,22 @@ export function BasicFormFields({ form }: BasicFormFieldsProps) {
 
   return (
     <>
-      <FormField
+      {/* 图标选择区域 - 顶部居中，可选 */}
-        control={form.control}
+      <div className="flex justify-center mb-6">
-        name="name"
+        <Dialog open={iconDialogOpen} onOpenChange={setIconDialogOpen}>
-        render={({ field }) => (
+          <DialogTrigger asChild>
-          <FormItem>
+            <button
-            <FormLabel>{t("provider.name")}</FormLabel>
+              type="button"
-            <FormControl>
+              className="w-20 h-20 p-3 rounded-xl border-2 border-gray-300 dark:border-gray-600 hover:border-primary dark:hover:border-primary transition-colors cursor-pointer bg-gray-50 dark:bg-gray-800/50 flex items-center justify-center"
-              <Input {...field} placeholder={t("provider.namePlaceholder")} />
+              title={currentIcon ? "点击更换图标" : "点击选择图标"}
-            </FormControl>
+            >
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      <FormField
-        control={form.control}
-        name="websiteUrl"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t("provider.websiteUrl")}</FormLabel>
-            <FormControl>
-              <Input {...field} placeholder="https://" />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      <FormField
-        control={form.control}
-        name="notes"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t("provider.notes")}</FormLabel>
-            <FormControl>
-              <Input {...field} placeholder={t("provider.notesPlaceholder")} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      {/* 图标配置 */}
-      <div className="space-y-3">
-        <FormLabel>
-          {t("providerIcon.label", { defaultValue: "图标" })}
-        </FormLabel>
-
-        {/* 图标预览 */}
-        <div className="flex items-center gap-4 p-4 rounded-lg bg-muted">
               <ProviderIcon
                 icon={currentIcon}
                 name={providerName}
                 color={effectiveIconColor}
                 size={48}
               />
-          <div className="flex-1">
+            </button>
-            <p className="font-medium">{providerName}</p>
-            <p className="text-sm text-muted-foreground">
-              {currentIcon ||
-                t("providerIcon.noIcon", { defaultValue: "未选择图标" })}
-            </p>
-          </div>
-          <Dialog open={iconDialogOpen} onOpenChange={setIconDialogOpen}>
-            <DialogTrigger asChild>
-              <Button type="button" variant="outline">
-                {t("providerIcon.selectIcon", { defaultValue: "选择图标" })}
-              </Button>
           </DialogTrigger>
           <DialogContent
             variant="fullscreen"
@@ -147,7 +95,6 @@ export function BasicFormFields({ form }: BasicFormFieldsProps) {
               </div>
               <div className="flex-1 overflow-y-auto px-6 py-6">
                 <div className="space-y-6 max-w-5xl mx-auto w-full">
-                    {/* 图标选择器 */}
                   <IconPicker
                     value={currentIcon}
                     onValueChange={handleIconSelect}
@@ -166,7 +113,51 @@ export function BasicFormFields({ form }: BasicFormFieldsProps) {
           </DialogContent>
         </Dialog>
       </div>
+
+      {/* 基础信息 - 网格布局 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("provider.name")}</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder={t("provider.namePlaceholder")} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="notes"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("provider.notes")}</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder={t("provider.notesPlaceholder")} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
       </div>
+
+      <FormField
+        control={form.control}
+        name="websiteUrl"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t("provider.websiteUrl")}</FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="https://" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
     </>
   );
 }

src/index.css

@@ -152,35 +152,19 @@ html.dark {
   color-scheme: dark;
 }
 
-/* 滚动条样式（避免在伪元素中使用自定义 dark 变体，消除构建警告） */
+/* 滚动条样式 - 完全隐藏（支持所有浏览器） */
 ::-webkit-scrollbar {
-  width: 0.375rem;
+  display: none;
-  height: 0.375rem;
 }
 
-::-webkit-scrollbar-track {
+/* Firefox */
-  background-color: #f4f4f5;
+* {
+  scrollbar-width: none;
 }
 
-html.dark ::-webkit-scrollbar-track {
+/* IE 10+ */
-  background-color: #1c1c1e;
+* {
-}
+  -ms-overflow-style: none;
-
-::-webkit-scrollbar-thumb {
-  background-color: #d4d4d8;
-  border-radius: 0.25rem;
-}
-
-html.dark ::-webkit-scrollbar-thumb {
-  background-color: #3a3a3c;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: #a1a1aa;
-}
-
-html.dark ::-webkit-scrollbar-thumb:hover {
-  background-color: #636366;
 }
 
 /* 焦点样式 */