|
@@ -1,5 +1,3 @@
|
|
-
|
|
|
|
-
|
|
|
|
<template>
|
|
<template>
|
|
<div class="canvas-editor-wrapper">
|
|
<div class="canvas-editor-wrapper">
|
|
<div class="canvas-container">
|
|
<div class="canvas-container">
|
|
@@ -111,13 +109,74 @@
|
|
</div>
|
|
</div>
|
|
<div class="menu-item__color" title="字体颜色">
|
|
<div class="menu-item__color" title="字体颜色">
|
|
<i></i>
|
|
<i></i>
|
|
- <span></span>
|
|
|
|
- <input type="color" id="color" />
|
|
|
|
|
|
+ <div class="options">
|
|
|
|
+ <div class="color-section">
|
|
|
|
+ <div class="section-title">主题颜色</div>
|
|
|
|
+ <ul>
|
|
|
|
+ <!-- 第一行 -->
|
|
|
|
+ <li data-color="#000000" title="黑色" style="background-color: #000000"></li>
|
|
|
|
+ <li data-color="#2B579A" title="深蓝色" style="background-color: #2B579A"></li>
|
|
|
|
+ <li data-color="#4472C4" title="蓝色" style="background-color: #4472C4"></li>
|
|
|
|
+ <li data-color="#70AD47" title="绿色" style="background-color: #70AD47"></li>
|
|
|
|
+ <li data-color="#FFC000" title="黄色" style="background-color: #FFC000"></li>
|
|
|
|
+ <li data-color="#ED7D31" title="橙色" style="background-color: #ED7D31"></li>
|
|
|
|
+ <li data-color="#C00000" title="红色" style="background-color: #C00000"></li>
|
|
|
|
+ <li data-color="#7030A0" title="紫色" style="background-color: #7030A0"></li>
|
|
|
|
+ <li data-color="#FFFFFF" title="白色" style="background-color: #FFFFFF"></li>
|
|
|
|
+
|
|
|
|
+ <!-- 灰度行 -->
|
|
|
|
+ <li data-color="#7F7F7F" title="深灰色" style="background-color: #7F7F7F"></li>
|
|
|
|
+ <li data-color="#A5A5A5" title="灰色" style="background-color: #A5A5A5"></li>
|
|
|
|
+ <li data-color="#D0D0D0" title="浅灰色" style="background-color: #D0D0D0"></li>
|
|
|
|
+
|
|
|
|
+ <!-- 蓝色系列 -->
|
|
|
|
+ <li data-color="#D6E3F3" title="浅蓝色-1" style="background-color: #D6E3F3"></li>
|
|
|
|
+ <li data-color="#B4C7E7" title="浅蓝色-2" style="background-color: #B4C7E7"></li>
|
|
|
|
+ <li data-color="#8EAADB" title="浅蓝色-3" style="background-color: #8EAADB"></li>
|
|
|
|
+ <li data-color="#2E75B6" title="深蓝色-1" style="background-color: #2E75B6"></li>
|
|
|
|
+ <li data-color="#1F4E79" title="深蓝色-2" style="background-color: #1F4E79"></li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="color-section">
|
|
|
|
+ <div class="section-title">标准色</div>
|
|
|
|
+ <ul>
|
|
|
|
+ <li data-color="#FF0000" title="红色" style="background-color: #FF0000"></li>
|
|
|
|
+ <li data-color="#FF6600" title="橙色" style="background-color: #FF6600"></li>
|
|
|
|
+ <li data-color="#FFFF00" title="黄色" style="background-color: #FFFF00"></li>
|
|
|
|
+ <li data-color="#00FF00" title="绿色" style="background-color: #00FF00"></li>
|
|
|
|
+ <li data-color="#00FFFF" title="青色" style="background-color: #00FFFF"></li>
|
|
|
|
+ <li data-color="#0000FF" title="蓝色" style="background-color: #0000FF"></li>
|
|
|
|
+ <li data-color="#FF00FF" title="紫色" style="background-color: #FF00FF"></li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-item__highlight" title="高亮">
|
|
<div class="menu-item__highlight" title="高亮">
|
|
<i></i>
|
|
<i></i>
|
|
- <span></span>
|
|
|
|
- <input type="color" id="highlight" />
|
|
|
|
|
|
+ <div class="options">
|
|
|
|
+ <ul>
|
|
|
|
+ <!-- 第一行 -->
|
|
|
|
+ <li data-color="transparent" title="无" style="background-color: transparent">✓</li>
|
|
|
|
+ <li data-color="#ffff00" title="黄色" style="background-color: #ffff00"></li>
|
|
|
|
+ <li data-color="#00ff00" title="绿色" style="background-color: #00ff00"></li>
|
|
|
|
+ <li data-color="#00ffff" title="青色" style="background-color: #00ffff"></li>
|
|
|
|
+ <li data-color="#ff00ff" title="粉色" style="background-color: #ff00ff"></li>
|
|
|
|
+ <li data-color="#0000ff" title="蓝色" style="background-color: #0000ff"></li>
|
|
|
|
+
|
|
|
|
+ <!-- 第二行 -->
|
|
|
|
+ <li data-color="#800000" title="深红色" style="background-color: #800000"></li>
|
|
|
|
+ <li data-color="#ff0000" title="红色" style="background-color: #ff0000"></li>
|
|
|
|
+ <li data-color="#808000" title="橄榄色" style="background-color: #808000"></li>
|
|
|
|
+ <li data-color="#008000" title="深绿色" style="background-color: #008000"></li>
|
|
|
|
+ <li data-color="#008080" title="青灰色" style="background-color: #008080"></li>
|
|
|
|
+ <li data-color="#000080" title="深蓝色" style="background-color: #000080"></li>
|
|
|
|
+
|
|
|
|
+ <!-- 第三行 -->
|
|
|
|
+ <li data-color="#000000" title="黑色" style="background-color: #000000"></li>
|
|
|
|
+ <li data-color="#808080" title="深灰色" style="background-color: #808080"></li>
|
|
|
|
+ <li data-color="#c0c0c0" title="灰色" style="background-color: #c0c0c0"></li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-divider"></div>
|
|
<div class="menu-divider"></div>
|
|
@@ -379,7 +438,7 @@
|
|
<i title="纸张类型"></i>
|
|
<i title="纸张类型"></i>
|
|
<div class="options">
|
|
<div class="options">
|
|
<ul>
|
|
<ul>
|
|
- <li data-paper-size="1320*1123" class="active">A4</li>
|
|
|
|
|
|
+ <li data-paper-size="794*1123" class="active">A4</li>
|
|
<li data-paper-size="1593*2251">A2</li>
|
|
<li data-paper-size="1593*2251">A2</li>
|
|
<li data-paper-size="1125*1593">A3</li>
|
|
<li data-paper-size="1125*1593">A3</li>
|
|
<li data-paper-size="565*796">A5</li>
|
|
<li data-paper-size="565*796">A5</li>
|
|
@@ -698,26 +757,38 @@ export default {
|
|
instance.command.executeSubscript();
|
|
instance.command.executeSubscript();
|
|
};
|
|
};
|
|
|
|
|
|
- const colorControlDom = document.querySelector("#color");
|
|
|
|
- colorControlDom.oninput = function () {
|
|
|
|
- instance.command.executeColor(colorControlDom.value);
|
|
|
|
|
|
+ const colorDom = document.querySelector('.menu-item__color');
|
|
|
|
+ const colorOptionDom = colorDom.querySelector('.options');
|
|
|
|
+ colorDom.onclick = function() {
|
|
|
|
+ console.log('color');
|
|
|
|
+ colorOptionDom.classList.toggle('visible');
|
|
};
|
|
};
|
|
- const colorDom = document.querySelector(".menu-item__color");
|
|
|
|
- const colorSpanDom = colorDom.querySelector("span");
|
|
|
|
- colorDom.onclick = function () {
|
|
|
|
- console.log("color");
|
|
|
|
- colorControlDom.click();
|
|
|
|
|
|
+ colorOptionDom.onclick = function(evt) {
|
|
|
|
+ const li = evt.target;
|
|
|
|
+ const color = li.dataset.color;
|
|
|
|
+ if (color) {
|
|
|
|
+ instance.command.executeColor(color);
|
|
|
|
+ }
|
|
};
|
|
};
|
|
|
|
|
|
- const highlightControlDom = document.querySelector("#highlight");
|
|
|
|
- highlightControlDom.oninput = function () {
|
|
|
|
- instance.command.executeHighlight(highlightControlDom.value);
|
|
|
|
|
|
+ // 高亮功能代码
|
|
|
|
+ const highlightDom = document.querySelector('.menu-item__highlight');
|
|
|
|
+ const highlightOptionDom = highlightDom.querySelector('.options');
|
|
|
|
+ highlightDom.onclick = function() {
|
|
|
|
+ console.log('highlight');
|
|
|
|
+ highlightOptionDom.classList.toggle('visible');
|
|
};
|
|
};
|
|
- const highlightDom = document.querySelector(".menu-item__highlight");
|
|
|
|
- const highlightSpanDom = highlightDom.querySelector("span");
|
|
|
|
- highlightDom.onclick = function () {
|
|
|
|
- console.log("highlight");
|
|
|
|
- highlightControlDom?.click();
|
|
|
|
|
|
+ highlightOptionDom.onclick = function(evt) {
|
|
|
|
+ const li = evt.target;
|
|
|
|
+ const color = li.dataset.color;
|
|
|
|
+ if (color) {
|
|
|
|
+ // 如果选择"无",则清除高亮
|
|
|
|
+ if (color === 'transparent') {
|
|
|
|
+ instance.command.executeHighlight(null);
|
|
|
|
+ } else {
|
|
|
|
+ instance.command.executeHighlight(color);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
};
|
|
};
|
|
|
|
|
|
const titleDom = document.querySelector(".menu-item__title");
|
|
const titleDom = document.querySelector(".menu-item__title");
|
|
@@ -1836,21 +1907,21 @@ export default {
|
|
: strikeoutDom.classList.remove("active");
|
|
: strikeoutDom.classList.remove("active");
|
|
if (payload.color) {
|
|
if (payload.color) {
|
|
colorDom.classList.add("active");
|
|
colorDom.classList.add("active");
|
|
- colorControlDom.value = payload.color;
|
|
|
|
- colorSpanDom.style.backgroundColor = payload.color;
|
|
|
|
|
|
+ const colorSpan = colorDom.querySelector('span');
|
|
|
|
+ if (colorSpan) {
|
|
|
|
+ colorSpan.style.backgroundColor = payload.color;
|
|
|
|
+ }
|
|
} else {
|
|
} else {
|
|
colorDom.classList.remove("active");
|
|
colorDom.classList.remove("active");
|
|
- colorControlDom.value = "#000000";
|
|
|
|
- colorSpanDom.style.backgroundColor = "#000000";
|
|
|
|
|
|
+ const colorSpan = colorDom.querySelector('span');
|
|
|
|
+ if (colorSpan) {
|
|
|
|
+ colorSpan.style.backgroundColor = "#000000";
|
|
|
|
+ }
|
|
}
|
|
}
|
|
if (payload.highlight) {
|
|
if (payload.highlight) {
|
|
highlightDom.classList.add("active");
|
|
highlightDom.classList.add("active");
|
|
- highlightControlDom.value = payload.highlight;
|
|
|
|
- highlightSpanDom.style.backgroundColor = payload.highlight;
|
|
|
|
} else {
|
|
} else {
|
|
highlightDom.classList.remove("active");
|
|
highlightDom.classList.remove("active");
|
|
- highlightControlDom.value = "#ffff00";
|
|
|
|
- highlightSpanDom.style.backgroundColor = "#ffff00";
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// 行布局
|
|
// 行布局
|
|
@@ -2163,7 +2234,7 @@ export default {
|
|
position: static;
|
|
position: static;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
- height: 700px;//calc(100% - 90px); /* 减去header和footer的高度 */
|
|
|
|
|
|
+ max-height: 600px;//calc(100% - 90px); /* 减去header和footer的高度 */
|
|
background-color: #f2f4f7;
|
|
background-color: #f2f4f7;
|
|
overflow: auto; /* 仅让Main区域可滚动 */
|
|
overflow: auto; /* 仅让Main区域可滚动 */
|
|
flex-grow: 1; /* 让Main区域占据剩余空间 */
|
|
flex-grow: 1; /* 让Main区域占据剩余空间 */
|
|
@@ -2312,7 +2383,7 @@ export default {
|
|
.menu-item .options {
|
|
.menu-item .options {
|
|
width: 70px;
|
|
width: 70px;
|
|
position: absolute;
|
|
position: absolute;
|
|
- left: 0;
|
|
|
|
|
|
+ //left: 0;
|
|
top: 25px;
|
|
top: 25px;
|
|
padding: 10px;
|
|
padding: 10px;
|
|
background: #fff;
|
|
background: #fff;
|
|
@@ -3244,6 +3315,110 @@ export default {
|
|
.ce-contextmenu-word-tool {
|
|
.ce-contextmenu-word-tool {
|
|
background-image: url("./assets/images/word-tool.svg");
|
|
background-image: url("./assets/images/word-tool.svg");
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .menu-item__color .options {
|
|
|
|
+ width: 220px;
|
|
|
|
+ padding: 8px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__color .color-section {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__color .section-title {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #666;
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
+ padding-left: 2px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__color .options ul {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ gap: 2px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__color .options li {
|
|
|
|
+ width: 18px;
|
|
|
|
+ height: 18px;
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ margin: 0;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__color .options li:hover {
|
|
|
|
+ border-color: #000;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__color .options li[data-color="#FFFFFF"] {
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 添加悬浮提示样式
|
|
|
|
+ .menu-item__color .options li:hover::after {
|
|
|
|
+ content: attr(title);
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 100%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ padding: 4px 8px;
|
|
|
|
+ background-color: #333;
|
|
|
|
+ color: white;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ z-index: 1000;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__highlight .options {
|
|
|
|
+ width: 180px;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__highlight .options ul {
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: repeat(6, 1fr);
|
|
|
|
+ gap: 2px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__highlight .options li {
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ margin: 0;
|
|
|
|
+ position: relative;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ color: #666;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 特殊处理"无"选项 */
|
|
|
|
+ .menu-item__highlight .options li[data-color="transparent"] {
|
|
|
|
+ background: white;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__highlight .options li:hover {
|
|
|
|
+ border-color: #000;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-item__highlight .options li:hover::after {
|
|
|
|
+ content: attr(title);
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 100%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ padding: 4px 8px;
|
|
|
|
+ background-color: #333;
|
|
|
|
+ color: white;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ z-index: 1000;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|