feat: release OpsXShell 2.1.0 native Tauri edition

src/components/sftp/SortHeader.tsx

@@ -11,26 +11,37 @@ interface SortHeaderProps {
   sortOrder: SortOrder
 }
 
-export function SortHeader({ onSort, sortField, sortOrder }: SortHeaderProps) {
-  const fields: { key: SortField; label: string; width: string; align: 'left' | 'right' }[] = [
-    { key: 'name', label: '名称', width: 'flex-1', align: 'left' },
-    { key: 'modified', label: '修改时间', width: 'w-32', align: 'right' },
-    { key: 'size', label: '大小', width: 'w-24', align: 'right' },
-    { key: 'type', label: '类型', width: 'w-24', align: 'right' },
-  ]
+const FIELDS: { key: SortField; label: string; className: string }[] = [
+  { key: 'name', label: '名称', className: 'flex-1 min-w-0 justify-start' },
+  { key: 'modified', label: '修改时间', className: 'w-32 justify-end' },
+  { key: 'size', label: '大小', className: 'w-24 justify-end' },
+  { key: 'type', label: '类型', className: 'w-24 justify-end' },
+]
 
+export function SortHeader({ onSort, sortField, sortOrder }: SortHeaderProps) {
   return (
-    <div className="h-9 flex items-center px-4 bg-dark-700/50 text-xs text-txt-muted border-b border-dark-700/30 select-none">
-      {fields.map(({ key, label, width, align }) => (
-        <button
-          key={key}
-          onClick={() => onSort(key)}
-          className={`${width} flex items-center justify-${align} gap-1 hover:text-content-primary transition-colors`}
-        >
-          <span>{label}</span>
-          {sortField === key && (sortOrder === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />)}
-        </button>
-      ))}
+    <div className="h-8 flex items-center w-full text-xs text-txt-muted select-none">
+      {FIELDS.map(({ key, label, className }) => {
+        const active = sortField === key
+        return (
+          <button
+            key={key}
+            type="button"
+            onClick={() => onSort(key)}
+            className={`${className} flex items-center gap-1 hover:text-content-primary transition-colors ${
+              active ? 'text-content-primary' : ''
+            }`}
+          >
+            <span>{label}</span>
+            {active &&
+              (sortOrder === 'asc' ? (
+                <ArrowUp className="w-3 h-3 flex-shrink-0" />
+              ) : (
+                <ArrowDown className="w-3 h-3 flex-shrink-0" />
+              ))}
+          </button>
+        )
+      })}
     </div>
   )
 }