npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue2-child/src/assets/icon/font/source/symbols/distribute-vertically-tool.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="2048"
+   height="2048"
+   id="svg3891"
+   version="1.1">
+  <defs
+     id="defs3893" />
+  <metadata
+     id="metadata3896">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     id="rect4338-7-82-22"
+     d="M 584 4 L 584 442 L 438 442 L 292 442 L 292 1610 L 438 1610 L 584 1610 L 584 2048 L 657 2048 L 1752 2048 L 1752 1464 L 584 1464 L 438 1464 L 438 1099 L 584 1099 L 584 1318 L 657 1318 L 1460 1318 L 1460 734 L 584 734 L 584 953 L 438 953 L 438 588 L 584 588 L 657 588 L 1752 588 L 1752 4 L 584 4 z M 730 150 L 1606 150 L 1606 442 L 730 442 L 730 150 z M 730 880 L 1314 880 L 1314 1172 L 730 1172 L 730 880 z M 730 1610 L 1606 1610 L 1606 1902 L 730 1902 L 730 1610 z "
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#282828;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:146;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+</svg>

package/app/wujie-wk/wujie-vue2-child/src/assets/icon/font/source/symbols/set-color-tool.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="2048"
+   height="2048"
+   id="svg3891"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="set-color-tool.svg"
+   inkscape:export-filename="C:\Users\Philipp\Desktop\align-bottom-tool.png"
+   inkscape:export-xdpi="0.69999999"
+   inkscape:export-ydpi="0.69999999">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     id="namedview6"
+     showgrid="false"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-center="false"
+     inkscape:zoom="0.16"
+     inkscape:cx="1019.5806"
+     inkscape:cy="976.38444"
+     inkscape:window-x="1592"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3891" />
+  <defs
+     id="defs3893" />
+  <metadata
+     id="metadata3896">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:146;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     d="M 1715.7656 28.447266 L 1285.6504 458.5625 L 1168.6758 575.53711 L 954.72852 515.3457 L 732.81641 452.91406 L 729.46875 457.24414 L 728.97852 456.75391 L 549.81641 635.91406 L 977.91992 1064.0176 L 1406.0234 1492.123 L 1585.1855 1312.9609 L 1584.6934 1312.4688 L 1589.0254 1309.1211 L 1526.5938 1087.209 L 1471.0156 889.66602 L 1593.8848 766.79688 L 2024 336.68164 L 1715.7656 28.447266 z M 422.60938 764.73633 L 24 1163.3457 L 452.10352 1591.4492 L 880.20703 2019.5527 L 1278.8164 1620.9434 L 850.71289 1192.8398 L 422.60938 764.73633 z "
+     id="rect4136-7" />
+</svg>

package/app/wujie-wk/wujie-vue2-child/src/components/EllTable/README.md

@@ -0,0 +1,70 @@
+# EllTable 组件
+
+基于 Element UI Table 组件扩展的表格组件，支持鼠标横向滚动和提示功能。
+
+## 功能特点
+
+- 支持鼠标横向滚动（按住 Alt 键）
+- 自动检测表格是否需要横向滚动
+- 可配置的提示信息和位置
+- 继承 Element UI Table 的所有功能和属性
+
+## 属性配置
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|---------|------|
+| disableMouseHorizontalWheel | Boolean | false | 是否禁用鼠标横向滚动功能 |
+| hiddenMouseWheel | Boolean | false | 是否隐藏鼠标滚动提示 |
+| showTooltip | Boolean | false | 是否显示提示信息 |
+| tooltipContent | String/Array | [] | 提示信息内容，可以是字符串或字符串数组 |
+| tooltipPosition | Object | { top: "10px", left: "10px" } | 提示信息位置，支持 top、left、bottom、right |
+
+## 使用示例
+
+```vue
+<template>
+  <ell-table
+    :data="tableData"
+    border
+    style="width: 100%"
+    height="300"
+    :tooltip-content="['按住Alt键可以横向滚动表格', '自定义提示信息']"
+    :show-tooltip="true"
+    :tooltip-position="{ top: '20px', right: '20px' }"
+  >
+    <el-table-column prop="date" label="日期" width="180" fixed="left"></el-table-column>
+    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
+    <el-table-column prop="address" label="地址" width="300"></el-table-column>
+    <!-- 更多列... -->
+  </ell-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '2023-01-01',
+        name: '张三',
+        address: '北京市朝阳区'
+      }]
+    }
+  }
+}
+</script>
+```
+
+## 注意事项
+
+1. 组件会自动检测表格是否同时存在横向和纵向滚动条，如果存在则显示提示信息
+2. 可以通过 `disableMouseHorizontalWheel` 属性禁用鼠标横向滚动功能
+3. 提示信息位置可以通过 `tooltipPosition` 属性灵活配置
+4. 组件完全兼容 Element UI Table 的所有功能，可以正常使用 Table 组件的所有属性和方法
+
+## 建议功能扩展
+
+1. 支持自定义滚动速度
+2. 添加滚动方向锁定功能
+3. 提供滚动事件回调
+4. 支持 tooltip 主题定制
+5. 添加更多交互效果（如双击切换滚动方向、滚动到边缘时的视觉反馈等）

package/app/wujie-wk/wujie-vue2-child/src/components/EllTable/article.md

@@ -0,0 +1,184 @@
+# Element UI Table组件扩展：实现鼠标横向滚动和提示功能
+
+## 前言
+在使用Element UI的Table组件时，当表格列数较多时，需要通过水平滚动条来查看更多的列数据。为了提升用户体验，我们可以通过扩展Table组件，实现使用鼠标滚轮进行横向滚动的功能，并添加相应的提示信息。本文将详细介绍如何实现这一功能。
+
+## 功能特点
+
+- 支持使用鼠标滚轮进行横向滚动（按住Alt键）
+- 自动检测表格是否需要横向滚动
+- 提供可配置的提示信息和位置
+- 支持双击切换滚动方向（垂直/水平）
+- 完全兼容Element UI Table的所有功能和属性
+
+## 实现原理
+
+### 1. 组件结构
+
+组件通过扩展Element UI的Table组件实现，主要包含以下核心功能：
+
+- 监听鼠标滚轮事件，实现横向滚动
+- 自动检测表格滚动条状态
+- 提供可配置的提示信息
+- 支持滚动方向切换
+
+### 2. 核心代码实现
+
+#### 2.1 组件定义
+
+```javascript
+import { Table } from "element-ui";
+
+export const tableMouseHorizontalWheel = {
+    extends: Table,
+    data() {
+      return {
+        tooltipContentList: [],
+        tooltipVisible: this.showTooltip,
+        scrollDirection: 'vertical', // 默认为垂直滚动
+        isScrollingToEdge: false, // 是否滚动到边缘
+      };
+    },
+    props: {
+      /** @prop {Boolean} [disableMouseHorizontalWheel=false] - 是否禁用鼠标横向滚动功能 */
+      disableMouseHorizontalWheel: {
+        type: Boolean,
+        default: false,
+      },
+      /** @prop {Boolean} [hiddenMouseWheel=false] - 是否隐藏鼠标滚动提示 */
+      hiddenMouseWheel: {
+        type: Boolean,
+        default: false,
+      },
+      /** @prop {Boolean} [showTooltip=false] - 是否显示提示信息 */
+      showTooltip: {
+        type: Boolean,
+        default: false,
+      },
+      /** @prop {String|Array} [tooltipContent=[]] - 提示信息内容 */
+      tooltipContent: {
+        type: [String, Array],
+        default: () => [],
+      },
+      /** @prop {Object} [tooltipPosition={ top: "10px", left: "10px" }] - 提示信息位置 */
+      tooltipPosition: {
+        type: Object,
+        default: () => ({
+          top: "10px",
+          left: "10px",
+        })
+      },
+    }
+    // ... 其他代码省略
+}
+```
+
+#### 2.2 横向滚动实现
+
+```javascript
+handleWheel(event) {
+  const tableBody = this.$el.querySelector(".el-table__body-wrapper");
+  // 当表格内容高度小于容器高度时，直接启用横向滚动
+  if(tableBody.scrollHeight <= tableBody.clientHeight) {
+    event.preventDefault();
+    tableBody.scrollLeft += event.deltaY;
+    return;
+  }
+  // 当处于水平滚动模式或按住Alt键时，启用横向滚动
+  if (this.scrollDirection === 'horizontal' || event.altKey) {
+    event.preventDefault();
+    tableBody.scrollLeft += event.deltaY;
+  }
+}
+```
+
+#### 2.3 滚动条检测
+
+```javascript
+hasScrollbarByMff() {
+  const tableBody = this.$el.querySelector(".el-table__body-wrapper");
+  // 检测竖向滚动条
+  const verticalScrollbarWidth = tableBody.scrollHeight - tableBody.clientHeight;
+  // 检测横向滚动条
+  const horizontalScrollbarHeight = tableBody.scrollWidth - tableBody.clientWidth;
+  
+  // 当同时存在横向和纵向滚动条时，显示提示信息
+  if (verticalScrollbarWidth > 0 && horizontalScrollbarHeight > 0 && !this.hiddenMouseWheel) {
+    this.tooltipContentList.push("按住Alt键可以横向滚动表格");
+    this.tooltipVisible = true;
+    this.$el.addEventListener("dblclick", this.toggleScrollDirection);
+    this.tooltipContentList.push('双击表格任意位置可切换滚动方向');
+  } else {
+    // 清除提示信息
+    this.tooltipContentList = this.tooltipContentList.filter(item => 
+      !item.includes('按住Alt键可以横向滚动表格') && 
+      !item.includes('双击表格任意位置可切换滚动方向')
+    );
+    this.tooltipVisible = false;
+  }
+}
+```
+
+## 使用示例
+
+### 1. 注册组件
+
+```javascript
+import Vue from "vue";
+import { tableMouseHorizontalWheel } from "@/components/EllTable/index";
+Vue.component("ell-table", tableMouseHorizontalWheel);
+```
+
+### 2. 基础用法
+
+```vue
+<template>
+  <div>
+    <ell-table :data="tableData" border style="width: 100%" height="400">
+      <el-table-column
+        prop="date"
+        label="日期"
+        width="180"
+        fixed="left"
+      ></el-table-column>
+      <el-table-column label="合并列" width="660">
+        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+          width="300"
+        ></el-table-column>
+      </el-table-column>
+      <!-- 更多列配置 -->
+    </ell-table>
+  </div>
+</template>
+```
+
+## 配置说明
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| disableMouseHorizontalWheel | 是否禁用鼠标横向滚动功能 | Boolean | false |
+| hiddenMouseWheel | 是否隐藏鼠标滚动提示 | Boolean | false |
+| showTooltip | 是否显示提示信息 | Boolean | false |
+| tooltipContent | 提示信息内容 | String/Array | [] |
+| tooltipPosition | 提示信息位置 | Object | { top: "10px", left: "10px" } |
+
+## 注意事项
+
+1. 组件会自动检测表格是否同时存在横向和纵向滚动条，如果存在则显示提示信息
+2. 可以通过`disableMouseHorizontalWheel`属性禁用鼠标横向滚动功能
+3. 提示信息位置可以通过`tooltipPosition`属性灵活配置
+4. 双击表格可以切换滚动方向（垂直/水平）
+5. 按住Alt键可以临时启用横向滚动
+6. 组件完全兼容Element UI Table的所有功能，可以正常使用Table组件的所有属性和方法
+
+## 总结
+
+通过扩展Element UI的Table组件，我们实现了一个更加便捷的表格组件，支持鼠标横向滚动和智能提示功能。这个组件不仅提升了用户体验，还保持了与原有Table组件的完全兼容性。在实际项目中，这个组件可以有效提升表格数据的浏览效率，特别是在处理大量列数据时。

package/app/wujie-wk/wujie-vue2-child/src/components/EllTable/index.js

@@ -0,0 +1,213 @@
+import { Table } from "element-ui";
+
+/**
+ * @description 扩展Element UI Table组件，支持鼠标横向滚动和提示功能
+ * @extends {Table}
+ */
+export const tableMouseHorizontalWheel = {
+    extends: Table,
+    data() {
+      return {
+        tooltipContentList: [],
+        tooltipVisible: this.showTooltip,
+        scrollDirection: 'vertical', // 默认为垂直滚动
+        isScrollingToEdge: false, // 是否滚动到边缘
+      };
+    },
+    props: {
+      /** @prop {Boolean} [disableMouseHorizontalWheel=false] - 是否禁用鼠标横向滚动功能 */
+      disableMouseHorizontalWheel: {
+        type: Boolean,
+        default: false,
+      },
+      /** @prop {Boolean} [hiddenMouseWheel=false] - 是否隐藏鼠标滚动提示 */
+      hiddenMouseWheel: {
+        type: Boolean,
+        default: false,
+      },
+      /** @prop {Boolean} [showTooltip=false] - 是否显示提示信息 */
+      showTooltip: {
+        type: Boolean,
+        default: false,
+      },
+      /** @prop {String|Array} [tooltipContent=[]] - 提示信息内容 */
+      tooltipContent: {
+        type: [String, Array],
+        default: () => [],
+      },
+      /** @prop {Object} [tooltipPosition={ top: "10px", left: "10px" }] - 提示信息位置 */
+      tooltipPosition: {
+        type: Object,
+        default: () => ({
+          top: "10px",
+          left: "10px",
+        })
+      },
+    },
+    created() {
+      // 初始化提示信息列表
+      if (Array.isArray(this.tooltipContent)) {
+        this.tooltipContentList.push(...this.tooltipContent);
+      } else {
+        this.tooltipContentList.push(this.tooltipContent);
+      }
+    },
+  
+    mounted() {
+      const newHasScrollbarByMff = _.debounce(this.hasScrollbarByMff, 10);
+      // 监听this.$el元素变化
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "childList") {
+            newHasScrollbarByMff();
+          }
+        });
+      });
+      observer.observe(this.$el, {
+        childList: true,
+        subtree: true,
+      });
+  
+      if (!this.disableMouseHorizontalWheel) {
+        this.$el.addEventListener("wheel", this.handleWheel);
+        
+      }
+    },
+    beforeDestroy() {
+      if (!this.disableMouseHorizontalWheel) {
+        this.$el.removeEventListener("wheel", this.handleWheel);
+      }
+    },
+    methods: {
+      /**
+       * @description 处理鼠标滚轮事件，实现横向滚动
+       * @param {WheelEvent} event - 鼠标滚轮事件对象
+       */
+      handleWheel(event) {
+        const tableBody = this.$el.querySelector(".el-table__body-wrapper");
+        // tableBody.scrollHeight <= tableBody.clientHeight
+        if(tableBody.scrollHeight <= tableBody.clientHeight) {
+          event.preventDefault();
+          tableBody.scrollLeft += event.deltaY;
+          return;
+        }
+        if (this.scrollDirection === 'horizontal' || event.altKey) {
+          event.preventDefault();
+          tableBody.scrollLeft += event.deltaY;
+        }
+      },
+      /**
+       * @description 检测表格是否同时存在横向和纵向滚动条，并显示提示信息
+       */
+      /**
+       * @description 切换滚动方向
+       */
+      toggleScrollDirection() {
+        this.scrollDirection = this.scrollDirection === 'vertical' ? 'horizontal' : 'vertical';
+        this.tooltipContentList = this.tooltipContentList.filter(item => !item.includes('当前滚动方向'));
+        this.tooltipContentList.push(`当前滚动方向: ${this.scrollDirection === 'vertical' ? '垂直' : '水平'}`);
+        // 消息提醒
+        this.$message({
+          message: `当前表格滚动方向已切换为: ${this.scrollDirection ==='vertical'? '垂直' : '水平'}`,
+          type: 'info',
+          duration: 1000, 
+        })
+      },
+
+      /**
+       * @description 显示边缘视觉反馈
+       * @param {HTMLElement} element - 需要添加视觉反馈的元素
+       */
+      showEdgeFeedback(element) {
+        if (!this.isScrollingToEdge) {
+          this.isScrollingToEdge = true;
+          element.style.transition = 'background-color 0.3s';
+          element.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
+          
+          setTimeout(() => {
+            element.style.backgroundColor = '';
+            setTimeout(() => {
+              element.style.transition = '';
+              this.isScrollingToEdge = false;
+            }, 300);
+          }, 300);
+        }
+      },
+
+      hasScrollbarByMff() {
+        console.log(123);
+        
+        const tableBody = this.$el.querySelector(".el-table__body-wrapper");
+        // 是否有竖向滚动条
+        const verticalScrollbarWidth =
+          tableBody.scrollHeight - tableBody.clientHeight;
+        console.log(tableBody.scrollHeight, tableBody.clientHeight,'1231321321',verticalScrollbarWidth);
+        
+        // 是否有横向滚动条
+        const horizontalScrollbarHeight =
+          tableBody.scrollWidth - tableBody.clientWidth;
+          console.log(tableBody.scrollWidth, tableBody.clientWidth,'1231321321',horizontalScrollbarHeight);
+          
+      
+        
+        // 如果有横向滚动条和竖向滚动条 hiddenMouseWheel 为false时 tooltipVisible 为true
+        if (
+          verticalScrollbarWidth > 0 &&
+          horizontalScrollbarHeight > 0 &&
+          !this.hiddenMouseWheel
+        ) {
+          this.tooltipContentList.push("按住Alt键可以横向滚动表格");
+          this.tooltipVisible = true;
+          this.$el.addEventListener("dblclick", this.toggleScrollDirection);
+          this.tooltipContentList.push('双击表格任意位置可切换滚动方向')
+        }else{
+          this.tooltipContentList = this.tooltipContentList.filter(item =>!item.includes('按住Alt键可以横向滚动表格'));
+          this.tooltipContentList = this.tooltipContentList.filter(item =>!item.includes('双击表格任意位置可切换滚动方向'));
+          this.tooltipVisible = false; 
+          console.log(1231321);
+        }
+        
+      },
+    },
+    render(h) {
+      const table = this.$options.extends.render.call(this, h);
+      return (
+        <div
+          style={{
+            position: "relative",
+          }}
+        >
+          <el-tooltip
+            placement="top"
+            style={{
+              position: "absolute",
+              ...(this.tooltipPosition.top && { top: this.tooltipPosition.top }),
+              ...(this.tooltipPosition.left && { left: this.tooltipPosition.left }),
+              ...(this.tooltipPosition.bottom && { bottom: this.tooltipPosition.bottom }),
+              ...(this.tooltipPosition.right && { right: this.tooltipPosition.right }),
+              zIndex: 11,
+              display: this.tooltipVisible ? "block" : "none",
+            }}
+          >
+            <div slot="content">
+              {this.tooltipContentList.map((item, index) => {
+                return (
+                  <div key={index} style={{ marginBottom: "4px" }}>
+                    <span>{index + 1}.</span> {item}
+                  </div>
+                );
+              })}
+            </div>
+            <i
+              class="el-icon-info"
+              style={{
+                cursor: "pointer",
+                display: this.tooltipVisible ? "block" : "none",
+              }}
+            ></i>
+          </el-tooltip>
+          {table}
+        </div>
+      );
+    },
+  }