Skip to content

I
Ifar-Xml-Edtor
Commit 0a57dc1b by pangchong
Options

style: 优化REFBLOCK子项的分隔符，隐藏重复的ALL适用性标签并优化HTML清理逻辑

parent 082136f7
Showing with 165 additions and 110 deletions
src/configs/xmlTags.ts
......@@ -70,7 +70,10 @@ export const INLINE_ELEMENTS = [
'REVEND',
'EXPD',
'EXPDNAME',
'ITEMNBR'
'ITEMNBR',
'RECORD',
'RECORD-ITEMS',
'RECORD-ITEM'
]
// 段落类节点标签（PARA 为英文段落，PARAC 为中文段落）
......
src/layouts/components/SettingsDrawer.vue
<template>
<!-- 触发按钮 -->
<slot name="trigger" :open="() => appStore.settingsOpen = true">
<CommonButton quaternary circle @click="appStore.settingsOpen = true">
<template #icon>
<n-icon><settings-outline /></n-icon>
</template>
</CommonButton>
</slot>
<!-- 偏好设置抽屉 -->
<n-drawer
......
src/store/editor/index.ts
......@@ -284,8 +284,34 @@ const createDefaultNodeStructure = (tagName: string): XmlNode => {
}
}
if (tagName === 'RECORD-LINE') {
const recordId = crypto.randomUUID()
return {
id,
tagName: 'RECORD-LINE',
attributes: { ...attributes },
children: [
{
id: recordId,
tagName: 'RECORD',
attributes: {
MULTI: 'N',
MANDATORY: 'Y',
'MES-TYPE': 'TEXT'
},
children: [],
textContent: '',
mixedContent: [],
parentId: id
}
],
textContent: '',
mixedContent: [],
parentId: null
}
}
let defaultText = ''
if (tagName === 'RECORD-LINE') defaultText = '记录项：__________________'
if (tagName === 'DATE') defaultText = new Date().toISOString().split('T')[0]
if (tagName === 'UNIT-RECORD') defaultText = '测量值：____ 毫米'
......
src/views/editor/components/DocNodeRenderer/functionals/index.ts
......@@ -56,64 +56,6 @@ export function useDocNodeRenderer(props: { node: XmlNode; parent?: XmlNode | nu
provide('insideChinese', true)
}
const shouldHideDuplicate = computed(() => {
const node = props.node
const parent = props.parent
if (!parent) return false
const isParaPair = node.tagName === 'PARA' || node.tagName === 'PARAC'
const isTitlePair = node.tagName === 'TITLE' || node.tagName === 'TITLEC'
if (!isParaPair && !isTitlePair) return false
const siblingTagName = node.tagName === 'PARA' ? 'PARAC' : node.tagName === 'PARAC' ? 'PARA' : node.tagName === 'TITLE' ? 'TITLEC' : 'TITLE'
const siblings = parent.children.filter((c) => c.tagName === siblingTagName)
const getEffectiveText = (n: XmlNode): string => {
if (n.textContent) return n.textContent.trim()
if (n.mixedContent && n.mixedContent.length > 0) {
return n.mixedContent
.filter((item) => item.type === 'text')
.map((item) => item.text || '')
.join('')
.trim()
}
if (n.children && n.children.length > 0) {
const getDeep = (nn: XmlNode): string => {
if (nn.textContent) return nn.textContent.trim()
if (nn.mixedContent && nn.mixedContent.length > 0) {
return nn.mixedContent
.filter((item) => item.type === 'text')
.map((item) => item.text || '')
.join('')
.trim()
}
if (nn.children && nn.children.length > 0) {
return nn.children.map(getDeep).join('').trim()
}
return ''
}
return getDeep(n)
}
return ''
}
const currentEffectiveText = getEffectiveText(node)
if (!currentEffectiveText) return false
const hasDuplicateSibling = siblings.some((sib) => {
return getEffectiveText(sib) === currentEffectiveText
})
if (hasDuplicateSibling) {
// Hide the English tag (PARA or TITLE) and keep the Chinese one (PARAC or TITLEC)
if (node.tagName === 'PARA' || node.tagName === 'TITLE') {
return true
}
}
return false
})
const renderInline = computed(() => {
return props.isInline || INLINE_ELEMENTS_SET.has(props.node.tagName)
......@@ -158,12 +100,65 @@ export function useDocNodeRenderer(props: { node: XmlNode; parent?: XmlNode | nu
if (!eff) return 'ALL'
const cleaned = eff.replace(/\s+/g, '')
if (cleaned === '001999') return 'ALL'
// 如果是纯数字，且长度是6的倍数
if (/^\d+$/.test(cleaned) && cleaned.length % 6 === 0) {
const parts: string[] = []
for (let i = 0; i < cleaned.length; i += 6) {
const block = cleaned.substring(i, i + 6)
if (block === '001999') {
parts.push('ALL')
continue
}
const start = block.substring(0, 3)
const end = block.substring(3)
if (start === end) {
parts.push(start)
} else {
parts.push(`${start}-${end}`)
}
}
return parts.join(', ')
}
// 如果是纯数字且长度是3位（单个飞机）
if (/^\d{3}$/.test(cleaned)) {
return cleaned
}
// 回退逻辑：如果长度为6
if (cleaned.length === 6) {
return `${cleaned.substring(0, 3)}-${cleaned.substring(3)}`
}
return cleaned
}
// 判断是否需要显示参考/引用前缀，若内容本身以引用词汇开头则不显示前缀
const shouldShowPrefix = (text: string | undefined): boolean => {
if (!text) return true
const trimmed = text.trim().toLowerCase()
if (
trimmed.startsWith('refer') ||
trimmed.startsWith('ref') ||
trimmed.startsWith('see') ||
trimmed.startsWith('fig') ||
trimmed.startsWith('view')
) {
return false
}
if (
trimmed.startsWith('参考') ||
trimmed.startsWith('参阅') ||
trimmed.startsWith('参见') ||
trimmed.startsWith('见') ||
trimmed.startsWith('图')
) {
return false
}
return true
}
// 罗马数字转换辅助
const romanize = (num: number): string => {
let roman = ''
......@@ -434,8 +429,8 @@ export function useDocNodeRenderer(props: { node: XmlNode; parent?: XmlNode | nu
isHeaderTag,
isInsideAlert,
isChineseContext,
shouldHideDuplicate,
formatEff,
shouldShowPrefix,
getListBullet,
getTopicSeqNum,
getTopicTitleNodes,
......
src/views/editor/components/DocNodeRenderer/index.vue
<template>
<component
v-if="!shouldHideDuplicate"
:is="renderInline ? 'span' : 'div'"
:data-node-id="node.id"
:data-tag-name="node.tagName"
class="doc-node-wrapper relative transition-all"
:class="[
renderInline ? 'inline align-baseline mx-0.5' : 'block my-1',
......@@ -30,7 +30,7 @@
}"
>
<span
class="absolute left-0 top-0 font-bold underline select-none"
class="absolute left-0 top-0 pt-1 leading-relaxed font-bold underline select-none"
:style="{
color: node.tagName === 'WARNING' ? 'red' : node.tagName === 'CAUTION' ? '#ff6a00' : 'blue'
}"
......@@ -45,6 +45,7 @@
<!-- 2. EFFECT / CONEFFECT (适用性) 特殊处理 -->
<template v-else-if="node.tagName === 'EFFECT' || node.tagName === 'CONEFFECT'">
<template v-if="formatEff(node.attributes.EFFRG || node.textContent) !== 'ALL' || isSelected">
<span v-if="renderInline" class="font-bold text-xs select-none py-1 uppercase mx-1 italic" style="color: red">
** {{ node.tagName === 'EFFECT' ? 'ON A/C' : 'CONF' }}: {{ formatEff(node.attributes.EFFRG || node.textContent) }}
</span>
......@@ -56,6 +57,7 @@
** {{ node.tagName === 'EFFECT' ? 'ON A/C' : 'CONF' }}: {{ formatEff(node.attributes.EFFRG || node.textContent) }}
</div>
</template>
</template>
<!-- 3. SBEFF / SBEFFC (服务通告适用性) 处理 -->
<template v-else-if="node.tagName === 'SBEFF' || node.tagName === 'SBEFFC'">
......@@ -95,9 +97,13 @@
<!-- 6. PARA / PARAC 段落文本处理 -->
<template v-else-if="PARA_SET.has(node.tagName)">
<div
<component
:is="renderInline ? 'span' : 'div'"
class="text-sm leading-relaxed py-1 flex flex-wrap items-center"
:class="[isInsideAlert ? 'text-inherit' : 'text-color2']"
:class="[
isInsideAlert ? 'text-inherit' : 'text-color2',
renderInline ? 'inline mx-0.5' : 'flex'
]"
:style="{ justifyContent: 'var(--cell-align, flex-start)' }"
>
<template v-if="node.mixedContent && node.mixedContent.length > 0">
......@@ -138,23 +144,26 @@
</template>
<!-- 否则，如果是一个纯文本的段落，直接展示和编辑文本 -->
<template v-else>
<div
<component
:is="renderInline ? 'span' : 'div'"
contenteditable="true"
class="w-full focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors"
class="focus:outline-none focus:bg-fill-3 px-1 rounded transition-colors"
:class="[renderInline ? 'inline mx-0.5' : 'w-full']"
@blur="handleTextBlur"
v-text="node.textContent"
></div>
></component>
</template>
</div>
</component>
</template>
<!-- 7. REFBLOCK 特殊处理 -->
<template v-else-if="node.tagName === 'REFBLOCK'">
<span class="inline-ref-block font-medium" style="color: blue">
{{ isChineseContext ? '(参考: ' : '(Ref: ' }}
<template v-if="node.mixedContent && node.mixedContent.length > 0">
<template v-for="(item, index) in node.mixedContent" :key="index">
<span
v-if="item.type === 'text'"
v-if="item.type === 'text' && item.text && item.text.trim()"
:data-node-id="`${node.id}-txt-${index}`"
contenteditable="true"
class="focus:outline-none px-0.5 rounded inline transition-all"
......@@ -187,6 +196,7 @@
v-text="node.textContent"
></span>
</template>
{{ ')' }}
</span>
</template>
......@@ -198,7 +208,7 @@
@click.stop="editorStore.setSelectedNodeId(node.id)"
>
<template v-if="!insideRefBlock">
{{ isChineseContext ? '(参考: ' : '(Ref: ' }}
{{ shouldShowPrefix(node.textContent) ? (isChineseContext ? '(参考: ' : '(Ref: ') : '(' }}
<template v-if="node.mixedContent && node.mixedContent.length > 0">
<template v-for="(item, index) in node.mixedContent" :key="index">
<span
......@@ -288,7 +298,7 @@
@click.stop="editorStore.setSelectedNodeId(node.id)"
>
<template v-if="!insideRefBlock">
{{ isChineseContext ? '(参考: ' : '(Ref: ' }}
{{ shouldShowPrefix(node.textContent || node.attributes.REFLOC) ? (isChineseContext ? '(参考: ' : '(Ref: ') : '(' }}
<span
contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded inline"
......@@ -316,7 +326,7 @@
@click.stop="editorStore.setSelectedNodeId(node.id)"
>
<template v-if="!insideRefBlock">
{{ isChineseContext ? '(参考: ' : '(Ref: ' }}
{{ shouldShowPrefix(node.textContent) ? (isChineseContext ? '(参考: ' : '(Ref: ') : '(' }}
<template v-if="node.mixedContent && node.mixedContent.length > 0">
<template v-for="(item, index) in node.mixedContent" :key="index">
<span
......@@ -667,18 +677,44 @@
<!-- 20. RECORD-LINE (记录项) 处理 -->
<template v-else-if="node.tagName === 'RECORD-LINE'">
<div class="my-2 p-2 bg-fill-3 rounded border border-divider flex items-center space-x-2">
<CommonTag type="info" size="small" round>记录项</CommonTag>
<div
<div class="my-1 py-1">
<div class="flex flex-wrap items-center gap-1.5 text-sm text-color2">
<template v-if="node.children && node.children.length > 0">
<DocNodeRenderer
v-for="child in node.children"
:key="child.id"
:node="child"
:parent="node"
is-inline
/>
</template>
<template v-else-if="node.textContent && node.textContent.trim()">
<span
contenteditable="true"
class="flex-1 text-sm text-color2 font-medium focus:outline-none focus:bg-fill-2 px-1 rounded"
class="focus:outline-none focus:bg-fill-3 px-0.5 rounded"
@blur="handleTextBlur"
v-text="node.textContent"
></div>
<div class="text-xs text-color3 select-none">[已预留输入线]</div>
></span>
</template>
<span v-else class="text-xs text-color3 select-none">[空记录项，请从左侧树或右键菜单插入子节点]</span>
</div>
</div>
</template>
<!-- 20.5 RECORD (记录输入框) 处理 -->
<template v-else-if="node.tagName === 'RECORD'">
<span
contenteditable="true"
class="inline-block border-b border-color3 hover:border-primary focus:border-primary min-w-[80px] text-center focus:outline-none focus:bg-fill-2 px-1 mx-1 text-sm font-mono text-primary font-bold transition-all"
:style="{
width: node.attributes.WIDTH ? (node.attributes.WIDTH.includes('px') || node.attributes.WIDTH.includes('%') ? node.attributes.WIDTH : `${node.attributes.WIDTH}px`) : 'auto',
minWidth: node.attributes.WIDTH ? '0' : '80px'
}"
@blur="handleTextBlur"
v-text="node.textContent"
></span>
</template>
<!-- 21. UNIT-RECORD (单位记录项) 处理 -->
<template v-else-if="node.tagName === 'UNIT-RECORD'">
<div class="my-2 p-2 bg-fill-3 rounded border border-divider flex items-center justify-between">
......@@ -907,7 +943,7 @@
<!-- 结构上等同于 NOTE，但含义不同，用不同的标签文字区分 -->
<template v-else-if="NOTE_VARIANT_SET.has(node.tagName)">
<div class="relative my-3 text-sm" style="padding-left: 80px; color: blue">
<span class="absolute left-0 top-0 font-bold underline select-none" style="color: blue">
<span class="absolute left-0 top-0 pt-1 leading-relaxed font-bold underline select-none" style="color: blue">
{{
node.tagName === 'HNANOTE'
? '操作注意 HNANOTE:'
......@@ -1017,8 +1053,8 @@ const {
isHeaderTag,
isInsideAlert,
isChineseContext,
shouldHideDuplicate,
formatEff,
shouldShowPrefix,
getListBullet,
getTopicSeqNum,
getTopicTitleNodes,
......@@ -1039,4 +1075,8 @@ const {
.doc-node-wrapper:hover {
background-color: var(--n-color-hover);
}
.inline-ref-block > *:not(:first-child)::before {
content: ", ";
color: inherit;
}
</style>
src/views/editor/components/EditorToolbar/constants/index.ts
import { ImageOutline, GridOutline, DocumentTextOutline, CreateOutline } from '@vicons/ionicons5'
import { ImageOutline, GridOutline, DocumentTextOutline, CreateOutline, RemoveOutline } from '@vicons/ionicons5'
/**
* EditorToolbar 组件级静态常量
......@@ -9,5 +9,6 @@ export const GREEN_BUTTONS: any[] = [
// { label: '插入图片', tag: 'GRAPHIC', icon: ImageOutline },
{ label: '插入表格', tag: 'TABLE', icon: GridOutline },
// { label: '插入模板', tag: 'PRETOPIC', icon: DocumentTextOutline },
{ label: '插入签字点', tag: 'SIGNOFF', icon: CreateOutline }
{ label: '插入签字点', tag: 'SIGNOFF', icon: CreateOutline },
{ label: '插入下划线', tag: 'RECORD-LINE', icon: RemoveOutline }
]
src/views/editor/components/NodeTree/components/ViewXmlModal/index.vue
......@@ -6,13 +6,6 @@
class="rounded-xl overflow-hidden border border-divider shadow-lg relative bg-fill-4"
style="background-image: radial-gradient(circle, rgba(0, 0, 0, 0.02) 1px, transparent 1px); background-size: 16px 16px"
>
<!-- 磨砂玻璃质感的顶部装饰条 -->
<div class="h-8 bg-fill-3 border-b border-divider flex items-center px-4 space-x-1.5 select-none shrink-0">
<div class="w-3 h-3 rounded-full bg-danger/80"></div>
<div class="w-3 h-3 rounded-full bg-warning/80"></div>
<div class="w-3 h-3 rounded-full bg-success/80"></div>
</div>
<div class="p-6 font-mono text-sm leading-relaxed overflow-x-auto max-h-[500px] scrollbar-thin select-all">
<pre class="text-color1"><code class="xml-content-pre">{{ viewXmlContent }}</code></pre>
</div>
......
src/views/editor/components/TableEditor/functionals/index.ts
......@@ -210,7 +210,7 @@ export function useTableEditor(props: { node: XmlNode }) {
})
// 解析文字
let paragraphs: CellParagraphModel[] = entryNode.children
const paragraphs: CellParagraphModel[] = entryNode.children
.filter((c) => PARA_TAGS.includes(c.tagName))
.map((pNode) => ({
id: pNode.id,
......@@ -219,23 +219,6 @@ export function useTableEditor(props: { node: XmlNode }) {
attributes: pNode.attributes
}))
const filteredParagraphs: CellParagraphModel[] = []
for (let i = 0; i < paragraphs.length; i++) {
const current = paragraphs[i]
const isParaPair = current.tagName === 'PARA' || current.tagName === 'PARAC'
if (isParaPair) {
const siblingTagName = current.tagName === 'PARA' ? 'PARAC' : 'PARA'
const hasDuplicate = paragraphs.some((p) => {
return p.tagName === siblingTagName && p.text.trim() === current.text.trim()
})
if (hasDuplicate && current.tagName === 'PARA') {
continue
}
}
filteredParagraphs.push(current)
}
paragraphs = filteredParagraphs
if (paragraphs.length === 0 && !hasComplexChildren) {
paragraphs.push({
id: entryNode.id,
......
src/views/editor/components/TableEditor/index.vue
......@@ -78,7 +78,7 @@
@click.stop="handleCellClick(cell, $event)"
@contextmenu.prevent="handleCellContextMenu(cell, row.id, $event)"
>
<template v-if="cell.hasComplexChildren && cell.rawNode">
<template v-if="cell.rawNode && cell.rawNode.children && cell.rawNode.children.length > 0">
<DocNodeRenderer v-for="child in cell.rawNode!.children" :key="child.id" :node="child" :parent="cell.rawNode" />
</template>
<template v-else>
......@@ -169,7 +169,7 @@
@click.stop="handleCellClick(cell, $event)"
@contextmenu.prevent="handleCellContextMenu(cell, row.id, $event)"
>
<template v-if="cell.hasComplexChildren && cell.rawNode">
<template v-if="cell.rawNode && cell.rawNode.children && cell.rawNode.children.length > 0">
<DocNodeRenderer v-for="child in cell.rawNode!.children" :key="child.id" :node="child" :parent="cell.rawNode" />
</template>
<template v-else>
......
src/views/editor/functionals/index.ts
......@@ -119,6 +119,13 @@ export function useEditor() {
el.remove()
})
// 0.5. 移除所有评估为 'ALL' 且非必填显示的 applicability 标签 (避免在导出的 HTML 中重复出现大量的 ** ON A/C: ALL)
clone.querySelectorAll('[data-tag-name="EFFECT"], [data-tag-name="CONEFFECT"]').forEach((el) => {
if (el.textContent?.includes('ALL')) {
el.remove()
}
})
// 1. 去除 contenteditable 属性，防止打印时显示光标或被编辑
clone.querySelectorAll('[contenteditable]').forEach((el) => {
el.removeAttribute('contenteditable')
......@@ -198,6 +205,11 @@ export function useEditor() {
}
})
// 移除 RECORD-LINE / UNIT-RECORD 外层的边框与背景色类名
clone.querySelectorAll('[data-tag-name="RECORD-LINE"] > div, [data-tag-name="UNIT-RECORD"] > div').forEach((el) => {
el.classList.remove('bg-fill-3', 'border', 'border-divider', 'p-2', 'rounded')
})
// 5. 移除表格顶部的快捷操作工具栏
clone.querySelectorAll('.flex.items-center.pb-2.border-b').forEach((el) => {
el.remove()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment