diff --git a/ONE-OS小程序/年审管理.jsx b/ONE-OS小程序/年审管理.jsx
new file mode 100644
index 0000000..057dd26
--- /dev/null
+++ b/ONE-OS小程序/年审管理.jsx
@@ -0,0 +1,4262 @@
+// 【重要】必须使用 const Component 作为组件变量名
+// ONE-OS 小程序 - 年审管理（待处理 / 历史记录 + 筛选抽屉）
+
+const { useState, useMemo, useEffect, useRef, useCallback } = React;
+const moment = window.moment || window.dayjs;
+
+const COLOR_PRIMARY = '#16D1A1';
+const COLOR_PRIMARY_DEEP = '#00BFA5';
+const COLOR_TEXT = '#1D2129';
+const COLOR_MUTED = '#86909C';
+const COLOR_LINE = '#E5E6EB';
+const COLOR_BG = '#FFFFFF';
+const COLOR_PAGE = '#F2F3F5';
+const COLOR_WARN = '#FF7D00';
+const COLOR_DANGER = '#F53F3F';
+const FONT_FAMILY =
+  '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, sans-serif';
+
+/** 兼容 Axhub：antd 可能是 default 导出或子集包，避免解构出 undefined 导致 React #130 */
+const resolveAntdBundle = () => {
+  const raw = window.antd;
+  if (!raw) return {};
+  if (raw.default && typeof raw.default === 'object') {
+    return { ...raw, ...raw.default };
+  }
+  return raw;
+};
+
+const antd = resolveAntdBundle();
+
+const FallbackTag = ({ children, className, style, color }) => (
+  <span
+    className={className}
+    style={{
+      display: 'inline-block',
+      fontSize: 11,
+      lineHeight: '18px',
+      padding: '0 6px',
+      borderRadius: 4,
+      fontWeight: 600,
+      color:
+        color === 'error' ? COLOR_DANGER : color === 'warning' ? COLOR_WARN : COLOR_PRIMARY_DEEP,
+      background:
+        color === 'error'
+          ? 'rgba(245, 63, 63, 0.1)'
+          : color === 'warning'
+            ? 'rgba(255, 125, 0, 0.1)'
+            : 'rgba(22, 209, 161, 0.1)',
+      ...style
+    }}
+  >
+    {children}
+  </span>
+);
+
+const FallbackInputNumber = ({ value, onChange, placeholder, min, precision, bordered, controls }) => (
+  <input
+    type="number"
+    className="ant-input"
+    style={{ width: '100%', textAlign: 'right', border: bordered === false ? 'none' : undefined }}
+    placeholder={placeholder}
+    min={min}
+    step={precision === 2 ? 0.01 : 1}
+    value={value == null ? '' : value}
+    onChange={(e) => {
+      const raw = e.target.value;
+      if (onChange) onChange(raw === '' ? null : Number(raw));
+    }}
+  />
+);
+
+const FallbackUpload = ({ children, className, onChange, fileList, multiple, accept, beforeUpload, showUploadList }) => (
+  <label className={className} style={{ display: 'block', cursor: 'pointer' }}>
+    <input
+      type="file"
+      accept={accept || 'image/*'}
+      multiple={multiple}
+      style={{ display: 'none' }}
+      onChange={(e) => {
+        const files = Array.from(e.target.files || []);
+        if (beforeUpload && files.some((f) => beforeUpload(f) === false)) return;
+        const next = files.map((f, i) => ({
+          uid: `local-${Date.now()}-${i}`,
+          name: f.name,
+          status: 'done',
+          originFileObj: f
+        }));
+        if (onChange) onChange({ fileList: [...(fileList || []), ...next] });
+        e.target.value = '';
+      }}
+    />
+    {children}
+  </label>
+);
+
+const FallbackDrawer = ({ open, title, placement, width, height, onClose, children, footer, styles }) =>
+  open ? (
+    <div
+      className="ar-fallback-drawer-mask"
+      style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,.45)' }}
+      onClick={onClose}
+      role="presentation"
+    >
+      <div
+        className="ar-fallback-drawer"
+        style={{
+          position: 'fixed',
+          background: '#fff',
+          zIndex: 1001,
+          ...(placement === 'bottom'
+            ? { left: 0, right: 0, bottom: 0, height: height || 360, borderRadius: '14px 14px 0 0' }
+            : { top: 0, right: 0, bottom: 0, width: width || 320 }),
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+      >
+        <div style={{ padding: '14px 16px', fontWeight: 700, borderBottom: '1px solid #e5e6eb' }}>{title}</div>
+        <div style={{ flex: 1, overflow: 'auto', ...(styles?.body || {}) }}>{children}</div>
+        {footer ? <div>{footer}</div> : null}
+      </div>
+    </div>
+  ) : null;
+
+const FallbackModal = ({ open, title, children, footer, onCancel, centered, width, bodyStyle }) =>
+  open ? (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 1100,
+        background: 'rgba(0,0,0,.45)',
+        display: 'flex',
+        alignItems: centered ? 'center' : 'flex-start',
+        justifyContent: 'center',
+        padding: 24
+      }}
+      onClick={onCancel}
+      role="presentation"
+    >
+      <div
+        style={{
+          background: '#fff',
+          borderRadius: 12,
+          width: width || 400,
+          maxWidth: '100%',
+          maxHeight: '85vh',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+      >
+        <div style={{ padding: '14px 16px', fontWeight: 700, borderBottom: '1px solid #e5e6eb' }}>{title}</div>
+        <div style={{ overflow: 'auto', padding: 16, ...(bodyStyle || {}) }}>{children}</div>
+        {footer ? (
+          <div style={{ padding: 12, borderTop: '1px solid #e5e6eb', textAlign: 'right' }}>{footer}</div>
+        ) : null}
+      </div>
+    </div>
+  ) : null;
+
+const FallbackInput = ({
+  value,
+  onChange,
+  readOnly,
+  placeholder,
+  bordered,
+  disabled,
+  className,
+  onFocus,
+  style
+}) => (
+  <input
+    className={`ant-input${className ? ` ${className}` : ''}`}
+    readOnly={readOnly}
+    disabled={disabled}
+    placeholder={placeholder}
+    value={value ?? ''}
+    onChange={(e) => onChange && onChange(e)}
+    onFocus={onFocus}
+    style={{ width: '100%', border: bordered === false ? 'none' : undefined, ...style }}
+  />
+);
+
+const FallbackSelect = ({ value, onChange, options, placeholder, bordered, allowClear }) => (
+  <select
+    className="ant-select"
+    value={value ?? ''}
+    onChange={(e) => {
+      const v = e.target.value;
+      if (!onChange) return;
+      onChange(allowClear && !v ? undefined : v);
+    }}
+    style={{ width: '100%', border: bordered === false ? 'none' : undefined, textAlign: 'right' }}
+  >
+    <option value="">{placeholder || '请选择'}</option>
+    {(options || []).map((o) => (
+      <option key={String(o.value)} value={o.value}>
+        {o.label}
+      </option>
+    ))}
+  </select>
+);
+
+const FallbackButton = ({ children, onClick, type, block, size, disabled, style }) => (
+  <button
+    type="button"
+    disabled={disabled}
+    onClick={onClick}
+    style={{
+      display: block ? 'block' : 'inline-block',
+      width: block ? '100%' : undefined,
+      padding: size === 'large' ? '10px 16px' : '6px 12px',
+      borderRadius: 8,
+      border: type === 'primary' ? 'none' : '1px solid #e5e6eb',
+      background: type === 'primary' ? COLOR_PRIMARY : '#fff',
+      color: type === 'primary' ? '#fff' : COLOR_TEXT,
+      fontWeight: 600,
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.5 : 1,
+      ...style
+    }}
+  >
+    {children}
+  </button>
+);
+
+const Drawer = antd.Drawer || FallbackDrawer;
+const Input = antd.Input || FallbackInput;
+const Select = antd.Select || FallbackSelect;
+const Button = antd.Button || FallbackButton;
+const Tag = antd.Tag || FallbackTag;
+const Modal = antd.Modal || FallbackModal;
+const message = antd.message || {
+  success: (t) => window.alert(t),
+  error: (t) => window.alert(t),
+  warning: (t) => window.alert(t),
+  info: (t) => window.alert(t)
+};
+const InputNumber = antd.InputNumber || (Input && Input.Number) || FallbackInputNumber;
+const Upload = antd.Upload || FallbackUpload;
+const Image = antd.Image;
+
+const FallbackTextArea = ({ value, onChange, placeholder, bordered, rows }) => (
+  <textarea
+    className="ant-input"
+    rows={rows || 2}
+    placeholder={placeholder}
+    value={value ?? ''}
+    onChange={(e) => onChange && onChange(e)}
+    style={{ width: '100%', border: bordered === false ? 'none' : undefined, resize: 'none' }}
+  />
+);
+
+const TextArea = (antd.Input && antd.Input.TextArea) || FallbackTextArea;
+
+/** 省市数据（小程序级联选择） */
+const PROVINCE_CITY_MAP = {
+  广东省: ['广州市', '深圳市', '东莞市'],
+  江苏省: ['南京市', '苏州市', '无锡市'],
+  浙江省: ['杭州市', '宁波市', '温州市'],
+  上海市: ['上海市'],
+  安徽省: ['合肥市', '芜湖市']
+};
+const PROVINCE_LIST = Object.keys(PROVINCE_CITY_MAP);
+const MAX_PLATE_INPUT_LEN = 8;
+const PLATE_PROVINCES = [
+  '京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣',
+  '鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼', '使', '领'
+];
+const PLATE_LETTERS = 'ABCDEFGHJKLMNPQRSTUVWXYZ'.split('');
+const PLATE_ALNUM = '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ'.split('');
+const PLATE_LAST_CHARS = ['港', '澳', '学', '警', '挂', '使', '领'];
+
+const getPlateKeysForIndex = (index) => {
+  if (index === 0) return PLATE_PROVINCES;
+  if (index === 1) return PLATE_LETTERS;
+  if (index >= 6) return [...PLATE_ALNUM, ...PLATE_LAST_CHARS];
+  return PLATE_ALNUM;
+};
+/** 检测服务站列表（检测站、二保共用） */
+const INSPECTION_STATION_LIST = ['汇通检测站', '平湖检测站', '嘉兴检测站', '松江检测站'];
+/** 维修站列表（整备服务站） */
+const REPAIR_STATION_LIST = [
+  '杭州拱墅维修站',
+  '广州天河维修站',
+  '上海浦东维修站',
+  '深圳南山维修站',
+  '天津港保税区维修站'
+];
+const INSPECTION_STATION_STORAGE_KEY = 'annual-review.station.inspection';
+
+const readInspectionStationList = () => {
+  try {
+    const raw = localStorage.getItem(INSPECTION_STATION_STORAGE_KEY);
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed) && parsed.length) return parsed;
+  } catch {
+    /* ignore */
+  }
+  return [...INSPECTION_STATION_LIST];
+};
+
+const toStationSelectOptions = (list) => (list || []).map((s) => ({ label: s, value: s }));
+
+const isFormCostEmpty = (cost) => cost === '' || cost == null;
+
+/** 已选服务站时费用必填 */
+const validateStationCost = (form, stationLabel) => {
+  if (form?.station && isFormCostEmpty(form.cost)) {
+    message.error(`请填写${stationLabel}费用`);
+    return false;
+  }
+  return true;
+};
+
+/** 更新行驶证：照片、检验有效期必填（提交时） */
+const validateLicenseForm = (licenseForm) => {
+  if (!(licenseForm?.photos || []).length) {
+    message.error('请上传行驶证照片');
+    return false;
+  }
+  if (!licenseForm?.inspectionValidUntil) {
+    message.error('请填写检验有效期');
+    return false;
+  }
+  return true;
+};
+const EMPTY_SERVICE_FORM = {
+  station: '',
+  cost: '',
+  costBearer: undefined,
+  remark: '',
+  photos: []
+};
+const EMPTY_INSPECTION_FORM = {
+  station: '',
+  cost: '',
+  remark: ''
+};
+const MAX_SERVICE_PHOTOS = 10;
+const MAX_LICENSE_PHOTOS = 4;
+const LICENSE_OCR_MOCK_MS = 1500;
+const EMPTY_LICENSE_FORM = {
+  photos: [],
+  inspectionValidUntil: null,
+  ocrStatus: 'idle'
+};
+
+const mapOperateStatus = (raw) => {
+  if (raw === '可运营' || raw === '待运营') return '库存';
+  return raw || '—';
+};
+
+const MOCK_TASKS = [
+  {
+    id: 'ar-1',
+    plateNo: '粤B58888F',
+    vin: 'LGHXCAE28M6789012',
+    brand: '福田',
+    model: '奥铃4.5吨冷藏车',
+    operateStatusRaw: '租赁',
+    expireDate: '2026-07-20',
+    daysLeft: 49,
+    tab: 'pending',
+    province: '广东省',
+    city: '深圳市',
+    executor: '',
+    executeTime: ''
+  },
+  {
+    id: 'ar-2',
+    plateNo: '沪A03561F',
+    vin: 'LMRKH9AC0R1004086',
+    brand: '宇通',
+    model: '49吨牵引车头',
+    operateStatusRaw: '自营',
+    expireDate: '2026-07-31',
+    daysLeft: 60,
+    tab: 'pending',
+    province: '上海市',
+    city: '上海市',
+    executor: '',
+    executeTime: ''
+  },
+  {
+    id: 'ar-3',
+    plateNo: '苏E33333',
+    vin: 'LSXCH9AE8M1094857',
+    brand: '陕汽',
+    model: '德龙X3000混动牵引车',
+    operateStatusRaw: '可运营',
+    expireDate: '2026-05-15',
+    daysLeft: -17,
+    tab: 'pending',
+    province: '江苏省',
+    city: '苏州市',
+    executor: '',
+    executeTime: ''
+  },
+  {
+    id: 'ar-7',
+    plateNo: '鲁Q88901',
+    vin: 'LZZ5CLSB8NC778899',
+    brand: '重汽',
+    model: '豪沃T7H牵引车',
+    operateStatusRaw: '租赁',
+    expireDate: '2026-04-10',
+    daysLeft: -52,
+    tab: 'pending',
+    province: '山东省',
+    city: '临沂市',
+    executor: '',
+    executeTime: ''
+  },
+  {
+    id: 'ar-8',
+    plateNo: '闽D55662',
+    vin: 'LFWNHXSD8P1122334',
+    brand: '金龙',
+    model: '凯歌纯电动厢货',
+    operateStatusRaw: '自营',
+    expireDate: '2026-04-27',
+    daysLeft: -35,
+    tab: 'pending',
+    province: '福建省',
+    city: '厦门市',
+    executor: '',
+    executeTime: ''
+  },
+  {
+    id: 'ar-4',
+    plateNo: '浙A88888',
+    vin: 'LMRKH9AE2P9876543',
+    brand: '宇通',
+    model: '氢燃料电池大巴',
+    operateStatusRaw: '待运营',
+    expireDate: '2026-08-10',
+    daysLeft: 70,
+    tab: 'pending',
+    province: '浙江省',
+    city: '杭州市',
+    executor: '',
+    executeTime: ''
+  },
+  {
+    id: 'ar-6',
+    plateNo: '皖B66221',
+    vin: 'LZZ5CLSB8NA123456',
+    brand: '江淮',
+    model: '格尔发A5',
+    operateStatusRaw: '库存',
+    expireDate: '2026-06-28',
+    daysLeft: 27,
+    tab: 'pending',
+    province: '安徽省',
+    city: '合肥市',
+    executor: '',
+    executeTime: ''
+  },
+  {
+    id: 'ar-h1',
+    plateNo: '苏A88991',
+    vin: 'LSVAM4187C2123456',
+    brand: '解放',
+    model: 'J6P牵引车',
+    operateStatusRaw: '自营',
+    expireDate: '2026-03-10',
+    daysLeft: 0,
+    tab: 'history',
+    province: '江苏省',
+    city: '南京市',
+    executor: '张明辉',
+    executeTime: '2026-03-08 14:20'
+  },
+  {
+    id: 'ar-h2',
+    plateNo: '粤A11223',
+    vin: 'LFWNHXSD8P7654321',
+    brand: '比亚迪',
+    model: 'T5纯电轻卡',
+    operateStatusRaw: '待运营',
+    expireDate: '2026-02-20',
+    daysLeft: 0,
+    tab: 'history',
+    province: '广东省',
+    city: '广州市',
+    executor: '李晓彤',
+    executeTime: '2026-02-18 09:45'
+  },
+  {
+    id: 'ar-h3',
+    plateNo: '京A55667',
+    vin: 'LZZ5CLSB8NB654321',
+    brand: '东风',
+    model: '天龙KL',
+    operateStatusRaw: '租赁',
+    expireDate: '2026-01-15',
+    daysLeft: 0,
+    tab: 'history',
+    province: '广东省',
+    city: '东莞市',
+    executor: '王建国',
+    executeTime: '2026-01-12 16:30'
+  }
+].map((t) => ({
+  ...t,
+  operateStatus: mapOperateStatus(t.operateStatusRaw)
+}));
+
+/** 退出运营车辆无需年审，不纳入任务列表 */
+const isAnnualReviewExcluded = (task) =>
+  task.operateStatusRaw === '退出运营' || task.operateStatus === '退出运营';
+
+/** 待办：已过期天数（未过期为 0，越大表示过期越久） */
+const getOverdueDays = (task) => {
+  if (task?.daysLeft != null && task.daysLeft < 0) return -task.daysLeft;
+  if (moment && task?.expireDate) {
+    const overdue = moment().startOf('day').diff(moment(task.expireDate).startOf('day'), 'days');
+    return overdue > 0 ? overdue : 0;
+  }
+  return 0;
+};
+
+/** 待办排序用剩余天数（越短越靠前） */
+const getDaysLeftForSort = (task) => {
+  if (task?.daysLeft != null) return task.daysLeft;
+  if (moment && task?.expireDate) {
+    return moment(task.expireDate).startOf('day').diff(moment().startOf('day'), 'days');
+  }
+  return Number.MAX_SAFE_INTEGER;
+};
+
+/** 待办列表排序：① 过期越久越靠前 ② 剩余天数越短越靠前 */
+const sortPendingTasks = (tasks) =>
+  [...tasks].sort((a, b) => {
+    const overdueDiff = getOverdueDays(b) - getOverdueDays(a);
+    if (overdueDiff !== 0) return overdueDiff;
+    return getDaysLeftForSort(a) - getDaysLeftForSort(b);
+  });
+
+const AR_DRAFT_STORAGE_KEY = 'oneos_ar_operate_drafts_v1';
+/** 原型：年审提交后写入，供 Web 端证照管理读取演示 */
+const CERTIFICATE_LICENSE_SYNC_KEY = 'oneos_certificate_license_sync';
+
+const loadOperateDrafts = () => {
+  try {
+    const raw = localStorage.getItem(AR_DRAFT_STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+};
+
+const persistOperateDrafts = (drafts) => {
+  try {
+    localStorage.setItem(AR_DRAFT_STORAGE_KEY, JSON.stringify(drafts));
+  } catch {
+    /* 原型环境可能无 localStorage */
+  }
+};
+
+/**
+ * 年审提交后，将最新行驶证照片 + 检验有效期同步至证照管理（正式环境走服务端接口）
+ * @returns {{ plateNo: string, inspectionValidUntil: string, photoCount: number } | null}
+ */
+const syncLicenseToCertificateManagement = (task, licenseForm, operator) => {
+  if (!task?.plateNo) return null;
+  const photos = serializeUploadFileList(licenseForm?.photos || []);
+  const inspectionValidUntil = licenseForm?.inspectionValidUntil || '';
+  const payload = {
+    plateNo: task.plateNo,
+    vin: task.vin || '',
+    inspectionValidUntil,
+    photos,
+    photoCount: photos.length,
+    operator: operator || MOCK_CURRENT_HANDLER,
+    source: 'annual_review',
+    syncedAt: new Date().toISOString()
+  };
+  try {
+    const store = JSON.parse(localStorage.getItem(CERTIFICATE_LICENSE_SYNC_KEY) || '{}');
+    store[task.plateNo] = payload;
+    localStorage.setItem(CERTIFICATE_LICENSE_SYNC_KEY, JSON.stringify(store));
+  } catch {
+    /* ignore */
+  }
+  return payload;
+};
+
+const getUploadPreviewUrl = (file) => {
+  if (!file) return '';
+  if (file.url) return file.url;
+  if (file.thumbUrl) return file.thumbUrl;
+  if (file.originFileObj && typeof URL !== 'undefined' && URL.createObjectURL) {
+    return URL.createObjectURL(file.originFileObj);
+  }
+  return '';
+};
+
+const serializeUploadFileList = (list) =>
+  (list || []).map((f) => ({
+    uid: f.uid,
+    name: f.name,
+    url: getUploadPreviewUrl(f) || '',
+    status: f.status || 'done'
+  }));
+
+const deserializeUploadFileList = (list) =>
+  (list || []).map((f) => ({
+    uid: f.uid || `file-${f.name}-${Math.random().toString(36).slice(2, 8)}`,
+    name: f.name,
+    url: f.url,
+    thumbUrl: f.url,
+    status: f.status || 'done'
+  }));
+
+/** 操作页运营状态：库存细分为可运营/待运营 */
+const formatOperateStatusDisplay = (task) => {
+  const base = task.operateStatus || '—';
+  if (base === '库存' && (task.operateStatusRaw === '可运营' || task.operateStatusRaw === '待运营')) {
+    return `库存（${task.operateStatusRaw}）`;
+  }
+  return base;
+};
+
+/** 完成时间展示至分钟 YYYY-MM-DD HH:mm */
+const formatCompleteTime = (value) => {
+  if (!value) return '—';
+  if (moment) {
+    const m = moment(value);
+    if (m.isValid && m.isValid()) return m.format('YYYY-MM-DD HH:mm');
+  }
+  const normalized = String(value).trim().replace('T', ' ').slice(0, 16);
+  return normalized.length >= 16 ? normalized : value;
+};
+
+const DEFAULT_FILTER = {
+  provinceCity: null,
+  expireRange: null,
+  handler: '',
+  executeTimeRange: null
+};
+
+/** 历史记录 · 办理人选项 */
+const HANDLER_OPTIONS = [
+  { label: '全部', value: '' },
+  { label: '张明辉', value: '张明辉' },
+  { label: '李晓彤', value: '李晓彤' },
+  { label: '王建国', value: '王建国' }
+];
+
+/** 原型：当前登录办理人 */
+const MOCK_CURRENT_HANDLER = '张明辉';
+
+const formatDisplayMoney = (cost) => {
+  if (cost === '' || cost == null) return '—';
+  const n = Number(cost);
+  return Number.isFinite(n) ? `${n.toFixed(2)} 元` : '—';
+};
+
+const hasServiceContent = (form) =>
+  !!(form?.station || form?.cost || form?.remark || (form?.photos || []).length);
+
+const buildMockLicensePhotos = (taskId) => [
+  {
+    uid: `license-${taskId}-1`,
+    name: '行驶证.jpg',
+    url: `https://picsum.photos/seed/ar-license-${taskId}/240/180`,
+    status: 'done'
+  }
+];
+
+const buildSampleHistorySnapshot = (task) => ({
+  inspectionForm: {
+    station: task.id === 'ar-h2' ? '平湖检测站' : '汇通检测站',
+    cost: task.id === 'ar-h3' ? '450' : '320',
+    remark: task.id === 'ar-h1' ? '已通过年检' : ''
+  },
+  licenseForm: {
+    photos: buildMockLicensePhotos(task.id),
+    inspectionValidUntil: task.expireDate,
+    ocrStatus: 'done'
+  },
+  m2Expanded: task.id === 'ar-h1',
+  m2Form:
+    task.id === 'ar-h1'
+      ? { station: '汇通检测站', cost: '180', remark: '二保已完成', photos: [] }
+      : { ...EMPTY_SERVICE_FORM },
+  zbExpanded: false,
+  zbForm: { ...EMPTY_SERVICE_FORM }
+});
+
+const getHistorySnapshot = (task) => {
+  const snap = task?.operateSnapshot || buildSampleHistorySnapshot(task);
+  const licensePhotos = snap.licenseForm?.photos;
+  if (task?.tab === 'history' && (!licensePhotos || !licensePhotos.length)) {
+    return {
+      ...snap,
+      licenseForm: {
+        ...snap.licenseForm,
+        photos: buildMockLicensePhotos(task.id)
+      }
+    };
+  }
+  return snap;
+};
+
+const formatProvinceCity = (provinceCity) => {
+  if (!provinceCity || !provinceCity[0]) return '';
+  if (provinceCity[1]) return `${provinceCity[0]} / ${provinceCity[1]}`;
+  return provinceCity[0];
+};
+
+const formatTaskRegion = (task) => {
+  if (!task?.province) return '—';
+  if (task.city) return `${task.province}-${task.city}`;
+  return task.province;
+};
+
+const formatDateRangeDisplay = (range) => {
+  if (!range || !range[0] || !range[1]) return '';
+  if (moment) {
+    const start = moment(range[0]);
+    const end = moment(range[1]);
+    if (start.isValid() && end.isValid()) {
+      return `${start.format('YYYY-MM-DD')} ~ ${end.format('YYYY-MM-DD')}`;
+    }
+  }
+  return '已选择时间范围';
+};
+
+const formatSingleDateDisplay = (val) => {
+  if (!val) return '';
+  if (moment) {
+    const m = moment(val);
+    if (m.isValid()) return m.format('YYYY-MM-DD');
+  }
+  if (typeof val === 'string') return val;
+  return '';
+};
+
+const normalizePlateNo = (plate) => (plate || '').replace(/\s/g, '').toUpperCase();
+
+const platesMatch = (a, b) => {
+  const na = normalizePlateNo(a);
+  const nb = normalizePlateNo(b);
+  return na.length > 0 && na === nb;
+};
+
+/** 模拟 OCR 识别行驶证车牌号（原型：默认与任务一致；文件名含 mismatch 可模拟不一致） */
+const mockOcrLicensePlate = (task, photos) => {
+  const list = photos || [];
+  const last = list[list.length - 1];
+  const name = String(last?.name || last?.originFileObj?.name || '').toLowerCase();
+  if (name.includes('mismatch') || name.includes('不一致')) {
+    return '粤B00000D';
+  }
+  return task?.plateNo || '';
+};
+
+/** 模拟 OCR 仅识别到年月，返回该月最后一天 YYYY-MM-DD */
+const mockOcrLicenseValidUntil = (task) => {
+  const base = task?.expireDate || '2026-07-20';
+  if (moment) {
+    return moment(base).endOf('month').format('YYYY-MM-DD');
+  }
+  const parts = String(base).split('-');
+  const year = Number(parts[0]) || new Date().getFullYear();
+  const month = Number(parts[1]) || 1;
+  const day = getDaysInMonth(year, month);
+  return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+};
+
+const PAGE_STYLE = `
+.ar-mini-root {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #e8ebeF 0%, ${COLOR_PAGE} 32%);
+  display: flex;
+  justify-content: center;
+  padding: 16px 12px 32px;
+  box-sizing: border-box;
+  font-family: ${FONT_FAMILY};
+}
+.ar-phone {
+  width: 100%;
+  max-width: 390px;
+  min-height: 844px;
+  background: ${COLOR_PAGE};
+  border-radius: 28px;
+  overflow: hidden;
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.ar-chrome {
+  flex-shrink: 0;
+  background: ${COLOR_BG};
+}
+.ar-status-bar {
+  height: 44px;
+  padding: 14px 24px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.ar-status-time {
+  font-size: 15px;
+  font-weight: 600;
+  color: ${COLOR_TEXT};
+  letter-spacing: -0.02em;
+}
+.ar-status-icons {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: ${COLOR_TEXT};
+}
+.ar-mp-navbar {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px 0 8px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  position: relative;
+}
+.ar-mp-navbar-left {
+  display: flex;
+  align-items: center;
+  min-width: 72px;
+  z-index: 2;
+}
+.ar-mp-navbar-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 46%;
+  font-size: 17px;
+  font-weight: 600;
+  color: ${COLOR_TEXT};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+.ar-mp-navbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 2;
+}
+.ar-mp-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  color: ${COLOR_TEXT};
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 0;
+}
+.ar-mp-back:active {
+  background: rgba(0, 0, 0, 0.05);
+}
+.ar-mp-link {
+  border: none;
+  background: transparent;
+  color: ${COLOR_PRIMARY_DEEP};
+  font-size: 13px;
+  font-weight: 600;
+  padding: 6px 4px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ar-mp-capsule {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-radius: 16px;
+  border: 0.5px solid rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+.ar-mp-capsule-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: ${COLOR_TEXT};
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+}
+.ar-mp-capsule-btn:active {
+  background: rgba(0, 0, 0, 0.06);
+}
+.ar-mp-capsule-btn--more {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.ar-mp-capsule-close-icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1.5px solid ${COLOR_TEXT};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 300;
+}
+.ar-mp-capsule-divider {
+  width: 0.5px;
+  height: 18px;
+  background: rgba(0, 0, 0, 0.12);
+  flex-shrink: 0;
+}
+.ar-tabs {
+  display: flex;
+  border-bottom: 1px solid ${COLOR_LINE};
+  background: ${COLOR_BG};
+  flex-shrink: 0;
+}
+.ar-tab {
+  flex: 1;
+  text-align: center;
+  padding: 12px 0;
+  font-size: 15px;
+  font-weight: 500;
+  color: ${COLOR_MUTED};
+  cursor: pointer;
+  position: relative;
+  border: none;
+  background: transparent;
+  min-height: 44px;
+  transition: color 0.2s ease;
+}
+.ar-tab.active {
+  color: ${COLOR_PRIMARY_DEEP};
+  font-weight: 700;
+}
+.ar-tab.active::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: 28px;
+  height: 3px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, ${COLOR_PRIMARY}, ${COLOR_PRIMARY_DEEP});
+}
+.ar-search-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: ${COLOR_PAGE};
+  flex-shrink: 0;
+}
+.ar-search-box {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: ${COLOR_BG};
+  border-radius: 22px;
+  padding: 0 14px;
+  min-height: 42px;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
+  cursor: pointer;
+}
+.ar-search-placeholder {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  font-size: 15px;
+  color: ${COLOR_MUTED};
+  pointer-events: none;
+  line-height: 42px;
+  z-index: 0;
+}
+.ar-search-box input {
+  flex: 1;
+  position: relative;
+  z-index: 1;
+  border: none;
+  outline: none;
+  font-size: 15px;
+  background: transparent;
+  color: ${COLOR_TEXT};
+  min-width: 0;
+  width: 100%;
+  cursor: pointer;
+  caret-color: transparent;
+}
+.ar-region-trigger {
+  width: 100%;
+  cursor: pointer;
+  caret-color: transparent;
+}
+.ar-region-picker {
+  display: flex;
+  height: 220px;
+  border: 1px solid ${COLOR_LINE};
+  border-radius: 10px;
+  overflow: hidden;
+  background: ${COLOR_BG};
+}
+.ar-region-col {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.ar-region-col + .ar-region-col {
+  border-left: 1px solid ${COLOR_LINE};
+}
+.ar-region-item {
+  display: block;
+  width: 100%;
+  border: none;
+  background: transparent;
+  text-align: left;
+  padding: 12px 14px;
+  font-size: 15px;
+  color: ${COLOR_TEXT};
+  cursor: pointer;
+  font-family: inherit;
+}
+.ar-region-item.active {
+  background: rgba(22, 209, 161, 0.12);
+  color: ${COLOR_PRIMARY_DEEP};
+  font-weight: 600;
+}
+.ar-region-item:active {
+  background: #f2f3f5;
+}
+.ar-region-drawer-hint {
+  font-size: 12px;
+  color: ${COLOR_MUTED};
+  margin-bottom: 10px;
+}
+.ar-filter-section-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: ${COLOR_MUTED};
+  margin: 8px 0 12px;
+  padding-top: 4px;
+  border-top: 1px solid ${COLOR_LINE};
+}
+.ar-mini-trigger {
+  width: 100%;
+  cursor: pointer;
+  caret-color: transparent;
+}
+.ar-picker-single {
+  max-height: 260px;
+  overflow-y: auto;
+  border: 1px solid ${COLOR_LINE};
+  border-radius: 10px;
+  background: ${COLOR_BG};
+  -webkit-overflow-scrolling: touch;
+}
+.ar-date-range-tabs {
+  display: flex;
+  gap: 6px;
+  background: #f2f3f5;
+  border-radius: 10px;
+  padding: 4px;
+  margin-bottom: 4px;
+}
+.ar-date-range-tab {
+  flex: 1;
+  padding: 8px 6px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 13px;
+  color: ${COLOR_MUTED};
+  cursor: pointer;
+  line-height: 1.35;
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
+}
+.ar-date-range-tab.active {
+  background: ${COLOR_BG};
+  color: ${COLOR_TEXT};
+  font-weight: 600;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+}
+.ar-date-range-tab em {
+  display: block;
+  font-style: normal;
+  font-size: 11px;
+  font-weight: 400;
+  color: ${COLOR_MUTED};
+  margin-top: 3px;
+}
+.ar-date-range-tab.active em {
+  color: ${COLOR_PRIMARY_DEEP};
+  font-weight: 500;
+}
+.ar-date-wheel-wrap {
+  position: relative;
+  height: 220px;
+  display: flex;
+  border-radius: 10px;
+  overflow: hidden;
+  background: ${COLOR_BG};
+  border: 1px solid ${COLOR_LINE};
+}
+.ar-date-wheel-highlight {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 40px;
+  border-top: 1px solid ${COLOR_LINE};
+  border-bottom: 1px solid ${COLOR_LINE};
+  pointer-events: none;
+  z-index: 2;
+  border-radius: 4px;
+}
+.ar-date-wheel-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 72px;
+  pointer-events: none;
+  z-index: 1;
+}
+.ar-date-wheel-fade.top {
+  top: 0;
+  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
+}
+.ar-date-wheel-fade.bottom {
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
+}
+.ar-date-wheel-col {
+  flex: 1;
+  height: 220px;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.ar-date-wheel-col::-webkit-scrollbar {
+  display: none;
+}
+.ar-date-wheel-col + .ar-date-wheel-col {
+  border-left: 1px solid ${COLOR_LINE};
+}
+.ar-date-wheel-pad {
+  height: 90px;
+  flex-shrink: 0;
+}
+.ar-date-wheel-item {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  scroll-snap-align: center;
+  font-size: 15px;
+  color: ${COLOR_MUTED};
+  user-select: none;
+}
+.ar-date-wheel-item.active {
+  color: ${COLOR_TEXT};
+  font-weight: 600;
+  font-size: 17px;
+}
+.ar-date-wheel-unit {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 13px;
+  color: ${COLOR_MUTED};
+  pointer-events: none;
+  z-index: 3;
+  font-weight: 500;
+}
+.ar-date-wheel-unit.y { left: 33.33%; margin-left: 28px; }
+.ar-date-wheel-unit.m { left: 66.66%; margin-left: 18px; }
+.ar-date-wheel-unit.d { right: 12px; }
+.ar-plate-kb-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 30;
+}
+.ar-plate-kb {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 31;
+  background: #ebedf0;
+  border-radius: 14px 14px 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
+}
+.ar-plate-kb-head {
+  padding: 12px 16px 10px;
+  background: ${COLOR_BG};
+  border-radius: 14px 14px 0 0;
+  border-bottom: 1px solid ${COLOR_LINE};
+}
+.ar-plate-kb-title {
+  font-size: 13px;
+  color: ${COLOR_MUTED};
+  margin-bottom: 10px;
+  text-align: center;
+}
+.ar-plate-cells {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.ar-plate-cell {
+  width: 34px;
+  height: 44px;
+  border: 1px solid ${COLOR_LINE};
+  border-radius: 6px;
+  background: ${COLOR_PAGE};
+  font-size: 18px;
+  font-weight: 700;
+  color: ${COLOR_TEXT};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ar-plate-cell.active {
+  border-color: ${COLOR_PRIMARY_DEEP};
+  box-shadow: 0 0 0 2px rgba(0, 191, 165, 0.2);
+  background: ${COLOR_BG};
+}
+.ar-plate-cell.filled {
+  color: ${COLOR_PRIMARY_DEEP};
+}
+.ar-plate-cell-sep {
+  width: 6px;
+  height: 4px;
+  border-radius: 50%;
+  background: ${COLOR_MUTED};
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+.ar-plate-kb-toolbar {
+  display: flex;
+  gap: 10px;
+  padding: 8px 12px;
+  background: #ebedf0;
+}
+.ar-plate-kb-tool {
+  flex: 1;
+  height: 40px;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ar-plate-kb-tool--delete {
+  background: #d8dce3;
+  color: ${COLOR_TEXT};
+}
+.ar-plate-kb-tool--ok {
+  background: linear-gradient(135deg, ${COLOR_PRIMARY} 0%, ${COLOR_PRIMARY_DEEP} 100%);
+  color: #fff;
+}
+.ar-plate-keys {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 6px;
+  padding: 0 10px 12px;
+  max-height: 220px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.ar-plate-key {
+  height: 42px;
+  border: none;
+  border-radius: 6px;
+  background: ${COLOR_BG};
+  font-size: 17px;
+  font-weight: 600;
+  color: ${COLOR_TEXT};
+  cursor: pointer;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  font-family: inherit;
+  padding: 0;
+}
+.ar-plate-key:active {
+  background: #dfe3e8;
+}
+.ar-filter-btn {
+  width: 42px;
+  height: 42px;
+  border-radius: 21px;
+  border: none;
+  background: ${COLOR_BG};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  flex-shrink: 0;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.ar-filter-btn:active {
+  transform: scale(0.96);
+}
+.ar-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 14px 24px;
+  -webkit-overflow-scrolling: touch;
+}
+.ar-card {
+  background: ${COLOR_BG};
+  border-radius: 14px;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
+  border: 1px solid rgba(0,0,0,0.03);
+  cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+.ar-card:active {
+  transform: scale(0.985);
+  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06);
+}
+.ar-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.ar-plate-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-width: 0;
+  flex: 1;
+}
+.ar-plate {
+  font-size: 17px;
+  font-weight: 800;
+  color: ${COLOR_PRIMARY_DEEP};
+  letter-spacing: 0.04em;
+}
+.ar-plate-tag {
+  margin: 0 !important;
+  font-size: 11px !important;
+  line-height: 18px !important;
+  border-radius: 4px !important;
+  font-weight: 600 !important;
+}
+.ar-plate-tag--saved {
+  color: ${COLOR_PRIMARY_DEEP} !important;
+  border-color: rgba(22, 209, 161, 0.35) !important;
+  background: rgba(22, 209, 161, 0.1) !important;
+}
+.ar-operate-foot-btns {
+  display: flex;
+  gap: 10px;
+}
+.ar-operate-foot-btns .ant-btn {
+  flex: 1;
+  height: 48px !important;
+  border-radius: 10px !important;
+  font-weight: 600;
+}
+.ar-card-head-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+.ar-card-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: ${COLOR_MUTED};
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.ar-kv {
+  display: flex;
+  font-size: 14px;
+  line-height: 1.5;
+  margin-top: 6px;
+}
+.ar-kv-label {
+  color: ${COLOR_MUTED};
+  flex: 0 0 72px;
+}
+.ar-kv-value {
+  color: ${COLOR_TEXT};
+  flex: 1;
+  font-weight: 500;
+}
+.ar-empty {
+  text-align: center;
+  padding: 48px 16px;
+  color: ${COLOR_MUTED};
+  font-size: 14px;
+}
+.ar-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  min-height: 40px;
+}
+.ar-filter-label {
+  flex: 0 0 72px;
+  text-align: right;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${COLOR_MUTED};
+  line-height: 1.35;
+}
+.ar-filter-control {
+  flex: 1;
+  min-width: 0;
+}
+.ar-filter-control .ant-input,
+.ar-filter-control .ant-select,
+.ar-filter-control .ant-picker {
+  width: 100% !important;
+}
+.ar-drawer-foot {
+  display: flex;
+  gap: 10px;
+  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid ${COLOR_LINE};
+}
+.ar-operate-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.ar-operate-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 14px 100px;
+  -webkit-overflow-scrolling: touch;
+}
+.ar-ocr-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 25;
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  touch-action: none;
+}
+.ar-ocr-mask-panel {
+  text-align: center;
+  padding: 28px 32px;
+  background: ${COLOR_BG};
+  border-radius: 14px;
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.14);
+  border: 1px solid ${COLOR_LINE};
+  min-width: 220px;
+  max-width: 280px;
+}
+.ar-ocr-mask-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: ${COLOR_TEXT};
+  margin-top: 14px;
+}
+.ar-ocr-mask-desc {
+  font-size: 13px;
+  color: ${COLOR_MUTED};
+  margin-top: 8px;
+  line-height: 1.45;
+}
+.ar-operate-foot .ant-btn-primary[disabled] {
+  background: #c9cdd4 !important;
+  border-color: #c9cdd4 !important;
+  color: #fff !important;
+  opacity: 1;
+}
+.ar-section {
+  background: ${COLOR_BG};
+  border-radius: 14px;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
+  border: 1px solid rgba(0,0,0,0.03);
+}
+.ar-section--form {
+  padding: 14px 0 8px;
+}
+.ar-section--form .ar-section-title {
+  padding: 0 20px 10px;
+  margin-bottom: 0;
+}
+.ar-section-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px 10px;
+  margin-bottom: 0;
+}
+.ar-section-title-row .ar-section-title-text {
+  font-size: 15px;
+  font-weight: 700;
+  color: ${COLOR_TEXT};
+}
+.ar-section-fold {
+  border: none;
+  background: transparent;
+  color: ${COLOR_PRIMARY_DEEP};
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 0;
+}
+.ar-section-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: ${COLOR_TEXT};
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ar-section-title .required {
+  color: ${COLOR_DANGER};
+  font-size: 14px;
+}
+.ar-form-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 52px;
+  box-sizing: border-box;
+  position: relative;
+  border-bottom: none;
+}
+.ar-form-row::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: ${COLOR_LINE};
+  pointer-events: none;
+}
+.ar-form-row:last-child::after {
+  display: none;
+}
+.ar-form-label {
+  flex: 0 0 92px;
+  text-align: left;
+  font-size: 14px;
+  color: ${COLOR_MUTED};
+  font-weight: 500;
+  line-height: 1.35;
+  flex-shrink: 0;
+}
+.ar-form-label.required::before {
+  content: '*';
+  color: ${COLOR_DANGER};
+  margin-right: 2px;
+}
+.ar-form-control {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.ar-form-control .ant-input,
+.ar-form-control .ant-select,
+.ar-form-control .ant-input-number,
+.ar-form-control .ant-picker {
+  width: 100% !important;
+  max-width: 100%;
+}
+.ar-form-control .ant-select-selector,
+.ar-form-control .ant-input,
+.ar-form-control .ant-input-number-input-wrap,
+.ar-form-control .ant-input-number {
+  min-height: 32px !important;
+}
+/* 隐藏式输入：无边框，点击即录入，内容右对齐 */
+.ar-form-control .ant-input,
+.ar-form-control .ant-input-number,
+.ar-form-control .ant-input-number-input-wrap,
+.ar-form-control textarea.ant-input {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  text-align: right !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.ar-form-control .ant-input-number-input {
+  text-align: right !important;
+}
+.ar-form-control .ant-input::placeholder,
+.ar-form-control .ant-input-number-input::placeholder,
+.ar-form-control textarea.ant-input::placeholder {
+  color: ${COLOR_MUTED} !important;
+  opacity: 1;
+}
+.ar-form-control .ant-input::placeholder,
+.ar-form-control .ant-input-number-input::placeholder {
+  text-align: right;
+}
+.ar-form-control .ant-input:focus,
+.ar-form-control .ant-input-number-focused,
+.ar-form-control .ant-input-number:focus-within,
+.ar-form-control textarea.ant-input:focus {
+  box-shadow: none !important;
+  background: rgba(22, 209, 161, 0.06) !important;
+  border-radius: 6px !important;
+}
+.ar-form-control .ant-select {
+  text-align: right;
+}
+.ar-form-control .ant-select .ant-select-selector {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding-left: 4px !important;
+  padding-right: 28px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+}
+.ar-form-control .ant-select .ant-select-arrow {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  margin: 0;
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.ar-form-control .ant-select .ant-select-selection-wrap,
+.ar-form-control .ant-select .ant-select-selection-overflow {
+  flex: 1;
+  min-width: 0;
+  justify-content: flex-end;
+}
+.ar-form-control .ant-select .ant-select-selection-search {
+  inset-inline-start: auto !important;
+  inset-inline-end: 28px !important;
+  left: auto !important;
+  right: 28px !important;
+  width: auto !important;
+  max-width: calc(100% - 28px);
+}
+.ar-form-control .ant-select .ant-select-selection-search-input {
+  text-align: right !important;
+}
+.ar-form-control .ant-select-selection-item,
+.ar-form-control .ant-select-selection-placeholder,
+.ar-form-control .ant-select .ant-select-selection-selected-value,
+.ar-form-control .ant-select .ant-select-selection__placeholder {
+  flex: 1;
+  min-width: 0;
+  text-align: right !important;
+  padding-inline-end: 4px !important;
+  padding-right: 4px !important;
+  margin-inline-end: 0 !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-content: flex-end;
+}
+.ar-form-control .ant-select-selection-placeholder,
+.ar-form-control .ant-select .ant-select-selection__placeholder {
+  color: ${COLOR_MUTED} !important;
+}
+.ar-form-control .ant-select-focused .ant-select-selector {
+  background: rgba(22, 209, 161, 0.06) !important;
+  border-radius: 6px !important;
+}
+/* Ant Design 4 下拉兼容 */
+.ar-form-control .ant-select-selection {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding-right: 28px !important;
+}
+.ar-form-control .ant-select-selection__rendered {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  text-align: right;
+}
+.ar-form-control .ant-select-selection-selected-value,
+.ar-form-control .ant-select-selection__placeholder {
+  float: right !important;
+  max-width: calc(100% - 4px);
+  padding-right: 4px;
+  text-align: right !important;
+}
+.ar-form-control .ant-select-arrow {
+  right: 0 !important;
+}
+.ar-form-control .ant-input-number-handler-wrap {
+  display: none;
+}
+.ar-form-readonly {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 14px;
+  line-height: 1.5715;
+  color: ${COLOR_TEXT};
+  font-weight: 500;
+  word-break: break-all;
+  text-align: right;
+  background: transparent;
+}
+.ar-form-readonly.plate {
+  font-size: 17px;
+  font-weight: 800;
+  color: ${COLOR_PRIMARY_DEEP};
+  letter-spacing: 0.04em;
+}
+.ar-form-readonly--multiline {
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.45;
+}
+.ar-operate-scroll .ar-section {
+  text-align: left;
+}
+.ar-form-grid {
+  display: flex;
+  flex-direction: column;
+}
+.ar-form-grid .ar-form-row {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.ar-form-grid .ar-form-row::after {
+  left: 20px;
+  right: 20px;
+}
+.ar-form-grid .ar-form-control .ant-input-affix-wrapper,
+.ar-form-grid .ar-form-control textarea.ant-input {
+  resize: none;
+}
+.ar-form-grid .ar-form-row--textarea textarea.ant-input {
+  height: 32px !important;
+  min-height: 32px !important;
+  line-height: 22px !important;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+}
+.ar-form-row--remark-block {
+  min-height: 72px;
+  align-items: flex-start;
+  padding-top: 8px;
+  padding-bottom: 10px;
+}
+.ar-form-row--remark-block .ar-form-control {
+  width: 100%;
+  justify-content: stretch;
+}
+.ar-form-row--remark-block textarea.ant-input {
+  width: 100% !important;
+  min-height: 52px !important;
+  height: 52px !important;
+  line-height: 22px !important;
+  padding: 4px 0 !important;
+  text-align: left !important;
+  resize: none !important;
+}
+.ar-form-row--remark-block textarea.ant-input::placeholder {
+  color: ${COLOR_MUTED} !important;
+  text-align: left;
+}
+.ar-photo-block {
+  padding: 4px 20px 16px;
+}
+.ar-photo-block-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: ${COLOR_MUTED};
+  margin-bottom: 10px;
+  text-align: left;
+}
+.ar-photo-block-title.required::before {
+  content: '*';
+  color: ${COLOR_DANGER};
+  margin-right: 2px;
+}
+.ar-photo-hint {
+  margin-top: 8px;
+  font-size: 12px;
+  color: ${COLOR_MUTED};
+  text-align: left;
+  line-height: 1.4;
+}
+.ar-photo-empty {
+  margin: 0 20px 8px;
+  padding: 28px 12px;
+  text-align: center;
+  font-size: 13px;
+  color: ${COLOR_MUTED};
+  background: #f7f8fa;
+  border-radius: 10px;
+  border: 1px dashed ${COLOR_LINE};
+}
+.ar-photo-gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+.ar-photo-upload-cell {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+.ar-photo-upload-cell .ant-upload {
+  display: block;
+  width: 100%;
+}
+.ar-photo-upload-cell .ant-upload-select {
+  display: block !important;
+  width: 100% !important;
+  height: auto !important;
+  margin: 0 !important;
+  border: none !important;
+  background: transparent !important;
+}
+.ar-photo-slot {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+.ar-photo-slot--add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed ${COLOR_LINE};
+  background: #fafafa;
+  color: ${COLOR_MUTED};
+  cursor: pointer;
+  gap: 2px;
+}
+.ar-photo-slot--add:active {
+  border-color: ${COLOR_PRIMARY};
+  background: #f0fdf9;
+}
+.ar-photo-add-icon {
+  font-size: 22px;
+  line-height: 1;
+  font-weight: 300;
+}
+.ar-photo-add-text {
+  font-size: 12px;
+  line-height: 1.2;
+}
+.ar-photo-item {
+  overflow: visible;
+}
+.ar-photo-item-thumb {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  border: none;
+  padding: 0;
+  background: ${COLOR_PAGE};
+  cursor: pointer;
+}
+.ar-photo-item-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.ar-photo-del {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: rgba(0, 0, 0, 0.72);
+  color: #fff;
+  font-size: 14px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  z-index: 2;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+.ar-photo-del:active {
+  background: ${COLOR_DANGER};
+}
+.ar-photo-preview-img {
+  width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+}
+.ar-ocr-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+.ar-ocr-banner--done {
+  background: #f2f3f5;
+  color: ${COLOR_MUTED};
+}
+.ar-ocr-banner--error {
+  background: rgba(245, 63, 63, 0.08);
+  color: ${COLOR_DANGER};
+}
+.ar-ocr-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${COLOR_PRIMARY};
+  flex-shrink: 0;
+  animation: ar-ocr-pulse 1s ease-in-out infinite;
+}
+@keyframes ar-ocr-pulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.85); }
+  50% { opacity: 1; transform: scale(1); }
+}
+.ar-form-control .ar-form-date-trigger {
+  width: 100% !important;
+  max-width: 100%;
+  min-height: 32px !important;
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  text-align: right !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  cursor: pointer;
+  caret-color: transparent;
+}
+.ar-form-control .ar-form-date-trigger::placeholder {
+  color: ${COLOR_MUTED} !important;
+  opacity: 1;
+  text-align: right;
+}
+.ar-form-control .ar-form-date-trigger:focus {
+  box-shadow: none !important;
+  background: rgba(22, 209, 161, 0.06) !important;
+  border-radius: 6px !important;
+}
+.ar-form-control .ar-form-date-trigger[disabled] {
+  color: ${COLOR_MUTED};
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+.ar-add-btn {
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 48px;
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: ${COLOR_BG};
+  border-radius: 10px;
+  border: 1px dashed ${COLOR_LINE};
+  font-family: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 600;
+  color: ${COLOR_TEXT};
+  line-height: 1.4;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+.ar-add-btn:active {
+  background: #f7f8fa;
+}
+.ar-add-btn.filled {
+  border-style: solid;
+  border-color: rgba(22, 209, 161, 0.4);
+  color: ${COLOR_PRIMARY_DEEP};
+}
+.ar-add-btn-sub {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: ${COLOR_MUTED};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ar-operate-foot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
+  background: ${COLOR_BG};
+  border-top: 1px solid ${COLOR_LINE};
+  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
+}
+.ar-sheet-body {
+  padding: 4px 0 8px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.ar-prd-doc {
+  font-size: 13px;
+  line-height: 1.7;
+  color: ${COLOR_TEXT};
+}
+.ar-prd-meta {
+  font-size: 12px;
+  color: ${COLOR_MUTED};
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid ${COLOR_LINE};
+}
+.ar-prd-h2 {
+  font-size: 15px;
+  font-weight: 700;
+  color: ${COLOR_TEXT};
+  margin: 18px 0 8px;
+}
+.ar-prd-h2:first-of-type {
+  margin-top: 4px;
+}
+.ar-prd-h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: ${COLOR_TEXT};
+  margin: 12px 0 6px;
+}
+.ar-prd-p {
+  margin: 0 0 8px;
+  color: ${COLOR_TEXT};
+}
+.ar-prd-ul, .ar-prd-ol {
+  margin: 0 0 10px;
+  padding-left: 20px;
+}
+.ar-prd-li {
+  margin-bottom: 5px;
+}
+.ar-prd-table-wrap {
+  overflow-x: auto;
+  margin: 8px 0 12px;
+}
+.ar-prd-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.ar-prd-table th,
+.ar-prd-table td {
+  border: 1px solid ${COLOR_LINE};
+  padding: 6px 8px;
+  text-align: left;
+  vertical-align: top;
+}
+.ar-prd-table th {
+  background: #f7f8fa;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.ar-prd-footnote {
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px solid ${COLOR_LINE};
+  font-size: 12px;
+  color: ${COLOR_MUTED};
+  line-height: 1.55;
+}
+.ar-prd-highlight {
+  margin: 14px 0;
+  padding: 12px 14px;
+  background: rgba(22, 209, 161, 0.08);
+  border: 1px solid rgba(22, 209, 161, 0.35);
+  border-radius: 10px;
+}
+.ar-prd-highlight-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: ${COLOR_PRIMARY_DEEP};
+  margin-bottom: 8px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ar-card, .ar-filter-btn, .ar-tab { transition: none; }
+}
+`;
+
+const IconFilter = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={COLOR_PRIMARY_DEEP} strokeWidth="2" strokeLinecap="round">
+    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
+  </svg>
+);
+
+const IconChevron = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+);
+
+const IconBack = () => (
+  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="15 18 9 12 15 6" />
+  </svg>
+);
+
+const IconStatusSignal = () => (
+  <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor" aria-hidden="true">
+    <rect x="0" y="7" width="3" height="5" rx="0.5" opacity="0.35" />
+    <rect x="5" y="5" width="3" height="7" rx="0.5" opacity="0.55" />
+    <rect x="10" y="2" width="3" height="10" rx="0.5" opacity="0.75" />
+    <rect x="15" y="0" width="3" height="12" rx="0.5" />
+  </svg>
+);
+
+const IconStatusWifi = () => (
+  <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
+    <path d="M8 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor" stroke="none" />
+    <path d="M4.5 7.2a4.8 4.8 0 0 1 7 0" strokeLinecap="round" />
+    <path d="M1.5 4.2a8.5 8.5 0 0 1 13 0" strokeLinecap="round" />
+  </svg>
+);
+
+const IconStatusBattery = () => (
+  <svg width="26" height="12" viewBox="0 0 26 12" fill="none" aria-hidden="true">
+    <rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="currentColor" strokeOpacity="0.45" />
+    <rect x="2.5" y="2.5" width="16" height="7" rx="1.5" fill="currentColor" />
+    <path d="M23 4.5v3c.8-.45 1.3-1.15 1.3-1.5S23.8 4.95 23 4.5Z" fill="currentColor" fillOpacity="0.45" />
+  </svg>
+);
+
+const IphoneStatusBar = () => (
+  <div className="ar-status-bar">
+    <span className="ar-status-time">9:41</span>
+    <div className="ar-status-icons">
+      <IconStatusSignal />
+      <IconStatusWifi />
+      <IconStatusBattery />
+    </div>
+  </div>
+);
+
+const MpCapsule = ({ onMore, onExit }) => (
+  <div className="ar-mp-capsule" role="group" aria-label="小程序菜单">
+    <button type="button" className="ar-mp-capsule-btn ar-mp-capsule-btn--more" onClick={onMore} aria-label="更多">
+      ···
+    </button>
+    <span className="ar-mp-capsule-divider" aria-hidden="true" />
+    <button type="button" className="ar-mp-capsule-btn" onClick={onExit} aria-label="关闭小程序">
+      <span className="ar-mp-capsule-close-icon">×</span>
+    </button>
+  </div>
+);
+
+const MpNavBar = ({ title, showBack, onBack, showPrdLink, onPrdClick, onMore, onExit }) => (
+  <div className="ar-mp-navbar">
+    <div className="ar-mp-navbar-left">
+      {showBack ? (
+        <button type="button" className="ar-mp-back" onClick={onBack} aria-label="返回">
+          <IconBack />
+        </button>
+      ) : null}
+    </div>
+    <div className="ar-mp-navbar-title">{title}</div>
+    <div className="ar-mp-navbar-right">
+      {showPrdLink && (
+        <button type="button" className="ar-mp-link" onClick={onPrdClick}>
+          需求说明
+        </button>
+      )}
+      <MpCapsule onMore={onMore} onExit={onExit} />
+    </div>
+  </div>
+);
+
+const MiniProgramChrome = ({ title, showBack, onBack, showPrdLink, onPrdClick }) => {
+  const handleMore = () => message.info('更多菜单（原型）');
+  const handleExit = () => message.warning('退出小程序（原型）');
+
+  return (
+    <div className="ar-chrome">
+      <IphoneStatusBar />
+      <MpNavBar
+        title={title}
+        showBack={showBack}
+        onBack={onBack}
+        showPrdLink={showPrdLink}
+        onPrdClick={onPrdClick}
+        onMore={handleMore}
+        onExit={handleExit}
+      />
+    </div>
+  );
+};
+
+const FormField = ({ label, required, rowClassName, children }) => (
+  <div className={`ar-form-row${rowClassName ? ` ${rowClassName}` : ''}`}>
+    <span className={`ar-form-label${required ? ' required' : ''}`}>{label}</span>
+    <div className="ar-form-control">{children}</div>
+  </div>
+);
+
+const InfoRow = ({ label, children, valueClassName }) => (
+  <div className="ar-form-row">
+    <span className="ar-form-label">{label}</span>
+    <div className="ar-form-control">
+      <div className={`ar-form-readonly${valueClassName ? ` ${valueClassName}` : ''}`}>{children}</div>
+    </div>
+  </div>
+);
+
+const PlateKeyboardPanel = ({ open, value, onChange, onConfirm, onClose }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const plate = (value || '').toUpperCase();
+
+  useEffect(() => {
+    if (open) {
+      setActiveIndex(Math.min(plate.length, MAX_PLATE_INPUT_LEN - 1));
+    }
+  }, [open, plate.length]);
+
+  if (!open) return null;
+
+  const keys = getPlateKeysForIndex(activeIndex);
+
+  const handleKey = (key) => {
+    const arr = plate.split('');
+    arr[activeIndex] = key;
+    const next = arr.join('').slice(0, MAX_PLATE_INPUT_LEN);
+    onChange(next);
+    if (activeIndex < MAX_PLATE_INPUT_LEN - 1) {
+      setActiveIndex(activeIndex + 1);
+    }
+  };
+
+  const handleDelete = () => {
+    if (!plate.length) return;
+    const next = plate.slice(0, -1);
+    onChange(next);
+    setActiveIndex(Math.max(0, next.length));
+  };
+
+  const cells = [];
+  for (let i = 0; i < MAX_PLATE_INPUT_LEN; i += 1) {
+    if (i === 2) {
+      cells.push(<span key="sep" className="ar-plate-cell-sep" aria-hidden="true" />);
+    }
+    cells.push(
+      <button
+        key={`cell-${i}`}
+        type="button"
+        className={`ar-plate-cell${activeIndex === i ? ' active' : ''}${plate[i] ? ' filled' : ''}`}
+        onClick={() => setActiveIndex(i)}
+        aria-label={`车牌第${i + 1}位`}
+      >
+        {plate[i] || ''}
+      </button>
+    );
+  }
+
+  return (
+    <>
+      <div className="ar-plate-kb-mask" role="presentation" onClick={onClose} />
+      <div className="ar-plate-kb" role="dialog" aria-label="车牌号输入">
+        <div className="ar-plate-kb-head">
+          <div className="ar-plate-kb-title">请输入车牌号</div>
+          <div className="ar-plate-cells">{cells}</div>
+        </div>
+        <div className="ar-plate-kb-toolbar">
+          <button type="button" className="ar-plate-kb-tool ar-plate-kb-tool--delete" onClick={handleDelete}>
+            删除
+          </button>
+          <button
+            type="button"
+            className="ar-plate-kb-tool ar-plate-kb-tool--ok"
+            onClick={() => onConfirm(plate)}
+          >
+            完成
+          </button>
+        </div>
+        <div className="ar-plate-keys">
+          {keys.map((key) => (
+            <button key={`${activeIndex}-${key}`} type="button" className="ar-plate-key" onClick={() => handleKey(key)}>
+              {key}
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+const PhotoUploadBlock = ({ label, fileList, onChange, maxPhotos = MAX_SERVICE_PHOTOS, required }) => {
+  const list = fileList || [];
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState('');
+  const canUpload = list.length < maxPhotos;
+
+  const handleChange = ({ fileList: nextList }) => {
+    onChange((nextList || []).slice(0, maxPhotos));
+  };
+
+  const handleRemove = (uid, e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onChange(list.filter((f) => f.uid !== uid));
+  };
+
+  const handlePreview = (file) => {
+    const url = getUploadPreviewUrl(file);
+    if (!url) return;
+    if (Image && typeof Image.preview === 'function') {
+      Image.preview({ src: url });
+      return;
+    }
+    setPreviewUrl(url);
+    setPreviewOpen(true);
+  };
+
+  return (
+    <div className="ar-photo-block">
+      <div className={`ar-photo-block-title${required ? ' required' : ''}`}>{label}</div>
+      <div className="ar-photo-gallery">
+        {canUpload && Upload ? (
+          <Upload
+            className="ar-photo-upload-cell"
+            showUploadList={false}
+            multiple
+            accept="image/*"
+            fileList={list}
+            beforeUpload={() => false}
+            onChange={handleChange}
+          >
+            <div className="ar-photo-slot ar-photo-slot--add">
+              <span className="ar-photo-add-icon">+</span>
+              <span className="ar-photo-add-text">上传</span>
+            </div>
+          </Upload>
+        ) : null}
+        {list.map((file) => {
+          const url = getUploadPreviewUrl(file);
+          return (
+            <div key={file.uid} className="ar-photo-slot ar-photo-item">
+              <button
+                type="button"
+                className="ar-photo-item-thumb"
+                onClick={() => handlePreview(file)}
+                aria-label="预览照片"
+              >
+                {url ? <img src={url} alt="" /> : <span style={{ fontSize: 12, color: COLOR_MUTED }}>图片</span>}
+              </button>
+              <button
+                type="button"
+                className="ar-photo-del"
+                aria-label="删除照片"
+                onClick={(e) => handleRemove(file.uid, e)}
+              >
+                ×
+              </button>
+            </div>
+          );
+        })}
+      </div>
+      <div className="ar-photo-hint">最多上传 {maxPhotos} 张，支持批量选择</div>
+      <Modal
+        open={previewOpen}
+        footer={null}
+        onCancel={() => setPreviewOpen(false)}
+        centered
+        width="92%"
+        styles={{ body: { padding: 8, textAlign: 'center' } }}
+        destroyOnClose
+      >
+        {previewUrl ? <img className="ar-photo-preview-img" src={previewUrl} alt="预览" /> : null}
+      </Modal>
+    </div>
+  );
+};
+
+/** 历史记录只读照片（仅预览，与办理页照片网格一致） */
+const PhotoReadonlyGallery = ({ label, fileList, emptyText }) => {
+  const list = fileList || [];
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState('');
+
+  const handlePreview = (file) => {
+    const url = getUploadPreviewUrl(file);
+    if (!url) return;
+    if (Image && typeof Image.preview === 'function') {
+      Image.preview({ src: url });
+      return;
+    }
+    setPreviewUrl(url);
+    setPreviewOpen(true);
+  };
+
+  return (
+    <div className="ar-photo-block">
+      <div className="ar-photo-block-title">{label}</div>
+      {list.length > 0 ? (
+        <div className="ar-photo-gallery">
+          {list.map((file) => {
+            const url = getUploadPreviewUrl(file);
+            return (
+              <div key={file.uid} className="ar-photo-slot ar-photo-item">
+                <button
+                  type="button"
+                  className="ar-photo-item-thumb"
+                  onClick={() => handlePreview(file)}
+                  aria-label="预览照片"
+                >
+                  {url ? <img src={url} alt="" /> : <span style={{ fontSize: 12, color: COLOR_MUTED }}>图片</span>}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="ar-photo-empty">{emptyText || '暂无照片'}</div>
+      )}
+      <Modal
+        open={previewOpen}
+        footer={null}
+        onCancel={() => setPreviewOpen(false)}
+        centered
+        width="92%"
+        styles={{ body: { padding: 8, textAlign: 'center' } }}
+        destroyOnClose
+      >
+        {previewUrl ? <img className="ar-photo-preview-img" src={previewUrl} alt="预览" /> : null}
+      </Modal>
+    </div>
+  );
+};
+
+const FilterRow = ({ label, children }) => (
+  <div className="ar-filter-row">
+    <span className="ar-filter-label">{label}</span>
+    <div className="ar-filter-control">{children}</div>
+  </div>
+);
+
+/** 小程序风格省市级联：底部抽屉 + 双列选择 */
+const MiniRegionPicker = ({ value, onChange, placeholder }) => {
+  const [open, setOpen] = useState(false);
+  const [draftProvince, setDraftProvince] = useState(null);
+  const [draftCity, setDraftCity] = useState(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const province = value?.[0] || PROVINCE_LIST[0];
+    setDraftProvince(province);
+    const cities = PROVINCE_CITY_MAP[province] || [];
+    const city = value?.[1] && cities.includes(value[1]) ? value[1] : cities[0] || null;
+    setDraftCity(city);
+  }, [open, value]);
+
+  const cityList = draftProvince ? PROVINCE_CITY_MAP[draftProvince] || [] : [];
+  const displayText = formatProvinceCity(value);
+
+  const handleProvincePick = (province) => {
+    setDraftProvince(province);
+    const cities = PROVINCE_CITY_MAP[province] || [];
+    setDraftCity(cities[0] || null);
+  };
+
+  const handleConfirm = () => {
+    if (!draftProvince) {
+      setOpen(false);
+      return;
+    }
+    const city = draftCity || (PROVINCE_CITY_MAP[draftProvince] || [])[0];
+    onChange(city ? [draftProvince, city] : [draftProvince]);
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Input
+        className="ar-region-trigger"
+        readOnly
+        value={displayText}
+        placeholder={placeholder || '请选择省市'}
+        onClick={() => setOpen(true)}
+        onFocus={(e) => e.target.blur()}
+      />
+      <Drawer
+        title="选择运营区域"
+        placement="bottom"
+        height={360}
+        open={open}
+        onClose={() => setOpen(false)}
+        styles={{ body: { padding: '12px 16px 0' } }}
+        footer={
+          <div className="ar-drawer-foot">
+            <Button block size="large" onClick={handleClear} style={{ height: 46, borderRadius: 8 }}>
+              清空
+            </Button>
+            <Button
+              block
+              type="primary"
+              size="large"
+              onClick={handleConfirm}
+              style={{
+                height: 46,
+                borderRadius: 8,
+                background: `linear-gradient(135deg, ${COLOR_PRIMARY} 0%, ${COLOR_PRIMARY_DEEP} 100%)`,
+                border: 'none'
+              }}
+            >
+              确定
+            </Button>
+          </div>
+        }
+      >
+        <div className="ar-region-drawer-hint">先选省份，再选城市</div>
+        <div className="ar-region-picker">
+          <div className="ar-region-col" role="listbox" aria-label="省份">
+            {PROVINCE_LIST.map((p) => (
+              <button
+                key={p}
+                type="button"
+                className={`ar-region-item${draftProvince === p ? ' active' : ''}`}
+                onClick={() => handleProvincePick(p)}
+              >
+                {p}
+              </button>
+            ))}
+          </div>
+          <div className="ar-region-col" role="listbox" aria-label="城市">
+            {cityList.map((c) => (
+              <button
+                key={c}
+                type="button"
+                className={`ar-region-item${draftCity === c ? ' active' : ''}`}
+                onClick={() => setDraftCity(c)}
+              >
+                {c}
+              </button>
+            ))}
+          </div>
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+/** 小程序风格单选（办理人等） */
+const MiniOptionPicker = ({ value, onChange, options, placeholder, title, clearLabel }) => {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value ?? '');
+
+  useEffect(() => {
+    if (open) setDraft(value ?? '');
+  }, [open, value]);
+
+  const selected = options.find((o) => o.value === (value ?? ''));
+  const displayText = selected && selected.value !== '' ? selected.label : '';
+
+  const handleConfirm = () => {
+    onChange(draft);
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange('');
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Input
+        className="ar-mini-trigger"
+        readOnly
+        value={displayText}
+        placeholder={placeholder || '请选择'}
+        onClick={() => setOpen(true)}
+        onFocus={(e) => e.target.blur()}
+      />
+      <Drawer
+        title={title || '请选择'}
+        placement="bottom"
+        height={320}
+        open={open}
+        onClose={() => setOpen(false)}
+        styles={{ body: { padding: '12px 16px 0' } }}
+        footer={
+          <div className="ar-drawer-foot">
+            <Button block size="large" onClick={handleClear} style={{ height: 46, borderRadius: 8 }}>
+              {clearLabel || '全部'}
+            </Button>
+            <Button
+              block
+              type="primary"
+              size="large"
+              onClick={handleConfirm}
+              style={{
+                height: 46,
+                borderRadius: 8,
+                background: `linear-gradient(135deg, ${COLOR_PRIMARY} 0%, ${COLOR_PRIMARY_DEEP} 100%)`,
+                border: 'none'
+              }}
+            >
+              确定
+            </Button>
+          </div>
+        }
+      >
+        <div className="ar-picker-single" role="listbox">
+          {options.map((opt) => (
+            <button
+              key={opt.value || '__all__'}
+              type="button"
+              className={`ar-region-item${draft === opt.value ? ' active' : ''}`}
+              onClick={() => setDraft(opt.value)}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+const WHEEL_ITEM_H = 40;
+const DATE_YEAR_MIN = 2018;
+const DATE_YEAR_MAX = 2032;
+
+const getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
+
+const todayDateParts = () => {
+  const t = new Date();
+  return { year: t.getFullYear(), month: t.getMonth() + 1, day: t.getDate() };
+};
+
+const partsFromMomentValue = (val) => {
+  if (val && moment) {
+    const m = moment(val);
+    if (m.isValid()) return { year: m.year(), month: m.month() + 1, day: m.date() };
+  }
+  return todayDateParts();
+};
+
+const clampDateParts = (parts) => {
+  const maxDay = getDaysInMonth(parts.year, parts.month);
+  return { ...parts, day: Math.min(parts.day, maxDay) };
+};
+
+const partsToMoment = (parts) => {
+  if (!moment || !parts) return null;
+  const p = clampDateParts(parts);
+  const s = `${p.year}-${String(p.month).padStart(2, '0')}-${String(p.day).padStart(2, '0')}`;
+  const m = moment(s, 'YYYY-MM-DD');
+  return m.isValid() ? m : null;
+};
+
+const formatPartsLabel = (parts) => {
+  const p = clampDateParts(parts);
+  return `${p.year}-${String(p.month).padStart(2, '0')}-${String(p.day).padStart(2, '0')}`;
+};
+
+/** 微信小程序风格滚轮列（年 / 月 / 日） */
+const DateWheelColumn = ({ items, value, onChange }) => {
+  const colRef = useRef(null);
+  const scrollTimer = useRef(null);
+
+  const scrollToValue = useCallback(
+    (v, smooth) => {
+      const el = colRef.current;
+      if (!el) return;
+      const idx = items.indexOf(v);
+      if (idx < 0) return;
+      el.scrollTo({ top: idx * WHEEL_ITEM_H, behavior: smooth ? 'smooth' : 'auto' });
+    },
+    [items]
+  );
+
+  useEffect(() => {
+    scrollToValue(value, false);
+  }, [value, items, scrollToValue]);
+
+  const handleScroll = () => {
+    const el = colRef.current;
+    if (!el) return;
+    if (scrollTimer.current) clearTimeout(scrollTimer.current);
+    scrollTimer.current = setTimeout(() => {
+      const idx = Math.round(el.scrollTop / WHEEL_ITEM_H);
+      const clamped = Math.max(0, Math.min(idx, items.length - 1));
+      const next = items[clamped];
+      if (next !== value) onChange(next);
+      scrollToValue(next, true);
+    }, 80);
+  };
+
+  return (
+    <div className="ar-date-wheel-col" ref={colRef} onScroll={handleScroll}>
+      <div className="ar-date-wheel-pad" aria-hidden="true" />
+      {items.map((item) => (
+        <div key={item} className={`ar-date-wheel-item${item === value ? ' active' : ''}`}>
+          {item}
+        </div>
+      ))}
+      <div className="ar-date-wheel-pad" aria-hidden="true" />
+    </div>
+  );
+};
+
+/** 小程序风格单日选择（滚轮，精确到日） */
+const MiniSingleDatePicker = ({
+  value,
+  onChange,
+  placeholder,
+  title,
+  hint,
+  disabled,
+  inForm
+}) => {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(todayDateParts);
+
+  useEffect(() => {
+    if (!open) return;
+    setDraft(partsFromMomentValue(value));
+  }, [open, value]);
+
+  const years = useMemo(
+    () => Array.from({ length: DATE_YEAR_MAX - DATE_YEAR_MIN + 1 }, (_, i) => DATE_YEAR_MIN + i),
+    []
+  );
+  const months = useMemo(() => Array.from({ length: 12 }, (_, i) => i + 1), []);
+  const days = useMemo(() => {
+    const max = getDaysInMonth(draft.year, draft.month);
+    return Array.from({ length: max }, (_, i) => i + 1);
+  }, [draft.year, draft.month]);
+
+  useEffect(() => {
+    const max = getDaysInMonth(draft.year, draft.month);
+    if (draft.day <= max) return;
+    setDraft((p) => ({ ...p, day: max }));
+  }, [draft.year, draft.month, draft.day]);
+
+  const displayText = formatSingleDateDisplay(value);
+
+  const handleConfirm = () => {
+    const m = partsToMoment(draft);
+    if (!m) {
+      message.warning('请选择日期');
+      return;
+    }
+    onChange(m.format('YYYY-MM-DD'));
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+    setOpen(false);
+  };
+
+  const inputCls = inForm ? 'ar-form-date-trigger' : 'ar-mini-trigger';
+
+  return (
+    <>
+      <Input
+        className={inputCls}
+        bordered={false}
+        readOnly
+        disabled={disabled}
+        value={displayText}
+        placeholder={placeholder || '请选择日期'}
+        onClick={() => {
+          if (disabled) return;
+          setOpen(true);
+        }}
+        onFocus={(e) => e.target.blur()}
+      />
+      <Drawer
+        title={title || '选择日期'}
+        placement="bottom"
+        height={380}
+        open={open}
+        onClose={() => setOpen(false)}
+        styles={{ body: { padding: '12px 16px 0' } }}
+        footer={
+          <div className="ar-drawer-foot">
+            <Button block size="large" onClick={handleClear} style={{ height: 46, borderRadius: 8 }}>
+              清空
+            </Button>
+            <Button
+              block
+              type="primary"
+              size="large"
+              onClick={handleConfirm}
+              style={{
+                height: 46,
+                borderRadius: 8,
+                background: `linear-gradient(135deg, ${COLOR_PRIMARY} 0%, ${COLOR_PRIMARY_DEEP} 100%)`,
+                border: 'none'
+              }}
+            >
+              确定
+            </Button>
+          </div>
+        }
+      >
+        <div className="ar-region-drawer-hint">{hint || '滑动滚轮选择年月日'}</div>
+        <div className="ar-date-wheel-wrap" key={`${draft.year}-${draft.month}`}>
+          <div className="ar-date-wheel-fade top" aria-hidden="true" />
+          <div className="ar-date-wheel-fade bottom" aria-hidden="true" />
+          <div className="ar-date-wheel-highlight" aria-hidden="true" />
+          <span className="ar-date-wheel-unit y">年</span>
+          <span className="ar-date-wheel-unit m">月</span>
+          <span className="ar-date-wheel-unit d">日</span>
+          <DateWheelColumn items={years} value={draft.year} onChange={(y) => setDraft((p) => clampDateParts({ ...p, year: y }))} />
+          <DateWheelColumn
+            items={months}
+            value={draft.month}
+            onChange={(mo) => setDraft((p) => clampDateParts({ ...p, month: mo }))}
+          />
+          <DateWheelColumn items={days} value={draft.day} onChange={(d) => setDraft((p) => ({ ...p, day: d }))} />
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+/** 小程序风格开始-结束日期（滚轮，精确到日） */
+const MiniDateRangePicker = ({ value, onChange, placeholder, title, hint }) => {
+  const [open, setOpen] = useState(false);
+  const [activeEdge, setActiveEdge] = useState('start');
+  const [draftStart, setDraftStart] = useState(todayDateParts);
+  const [draftEnd, setDraftEnd] = useState(todayDateParts);
+
+  useEffect(() => {
+    if (!open) return;
+    setActiveEdge('start');
+    setDraftStart(partsFromMomentValue(value?.[0]));
+    setDraftEnd(partsFromMomentValue(value?.[1]));
+  }, [open, value]);
+
+  const activeParts = activeEdge === 'start' ? draftStart : draftEnd;
+
+  const years = useMemo(
+    () => Array.from({ length: DATE_YEAR_MAX - DATE_YEAR_MIN + 1 }, (_, i) => DATE_YEAR_MIN + i),
+    []
+  );
+  const months = useMemo(() => Array.from({ length: 12 }, (_, i) => i + 1), []);
+  const days = useMemo(() => {
+    const max = getDaysInMonth(activeParts.year, activeParts.month);
+    return Array.from({ length: max }, (_, i) => i + 1);
+  }, [activeParts.year, activeParts.month]);
+
+  useEffect(() => {
+    const max = getDaysInMonth(activeParts.year, activeParts.month);
+    if (activeParts.day <= max) return;
+    if (activeEdge === 'start') setDraftStart((p) => ({ ...p, day: max }));
+    else setDraftEnd((p) => ({ ...p, day: max }));
+  }, [activeParts.year, activeParts.month, activeParts.day, activeEdge]);
+
+  const patchActive = (patch) => {
+    const next = clampDateParts({ ...activeParts, ...patch });
+    if (activeEdge === 'start') setDraftStart(next);
+    else setDraftEnd(next);
+  };
+
+  const displayText = formatDateRangeDisplay(value);
+
+  const handleConfirm = () => {
+    const startM = partsToMoment(draftStart);
+    const endM = partsToMoment(draftEnd);
+    if (!startM || !endM) {
+      message.warning('请选择开始与结束日期');
+      return;
+    }
+    if (moment && moment(endM).isBefore(moment(startM), 'day')) {
+      message.warning('结束日期不能早于开始日期');
+      return;
+    }
+    onChange([startM, endM]);
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange(null);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Input
+        className="ar-mini-trigger"
+        readOnly
+        value={displayText}
+        placeholder={placeholder || '请选择开始-结束日期'}
+        onClick={() => setOpen(true)}
+        onFocus={(e) => e.target.blur()}
+      />
+      <Drawer
+        title={title || '选择日期范围'}
+        placement="bottom"
+        height={420}
+        open={open}
+        onClose={() => setOpen(false)}
+        styles={{ body: { padding: '12px 16px 0' } }}
+        footer={
+          <div className="ar-drawer-foot">
+            <Button block size="large" onClick={handleClear} style={{ height: 46, borderRadius: 8 }}>
+              清空
+            </Button>
+            <Button
+              block
+              type="primary"
+              size="large"
+              onClick={handleConfirm}
+              style={{
+                height: 46,
+                borderRadius: 8,
+                background: `linear-gradient(135deg, ${COLOR_PRIMARY} 0%, ${COLOR_PRIMARY_DEEP} 100%)`,
+                border: 'none'
+              }}
+            >
+              确定
+            </Button>
+          </div>
+        }
+      >
+        <div className="ar-region-drawer-hint">
+          {hint || '切换开始/结束，滑动滚轮选择日期（精确到日）'}
+        </div>
+        <div className="ar-date-range-tabs" role="tablist">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeEdge === 'start'}
+            className={`ar-date-range-tab${activeEdge === 'start' ? ' active' : ''}`}
+            onClick={() => setActiveEdge('start')}
+          >
+            开始
+            <em>{formatPartsLabel(draftStart)}</em>
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeEdge === 'end'}
+            className={`ar-date-range-tab${activeEdge === 'end' ? ' active' : ''}`}
+            onClick={() => setActiveEdge('end')}
+          >
+            结束
+            <em>{formatPartsLabel(draftEnd)}</em>
+          </button>
+        </div>
+        <div className="ar-date-wheel-wrap" key={`${activeEdge}-${activeParts.year}-${activeParts.month}`}>
+          <div className="ar-date-wheel-fade top" aria-hidden="true" />
+          <div className="ar-date-wheel-fade bottom" aria-hidden="true" />
+          <div className="ar-date-wheel-highlight" aria-hidden="true" />
+          <span className="ar-date-wheel-unit y">年</span>
+          <span className="ar-date-wheel-unit m">月</span>
+          <span className="ar-date-wheel-unit d">日</span>
+          <DateWheelColumn items={years} value={activeParts.year} onChange={(y) => patchActive({ year: y })} />
+          <DateWheelColumn items={months} value={activeParts.month} onChange={(m) => patchActive({ month: m })} />
+          <DateWheelColumn items={days} value={activeParts.day} onChange={(d) => patchActive({ day: d })} />
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+/** 年审管理 · 产品需求说明（嵌入「需求说明」弹窗） */
+const AnnualReviewPrdDoc = () => (
+  <div className="ar-prd-doc">
+    <Tag color="green" style={{ marginBottom: 8 }}>ONE-OS 小程序</Tag>
+    <div className="ar-prd-meta">
+      文档版本：V1.0 &nbsp;|&nbsp; 端：小程序 &nbsp;|&nbsp; 模块：运维 · 车辆年审
+      <br />
+      适用角色：现场办理人员、车队运维、区域运营
+    </div>
+
+    <div className="ar-prd-h2">一、背景与目标</div>
+    <p className="ar-prd-p">
+      车辆年审需在检验到期前完成办理，并同步更新行驶证检验有效期等信息。本模块为一线人员提供<strong>待办提醒、现场办理、草稿保存、历史查询</strong>能力，降低漏办与信息回填错误率，并与 Web 端年审/证照数据口径保持一致（原型阶段为模拟数据）。
+    </p>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">待办：聚焦「即将到期 / 已逾期」车辆，按紧急程度排序。</li>
+      <li className="ar-prd-li">办理：单页完成行驶证更新、检测站费用、可选二保/整备信息录入。</li>
+      <li className="ar-prd-li">历史：提交后归档，仅查看不可改，便于追溯与对账。</li>
+      <li className="ar-prd-li">
+        <strong>证照联动（重点）</strong>：年审办理中更新的行驶证照片、检验有效期，须在提交时<strong>全量同步</strong>至 Web 端「证照管理」对应车辆档案，保证台账唯一可信来源。
+      </li>
+    </ul>
+
+    <div className="ar-prd-highlight">
+      <div className="ar-prd-highlight-title">重点 · 与证照管理同步</div>
+      <p className="ar-prd-p" style={{ marginBottom: 8 }}>
+        年审小程序负责<strong>现场采集与办理</strong>；证照管理负责<strong>车辆证照台账建档与到期预警</strong>。两者通过车牌号（及 VIN 校验）关联同一车辆。
+      </p>
+      <ul className="ar-prd-ul" style={{ marginBottom: 0 }}>
+        <li className="ar-prd-li">同步时机：<strong>点击「提交」且校验通过后</strong>（保存草稿不同步，避免半成品覆盖台账）。</li>
+        <li className="ar-prd-li">同步范围：当前任务下<strong>全部最新行驶证照片</strong>（最多 4 张，以提交瞬间列表为准）+ <strong>检验有效期至</strong>（精确到日）。</li>
+        <li className="ar-prd-li">覆盖策略：<strong>全量覆盖</strong>证照管理中该车辆「行驶证」卡片的影像与「检验有效期至」，不以增量追加旧图。</li>
+        <li className="ar-prd-li">失败处理：同步失败则提交事务回滚，提示用户重试；禁止出现「年审已成功、证照未更新」。</li>
+      </ul>
+    </div>
+
+    <div className="ar-prd-h2">二、信息架构</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">列表首页：Tab「待处理」「历史记录」+ 车牌搜索 + 筛选。</li>
+      <li className="ar-prd-li">年审操作页（待办进入）：可编辑、可保存草稿、可提交。</li>
+      <li className="ar-prd-li">年审记录页（历史进入）：只读详情，结构与办理页一致。</li>
+    </ul>
+
+    <div className="ar-prd-h2">三、列表页 · 待处理</div>
+    <div className="ar-prd-h3">3.1 任务卡片字段</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">车牌号（主标题）、逾期/剩余天数标签（逾期为红色，剩余为橙色）。</li>
+      <li className="ar-prd-li">运营状态、运营区域（省-市）、到期时间。</li>
+      <li className="ar-prd-li">已保存草稿时，右侧展示「已保存」标签（位于箭头左侧）。</li>
+    </ul>
+    <div className="ar-prd-h3">3.2 排序规则（待办专用）</div>
+    <ol className="ar-prd-ol">
+      <li className="ar-prd-li">第一优先级：逾期天数越多越靠前。</li>
+      <li className="ar-prd-li">第二优先级：剩余天数越少越靠前。</li>
+    </ol>
+    <div className="ar-prd-h3">3.3 车牌搜索</div>
+    <p className="ar-prd-p">
+      点击搜索框唤起<strong>小程序风格车牌键盘</strong>（省 → 字母 → 字母数字），支持删除、完成；列表按车牌模糊匹配过滤。
+    </p>
+    <div className="ar-prd-h3">3.4 数据范围</div>
+    <p className="ar-prd-p">退出运营状态车辆不纳入待办与历史列表。</p>
+
+    <div className="ar-prd-h2">四、列表页 · 历史记录</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">卡片在待办字段基础上增加：办理人、完成时间（精确至分钟）。</li>
+      <li className="ar-prd-li">按完成时间倒序展示。</li>
+      <li className="ar-prd-li">点击卡片进入年审记录详情（只读），不可编辑、不可再次提交。</li>
+    </ul>
+
+    <div className="ar-prd-h2">五、筛选</div>
+    <p className="ar-prd-p">右侧抽屉筛选，确定后生效，支持重置。</p>
+    <div className="ar-prd-table-wrap">
+      <table className="ar-prd-table">
+        <thead>
+          <tr>
+            <th>筛选项</th>
+            <th>待处理</th>
+            <th>历史记录</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>到期时间</td>
+            <td>支持</td>
+            <td>支持</td>
+          </tr>
+          <tr>
+            <td>运营区域</td>
+            <td>省市双列级联</td>
+            <td>省市双列级联</td>
+          </tr>
+          <tr>
+            <td>办理人</td>
+            <td>—</td>
+            <td>单选（含全部）</td>
+          </tr>
+          <tr>
+            <td>完成时间</td>
+            <td>—</td>
+            <td>开始-结束（日）</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p className="ar-prd-p">日期类筛选均采用<strong>微信小程序风格滚轮</strong>：范围选择支持开始/结束切换；精确到日。</p>
+
+    <div className="ar-prd-h2">六、年审操作页</div>
+    <p className="ar-prd-p">自待办卡片进入。顶部导航含返回；内容区与顶栏保留间距，底部固定「保存」「提交」。</p>
+
+    <div className="ar-prd-h3">6.1 车辆信息（只读）</div>
+    <p className="ar-prd-p">展示车牌号、品牌、型号、检验有效期、运营状态（库存类展示可运营/待运营细分）。</p>
+
+    <div className="ar-prd-h3">6.2 更新行驶证</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">
+        <strong>行驶证照片</strong>（必填）：最多 4 张，3 列网格，首格上传，支持批量选择；可预览、删除。
+      </li>
+      <li className="ar-prd-li">
+        上传后触发 OCR（原型模拟）：全页遮罩「识别中」，识别期间不可保存/提交。
+      </li>
+      <li className="ar-prd-li">
+        OCR 仅识别到<strong>年月</strong>时，检验有效期自动填入该月<strong>最后一天</strong>；识别车牌须与年审车牌一致，否则报错并禁止提交。
+      </li>
+      <li className="ar-prd-li">
+        <strong>检验有效期</strong>（必填）：占位「上传照片自动识别」；识别完成后可点击滚轮日期组件手动调整年月日。
+      </li>
+      <li className="ar-prd-li">
+        用户在办理过程中增删改照片或调整有效期后，<strong>以提交时最终值</strong>为准写入证照管理（非 OCR 中间态、非仅首张图）。
+      </li>
+    </ul>
+
+    <div className="ar-prd-h3">6.3 同步至证照管理（字段映射）</div>
+    <div className="ar-prd-table-wrap">
+      <table className="ar-prd-table">
+        <thead>
+          <tr>
+            <th>年审小程序（提交快照）</th>
+            <th>证照管理 · 行驶证卡片</th>
+            <th>说明</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>车牌号</td>
+            <td>关联主键</td>
+            <td>定位车辆；须与证照档案一致</td>
+          </tr>
+          <tr>
+            <td>行驶证照片列表</td>
+            <td>行驶证影像（最多 4 张）</td>
+            <td>全量替换为最新上传列表</td>
+          </tr>
+          <tr>
+            <td>检验有效期至</td>
+            <td>检验有效期至</td>
+            <td>日期 YYYY-MM-DD；与 OCR/手选结果一致</td>
+          </tr>
+          <tr>
+            <td>办理人、完成时间</td>
+            <td>操作日志 / 更新人、更新时间</td>
+            <td>留痕；影像与有效期以年审提交为准</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p className="ar-prd-p">
+      证照管理侧规则对齐：检验有效期支持「选月取月末」展示逻辑时，年审同步须已落库为<strong>具体日期</strong>（小程序 OCR 识别到月后已补全月末，再允许手调）。
+    </p>
+
+    <div className="ar-prd-h3">6.4 检测服务站信息</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">检测服务站：从<strong>检测服务站列表</strong>选择（可搜索）。</li>
+      <li className="ar-prd-li">费用（元）：<strong>必填</strong>，保留两位小数。</li>
+      <li className="ar-prd-li">备注：多行文本，选填。</li>
+    </ul>
+
+    <div className="ar-prd-h3">6.5 二保信息（选填）</div>
+    <p className="ar-prd-p">默认折叠，点击「添加二保信息」展开内联卡片（非弹窗）。</p>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">二保服务站：从<strong>检测服务站列表</strong>选择（与检测站同源）。</li>
+      <li className="ar-prd-li">费用：仅当已选服务站时<strong>必填</strong>。</li>
+      <li className="ar-prd-li">备注、二保照片（最多 10 张，可批量）选填。</li>
+    </ul>
+
+    <div className="ar-prd-h3">6.6 整备服务站信息（选填）</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">整备服务站：从<strong>维修站列表</strong>选择。</li>
+      <li className="ar-prd-li">费用：仅当已选服务站时<strong>必填</strong>。</li>
+      <li className="ar-prd-li">备注、整备照片（最多 10 张，可批量）选填。</li>
+    </ul>
+
+    <div className="ar-prd-h2">七、保存与提交</div>
+    <div className="ar-prd-h3">7.1 保存（草稿）</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">随时保存当前表单（OCR 识别中除外），<strong>不做必填项校验</strong>，不关闭页面。</li>
+      <li className="ar-prd-li">待办列表展示「已保存」；再次进入自动恢复草稿。</li>
+      <li className="ar-prd-li">提交成功后清除该任务草稿。</li>
+    </ul>
+    <div className="ar-prd-h3">7.2 提交</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">按钮文案为「提交」，点击后校验全部必填项。</li>
+      <li className="ar-prd-li">
+        校验通过后服务端顺序建议：① 上传/确认影像 URL → ② <strong>同步证照管理（行驶证全量）</strong> → ③ 年审任务结案 → ④ 返回成功。
+      </li>
+      <li className="ar-prd-li">前端提示：「提交成功，行驶证已同步至证照管理」，约 1 秒后返回待办列表。</li>
+      <li className="ar-prd-li">任务转入历史记录，记录办理人、完成时间及完整办理快照（含同步后的证照数据）。</li>
+    </ul>
+    <div className="ar-prd-h3">7.3 提交校验清单</div>
+    <div className="ar-prd-table-wrap">
+      <table className="ar-prd-table">
+        <thead>
+          <tr>
+            <th>校验项</th>
+            <th>规则</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>行驶证照片</td>
+            <td>至少 1 张</td>
+          </tr>
+          <tr>
+            <td>检验有效期</td>
+            <td>已填写</td>
+          </tr>
+          <tr>
+            <td>检测费用</td>
+            <td>必填</td>
+          </tr>
+          <tr>
+            <td>二保/整备费用</td>
+            <td>已选服务站则必填</td>
+          </tr>
+          <tr>
+            <td>OCR 状态</td>
+            <td>识别中不可提交；车牌不一致不可提交</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div className="ar-prd-h2">八、年审记录页（历史 · 只读）</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">模块顺序与办理页一致：车辆信息 → 更新行驶证 → 检测站 → 二保/整备（有数据才展示）。</li>
+      <li className="ar-prd-li">车辆信息下增加：办理人、完成时间。</li>
+      <li className="ar-prd-li">行驶证/二保/整备照片以缩略图网格展示，支持预览，无上传入口。</li>
+      <li className="ar-prd-li">所有字段只读展示，不提供编辑与提交。</li>
+    </ul>
+
+    <div className="ar-prd-h2">九、交互与视觉规范</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">整体模拟 iPhone 小程序壳：状态栏、导航栏、微信胶囊。</li>
+      <li className="ar-prd-li">主色：#16D1A1 / #00BFA5；表单为左标题右内容、隐藏边框右对齐输入。</li>
+      <li className="ar-prd-li">选择类：底部抽屉 + 滚轮/双列（省市、日期、单选）。</li>
+      <li className="ar-prd-li">车牌、日期交互对齐微信小程序常见模式。</li>
+    </ul>
+
+    <div className="ar-prd-h2">十、非功能与后续对接（建议）</div>
+    <ul className="ar-prd-ul">
+      <li className="ar-prd-li">正式环境需对接：任务列表 API、OCR 服务、图片上传 CDN、提交/草稿接口。</li>
+      <li className="ar-prd-li">
+        <strong>证照同步接口（必接）</strong>：POST 提交年审时携带 plateNo、inspectionValidUntil、photoUrls[]；或由后端在结案事务内调用证照服务「覆盖行驶证」能力。
+      </li>
+      <li className="ar-prd-li">办理人取当前登录用户；完成时间取服务端时间。</li>
+      <li className="ar-prd-li">检测站/维修站列表与主数据或 Web 端配置同步。</li>
+      <li className="ar-prd-li">图片须先落 CDN 再写证照管理，禁止仅存临时 Blob；刷新后 Web/小程序均可预览。</li>
+    </ul>
+
+    <p className="ar-prd-footnote">
+      当前页面为可交互原型，业务数据、OCR 结果、站点列表均为模拟；行为与上述需求一致，供评审与开发拆票参考。
+    </p>
+  </div>
+);
+
+const Component = function () {
+  const [mainTab, setMainTab] = useState('pending');
+  const [searchPlate, setSearchPlate] = useState('');
+  const [plateKbOpen, setPlateKbOpen] = useState(false);
+  const [plateKbDraft, setPlateKbDraft] = useState('');
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [filterDraft, setFilterDraft] = useState({ ...DEFAULT_FILTER });
+  const [filterApplied, setFilterApplied] = useState({ ...DEFAULT_FILTER });
+  const [tasks, setTasks] = useState(() =>
+    MOCK_TASKS.map((t) =>
+      t.tab === 'history'
+        ? { ...t, operateSnapshot: t.operateSnapshot || buildSampleHistorySnapshot(t) }
+        : t
+    )
+  );
+  const [prdOpen, setPrdOpen] = useState(false);
+  const [operateTask, setOperateTask] = useState(null);
+  const [historyViewTask, setHistoryViewTask] = useState(null);
+  const [inspectionForm, setInspectionForm] = useState({ ...EMPTY_INSPECTION_FORM });
+  const [m2Expanded, setM2Expanded] = useState(false);
+  const [m2Form, setM2Form] = useState({ ...EMPTY_SERVICE_FORM });
+  const [zbExpanded, setZbExpanded] = useState(false);
+  const [zbForm, setZbForm] = useState({ ...EMPTY_SERVICE_FORM });
+  const [licenseForm, setLicenseForm] = useState({ ...EMPTY_LICENSE_FORM });
+  const [operateDrafts, setOperateDrafts] = useState(() => loadOperateDrafts());
+  const licenseOcrTimerRef = useRef(null);
+
+  const resetOperateForms = () => {
+    if (licenseOcrTimerRef.current) {
+      clearTimeout(licenseOcrTimerRef.current);
+      licenseOcrTimerRef.current = null;
+    }
+    setInspectionForm({ ...EMPTY_INSPECTION_FORM });
+    setM2Expanded(false);
+    setM2Form({ ...EMPTY_SERVICE_FORM });
+    setZbExpanded(false);
+    setZbForm({ ...EMPTY_SERVICE_FORM });
+    setLicenseForm({ ...EMPTY_LICENSE_FORM });
+  };
+
+  const applyOperateDraft = (draft) => {
+    if (!draft) return;
+    setInspectionForm({ ...EMPTY_INSPECTION_FORM, ...draft.inspectionForm });
+    const lf = draft.licenseForm || {};
+    setLicenseForm({
+      ...EMPTY_LICENSE_FORM,
+      photos: deserializeUploadFileList(lf.photos),
+      inspectionValidUntil: lf.inspectionValidUntil ?? null,
+      ocrStatus: lf.ocrStatus === 'recognizing' ? 'idle' : lf.ocrStatus || 'idle'
+    });
+    setM2Expanded(!!draft.m2Expanded);
+    const m2 = draft.m2Form || {};
+    setM2Form({
+      ...EMPTY_SERVICE_FORM,
+      ...m2,
+      photos: deserializeUploadFileList(m2.photos)
+    });
+    setZbExpanded(!!draft.zbExpanded);
+    const zb = draft.zbForm || {};
+    setZbForm({
+      ...EMPTY_SERVICE_FORM,
+      ...zb,
+      photos: deserializeUploadFileList(zb.photos)
+    });
+  };
+
+  const collectOperateDraft = () => ({
+    savedAt: new Date().toISOString(),
+    inspectionForm: { ...inspectionForm },
+    licenseForm: {
+      photos: serializeUploadFileList(licenseForm.photos),
+      inspectionValidUntil: licenseForm.inspectionValidUntil,
+      ocrStatus: licenseForm.ocrStatus === 'recognizing' ? 'idle' : licenseForm.ocrStatus
+    },
+    m2Expanded,
+    m2Form: { ...m2Form, photos: serializeUploadFileList(m2Form.photos) },
+    zbExpanded,
+    zbForm: { ...zbForm, photos: serializeUploadFileList(zbForm.photos) }
+  });
+
+  const upsertOperateDraft = (taskId, draft) => {
+    const next = { ...operateDrafts, [taskId]: draft };
+    setOperateDrafts(next);
+    persistOperateDrafts(next);
+  };
+
+  const removeOperateDraft = (taskId) => {
+    if (!operateDrafts[taskId]) return;
+    const next = { ...operateDrafts };
+    delete next[taskId];
+    setOperateDrafts(next);
+    persistOperateDrafts(next);
+  };
+
+  const openOperatePage = (task) => {
+    if (licenseOcrTimerRef.current) {
+      clearTimeout(licenseOcrTimerRef.current);
+      licenseOcrTimerRef.current = null;
+    }
+    setHistoryViewTask(null);
+    setOperateTask(task);
+    const draft = operateDrafts[task.id];
+    if (draft) applyOperateDraft(draft);
+    else resetOperateForms();
+  };
+
+  const closeOperatePage = () => {
+    setOperateTask(null);
+    resetOperateForms();
+  };
+
+  const openHistoryViewPage = (task) => {
+    setHistoryViewTask(task);
+    setOperateTask(null);
+    resetOperateForms();
+  };
+
+  const closeHistoryViewPage = () => {
+    setHistoryViewTask(null);
+  };
+
+  const setInspection = (key, val) => setInspectionForm((p) => ({ ...p, [key]: val }));
+  const setM2 = (key, val) => setM2Form((p) => ({ ...p, [key]: val }));
+  const setZb = (key, val) => setZbForm((p) => ({ ...p, [key]: val }));
+  const setLicense = (key, val) => setLicenseForm((p) => ({ ...p, [key]: val }));
+
+  const runLicenseOcr = (task, photos) => {
+    if (licenseOcrTimerRef.current) clearTimeout(licenseOcrTimerRef.current);
+    setLicenseForm((p) => ({
+      ...p,
+      ocrStatus: 'recognizing',
+      inspectionValidUntil: null
+    }));
+    licenseOcrTimerRef.current = setTimeout(() => {
+      const expectedPlate = task?.plateNo || '';
+      const recognizedPlate = mockOcrLicensePlate(task, photos);
+      if (!platesMatch(recognizedPlate, expectedPlate)) {
+        setLicenseForm((p) => ({
+          ...p,
+          ocrStatus: 'error',
+          inspectionValidUntil: null
+        }));
+        message.error(
+          `识别车牌号与年审车牌号不一致（识别：${recognizedPlate || '—'}，年审：${expectedPlate || '—'}）`
+        );
+        licenseOcrTimerRef.current = null;
+        return;
+      }
+      const validUntil = mockOcrLicenseValidUntil(task);
+      setLicenseForm((p) => ({
+        ...p,
+        inspectionValidUntil: validUntil,
+        ocrStatus: 'done'
+      }));
+      message.success('检验有效期识别完成');
+      licenseOcrTimerRef.current = null;
+    }, LICENSE_OCR_MOCK_MS);
+  };
+
+  const handleLicensePhotosChange = (fileList) => {
+    const prevLen = (licenseForm.photos || []).length;
+    const nextLen = (fileList || []).length;
+    if (nextLen === 0) {
+      if (licenseOcrTimerRef.current) {
+        clearTimeout(licenseOcrTimerRef.current);
+        licenseOcrTimerRef.current = null;
+      }
+      setLicenseForm({ ...EMPTY_LICENSE_FORM });
+      return;
+    }
+    setLicense('photos', fileList);
+    if (nextLen > prevLen) {
+      runLicenseOcr(operateTask, fileList);
+    }
+  };
+
+  const inspectionStationOptions = useMemo(() => toStationSelectOptions(readInspectionStationList()), []);
+  const repairStationOptions = useMemo(() => toStationSelectOptions(REPAIR_STATION_LIST), []);
+
+  const saveOperate = () => {
+    if (!operateTask) return;
+    if (licenseForm.ocrStatus === 'recognizing') {
+      message.warning('行驶证识别中，请稍候再保存');
+      return;
+    }
+    upsertOperateDraft(operateTask.id, collectOperateDraft());
+    message.success('已保存，可稍后继续填写');
+  };
+
+  const submitOperate = () => {
+    if (licenseForm.ocrStatus === 'recognizing') {
+      message.warning('行驶证识别中，请稍候');
+      return;
+    }
+    if ((licenseForm.photos || []).length && licenseForm.ocrStatus === 'error') {
+      message.error('行驶证车牌号识别不一致，请重新上传照片');
+      return;
+    }
+    if (!validateLicenseForm(licenseForm)) return;
+    if (isFormCostEmpty(inspectionForm.cost)) {
+      message.error('请填写检测费用');
+      return;
+    }
+    if (!validateStationCost(m2Form, '二保')) return;
+    if (!validateStationCost(zbForm, '整备')) return;
+    const snapshot = collectOperateDraft();
+    const completeTime = moment ? moment().format('YYYY-MM-DD HH:mm') : new Date().toISOString().slice(0, 16).replace('T', ' ');
+    const taskId = operateTask.id;
+
+    removeOperateDraft(taskId);
+    syncLicenseToCertificateManagement(operateTask, licenseForm, MOCK_CURRENT_HANDLER);
+    setTasks((prev) =>
+      prev.map((t) =>
+        t.id === taskId
+          ? {
+              ...t,
+              tab: 'history',
+              executor: MOCK_CURRENT_HANDLER,
+              executeTime: completeTime,
+              expireDate: licenseForm.inspectionValidUntil || t.expireDate,
+              operateSnapshot: snapshot
+            }
+          : t
+      )
+    );
+    message.success('提交成功，行驶证照片及检验有效期已同步至证照管理');
+    setTimeout(() => {
+      closeOperatePage();
+    }, 1000);
+  };
+
+  const enrichTasks = useMemo(
+    () =>
+      tasks.filter((t) => !isAnnualReviewExcluded(t)).map((t) => {
+        const daysLeft = t.daysLeft;
+        let urgency = 'normal';
+        if (daysLeft <= 0) urgency = 'danger';
+        else if (daysLeft <= 30) urgency = 'warn';
+        return {
+          ...t,
+          urgency,
+          hasSavedDraft: t.tab === 'pending' && !!operateDrafts[t.id]
+        };
+      }),
+    [tasks, operateDrafts]
+  );
+
+  const filteredTasks = useMemo(() => {
+    const f = filterApplied;
+    const plateKey = (searchPlate || '').trim().toLowerCase();
+
+    const list = enrichTasks.filter((t) => {
+      if (t.tab !== mainTab) return false;
+      if (plateKey && !t.plateNo.toLowerCase().includes(plateKey)) return false;
+      if (f.provinceCity && f.provinceCity[0]) {
+        if (t.province !== f.provinceCity[0]) return false;
+        if (f.provinceCity[1] && t.city !== f.provinceCity[1]) return false;
+      }
+      if (f.expireRange && f.expireRange[0] && f.expireRange[1] && moment) {
+        const exp = moment(t.expireDate).startOf('day').valueOf();
+        const start = moment(f.expireRange[0]).startOf('day').valueOf();
+        const end = moment(f.expireRange[1]).endOf('day').valueOf();
+        if (exp < start || exp > end) return false;
+      }
+      if (mainTab === 'history') {
+        if (f.handler && t.executor !== f.handler) return false;
+        if (f.executeTimeRange && f.executeTimeRange[0] && f.executeTimeRange[1] && moment) {
+          const done = moment(t.executeTime);
+          if (!done.isValid()) return false;
+          const start = moment(f.executeTimeRange[0]).startOf('day').valueOf();
+          const end = moment(f.executeTimeRange[1]).endOf('day').valueOf();
+          const doneVal = done.valueOf();
+          if (doneVal < start || doneVal > end) return false;
+        }
+      }
+      return true;
+    });
+
+    if (mainTab === 'pending') return sortPendingTasks(list);
+    if (mainTab === 'history' && moment) {
+      return [...list].sort((a, b) => {
+        const ta = moment(a.executeTime);
+        const tb = moment(b.executeTime);
+        if (ta.isValid() && tb.isValid()) return tb.valueOf() - ta.valueOf();
+        return String(b.executeTime || '').localeCompare(String(a.executeTime || ''));
+      });
+    }
+    return list;
+  }, [enrichTasks, mainTab, searchPlate, filterApplied]);
+
+  const openPlateKeyboard = () => {
+    setPlateKbDraft(searchPlate);
+    setPlateKbOpen(true);
+  };
+
+  const closePlateKeyboard = () => {
+    setPlateKbOpen(false);
+  };
+
+  const confirmPlateKeyboard = (plate) => {
+    setSearchPlate((plate || '').trim().toUpperCase());
+    setPlateKbOpen(false);
+  };
+
+  const openFilter = () => {
+    setFilterDraft({ ...filterApplied });
+    setFilterOpen(true);
+  };
+
+  const applyFilter = () => {
+    setFilterApplied({ ...filterDraft });
+    setFilterOpen(false);
+    message.success('筛选已应用');
+  };
+
+  const resetFilter = () => {
+    setFilterDraft({ ...DEFAULT_FILTER });
+  };
+
+  const getPlateDaysTag = (task) => {
+    if (task.tab === 'history') return null;
+    if (task.daysLeft > 0) {
+      return { text: `剩余${task.daysLeft}天`, color: 'warning' };
+    }
+    return { text: `逾期${Math.abs(task.daysLeft)}天`, color: 'error' };
+  };
+
+  const handleTaskCardClick = (task) => {
+    if (task.tab === 'pending') {
+      openOperatePage(task);
+      return;
+    }
+    openHistoryViewPage(task);
+  };
+
+  const renderTaskCard = (task) => {
+    const daysTag = getPlateDaysTag(task);
+
+    return (
+      <div
+        key={task.id}
+        className="ar-card"
+        role="button"
+        tabIndex={0}
+        onClick={() => handleTaskCardClick(task)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') handleTaskCardClick(task);
+        }}
+      >
+        <div className="ar-card-head">
+          <div className="ar-plate-row">
+            <span className="ar-plate">{task.plateNo}</span>
+            {daysTag && (
+              <Tag className="ar-plate-tag" color={daysTag.color}>
+                {daysTag.text}
+              </Tag>
+            )}
+          </div>
+          <div className="ar-card-head-right">
+            {task.hasSavedDraft && (
+              <Tag className="ar-plate-tag ar-plate-tag--saved">已保存</Tag>
+            )}
+            <span className="ar-card-status" aria-hidden="true">
+              <IconChevron />
+            </span>
+          </div>
+        </div>
+        <div className="ar-kv">
+          <span className="ar-kv-label">运营状态</span>
+          <span className="ar-kv-value">{task.operateStatus}</span>
+        </div>
+        <div className="ar-kv">
+          <span className="ar-kv-label">运营区域</span>
+          <span className="ar-kv-value">{formatTaskRegion(task)}</span>
+        </div>
+        <div className="ar-kv">
+          <span className="ar-kv-label">到期时间</span>
+          <span className="ar-kv-value">{task.expireDate}</span>
+        </div>
+        {task.tab === 'history' && (
+          <>
+            <div className="ar-kv">
+              <span className="ar-kv-label">办理人</span>
+              <span className="ar-kv-value">{task.executor || '—'}</span>
+            </div>
+            <div className="ar-kv">
+              <span className="ar-kv-label">完成时间</span>
+              <span className="ar-kv-value">{formatCompleteTime(task.executeTime)}</span>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  const renderHistoryDetailPage = () => {
+    if (!historyViewTask) return null;
+    const task = historyViewTask;
+    const snap = getHistorySnapshot(task);
+    const licensePhotos = deserializeUploadFileList(snap.licenseForm?.photos);
+    const licenseValid = snap.licenseForm?.inspectionValidUntil || '—';
+    const insp = snap.inspectionForm || {};
+    const m2 = snap.m2Form || {};
+    const zb = snap.zbForm || {};
+    const showM2 = snap.m2Expanded || hasServiceContent(m2);
+    const showZb = snap.zbExpanded || hasServiceContent(zb);
+
+    return (
+      <div className="ar-operate-scroll">
+        <div className="ar-section ar-section--form">
+          <div className="ar-section-title">车辆信息</div>
+          <div className="ar-form-grid">
+            <InfoRow label="车牌号" valueClassName="plate">
+              {task.plateNo}
+            </InfoRow>
+            <InfoRow label="品牌">{task.brand}</InfoRow>
+            <InfoRow label="型号">{task.model}</InfoRow>
+            <InfoRow label="检验有效期">{task.expireDate}</InfoRow>
+            <InfoRow label="运营状态">{formatOperateStatusDisplay(task)}</InfoRow>
+            <InfoRow label="办理人">{task.executor || '—'}</InfoRow>
+            <InfoRow label="完成时间">{formatCompleteTime(task.executeTime)}</InfoRow>
+          </div>
+        </div>
+
+        <div className="ar-section ar-section--form">
+          <div className="ar-section-title">更新行驶证</div>
+          <PhotoReadonlyGallery label="行驶证照片" fileList={licensePhotos} />
+          <div className="ar-form-grid" style={{ marginTop: 4 }}>
+            <InfoRow label="检验有效期">{licenseValid}</InfoRow>
+          </div>
+        </div>
+
+        <div className="ar-section ar-section--form">
+          <div className="ar-section-title">检测服务站信息</div>
+          <div className="ar-form-grid">
+            <InfoRow label="检测服务站">{insp.station || '—'}</InfoRow>
+            <InfoRow label="费用（元）">{formatDisplayMoney(insp.cost)}</InfoRow>
+            {insp.remark ? (
+              <div className="ar-form-row">
+                <span className="ar-form-label">备注</span>
+                <div className="ar-form-control">
+                  <div className="ar-form-readonly ar-form-readonly--multiline">{insp.remark}</div>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        {showM2 ? (
+          <div className="ar-section ar-section--form">
+            <div className="ar-section-title">二保信息</div>
+            <div className="ar-form-grid">
+              <InfoRow label="二保服务站">{m2.station || '—'}</InfoRow>
+              <InfoRow label="费用（元）">{formatDisplayMoney(m2.cost)}</InfoRow>
+              {m2.remark ? (
+                <div className="ar-form-row">
+                  <span className="ar-form-label">备注</span>
+                  <div className="ar-form-control">
+                    <div className="ar-form-readonly ar-form-readonly--multiline">{m2.remark}</div>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+            <PhotoReadonlyGallery label="二保照片" fileList={deserializeUploadFileList(m2.photos)} />
+          </div>
+        ) : null}
+
+        {showZb ? (
+          <div className="ar-section ar-section--form">
+            <div className="ar-section-title">整备服务站信息</div>
+            <div className="ar-form-grid">
+              <InfoRow label="整备服务站">{zb.station || '—'}</InfoRow>
+              <InfoRow label="费用（元）">{formatDisplayMoney(zb.cost)}</InfoRow>
+              {zb.remark ? (
+                <div className="ar-form-row">
+                  <span className="ar-form-label">备注</span>
+                  <div className="ar-form-control">
+                    <div className="ar-form-readonly ar-form-readonly--multiline">{zb.remark}</div>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+            <PhotoReadonlyGallery label="整备照片" fileList={deserializeUploadFileList(zb.photos)} />
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  const renderOperatePage = () => {
+    if (!operateTask) return null;
+    const task = operateTask;
+
+    const licenseRecognizing = licenseForm.ocrStatus === 'recognizing';
+
+    return (
+      <div className="ar-operate-wrap">
+        <div className="ar-operate-scroll">
+          <div className="ar-section ar-section--form">
+            <div className="ar-section-title">车辆信息</div>
+            <div className="ar-form-grid">
+              <InfoRow label="车牌号" valueClassName="plate">{task.plateNo}</InfoRow>
+              <InfoRow label="品牌">{task.brand}</InfoRow>
+              <InfoRow label="型号">{task.model}</InfoRow>
+              <InfoRow label="检验有效期">{task.expireDate}</InfoRow>
+              <InfoRow label="运营状态">{formatOperateStatusDisplay(task)}</InfoRow>
+            </div>
+          </div>
+
+          <div className="ar-section ar-section--form">
+            <div className="ar-section-title">更新行驶证</div>
+            {licenseForm.ocrStatus === 'error' && (
+              <div className="ar-ocr-banner ar-ocr-banner--error" role="alert">
+                识别车牌号与年审车牌号不一致，请重新上传行驶证照片
+              </div>
+            )}
+            {licenseForm.ocrStatus === 'done' && licenseForm.inspectionValidUntil && (
+              <div className="ar-ocr-banner ar-ocr-banner--done">
+                已根据行驶证照片识别检验有效期（精确到月，已自动补全至月末）
+              </div>
+            )}
+            <PhotoUploadBlock
+              label="行驶证照片"
+              required
+              fileList={licenseForm.photos}
+              onChange={handleLicensePhotosChange}
+              maxPhotos={MAX_LICENSE_PHOTOS}
+            />
+            <div className="ar-form-grid" style={{ marginTop: 4 }}>
+              <FormField label="检验有效期" required>
+                <MiniSingleDatePicker
+                  inForm
+                  value={licenseForm.inspectionValidUntil}
+                  onChange={(v) => setLicense('inspectionValidUntil', v)}
+                  placeholder="上传照片自动识别"
+                  title="检验有效期"
+                  hint="可调整年月日，精确到日"
+                  disabled={licenseForm.ocrStatus === 'recognizing'}
+                />
+              </FormField>
+            </div>
+          </div>
+
+          <div className="ar-section ar-section--form">
+            <div className="ar-section-title">检测服务站信息</div>
+            <div className="ar-form-grid">
+            <FormField label="检测服务站">
+              <Select
+                bordered={false}
+                showSearch
+                allowClear
+                placeholder="请选择检测服务站"
+                value={inspectionForm.station || undefined}
+                onChange={(v) => setInspection('station', v || '')}
+                options={inspectionStationOptions}
+              />
+            </FormField>
+            <FormField label="费用（元）" required>
+              <InputNumber
+                bordered={false}
+                controls={false}
+                min={0}
+                precision={2}
+                placeholder="请输入费用"
+                value={inspectionForm.cost === '' ? null : Number(inspectionForm.cost)}
+                onChange={(v) => setInspection('cost', v == null ? '' : String(v))}
+              />
+            </FormField>
+            <div className="ar-form-row ar-form-row--remark-block">
+              <div className="ar-form-control">
+                {TextArea ? (
+                  <TextArea
+                    bordered={false}
+                    rows={2}
+                    placeholder="请输入检测备注信息"
+                    value={inspectionForm.remark}
+                    onChange={(e) => setInspection('remark', e.target.value)}
+                  />
+                ) : (
+                  <Input
+                    bordered={false}
+                    placeholder="请输入检测备注信息"
+                    value={inspectionForm.remark}
+                    onChange={(e) => setInspection('remark', e.target.value)}
+                  />
+                )}
+              </div>
+            </div>
+            </div>
+          </div>
+
+          {!m2Expanded ? (
+            <button
+              type="button"
+              className={`ar-add-btn${
+                m2Form.station || m2Form.cost || m2Form.remark || (m2Form.photos || []).length ? ' filled' : ''
+              }`}
+              onClick={() => setM2Expanded(true)}
+            >
+              添加二保信息
+            </button>
+          ) : (
+            <div className="ar-section ar-section--form">
+              <div className="ar-section-title-row">
+                <span className="ar-section-title-text">二保信息</span>
+                <button type="button" className="ar-section-fold" onClick={() => setM2Expanded(false)}>
+                  收起
+                </button>
+              </div>
+              <div className="ar-form-grid">
+                <FormField label="二保服务站">
+                  <Select
+                    bordered={false}
+                    showSearch
+                    allowClear
+                    placeholder="请选择二保服务站"
+                    value={m2Form.station || undefined}
+                    onChange={(v) => setM2('station', v || '')}
+                    options={inspectionStationOptions}
+                  />
+                </FormField>
+                <FormField label="费用（元）" required={!!m2Form.station}>
+                  <InputNumber
+                    bordered={false}
+                    controls={false}
+                    min={0}
+                    precision={2}
+                    placeholder={m2Form.station ? '请选择站点后必填' : '请输入费用'}
+                    value={m2Form.cost === '' ? null : Number(m2Form.cost)}
+                    onChange={(v) => setM2('cost', v == null ? '' : String(v))}
+                  />
+                </FormField>
+                <div className="ar-form-row ar-form-row--remark-block">
+                  <div className="ar-form-control">
+                    {TextArea ? (
+                      <TextArea
+                        bordered={false}
+                        rows={2}
+                        placeholder="请输入二保备注信息"
+                        value={m2Form.remark}
+                        onChange={(e) => setM2('remark', e.target.value)}
+                      />
+                    ) : (
+                      <Input
+                        bordered={false}
+                        placeholder="请输入二保备注信息"
+                        value={m2Form.remark}
+                        onChange={(e) => setM2('remark', e.target.value)}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+              <PhotoUploadBlock
+                label="二保照片"
+                fileList={m2Form.photos}
+                onChange={(fl) => setM2('photos', fl)}
+              />
+            </div>
+          )}
+
+          {!zbExpanded ? (
+            <button
+              type="button"
+              className={`ar-add-btn${
+                zbForm.station || zbForm.cost || zbForm.remark || (zbForm.photos || []).length ? ' filled' : ''
+              }`}
+              onClick={() => setZbExpanded(true)}
+            >
+              添加整备服务站信息
+            </button>
+          ) : (
+            <div className="ar-section ar-section--form">
+              <div className="ar-section-title-row">
+                <span className="ar-section-title-text">整备服务站信息</span>
+                <button type="button" className="ar-section-fold" onClick={() => setZbExpanded(false)}>
+                  收起
+                </button>
+              </div>
+              <div className="ar-form-grid">
+                <FormField label="整备服务站">
+                  <Select
+                    bordered={false}
+                    showSearch
+                    allowClear
+                    placeholder="请从维修站列表选择"
+                    value={zbForm.station || undefined}
+                    onChange={(v) => setZb('station', v || '')}
+                    options={repairStationOptions}
+                  />
+                </FormField>
+                <FormField label="费用（元）" required={!!zbForm.station}>
+                  <InputNumber
+                    bordered={false}
+                    controls={false}
+                    min={0}
+                    precision={2}
+                    placeholder={zbForm.station ? '请选择站点后必填' : '请输入费用'}
+                    value={zbForm.cost === '' ? null : Number(zbForm.cost)}
+                    onChange={(v) => setZb('cost', v == null ? '' : String(v))}
+                  />
+                </FormField>
+                <div className="ar-form-row ar-form-row--remark-block">
+                  <div className="ar-form-control">
+                    {TextArea ? (
+                      <TextArea
+                        bordered={false}
+                        rows={2}
+                        placeholder="请输入整备备注信息"
+                        value={zbForm.remark}
+                        onChange={(e) => setZb('remark', e.target.value)}
+                      />
+                    ) : (
+                      <Input
+                        bordered={false}
+                        placeholder="请输入整备备注信息"
+                        value={zbForm.remark}
+                        onChange={(e) => setZb('remark', e.target.value)}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+              <PhotoUploadBlock
+                label="整备照片"
+                fileList={zbForm.photos}
+                onChange={(fl) => setZb('photos', fl)}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="ar-operate-foot">
+          <div className="ar-operate-foot-btns">
+            <Button size="large" disabled={licenseRecognizing} onClick={saveOperate}>
+              保存
+            </Button>
+            <Button
+              type="primary"
+              size="large"
+              disabled={licenseRecognizing}
+              onClick={submitOperate}
+              style={{
+                fontWeight: 700,
+                background: licenseRecognizing
+                  ? undefined
+                  : `linear-gradient(135deg, ${COLOR_PRIMARY} 0%, ${COLOR_PRIMARY_DEEP} 100%)`,
+                border: 'none'
+              }}
+            >
+              提交
+            </Button>
+          </div>
+        </div>
+
+        {licenseRecognizing && (
+          <div className="ar-ocr-mask" role="alertdialog" aria-busy="true" aria-live="polite" aria-label="行驶证识别中">
+            <div className="ar-ocr-mask-panel">
+              <span className="ar-ocr-dot" aria-hidden="true" />
+              <div className="ar-ocr-mask-title">识别中</div>
+              <div className="ar-ocr-mask-desc">正在识别行驶证信息，请稍候完成后再提交</div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="ar-mini-root">
+      <style>{PAGE_STYLE}</style>
+      <div className="ar-phone">
+        <MiniProgramChrome
+          title={historyViewTask ? '年审记录' : operateTask ? '年审操作' : '年审'}
+          showBack={!!operateTask || !!historyViewTask}
+          onBack={historyViewTask ? closeHistoryViewPage : closeOperatePage}
+          showPrdLink={!operateTask && !historyViewTask}
+          onPrdClick={() => setPrdOpen(true)}
+        />
+
+        {historyViewTask ? (
+          renderHistoryDetailPage()
+        ) : operateTask ? (
+          renderOperatePage()
+        ) : (
+          <>
+            <div className="ar-tabs" role="tablist">
+              <button
+                type="button"
+                role="tab"
+                aria-selected={mainTab === 'pending'}
+                className={`ar-tab${mainTab === 'pending' ? ' active' : ''}`}
+                onClick={() => setMainTab('pending')}
+              >
+                待处理
+              </button>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={mainTab === 'history'}
+                className={`ar-tab${mainTab === 'history' ? ' active' : ''}`}
+                onClick={() => setMainTab('history')}
+              >
+                历史记录
+              </button>
+            </div>
+
+            <div className="ar-search-row">
+              <div
+                className="ar-search-box"
+                role="button"
+                tabIndex={0}
+                onClick={openPlateKeyboard}
+                onKeyDown={(e) => e.key === 'Enter' && openPlateKeyboard()}
+              >
+                {!searchPlate ? (
+                  <span className="ar-search-placeholder" aria-hidden="true">
+                    请输入车牌号
+                  </span>
+                ) : null}
+                <input
+                  readOnly
+                  value={searchPlate}
+                  aria-label="车牌号搜索"
+                  onFocus={(e) => {
+                    e.target.blur();
+                    openPlateKeyboard();
+                  }}
+                />
+              </div>
+              <button type="button" className="ar-filter-btn" aria-label="打开筛选" onClick={openFilter}>
+                <IconFilter />
+              </button>
+            </div>
+
+            <div className="ar-list">
+              {filteredTasks.length === 0 ? (
+                <div className="ar-empty">暂无符合条件的年审任务<br />请调整搜索或筛选条件</div>
+              ) : (
+                filteredTasks.map(renderTaskCard)
+              )}
+            </div>
+          </>
+        )}
+
+        <PlateKeyboardPanel
+          open={plateKbOpen && !operateTask && !historyViewTask}
+          value={plateKbDraft}
+          onChange={setPlateKbDraft}
+          onConfirm={confirmPlateKeyboard}
+          onClose={closePlateKeyboard}
+        />
+      </div>
+
+      <Drawer
+        title="筛选"
+        placement="right"
+        width={Math.min(340, typeof window !== 'undefined' ? window.innerWidth * 0.86 : 320)}
+        open={filterOpen}
+        onClose={() => setFilterOpen(false)}
+        styles={{ body: { padding: '12px 16px 0' } }}
+        footer={
+          <div className="ar-drawer-foot">
+            <Button block size="large" onClick={resetFilter} style={{ height: 46, borderRadius: 8 }}>
+              重置
+            </Button>
+            <Button
+              block
+              type="primary"
+              size="large"
+              onClick={applyFilter}
+              style={{
+                height: 46,
+                borderRadius: 8,
+                background: `linear-gradient(135deg, ${COLOR_PRIMARY} 0%, ${COLOR_PRIMARY_DEEP} 100%)`,
+                border: 'none'
+              }}
+            >
+              确定
+            </Button>
+          </div>
+        }
+      >
+        <FilterRow label="到期时间">
+          <MiniDateRangePicker
+            value={filterDraft.expireRange}
+            onChange={(v) => setFilterDraft((p) => ({ ...p, expireRange: v }))}
+            placeholder="请选择开始-结束日期"
+            title="选择到期时间"
+            hint="切换开始/结束，滑动选择到期日期（精确到日）"
+          />
+        </FilterRow>
+        <FilterRow label="运营区域">
+          <MiniRegionPicker
+            value={filterDraft.provinceCity}
+            onChange={(v) => setFilterDraft((p) => ({ ...p, provinceCity: v }))}
+            placeholder="请选择省市"
+          />
+        </FilterRow>
+        {mainTab === 'history' && (
+          <>
+            <div className="ar-filter-section-label">办理记录筛选</div>
+            <FilterRow label="办理人">
+              <MiniOptionPicker
+                value={filterDraft.handler}
+                onChange={(v) => setFilterDraft((p) => ({ ...p, handler: v }))}
+                options={HANDLER_OPTIONS}
+                placeholder="请选择办理人"
+                title="选择办理人"
+                clearLabel="全部"
+              />
+            </FilterRow>
+            <FilterRow label="完成时间">
+              <MiniDateRangePicker
+                value={filterDraft.executeTimeRange}
+                onChange={(v) => setFilterDraft((p) => ({ ...p, executeTimeRange: v }))}
+                placeholder="请选择开始-结束日期"
+                title="选择完成时间"
+                hint="切换开始/结束，滑动选择完成日期（精确到日）"
+              />
+            </FilterRow>
+          </>
+        )}
+      </Drawer>
+
+      <Modal
+        open={prdOpen}
+        title="年审管理 · 产品需求说明"
+        onCancel={() => setPrdOpen(false)}
+        footer={[
+          <Button
+            key="ok"
+            type="primary"
+            onClick={() => setPrdOpen(false)}
+            style={{ background: COLOR_PRIMARY_DEEP, borderColor: COLOR_PRIMARY_DEEP }}
+          >
+            知道了
+          </Button>
+        ]}
+        width={420}
+        centered
+        bodyStyle={{ maxHeight: '72vh', overflowY: 'auto', paddingTop: 8 }}
+      >
+        <AnnualReviewPrdDoc />
+      </Modal>
+    </div>
+  );
+};
+
+export default Component;