fix(desktop): 调整设备 ID 展开排版

app/desktop/src/components/settings/primitives/SummaryCard.test.tsx

@@ -27,4 +27,31 @@ describe('SummaryCard', () => {
     expect(screen.getByText(fullDeviceId)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Hide full device ID' })).toHaveAttribute('aria-expanded', 'true');
   });
+
+  it('can replace the detail line with expanded content', () => {
+    const fullDeviceId = '4f58beb8-44f3-41c8-90b7-0a81af13dbb3';
+    const shortDeviceId = '4f58beb8...dbb3';
+
+    render(
+      <SummaryCard
+        icon={<span aria-hidden="true">icon</span>}
+        label="Desktop device"
+        value={shortDeviceId}
+        detail={shortDeviceId}
+        expandedDetail={<code>{fullDeviceId}</code>}
+        expandedDetailPlacement="detail"
+        expandLabel="Show full device ID"
+        collapseLabel="Hide full device ID"
+      />,
+    );
+
+    expect(screen.getAllByText(shortDeviceId)).toHaveLength(2);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show full device ID' }));
+
+    const content = screen.getByText('Desktop device').parentElement;
+    expect(content).toContainElement(screen.getByText(fullDeviceId));
+    expect(screen.getAllByText(shortDeviceId)).toHaveLength(1);
+    expect(screen.getByRole('button', { name: 'Hide full device ID' })).toHaveAttribute('aria-expanded', 'true');
+  });
 });

app/desktop/src/components/settings/primitives/SummaryCard.tsx

@@ -8,6 +8,7 @@ interface SummaryCardProps {
   value: string;
   detail: string;
   expandedDetail?: ReactNode;
+  expandedDetailPlacement?: 'below' | 'detail';
   expandLabel?: string;
   collapseLabel?: string;
 }
@@ -18,12 +19,14 @@ export default function SummaryCard({
   value,
   detail,
   expandedDetail,
+  expandedDetailPlacement = 'below',
   expandLabel,
   collapseLabel,
 }: SummaryCardProps) {
   const [expanded, setExpanded] = useState(false);
   const expandedId = useId();
   const canExpand = Boolean(expandedDetail);
+  const showInlineExpandedDetail = canExpand && expanded && expandedDetailPlacement === 'detail';
   const expandButtonLabel = expanded
     ? collapseLabel ?? label
     : expandLabel ?? label;
@@ -34,7 +37,13 @@ export default function SummaryCard({
       <div className={styles.summaryContent}>
         <span>{label}</span>
         <strong>{value}</strong>
-        <small>{detail}</small>
+        {showInlineExpandedDetail ? (
+          <div id={expandedId} className={styles.summaryInlineExpandedDetail}>
+            {expandedDetail}
+          </div>
+        ) : (
+          <small id={canExpand && expandedDetailPlacement === 'detail' ? expandedId : undefined}>{detail}</small>
+        )}
       </div>
       {canExpand && (
         <button
@@ -48,7 +57,7 @@ export default function SummaryCard({
           {expanded ? <ChevronUp size={15} /> : <ChevronDown size={15} />}
         </button>
       )}
-      {canExpand && expanded && (
+      {canExpand && expanded && expandedDetailPlacement === 'below' && (
         <div id={expandedId} className={styles.summaryExpandedDetail}>
           {expandedDetail}
         </div>

app/desktop/src/components/settings/primitives/primitives.module.css

@@ -258,6 +258,11 @@
   margin-top: 6px;
 }
 
+.summaryInlineExpandedDetail {
+  min-width: 0;
+  margin-top: 2px;
+}
+
 .summaryExpandedCode {
   display: block;
   max-width: 100%;

app/desktop/src/components/settings/sections/AccountSection.tsx

@@ -51,6 +51,7 @@ export default function AccountSection({
           value={desktopDeviceStatus}
           detail={deviceRegistration.status === 'error' ? deviceRegistration.error ?? t('settings.desktopDeviceRegisterFailed') : deviceId ? shortId(deviceId) : t('settings.desktopDeviceMissingDesc')}
           expandedDetail={deviceId ? <code className={styles.summaryExpandedCode}>{deviceId}</code> : undefined}
+          expandedDetailPlacement="detail"
           expandLabel={t('settings.desktopDeviceShowFull')}
           collapseLabel={t('settings.desktopDeviceHideFull')}
         />