npmapps 1.1.6 → 1.3.1

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

@@ -1,189 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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

@@ -1,163 +0,0 @@
-# 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

@@ -1,307 +0,0 @@
-<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>