Skip to content

V
vue3_onlineEditor
Commit 3c7804b6 by pangchong
Options

feat: 样式完善

parent 3966aafd
Showing with 362 additions and 298 deletions
src/assets/css/element copy.less 0 → 100644
taskTitle:nth-of-type(even):before {
content: 'TASK 标题：';
font-size: 18px;
}
taskTitle:nth-of-type(odd):before {
content: 'TASK TITLE：';
font-size: 18px;
}
subtaskBtn:before {
content: '点击跳转';
}
taskTitle {
font-size: 18px;
font-weight: bold;
display: block;
color: #4432bf;
}
subtaskTitle:nth-of-type(even)::before {
content: 'SUBTASK 标题：';
font-size: 14px;
}
subtaskTitle:nth-of-type(odd)::before {
content: 'SUBTASK TITLE：';
font-size: 14px;
}
subtaskTitle {
font-size: 14px;
font-weight: bold;
display: block;
color: darkgreen;
}
subtask::before {
display: inline-table;
white-space: pre;
animation: spin4 2s steps(4) infinite;
content: '' attr(key) '\A' attr(sbKey);
font-size: 14px;
}
grphcref::before {
/*grphcref适用性显示 licun 2022-01-17*/
/*display: block;
white-space: pre;
animation: spin4 2s steps(4) infinite;
content:"" attr(key) "\A" attr(sbKey);
font-size:14px;
color: red;
font-weight:bold;
text-decoration:underline red!important;*/
}
subtask {
font-size: 14px;
font-weight: bold;
display: block;
color: red;
}
caution:before {
content: 'CAUTION:';
/*font-size:12px;*/
color: black;
}
caution:nth-of-type(even):before {
content: '注 意:';
/*font-size:12px;*/
color: black;
}
caution {
/*font-size:12px;*/
font-weight: bold;
display: block;
/*padding-top: 10px;*/
color: black;
}
warning:before {
content: 'WARNING:';
/*font-size:12px;*/
color: black;
}
warning:nth-of-type(even):before {
content: '警 告:';
/*font-size:12px;*/
color: black;
}
warning {
/*font-size:12px;*/
font-weight: bold;
display: block;
/*padding-top: 10px;*/
color: black;
}
note:nth-of-type(odd):before {
content: 'NOTE:';
/*font-size:12px;*/
color: #000c17;
}
note:nth-of-type(even):before {
content: '注 释:';
/*font-size:12px;*/
color: #000c17;
}
note {
/*font-size:12px;*/
font-weight: bold;
display: block;
/*padding-top: 10px;*/
}
pretopic:nth-of-type(odd):before {
content: 'PreTopic:';
font-size: 14px;
color: #52c41a;
}
pretopic:nth-of-type(even):before {
content: 'PreTopic:';
font-size: 14px;
color: #52c41a;
}
pretopic {
font-size: 12px;
font-weight: bold;
display: block;
padding-top: 10px;
}
graphic:before {
content: 'Graphic:';
font-size: 14px;
color: #52c41a;
}
graphic {
font-size: 12px;
font-weight: bold;
display: block;
padding-top: 10px;
}
topictitle:before {
content: 'TopicTitle:';
font-size: 14px;
color: #52c41a;
}
topictitle {
font-size: 12px;
font-weight: bold;
display: block;
padding-top: 10px;
}
/*installtorque:before{*/
/*content:"Installation torque/安装力矩:";*/
/*font-size:14px;*/
/*color: #000c17;*/
/*}*/
/*toolno:before{*/
/*content:"Tool No/计量工具号:";*/
/*font-size:14px;*/
/*color: #000c17;*/
/*}*/
feedbackresult:before {
content: '执行结果:';
font-size: 14px;
color: #000c17;
}
ph:before {
content: 'ph ';
color: #52c41a;
}
ph div:first-child {
/* border: 1px dashed #15a4fa;*/
background: #f8f8ff;
padding: 2px;
}
xinclude:before {
content: 'xinclude ';
color: #52c41a;
}
xinclude div:first-child {
/*border: 1px dashed #15a4fa;*/
background: #f8f8ff;
padding: 2px;
}
ditatopictitle {
margin-top: 0pc;
font-size: 1.44em;
font-weight: bold;
background-color: #2c88dc;
color: white;
padding: 5px 5px;
border-radius: 5px;
margin-left: 0px;
margin-right: 30px;
display: block;
}
note {
font-weight: bold;
/*background-color: #e4e432;*/
border-bottom: 3px solid #e4e432;
color: white;
/*padding: 5px 5px;*/
border-radius: 0px;
/*margin-left: 30px;*/
/*margin-right: 30px;*/
display: block;
}
simpletable div:first-child {
background: #f8f8ff;
padding: 2px;
}
note[type='danger']:before {
color: #cb0a0a;
content: 'DANGER:';
}
note[type='warning']:before {
color: #d8d821;
content: 'WARNING:';
}
note[type='caution']:before {
color: #d8d821;
content: 'CAUTION:';
}
section:before {
content: 'SECTION:';
}
generalTitle {
font-weight: bold;
}
src/assets/css/element.less
taskTitle:nth-of-type(even):before {
content: 'TASK 标题：';
font-size: 18px;
title {
font-weight: bold;
font-size: 15px;
text-decoration: underline;
}
taskTitle:nth-of-type(odd):before {
content: 'TASK TITLE：';
font-size: 18px;
titlec {
font-weight: bold;
font-size: 15px;
text-decoration: underline;
}
subtaskBtn:before {
content: '点击跳转';
para refext::before {
content: '(参考 :';
}
taskTitle {
font-size: 18px;
font-weight: bold;
display: block;
color: #4432bf;
parac refext::before {
content: '( ';
}
subtaskTitle:nth-of-type(even)::before {
content: 'SUBTASK 标题：';
font-size: 14px;
refext::after {
content: ')';
}
subtaskTitle:nth-of-type(odd)::before {
content: 'SUBTASK TITLE：';
font-size: 14px;
note {
position: relative;
padding-left: 80px !important;
color: var(--info-color-pressed);
}
subtaskTitle {
font-size: 14px;
font-weight: bold;
display: block;
color: darkgreen;
}
subtask::before {
display: inline-table;
white-space: pre;
animation: spin4 2s steps(4) infinite;
content: '' attr(key) '\A' attr(sbKey);
font-size: 14px;
}
grphcref::before {
/*grphcref适用性显示 licun 2022-01-17*/
/*display: block;
white-space: pre;
animation: spin4 2s steps(4) infinite;
content:"" attr(key) "\A" attr(sbKey);
font-size:14px;
color: red;
font-weight:bold;
text-decoration:underline red!important;*/
}
subtask {
font-size: 14px;
font-weight: bold;
display: block;
color: red;
}
caution:before {
content: 'CAUTION:';
/*font-size:12px;*/
color: black;
}
caution:nth-of-type(even):before {
content: '注 意:';
/*font-size:12px;*/
color: black;
}
caution {
/*font-size:12px;*/
note:nth-of-type(odd):before {
content: '注意 NOTE:';
text-decoration: underline;
font-weight: bold;
display: block;
/*padding-top: 10px;*/
color: black;
}
warning:before {
content: 'WARNING:';
/*font-size:12px;*/
color: black;
}
warning:nth-of-type(even):before {
content: '警 告:';
/*font-size:12px;*/
color: black;
}
warning {
/*font-size:12px;*/
position: absolute;
left: 0;
}
row {
display: flex !important;
flex-wrap: wrap;
}
entry {
flex: 1;
font-weight: bold;
display: block;
/*padding-top: 10px;*/
color: black;
border: 1px solid var(--border-color);
}
note:nth-of-type(odd):before {
content: 'NOTE:';
/*font-size:12px;*/
color: #000c17;
pan {
display: inline-block !important;
}
note:nth-of-type(even):before {
content: '注 释:';
/*font-size:12px;*/
color: #000c17;
refblock {
text-indent: 5px !important;
display: inline-block !important;
}
note {
/*font-size:12px;*/
font-weight: bold;
display: block;
/*padding-top: 10px;*/
}
pretopic:nth-of-type(odd):before {
content: 'PreTopic:';
font-size: 14px;
color: #52c41a;
}
pretopic:nth-of-type(even):before {
content: 'PreTopic:';
font-size: 14px;
color: #52c41a;
}
pretopic {
font-size: 12px;
font-weight: bold;
display: block;
padding-top: 10px;
}
graphic:before {
content: 'Graphic:';
font-size: 14px;
color: #52c41a;
}
graphic {
font-size: 12px;
font-weight: bold;
display: block;
padding-top: 10px;
}
topictitle:before {
content: 'TopicTitle:';
font-size: 14px;
color: #52c41a;
}
topictitle {
font-size: 12px;
font-weight: bold;
display: block;
padding-top: 10px;
}
/*installtorque:before{*/
/*content:"Installation torque/安装力矩:";*/
/*font-size:14px;*/
/*color: #000c17;*/
/*}*/
/*toolno:before{*/
/*content:"Tool No/计量工具号:";*/
/*font-size:14px;*/
/*color: #000c17;*/
/*}*/
feedbackresult:before {
content: '执行结果:';
font-size: 14px;
color: #000c17;
}
ph:before {
content: 'ph ';
color: #52c41a;
}
ph div:first-child {
/* border: 1px dashed #15a4fa;*/
background: #f8f8ff;
padding: 2px;
}
xinclude:before {
content: 'xinclude ';
color: #52c41a;
}
xinclude div:first-child {
/*border: 1px dashed #15a4fa;*/
background: #f8f8ff;
padding: 2px;
}
ditatopictitle {
margin-top: 0pc;
font-size: 1.44em;
font-weight: bold;
background-color: #2c88dc;
color: white;
padding: 5px 5px;
border-radius: 5px;
margin-left: 0px;
margin-right: 30px;
display: block;
}
note {
font-weight: bold;
/*background-color: #e4e432;*/
border-bottom: 3px solid #e4e432;
color: white;
/*padding: 5px 5px;*/
border-radius: 0px;
/*margin-left: 30px;*/
/*margin-right: 30px;*/
display: block;
}
simpletable div:first-child {
background: #f8f8ff;
padding: 2px;
}
note[type='danger']:before {
color: #cb0a0a;
content: 'DANGER:';
}
note[type='warning']:before {
color: #d8d821;
content: 'WARNING:';
}
note[type='caution']:before {
color: #d8d821;
content: 'CAUTION:';
}
section:before {
content: 'SECTION:';
}
generalTitle {
para refblock::before {
content: '(参考: ';
}
parac refblock::before {
content: '(Ref: ';
}
refblock::after {
content: ')';
}
grphcref effect {
text-decoration: underline;
color: var(--info-color-pressed);
font-weight: bold;
cursor: pointer;
}
grphcref effect::before {
content: '(Ref: ';
color: var(--w-e-textarea-color);
}
grphcref effect::after {
content: ')';
color: var(--w-e-textarea-color);
}
src/configs/elem-to-html.ts
......@@ -5,9 +5,11 @@ const elemToHtml = (type: string) => {
return (elem: SlateElement, childrenHtml: string): string => {
const dataKey = (elem as any).dataKey || ''
const modifyType = (elem as any).modifyType || ''
const dataChained = (elem as any).dataChained || ''
return `<${type}
data-w-e-type="${type}"
data-key="${dataKey}"
data-chained="${dataChained}"
data-modify-type="${modifyType}"
>${childrenHtml}</${type}>`
}
......
src/configs/node.config.ts
export const nodeSet = [
'p',
'TaskTitle',
'TopicTitle',
'JOBCARD',
'CEP',
'TASK',
'MPD-MH',
'BARCODE',
'AC-FSN',
'EFFECT',
'TITLEC',
'TITLE',
'WARNING',
'ZONELST',
'ZONE',
'TFMATR',
'PRETOPIC',
'PARA',
'PARAC',
'REFEXT',
'NOTE',
'LIST1',
'L1ITEM',
'TABLE',
'TGROUP',
'THEAD',
'ROW',
'ENTRY',
'TBODY',
'STDNAME',
'PAN',
'REFBLOCK',
'REFINT',
'UNLIST',
'UNLITEM',
'SIGNOFF',
'TOPIC',
'SUBTASK',
'NOTE',
'GRPHCREF',
'LIST2',
'L2ITEM',
'LIST3',
'L3ITEM',
'LIST4',
'L4ITEM',
'STEP',
'RECORD-LINE'
'GRAPHIC',
'SHEET',
'CFNBR',
'GNBR',
'IMGAREA',
'KEY',
'REVDATE',
'SHEETNBR'
]
export const contentHoldNode = ['PARA', 'TITLE']
\ No newline at end of file
export const contentHoldNode = ['PARA', 'PARAC', 'TITLE', 'TITLEC', 'REFEXT', 'STDNAME', 'ZONE', 'PAN', 'REFBLOCK']
src/configs/parse-elem-html.ts
......@@ -4,13 +4,13 @@ import { nodeSet } from '@/configs/node.config'
const parseElemHtml = (type: string) => {
return (domElem: Element, children: SlateDescendant[], editor: IDomEditor): SlateElement => {
const dataKey = domElem.getAttribute('data-key') || ''
const dataIndent = domElem.getAttribute('data-indent-level') || ''
const dataChained = domElem.getAttribute('data-chained') || ''
const modifyType = domElem.getAttribute('data-modify-type') || ''
const myResume = {
type,
dataKey,
children,
dataIndent,
dataChained,
modifyType
}
return myResume
......
src/configs/render-elem.ts
......@@ -3,19 +3,21 @@ import { IDomEditor, IModuleConf, SlateElement } from '@wangeditor/editor'
import { nodeSet } from '@/configs/node.config'
import { handleClickDom } from '@/views/editor/functions/compare'
const renderElem = (type: string, style = { display: 'block' }) => {
const renderElem = (type: string) => {
return (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
const dataKey = (elem as any).dataKey
const modifyType = (elem as any).modifyType
Object.assign(style, {
// @ts-ignore
textIndent: Number(elem.dataIndent) * 10 + 'px'
})
const dataChained = (elem as any).dataChained
const length = dataChained.split('$').length
const style: any = {
display: 'block',
textIndent: length * 10 + 'px'
}
return h(
type,
{
style,
attrs: { 'data-key': dataKey, 'data-modify-type': modifyType },
style: style,
attrs: { 'data-key': dataKey, 'data-modify-type': modifyType, 'data-chained': dataChained },
on: {
click(event: Event) {
handleClickDom(event)
......
src/views/editor/components/Tree.vue
......@@ -12,8 +12,6 @@
v-model:selected-keys="treeSelectedKeys"
:pattern="searchKey"
:render-label="renderLabel"
block-line
block-node
/>
</div>
</div>
......
src/views/editor/functions/index.ts
......@@ -84,6 +84,20 @@ export const handleChange = (editor: IDomEditor) => {
const xmlProcessing = useXMLProcessing()
const res = xmlProcessing.processXML(editor.getHtml().replace(/<p><br><\/p>/g, ''), nodeSet, contentHoldNode)
treeData.value = res.treeData
const container = editorRef.value?.getEditableContainer()
//查找GRAPHIC标签
const sheet = container?.querySelectorAll('sheet')
sheet?.forEach((node, index) => {
let src = 'https://hnaelbtest.hnatechnic.com/mocptest/resource/20250427/76ef8494-de05-43d8-ae71-0fbf27b7f564.png'
if (index == 0) {
src = 'https://hnaelbtest.hnatechnic.com/mocptest/resource/20250427/549f74f9-f0bd-48a6-9b01-fa27ea8c28aa.png'
}
const img = document.createElement('img')
img.src = src
img.style.width = '100%'
img.style.height = 'auto'
node.replaceWith(img)
})
}
// 上传xml
export const uploadXml = async () => {
......@@ -99,6 +113,7 @@ export const uploadXml = async () => {
const xmlProcessing = useXMLProcessing()
showLoading.value = true
const res = await xmlProcessing.processFile(file, nodeSet, contentHoldNode)
console.log(res)
showLoading.value = false
editorHtml.value = res.xmlContent
}
......
src/views/editor/functions/tree.ts
......@@ -2,12 +2,11 @@ import { TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
import { setEditorActive } from '.'
import { editorRef } from '../constants'
import { TreeOption } from 'naive-ui'
import { contentHoldNode } from '@/configs/node.config'
export const renderLabel = ({ option }: { option: TreeOption }) => {
const container = editorRef.value?.getEditableContainer()
const dom = container!.querySelector(`[data-key="${option.key}"]`) as HTMLElement
if (contentHoldNode.includes(dom.tagName as string)) {
if (dom && dom.firstElementChild?.tagName == 'SPAN') {
return {
default: () => {
return [h('span', {}, option.label), h('span', { class: 'text-textColorDisabled ml-[5px]' }, dom.innerText)]
......
src/views/editor/index.vue
......@@ -65,47 +65,5 @@ onBeforeUnmount(() => {
// 销毁，并移除 editor
editor?.destroy()
})
/*
* PRETOPIC
* 序号1,2
*/
/*
* LIST1->L1ITEM
* 序号A,B
*/
/*
* LIST2->L2ITEM
* 序号(1),(2)
*/
/*
* LIST3->L3ITEM
* 序号(a),(b)
*/
/*
* TABLE
* TGROUP
* THEAD->ROW->ENTRY
* TBODY->ROW->ENTRY
*/
/*
* UNLIST->UNLITEM
* 无序列表
*/
/*
* TOPIC
* 序号1,2
*/
/*
* SUBTASK
* 序号A,B
*/
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
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