]*>[\s\S]*?<\/style>/gi, '').replace(/<[^>]+>/g, '');
+ if (!plain.replace(/\s/g, '')) return true;
+ var hits = 0;
+ OLE_METADATA_PATTERNS.forEach(function (pattern) {
+ if (pattern.test(plain)) hits += 1;
+ });
+ if (hits >= 2) return true;
+ if (/[\u4e00-\u9fff]/.test(plain)) return false;
+ if (/合同|甲方|乙方|租赁|附件/.test(plain)) return false;
+ return hits >= 1 && plain.length < 500;
+}
+
+export function sanitizeImportedWordHtml(html) {
+ var content = String(html || '').trim();
+ if (!content) return '';
+ content = content
+ .replace(/<\/p>\s*n\s*\s*n\s*\s*n\s*= 0) {
+ content = content.replace('ct-word-doc', 'ct-word-doc ct-word-doc--imported');
+ }
+ return content;
+}
+
+function looksLikeHeadingLine(line) {
+ var text = String(line || '').trim();
+ if (!text || text.length > 80) return false;
+ if (/^附件\s*\d+/i.test(text)) return true;
+ if (/^第[一二三四五六七八九十\d]+[章节部分]/i.test(text)) return true;
+ if (/^[一二三四五六七八九十\d]+[、.:：]/.test(text) && text.length <= 40) return true;
+ return text.length <= 24 && !/[。；，,;]/.test(text);
+}
+
+function isLegacyDocJunkLine(line) {
+ var text = String(line || '').trim();
+ if (!text) return true;
+ if (LEGACY_DOC_JUNK_EXACT[text]) return true;
+ if (/^Text\d+$/i.test(text)) return true;
+ if (/^P\s*\d+$/i.test(text)) return true;
+ if (/^[\d\s*桰漀]+$/.test(text)) return true;
+ if (text.length <= 28 && !/[\u4e00-\u9fff]/.test(text) && /^[\x00-\x7F\s]+$/.test(text)) return true;
+ if (OLE_METADATA_PATTERNS.some(function (pattern) { return pattern.test(text); })) return true;
+ return false;
+}
+
+function plainTextToHtml(text) {
+ var lines = String(text || '')
+ .replace(/\r/g, '\n')
+ .split('\n')
+ .map(function (line) { return line.trim(); })
+ .filter(function (line) { return line && !isLegacyDocJunkLine(line); });
+ if (!lines.length) return '';
+ return lines.map(function (line) {
+ if (looksLikeHeadingLine(line)) {
+ return '' + escapeHtml(line) + '
';
+ }
+ return '' + escapeHtml(line) + '
';
+ }).join('');
+}
+
+/** 从旧版 .doc 二进制中粗提取可读文本（原型层兜底） */
+function extractTextFromLegacyDoc(arrayBuffer) {
+ var view = new Uint8Array(arrayBuffer);
+ var chunks = [];
+ var current = '';
+
+ function flush() {
+ var text = current.replace(/\s+/g, ' ').trim();
+ if (text.length >= 4 && !isLegacyDocJunkLine(text)) chunks.push(text);
+ current = '';
+ }
+
+ for (var i = 0; i < view.length - 1; i += 2) {
+ var code = view[i] | (view[i + 1] << 8);
+ if (
+ (code >= 0x20 && code <= 0x7e)
+ || (code >= 0x4e00 && code <= 0x9fff)
+ || code === 0x0a
+ || code === 0x0d
+ || code === 0x3001
+ || code === 0x3002
+ || code === 0xff1a
+ || code === 0xff1b
+ ) {
+ current += String.fromCharCode(code);
+ } else {
+ flush();
+ }
+ }
+ flush();
+
+ var merged = chunks.join('\n');
+ if (!merged.trim()) {
+ var latin = new TextDecoder('latin1').decode(view);
+ merged = latin.replace(/[^\x20-\x7E\u4e00-\u9fff\r\n]+/g, '\n');
+ }
+ return merged.replace(/\n{3,}/g, '\n\n').trim();
+}
+
+export async function convertDocxArrayBufferToHtml(arrayBuffer) {
+ if (detectWordFileFormat(arrayBuffer) !== 'docx') {
+ throw new Error('不是有效的 .docx 文件');
+ }
+ var themeCss = await extractDocxThemeStyles(arrayBuffer);
+ var result = await mammoth.convertToHtml(
+ { arrayBuffer: arrayBuffer },
+ {
+ styleMap: MAMMOTH_STYLE_MAP,
+ includeDefaultStyleMap: true,
+ includeEmbeddedStyleMap: true,
+ ignoreEmptyParagraphs: false,
+ }
+ );
+ var html = String(result.value || '').trim();
+ if (!html || isCorruptWordImportHtml(html)) {
+ var messages = (result.messages || []).map(function (m) { return m.message; }).filter(Boolean);
+ throw new Error(messages[0] || 'Word 文件解析结果无效');
+ }
+ return prepareImportedWordHtml(wrapWordHtml(html), themeCss);
+}
+
+export async function convertDocxFileToHtml(file) {
+ if (!file) throw new Error('未选择文件');
+ var arrayBuffer = await file.arrayBuffer();
+ return convertDocxArrayBufferToHtml(arrayBuffer);
+}
+
+export async function convertLegacyDocFileToHtml(file) {
+ if (!file) throw new Error('未选择文件');
+ var arrayBuffer = await file.arrayBuffer();
+ if (detectWordFileFormat(arrayBuffer) !== 'doc') {
+ throw new Error('不是有效的 .doc 文件');
+ }
+ var text = extractTextFromLegacyDoc(arrayBuffer);
+ if (!text || !/[\u4e00-\u9fff]/.test(text)) {
+ throw new Error('未能从 .doc 文件中提取正文，请另存为 .docx 后重试');
+ }
+ var html = plainTextToHtml(text);
+ if (!html || isCorruptWordImportHtml(html)) {
+ throw new Error('未能从 .doc 文件中生成可用内容，请另存为 .docx 后重试');
+ }
+ return prepareImportedWordHtml(wrapWordHtml(html), '');
+}
+
+export async function convertWordFileToHtml(file) {
+ if (!file) throw new Error('未选择文件');
+ var arrayBuffer = await file.arrayBuffer();
+ var format = detectWordFileFormat(arrayBuffer);
+ var name = String(file.name || '').toLowerCase();
+
+ if (format === 'docx' || (/\.docx$/i.test(name) && format !== 'doc')) {
+ return convertDocxArrayBufferToHtml(arrayBuffer);
+ }
+ if (format === 'doc' || /\.doc$/i.test(name)) {
+ return convertLegacyDocFileToHtml(file);
+ }
+ throw new Error('无法识别 Word 文件格式，请使用 .doc 或 .docx');
+}
+
+export function detectWordFileFormatFromName(name, arrayBuffer) {
+ if (arrayBuffer) return detectWordFileFormat(arrayBuffer);
+ var lower = String(name || '').toLowerCase();
+ if (/\.docx$/i.test(lower)) return 'docx';
+ if (/\.doc$/i.test(lower)) return 'doc';
+ return 'unknown';
+}
+
+export function isDocxArrayBuffer(arrayBuffer) {
+ return detectWordFileFormat(arrayBuffer) === 'docx';
+}
diff --git a/src/prototypes/contract-template-management/scripts/build-annotation-source.mjs b/src/prototypes/contract-template-management/scripts/build-annotation-source.mjs
index 1df0f02..64fdf76 100644
--- a/src/prototypes/contract-template-management/scripts/build-annotation-source.mjs
+++ b/src/prototypes/contract-template-management/scripts/build-annotation-source.mjs
@@ -40,6 +40,8 @@ const overviewMd = `## 模块定位
| 目标用户 | 法务人员 |
| 核心任务 | 维护 Word 版商用车租赁合同模板，按章节编辑，发布版本并控制启用态 |
| 数据模型 | 一份 Word 文件 = 一条记录，内含 9 个章节内容 |
+| 车型主数据 | 品牌·型号选项来自 [车辆管理](/prototypes/vehicle-management) 种子数据，并与租赁演示车型合并 |
+| 角色演示 | 法务默认可编辑；URL 加 ?role=cs 或 ?role=readonly 进入客服只读模式 |
| PRD 文档 | 见目录「PRD 全文 → PRD 完整文档」 |
| 资源文件 | \`src/resources/contract-template-management/PRD.md\` |
@@ -66,8 +68,8 @@ const DOC_MARKDOWN = {
'ct-doc-prd-acceptance': extractSection(fullPrd, '## 16. 验收标准') ?? '## 16. 验收标准',
'ct-doc-node-filter': extractSection(fullPrd, '### 7.2 筛选区') ?? '',
'ct-doc-node-table': combineSections(['### 7.4 主表字段', '### 7.5 主表操作', '### 7.6 子表（展开行）']),
- 'ct-doc-node-tabs': combineSections(['### 8.3 章节 Tab', '### 8.4 条件条款说明（合同主体及租赁订单～安全责任协议）', '### 8.5 适用车型绑定（仅附件章节 Tab）']),
- 'ct-doc-node-workspace': combineSections(['### 8.6 编辑区（左侧）', '### 8.7 实时预览（右侧）']),
+ 'ct-doc-node-tabs': combineSections(['### 8.3 章节 Tab', '### 8.5 条件条款说明（合同主体及租赁订单～安全责任协议）', '### 8.6 适用车型绑定（仅附件章节 Tab）']),
+ 'ct-doc-node-workspace': combineSections(['### 8.7 编辑区（左侧）', '### 8.8 实时预览（右侧）']),
'ct-doc-annotation-hint': '## 标注查看提示\n\n右侧标注工具栏可浏览目录、切换主题与颜色筛选。列表页与编辑页标注按当前页面自动显隐。\n\n**PRD 同步**：目录「PRD 全文」已与 `src/resources/contract-template-management/PRD.md` 对齐；修改 PRD 后运行 `node src/prototypes/contract-template-management/scripts/build-annotation-source.mjs` 重新生成 `annotation-source.json`。',
};
@@ -76,10 +78,10 @@ const MARKDOWN_MAP = {
'ct-list-table': combineSections(['### 7.4 主表字段', '### 7.5 主表操作', '### 7.6 子表（展开行）']),
'ct-editor-topbar': combineSections(['### 8.2 顶栏', '### 6.2 保存与发布']),
'ct-section-tabs': extractSection(fullPrd, '### 8.3 章节 Tab') ?? '',
- 'ct-contract-type': source.markdownMap?.['ct-contract-type'] ?? '',
- 'ct-vehicle-binding': extractSection(fullPrd, '### 8.5 适用车型绑定（仅附件章节 Tab）') ?? source.markdownMap?.['ct-vehicle-binding'] ?? '',
- 'ct-editor-panel': combineSections(['### 8.6 编辑区（左侧）']),
- 'ct-preview-panel': extractSection(fullPrd, '### 8.7 实时预览（右侧）') ?? '',
+ 'ct-contract-type': extractSection(fullPrd, '### 8.4 合同主体配置（仅合同主体 Tab）') ?? '',
+ 'ct-vehicle-binding': extractSection(fullPrd, '### 8.6 适用车型绑定（仅附件章节 Tab）') ?? source.markdownMap?.['ct-vehicle-binding'] ?? '',
+ 'ct-editor-panel': combineSections(['### 8.7 编辑区（左侧）']),
+ 'ct-preview-panel': extractSection(fullPrd, '### 8.8 实时预览（右侧）') ?? '',
};
function patchDirectoryMarkdown(nodes) {
@@ -97,6 +99,44 @@ function patchDirectoryMarkdown(nodes) {
const ctDocRoot = source.directory?.nodes?.find((n) => n.id === 'ct-doc-root');
if (ctDocRoot) patchDirectoryMarkdown(ctDocRoot.children);
+function patchListNodes(nodes) {
+ for (const node of nodes ?? []) {
+ if (node.id === 'ct-list-filter') {
+ node.annotationText = '支持按合同名称（可搜索下拉）、类型、状态、创建人、启用状态筛选；超过 4 项时默认折叠扩展筛选项。';
+ node.updatedAt = Date.now();
+ }
+ if (node.id === 'ct-list-toolbar') {
+ node.annotationText = '进入新增页；未导入 Word 前不展示章节 Tab。';
+ node.updatedAt = Date.now();
+ }
+ if (node.id === 'ct-section-tabs') {
+ node.aiPrompt = '由 Word「标题」样式自动生成的章节 Tab。';
+ node.annotationText = '导入 Word 后，按文档中标记为「标题」的段落文本自动生成章节 Tab；新增模式未导入前整段隐藏（含合同主体）。';
+ node.updatedAt = Date.now();
+ }
+ if (node.id === 'ct-contract-type') {
+ node.title = '合同主体配置';
+ node.aiPrompt = '合同主体章节下的合同名称与类型配置。';
+ node.annotationText = '仅当存在「合同主体」Tab 且选中时展示；合同名称与类型均为必填，同步至列表页。';
+ node.updatedAt = Date.now();
+ }
+ }
+}
+patchListNodes(source.data?.nodes);
+
+if (source.data?.annotationsByElementId && MARKDOWN_MAP['ct-list-filter']) {
+ source.data.annotationsByElementId['ct-list-filter'] = MARKDOWN_MAP['ct-list-filter'];
+ if (MARKDOWN_MAP['ct-list-table']) {
+ source.data.annotationsByElementId['ct-list-table'] = MARKDOWN_MAP['ct-list-table'];
+ }
+ if (MARKDOWN_MAP['ct-contract-type']) {
+ source.data.annotationsByElementId['ct-contract-type'] = MARKDOWN_MAP['ct-contract-type'];
+ }
+ if (MARKDOWN_MAP['ct-section-tabs']) {
+ source.data.annotationsByElementId['ct-section-tabs'] = MARKDOWN_MAP['ct-section-tabs'];
+ }
+}
+
source.markdownMap = { ...source.markdownMap, ...MARKDOWN_MAP };
source.data.updatedAt = Date.now();
diff --git a/src/prototypes/contract-template-management/styles/contract-template.css b/src/prototypes/contract-template-management/styles/contract-template.css
index 0a88231..215c301 100644
--- a/src/prototypes/contract-template-management/styles/contract-template.css
+++ b/src/prototypes/contract-template-management/styles/contract-template.css
@@ -1572,10 +1572,123 @@
table-layout: auto;
}
+.vm-page.ct-page .ct-rich-editor--word .ct-word-doc--imported,
+.vm-page.ct-page .ct-preview-page__body.ct-word-doc--imported,
+.vm-page.ct-page .ct-preview-doc .ct-word-doc--imported {
+ display: block;
+ width: 100%;
+ min-width: 0;
+ padding: 0 !important;
+ font-size: unset;
+ line-height: unset;
+ color: #000;
+ letter-spacing: normal;
+ word-break: normal;
+ overflow-wrap: break-word;
+}
+
+.vm-page.ct-page .ct-word-doc--imported p,
+.vm-page.ct-page .ct-word-doc--imported li {
+ margin: 0;
+ text-align: inherit;
+ text-indent: inherit;
+}
+
+.vm-page.ct-page .ct-word-doc--imported h1,
+.vm-page.ct-page .ct-word-doc--imported h2,
+.vm-page.ct-page .ct-word-doc--imported h3,
+.vm-page.ct-page .ct-word-doc--imported h4,
+.vm-page.ct-page .ct-word-doc--imported h5,
+.vm-page.ct-page .ct-word-doc--imported h6 {
+ margin: 0;
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+}
+
+.vm-page.ct-page .ct-word-doc--imported .ct-word-section-title {
+ font-weight: 700;
+ margin: 0;
+}
+
+.vm-page.ct-page .ct-word-doc--imported mark.ct-word-highlight,
+.vm-page.ct-page .ct-word-doc--imported .ct-word-highlight {
+ background-color: #ffff00;
+ color: inherit;
+ padding: 0;
+}
+
+.vm-page.ct-page .ct-word-doc--imported table {
+ border-collapse: collapse;
+ width: auto;
+ max-width: 100%;
+ table-layout: auto;
+}
+
+.vm-page.ct-page .ct-word-doc--imported td,
+.vm-page.ct-page .ct-word-doc--imported th {
+ vertical-align: top;
+}
+
+.vm-page.ct-page .ct-word-doc--imported img {
+ max-width: 100%;
+ height: auto;
+}
+
+.vm-page.ct-page .ct-preview-page__body.ct-word-doc--imported {
+ overflow: visible;
+ word-break: normal;
+}
+
.vm-page.ct-page .ct-rich-editor--word .ct-word-doc--v266 style {
display: none !important;
}
+.vm-page.ct-page .ct-preview-pages--docx-fidelity {
+ align-items: center;
+ width: 100%;
+}
+
+.vm-page.ct-page .ct-docx-fidelity-banner {
+ width: 100%;
+ max-width: 210mm;
+ margin: 0 auto 12px;
+ padding: 8px 12px;
+ font-size: 12px;
+ line-height: 1.5;
+ color: #334155;
+ background: #f8fafc;
+ border: 1px solid #e2e8f0;
+ border-radius: 8px;
+ box-sizing: border-box;
+}
+
+.vm-page.ct-page .ct-docx-fidelity-root {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+}
+
+.vm-page.ct-page .ct-docx-fidelity-root .docx-wrapper {
+ background: #fff;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+ margin: 0 auto;
+}
+
+.vm-page.ct-page .ct-docx-fidelity-fallback {
+ width: 210mm;
+ max-width: calc(100% - 10px);
+ padding: 24px;
+ text-align: center;
+ color: #64748b;
+ font-size: 13px;
+ background: #fff;
+ border: 1px solid #e2e8f0;
+ border-radius: 8px;
+}
+
.vm-page.ct-page .ct-rich-wrap--word-a4 .ct-editor-a4-shell {
position: relative;
flex: 1;
@@ -2047,10 +2160,36 @@
}
.vm-page.ct-page .ct-contract-type-card__form {
- max-width: 360px;
+ max-width: none;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: flex-end;
+ gap: 16px;
}
-.vm-page.ct-page .ct-contract-type-card__form .ct-editor-contract-type-input {
+.vm-page.ct-page .ct-contract-type-card__field {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ margin: 0;
+ flex: 1 1 0;
+ min-width: 0;
+}
+
+.vm-page.ct-page .ct-contract-type-card__field--type {
+ flex: 0 0 200px;
+ max-width: 220px;
+}
+
+.vm-page.ct-page .ct-contract-type-card__label {
+ font-size: 12px;
+ font-weight: 500;
+ color: #64748b;
+}
+
+.vm-page.ct-page .ct-contract-type-card__form .ct-editor-contract-type-input,
+.vm-page.ct-page .ct-contract-type-card__form .ct-editor-contract-type-select {
width: 100%;
}
diff --git a/src/prototypes/customer-management/annotation-source.json b/src/prototypes/customer-management/annotation-source.json
index 99e819a..62d6028 100644
--- a/src/prototypes/customer-management/annotation-source.json
+++ b/src/prototypes/customer-management/annotation-source.json
@@ -5,7 +5,7 @@
"version": 2,
"prototypeName": "customer-management",
"pageId": "list",
- "updatedAt": 1783328981485,
+ "updatedAt": 1783352657922,
"nodes": [
{
"id": "cm-list-filter",
diff --git a/src/prototypes/customer-management/components/FilterPanel.tsx b/src/prototypes/customer-management/components/FilterPanel.tsx
index dda9be3..88edc2a 100644
--- a/src/prototypes/customer-management/components/FilterPanel.tsx
+++ b/src/prototypes/customer-management/components/FilterPanel.tsx
@@ -175,7 +175,7 @@ export function FilterPanel({
return (
{visibleFields.map((field) => (
diff --git a/src/prototypes/customer-management/components/MultiSelectField.tsx b/src/prototypes/customer-management/components/MultiSelectField.tsx
index 82644ac..1b825e3 100644
--- a/src/prototypes/customer-management/components/MultiSelectField.tsx
+++ b/src/prototypes/customer-management/components/MultiSelectField.tsx
@@ -68,6 +68,7 @@ export function MultiSelectField({
-
-
共 {filtered.length} 条
- {filtered.length > 0 && (
-
- )}
+
-
共 {filtered.length} 条
- {filtered.length > 0 && (
-
- )}
+
-
共 {filtered.length} 条
- {filtered.length > 0 && (
-
- )}
+
-
共 {filtered.length} 条
- {filtered.length > 0 && (
-
- )}
+
-
共 {filtered.length} 条
- {filtered.length > 0 && (
-
- )}
+
-
共 {filtered.length} 条
- {filtered.length > 0 && (
-
- )}
+
-
共 {filtered.length} 条
- {filtered.length > 0 && (
-
- )}
+
+
+ {filtered.length === 0 ? (
+
暂无匹配项
+ ) : (
+ filtered.map((item) => (
+
+ ))
+ )}
+
+
+
{
setQuery(event.target.value);
setOpen(true);
+ if (!alwaysSearchable) setEditing(true);
+ window.requestAnimationFrame(updatePosition);
}}
onKeyDown={(event) => {
if (event.key === 'Escape') dismiss();
+ if (event.key === 'Enter' && filtered.length === 1) {
+ event.preventDefault();
+ pick(filtered[0]);
+ }
}}
/>
{value ? (
@@ -100,32 +206,19 @@ export function FilterPickerField({
) : null}
-
+
-
- {open && (
-
-
- {filtered.length === 0 ? (
-
暂无匹配项
- ) : (
- filtered.map((item) => (
-
- ))
- )}
-
-
- )}
+ {popover}
);
}
diff --git a/src/prototypes/vehicle-management/components/MultiPlateFilterField.tsx b/src/prototypes/vehicle-management/components/MultiPlateFilterField.tsx
new file mode 100644
index 0000000..b07eb4c
--- /dev/null
+++ b/src/prototypes/vehicle-management/components/MultiPlateFilterField.tsx
@@ -0,0 +1,82 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { parseMultiPlates } from '../utils/vehicle';
+import { useDismissOnFocusOutside } from './useDismissOnFocusOutside';
+
+interface MultiPlateFilterFieldProps {
+ value: string[];
+ onChange: (plateNos: string[]) => void;
+ placeholder?: string;
+ ariaLabel: string;
+ hint?: string;
+}
+
+export function MultiPlateFilterField({
+ value,
+ onChange,
+ placeholder = '点击输入多个车牌',
+ ariaLabel,
+ hint = '每行一个车牌，或同一行内用逗号分隔',
+}: MultiPlateFilterFieldProps) {
+ const [open, setOpen] = useState(false);
+ const [draft, setDraft] = useState('');
+ const fieldRef = useRef
(null);
+
+ const dismiss = useCallback(() => {
+ setOpen(false);
+ }, []);
+
+ useDismissOnFocusOutside(open, fieldRef, dismiss);
+
+ const summary = useMemo(() => {
+ if (value.length <= 0) return '';
+ if (value.length <= 2) return value.join('、');
+ return `已选 ${value.length} 个车牌`;
+ }, [value]);
+
+ const openPopover = () => {
+ setDraft(value.join('\n'));
+ setOpen(true);
+ };
+
+ const handleConfirm = () => {
+ onChange(parseMultiPlates(draft));
+ setOpen(false);
+ };
+
+ return (
+
+
+ {open && (
+
+ {hint ?
{hint}
: null}
+