jianghu-ui 1.0.1

package/src/components/JhWaterMark/JhWaterMark.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="jh-watermark" :style="containerStyle">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JhWaterMark',
+
+  props: {
+    // 水印文字内容（支持字符串数组实现多行文本）
+    content: {
+      type: [String, Array],
+      default: '',
+    },
+
+    // 图片源，建议导出 2 倍或 3 倍图，优先级高于文字
+    image: {
+      type: String,
+      default: '',
+    },
+
+    // 水印整体宽度
+    width: {
+      type: Number,
+      default: 120,
+    },
+
+    // 水印整体高度
+    height: {
+      type: Number,
+      default: 64,
+    },
+
+    // 水印旋转角度
+    rotate: {
+      type: Number,
+      default: -22,
+    },
+
+    // 水印之间的水平间距
+    gapX: {
+      type: Number,
+      default: 212,
+    },
+
+    // 水印之间的垂直间距
+    gapY: {
+      type: Number,
+      default: 222,
+    },
+
+    // 水印在 canvas 画布上绘制的水平偏移量，正常情况下，水印绘制在中间位置，即 offsetX = gapX / 2
+    offsetX: {
+      type: Number,
+      default: undefined,
+    },
+
+    // 水印在 canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置，即 offsetY = gapY / 2
+    offsetY: {
+      type: Number,
+      default: undefined,
+    },
+
+    // 字体配置
+    font: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    // 水印层的 z-index
+    zIndex: {
+      type: Number,
+      default: 9,
+    },
+
+    // 追加的水印元素的根节点
+    getContainer: {
+      type: Function,
+      default: undefined,
+    },
+  },
+
+  data() {
+    return {
+      watermarkUrl: '',
+      observer: null,
+    };
+  },
+
+  computed: {
+    containerStyle() {
+      return {
+        position: 'relative',
+      };
+    },
+
+    // 合并字体配置
+    mergedFont() {
+      return {
+        color: 'rgba(0, 0, 0, 0.15)',
+        fontSize: 16,
+        fontWeight: 'normal',
+        fontFamily: 'sans-serif',
+        fontStyle: 'normal',
+        textAlign: 'center',
+        ...this.font,
+      };
+    },
+
+    // 计算实际偏移量
+    actualOffsetX() {
+      return this.offsetX !== undefined ? this.offsetX : this.gapX / 2;
+    },
+
+    actualOffsetY() {
+      return this.offsetY !== undefined ? this.offsetY : this.gapY / 2;
+    },
+  },
+
+  watch: {
+    content: {
+      handler() {
+        this.renderWatermark();
+      },
+      deep: true,
+    },
+    image() {
+      this.renderWatermark();
+    },
+    width() {
+      this.renderWatermark();
+    },
+    height() {
+      this.renderWatermark();
+    },
+    rotate() {
+      this.renderWatermark();
+    },
+    gapX() {
+      this.renderWatermark();
+    },
+    gapY() {
+      this.renderWatermark();
+    },
+    offsetX() {
+      this.renderWatermark();
+    },
+    offsetY() {
+      this.renderWatermark();
+    },
+    font: {
+      handler() {
+        this.renderWatermark();
+      },
+      deep: true,
+    },
+  },
+
+  mounted() {
+    this.renderWatermark();
+    this.observeWatermark();
+  },
+
+  beforeDestroy() {
+    this.destroyWatermark();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+
+  methods: {
+    // 生成水印
+    async renderWatermark() {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      
+      const canvasWidth = (this.width + this.gapX) * 2;
+      const canvasHeight = (this.height + this.gapY) * 2;
+      
+      canvas.width = canvasWidth;
+      canvas.height = canvasHeight;
+
+      if (this.image) {
+        // 使用图片水印
+        await this.drawImageWatermark(ctx, canvasWidth, canvasHeight);
+      } else if (this.content) {
+        // 使用文字水印
+        this.drawTextWatermark(ctx, canvasWidth, canvasHeight);
+      }
+
+      this.watermarkUrl = canvas.toDataURL();
+      this.updateWatermarkElement();
+    },
+
+    // 绘制图片水印
+    drawImageWatermark(ctx, canvasWidth, canvasHeight) {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.referrerPolicy = 'no-referrer';
+        
+        img.onload = () => {
+          ctx.save();
+          
+          // 计算中心点
+          const centerX = canvasWidth / 2;
+          const centerY = canvasHeight / 2;
+          
+          // 移动到中心点并旋转
+          ctx.translate(centerX, centerY);
+          ctx.rotate((Math.PI / 180) * this.rotate);
+          
+          // 绘制图片（以中心点为基准）
+          ctx.drawImage(
+            img,
+            -this.width / 2,
+            -this.height / 2,
+            this.width,
+            this.height
+          );
+          
+          ctx.restore();
+          resolve();
+        };
+        
+        img.onerror = () => {
+          console.error('Watermark image load failed');
+          reject();
+        };
+        
+        img.src = this.image;
+      });
+    },
+
+    // 绘制文字水印
+    drawTextWatermark(ctx, canvasWidth, canvasHeight) {
+      const { color, fontSize, fontWeight, fontFamily, fontStyle, textAlign } = this.mergedFont;
+      
+      ctx.save();
+      
+      // 设置字体样式
+      ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+      ctx.fillStyle = color;
+      ctx.textAlign = textAlign;
+      ctx.textBaseline = 'middle';
+      
+      // 计算中心点
+      const centerX = canvasWidth / 2;
+      const centerY = canvasHeight / 2;
+      
+      // 移动到中心点并旋转
+      ctx.translate(centerX, centerY);
+      ctx.rotate((Math.PI / 180) * this.rotate);
+      
+      // 处理多行文本
+      const contents = Array.isArray(this.content) ? this.content : [this.content];
+      const lineHeight = fontSize * 1.5;
+      const totalHeight = contents.length * lineHeight;
+      const startY = -totalHeight / 2 + lineHeight / 2;
+      
+      // 绘制每一行文字
+      contents.forEach((text, index) => {
+        const y = startY + index * lineHeight;
+        ctx.fillText(text, 0, y);
+      });
+      
+      ctx.restore();
+    },
+
+    // 更新水印元素
+    updateWatermarkElement() {
+      this.destroyWatermark();
+      
+      const container = this.getContainer ? this.getContainer() : this.$el;
+      if (!container) return;
+
+      const watermarkDiv = document.createElement('div');
+      watermarkDiv.className = 'jh-watermark-layer';
+      watermarkDiv.style.cssText = `
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        pointer-events: none;
+        z-index: ${this.zIndex};
+        background-image: url(${this.watermarkUrl});
+        background-repeat: repeat;
+        background-position: ${this.actualOffsetX}px ${this.actualOffsetY}px;
+        overflow: hidden;
+      `;
+      
+      watermarkDiv.setAttribute('data-watermark', 'true');
+      container.appendChild(watermarkDiv);
+      this.watermarkElement = watermarkDiv;
+    },
+
+    // 销毁水印元素
+    destroyWatermark() {
+      if (this.watermarkElement && this.watermarkElement.parentNode) {
+        this.watermarkElement.parentNode.removeChild(this.watermarkElement);
+        this.watermarkElement = null;
+      }
+    },
+
+    // 监听水印元素变化，防止被删除或修改
+    observeWatermark() {
+      if (!window.MutationObserver) return;
+
+      this.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'childList') {
+            const removed = Array.from(mutation.removedNodes).some(
+              (node) => node === this.watermarkElement
+            );
+            if (removed) {
+              this.updateWatermarkElement();
+            }
+          } else if (mutation.type === 'attributes') {
+            if (mutation.target === this.watermarkElement) {
+              this.updateWatermarkElement();
+            }
+          }
+        });
+      });
+
+      this.observer.observe(this.$el, {
+        childList: true,
+        attributes: true,
+        subtree: true,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.jh-watermark {
+  position: relative;
+  min-height: 100%;
+}
+
+.jh-watermark-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+}
+</style>

package/src/components/README.md

@@ -0,0 +1,52 @@
+# JianghuJS UI 组件
+
+这里包含所有的 UI 组件。每个组件都有自己的文件夹，包含：
+- `.vue` 文件：组件实现
+- `.stories.js` 文件：Storybook 故事
+- `.md` 文件：组件文档（可选）
+
+## 组件列表
+
+### 布局组件
+- **JhLayout**: 页面布局组件 - 基于 Ant Design Pro 的 ProLayout，提供侧边、顶部、混合三种布局模式
+- **JhPageContainer**: 页面容器组件 - 提供统一的页面头部和内容区域
+- **JhMenu**: 菜单组件 - 支持多级菜单和响应式设计
+- **JhCard**: 高级卡片组件 - 参考 Ant Design ProCard，支持标题、分栏、栅格、标签页等多种布局功能
+
+### 基础组件
+- **JhButton**: 按钮组件
+
+### 数据展示
+- **JhTable**: 表格组件
+- **JhEditableTable**: 可编辑表格组件
+- **JhTableAttachment**: 附件表格组件
+- **JhDescriptions**: 描述列表组件 - 基于 Ant Design ProDescriptions，支持水平/垂直布局、可编辑、多种 ValueType
+- **JhList**: 列表组件
+- **JhStatisticCard**: 统计卡片组件
+- **JhCheckCard**: 多选卡片组件
+- **JhWaterMark**: 水印组件
+
+### 表单组件
+- **JhForm**: 表单组件
+- **JhFormFields**: 表单字段集组件 - 基于 Ant Design ProComponents FieldSet，支持字段依赖和动态联动
+- **JhFormList**: 表单列表组件
+- **JhQueryFilter**: 查询过滤组件
+- **JhStepsForm**: 分步表单组件
+- **JhFileInput**: 文件上传组件
+- **JhDateRangePicker**: 日期范围选择器
+- **JhTreeSelect**: 树形选择器
+- **JhJsonEditor**: JSON 编辑器
+- **JhMarkdownEditor**: Markdown 编辑器
+
+### 反馈组件
+- **JhModal**: 模态框组件
+- **JhModalForm**: 模态框表单组件
+- **JhDrawer**: 抽屉组件
+- **JhDrawerForm**: 抽屉表单组件
+- **JhToast**: 提示组件
+- **JhMask**: 遮罩组件
+- **JhConfirmDialog**: 确认对话框组件
+
+### 其他组件
+- **JhDraggable**: 拖拽组件
+- **JhScene**: 场景组件

package/src/index.js

@@ -0,0 +1,135 @@
+// JianghuJS UI Component Library Entry Point
+
+// Import global styles
+import './style/storybook.css';
+import './style/globalCSSVuetifyV4.css';
+import './style/globalCSSJHV4.css';
+
+// Basic Components
+import JhMenu from './components/JhMenu/JhMenu.vue';
+import JhScene from './components/JhScene/JhScene.vue';
+import JhDateRangePicker from './components/JhDateRangePicker/JhDateRangePicker.vue';
+import JhQueryFilter from './components/JhQueryFilter/JhQueryFilter.vue';
+import JhTable from './components/JhTable/JhTable.vue';
+import JhTreeSelect from './components/JhTreeSelect/JhTreeSelect.vue';
+import JhAddressSelect from './components/JhAddressSelect/JhAddressSelect.vue';
+
+// Layout Components
+import JhPageContainer from './components/JhPageContainer/JhPageContainer.vue';
+import JhLayout from './components/JhLayout/JhLayout.vue';
+import JhCard from './components/JhCard/JhCard.vue';
+import JhStatisticCard from './components/JhStatisticCard/JhStatisticCard.vue';
+import JhWaterMark from './components/JhWaterMark/JhWaterMark.vue';
+
+// Feedback Components
+import JhMask from './components/JhMask/JhMask.vue';
+import JhToast from './components/JhToast/JhToast.vue';
+import JhConfirmDialog from './components/JhConfirmDialog/JhConfirmDialog.vue';
+
+// Pro Components
+import JhForm from './components/JhForm/JhForm.vue';
+import JhModalForm from './components/JhModalForm/JhModalForm.vue';
+import JhDrawerForm from './components/JhDrawerForm/JhDrawerForm.vue';
+import JhModal from './components/JhModal/JhModal.vue';
+import JhDrawer from './components/JhDrawer/JhDrawer.vue';
+import JhStepsForm from './components/JhStepsForm/JhStepsForm.vue';
+import JhFormList from './components/JhFormList/JhFormList.vue';
+
+// Advanced Components
+import JhFileInput from './components/JhFileInput/JhFileInput.vue';
+import JhJsonEditor from './components/JhJsonEditor/JhJsonEditor.vue';
+import JhMarkdownEditor from './components/JhMarkdownEditor/JhMarkdownEditor.vue';
+import JhDraggable from './components/JhDraggable/JhDraggable.vue';
+import JhTableAttachment from './components/JhTableAttachment/JhTableAttachment.vue';
+import JhEditableTable from './components/JhEditableTable/JhEditableTable.vue';
+
+const components = {
+  JhMenu,
+  JhScene,
+  JhDateRangePicker,
+  JhQueryFilter,
+  JhTable,
+  JhTreeSelect,
+  JhAddressSelect,
+  // Layout Components
+  JhPageContainer,
+  JhLayout,
+  JhCard,
+  JhStatisticCard,
+  JhWaterMark,
+
+  // Pro Components
+  JhForm,
+  JhModalForm,
+  JhDrawerForm,
+  JhModal,
+  JhDrawer,
+  JhStepsForm,
+  JhFormList,
+  // Advanced Components
+  JhFileInput,
+  JhJsonEditor,
+  JhMarkdownEditor,
+  JhDraggable,
+  JhTableAttachment,
+  JhEditableTable,
+
+  // Feedback Components
+  JhMask,
+  JhToast,
+  JhConfirmDialog,
+};
+
+// Vue plugin install function
+const install = (Vue) => {
+  if (install.installed) return;
+  install.installed = true;
+
+  Object.keys(components).forEach((key) => {
+    Vue.component(key, components[key]);
+  });
+};
+
+// Auto-install when Vue is found (browser)
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  install,
+  ...components,
+};
+
+export {
+  // Basic Components
+  JhMenu,
+  JhScene,
+  JhDateRangePicker,
+  JhQueryFilter,
+  JhTable,
+  JhTreeSelect,
+  // Layout Components
+  JhPageContainer,
+  JhCard,
+
+  // Pro Components
+  JhForm,
+  JhModalForm,
+  JhDrawerForm,
+  JhModal,
+  JhDrawer,
+  JhStepsForm,
+  JhFormList,
+  // Advanced Components
+  JhFileInput,
+  JhJsonEditor,
+  JhMarkdownEditor,
+  JhDraggable,
+  JhTableAttachment,
+  JhEditableTable,
+
+  // Feedback Components
+  JhMask,
+  JhToast,
+  JhConfirmDialog,
+};