npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue2-child/src/views/element/elTableJsx/simpleTable.vue

@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <elTableJsx
+      :columns="columns"
+      :tableData="tableData"
+      stripe
+      @cell-click="onCellClick"
+    >
+      <template #header-left>
+        <span>header-left</span>
+      </template>
+      <!-- <template #header-right>
+        <span>header-right</span>
+      </template> -->
+    </elTableJsx>
+  </div>
+</template>
+
+<script>
+import elTableJsx from "./elTableJsx.vue";
+export default {
+  components: {
+    elTableJsx,
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: "基本信息",
+          key: "basic",
+          width: "600",
+          props: {
+            align: "center",
+          },
+          children: [
+            {
+              label: "姓名",
+              key: "name",
+              props: {
+                align: "center",
+                width: "220",
+              },
+            },
+            {
+              label: "性别",
+              key: "gender",
+              props: {
+                align: "center",
+                width: "180",
+              },
+            },
+            {
+              label: "年龄",
+              key: "age",
+              props: {
+                align: "center",
+                width: "180",
+              },
+            },
+          ],
+        },
+
+        {
+          label: "电话",
+          key: "phone",
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "邮箱",
+          key: "email",
+          props: {
+            align: "center",
+            minWidth: "300",
+          },
+        },
+        {
+          label: "住址",
+          key: "address",
+          props: {
+            align: "center",
+            minWidth: "350",
+          },
+        },
+
+        {
+          label: "部门",
+          key: "department",
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "职位",
+          key: "position",
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+        {
+          label: "入职时间",
+          key: "entryDate",
+          props: {
+            align: "center",
+            minWidth: "250",
+          },
+        },
+      ],
+      tableData: [
+        {
+          name: "张三",
+          gender: "男",
+          age: 28,
+          phone: "13812345678",
+          email: "zhangsan@example.com",
+          address: "北京市海淀区中关村大街1号",
+          department: "研发部",
+          position: "高级工程师",
+          entryDate: "2020-01-15",
+        },
+        {
+          name: "李四",
+          gender: "女",
+          age: 32,
+          phone: "13987654321",
+          email: "lisi@example.com",
+          address: "上海市浦东新区陆家嘴环路888号",
+          department: "产品部",
+          position: "产品经理",
+          entryDate: "2019-06-20",
+        },
+        {
+          name: "王五",
+          gender: "男",
+          age: 35,
+          phone: "13567891234",
+          email: "wangwu@example.com",
+          address: "广州市天河区珠江新城华夏路10号",
+          department: "市场部",
+          position: "市场总监",
+          entryDate: "2018-03-10",
+        },
+        {
+          name: "赵六",
+          gender: "女",
+          age: 26,
+          phone: "13789012345",
+          email: "zhaoliu@example.com",
+          address: "深圳市南山区科技园科发路8号",
+          department: "设计部",
+          position: "UI设计师",
+          entryDate: "2021-09-01",
+        },
+        {
+          name: "钱七",
+          gender: "男",
+          age: 40,
+          phone: "13456789012",
+          email: "qianqi@example.com",
+          address: "成都市武侯区天府大道1234号",
+          department: "财务部",
+          position: "财务总监",
+          entryDate: "2017-12-05",
+        },
+        {
+          name: "孙八",
+          gender: "女",
+          age: 29,
+          phone: "13234567890",
+          email: "sunba@example.com",
+          address: "武汉市江汉区解放大道456号",
+          department: "人力资源部",
+          position: "HR经理",
+          entryDate: "2020-07-15",
+        },
+      ],
+    };
+  },
+  methods: {
+    onCellClick(row, column, cell, event) {
+      console.log("onCellClick", row, column, cell, event);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <el-tabs type="border-card" v-model="activeName">
+      <el-tab-pane label="BPMN">
+        <bpmn />
+      </el-tab-pane>
+      <el-tab-pane label="分屏示例">
+        <SplitterExample />
+      </el-tab-pane>
+      <el-tab-pane label="JSX表格">
+        <elTableJsx />
+      </el-tab-pane>
+      <el-tab-pane label="富文本编辑器" name="quillEditor">
+        <quillEditor />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import bpmn from "./bpmn/index.vue";
+import SplitterExample from "../../components/Splitter/example.vue";
+import elTableJsx from "./elTableJsx/index.vue";
+import quillEditor from "./quillEditor/example.vue";
+export default {
+  name: "element",
+  components: {
+    bpmn,
+    SplitterExample,
+    elTableJsx,
+    quillEditor,
+  },
+  data() {
+    return {
+      activeName: "quillEditor",
+    };
+  },
+};
+</script>

package/app/wujie-wk/wujie-vue2-child/src/views/element/quillEditor/README.md

@@ -0,0 +1,163 @@
+# QuillEditor
+
+基于 Quill2.x + quill-table-better 的 Vue2 富文本编辑器组件,支持表格、图片、全部基础格式。
+
+## 安装依赖
+
+依赖已添加到 `package.json`,首次使用需安装:
+
+```bash
+npm install
+```
+
+依赖列表:
+- `quill@2.0.2`
+- `quill-table-better@1.2.3`
+
+##快速使用
+
+```vue
+<template>
+ <QuillEditor v-model="content" :height="400" />
+</template>
+
+<script>
+import QuillEditor from '@/views/element/quillEditor/index.vue';
+
+export default {
+ components: { QuillEditor },
+ data() {
+ return { content: '<p>Hello Quill!</p>' };
+ },
+};
+</script>
+```
+
+## Props
+
+| Prop | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` | String | `''` | 编辑器 HTML 内容,支持 v-model |
+| `placeholder` | String | `'请输入内容...'` | 占位文字 |
+| `readonly` | Boolean | `false` | 是否只读(可看不可改) |
+| `disabled` | Boolean | `false` | 是否禁用(工具栏灰掉,不可编辑) |
+| `height` | String \| Number | `300` | 编辑区高度,数字按 px,字符串按原值 |
+| `toolbarPreset` | String | `'default'` | 工具栏预设:`'simple'`(精简)/ `'default'`(默认)/ `'full'`(全部) |
+| `toolbar` | Array \| Object | `null` | 自定义工具栏配置;传了则**覆盖** `toolbarPreset` |
+| `imageHandler` | Function | `null` | 自定义图片处理函数;不传则走 base64 内联 |
+| `theme` | String | `'snow'` |主题,目前只支持 snow |
+
+## Events
+
+|事件 |触发时机 | 参数 |
+|------|---------|------|
+| `input` | 内容变化 | `(html: String)` |
+| `change` | 内容变化(去抖300ms) | `(html: String)` |
+| `ready` | Quill 实例初始化完成 | `(quill: Quill)` |
+| `focus` | 编辑器获得焦点 | `()` |
+| `blur` | 编辑器失去焦点 | `()` |
+
+## Methods(通过 ref 调用)
+
+| 方法 | 返回值 | 说明 |
+|------|--------|------|
+| `getHtml()` | String | 获取当前 HTML |
+| `getText()` | String | 获取纯文本 |
+| `setHtml(html)` | - | 设置内容 |
+| `clear()` | - | 清空内容 |
+| `focus()` | - |聚焦 |
+| `getQuill()` | Quill | 获取底层 Quill 实例(高级用法) |
+
+## 自定义图片上传示例
+
+```vue
+<QuillEditor
+ v-model="content"
+ :image-handler="uploadImage"
+/>
+
+<script>
+methods: {
+ async uploadImage(file, range, quill) {
+ const form = new FormData();
+ form.append('file', file);
+ const res = await fetch('/api/upload', { method: 'POST', body: form });
+ const { url } = await res.json();
+ quill.insertEmbed(range.index, 'image', url);
+ return true; // 返回 true 表示已处理,跳过 base64 回退
+ },
+}
+</script>
+```
+
+## 工具栏预设(toolbarPreset)
+
+通过 `toolbarPreset` 选择内置工具栏,三档从简到全:
+
+| 预设 | 适用场景 | 包含按钮 |
+|------|---------|----------|
+| `simple` 精简 | 评论、备注等轻量输入 | 加粗/斜体/下划线、标题(1-3)、有序/无序列表、链接、清除格式 |
+| `default` 默认 | 大多数业务表单(默认值) | 标题/字号、基础格式+删除线、颜色/背景、引用/代码、列表、缩进、对齐、链接/图片、清除、撤销/重做 |
+| `full` 全部 | 文档/文章等富内容 | 在默认基础上再加 上标/下标、视频、表格 |
+
+```vue
+<QuillEditor :toolbar-preset="'simple'" />   <!-- 精简 -->
+<QuillEditor />                               <!-- 默认 -->
+<QuillEditor :toolbar-preset="'full'" />      <!-- 全部 -->
+```
+
+> 运行时切换 `toolbarPreset` 需重新挂载组件(给组件加 `:key="preset"`),因为 Quill 工具栏在初始化时一次性构建。
+
+各按钮 token 的功能对照、以及为何预设不含 `font` 字体下拉,见 `toolbar.js` 顶部注释。
+
+### 完全自定义工具栏
+
+传 `toolbar` 数组(优先级高于 `toolbarPreset`):
+
+```javascript
+[
+ [{ header: [1, 2, 3, false] }],
+ ['bold', 'italic', 'underline'],
+ [{ list: 'ordered' }, { list: 'bullet' }],
+ ['link', 'clean'],
+]
+```
+
+## HTML 源码双向联动
+
+内容用 v-model 双向绑定,可同时在一个 textarea 里编辑 HTML 源码并写回编辑器:
+
+```vue
+<template>
+  <QuillEditor v-model="html" />
+  <textarea v-model="source" />
+  <button @click="html = source">应用源码到编辑器</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return { html: '<p>hello</p>', source: '<p>hello</p>' };
+  },
+  watch: {
+    html(val) { this.source = val; }, // 编辑器变化实时同步到源码框
+  },
+};
+</script>
+```
+
+> 写回时 `html = source` 会触发编辑器 `setHtml`,Quill 会对 HTML 做规范化。完整示例见 `example.vue` 卡片②。
+
+##表格功能
+
+点击工具栏的 `table-better`按钮可插入表格,右键单元格可弹出操作菜单(增删行列、合并/拆分、单元格背景色、复制/删除)。
+
+表格配置见 `toolbar.js` 中 `defaultTableBetterConfig`:
+- `language: 'zh_CN'` 中文界面
+- `toolbarTable: true` 显示表格工具栏
+- `menus`包含 column/row/merge/table/cell/wrap/copy/delete全部操作
+
+##主题与样式
+
+组件内部已 `import 'quill/dist/quill.snow.css'` 和 `quill-table-better/dist/quill-table-better.css`,
+**不需要在 main.js 全局引入**。外层容器样式 scoped,不污染全局。

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

@@ -0,0 +1,307 @@
+<template>
+  <div class="quill-demo">
+    <!-- 卡片① 工具栏预设切换 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__header">
+        <span class="demo-card__title">① 工具栏预设切换（toolbarPreset）</span>
+        <el-radio-group v-model="presetMode" size="small">
+          <el-radio-button label="simple">精简</el-radio-button>
+          <el-radio-button label="default">默认</el-radio-button>
+          <el-radio-button label="full">全部</el-radio-button>
+        </el-radio-group>
+      </div>
+      <p class="demo-tip">
+        切换上方单选即可实时更换工具栏。当前预设：<b>{{ presetMode }}</b>
+        （组件通过 <code>:key</code> 重新挂载以应用新工具栏，内容经 v-model 自动保留）。
+      </p>
+      <QuillEditor
+        :key="presetMode"
+        v-model="presetContent"
+        :toolbar-preset="presetMode"
+        :height="240"
+      />
+    </el-card>
+
+    <!-- 卡片② 基础编辑器 + HTML 源码联动 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__title">② 基础编辑器 + HTML 源码联动（实例1）</div>
+      <QuillEditor v-model="content1" :height="260" @ready="onReady" />
+      <div class="source-head">
+        <span class="demo-card__subtitle">HTML 源码（可编辑）</span>
+        <div>
+          <el-button type="primary" size="small" @click="applySource">应用到编辑器1</el-button>
+          <el-button size="small" @click="refreshSource">从编辑器1刷新源码</el-button>
+        </div>
+      </div>
+      <el-input
+        v-model="source1"
+        type="textarea"
+        :rows="6"
+        class="source-box"
+        placeholder="在此编辑 HTML，点「应用到编辑器1」整体写回上方编辑器"
+      />
+      <p class="demo-tip">
+        编辑器1 的内容变化会实时同步到源码框；点「应用到编辑器1」把源码整体写回编辑器（Quill 会规范化 HTML）。
+      </p>
+    </el-card>
+
+    <!-- 卡片③ 只读 / 禁用 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__title">③ 只读 / 禁用模式</div>
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <div class="demo-card__subtitle">只读 readonly（可选可看，不可改）</div>
+          <QuillEditor v-model="content2" :readonly="true" :height="220" />
+        </el-col>
+        <el-col :span="12">
+          <div class="demo-card__subtitle">禁用 disabled（整体灰掉）</div>
+          <QuillEditor v-model="content3" :disabled="true" :height="220" />
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 卡片④ 自定义工具栏 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__title">④ 自定义工具栏（传 toolbar 数组）</div>
+      <p class="demo-tip">
+        传入 <code>:toolbar</code> 数组即可完全自定义（优先级高于 toolbarPreset）。本例只保留：加粗 / 斜体、列表、链接、清除。
+      </p>
+      <QuillEditor :toolbar="customToolbar" v-model="content4" :height="200" />
+    </el-card>
+
+    <!-- 卡片⑤ Ref 方法调用 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__title">⑤ 通过 ref 调用组件方法</div>
+      <QuillEditor ref="refDemo" v-model="content5" toolbar-preset="simple" :height="180" />
+      <div class="btn-row">
+        <el-button size="small" @click="callGetHtml">getHtml()</el-button>
+        <el-button size="small" @click="callGetText">getText()</el-button>
+        <el-button size="small" @click="callClear">clear()</el-button>
+        <el-button size="small" @click="callFocus">focus()</el-button>
+      </div>
+      <el-input
+        v-model="methodOutput"
+        type="textarea"
+        :rows="4"
+        readonly
+        class="source-box"
+        placeholder="方法返回值显示在这里"
+      />
+    </el-card>
+
+    <!-- 卡片⑥ 事件监听 -->
+    <el-card class="demo-card" shadow="never">
+      <div slot="header" class="demo-card__header">
+        <span class="demo-card__title">⑥ 事件监听（focus / blur / change）</span>
+        <el-button size="small" @click="eventLogs = []">清空日志</el-button>
+      </div>
+      <QuillEditor
+        v-model="content6"
+        toolbar-preset="simple"
+        :height="180"
+        @focus="onEvtFocus"
+        @blur="onEvtBlur"
+        @change="onEvtChange"
+      />
+      <div class="log-panel">
+        <div v-if="!eventLogs.length" class="log-empty">（在上方编辑器中操作以触发事件）</div>
+        <div v-for="(log, i) in eventLogs" :key="i" class="log-line">{{ log }}</div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import QuillEditor from './index.vue';
+
+const SAMPLE_WITH_TABLE = `<h2>富文本编辑器示例</h2>
+<p>这是一个 <strong>Quill</strong> 富文本编辑器示例，包含以下功能：</p>
+<ul>
+  <li>基础格式：加粗、斜体、下划线、删除线</li>
+  <li>标题、段落、引用、列表</li>
+  <li>字号、颜色、对齐、缩进</li>
+  <li>图片（支持 base64 内联）</li>
+  <li>表格（quill-table-better）</li>
+</ul>
+<table>
+  <thead>
+    <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>张三</td><td>28</td><td>北京</td></tr>
+    <tr><td>李四</td><td>32</td><td>上海</td></tr>
+  </tbody>
+</table>
+<p>试着编辑上方内容，查看下方 <code>HTML 源码</code> 输出。</p>`;
+
+const SIMPLE_SAMPLE = '<p>这是一个<strong>精简</strong>示例，可在上方编辑触发事件。</p>';
+
+export default {
+  name: 'QuillEditorDemo',
+  components: { QuillEditor },
+  data() {
+    return {
+      versionTip:
+        '基于 Quill 2 + quill-table-better，支持表格 / 图片 / 撤销重做，工具栏已中文化。',
+      // 卡片① 预设切换
+      presetMode: 'default',
+      presetContent: SAMPLE_WITH_TABLE,
+      // 卡片② 基础编辑器 + 源码联动
+      content1: SAMPLE_WITH_TABLE,
+      source1: SAMPLE_WITH_TABLE,
+      // 卡片③ 只读 / 禁用
+      content2: SAMPLE_WITH_TABLE,
+      content3: SAMPLE_WITH_TABLE,
+      // 卡片④ 自定义工具栏
+      content4: '<p>自定义工具栏示例：<strong>加粗</strong>、<em>斜体</em>、列表。</p>',
+      customToolbar: [
+        ['bold', 'italic'],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        ['link'],
+        ['clean'],
+      ],
+      // 卡片⑤ ref 方法
+      content5: '<p>点下方按钮调用组件方法（getHtml / getText / clear / focus）。</p>',
+      methodOutput: '',
+      // 卡片⑥ 事件监听
+      content6: SIMPLE_SAMPLE,
+      eventLogs: [],
+    };
+  },
+  watch: {
+    // 编辑器1 内容变化时，实时把源码同步到下方文本框
+    content1(val) {
+      this.source1 = val;
+    },
+  },
+  methods: {
+    onReady(quill) {
+      this.versionTip = `基于 Quill ${quill.version} + quill-table-better，支持表格 / 图片 / 撤销重做，工具栏已中文化。`;
+    },
+    // 卡片② 源码 → 编辑器1（整体写回）
+    applySource() {
+      this.content1 = this.source1;
+      if (this.$message) this.$message.success('已写回编辑器1');
+    },
+    // 卡片② 编辑器1 → 源码（手动刷新）
+    refreshSource() {
+      this.source1 = this.content1;
+    },
+    // 卡片⑤ ref 方法
+    callGetHtml() {
+      this.methodOutput = this.$refs.refDemo.getHtml();
+    },
+    callGetText() {
+      this.methodOutput = this.$refs.refDemo.getText();
+    },
+    callClear() {
+      this.$refs.refDemo.clear();
+      this.methodOutput = '(已清空)';
+    },
+    callFocus() {
+      this.$refs.refDemo.focus();
+    },
+    // 卡片⑥ 事件
+    onEvtFocus() {
+      this.pushLog('focus 获得焦点');
+    },
+    onEvtBlur() {
+      this.pushLog('blur 失去焦点');
+    },
+    onEvtChange(html) {
+      this.pushLog(`change 内容长度 ${html.length}`);
+    },
+    pushLog(text) {
+      const t = new Date().toLocaleTimeString();
+      this.eventLogs.unshift(`[${t}] ${text}`);
+      if (this.eventLogs.length > 20) this.eventLogs.splice(20);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.quill-demo {
+  padding: 20px;
+}
+
+.demo-alert {
+  margin-bottom: 16px;
+}
+
+.demo-card {
+  margin-bottom: 16px;
+}
+
+.demo-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.demo-card__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.demo-card__subtitle {
+  display: block;
+  margin: 8px 0;
+  font-size: 13px;
+  color: #606266;
+}
+
+.demo-tip {
+  margin: 8px 0;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #909399;
+}
+
+.demo-tip code,
+.demo-card code {
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: #f5f7fa;
+  color: #c7254e;
+  font-family: Consolas, 'Courier New', monospace;
+}
+
+.source-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 12px 0 8px;
+}
+
+.source-box >>> .el-textarea__inner {
+  font-family: Consolas, 'Courier New', monospace;
+  font-size: 12px;
+}
+
+.btn-row {
+  margin: 12px 0;
+}
+
+.log-panel {
+  margin-top: 12px;
+  max-height: 160px;
+  padding: 8px 12px;
+  overflow: auto;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #f5f7fa;
+  font-family: Consolas, 'Courier New', monospace;
+  font-size: 12px;
+}
+
+.log-line {
+  line-height: 1.8;
+  color: #475669;
+}
+
+.log-empty {
+  color: #909399;
+}
+</style>