refactor: update layout components for consistency and clarity

- Removed unnecessary background classes from various layout components to streamline styling.
- Adjusted default background colors in the MasterDetailLayout component for better visual consistency.
- Cleaned up class attributes in multiple components to enhance readability and maintainability.

These changes aim to improve the overall layout structure and ensure a more uniform appearance across the application.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

docs/master-detail-layout.md

@@ -7,7 +7,6 @@
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │  Header (h-16)                                              │
-│  border-b border-neutral-100 dark:border-neutral-900        │
 ├───────────────────┬─────────────────────────────────────────┤
 │                   │                                         │
 │   List Panel      │         Detail Panel                    │
@@ -49,14 +48,14 @@ const { isMobile } = useMasterDetailLayout()
 
 ### Props
 
-| Prop | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `showDetailOnMobile` | `boolean` | `false` | 移动端是否显示详情面板 |
-| `defaultSize` | `number` | `0.3` | 列表面板默认宽度比例 |
-| `min` | `number` | `0.2` | 最小宽度比例 |
-| `max` | `number` | `0.4` | 最大宽度比例 |
-| `listBgClass` | `string` | `'bg-white dark:bg-neutral-900'` | 列表面板背景 |
-| `detailBgClass` | `string` | `'bg-neutral-50 dark:bg-neutral-950'` | 详情面板背景 |
+| Prop                 | 类型      | 默认值                                | 说明                   |
+| -------------------- | --------- | ------------------------------------- | ---------------------- |
+| `showDetailOnMobile` | `boolean` | `false`                               | 移动端是否显示详情面板 |
+| `defaultSize`        | `number`  | `0.3`                                 | 列表面板默认宽度比例   |
+| `min`                | `number`  | `0.2`                                 | 最小宽度比例           |
+| `max`                | `number`  | `0.4`                                 | 最大宽度比例           |
+| `listBgClass`        | `string`  | `'bg-white dark:bg-neutral-900'`      | 列表面板背景           |
+| `detailBgClass`      | `string`  | `'bg-neutral-50 dark:bg-neutral-950'` | 详情面板背景           |
 
 ### Slots
 
@@ -176,7 +175,7 @@ const { isMobile } = useMasterDetailLayout()
 
 ```tsx
 // 容器
-<div class="flex h-full flex-col bg-white dark:bg-black">
+<div class="flex h-full flex-col">
 
 // 头部
 <div class="flex h-12 flex-shrink-0 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800">
@@ -254,15 +253,11 @@ class="hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:te
 <div class="group flex items-center justify-between border-b border-neutral-100 px-0 py-2.5 transition-colors last:border-b-0 hover:bg-neutral-50 dark:border-neutral-800/50 dark:hover:bg-neutral-800/30">
   <div class="min-w-0 flex-1">
     <div class="flex items-center gap-2">
-      <span class="shrink-0 font-mono text-xs text-neutral-400">
-        #123
-      </span>
+      <span class="shrink-0 font-mono text-xs text-neutral-400">#123</span>
       <span class="truncate text-sm text-neutral-900 dark:text-neutral-100">
         标题
       </span>
-      <span class="shrink-0 text-xs text-neutral-400">
-        时间
-      </span>
+      <span class="shrink-0 text-xs text-neutral-400">时间</span>
     </div>
   </div>
   <div class="flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
@@ -275,28 +270,30 @@ class="hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:te
 
 ## 颜色规范
 
-| 用途 | Light | Dark |
-|------|-------|------|
-| 列表面板背景 | `bg-white` | `dark:bg-neutral-900` |
-| 详情面板背景 | `bg-neutral-50` | `dark:bg-neutral-950` |
-| 边框 | `border-neutral-200` | `dark:border-neutral-800` |
-| 次要边框 | `border-neutral-100` | `dark:border-neutral-800/50` |
-| 选中项背景 | `bg-neutral-100` | `dark:bg-neutral-800` |
-| 悬停背景 | `hover:bg-neutral-50` | `dark:hover:bg-neutral-800/30` |
-| 主要文字 | `text-neutral-900` | `dark:text-neutral-100` |
-| 次要文字 | `text-neutral-500` | `dark:text-neutral-400` |
-| 辅助文字 | `text-neutral-400` | `dark:text-neutral-500` |
+| 用途         | Light                 | Dark                           |
+| ------------ | --------------------- | ------------------------------ |
+| 列表面板背景 | `bg-white`            | `dark:bg-neutral-900`          |
+| 详情面板背景 | `bg-neutral-50`       | `dark:bg-neutral-950`          |
+| 边框         | `border-neutral-200`  | `dark:border-neutral-800`      |
+| 次要边框     | `border-neutral-100`  | `dark:border-neutral-800/50`   |
+| 选中项背景   | `bg-neutral-100`      | `dark:bg-neutral-800`          |
+| 悬停背景     | `hover:bg-neutral-50` | `dark:hover:bg-neutral-800/30` |
+| 主要文字     | `text-neutral-900`    | `dark:text-neutral-100`        |
+| 次要文字     | `text-neutral-500`    | `dark:text-neutral-400`        |
+| 辅助文字     | `text-neutral-400`    | `dark:text-neutral-500`        |
 
 ---
 
 ## 响应式行为
 
 ### Desktop (≥1024px)
+
 - 使用 `NSplit` 分栏布局
 - 列表和详情同时显示
 - 可拖拽调整比例
 
 ### Mobile/Tablet (<1024px)
+
 - 全屏切换模式
 - 默认显示列表
 - 选中项目后滑动切换到详情

src/components/draft/diff-preview.tsx

@@ -109,10 +109,7 @@ export const DiffPreview = defineComponent({
     })
 
     return () => (
-      <div
-        ref={containerRef}
-        class="h-full overflow-auto rounded-lg bg-neutral-50 dark:bg-neutral-900"
-      >
+      <div ref={containerRef} class="h-full overflow-auto rounded-lg">
         {isLoading.value && (
           <div class="flex h-full items-center justify-center text-neutral-400">
             加载中...

src/components/draft/file-preview.tsx

@@ -99,10 +99,7 @@ export const FilePreview = defineComponent({
     })
 
     return () => (
-      <div
-        ref={containerRef}
-        class="h-full overflow-auto bg-neutral-50 dark:bg-neutral-900"
-      >
+      <div ref={containerRef} class="h-full overflow-auto">
         {isLoading.value && (
           <div class="flex h-full items-center justify-center text-neutral-400">
             加载中...

src/components/layout/master-detail-layout.tsx

@@ -41,7 +41,7 @@ export const MasterDetailLayout = defineComponent({
     },
     detailBgClass: {
       type: String,
-      default: 'bg-neutral-50 dark:bg-neutral-950',
+      default: 'bg-white dark:bg-neutral-900',
     },
     onMobileBack: {
       type: Function as PropType<() => void>,
@@ -60,7 +60,7 @@ export const MasterDetailLayout = defineComponent({
       layout.contentPadding.value = false
       layout.contentMinFullHeight.value = true
       setHeaderClass(
-        'md:px-4 border-b border-neutral-100 dark:border-neutral-900',
+        'md:px-4 border-b border-neutral-200 dark:border-neutral-800',
       )
     })
 

src/components/layout/split-panel-layout.tsx

@@ -93,7 +93,7 @@ export const SplitPanelLayout = defineComponent({
       >
         {{
           1: () => (
-            <div class="h-full overflow-hidden border-r border-neutral-200 bg-white dark:border-neutral-800 dark:bg-black">
+            <div class="h-full overflow-hidden border-r border-neutral-200 dark:border-neutral-800">
               {slots.list?.()}
             </div>
           ),

src/layouts/settings-layout.tsx

@@ -18,7 +18,7 @@ export const SettingsDetailPanel = defineComponent({
     const { isMobile } = useMasterDetailLayout()
 
     return () => (
-      <div class="flex h-full flex-col bg-white dark:bg-black">
+      <div class="flex h-full flex-col">
         {/* Header */}
         <div class="flex h-12 flex-shrink-0 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800">
           <div class="flex items-center gap-3">

src/views/ai/tasks.tsx

@@ -866,7 +866,7 @@ const TaskDetailPanel = defineComponent({
                           />
                         ) : null,
                       empty: () => (
-                        <div class="flex h-full flex-col items-center justify-center bg-neutral-50 dark:bg-neutral-900">
+                        <div class="flex h-full flex-col items-center justify-center">
                           <ListTodoIcon
                             class="mb-2 size-8 text-neutral-300 dark:text-neutral-600"
                             aria-hidden="true"

src/views/comments/components/comment-detail.tsx

@@ -203,7 +203,7 @@ export const CommentDetail = defineComponent({
     )
 
     return () => (
-      <div class="flex h-full flex-col bg-white dark:bg-black">
+      <div class="flex h-full flex-col">
         <div class="flex h-12 flex-shrink-0 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800">
           <div class="flex items-center gap-3">
             {props.isMobile && props.onBack && (
@@ -436,9 +436,9 @@ export const CommentDetail = defineComponent({
         </NScrollbar>
 
         {!isTrash.value && (
-          <div class="flex-shrink-0 border-t border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-black">
+          <div class="flex-shrink-0 border-t border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
             <div class="mx-auto max-w-3xl">
-              <div class="relative overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-sm focus-within:border-neutral-400 focus-within:ring-1 focus-within:ring-neutral-400 dark:border-neutral-800 dark:bg-black dark:focus-within:border-neutral-700 dark:focus-within:ring-neutral-700">
+              <div class="relative overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-sm focus-within:border-neutral-400 focus-within:ring-1 focus-within:ring-neutral-400 dark:border-neutral-800 dark:bg-neutral-900 dark:focus-within:border-neutral-700 dark:focus-within:ring-neutral-700">
                 <NInput
                   ref={replyInputRef}
                   value={replyText.value}
@@ -493,11 +493,10 @@ export const CommentDetail = defineComponent({
                     <NButton
                       type="primary"
                       size="tiny"
-                      color="black"
                       onClick={handleReplySubmit}
                       loading={props.replyLoading}
                       disabled={!replyText.value.trim()}
-                      class="px-4"
+                      class="px-2"
                     >
                       发送回复
                     </NButton>

src/views/drafts/components/draft-detail.tsx

@@ -481,7 +481,7 @@ export const DraftDetail = defineComponent({
                         <NSpin />
                       </div>
                     ) : diffStats.value?.isSame ? (
-                      <div class="flex h-full flex-col items-center justify-center gap-3 bg-white p-4 dark:bg-neutral-900">
+                      <div class="flex h-full flex-col items-center justify-center gap-3 p-4">
                         <div class="flex size-12 items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800">
                           <GitCompare class="size-6 text-neutral-500 dark:text-neutral-400" />
                         </div>
@@ -593,7 +593,7 @@ export const DraftDetail = defineComponent({
                           </p>
                         </div>
                       ) : diffStats.value?.isSame ? (
-                        <div class="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-neutral-300 bg-white dark:border-neutral-700 dark:bg-neutral-900">
+                        <div class="flex h-full flex-col items-center justify-center gap-3">
                           <div class="flex size-12 items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800">
                             <GitCompare class="size-6 text-neutral-500 dark:text-neutral-400" />
                           </div>

src/views/extra-features/snippets/index.tsx

@@ -186,7 +186,7 @@ export default defineComponent({
     )
 
     const DetailPanel = () => (
-      <div class="flex h-full flex-col bg-white dark:bg-black">
+      <div class="flex h-full flex-col">
         {/* Header */}
         <div class="flex h-12 flex-shrink-0 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800">
           <div class="flex items-center gap-3">