fix(admin): improve promo layout and system settings save UX

Fix mini home media form persistence; float save with unsaved leave prompt; promo detail QR on the right.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/admin-web/src/components/ConfigMediaFields.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Button, Space } from 'antd';
 import { ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import {
@@ -8,6 +9,21 @@ import OssUpload from './OssUpload';
 
 const MAX_BANNERS = 8;
 
+/** 编辑态保留空位；下发/入库仍用 parseMiniHomeBanners 过滤空串 */
+function parseBannersForEdit(raw?: string | null): string[] {
+  if (!raw?.trim()) return [];
+  try {
+    const parsed = JSON.parse(raw.trim()) as unknown;
+    if (!Array.isArray(parsed)) return parseMiniHomeBanners(raw);
+    return parsed
+      .filter((u): u is string => typeof u === 'string')
+      .map((u) => u.trim())
+      .slice(0, MAX_BANNERS);
+  } catch {
+    return parseMiniHomeBanners(raw);
+  }
+}
+
 /** Ant Form 控件：单图 URL 字符串（默认 OSS 路径 footer） */
 export function ConfigImageField({
   value,
@@ -22,8 +38,8 @@ export function ConfigImageField({
     <OssUpload
       bizType={bizType}
       mediaType="IMAGE"
-      value={value}
+      value={value ?? ''}
-      onChange={onChange}
+      onChange={(url) => onChange?.(url ?? '')}
       placeholder="上传或粘贴图片 URL"
     />
   );
@@ -39,10 +55,17 @@ export function ConfigImageListField({
   onChange?: (json: string) => void;
   bizType?: string;
 }) {
-  const urls = parseMiniHomeBanners(value);
+  const [urls, setUrls] = useState<string[]>(() => parseBannersForEdit(value));
 
+  useEffect(() => {
+    setUrls(parseBannersForEdit(value));
+  }, [value]);
+
+  /** 本地可含空位；写入 Form 时去掉空串 */
   function commit(next: string[]) {
-    onChange?.(serializeMiniHomeBanners(next));
+    const clipped = next.slice(0, MAX_BANNERS);
+    setUrls(clipped);
+    onChange?.(serializeMiniHomeBanners(clipped));
   }
 
   function updateAt(index: number, url: string) {
@@ -67,13 +90,14 @@ export function ConfigImageListField({
 
   function add() {
     if (urls.length >= MAX_BANNERS) return;
-    commit([...urls, '']);
+    // 只加本地空位，避免 serialize 过滤空串导致「点击无反应」
+    setUrls((prev) => [...prev, '']);
   }
 
   return (
     <Space direction="vertical" style={{ width: '100%' }} size="middle">
       {urls.map((url, index) => (
-        <Space key={`${index}-${url || 'empty'}`} align="start" style={{ width: '100%' }} wrap>
+        <Space key={`banner-${index}`} align="start" style={{ width: '100%' }} wrap>
           <div style={{ flex: 1, minWidth: 240 }}>
             <OssUpload
               bizType={bizType}

apps/admin-web/src/pages/SystemSettingsPage.tsx

@@ -1,131 +1,71 @@
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-
+import { useNavigate } from 'react-router-dom';
 import {
-
   Alert,
-
   Button,
-
   Card,
-
   Collapse,
-
   Form,
-
   Input,
-
   InputNumber,
-
+  Modal,
   Space,
-
   Switch,
-
   Table,
-
   Tag,
-
   Typography,
-
   message,
-
 } from 'antd';
-
 import type { MockSmsCodeItem, SystemConfigFieldMeta, SystemConfigFormResponse } from '@dukang/shared-types';
 import { request } from '../lib/api';
 import { ConfigImageField, ConfigImageListField } from '../components/ConfigMediaFields';
 
 const { TextArea } = Input;
 
-
-
 function MockSmsCodePanel({ codes, loading }: { codes: MockSmsCodeItem[]; loading?: boolean }) {
-
   return (
-
     <div style={{ marginTop: -8, marginBottom: 16, marginLeft: 0 }}>
-
       <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
-
         最近 Mock 验证码（写入数据库，最新 50 条）
-
       </Typography.Text>
-
       <Table<MockSmsCodeItem>
-
         size="small"
-
         rowKey="id"
-
         loading={loading}
-
         pagination={false}
-
         scroll={{ y: 240 }}
-
         locale={{ emptyText: '暂无记录，触发短信发送后将显示在此' }}
-
         columns={[
-
           {
-
             title: '时间',
-
             dataIndex: 'createdAt',
-
             width: 168,
-
             render: (v: string) => new Date(v).toLocaleString(),
-
           },
-
           { title: '手机号', dataIndex: 'phone', width: 120 },
-
           { title: '场景', dataIndex: 'scene', width: 160 },
-
           {
-
             title: '验证码',
-
             dataIndex: 'code',
-
             width: 88,
-
             render: (code: string) => (
-
               <Typography.Text copyable strong>
-
                 {code}
-
               </Typography.Text>
-
             ),
-
           },
-
         ]}
-
         dataSource={codes}
-
       />
-
     </div>
-
   );
-
 }
 
-
-
 function renderField(
-
   field: SystemConfigFieldMeta,
-
   configuredSecrets: string[],
-
   extra?: ReactNode,
-
 ) {
-
   const isConfiguredSecret = field.secret && configuredSecrets.includes(field.key);
 
   if (field.type === 'boolean') {
@@ -169,6 +109,9 @@ function renderField(
           </Space>
         }
         tooltip={field.description}
+        trigger="onChange"
+        getValueFromEvent={(v: unknown) => (typeof v === 'string' ? v : '')}
+        normalize={(v) => (typeof v === 'string' ? v : '')}
       >
         {field.type === 'image' ? (
           <ConfigImageField bizType="footer" />
@@ -214,34 +157,25 @@ function renderField(
   );
 }
 
-
-
 export default function SystemSettingsPage() {
-
+  const navigate = useNavigate();
   const [form] = Form.useForm<Record<string, string>>();
-
   const [meta, setMeta] = useState<SystemConfigFormResponse | null>(null);
-
   const [loading, setLoading] = useState(true);
-
   const [saving, setSaving] = useState(false);
-
   const [syncing, setSyncing] = useState(false);
-
+  const [dirty, setDirty] = useState(false);
+  const dirtyRef = useRef(false);
+  const bypassLeaveRef = useRef(false);
   const mockSmsEnabled = Form.useWatch('MOCK_SMS', form) === 'true';
 
-
+  dirtyRef.current = dirty;
 
   async function load(silent = false) {
-
     if (!silent) setLoading(true);
-
     try {
-
       const data = await request<SystemConfigFormResponse>('/admin/system-config');
-
       if (silent) {
-        // 仅刷新 Mock 验证码列表，避免轮询用服务端值覆盖未保存的表单（含 MOCK_SMS 开关）
         setMeta((prev) =>
           prev
             ? { ...prev, mockSmsCodes: data.mockSmsCodes, updatedAt: data.updatedAt }
@@ -249,300 +183,221 @@ export default function SystemSettingsPage() {
         );
         return;
       }
-
       setMeta(data);
-
       form.setFieldsValue(data.values);
-
+      setDirty(false);
     } catch (e) {
-
       if (!silent) message.error(e instanceof Error ? e.message : '加载失败');
-
     } finally {
-
       if (!silent) setLoading(false);
-
     }
-
   }
 
-
-
   useEffect(() => {
-
     void load();
-
   }, []);
 
-
-
   useEffect(() => {
-
-    // 以表单开关为准展示验证码；轮询只刷列表，不回写表单
     if (!mockSmsEnabled) return;
-
     const timer = window.setInterval(() => void load(true), 5000);
-
     return () => window.clearInterval(timer);
-
   }, [mockSmsEnabled]);
 
+  useEffect(() => {
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (!dirtyRef.current) return;
+      e.preventDefault();
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', onBeforeUnload);
+    return () => window.removeEventListener('beforeunload', onBeforeUnload);
+  }, []);
 
+  useEffect(() => {
+    const onDocClick = (e: MouseEvent) => {
+      if (!dirtyRef.current || bypassLeaveRef.current) return;
+      const target = e.target as HTMLElement | null;
+      const anchor = target?.closest?.('a');
+      if (!anchor || !(anchor instanceof HTMLAnchorElement)) return;
+      if (anchor.target === '_blank' || anchor.hasAttribute('download')) return;
+      const url = new URL(anchor.href, window.location.href);
+      if (url.origin !== window.location.origin) return;
+      if (url.pathname === window.location.pathname && url.search === window.location.search) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+      Modal.confirm({
+        title: '有未保存的更改',
+        content: '离开前请先保存，否则更改将丢失。',
+        okText: '仍要离开',
+        cancelText: '留下',
+        onOk: () => {
+          bypassLeaveRef.current = true;
+          setDirty(false);
+          navigate(`${url.pathname}${url.search}${url.hash}`);
+          window.setTimeout(() => {
+            bypassLeaveRef.current = false;
+          }, 0);
+        },
+      });
+    };
+    document.addEventListener('click', onDocClick, true);
+    return () => document.removeEventListener('click', onDocClick, true);
+  }, [navigate]);
 
   const collapseItems = useMemo(() => {
-
     if (!meta) return [];
-
     return meta.groups.map((group) => ({
-
       key: group.key,
-
       label: group.label,
-
+      forceRender: true,
       children: (
-
         <div style={{ maxWidth: 720 }}>
-
           {meta.fields
-
             .filter((f) => f.group === group.key)
-
             .map((f) =>
-
               renderField(
-
                 f,
-
                 meta.configuredSecrets,
-
                 f.key === 'MOCK_SMS' && mockSmsEnabled ? (
-
                   <MockSmsCodePanel codes={meta.mockSmsCodes ?? []} loading={loading} />
-
                 ) : undefined,
-
               ),
-
             )}
-
         </div>
-
       ),
-
     }));
-
   }, [meta, mockSmsEnabled, loading]);
 
-
-
   async function onSave() {
-
+    await form.validateFields();
-    const values = await form.validateFields();
+    const values = form.getFieldsValue(true);
-
     const payload: Record<string, string> = {};
-
     for (const [k, v] of Object.entries(values)) {
-
       payload[k] = v === undefined || v === null ? '' : String(v);
-
     }
-
     setSaving(true);
-
     try {
-
       const res = await request<{ updatedKeys: string[]; requiresRestartKeys: string[] }>(
-
         '/admin/system-config',
-
         { method: 'PUT', body: JSON.stringify({ values: payload }) },
-
       );
-
       message.success(`已保存 ${res.updatedKeys.length} 项`);
-
       if (res.requiresRestartKeys.length) {
-
         message.warning(`以下配置需重启 API 后生效：${res.requiresRestartKeys.join(', ')}`);
-
       }
-
+      setDirty(false);
       await load();
-
     } catch (e) {
-
       message.error(e instanceof Error ? e.message : '保存失败');
-
     } finally {
-
       setSaving(false);
-
     }
-
   }
 
-
-
   async function onSyncEnv() {
-
     setSyncing(true);
-
     try {
-
       const res = await request<{ message: string; envFilePath: string }>(
-
         '/admin/system-config/sync-env',
-
         { method: 'POST' },
-
       );
-
       message.success(res.message || '已同步到 env 文件');
-
     } catch (e) {
-
       message.error(e instanceof Error ? e.message : '同步失败');
-
     } finally {
-
       setSyncing(false);
-
     }
-
   }
 
-
-
   async function onImportEnv() {
-
     try {
-
       const res = await request<{ imported: number }>('/admin/system-config/import-env', {
-
         method: 'POST',
-
       });
-
       message.success(`已从当前进程环境导入 ${res.imported} 项`);
-
       await load();
-
     } catch (e) {
-
       message.error(e instanceof Error ? e.message : '导入失败');
-
     }
-
   }
 
-
-
   return (
-
+    <div style={{ paddingBottom: 88 }}>
-    <div>
-
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
-
         <div>
-
           <Typography.Title level={4} style={{ margin: 0 }}>
-
             系统设置
-
           </Typography.Title>
-
           <Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 8 }}>
-
             配置存于 <code>system_config</code> 表；保存后写入进程环境。可同步到{' '}
-
             <code>{meta?.envFilePath ?? '.env'}</code> 以便部署持久化。
-
           </Typography.Paragraph>
-
         </div>
-
         <Space>
-
           <Button onClick={() => void onImportEnv()}>从环境导入</Button>
-
           <Button loading={syncing} onClick={() => void onSyncEnv()}>
-
             同步到 env 文件
-
           </Button>
-
-          <Button type="primary" loading={saving} onClick={() => void onSave()}>
-
-            保存
-
-          </Button>
-
         </Space>
-
       </div>
 
-
-
       <Alert
-
         type="info"
-
         showIcon
-
         style={{ marginBottom: 16 }}
-
         message="生效说明"
-
         description={
-
           <ul style={{ margin: '8px 0 0', paddingLeft: 20 }}>
-
             <li>
-
               <Tag color="green">即时</Tag>：保存后写入 <code>process.env</code>，Mock 开关、短信模板等可立即生效。
-
             </li>
-
             <li>
-
               <Tag color="orange">需重启</Tag>：微信/OSS 密钥等集成凭证变更后，<strong>建议重启 API 进程</strong>。
-
             </li>
-
             <li>OSS 始终走阿里云配置；凭证缺失时上传接口将直接报错。</li>
-
+            <li>修改后请点击右下角「保存」；未保存离开页面将提示确认。</li>
           </ul>
-
         }
-
       />
 
-
-
       <Card loading={loading}>
-
+        <Form form={form} layout="vertical" onValuesChange={() => setDirty(true)}>
-        <Form form={form} layout="vertical">
-
           <Collapse defaultActiveKey={meta?.groups.map((g) => g.key)} items={collapseItems} />
-
         </Form>
-
         {meta?.updatedAt ? (
-
           <Typography.Text type="secondary" style={{ display: 'block', marginTop: 16 }}>
-
             最近更新：{new Date(meta.updatedAt).toLocaleString()}
-
           </Typography.Text>
-
         ) : null}
-
       </Card>
 
+      <div
+        style={{
+          position: 'fixed',
+          right: 32,
+          bottom: 32,
+          zIndex: 1000,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-end',
+          gap: 8,
+        }}
+      >
+        {dirty ? <Tag color="orange">有未保存更改</Tag> : null}
+        <Button
+          type="primary"
+          size="large"
+          loading={saving}
+          onClick={() => void onSave()}
+          style={{
+            minWidth: 120,
+            boxShadow: '0 6px 16px rgba(0,0,0,0.18)',
+          }}
+        >
+          保存
+        </Button>
+      </div>
     </div>
-
   );
-
 }
-
-

apps/admin-web/src/pages/promo/PromoCodeDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, type CSSProperties } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
   Button,
@@ -25,6 +25,15 @@ import { request } from '../../lib/api';
 import { fmtTime } from '../../lib/constants';
 import type { PromoCodeDetailContext } from './PromoCodeDetailLayout';
 
+const descLabelStyle: CSSProperties = {
+  whiteSpace: 'nowrap',
+  width: 108,
+};
+
+const descContentStyle: CSSProperties = {
+  wordBreak: 'break-all',
+};
+
 async function downloadQrcode(url: string, filename: string) {
   try {
     const res = await fetch(url);
@@ -72,49 +81,25 @@ export default function PromoCodeDetailPage() {
 
   return (
     <>
-      <Row gutter={[16, 16]}>
+      <Row gutter={[16, 16]} align="top">
-        <Col xs={24} lg={8}>
+        <Col flex="1 1 480px" style={{ minWidth: 0 }}>
-          <Card title="小程序码" size="small">
-            {detail.qrcodeUrl ? (
-              <div style={{ textAlign: 'center' }}>
-                <img
-                  src={detail.qrcodeUrl}
-                  alt="推广小程序码"
-                  style={{ width: 200, height: 200, marginBottom: 12 }}
-                />
-                <Typography.Paragraph type="secondary" style={{ marginBottom: 12, fontSize: 12 }}>
-                  微信扫码进入小程序（scene=活动 ID {detail.id}）
-                </Typography.Paragraph>
-                <Space direction="vertical" style={{ width: '100%' }}>
-                  <Button
-                    block
-                    onClick={() => void downloadQrcode(detail.qrcodeUrl!, `${detail.code}-wxacode.png`)}
-                  >
-                    下载小程序码
-                  </Button>
-                </Space>
-              </div>
-            ) : (
-              <Typography.Text type="secondary">暂无小程序码</Typography.Text>
-            )}
-          </Card>
-        </Col>
-
-        <Col xs={24} lg={16}>
           <Card
             title="基础信息"
             size="small"
+            styles={{ body: { paddingTop: 12 } }}
             extra={(
               <Space>
-                <Button size="small" onClick={() => {
+                <Button
-                  editForm.setFieldsValue({
+                  size="small"
-                    name: detail.name,
+                  onClick={() => {
-                    scene: detail.scene,
+                    editForm.setFieldsValue({
-                    remark: detail.remark,
+                      name: detail.name,
-                    ownerUserId: detail.ownerUser?.id,
+                      scene: detail.scene,
-                  });
+                      remark: detail.remark,
-                  setEditOpen(true);
+                      ownerUserId: detail.ownerUser?.id,
-                }}
+                    });
+                    setEditOpen(true);
+                  }}
                 >
                   编辑
                 </Button>
@@ -138,7 +123,18 @@ export default function PromoCodeDetailPage() {
               </Space>
             )}
           >
-            <Descriptions column={{ xs: 1, sm: 2 }} bordered size="small">
+            <Descriptions
+              column={2}
+              bordered
+              size="small"
+              layout="horizontal"
+              labelStyle={descLabelStyle}
+              contentStyle={descContentStyle}
+              styles={{
+                label: descLabelStyle,
+                content: descContentStyle,
+              }}
+            >
               <Descriptions.Item label="名称">{detail.name}</Descriptions.Item>
               <Descriptions.Item label="码值">{detail.code}</Descriptions.Item>
               <Descriptions.Item label="场景">
@@ -147,30 +143,67 @@ export default function PromoCodeDetailPage() {
               <Descriptions.Item label="状态">
                 {PROMO_CODE_STATUS_LABELS[detail.status] || detail.status}
               </Descriptions.Item>
-              <Descriptions.Item label="活动 ID" span={2}>
+              <Descriptions.Item label="活动 ID">
-                <Typography.Text copyable={{ text: String(detail.id) }}>
+                <Typography.Text copyable={{ text: String(detail.id) }} style={{ whiteSpace: 'nowrap' }}>
-                  {detail.id}（小程序码 scene）
+                  {detail.id}
                 </Typography.Text>
               </Descriptions.Item>
-              <Descriptions.Item label="二维码 ID" span={2}>
+              <Descriptions.Item label="二维码 ID">
-                <Typography.Text copyable={{ text: detail.qrcodeId }}>{detail.qrcodeId}</Typography.Text>
+                <Typography.Text copyable={{ text: detail.qrcodeId }} style={{ whiteSpace: 'nowrap' }}>
+                  {detail.qrcodeId}
+                </Typography.Text>
               </Descriptions.Item>
               <Descriptions.Item label="小程序码 OSS" span={2}>
                 {detail.qrcodeUrl ? (
-                  <Typography.Text copyable={{ text: detail.qrcodeUrl }} ellipsis>
+                  <Typography.Text copyable={{ text: detail.qrcodeUrl }} ellipsis style={{ maxWidth: '100%' }}>
                     {detail.qrcodeUrl}
                   </Typography.Text>
                 ) : '—'}
               </Descriptions.Item>
               <Descriptions.Item label="渠道负责人">
-                {detail.ownerUser?.userNo || detail.ownerUser?.phone || '—'}
+                <span style={{ whiteSpace: 'nowrap' }}>
+                  {detail.ownerUser?.userNo || detail.ownerUser?.phone || '—'}
+                </span>
               </Descriptions.Item>
               <Descriptions.Item label="备注">{detail.remark || '—'}</Descriptions.Item>
-              <Descriptions.Item label="创建时间">{fmtTime(detail.createdAt)}</Descriptions.Item>
+              <Descriptions.Item label="创建时间">
-              <Descriptions.Item label="更新时间">{fmtTime(detail.updatedAt)}</Descriptions.Item>
+                <span style={{ whiteSpace: 'nowrap' }}>{fmtTime(detail.createdAt)}</span>
+              </Descriptions.Item>
+              <Descriptions.Item label="更新时间">
+                <span style={{ whiteSpace: 'nowrap' }}>{fmtTime(detail.updatedAt)}</span>
+              </Descriptions.Item>
             </Descriptions>
           </Card>
         </Col>
+
+        <Col flex="0 0 220px">
+          <Card title="小程序码" size="small" styles={{ body: { textAlign: 'center', padding: 12 } }}>
+            {detail.qrcodeUrl ? (
+              <>
+                <img
+                  src={detail.qrcodeUrl}
+                  alt="推广小程序码"
+                  style={{ width: 168, height: 168, display: 'block', margin: '0 auto 8px' }}
+                />
+                <Typography.Paragraph
+                  type="secondary"
+                  style={{ marginBottom: 8, fontSize: 12, whiteSpace: 'nowrap' }}
+                >
+                  scene={detail.id}
+                </Typography.Paragraph>
+                <Button
+                  block
+                  size="small"
+                  onClick={() => void downloadQrcode(detail.qrcodeUrl!, `${detail.code}-wxacode.png`)}
+                >
+                  下载小程序码
+                </Button>
+              </>
+            ) : (
+              <Typography.Text type="secondary">暂无小程序码</Typography.Text>
+            )}
+          </Card>
+        </Col>
       </Row>
 
       <Row gutter={16} style={{ marginTop: 16 }}>

server/dukang-api/src/common/system-config/system-config.registry.ts

@@ -74,7 +74,7 @@ export const SYSTEM_CONFIG_FIELDS: SystemConfigFieldMeta[] = [
     group: G.wechat_mini,
     type: 'imageList',
     requiresRestart: false,
-    description: '小程序商品首页顶部轮播，建议比例 15:8，最多 8 张',
+    description: '小程序商品首页顶部轮播，建议比例 15:8，最多 8 张；上传后需点击右上角「保存」',
   },
   {
     key: 'MINI_HOME_FOOTER_URL',
@@ -82,7 +82,7 @@ export const SYSTEM_CONFIG_FIELDS: SystemConfigFieldMeta[] = [
     group: G.wechat_mini,
     type: 'image',
     requiresRestart: false,
-    description: '小程序商品首页底部 footer，建议比例 15:4',
+    description: '小程序商品首页底部 footer，建议比例 15:4；上传后需点击右上角「保存」',
   },
 
   { key: 'OSS_ACCESS_KEY_ID', label: 'OSS AccessKey ID', group: G.oss, type: 'password', secret: true, requiresRestart: true },

server/dukang-api/src/common/system-config/system-config.service.ts

@@ -5,7 +5,7 @@ import type {
   SystemConfigSyncResult,
   SystemConfigUpdateRequest,
 } from '@dukang/shared-types';
-import { loadAppConfig } from '@dukang/shared-types';
+import { loadAppConfig, parseMiniHomeBanners, serializeMiniHomeBanners } from '@dukang/shared-types';
 import { PrismaService } from '../prisma/prisma.module';
 import {
   SYSTEM_CONFIG_FIELDS,
@@ -209,6 +209,12 @@ export class SystemConfigService implements OnModuleInit {
     if (meta.type === 'boolean') {
       return raw === 'true' || raw === '1' ? 'true' : 'false';
     }
+    if (meta.type === 'imageList') {
+      return serializeMiniHomeBanners(parseMiniHomeBanners(raw));
+    }
+    if (meta.type === 'image') {
+      return raw.trim();
+    }
     if (meta.key === 'WX_MCH_PRIVATE_KEY' || meta.key === 'WX_PLATFORM_CERT') {
       let value = raw.trim();
       if (