Skip to content

I
Ifar-Xml-Edtor
Commit 9eac7b69 by pangchong
Options

style(editor): 优化暂存面板组件代码格式与布局 

- 统一调整了CommonButton和CommonModal的模板写法，减少换行使代码更紧凑
- 合并多余换行，修正部分标签内文本换行，保证代码行长度适中
- 优化filterItems和activeItem计算属性的箭头函数格式
- 调整条件返回语句括号位置，增强代码可读性
- 优化XML文本处理逻辑，提升代码简洁度和注释清晰度
- 统一多个模板中的样式和类名换行格式，维护一致的代码风格
- 对NodeTree组件增加括号包裹以适应多行表达式
- 精简StashNodeModal组件模板代码，合并多行属性为单行
- 删除无用空行与空白字符，确保文件结尾无多余空行
parent 7f4a27c3
Showing with 28 additions and 79 deletions
src/store/stash/index.ts
......@@ -35,4 +35,3 @@ export const useStashStore = defineStore('stash', {
})
export * from './types'
src/views/editor/components/EditorToolbar/components/StashModal/functionals/index.ts
......@@ -23,15 +23,12 @@ export function useStashModal() {
const filteredItems = computed(() => {
const query = searchText.value.trim().toLowerCase()
if (!query) return stashStore.items
return stashStore.items.filter(item =>
item.name.toLowerCase().includes(query) ||
item.xmlNode.tagName.toLowerCase().includes(query)
)
return stashStore.items.filter((item) => item.name.toLowerCase().includes(query) || item.xmlNode.tagName.toLowerCase().includes(query))
})
// 当前选中的项
const activeItem = computed(() => {
const found = stashStore.items.find(item => item.id === activeItemId.value)
const found = stashStore.items.find((item) => item.id === activeItemId.value)
if (found) return found
// 默认选中过滤后列表的首项
return filteredItems.value[0] || null
......@@ -44,7 +41,7 @@ export function useStashModal() {
let xmlTextTimer: ReturnType<typeof setTimeout> | null = null
const isCopied = ref(false)
// 动态提示默认生成的暂存别名
const defaultNamePlaceholder = computed(() => {
const timeStr = new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' })
......@@ -77,13 +74,11 @@ export function useStashModal() {
try {
const xmlText = serializeTreeToXml(item.xmlNode, 0, false)
activeItemXmlText.value = xmlText
// 将序列化的树转换为单行文本，并拼装相应的 XML 头以匹配实际导出的字节数
const singleLineXml = xmlText.replace(/\r?\n\s*/g, '')
const finalXml = item.type === 'full'
? `<?xml version="1.0" encoding="utf-8"?>${singleLineXml}`
: singleLineXml
const finalXml = item.type === 'full' ? `<?xml version="1.0" encoding="utf-8"?>${singleLineXml}` : singleLineXml
const bytes = new Blob([finalXml]).size
if (bytes === 0) {
activeItemSizeStr.value = '0 B'
......
src/views/editor/components/EditorToolbar/components/StashModal/index.vue
......@@ -18,25 +18,13 @@
/>
</div>
<div class="flex items-center gap-2">
<CommonButton
type="primary"
size="small"
:disabled="!hasXmlTree"
class="flex-1"
@click="handleStashFull"
>
<CommonButton type="primary" size="small" :disabled="!hasXmlTree" class="flex-1" @click="handleStashFull">
<template #icon>
<n-icon><ArchiveOutline /></n-icon>
</template>
暂存整个 XML
</CommonButton>
<CommonButton
type="warning"
size="small"
:disabled="!selectedNode"
class="flex-1"
@click="handleStashFragment"
>
<CommonButton type="warning" size="small" :disabled="!selectedNode" class="flex-1" @click="handleStashFragment">
<template #icon>
<n-icon><CodeWorkingOutline /></n-icon>
</template>
......@@ -48,24 +36,13 @@
<!-- 搜索与列表头部 -->
<div class="flex items-center justify-between mb-2 px-1">
<div class="flex items-center gap-2 flex-1 max-w-[280px]">
<n-input
v-model:value="searchText"
placeholder="搜索暂存记录..."
size="small"
class="text-xs"
>
<n-input v-model:value="searchText" placeholder="搜索暂存记录..." size="small" class="text-xs">
<template #prefix>
<n-icon class="opacity-40"><SearchOutline /></n-icon>
</template>
</n-input>
</div>
<CommonButton
v-if="stashStore.items.length > 0"
size="small"
type="error"
secondary
@click="handleClearAll"
>
<CommonButton v-if="stashStore.items.length > 0" size="small" type="error" secondary @click="handleClearAll">
<template #icon>
<n-icon><TrashOutline /></n-icon>
</template>
......@@ -89,7 +66,9 @@
v-for="item in filteredItems"
:key="item.id"
class="p-3 cursor-pointer hover:bg-fill-2/50 transition-all flex flex-col gap-2 relative group"
:class="activeItem?.id === item.id ? 'bg-fill-3 border-l-2 border-primary pl-2.5' : 'border-l-2 border-transparent pl-3'"
:class="
activeItem?.id === item.id ? 'bg-fill-3 border-l-2 border-primary pl-2.5' : 'border-l-2 border-transparent pl-3'
"
@click="activeItemId = item.id"
>
<!-- 标题行 -->
......@@ -115,9 +94,7 @@
<n-tag size="tiny" :type="item.type === 'full' ? 'info' : 'warning'" :bordered="false" round>
{{ item.type === 'full' ? '完整XML' : '片段' }}
</n-tag>
<span class="font-mono bg-fill-2 px-1.5 py-0.5 rounded text-color2">
&lt;{{ item.xmlNode.tagName }}&gt;
</span>
<span class="font-mono bg-fill-2 px-1.5 py-0.5 rounded text-color2">&lt;{{ item.xmlNode.tagName }}&gt;</span>
</div>
<span class="font-mono">{{ item.time }}</span>
</div>
......@@ -147,12 +124,7 @@
</template>
下载 XML
</CommonButton>
<CommonButton
size="small"
:type="isCopied ? 'success' : 'primary'"
secondary
@click="handleCopyXml(activeItem)"
>
<CommonButton size="small" :type="isCopied ? 'success' : 'primary'" secondary @click="handleCopyXml(activeItem)">
<template #icon>
<n-icon>
<CheckmarkOutline v-if="isCopied" />
......@@ -165,7 +137,9 @@
</div>
<!-- 代码预览区 -->
<div class="flex-1 overflow-auto border border-divider rounded-lg bg-card p-3 relative font-mono text-[11px] leading-5 select-text custom-scrollbar">
<div
class="flex-1 overflow-auto border border-divider rounded-lg bg-card p-3 relative font-mono text-[11px] leading-5 select-text custom-scrollbar"
>
<div v-if="isXmlTextLoading" class="flex flex-col gap-2 animate-pulse py-1">
<div class="h-3 bg-fill-3 rounded w-4/5"></div>
<div class="h-3 bg-fill-3 rounded w-full"></div>
......@@ -179,7 +153,7 @@
<!-- 操作面板 -->
<div class="mt-4 p-4 border border-divider rounded-xl bg-card space-y-3">
<div class="text-xs font-bold text-color2">应用操作</div>
<!-- 针对完整 XML 的恢复 -->
<div v-if="activeItem.type === 'full'" class="flex flex-col space-y-2">
<CommonButton type="primary" class="w-full" @click="handleApplyFull(activeItem)">
......@@ -196,15 +170,9 @@
<CommonButton type="warning" secondary @click="handleApplyFragment(activeItem, 'inside')">
作为子元素插入内部
</CommonButton>
<CommonButton type="warning" secondary @click="handleApplyFragment(activeItem, 'replace')">
替换当前选中节点
</CommonButton>
<CommonButton type="default" secondary @click="handleApplyFragment(activeItem, 'above')">
在当前节点上方插入
</CommonButton>
<CommonButton type="default" secondary @click="handleApplyFragment(activeItem, 'below')">
在当前节点下方插入
</CommonButton>
<CommonButton type="warning" secondary @click="handleApplyFragment(activeItem, 'replace')">替换当前选中节点</CommonButton>
<CommonButton type="default" secondary @click="handleApplyFragment(activeItem, 'above')">在当前节点上方插入</CommonButton>
<CommonButton type="default" secondary @click="handleApplyFragment(activeItem, 'below')">在当前节点下方插入</CommonButton>
</div>
</div>
</div>
......@@ -216,12 +184,7 @@
</div>
<!-- 重命名确认对话框 -->
<CommonModal
v-model="showRenameModal"
title="重命名暂存记录"
:width="400"
@confirm="saveRenameConfirm"
>
<CommonModal v-model="showRenameModal" title="重命名暂存记录" :width="400" @confirm="saveRenameConfirm">
<div class="pt-3">
<n-input v-model:value="editingItemName" placeholder="请输入暂存别名" />
</div>
......
src/views/editor/components/NodeTree/components/StashNodeModal/functionals/index.ts
import { useStashStore } from '@/store/stash'
import type { XmlNode } from '@/types/xmlNode'
import {
stashModalVisible,
stashNodeName,
stashDefaultName,
stashTargetNode
} from '../../../functionals'
import { stashModalVisible, stashNodeName, stashDefaultName, stashTargetNode } from '../../../functionals'
export const useStashNodeModal = () => {
const handleConfirm = () => {
......
src/views/editor/components/NodeTree/components/StashNodeModal/index.vue
<template>
<CommonModal
v-model="stashModalVisible"
title="新建本地暂存"
:width="400"
@confirm="handleConfirm"
>
<CommonModal v-model="stashModalVisible" title="新建本地暂存" :width="400" @confirm="handleConfirm">
<div class="pt-3">
<n-input v-model:value="stashNodeName" :placeholder="stashDefaultName" autofocus />
</div>
......
src/views/editor/components/NodeTree/index.vue
......@@ -241,7 +241,9 @@ const editorStore = useEditorStore()
const insertFragmentModalRef = ref<any>(null)
const isAnyModalVisible = computed(() => {
return checkRuleVisible.value || viewXmlVisible.value || addNodeVisible.value || stashModalVisible.value || !!insertFragmentModalRef.value?.visible
return (
checkRuleVisible.value || viewXmlVisible.value || addNodeVisible.value || stashModalVisible.value || !!insertFragmentModalRef.value?.visible
)
})
const {
......
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