npmapps 1.0.25 → 1.0.27

package/app/src/views/element/quillEditor/index.vue

@@ -0,0 +1,409 @@
+<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/src/views/element/quillEditor/toolbar.js

@@ -0,0 +1,122 @@
+/**
+ * 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/vue.config.js

@@ -0,0 +1,15 @@
+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'
+    }
+  }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "npmapps",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "",
   "main": "index.js",
   "scripts": {

package/app/wujie-vue3-child/.claude/settings.local.json

@@ -1,8 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(wc -l \"D:\\\\web\\\\wujieblack\\\\wujie-wk\\\\wujie-vue3-child\\\\src\\\\views\\\\aiCoach\\\\practiceStatus\\\\components\"/**/*.jsx)",
-      "Bash(npm run dev:*)"
-    ]
-  }
-}

package/app/wujie-vue3-child/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}