优化: 多模块功能修复与体验改进 (#34)

1. 保留策略清理后自动删除空文件夹（新增 StorageDirCleaner 接口）
2. 备份任务删除时清理远端文件但保留备份记录
3. 节点管理修复：本机 IP/版本检测、Heartbeat OS/Arch 修正、新增编辑功能
4. 审计日志规范化：统一格式、丰富详情、节点操作增加审计记录
5. 系统设置移除一键更新操作，仅保留版本检查
6. Rclone 配置项分层展示（必填 + 高级可选折叠）
7. DirectoryPicker 目录选择器样式优化

web/src/components/common/DirectoryPicker.tsx

@@ -1,5 +1,5 @@
-import { Button, Input, Message, Modal, Space, Spin, Tree, Typography } from '@arco-design/web-react'
-import { IconFolder, IconFile } from '@arco-design/web-react/icon'
+import { Button, Input, Message, Modal, Space, Spin, Tree, Typography, Empty } from '@arco-design/web-react'
+import { IconFolder, IconFile, IconFolderAdd } from '@arco-design/web-react/icon'
 import { useCallback, useState } from 'react'
 import { listNodeDirectory } from '../../services/nodes'
 import type { DirEntry } from '../../types/nodes'
@@ -27,7 +27,7 @@ function entriesToTreeNodes(entries: DirEntry[], mode: 'directory' | 'file'): Tr
     .map((entry) => ({
       key: entry.path,
       title: entry.name,
-      icon: entry.isDir ? <IconFolder /> : <IconFile />,
+      icon: entry.isDir ? <IconFolder style={{ color: 'var(--color-warning-6)' }} /> : <IconFile />,
       isLeaf: !entry.isDir,
     }))
 }
@@ -94,46 +94,83 @@ export function DirectoryPicker({ value, onChange, placeholder, mode = 'director
     setModalVisible(false)
   }
 
+  function handleInputKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      const trimmed = value?.trim()
+      if (trimmed) {
+        onChange(trimmed)
+      }
+    }
+  }
+
   // 没有 nodeId 时退化为普通输入框
   if (nodeId === undefined) {
-    return <Input value={value} placeholder={placeholder} onChange={onChange} />
+    return <Input value={value} placeholder={placeholder} onChange={onChange} onKeyDown={handleInputKeyDown} />
   }
 
   return (
     <>
-      <Space style={{ width: '100%' }}>
-        <Input style={{ flex: 1 }} value={value} placeholder={placeholder} onChange={onChange} />
-        <Button type="outline" size="small" onClick={handleOpen}>
+      <div style={{ display: 'flex', gap: 8, width: '100%' }}>
+        <Input
+          style={{ flex: 1 }}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onKeyDown={handleInputKeyDown}
+          allowClear
+        />
+        <Button type="outline" size="default" onClick={handleOpen} icon={<IconFolderAdd />}>
           浏览
         </Button>
-      </Space>
+      </div>
 
       <Modal
         title={mode === 'directory' ? '选择目录' : '选择文件'}
         visible={modalVisible}
         onCancel={() => setModalVisible(false)}
         onOk={handleConfirm}
-        okText="选择"
+        okText="确认选择"
         cancelText="取消"
-        style={{ width: 560 }}
+        style={{ width: 640 }}
         okButtonProps={{ disabled: !selectedPath }}
         unmountOnExit
       >
-        {selectedPath && (
-          <div style={{ padding: '8px 12px', marginBottom: 12, background: 'var(--color-fill-2)', borderRadius: 4 }}>
-            <Typography.Text copyable style={{ fontSize: 13 }}>
+        {/* 当前选中路径 */}
+        <div style={{
+          padding: '10px 14px',
+          marginBottom: 16,
+          background: selectedPath ? 'var(--color-primary-light-1)' : 'var(--color-fill-2)',
+          borderRadius: 6,
+          border: selectedPath ? '1px solid var(--color-primary-light-3)' : '1px solid var(--color-border)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          minHeight: 40,
+        }}>
+          <IconFolder style={{ color: selectedPath ? 'var(--color-primary-6)' : 'var(--color-text-4)', fontSize: 16, flexShrink: 0 }} />
+          {selectedPath ? (
+            <Typography.Text copyable style={{ fontSize: 13, fontFamily: 'monospace', wordBreak: 'break-all' }}>
               {selectedPath}
             </Typography.Text>
-          </div>
-        )}
+          ) : (
+            <Typography.Text type="secondary" style={{ fontSize: 13 }}>请在下方目录树中选择路径</Typography.Text>
+          )}
+        </div>
+
+        {/* 目录树 */}
         {loading ? (
-          <Spin style={{ display: 'block', textAlign: 'center', padding: 40 }} />
+          <Spin style={{ display: 'block', textAlign: 'center', padding: 48 }} tip="加载目录中..." />
         ) : treeData.length === 0 ? (
-          <Typography.Text type="secondary" style={{ display: 'block', textAlign: 'center', padding: 40 }}>
-            目录为空
-          </Typography.Text>
+          <Empty style={{ padding: 48 }} description="目录为空" />
         ) : (
-          <div style={{ maxHeight: 420, overflow: 'auto', border: '1px solid var(--color-border)', borderRadius: 4, padding: '4px 0' }}>
+          <div style={{
+            maxHeight: 400,
+            overflow: 'auto',
+            border: '1px solid var(--color-border)',
+            borderRadius: 6,
+            padding: '6px 0',
+          }}>
             <Tree
               blockNode
               showLine

web/src/components/storage-targets/StorageTargetFormDrawer.tsx

@@ -1,8 +1,8 @@
-import { Alert, Button, Divider, Drawer, Input, Select, Space, Switch, Typography } from '@arco-design/web-react'
+import { Alert, Button, Collapse, Divider, Drawer, Input, Select, Space, Switch, Typography } from '@arco-design/web-react'
 import { useEffect, useMemo, useState } from 'react'
 import { getStorageTargetFieldConfigs, getStorageTargetTypeLabel, isBuiltinType, buildAllTypeOptions } from './field-config'
 import type { StorageConnectionTestResult, StorageTargetDetail, StorageTargetPayload, StorageTargetType } from '../../types/storage-targets'
-import { listRcloneBackends, type RcloneBackendInfo } from '../../services/rclone'
+import { listRcloneBackends, type RcloneBackendInfo, type RcloneBackendOption } from '../../services/rclone'
 
 interface StorageTargetFormDrawerProps {
   visible: boolean
@@ -138,8 +138,28 @@ export function StorageTargetFormDrawer({
     })
   }
 
-  // 渲染动态字段（rclone 后端）
+  // 渲染单个动态字段
+  function renderDynamicOption(opt: RcloneBackendOption) {
+    return (
+      <div key={opt.key}>
+        <Typography.Text>{opt.key}{opt.required ? ' *' : ''}</Typography.Text>
+        {opt.isPassword ? (
+          <Input.Password value={(draft.config[opt.key] as string) || ''} placeholder={opt.label} onChange={(v) => updateConfig(opt.key, v)} />
+        ) : (
+          <Input value={(draft.config[opt.key] as string) || ''} placeholder={opt.label} onChange={(v) => updateConfig(opt.key, v)} />
+        )}
+        {opt.label && (
+          <Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 2, fontSize: 12 }} ellipsis={{ rows: 2, expandable: true }}>{opt.label}</Typography.Paragraph>
+        )}
+      </div>
+    )
+  }
+
+  // 渲染动态字段（rclone 后端）— 必填优先，可选折叠
   function renderDynamicFields() {
+    const requiredOptions = dynamicBackend?.options.filter((opt) => opt.required) ?? []
+    const optionalOptions = dynamicBackend?.options.filter((opt) => !opt.required) ?? []
+
     return (
       <>
         <div>
@@ -147,19 +167,19 @@ export function StorageTargetFormDrawer({
           <Input value={(draft.config.root as string) || ''} placeholder="如 /backups 或 bucket 名" onChange={(v) => updateConfig('root', v)} />
           <Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 4 }}>远端根路径、桶名或挂载点，留空使用根目录</Typography.Paragraph>
         </div>
-        {dynamicBackend && dynamicBackend.options.length > 0 && dynamicBackend.options.map((opt) => (
-          <div key={opt.key}>
-            <Typography.Text>{opt.key}{opt.required ? ' *' : ''}</Typography.Text>
-            {opt.isPassword ? (
-              <Input.Password value={(draft.config[opt.key] as string) || ''} placeholder={opt.label} onChange={(v) => updateConfig(opt.key, v)} />
-            ) : (
-              <Input value={(draft.config[opt.key] as string) || ''} placeholder={opt.label} onChange={(v) => updateConfig(opt.key, v)} />
-            )}
-            {opt.label && (
-              <Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 2, fontSize: 12 }} ellipsis={{ rows: 2, expandable: true }}>{opt.label}</Typography.Paragraph>
-            )}
-          </div>
-        ))}
+        {requiredOptions.map(renderDynamicOption)}
+        {optionalOptions.length > 0 && (
+          <Collapse bordered={false} style={{ background: 'transparent' }}>
+            <Collapse.Item
+              header={<Typography.Text type="secondary">高级配置（{optionalOptions.length} 个可选项）</Typography.Text>}
+              name="advanced"
+            >
+              <Space direction="vertical" size="large" style={{ width: '100%' }}>
+                {optionalOptions.map(renderDynamicOption)}
+              </Space>
+            </Collapse.Item>
+          </Collapse>
+        )}
       </>
     )
   }