refactor: relocate components to app directory structure

2026-06-09 14:43:10 +08:00
parent f060301c24
commit cda55c8f9b
61 changed files with 19 additions and 27 deletions
@@ -0,0 +1,82 @@
+"use client";
+/**
+ * 设置项列表 Section
+ *
+ * 原始 Dart: lib/ui/core/settings_section.dart
+ *
+ * 渲染一组 SettingItem：图标 + 标题 + 副标题/值 + 右侧 chevron + 可选 divider。
+ */
+import { type ReactNode } from "react";
+
+import styles from "./settings-section.module.css";
+
+export interface SettingsItemModel {
+  id: string;
+  title: string;
+  subtitle?: string;
+  trailing?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  destructive?: boolean;
+}
+
+export interface SettingsSectionProps {
+  title?: string;
+  items: SettingsItemModel[];
+}
+
+export function SettingsSection({ title, items }: SettingsSectionProps) {
+  return (
+    <section className={styles.section}>
+      {title ? <h3 className={styles.title}>{title}</h3> : null}
+      <ul className={styles.list}>
+        {items.map((item, idx) => (
+          <li key={item.id}>
+            <button
+              type="button"
+              onClick={item.onClick}
+              className={[
+                styles.row,
+                item.destructive ? styles.destructive : "",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+            >
+              {item.icon ? (
+                <span className={styles.icon}>{item.icon}</span>
+              ) : null}
+              <span className={styles.body}>
+                <span className={styles.rowTitle}>{item.title}</span>
+                {item.subtitle ? (
+                  <span className={styles.subtitle}>{item.subtitle}</span>
+                ) : null}
+              </span>
+              {item.trailing ? (
+                <span className={styles.trailing}>{item.trailing}</span>
+              ) : null}
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+                className={styles.chevron}
+              >
+                <path
+                  d="M9 6l6 6-6 6"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+            {idx < items.length - 1 ? (
+              <div className={styles.divider} />
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}