feat: 🚀 图片上传按顺序回显
This commit is contained in:
11
package-lock.json
generated
11
package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zhj-target/vue3-kind-editor": "^0.1.3",
|
||||
"async-validator": "^4.2.5",
|
||||
"axios": "^1.4.0",
|
||||
"bwip-js": "^4.3.2",
|
||||
@@ -3896,6 +3897,11 @@
|
||||
"snabbdom": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@zhj-target/vue3-kind-editor": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
|
||||
"integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.8.2",
|
||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
||||
@@ -17949,6 +17955,11 @@
|
||||
"integrity": "sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==",
|
||||
"requires": {}
|
||||
},
|
||||
"@zhj-target/vue3-kind-editor": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
|
||||
"integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
|
||||
},
|
||||
"acorn": {
|
||||
"version": "8.8.2",
|
||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zhj-target/vue3-kind-editor": "^0.1.3",
|
||||
"async-validator": "^4.2.5",
|
||||
"axios": "^1.4.0",
|
||||
"bwip-js": "^4.3.2",
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||
content: "14px";
|
||||
content: "12px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||
@@ -78,3 +78,149 @@
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||
content: "等宽字体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
|
||||
font-family: SimSun, sans-serif;
|
||||
content: "宋体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
|
||||
font-family: SimHei, sans-serif;
|
||||
content: "黑体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
content: "微软雅黑";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
|
||||
font-family: KaiTi, sans-serif;
|
||||
content: "楷体";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
|
||||
font-family: FangSong, sans-serif;
|
||||
content: "仿宋";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
|
||||
font-family: Arial, sans-serif;
|
||||
content: "Arial";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
|
||||
font-family: "Times New Roman", sans-serif;
|
||||
content: "Times New Roman";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
|
||||
font-family: sans-serif;
|
||||
content: "sans-serif";
|
||||
}
|
||||
.ql-font-SimSun {
|
||||
font-family: SimSun, sans-serif;
|
||||
}
|
||||
.ql-font-SimHei {
|
||||
font-family: SimHei, sans-serif;
|
||||
}
|
||||
.ql-font-Microsoft-YaHei {
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
.ql-font-KaiTi {
|
||||
font-family: KaiTi, sans-serif;
|
||||
}
|
||||
.ql-font-FangSong {
|
||||
font-family: FangSong, sans-serif;
|
||||
}
|
||||
.ql-font-Arial {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.ql-font-Times-New-Roman {
|
||||
font-family: "Times New Roman", sans-serif;
|
||||
}
|
||||
.ql-font-sans-serif {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
|
||||
// content: "10px";
|
||||
// }
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
|
||||
content: "12px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
|
||||
content: "14px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
|
||||
content: "16px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
|
||||
content: "18px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
|
||||
content: "20px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
|
||||
content: "22px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
|
||||
content: "24px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
|
||||
content: "26px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
|
||||
content: "28px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
|
||||
content: "30px";
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
||||
content: "32px";
|
||||
}
|
||||
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
||||
// content: "32px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
|
||||
// content: "36px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="38px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="38px"]::before {
|
||||
// content: "38px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
|
||||
// content: "40px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
|
||||
// content: "44px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="44px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="44px"]::before {
|
||||
// content: "44px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="45px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="45px"]::before {
|
||||
// content: "45px";
|
||||
// }
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
|
||||
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
|
||||
// content: "50px";
|
||||
// }
|
||||
|
||||
@@ -4,15 +4,14 @@
|
||||
action="#"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:http-request="() => {}"
|
||||
:before-upload="() => false"
|
||||
@change="handleFileChange"
|
||||
class="editor-img-uploader"
|
||||
accept=".jpeg,.jpg,.png,.gif"
|
||||
>
|
||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
@@ -43,195 +42,219 @@ import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
// 引入插入图片标签自定义的类
|
||||
|
||||
// 字体配置
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义模块
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
const uuid = ref("id-" + generateUUID());
|
||||
const $router = useRouter();
|
||||
const routerValueName = $router.currentRoute.value.name;
|
||||
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
|
||||
Quill.register(Video);
|
||||
Quill.register(ImageBlot);
|
||||
|
||||
// 路由相关
|
||||
const $router = useRouter();
|
||||
const routerValueName = $router.currentRoute.value.name;
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
|
||||
// 核心：上传队列 + 临时去重集合（单次上传会话有效）
|
||||
const uploadQueue = ref([]);
|
||||
const isProcessing = ref(false);
|
||||
const uuid = ref(generateUUID());
|
||||
// 临时去重集合：仅在当前批次上传中去重，全部完成后清空
|
||||
const tempProcessedFiles = ref(new Set());
|
||||
|
||||
// 编辑器基础
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uploadFileVideo = ref(null);
|
||||
const myQuillEditor = ref(null);
|
||||
const oldContent = ref("");
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
/* 编辑器的内容 */
|
||||
content: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/* 只读 */
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 上传文件大小限制(MB)
|
||||
fileSizeLimit: {
|
||||
type: Number,
|
||||
default: 10
|
||||
}
|
||||
content: { type: String, default: "" },
|
||||
readOnly: { type: Boolean, default: false },
|
||||
fileSizeLimit: { type: Number, default: 10 }
|
||||
});
|
||||
//值
|
||||
|
||||
// 内容双向绑定
|
||||
const editorContent = computed({
|
||||
get: () => props.content,
|
||||
set: val => {
|
||||
emit("update:content", val);
|
||||
}
|
||||
set: val => emit("update:content", val)
|
||||
});
|
||||
//富文本ref
|
||||
const myQuillEditor = ref(null);
|
||||
//富文本值
|
||||
const oldContent = ref("");
|
||||
//富文本配置项
|
||||
|
||||
// 编辑器配置
|
||||
const options = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
modules: {
|
||||
// 工具栏配置
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||
["blockquote", "code-block"], // 引用 代码块
|
||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
["clean"], // 清除文本格式
|
||||
["link", "image", "video"] // 链接、图片、视频
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block"],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
[{ indent: "-1" }, { indent: "+1" }],
|
||||
[{ size: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video"]
|
||||
],
|
||||
handlers: {
|
||||
// 重写图片上传事件
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
//调用图片上传
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else {
|
||||
Quill.format("image", true);
|
||||
}
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
// 劫持原来的视频点击按钮事件
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else {
|
||||
Quill.format("video", true);
|
||||
}
|
||||
}
|
||||
image: () => proxy.$refs.uploadRef.click(),
|
||||
video: () => document.querySelector("#uploadFileVideo")?.click()
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容...",
|
||||
readOnly: props.readOnly,
|
||||
clipboard: {
|
||||
matchers: [
|
||||
[
|
||||
"img",
|
||||
(node, delta) => {
|
||||
const src = node.getAttribute("src");
|
||||
const id = node.getAttribute("id");
|
||||
delta.insert({ image: { src, id: id } });
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
//上传前的钩子
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
|
||||
// 图片
|
||||
if (
|
||||
fileType == "image/jpeg" ||
|
||||
fileType == "image/png" ||
|
||||
fileType == "image/gif" ||
|
||||
fileType == "image/jpg" ||
|
||||
fileType == "image/bmp" ||
|
||||
fileType == "image/webp" ||
|
||||
fileType == "video/mov" ||
|
||||
fileType == "video/ts" ||
|
||||
fileType == "video/mp4" ||
|
||||
fileType == "video/avi"
|
||||
) {
|
||||
const fileSizeLimit = file.size;
|
||||
// 校检文件大小
|
||||
const isLt = fileSizeLimit / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
|
||||
alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
|
||||
// 处理文件选择（临时去重，仅当前批次有效）
|
||||
const handleFileChange = (file, fileList) => {
|
||||
if (!fileList.length) return;
|
||||
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawEditor?.getQuill();
|
||||
if (!quill) return;
|
||||
|
||||
// 获取初始光标位置
|
||||
let baseCursorIndex = quill.selection.savedRange?.index || 0;
|
||||
|
||||
// 生成文件唯一标识（用于临时去重）
|
||||
const getFileKey = file => `${file.name}-${file.size}-${file.lastModified}`;
|
||||
|
||||
// 过滤当前批次中已选择的重复文件（但允许和历史批次重复）
|
||||
const newFiles = fileList.filter(item => {
|
||||
const file = item.raw;
|
||||
const key = getFileKey(file);
|
||||
// 仅在当前批次内去重（避免单次选择中重复添加）
|
||||
if (tempProcessedFiles.value.has(key)) {
|
||||
console.log(`当前批次中已包含文件: ${file.name}`);
|
||||
return false;
|
||||
} else {
|
||||
console.log(`RIch MB!`);
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
alert(`文件格式不正确！`);
|
||||
return false;
|
||||
// 校验文件合法性
|
||||
if (!validateFile(file)) return false;
|
||||
// 添加到临时去重集合
|
||||
tempProcessedFiles.value.add(key);
|
||||
return true;
|
||||
});
|
||||
|
||||
if (!newFiles.length) {
|
||||
alert("所选文件已在当前上传批次中或不合法");
|
||||
return;
|
||||
}
|
||||
|
||||
// 按选择顺序添加到队列
|
||||
newFiles.forEach((item, index) => {
|
||||
uploadQueue.value.push({
|
||||
file: item.raw,
|
||||
cursorIndex: baseCursorIndex + index
|
||||
});
|
||||
});
|
||||
|
||||
// 启动队列处理
|
||||
if (!isProcessing.value) {
|
||||
processQueue();
|
||||
}
|
||||
};
|
||||
//图片上传
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
//这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
|
||||
formData.append("image", options.file);
|
||||
|
||||
// 文件校验
|
||||
const validateFile = file => {
|
||||
const isImage = file.type.startsWith("image/");
|
||||
if (!isImage) {
|
||||
alert("请上传图片文件");
|
||||
return false;
|
||||
}
|
||||
|
||||
const fileSizeMB = file.size / 1024 / 1024;
|
||||
if (fileSizeMB > props.fileSizeLimit) {
|
||||
alert(`文件 ${file.name} 大小超过 ${props.fileSizeLimit} MB`);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 处理上传队列（全部完成后清空临时去重集合）
|
||||
const processQueue = async () => {
|
||||
if (isProcessing.value || uploadQueue.value.length === 0) return;
|
||||
|
||||
isProcessing.value = true;
|
||||
const { file, cursorIndex } = uploadQueue.value[0];
|
||||
|
||||
try {
|
||||
// 上传文件
|
||||
const formData = new FormData();
|
||||
formData.append("image", file);
|
||||
const result = await uploadImg(formData, routerName.value);
|
||||
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
let rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
// 获取富文本实例
|
||||
let quill = rawMyQuillEditor.getQuill();
|
||||
// 获取光标位置
|
||||
let length = quill.selection.savedRange.index;
|
||||
quill.insertEmbed(length, "image", {
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawEditor.getQuill();
|
||||
// 插入图片
|
||||
quill.insertEmbed(cursorIndex, "image", {
|
||||
url: h + result.data.path,
|
||||
id: generateUUID()
|
||||
});
|
||||
quill.setSelection(cursorIndex + 1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`文件 ${file.name} 上传失败:`, error);
|
||||
} finally {
|
||||
uploadQueue.value.shift();
|
||||
// 若队列已空，清空临时去重集合（允许下次上传相同文件）
|
||||
if (uploadQueue.value.length === 0) {
|
||||
tempProcessedFiles.value.clear();
|
||||
}
|
||||
isProcessing.value = false;
|
||||
// 继续处理下一个
|
||||
processQueue();
|
||||
}
|
||||
};
|
||||
|
||||
// 视频上传（保持不变）
|
||||
const handleVideoUpload = async evt => {
|
||||
if (evt.target.files.length === 0) return;
|
||||
|
||||
const file = evt.target.files[0];
|
||||
const formData = new FormData();
|
||||
formData.append("video", file);
|
||||
|
||||
try {
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawEditor.getQuill();
|
||||
const cursorIndex = quill.selection.savedRange?.index || 0;
|
||||
|
||||
const { data } = await uploadVideo(formData);
|
||||
quill.insertEmbed(cursorIndex, "video", {
|
||||
url: h + data.path,
|
||||
id: generateUUID()
|
||||
});
|
||||
quill.setSelection(length + 1);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
//视频上传
|
||||
const handleVideoUpload = async evt => {
|
||||
if (evt.target.files.length === 0) {
|
||||
return;
|
||||
}
|
||||
const formData = new FormData();
|
||||
formData.append("video", evt.target.files[0]);
|
||||
try {
|
||||
let quill = toRaw(myQuillEditor.value).getQuill();
|
||||
// 获取光标位置
|
||||
let length = quill.selection.savedRange.index;
|
||||
const { data } = await uploadVideo(formData);
|
||||
quill.insertEmbed(length, "video", {
|
||||
url: h + data.path, //h + data.fileUrl, //
|
||||
id: generateUUID()
|
||||
});
|
||||
uploadFileVideo.value.value = "";
|
||||
quill.setSelection(cursorIndex + 1);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.error("视频上传失败:", error);
|
||||
} finally {
|
||||
evt.target.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
|
||||
// 内容变化监听
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
};
|
||||
// 增加hover工具栏有中文提示
|
||||
|
||||
// 初始化标题提示
|
||||
const initTitle = () => {
|
||||
document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
|
||||
for (let item of titleConfig.value) {
|
||||
let tip = document.querySelector(".ql-toolbar " + item.Choice);
|
||||
if (!tip) continue;
|
||||
tip.setAttribute("title", item.title);
|
||||
for (const item of titleConfig.value) {
|
||||
const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
|
||||
if (tip) tip.setAttribute("title", item.title);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
oldContent.value = props.content;
|
||||
|
||||
10
src/components/Editor/lineHeight.js
Normal file
10
src/components/Editor/lineHeight.js
Normal file
@@ -0,0 +1,10 @@
|
||||
//lineHeight.js
|
||||
import Quill from "quill";
|
||||
const Parchment = Quill.import("parchment");
|
||||
class lineHeightAttributor extends Parchment.Attributor.Style {}
|
||||
const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
|
||||
scope: Parchment.Scope.INLINE,
|
||||
whitelist: ["1", "2", "3", "4", "5"]
|
||||
});
|
||||
|
||||
export { lineHeightStyle };
|
||||
124
src/components/Editor/quill-custom-fontsize.js
Normal file
124
src/components/Editor/quill-custom-fontsize.js
Normal file
@@ -0,0 +1,124 @@
|
||||
// 自定义字体大小模块，支持预设选项和输入框
|
||||
export class CustomFontSize {
|
||||
constructor(quill, options) {
|
||||
this.quill = quill;
|
||||
this.options = options;
|
||||
|
||||
// 创建工具栏容器
|
||||
const container = quill.getModule("toolbar").container;
|
||||
|
||||
// 创建字体大小选择器
|
||||
this.selector = document.createElement("select");
|
||||
this.selector.classList.add("ql-size");
|
||||
|
||||
// 添加预设选项
|
||||
options.presets.forEach(size => {
|
||||
if (size === false) {
|
||||
// 添加分隔线
|
||||
const option = document.createElement("option");
|
||||
option.disabled = true;
|
||||
option.innerHTML = "──────────";
|
||||
this.selector.appendChild(option);
|
||||
} else {
|
||||
// 添加预设大小选项
|
||||
const option = document.createElement("option");
|
||||
option.value = size;
|
||||
option.innerHTML = this.getSizeLabel(size);
|
||||
this.selector.appendChild(option);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加自定义输入选项
|
||||
const inputOption = document.createElement("option");
|
||||
inputOption.value = "custom";
|
||||
inputOption.innerHTML = "自定义";
|
||||
this.selector.appendChild(inputOption);
|
||||
|
||||
// 创建自定义输入框
|
||||
this.input = document.createElement("input");
|
||||
this.input.type = "number";
|
||||
this.input.placeholder = "输入字号";
|
||||
this.input.min = 1;
|
||||
this.input.style.width = "50px";
|
||||
this.input.style.display = "none"; // 默认隐藏
|
||||
|
||||
// 将选择器和输入框添加到工具栏
|
||||
container.appendChild(this.selector);
|
||||
container.appendChild(this.input);
|
||||
|
||||
// 绑定事件
|
||||
this.selector.addEventListener("change", this.onSelectChange.bind(this));
|
||||
this.input.addEventListener("change", this.onInputChange.bind(this));
|
||||
this.quill.on("text-change", this.update.bind(this));
|
||||
|
||||
// 初始化
|
||||
this.update();
|
||||
}
|
||||
|
||||
// 获取大小标签
|
||||
getSizeLabel(size) {
|
||||
const labels = {
|
||||
small: "小",
|
||||
normal: "正常",
|
||||
large: "大",
|
||||
huge: "超大"
|
||||
};
|
||||
return labels[size] || size;
|
||||
}
|
||||
|
||||
// 选择器变更事件
|
||||
onSelectChange() {
|
||||
const value = this.selector.value;
|
||||
|
||||
if (value === "custom") {
|
||||
// 显示输入框
|
||||
this.input.style.display = "inline-block";
|
||||
this.input.focus();
|
||||
} else {
|
||||
// 隐藏输入框并应用选择的大小
|
||||
this.input.style.display = "none";
|
||||
this.quill.format("size", value);
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框变更事件
|
||||
onInputChange() {
|
||||
const value = this.input.value;
|
||||
if (value) {
|
||||
this.quill.format("size", `${value}px`);
|
||||
}
|
||||
// 选择"自定义"选项，保持输入框显示
|
||||
this.selector.value = "custom";
|
||||
}
|
||||
|
||||
// 更新当前选中状态
|
||||
update() {
|
||||
const selection = this.quill.getSelection();
|
||||
if (selection) {
|
||||
const [format] = this.quill.getFormat(selection.index, 1);
|
||||
const size = format.size;
|
||||
|
||||
if (size && size.endsWith("px")) {
|
||||
const sizeValue = size.replace("px", "");
|
||||
this.input.value = sizeValue;
|
||||
|
||||
// 如果是预设值，选中对应的选项
|
||||
if (this.options.presets.includes(size)) {
|
||||
this.selector.value = size;
|
||||
this.input.style.display = "none";
|
||||
} else {
|
||||
// 否则选中"自定义"并显示输入框
|
||||
this.selector.value = "custom";
|
||||
this.input.style.display = "inline-block";
|
||||
}
|
||||
} else {
|
||||
// 没有选中的大小，重置为默认
|
||||
this.selector.value = "normal";
|
||||
this.input.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // 注册自定义模块
|
||||
// Quill.register("modules/customFontSize", CustomFontSize);
|
||||
291
src/views/login/index2.vue
Normal file
291
src/views/login/index2.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="left-logo-box"></div>
|
||||
</div>
|
||||
<!-- 登录 -->
|
||||
<div class="right" v-if="dataStore.type === 1">
|
||||
<div class="right-logo-box">
|
||||
<div>
|
||||
<div class="right-logo-font">登录</div>
|
||||
<div class="sign-in">Sign in</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 100px">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="width: 300px"
|
||||
:model="dataStore.ruleForm"
|
||||
:rules="dataStore.rules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
class="demo-ruleForm"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input v-model="dataStore.ruleForm.username" :prefix-icon="Iphone" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="dataStore.ruleForm.password"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 350px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #4178d5;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="handleTabClick(2)"
|
||||
>
|
||||
忘记密码?
|
||||
</div> -->
|
||||
</el-form-item>
|
||||
<!-- <el-form-item prop="captcha">
|
||||
<span style="margin-right: 10px; color: #606266">验证码</span>
|
||||
<el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
|
||||
<img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
|
||||
<el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||
v-debounce="submitForm"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!--忘记密码 -->
|
||||
<div class="right" v-if="dataStore.type === 2">
|
||||
<div style="margin-left: 100px">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="ArrowLeftBold"
|
||||
circle
|
||||
style="margin: 60px 0 20px"
|
||||
@click="handleTabClick(1)"
|
||||
/>
|
||||
<el-form
|
||||
ref="resetRuleFormRef"
|
||||
:model="dataStore.resetRuleForm"
|
||||
:rules="dataStore.resetRules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
class="demo-ruleForm"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="手机号" prop="iphone">
|
||||
<el-input v-model="dataStore.resetRuleForm.iphone" :prefix-icon="Iphone" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验证码">
|
||||
<el-input v-model="dataStore.resetRuleForm.code" autocomplete="off">
|
||||
<template #append>
|
||||
<div style="font-size: 14px; color: #4178d5; cursor: pointer" v-debounce="handleGetCode">
|
||||
{{ dataStore.codeFont }}
|
||||
</div>
|
||||
<div v-if="dataStore.isShowTime" style="margin: 0 5px; font-size: 14px; color: #4178d5">
|
||||
{{ dataStore.timeCount }}s
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input
|
||||
v-model="dataStore.resetRuleForm.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="dataStore.resetRuleForm.confirmPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||
v-debounce="resetConfirmForm"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import CryptoJS from "crypto-js";
|
||||
//loginCodeImgApi
|
||||
import { loginApi } from "@/api/modules/login";
|
||||
import { Iphone, Lock, ArrowLeftBold } from "@element-plus/icons-vue";
|
||||
import { RULES, RULE_FORM, RESET_RULES, RESET_RULE_FORM } from "./constant/index";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
//用户信息存储
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const $router = useRouter();
|
||||
//登录表单Ref
|
||||
const ruleFormRef: any = ref(null);
|
||||
//修改密码表单Ref
|
||||
const resetRuleFormRef: any = ref(null);
|
||||
//数据源
|
||||
const dataStore = reactive<any>({
|
||||
timeCount: 120, //修改密码里验证码倒计时
|
||||
isShowTime: false,
|
||||
|
||||
base64: "", //验证码图片
|
||||
type: 1, //1:登录,2:修改密码
|
||||
codeFont: "获取验证码", //修改密码里的验证码按钮文字
|
||||
ruleForm: cloneDeep(RULE_FORM), //登录表单数据
|
||||
rules: cloneDeep(RULES), //登录表单验证
|
||||
resetRuleForm: cloneDeep(RESET_RULE_FORM), //修改密码表单数据
|
||||
resetRules: cloneDeep(RESET_RULES) //修改密码表单验证
|
||||
});
|
||||
//计时器
|
||||
let intervalId: any = null;
|
||||
|
||||
//登录
|
||||
const submitForm = () => {
|
||||
console.log(ruleFormRef);
|
||||
if (!ruleFormRef) return;
|
||||
ruleFormRef?.value?.validate((valid: any) => {
|
||||
if (valid) {
|
||||
login();
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//忘记密码提交事件
|
||||
const resetConfirmForm = () => {
|
||||
if (!resetRuleFormRef) return;
|
||||
resetRuleFormRef?.value?.validate((valid: any) => {
|
||||
if (valid) {
|
||||
let password = CryptoJS.MD5(dataStore.ruleForm.password)?.toString();
|
||||
console.log(password, "==== dataStore.ruleForm.password====");
|
||||
console.log("submit!");
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//登录接口
|
||||
const login = async () => {
|
||||
const result: any = await loginApi({
|
||||
...dataStore.ruleForm,
|
||||
password: CryptoJS?.MD5(dataStore.ruleForm.password)?.toString()
|
||||
});
|
||||
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
setUserData(data);
|
||||
}
|
||||
// else {
|
||||
// getLoginCodeImg();
|
||||
// }
|
||||
};
|
||||
//获取验证码图片接口
|
||||
// const getLoginCodeImg = async () => {
|
||||
// const result: any = await loginCodeImgApi();
|
||||
// if (result?.code === 0) {
|
||||
// const { data } = result;
|
||||
// const { captcha, token } = data;
|
||||
// dataStore.base64 = captcha;
|
||||
// dataStore.ruleForm.token = token;
|
||||
// }
|
||||
// };
|
||||
// getLoginCodeImg();
|
||||
//登录和密码重置切换
|
||||
const handleTabClick = (type: any) => {
|
||||
dataStore.type = type;
|
||||
for (let key in dataStore.ruleForm) {
|
||||
dataStore.ruleForm[key] = "";
|
||||
}
|
||||
for (let key in dataStore.resetRuleForm) {
|
||||
dataStore.resetRuleForm[key] = "";
|
||||
}
|
||||
if (intervalId) {
|
||||
handleClearInterval();
|
||||
dataStore.timeCount = 120;
|
||||
dataStore.isShowTime = false;
|
||||
}
|
||||
};
|
||||
//120秒验证时间
|
||||
const updateCountdown = () => {
|
||||
intervalId = setInterval(() => {
|
||||
if (dataStore.timeCount > 0) {
|
||||
dataStore.isShowTime = true;
|
||||
dataStore.timeCount--;
|
||||
} else {
|
||||
handleClearInterval();
|
||||
dataStore.timeCount = 120;
|
||||
dataStore.isShowTime = false;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
//获取验证码
|
||||
const handleGetCode = () => {
|
||||
//如果计时器已经启动了,就不要再去触发了
|
||||
if (intervalId) {
|
||||
return;
|
||||
}
|
||||
resetRuleFormRef.value.validateField("iphone", (valid: any) => {
|
||||
if (valid) {
|
||||
updateCountdown();
|
||||
} else {
|
||||
}
|
||||
});
|
||||
};
|
||||
//清理定时器
|
||||
const handleClearInterval = () => {
|
||||
clearInterval(intervalId);
|
||||
intervalId = null;
|
||||
};
|
||||
|
||||
// 设置用户数据
|
||||
const setUserData = (data: any) => {
|
||||
const { username, uid, token, avatar } = data;
|
||||
console.log();
|
||||
// 设置token
|
||||
userStore.setToken("Bearer" + " " + token);
|
||||
userStore.setUid(uid);
|
||||
userStore.setNickname(username);
|
||||
userStore.setAvatar(avatar);
|
||||
// await userStore.getAuthMenuList();
|
||||
//跳转到首页
|
||||
setTimeout(() => {
|
||||
$router.push("/admin/index");
|
||||
}, 500);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
//页面卸载的时候清空定时器
|
||||
if (intervalId) {
|
||||
handleClearInterval();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
371
vite.config.ts.timestamp-1752636911283-0a4ac4d78e007.mjs
Normal file
371
vite.config.ts.timestamp-1752636911283-0a4ac4d78e007.mjs
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user