refactor(perferences): use center wrapper layout

2026-06-29 19:44:28 +08:00
parent b8d7873b77
commit f719c11606
19 changed files with 684 additions and 144 deletions
@@ -0,0 +1,84 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+
+const useStyles = createStyles(({ token, css }) => ({
+  group: css`
+    /* Match the page panel surface (page-box.less): 8px radius + the
+       lighter container border, rather than the heavier component token. */
+    border: 1px solid ${token.colorBorder};
+    border-radius: 8px;
+    background: ${token.colorBgContainer};
+    overflow: hidden;
+  `,
+  row: css`
+    padding: 16px 20px;
+
+    & + & {
+      border-top: 1px solid ${token.colorBorderSecondary};
+    }
+  `,
+  head: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+  `,
+  info: css`
+    min-width: 0;
+  `,
+  title: css`
+    font-size: 14px;
+    font-weight: var(--font-weight-medium);
+    color: ${token.colorText};
+    line-height: 22px;
+  `,
+  description: css`
+    margin-top: 2px;
+    font-size: 13px;
+    color: ${token.colorTextTertiary};
+    line-height: 20px;
+  `,
+  extra: css`
+    flex-shrink: 0;
+  `,
+  body: css`
+    margin-top: 16px;
+  `
+}));
+
+export const SettingsGroup: React.FC<{ children: React.ReactNode }> = ({
+  children
+}) => {
+  const { styles } = useStyles();
+  return <div className={styles.group}>{children}</div>;
+};
+
+interface SettingRowProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const SettingRow: React.FC<SettingRowProps> = ({
+  title,
+  description,
+  extra,
+  children
+}) => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.row}>
+      <div className={styles.head}>
+        <div className={styles.info}>
+          <div className={styles.title}>{title}</div>
+          {description && (
+            <div className={styles.description}>{description}</div>
+          )}
+        </div>
+        {extra && <div className={styles.extra}>{extra}</div>}
+      </div>
+      {children && <div className={styles.body}>{children}</div>}
+    </div>
+  );
+};