@waterwx/dsh-novel-forge 1.6.0 → 1.7.2

package/src/client/panel/views.tsx

@@ -86,14 +86,14 @@ export function PlotlineCard(props: {
 }): ReactElement {
   const { line } = props
   return (
-    <div key={line.id} style={{ border: '1px solid var(--nf-border)', borderRadius: 10, padding: '8px 12px', fontSize: 12, display: 'flex', flexDirection: 'column', gap: 4 }}>
+    <div key={line.id} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-10)', padding: 'var(--nf-space-8) var(--nf-space-12)', fontSize: 'var(--nf-fs-12)', display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)' }}>
       <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-        <span style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', flexWrap: 'wrap' }}>
           <b>{line.name}</b>
           <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>{kindLabel(line.kind)}</span>
           <span className={css.badge} style={{ borderColor: plotlineStatusColor(line.status), color: plotlineStatusColor(line.status) }}>{plotlineStatusLabel(line.status)}</span>
         </span>
-        <span style={{ display: 'flex', gap: 6 }}>
+        <span style={{ display: 'flex', gap: 'var(--nf-space-6)' }}>
           <button
             type="button"
             className={`${css.button} ${css.buttonSmall}`}
@@ -131,14 +131,14 @@ export function RoleCandidateRow(props: {
   const label = ROLE_LABELS[r.roleLabel] ?? r.roleLabel
   const color = roleColor(r.roleLabel)
   return (
-    <div key={r.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 10px', fontSize: 12 }}>
+    <div key={r.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-8)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
       <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-        <span style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', flexWrap: 'wrap' }}>
           <b>{r.name}</b>
           <span className={css.badge} style={{ borderColor: color, color }}>{label}</span>
           {r.identity !== '' && <span className={css.meta}>{r.identity}</span>}
         </span>
-        <span style={{ display: 'flex', gap: 6 }}>
+        <span style={{ display: 'flex', gap: 'var(--nf-space-6)' }}>
           <button type="button" className={`${css.button} ${css.buttonSmall} ${css.buttonPrimary}`} disabled={props.disabled} onClick={props.onAdopt}>
             ＋ 采纳
           </button>
@@ -165,14 +165,14 @@ export function RoleCard(props: {
   const label = ROLE_LABELS[r.roleLabel] ?? r.roleLabel
   const color = roleColor(r.roleLabel)
   return (
-    <div key={r.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 10px', fontSize: 12 }}>
+    <div key={r.name} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-8)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
       <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-        <span style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', flexWrap: 'wrap' }}>
           <b>{r.name}</b>
           <span className={css.badge} style={{ borderColor: color, color }}>{label}</span>
           {r.identity !== '' && <span className={css.meta}>{r.identity}</span>}
         </span>
-        <span style={{ display: 'flex', gap: 6 }}>
+        <span style={{ display: 'flex', gap: 'var(--nf-space-6)' }}>
           <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={props.disabled} onClick={props.onEdit}>编辑</button>
           <button type="button" className={`${css.button} ${css.buttonSmall}`} disabled={props.disabled} onClick={props.onRemove}>删除</button>
         </span>
@@ -200,10 +200,10 @@ export function PlotlineHealthPanel(props: {
 }): ReactElement {
   const { report } = props
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, border: '1px solid var(--nf-info)', borderRadius: 12, padding: 10 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', border: '1px solid var(--nf-info)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-10)' }}>
       <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <b>🩺 剧情健康检查</b>
-        <span style={{ display: 'flex', gap: 8 }}>
+        <span style={{ display: 'flex', gap: 'var(--nf-space-8)' }}>
           <button
             type="button"
             className={`${css.button} ${css.buttonSmall}`}
@@ -216,21 +216,21 @@ export function PlotlineHealthPanel(props: {
           <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={props.onClose}>收起</button>
         </span>
       </div>
-      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--nf-accent)' }}>判定：{report.verdict}</div>
+      <div style={{ fontSize: 'var(--nf-fs-12)', fontWeight: 700, color: 'var(--nf-accent)' }}>判定：{report.verdict}</div>
       {report.timing !== '' && <div className={css.meta}><b>建议时机：</b>{report.timing}</div>}
       {report.reasons.length > 0 && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, fontSize: 12 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-2)', fontSize: 'var(--nf-fs-12)' }}>
           {report.reasons.map((r, i) => <div key={i} className={css.meta}>· {r}</div>)}
         </div>
       )}
       {report.lines.length > 0 && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 12 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', fontSize: 'var(--nf-fs-12)' }}>
           {report.lines.map((l, i) => {
             const color = l.health === 'ok' ? 'var(--nf-success)' : l.health === 'warning' ? 'var(--nf-warn)' : 'var(--nf-error)'
             const label = l.health === 'ok' ? '健康' : l.health === 'warning' ? '预警' : '搁置过久'
             return (
-              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
-                <span className={css.badge} style={{ borderColor: color, color, flex: 'none', marginTop: 1 }}>{label}</span>
+              <div key={i} style={{ display: 'flex', gap: 'var(--nf-space-8)', alignItems: 'flex-start' }}>
+                <span className={css.badge} style={{ borderColor: color, color, flex: 'none', marginTop: 'var(--nf-space-2)' }}>{label}</span>
                 <span className={css.meta}><b>{l.name}</b>：{l.note}</span>
               </div>
             )
@@ -250,20 +250,20 @@ export function PlotlinePlanPanel(props: {
 }): ReactElement {
   const { plan } = props
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, border: '1px solid var(--nf-accent)', borderRadius: 12, padding: 10 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', border: '1px solid var(--nf-accent)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-10)' }}>
       <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <b>✨ AI 剧情方案</b>
         <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={props.onClose}>收起</button>
       </div>
       {plan.direction !== '' && (
-        <div className={css.meta} style={{ fontSize: 12 }}><b>下一阶段方向：</b>{plan.direction}</div>
+        <div className={css.meta} style={{ fontSize: 'var(--nf-fs-12)' }}><b>下一阶段方向：</b>{plan.direction}</div>
       )}
       {plan.suggestions.length > 0 && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 12 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-4)', fontSize: 'var(--nf-fs-12)' }}>
           {plan.suggestions.map((s, i) => (
-            <div key={i} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 10px' }}>
+            <div key={i} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-8)', padding: 'var(--nf-space-6) var(--nf-space-10)' }}>
               <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-                <span style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+                <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', flexWrap: 'wrap' }}>
                   <b>{s.name}</b>
                   <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>{kindLabel(s.kind)}</span>
                 </span>
@@ -289,16 +289,16 @@ export function PlotlineSuggestionPanel(props: {
   onClose: () => void
 }): ReactElement {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, border: '1px solid var(--nf-info)', borderRadius: 12, padding: 10 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--nf-space-6)', border: '1px solid var(--nf-info)', borderRadius: 'var(--nf-radius-12)', padding: 'var(--nf-space-10)' }}>
       <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
         <b>✨ AI 建议（{props.suggestions.length} 条）</b>
         <button type="button" className={`${css.button} ${css.buttonSmall}`} onClick={props.onClose}>收起</button>
       </div>
       {props.suggestions.length === 0 && <span className={css.meta}>没有候选线。</span>}
       {props.suggestions.map((s, i) => (
-        <div key={i} style={{ border: '1px solid var(--nf-border)', borderRadius: 8, padding: '6px 10px', fontSize: 12 }}>
+        <div key={i} style={{ border: '1px solid var(--nf-border)', borderRadius: 'var(--nf-radius-8)', padding: 'var(--nf-space-6) var(--nf-space-10)', fontSize: 'var(--nf-fs-12)' }}>
           <div className={css.row} style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-            <span style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+            <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--nf-space-6)', flexWrap: 'wrap' }}>
               <b>{s.name}</b>
               <span className={css.badge} style={{ borderColor: 'var(--nf-accent)', color: 'var(--nf-accent)' }}>{kindLabel(s.kind)}</span>
             </span>