npmapps 1.2.0 → 1.3.1

package/app/wujie-wk/wujie-vue2-child/src/views/element/quillEditor/index.vue

@@ -1,409 +0,0 @@
-<template>
- <div class="quill-editor-wrapper" :class="{ 'is-disabled': disabled }">
- <div ref="editor" :style="editorStyle"></div>
- <input
- ref="fileInput"
- type="file"
- accept="image/*"
- style="display: none"
- @change="onFileChange"
- />
- </div>
-</template>
-
-<script>
-import Quill from 'quill';
-import QuillTableBetter from 'quill-table-better';
-import 'quill/dist/quill.snow.css';
-import 'quill-table-better/dist/quill-table-better.css';
-import { toolbarPresets, buildDefaultModules } from './toolbar.js';
-
-const SIZE_THRESHOLD =5 *1024 *1024; //5MB
-
-export default {
- name: 'QuillEditor',
-
- model: {
- prop: 'value',
- event: 'input',
- },
-
- props: {
- value: {
- type: String,
- default: '',
- },
- placeholder: {
- type: String,
- default: '请输入内容...',
- },
- readonly: {
- type: Boolean,
- default: false,
- },
- disabled: {
- type: Boolean,
- default: false,
- },
- height: {
- type: [String, Number],
- default:300,
- },
- toolbar: {
- type: [Array, Object],
- default: null,
- },
- toolbarPreset: {
- type: String,
- default: 'default',
- validator: (v) => ['simple', 'default', 'full'].includes(v),
- },
- imageHandler: {
- type: Function,
- default: null,
- },
- theme: {
- type: String,
- default: 'snow',
- },
- },
-
- data() {
- return {
- quill: null,
- isInternalChange: false,
- changeTimer: null,
- };
- },
-
- computed: {
- editorStyle() {
- const h = typeof this.height === 'number' ? `${this.height}px` : this.height;
- return { minHeight: h };
- },
- },
-
- watch: {
- value(newVal) {
- if (this.isInternalChange) {
- this.isInternalChange = false;
- return;
- }
- if (this.quill && newVal !== this.getHtml()) {
- this.setHtml(newVal);
- }
- },
- readonly(val) {
- if (this.quill) {
- this.quill.enable(!val);
- }
- },
- disabled(val) {
- if (this.quill) {
- this.quill.enable(!val);
- }
- },
- },
-
- mounted() {
- this.$nextTick(() => {
- this.initQuill();
- });
- },
-
- beforeDestroy() {
- if (this.changeTimer) {
- clearTimeout(this.changeTimer);
- this.changeTimer = null;
- }
- if (this.quill) {
- try {
- this.quill.off('text-change', this.onTextChange);
- this.quill.off('selection-change', this.onSelectionChange);
- } catch (e) {
- // ignore
- }
- this.quill = null;
- }
- },
-
- methods: {
- initQuill() {
- if (typeof Quill === 'undefined' || !Quill) {
- this.renderError('Quill 未安装,请先执行 npm install quill');
- return;
- }
-
- // 注册 table-better 模块
- Quill.register(
- { 'modules/table-better': QuillTableBetter },
- true
- );
-
- // 注册 undo / redo 图标(Quill 默认不带这两个按钮的图标)
- const icons = Quill.import('ui/icons');
- icons.undo = '<svg viewbox="0 0 18 18"><polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon><path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path></svg>';
- icons.redo = '<svg viewbox="0 0 18 18"><polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon><path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path></svg>';
-
- const modules = this.buildModules();
-
- this.quill = new Quill(this.$refs.editor, {
- theme: this.theme,
- placeholder: this.placeholder,
- readOnly: this.readonly || this.disabled,
- modules,
- });
-
- //初始内容
- if (this.value) {
- this.setHtml(this.value);
- }
-
- //监听内容变化
- this.quill.on('text-change', this.onTextChange);
-
- //焦点事件
- this.quill.on('selection-change', this.onSelectionChange);
-
- this.$emit('ready', this.quill);
- },
-
- buildModules() {
- const baseModules = buildDefaultModules(QuillTableBetter);
- const preset = toolbarPresets[this.toolbarPreset] || toolbarPresets.default;
- const toolbarConfig = this.toolbar || preset;
- const handlers = {
- image: this.handleImage,
- undo: this.handleUndo,
- redo: this.handleRedo,
- };
-
- //复制 toolbar 配置,添加 image / undo / redo handler
- const modules = {
- ...baseModules,
- toolbar: Array.isArray(toolbarConfig)
- ? { container: toolbarConfig, handlers }
- : { ...toolbarConfig, handlers: { ...handlers, ...(toolbarConfig.handlers || {}) } },
- };
-
- return modules;
- },
-
- onTextChange(delta, oldDelta, source) {
- if (source === Quill.sources.SILENT) return;
- const html = this.getHtml();
- this.isInternalChange = true;
- this.$emit('input', html);
-
- if (this.changeTimer) clearTimeout(this.changeTimer);
- this.changeTimer = setTimeout(() => {
- this.$emit('change', html);
- },300);
- },
-
- onSelectionChange(range, oldRange) {
- if (range === null && oldRange !== null) {
- this.$emit('blur');
- } else if (range !== null && oldRange === null) {
- this.$emit('focus');
- }
- },
-
- handleImage() {
- if (this.disabled || this.readonly) return;
- this.$refs.fileInput.value = '';
- this.$refs.fileInput.click();
- },
-
- handleUndo() {
- const history = this.quill && this.quill.getModule('history');
- if (history) history.undo();
- },
-
- handleRedo() {
- const history = this.quill && this.quill.getModule('history');
- if (history) history.redo();
- },
-
- onFileChange(e) {
- const file = e.target.files && e.target.files[0];
- if (!file) return;
-
- if (this.imageHandler) {
- const range = this.quill.getSelection(true);
- Promise.resolve(this.imageHandler(file, range, this.quill))
- .then((result) => {
- if (result === false) {
- this.insertImageAsBase64(file);
- }
- })
- .catch(() => {
- this.insertImageAsBase64(file);
- });
- return;
- }
-
- this.insertImageAsBase64(file);
- },
-
- insertImageAsBase64(file) {
- if (file.size > SIZE_THRESHOLD) {
- if (this.$message && this.$message.warning) {
- this.$message.warning('图片过大(>5MB),建议压缩后上传');
- }
- }
- const reader = new FileReader();
- reader.onload = (e) => {
- const dataUrl = e.target.result;
- const range = this.quill.getSelection(true);
- const index = range ? range.index : this.quill.getLength();
- this.quill.insertEmbed(index, 'image', dataUrl, Quill.sources.USER);
- };
- reader.readAsDataURL(file);
- },
-
- renderError(msg) {
- console.error('[QuillEditor]', msg);
- const el = this.$refs.editor;
- if (el) {
- el.innerHTML = `<div class="quill-editor-error" style="padding:16px;border:1px dashed #f56c6c;color:#f56c6c;">${msg}</div>`;
- }
- },
-
- // ====== Public Methods ======
-
- getHtml() {
- if (!this.quill) return String(this.value || '');
- return this.quill.root.innerHTML;
- },
-
- getText() {
- if (!this.quill) return '';
- return this.quill.getText();
- },
-
- setHtml(html) {
- if (!this.quill) return;
- const safe = String(html || '');
- this.quill.clipboard.dangerouslyPasteHTML(0, safe);
- },
-
- clear() {
- if (!this.quill) return;
- this.quill.setText('');
- },
-
- focus() {
- if (this.quill) this.quill.focus();
- },
-
- getQuill() {
- return this.quill;
- },
- },
-};
-</script>
-
-<style scoped>
-.quill-editor-wrapper {
- background: #fff;
- border:1px solid #dcdfe6;
- border-radius:4px;
-}
-
-.quill-editor-wrapper.is-disabled {
- background: #f5f7fa;
- pointer-events: none;
- opacity:0.7;
-}
-
-.quill-editor-wrapper >>> .ql-toolbar {
- border-bottom:1px solid #dcdfe6;
- border-top-left-radius:4px;
- border-top-right-radius:4px;
-}
-
-.quill-editor-wrapper >>> .ql-container {
- border-bottom-left-radius:4px;
- border-bottom-right-radius:4px;
- font-size:14px;
-}
-
-.quill-editor-wrapper >>> .ql-editor {
- min-height:200px;
-}
-
-.quill-editor-wrapper >>> .ql-editor img {
- max-width:100%;
-}
-
-/* ===== 工具栏下拉汉化(标题 / 字体 / 字号) =====
- * Quill snow 主题用 ::before 的 content 渲染这三个下拉的文字标签,默认是英文。
- * 这里按 data-value 覆盖为中文:
- * - selectItem() 会把选中项的 data-value 同步到 .ql-picker-label,
- * 因此同一套规则同时覆盖「展开后的选项」和「收起后显示的当前值」;
- * - 不带 data-value 的默认项(正文 / 默认字体 / 默认)用基础规则覆盖。
- * 选择器加 .quill-editor-wrapper 前缀提升优先级并限定到本组件。 */
-
-/* 标题 header */
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-label::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-item::before {
- content: '正文';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
- content: '标题 1';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
- content: '标题 2';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
- content: '标题 3';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
- content: '标题 4';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
- content: '标题 5';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
- content: '标题 6';
-}
-
-/* 字体 font */
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-font .ql-picker-label::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-font .ql-picker-item::before {
- content: '默认字体';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
- content: '衬线';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
- content: '等宽';
-}
-
-/* 字号 size */
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-size .ql-picker-label::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-size .ql-picker-item::before {
- content: '默认';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
- content: '小号';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
- content: '大号';
-}
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
-.quill-editor-wrapper >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
- content: '超大';
-}
-</style>

package/app/wujie-wk/wujie-vue2-child/src/views/element/quillEditor/toolbar.js

@@ -1,122 +0,0 @@
-/**
- * QuillEditor 工具栏配置与预设
- *
- * 暴露:
- * - simpleToolbar / defaultToolbar / fullToolbar: 三种工具栏按钮数组
- * - toolbarPresets: { simple, default, full } 预设映射, 供组件 toolbarPreset 属性使用
- * - defaultTableBetterConfig: table-better 模块配置
- * - buildDefaultModules: 组装好的 modules 对象(toolbar + table-better + keyboard)
- *
- * 用法说明:
- * - 组件通过 toolbarPreset('simple' | 'default' | 'full') 选择预设;
- *   也可直接传 toolbar(数组/对象)完全自定义, 优先级高于预设。
- * - image 的 handler 在组件 initQuill 时通过 modules.toolbar.handlers.image 注册;
- *   undo / redo 的图标与 handler 也在组件中注册(Quill 默认不带这两个按钮)。
- * - header / font / size 下拉的中文汉化由 index.vue 的 <style> 用 CSS 覆盖 ::before 实现。
- *
- * ── 按钮 token 功能对照 ───────────────────────────────────
- *  { header: [1..6, false] }  标题级别下拉(1~6 级 + false 正文)
- *  { size: [...] }            字号下拉(small 小号 / false 默认 / large 大号 / huge 超大)
- *  'bold'                     加粗
- *  'italic'                   斜体
- *  'underline'                下划线
- *  'strike'                   删除线
- *  { color: [] }              文字颜色
- *  { background: [] }         文字背景色
- *  { script: 'sub' }          下标
- *  { script: 'super' }        上标
- *  'blockquote'               引用块
- *  'code-block'               代码块
- *  { list: 'ordered' }        有序列表
- *  { list: 'bullet' }         无序列表
- *  { indent: '-1' }           减少缩进
- *  { indent: '+1' }           增加缩进
- *  { align: [] }              对齐方式(左 / 居中 / 右 / 两端)
- *  'link'                     插入 / 编辑超链接
- *  'image'                    插入图片(默认 base64 内联, 可用 imageHandler 自定义上传)
- *  'video'                    插入视频(嵌入 iframe)
- *  'table-better'             插入表格(quill-table-better, 右键单元格有操作菜单)
- *  'clean'                    清除所选内容的所有格式
- *  'undo'                     撤销(组件注册图标 + handler, 走 Quill history 模块)
- *  'redo'                     重做
- *  { font: [] }               字体下拉 —— 当前未启用: 空白名单点开为空, 如需中文字体
- *                             须先注册 font whitelist, 故三个预设均不含它。
- * ─────────────────────────────────────────────────────────
- */
-
-/**
- * 精简版工具栏 —— 日常轻量文字编辑。
- * 加粗 / 斜体 / 下划线、基础标题(1~3)、有序 / 无序列表、链接、清除格式。
- */
-export const simpleToolbar = [
- ['bold', 'italic', 'underline'],
- [{ header: [1, 2, 3, false] }],
- [{ list: 'ordered' }, { list: 'bullet' }],
- ['link', 'clean'],
-];
-
-/**
- * 默认版工具栏(组件默认 toolbarPreset)—— 覆盖大多数业务场景的常用格式。
- * 含: 标题 / 字号、基础格式 + 删除线、颜色 / 背景、引用 / 代码、列表、缩进、
- *     对齐、链接 / 图片、清除格式、撤销 / 重做。
- * 不含(留给 full): 字体、上下标、视频、表格。
- */
-export const defaultToolbar = [
- [{ header: [1, 2, 3, 4, 5, 6, false] }],
- [{ size: ['small', false, 'large', 'huge'] }],
- ['bold', 'italic', 'underline', 'strike'],
- [{ color: [] }, { background: [] }],
- ['blockquote', 'code-block'],
- [{ list: 'ordered' }, { list: 'bullet' }],
- [{ indent: '-1' }, { indent: '+1' }],
- [{ align: [] }],
- ['link', 'image'],
- ['clean'],
- ['undo', 'redo'],
-];
-
-/**
- * 全部版工具栏 —— 在默认版基础上再加 上标 / 下标、视频、表格, 功能最全。
- * (不含空的 font 字体下拉)
- */
-export const fullToolbar = [
- [{ header: [1, 2, 3, 4, 5, 6, false] }],
- [{ size: ['small', false, 'large', 'huge'] }],
- ['bold', 'italic', 'underline', 'strike'],
- [{ color: [] }, { background: [] }],
- [{ script: 'sub' }, { script: 'super' }],
- ['blockquote', 'code-block'],
- [{ list: 'ordered' }, { list: 'bullet' }],
- [{ indent: '-1' }, { indent: '+1' }],
- [{ align: [] }],
- ['link', 'image', 'video'],
- ['table-better'],
- ['clean'],
- ['undo', 'redo'],
-];
-
-/**
- * 预设映射: 组件 toolbarPreset 属性据此取对应工具栏。
- */
-export const toolbarPresets = {
- simple: simpleToolbar,
- default: defaultToolbar,
- full: fullToolbar,
-};
-
-export const defaultTableBetterConfig = {
- language: 'zh_CN',
- menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
- toolbarTable: true,
-};
-
-export function buildDefaultModules(quillTableBetter) {
- return {
-  toolbar: defaultToolbar,
-  table: false,
-  'table-better': defaultTableBetterConfig,
-  keyboard: {
-   bindings: quillTableBetter.keyboardBindings,
-  },
- };
-}

package/app/wujie-wk/wujie-vue2-child/vue.config.js

@@ -1,15 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true,
-  lintOnSave: false,
-  devServer: {
-    host: '::',
-    port: 3004,
-    allowedHosts: 'all',
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
-    }
-  }
-})