Skip to content

I
Ifar-Xml-Edtor
Commit 7fa140dc by pangchong
Options

style(editor): 优化代码格式和模板布局 

- 调整DocNodeRenderer组件中部分元素换行以提升可读性
- 合并CreateGraphicModal和TemplateSelectModal中多行元素为单行，提升模板简洁性
- 优化NodeTree组件中fade过渡样式换行，增加样式清晰度
- 规范EditorToolbar/functionals索引文件中对象尾部格式一致性
- 统一图片资源路径拼接函数中hasExtension布尔表达式格式
parent 2a453d67
Showing with 28 additions and 49 deletions
src/views/editor/components/DocNodeRenderer/index.vue
......@@ -810,7 +810,10 @@
</template>
<!-- 如果 SHEET 没有自己的 TITLE 子节点，则继承展示 GRAPHIC 的 TITLE -->
<div v-if="!node.children.some((c) => c.tagName === 'TITLE' || c.tagName === 'TITLEC') && getInheritedTitle()" class="text-sm font-bold text-center mt-3 text-color1">
<div
v-if="!node.children.some((c) => c.tagName === 'TITLE' || c.tagName === 'TITLEC') && getInheritedTitle()"
class="text-sm font-bold text-center mt-3 text-color1"
>
{{ getInheritedTitle() }}
</div>
......@@ -846,10 +849,7 @@
<!-- 19.7 GDESC (图形描述) 处理 -->
<template v-else-if="node.tagName === 'GDESC'">
<div
class="my-1.5 pl-[14pt] pr-[6pt] text-xs text-color3 leading-relaxed"
@click.stop="editorStore.setSelectedNodeId(node.id)"
>
<div class="my-1.5 pl-[14pt] pr-[6pt] text-xs text-color3 leading-relaxed" @click.stop="editorStore.setSelectedNodeId(node.id)">
<DocNodeRenderer v-for="child in node.children" :key="child.id" :node="child" :parent="node" />
</div>
</template>
......@@ -858,20 +858,14 @@
<template v-else-if="node.tagName === 'TITLE' || node.tagName === 'TITLEC'">
<div
class="text-color1 font-bold my-2"
:class="[
parent && (parent.tagName === 'SHEET' || parent.tagName === 'GRAPHIC') ? 'text-sm text-center' : 'text-base'
]"
:class="[parent && (parent.tagName === 'SHEET' || parent.tagName === 'GRAPHIC') ? 'text-sm text-center' : 'text-base']"
@click.stop="editorStore.setSelectedNodeId(node.id)"
>
<template v-if="node.mixedContent && node.mixedContent.length > 0">
<span v-for="(mixed, idx) in node.mixedContent" :key="idx">
<template v-if="mixed.type === 'text'">{{ mixed.text }}</template>
<template v-else-if="mixed.type === 'element'">
<DocNodeRenderer
:node="node.children.find((c) => c.id === mixed.nodeId)!"
:parent="node"
is-inline
/>
<DocNodeRenderer :node="node.children.find((c) => c.id === mixed.nodeId)!" :parent="node" is-inline />
</template>
</span>
</template>
......@@ -1222,7 +1216,8 @@ const getImgSrc = (gnbr: string) => {
// 拼接工卡基础物理路径目录，让 vite proxy 代理到真实图片地址
const basePath = '/mnt/disk2/ftp/tdms/jobcard/cep/MU/MU-B-3333-20260701-001/A320/SMJC/AMEA-A282400-02-1/0/'
const lowerGnbr = gnbr.toLowerCase()
const hasExtension = lowerGnbr.endsWith('.png') ||
const hasExtension =
lowerGnbr.endsWith('.png') ||
lowerGnbr.endsWith('.jpg') ||
lowerGnbr.endsWith('.jpeg') ||
lowerGnbr.endsWith('.gif') ||
......
src/views/editor/components/EditorToolbar/components/CreateGraphicModal/index.vue
<template>
<CommonModal v-model="show" :title="isSheetOnly ? '插入图纸页 (SHEET)' : '插入图片 (GRAPHIC)'" :width="400" @confirm="handleConfirm">
<div class="flex flex-col gap-4 py-2">
<div class="text-xs text-color3 mb-1">
请选择插入时需要携带的可选节点：
</div>
<div class="text-xs text-color3 mb-1">请选择插入时需要携带的可选节点：</div>
<!-- GRAPHIC 级别的可选节点 (仅在非 SHEET-only 模式下显示) -->
<div v-if="!isSheetOnly" class="p-3 bg-fill-2 border border-divider rounded-lg">
<div class="font-bold text-xs text-color2 mb-2">图片 (GRAPHIC) 可选节点</div>
<div class="flex flex-col gap-2">
<n-checkbox v-model:checked="form.hasGraphicEffect">
包含适用性说明 &lt;EFFECT&gt;
</n-checkbox>
<n-checkbox v-model:checked="form.hasGraphicTitle">
包含附图标题 &lt;TITLE&gt;
</n-checkbox>
<n-checkbox v-model:checked="form.hasGraphicEffect">包含适用性说明 &lt;EFFECT&gt;</n-checkbox>
<n-checkbox v-model:checked="form.hasGraphicTitle">包含附图标题 &lt;TITLE&gt;</n-checkbox>
</div>
</div>
......@@ -22,12 +16,8 @@
<div class="p-3 bg-fill-2 border border-divider rounded-lg">
<div class="font-bold text-xs text-color2 mb-2">图纸 (SHEET) 可选节点</div>
<div class="flex flex-col gap-2">
<n-checkbox v-model:checked="form.hasSheetEffect">
包含适用性说明 &lt;EFFECT&gt;
</n-checkbox>
<n-checkbox v-model:checked="form.hasSheetTitle">
包含图纸标题 &lt;TITLE&gt;
</n-checkbox>
<n-checkbox v-model:checked="form.hasSheetEffect">包含适用性说明 &lt;EFFECT&gt;</n-checkbox>
<n-checkbox v-model:checked="form.hasSheetTitle">包含图纸标题 &lt;TITLE&gt;</n-checkbox>
</div>
</div>
......
src/views/editor/components/EditorToolbar/components/TemplateSelectModal/index.vue
......@@ -20,22 +20,18 @@
<n-list-item
v-for="item in templates"
:key="item.id"
:class="['transition-colors cursor-pointer', selectedTemplate?.id === item.id ? 'bg-primary/5 border-l-4 border-primary' : '']"
:class="[
'transition-colors cursor-pointer',
selectedTemplate?.id === item.id ? 'bg-primary/5 border-l-4 border-primary' : ''
]"
@click="selectedTemplate = item"
@dblclick="handleInsert"
>
<n-thing
:title="item.name"
:description="`创建人: ${item.creator} | 创建时间: ${item.createTime}`"
/>
<n-thing :title="item.name" :description="`创建人: ${item.creator} | 创建时间: ${item.createTime}`" />
<template #suffix>
<n-space>
<CommonButton size="tiny" secondary type="primary" @click.stop="previewXml(item)">
预览 XML
</CommonButton>
<CommonButton size="tiny" secondary type="info" @click.stop="previewEffect(item)">
预览效果
</CommonButton>
<CommonButton size="tiny" secondary type="primary" @click.stop="previewXml(item)">预览 XML</CommonButton>
<CommonButton size="tiny" secondary type="info" @click.stop="previewEffect(item)">预览效果</CommonButton>
</n-space>
</template>
</n-list-item>
......@@ -53,17 +49,13 @@
<!-- 左侧：已选中的模板名称提示 -->
<div class="text-xs text-color2">
<span v-if="selectedTemplate">
已选择：<strong class="text-primary">{{ selectedTemplate.name }}</strong>
已选择：
<strong class="text-primary">{{ selectedTemplate.name }}</strong>
<span class="text-color3 ml-3">({{ insertBelowSetting ? '插入下方' : '作为子节点' }})</span>
</span>
<span v-else class="text-color3">请从列表中选择模板</span>
</div>
<n-pagination
v-model:page="page"
v-model:page-size="pageSize"
:item-count="total"
@update:page="fetchData"
/>
<n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="total" @update:page="fetchData" />
</div>
</div>
</CommonModal>
......
src/views/editor/components/EditorToolbar/functionals/index.ts
......@@ -177,6 +177,6 @@ export function useEditorToolbar(emit: any) {
extractTranslateModalRef,
searchTranslateModalRef,
xmlSizeStr,
templateSelectModalRef,
templateSelectModalRef
}
}
src/views/editor/components/NodeTree/index.vue
......@@ -468,7 +468,9 @@ const batchDeleteConfirmModalRef = ref<any>(null)
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.fade-enter-from,
.fade-leave-to {
......
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