Commit a05473b7 by pangchong

style(editor): 优化渲染相关样式和模板格式

- 规范 .rules.md 中高亮与定位联动描述的缩进格式
- 简化 DocNodeRenderer 组件中动态 class 的写法
- 优化多处行内样式字符串拼接,移除多余的分号
- 合并多行模板标签为单行,提升可读性
- 统一 CSS 选择器中单引号使用,保证风格一致
- 保持 TXTGRPHC 相关元素的严格等宽与中英文比例样式
parent ac6e7e82
...@@ -277,8 +277,8 @@ export const COMPOSITE_CONTAINER_MAP: Record<string, string[]> = { ...@@ -277,8 +277,8 @@ export const COMPOSITE_CONTAINER_MAP: Record<string, string[]> = {
2. **动态渲染(禁止写死)** 2. **动态渲染(禁止写死)**
在渲染这些容器下的子节点时,**必须使用 `v-for` 遍历 `COMPOSITE_CONTAINER_MAP[node.tagName]` 进行动态渲染**,严禁使用 `v-if="node.children.find(c => c.tagName === 'SPECIFIC_TAG')"` 这种死代码。 在渲染这些容器下的子节点时,**必须使用 `v-for` 遍历 `COMPOSITE_CONTAINER_MAP[node.tagName]` 进行动态渲染**,严禁使用 `v-if="node.children.find(c => c.tagName === 'SPECIFIC_TAG')"` 这种死代码。
3. **高亮与定位联动** 3. **高亮与定位联动**
- 必须在每一个可被编辑或选中的子节点 DOM 元素上挂载 `:data-node-id="child.id"`,以确保搜索及左侧树点击时能精确定位到该节点。 - 必须在每一个可被编辑或选中的子节点 DOM 元素上挂载 `:data-node-id="child.id"`,以确保搜索及左侧树点击时能精确定位到该节点。
- 父级包装器(如表格的 `<tr>`)如需在子节点被选中时联动高亮,必须通过遍历 `COMPOSITE_CONTAINER_MAP[parentTag]` 并判断 `child.id === selectedNodeId` 来动态激活高亮样式,确保高亮状态同步。 - 父级包装器(如表格的 `<tr>`)如需在子节点被选中时联动高亮,必须通过遍历 `COMPOSITE_CONTAINER_MAP[parentTag]` 并判断 `child.id === selectedNodeId` 来动态激活高亮样式,确保高亮状态同步。
### 20.3 Git 提交限制原则 ### 20.3 Git 提交限制原则
......
...@@ -457,11 +457,7 @@ ...@@ -457,11 +457,7 @@
<span <span
class="inline-flex items-baseline text-color1 cursor-pointer select-none" class="inline-flex items-baseline text-color1 cursor-pointer select-none"
:data-node-id="node.id" :data-node-id="node.id"
:class="[ :class="[editorStore.selectedNodeId === node.id ? 'ring-2 ring-primary ring-offset-1 rounded-sm bg-primary/20 px-0.5' : '']"
editorStore.selectedNodeId === node.id
? 'ring-2 ring-primary ring-offset-1 rounded-sm bg-primary/20 px-0.5'
: ''
]"
@click.stop="editorStore.setSelectedNodeId(node.id)" @click.stop="editorStore.setSelectedNodeId(node.id)"
> >
<template v-for="(child, idx) in node.children.filter((c) => c.tagName === 'TORVALUE')" :key="child.id"> <template v-for="(child, idx) in node.children.filter((c) => c.tagName === 'TORVALUE')" :key="child.id">
...@@ -477,11 +473,7 @@ ...@@ -477,11 +473,7 @@
<span <span
class="inline-flex items-center text-color1 cursor-pointer select-none font-mono underline hover:text-primary transition-all" class="inline-flex items-center text-color1 cursor-pointer select-none font-mono underline hover:text-primary transition-all"
:data-node-id="node.id" :data-node-id="node.id"
:class="[ :class="[editorStore.selectedNodeId === node.id ? 'ring-2 ring-primary ring-offset-1 rounded-sm bg-primary/20 px-0.5' : '']"
editorStore.selectedNodeId === node.id
? 'ring-2 ring-primary ring-offset-1 rounded-sm bg-primary/20 px-0.5'
: ''
]"
@click.stop="editorStore.setSelectedNodeId(node.id)" @click.stop="editorStore.setSelectedNodeId(node.id)"
> >
{{ formatTorvalue(node.attributes.MIN, node.attributes.MAX, node.attributes.UNIT) }} {{ formatTorvalue(node.attributes.MIN, node.attributes.MAX, node.attributes.UNIT) }}
...@@ -710,15 +702,10 @@ ...@@ -710,15 +702,10 @@
<template v-else-if="node.tagName === 'TXTGRPHC'"> <template v-else-if="node.tagName === 'TXTGRPHC'">
<div <div
class="my-2 font-mono text-sm leading-relaxed overflow-x-auto flex flex-col space-y-0.5" class="my-2 font-mono text-sm leading-relaxed overflow-x-auto flex flex-col space-y-0.5"
style="font-family: 'NSimSun', '新宋体', 'SimSun', '宋体', monospace !important; white-space: pre !important;" style="font-family: 'NSimSun', '新宋体', 'SimSun', '宋体', monospace !important; white-space: pre !important"
@click.stop="editorStore.setSelectedNodeId(node.id)" @click.stop="editorStore.setSelectedNodeId(node.id)"
> >
<DocNodeRenderer <DocNodeRenderer v-for="child in node.children" :key="child.id" :node="child" :parent="node" />
v-for="child in node.children"
:key="child.id"
:node="child"
:parent="node"
/>
</div> </div>
</template> </template>
...@@ -727,7 +714,7 @@ ...@@ -727,7 +714,7 @@
<div <div
contenteditable="true" contenteditable="true"
class="focus:outline-none focus:bg-fill-3 px-1 rounded min-h-[1.5em] transition-colors" class="focus:outline-none focus:bg-fill-3 px-1 rounded min-h-[1.5em] transition-colors"
style="font-family: 'NSimSun', '新宋体', 'SimSun', '宋体', monospace !important; white-space: pre !important;" style="font-family: 'NSimSun', '新宋体', 'SimSun', '宋体', monospace !important; white-space: pre !important"
@blur="handleTextBlur" @blur="handleTextBlur"
v-text="node.textContent" v-text="node.textContent"
></div> ></div>
...@@ -1137,10 +1124,10 @@ const { ...@@ -1137,10 +1124,10 @@ const {
color: inherit; color: inherit;
} }
/* 保护 TXTGRPHC 的严格等宽与中英文 2:1 比例 */ /* 保护 TXTGRPHC 的严格等宽与中英文 2:1 比例 */
[data-tag-name="TXTGRPHC"], [data-tag-name='TXTGRPHC'],
[data-tag-name="TXTGRPHC"] *, [data-tag-name='TXTGRPHC'] *,
[data-tag-name="TXTLINE"], [data-tag-name='TXTLINE'],
[data-tag-name="TXTLINE"] * { [data-tag-name='TXTLINE'] * {
font-family: 'NSimSun', '新宋体', 'SimSun', '宋体', monospace !important; font-family: 'NSimSun', '新宋体', 'SimSun', '宋体', monospace !important;
white-space: pre !important; white-space: pre !important;
} }
......
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