✨ feat(client): 弹窗可设自动关闭时间，完成提醒描述只显示标题

src/client/ui/ConfigSection.js

@@ -16,8 +16,9 @@
  */
 
 import * as React from 'react'
-import { KINDS } from '../constants.js'
+import { DISMISS_CHOICES, KINDS } from '../constants.js'
 import { windowIsAway } from '../platform.js'
+import { DismissRow } from './DismissRow.js'
 import { KindRow } from './KindRow.js'
 import { seatTranslator, useOwnStore } from './hooks.js'
 import { CSS } from './styles.js'
@@ -84,6 +85,17 @@ export function ConfigSection(props) {
           }))),
         h('p', { className: 'dsn-group-note' }, tr('config.saveNote'))),
 
+      h('section', { className: 'dsn-group' },
+        h('h3', { className: 'dsn-group-title' }, tr('config.section.popup')),
+        h('div', { className: 'dsn-list' },
+          h(DismissRow, {
+            label: tr('settings.dismiss.label'),
+            options: DISMISS_CHOICES.map((value) => ({ value, label: tr(`settings.dismiss.${value}`) })),
+            value: snapshot.dismissAfterMs,
+            onChange: props.setDismiss,
+          })),
+        h('p', { className: 'dsn-group-note' }, tr('config.dismiss.note'))),
+
       h('section', { className: 'dsn-group' },
         h('h3', { className: 'dsn-group-title' }, tr('config.section.permission')),
         h('div', { className: 'dsn-list' },

src/client/ui/DismissRow.js

@@ -0,0 +1,30 @@
+/**
+ * One popup-lifetime row: the choices are the values they set, so the row needs
+ * no second control and no free-form input.
+ *
+ * @module @dsh-plugin/session-notify/client/ui/DismissRow
+ */
+
+import * as React from 'react'
+
+const h = React.createElement
+
+/**
+ * @param props - `label` (the row's own label and the group's accessible name),
+ *   `options` (`{ value, label }[]`, in display order), `value` (the chosen one),
+ *   and `onChange(value)`.
+ */
+export function DismissRow(props) {
+  return h('div', { className: 'dsn-row' },
+    h('div', { className: 'dsn-row-text' },
+      h('div', { className: 'dsn-row-title' }, props.label)),
+    h('div', { className: 'dsn-chips', role: 'radiogroup', 'aria-label': props.label },
+      props.options.map((option) => h('button', {
+        key: String(option.value),
+        type: 'button',
+        role: 'radio',
+        className: 'dsn-chip',
+        'aria-checked': option.value === props.value,
+        onClick: () => props.onChange(option.value),
+      }, option.label))))
+}

src/client/ui/styles.js

@@ -58,6 +58,11 @@ export const CSS = `
 .dsn-row.is-action{justify-content:flex-end;padding:12px 0 0}
 .dsn-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
 .dsn-row-title{color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
+.dsn-chips{display:flex;align-items:center;gap:6px;flex:none}
+.dsn-chip{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:46px;padding:0 10px;border:.5px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12.5px;line-height:18px;cursor:pointer}
+.dsn-chip:hover:not([aria-checked='true']){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.dsn-chip[aria-checked='true']{border-color:transparent;background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary-foreground);cursor:default}
+.dsn-chip:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
 .dsn-row-sub{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
 .dsn-state{display:inline-flex;align-items:center;gap:8px;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
 .dsn-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--dsw-alias-state-success-primary)}