jianghu-ui 1.0.1

package/src/components/JhMarkdownEditor/JhMarkdownEditor.stories.js

@@ -0,0 +1,191 @@
+import JhMarkdownEditor from './JhMarkdownEditor.vue';
+
+export default {
+  title: '基础组件/JhMarkdownEditor - Markdown编辑器',
+  component: JhMarkdownEditor,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'Markdown 内容',
+    },
+    placeholder: {
+      control: 'text',
+      description: '占位符文本',
+    },
+    height: {
+      control: 'text',
+      description: '编辑器高度',
+    },
+    width: {
+      control: 'number',
+      description: '编辑器宽度百分比',
+    },
+    editorPath: {
+      control: 'text',
+      description: 'Editor.md 库文件路径',
+    },
+    readonly: {
+      control: 'boolean',
+      description: '是否只读模式',
+    },
+    // 定义事件处理器
+    onInput: { action: 'input' },
+    onChange: { action: 'change' },
+    onContentForSeo: { action: 'content-for-seo' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+
+基于 Editor.md 的 Markdown 编辑器组件。
+
+## 使用前提
+
+需要在 HTML 中引入 Editor.md 库：
+
+\`\`\`html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/css/editormd.min.css">
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/editormd.min.js"></script>
+\`\`\`
+
+## 功能特性
+
+- 支持实时预览
+- 支持代码高亮
+- 支持表格、图片、链接等
+- 支持撤销/重做
+- 支持全屏编辑
+- 支持只读模式
+
+## 事件
+
+- \`@input\` - 内容变化时触发，返回 Markdown 文本
+- \`@change\` - 内容变化时触发，返回 Markdown 文本
+- \`@content-for-seo\` - 内容变化时触发，返回预览 HTML（用于 SEO）
+        `,
+      },
+    },
+  },
+};
+
+const sampleMarkdown = `# Markdown 编辑器示例
+
+## 功能特性
+
+这是一个基于 **Editor.md** 的 Markdown 编辑器组件。
+
+### 支持的功能
+
+- **粗体文本**
+- *斜体文本*
+- ~~删除线~~
+- \`行内代码\`
+
+### 代码块
+
+\`\`\`javascript
+function hello() {
+  console.log('Hello, JianghuJS!');
+}
+\`\`\`
+
+### 列表
+
+1. 有序列表项 1
+2. 有序列表项 2
+3. 有序列表项 3
+
+- 无序列表项
+- 无序列表项
+- 无序列表项
+
+### 引用
+
+> 这是一段引用文本
+> 可以跨多行
+
+### 链接和图片
+
+[JianghuJS](https://github.com/jianghujs)
+
+### 表格
+
+| 列1 | 列2 | 列3 |
+|-----|-----|-----|
+| 数据1 | 数据2 | 数据3 |
+| 数据4 | 数据5 | 数据6 |
+`;
+
+export const 基础示例 = {
+  args: {
+    value: sampleMarkdown,
+    placeholder: '请输入 Markdown 内容...',
+    height: '500px',
+    width: 100,
+    editorPath: '/public/plugins/editor.md/lib/',
+    readonly: false,
+  },
+};
+
+export const 空内容 = {
+  args: {
+    value: '',
+    placeholder: '开始编写你的文档...',
+    height: '400px',
+    width: 100,
+    editorPath: '/public/plugins/editor.md/lib/',
+    readonly: false,
+  },
+};
+
+export const 只读模式 = {
+  args: {
+    value: `# 只读模式示例
+
+这是一个只读的 Markdown 文档。
+
+你可以查看内容，但**无法编辑**。
+
+\`\`\`javascript
+// 代码示例
+const readonly = true;
+\`\`\`
+`,
+    placeholder: '',
+    height: '400px',
+    width: 100,
+    editorPath: '/public/plugins/editor.md/lib/',
+    readonly: true,
+  },
+};
+
+export const 简化工具栏 = {
+  args: {
+    value: '# 简化工具栏\n\n这个编辑器使用了简化的工具栏。',
+    placeholder: '请输入内容...',
+    height: '400px',
+    width: 100,
+    editorPath: '/public/plugins/editor.md/lib/',
+    readonly: false,
+    toolbarIcons: [
+      "undo", "redo", "|",
+      "bold", "italic", "|",
+      "h1", "h2", "h3", "|",
+      "link", "image"
+    ],
+  },
+};
+
+export const 自定义高度 = {
+  args: {
+    value: '# 自定义高度\n\n这个编辑器的高度是 300px。',
+    placeholder: '请输入内容...',
+    height: '300px',
+    width: 100,
+    editorPath: '/public/plugins/editor.md/lib/',
+    readonly: false,
+  },
+};

package/src/components/JhMarkdownEditor/JhMarkdownEditor.vue

@@ -0,0 +1,188 @@
+<template>
+  <v-app>
+    <v-container fluid class="pa-0">
+      <div>
+        <div :style="`overflow-y: auto; height: ${height}`">
+          <div :id="editorId">
+            <textarea style="display:none;">{{ value }}</textarea>
+          </div>
+        </div>
+      </div>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: 'JhMarkdownEditor',
+  props: {
+    // 双向绑定的 Markdown 文本内容
+    value: {
+      type: String,
+      default: ""
+    },
+    // 编辑器空状态提示
+    placeholder: {
+      type: String,
+      default: "请输入内容..."
+    },
+    // 编辑器容器高度
+    height: {
+      type: String,
+      default: 'calc(100vh - 400px)'
+    },
+    // 编辑器容器宽度百分比
+    width: {
+      type: Number,
+      default: 100
+    },
+    // Editor.md 依赖库的静态资源路径
+    editorPath: {
+      type: String,
+      default: '/public/plugins/editor.md/lib/'
+    },
+    // 自定义工具栏按钮列表
+    toolbarIcons: {
+      type: Array,
+      default: () => [
+        "undo", "redo", "|",
+        "watch", "preview", "|",
+        "h1", "h2", "h3", "h4", "h5",
+        "bold", "del", "italic", "quote", "mark",
+        "list-ul", "list-ol", "hr", "link",
+        "|", "image", "code", "table"
+      ]
+    },
+    // 是否只读模式（禁用编辑）
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      isMDChange: false,
+      editorId: `markdown-editor-${Math.random().toString(36).substr(2, 9)}`
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initEditorMd();
+    });
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      // 清理编辑器实例
+      this.editor = null;
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (this.editor && !this.isMDChange) {
+        this.editor.setMarkdown(newVal);
+      }
+      this.isMDChange = false;
+    }
+  },
+  methods: {
+    initEditorMd() {
+      const that = this;
+      const editorElement = document.getElementById(this.editorId);
+
+      if (!editorElement) {
+        console.warn('Editor container not found');
+        return;
+      }
+
+      if (!window.editormd) {
+        console.warn('Editor.md is not loaded. Please include Editor.md library.');
+        return;
+      }
+
+      editorElement.innerHTML = `<textarea style="display:none;">${this.value || ""}</textarea>`;
+
+      that.editor = window.editormd(this.editorId, {
+        watch: !this.readonly,
+        saveHTMLToTextarea: true,
+        path: this.editorPath,
+        toolbarIcons: this.toolbarIcons,
+        placeholder: this.placeholder,
+        readOnly: this.readonly,
+        onchange: function () {
+          that.handleMDChange();
+        },
+      });
+    },
+
+    handleMDChange() {
+      this.isMDChange = true;
+      const content = this.editor.getMarkdown();
+      this.$emit('input', content);
+      this.$emit('change', content);
+
+      // 获取预览 HTML
+      if (this.editor.getPreviewedHTML) {
+        const contentForSeo = this.editor.getPreviewedHTML();
+        this.$emit('content-for-seo', contentForSeo);
+      }
+    },
+
+    // 公开方法
+    getMarkdown() {
+      return this.editor ? this.editor.getMarkdown() : this.value;
+    },
+
+    setMarkdown(content) {
+      if (this.editor) {
+        this.editor.setMarkdown(content);
+      }
+    },
+
+    insertValue(text) {
+      if (this.editor) {
+        this.editor.insertValue(text);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+:deep(.editormd),
+:deep(.CodeMirror-gutters),
+:deep(.editormd-toolbar),
+:deep(.editormd .CodeMirror),
+:deep(.editormd-menu > li.divider),
+:deep(.editormd-menu > li > a:hover),
+:deep(.editormd-menu > li > a.active) {
+  border-color: #eff2f5 !important;
+}
+
+:deep(.CodeMirror-gutter) {
+  background-color: #fff;
+}
+
+:deep(.CodeMirror-scroll) {
+  overflow-x: hidden !important;
+}
+
+:deep(.editormd-dialog-close) {
+  color: #3F4254 !important;
+}
+
+:deep(.editormd-preview-container ol.linenums li),
+:deep(.editormd-html-preview ol.linenums li) {
+  list-style-type: none;
+}
+
+:deep(.editormd-preview-container ol.linenums),
+:deep(.editormd-html-preview ol.linenums) {
+  color: #999;
+  padding-left: 0;
+}
+
+:deep(.editormd) {
+  margin-bottom: 0;
+}
+</style>

package/src/components/JhMask/JhMask.md

@@ -0,0 +1,62 @@
+# JhMask - 遮罩层组件
+
+JhMask 基于 Vuetify `v-overlay` 封装，可用于页面 loading、全屏提示或阻断操作等场景。
+
+## 功能特性
+
+- 🌗 **背景可配**：颜色、透明度、zIndex 均可通过 props 设置
+- ⏱️ **自动超时**：`timeout` 到期自动关闭并触发事件
+- 🔁 **loading 集成**：内置进度环，也可通过插槽放置自定义内容
+- 🖱️ **点击交互**：`closeOnClick` 允许点击遮罩直接关闭
+- 🔒 **受控显示**：`v-model` 与父组件保持同步
+
+## 基础用法
+
+```vue
+<template>
+  <jh-mask
+    v-model="maskVisible"
+    :show-loading="true"
+    loading-color="success"
+    :timeout="10000"
+    @timeout="handleTimeout"
+  />
+</template>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | `v-model`，控制是否显示 | boolean | false |
+| color | 背景色 | string | `#e3e3e3` |
+| opacity | 透明度 0-1 | number \| string | 0.8 |
+| zIndex | 遮罩层层级 | number \| string | 300 |
+| showLoading | 是否显示内置 loading | boolean | false |
+| loadingSize | loading 直径 | number \| string | 64 |
+| loadingWidth | loading 线宽 | number \| string | 7 |
+| loadingColor | loading 颜色 | string | `primary` |
+| closeOnClick | 点击遮罩是否关闭 | boolean | false |
+| timeout | 自动关闭时间（ms），0 表示不自动关闭 | number | 0 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| input | `v-model` 更新事件 | (visible: boolean) |
+| click | 在 `closeOnClick`=true 且被点击时触发 | - |
+| timeout | 达到超时时间自动触发 | - |
+
+### Slots
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义遮罩内容，可放置提示文案或自定义 loading |
+
+## 使用建议
+
+- 需要阻断用户操作时建议 `closeOnClick=false` 并增加提示文案
+- 当与异步任务绑定时，可在任务完成后手动将 `value` 设为 false 以取消遮罩
+- 通过插槽配合 `JhToast` 等组件可以快速实现“处理中”提示

package/src/components/JhMask/JhMask.stories.js

@@ -0,0 +1,270 @@
+import JhMask from './JhMask.vue';
+
+export default {
+  title: '基础组件/JhMask - 遮罩层',
+  component: JhMask,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'boolean',
+      description: '是否显示遮罩层',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    color: {
+      control: 'color',
+      description: '背景颜色',
+      table: {
+        defaultValue: { summary: '#e3e3e3' },
+      },
+    },
+    opacity: {
+      control: { type: 'range', min: 0, max: 1, step: 0.1 },
+      description: '透明度 (0-1)',
+      table: {
+        defaultValue: { summary: '0.8' },
+      },
+    },
+    zIndex: {
+      control: 'number',
+      description: 'z-index 层级',
+      table: {
+        defaultValue: { summary: '300' },
+      },
+    },
+    showLoading: {
+      control: 'boolean',
+      description: '是否显示 loading 动画',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    loadingSize: {
+      control: 'number',
+      description: 'loading 动画大小',
+      table: {
+        defaultValue: { summary: '64' },
+      },
+    },
+    loadingWidth: {
+      control: 'number',
+      description: 'loading 动画线条宽度',
+      table: {
+        defaultValue: { summary: '7' },
+      },
+    },
+    loadingColor: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'white'],
+      description: 'loading 动画颜色',
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    closeOnClick: {
+      control: 'boolean',
+      description: '点击遮罩是否关闭',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    timeout: {
+      control: 'number',
+      description: '自动关闭时间(毫秒), 0表示不自动关闭',
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+  },
+};
+
+// 基础示例
+export const 基础示例 = {
+  args: {
+    value: true,
+  },
+  render: (args) => ({
+    components: { JhMask },
+    data() {
+      return {
+        isVisible: args.value,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="isVisible = !isVisible">切换遮罩</v-btn>
+        <jh-mask
+          v-model="isVisible"
+          v-bind="$props"
+        />
+      </div>
+    `,
+    props: Object.keys(args),
+  }),
+};
+
+// 加载动画
+export const 加载动画 = {
+  args: {
+    value: true,
+    showLoading: true,
+  },
+  render: (args) => ({
+    components: { JhMask },
+    data() {
+      return {
+        isVisible: args.value,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="isVisible = !isVisible">切换遮罩</v-btn>
+        <jh-mask
+          v-model="isVisible"
+          v-bind="$props"
+        />
+      </div>
+    `,
+    props: Object.keys(args),
+  }),
+};
+
+// 点击关闭
+export const 点击关闭 = {
+  args: {
+    value: true,
+    closeOnClick: true,
+    showLoading: true,
+  },
+  render: (args) => ({
+    components: { JhMask },
+    data() {
+      return {
+        isVisible: args.value,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="isVisible = !isVisible">切换遮罩</v-btn>
+        <p class="mt-2 text-caption">点击遮罩可关闭</p>
+        <jh-mask
+          v-model="isVisible"
+          v-bind="$props"
+        />
+      </div>
+    `,
+    props: Object.keys(args),
+  }),
+};
+
+// 自动关闭
+export const 自动关闭 = {
+  args: {
+    value: true,
+    showLoading: true,
+    timeout: 3000,
+  },
+  render: (args) => ({
+    components: { JhMask },
+    data() {
+      return {
+        isVisible: args.value,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="isVisible = true">显示遮罩(3秒后自动关闭)</v-btn>
+        <jh-mask
+          v-model="isVisible"
+          v-bind="$props"
+          @timeout="handleTimeout"
+        />
+      </div>
+    `,
+    methods: {
+      handleTimeout() {
+        console.log('遮罩已自动关闭');
+      },
+    },
+    props: Object.keys(args),
+  }),
+};
+
+// 自定义内容
+export const 自定义内容 = {
+  args: {
+    value: true,
+  },
+  render: (args) => ({
+    components: { JhMask },
+    data() {
+      return {
+        isVisible: args.value,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="isVisible = !isVisible">切换遮罩</v-btn>
+        <jh-mask
+          v-model="isVisible"
+          v-bind="$props"
+        >
+          <v-card width="300">
+            <v-card-title>自定义内容</v-card-title>
+            <v-card-text>这是自定义的遮罩内容</v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="primary" @click="isVisible = false">关闭</v-btn>
+            </v-card-actions>
+          </v-card>
+        </jh-mask>
+      </div>
+    `,
+    props: Object.keys(args),
+  }),
+};
+
+// 不同颜色
+export const 不同颜色 = {
+  render: () => ({
+    components: { JhMask },
+    data() {
+      return {
+        mask1: false,
+        mask2: false,
+        mask3: false,
+      };
+    },
+    template: `
+      <div>
+        <v-btn class="mr-2" @click="mask1 = !mask1">白色遮罩</v-btn>
+        <v-btn class="mr-2" @click="mask2 = !mask2">黑色遮罩</v-btn>
+        <v-btn @click="mask3 = !mask3">蓝色遮罩</v-btn>
+
+        <jh-mask
+          v-model="mask1"
+          color="white"
+          :opacity="0.9"
+          show-loading
+        />
+
+        <jh-mask
+          v-model="mask2"
+          color="black"
+          :opacity="0.7"
+          show-loading
+          loading-color="white"
+        />
+
+        <jh-mask
+          v-model="mask3"
+          color="primary"
+          :opacity="0.5"
+          show-loading
+          loading-color="white"
+        />
+      </div>
+    `,
+  }),
+};