jianghu-ui 1.0.1

package/src/components/JhJsonEditor/JhJsonEditor.md

@@ -0,0 +1,54 @@
+# JhJsonEditor - JSON 可视化编辑器
+
+JhJsonEditor 封装 JSONEditor 库，支持 Tree、Code 等多种视图，适用于复杂配置、数据调试场景。
+
+## 功能特性
+
+- 🌲 **多模式切换**：支持 tree、code、form、text、view 等模式
+- 🪄 **格式化能力**：输入字符串会自动尝试 `JSON.parse` 并在编辑器中格式化展示
+- 📂 **展开控制**：`expandedOnStart` 搭配 tree/view 模式自动展开节点
+- 🚨 **错误提示**：实时捕获解析错误并通过 `has-error` 通知外部
+- 📏 **高度自定义**：`height` 属性可根据所在页面灵活设置
+
+## 基础用法
+
+```vue
+<template>
+  <jh-json-editor
+    v-model="jsonValue"
+    mode="tree"
+    :expanded-on-start="true"
+    height="600px"
+    @has-error="handleError"
+  />
+</template>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 双向绑定的 JSON 数据（对象或字符串） | string \| number \| object \| array | `{}` |
+| expandedOnStart | 是否在 tree/view 模式自动展开全部节点 | boolean | false |
+| mode | 默认模式 | string | `code` |
+| modes | 可切换的模式数组 | string[] | `[tree, code, form, text, view]` |
+| height | 编辑器容器高度 | string | `calc(100vh - 240px)` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| input | `v-model` 更新事件 | (value: any) |
+| has-error | JSON 解析错误状态 | (hasError: boolean) |
+
+### Slots
+
+组件无插槽。
+
+## 使用建议
+
+- 在页面中引入 JSONEditor 静态资源（JS/CSS），否则组件会提示未加载
+- 如果需要强制输出字符串，可在外部 watch `value` 并手动 `JSON.stringify`
+- 当编辑大数据时建议设置合适的高度并启用 `expandedOnStart=false` 以提升性能

package/src/components/JhJsonEditor/JhJsonEditor.stories.js

@@ -0,0 +1,157 @@
+import JhJsonEditor from './JhJsonEditor.vue';
+
+export default {
+  title: '基础组件/JhJsonEditor - JSON编辑器',
+  component: JhJsonEditor,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'object',
+      description: 'JSON 数据值，可以是字符串、对象或数组',
+    },
+    mode: {
+      control: 'select',
+      options: ['tree', 'code', 'form', 'text', 'view'],
+      description: '编辑器模式',
+    },
+    modes: {
+      control: 'object',
+      description: '可用的编辑器模式列表',
+    },
+    expandedOnStart: {
+      control: 'boolean',
+      description: '是否在启动时展开所有节点',
+    },
+    height: {
+      control: 'text',
+      description: '编辑器高度',
+    },
+    // 定义事件处理器
+    onInput: { action: 'input' },
+    onHasError: { action: 'has-error' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+
+基于 JSONEditor 的可视化 JSON 编辑器组件。
+
+## 使用前提
+
+需要在 HTML 中引入 JSONEditor 库：
+
+\`\`\`html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.0/dist/jsoneditor.min.css">
+<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.0/dist/jsoneditor.min.js"></script>
+\`\`\`
+
+## 功能特性
+
+- 支持多种编辑模式：树形、代码、表单、文本、预览
+- 实时验证 JSON 格式
+- 支持展开/折叠节点
+- 支持搜索和过滤
+- 自定义主题色
+
+## 事件
+
+- \`@input\` - 内容变化时触发，返回更新后的 JSON 值
+- \`@has-error\` - JSON 格式验证状态变化时触发，返回布尔值
+        `,
+      },
+    },
+  },
+};
+
+export const 基础示例 = {
+  args: {
+    value: {
+      name: 'JianghuJS',
+      version: '1.0.0',
+      features: ['Vue 2', 'Vuetify 2', 'Storybook'],
+      config: {
+        theme: 'light',
+        language: 'zh-CN',
+      },
+    },
+    mode: 'code',
+    modes: ['tree', 'code', 'form', 'text', 'view'],
+    expandedOnStart: false,
+    height: '400px',
+  },
+};
+
+export const 代码模式 = {
+  args: {
+    value: {
+      users: [
+        { id: 1, name: '张三', age: 25 },
+        { id: 2, name: '李四', age: 30 },
+      ],
+      total: 2,
+    },
+    mode: 'code',
+    modes: ['tree', 'code', 'form', 'text', 'view'],
+    expandedOnStart: false,
+    height: '400px',
+  },
+};
+
+export const 预览模式 = {
+  args: {
+    value: {
+      title: '只读预览模式',
+      description: '此模式下不可编辑',
+      data: {
+        readonly: true,
+      },
+    },
+    mode: 'view',
+    modes: ['view'],
+    expandedOnStart: true,
+    height: '400px',
+  },
+};
+
+export const 字符串值 = {
+  args: {
+    value: '{"message": "从字符串解析的 JSON", "timestamp": "2025-01-19"}',
+    mode: 'code',
+    modes: ['tree', 'code', 'form', 'text', 'view'],
+    expandedOnStart: true,
+    height: '400px',
+  },
+};
+
+export const 数组值 = {
+  args: {
+    value: [
+      { id: 1, name: '组件1', type: 'input' },
+      { id: 2, name: '组件2', type: 'select' },
+      { id: 3, name: '组件3', type: 'checkbox' },
+    ],
+    mode: 'code',
+    modes: ['tree', 'code', 'form', 'text', 'view'],
+    expandedOnStart: true,
+    height: '400px',
+  },
+};
+
+export const 初始展开 = {
+  args: {
+    value: {
+      level1: {
+        level2: {
+          level3: {
+            data: 'nested value',
+          },
+        },
+      },
+    },
+    mode: 'code',
+    modes: ['tree', 'code', 'form', 'text', 'view'],
+    expandedOnStart: true,
+    height: '400px',
+  },
+};

package/src/components/JhJsonEditor/JhJsonEditor.vue

@@ -0,0 +1,178 @@
+<template>
+  <v-app>
+    <v-container fluid class="pa-0">
+      <div>
+        <div class="jsoneditor-vue" :style="{height}"></div>
+      </div>
+    </v-container>
+  </v-app>
+</template>
+
+
+<script>
+export default {
+  name: 'JhJsonEditor',
+  props: {
+    // 编辑器绑定的 JSON 数据，可以是字符串或对象
+    value: {
+      type: [String, Number, Object, Array],
+      default: () => ({})
+    },
+    // 初始化时是否展开所有节点
+    expandedOnStart: {
+      type: Boolean,
+      default: false
+    },
+    // 默认模式 tree | code | form | text | view
+    mode: {
+      type: String,
+      default: "code"
+    },
+    // 可切换的模式集合
+    modes: {
+      type: Array,
+      default: function () {
+        return ["tree", "code", "form", "text", "view"];
+      }
+    },
+    // 编辑器容器高度
+    height: {
+      type: String,
+      default: 'calc(100vh - 240px)'
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      async handler(val) {
+        if (!this.internalChange) {
+          await this.setEditor();
+
+          this.error = false;
+          this.expandAll();
+        }
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      error: false,
+      internalChange: false,
+      expandedModes: ["tree", "view", "form"],
+    };
+  },
+  computed: {
+    valueType() {
+      return typeof this.value;
+    },
+    formatValue: {
+      get() {
+        // 如果值是字符串，并且值不为空，则返回JSON.parse(this.value)
+        if (this.valueType === "string" && this.value) {
+          try {
+            return JSON.parse(this.value);
+          } catch (e) {
+            return this.value;
+          }
+        }
+        return this.value;
+      },
+      set(val) {
+        if (this.valueType === "string" || !this.value) {
+          this.value = JSON.stringify(val);
+        } else {
+          this.value = val;
+        }
+      }
+    },
+  },
+  mounted() {
+    this.$emit("has-error", false);
+    // 延迟初始化，等待 JSONEditor 库加载
+    if (window.JSONEditor) {
+      this.init();
+    } else {
+      console.warn('JSONEditor is not loaded. Please include JSONEditor library.');
+    }
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.destroy();
+    }
+  },
+  methods: {
+    init() {
+      let _this = this;
+
+      let options = {
+        mode: this.mode,
+        modes: this.modes,
+        themeColor: "#4caf50",
+        onChange() {
+          try {
+            let json = _this.editor.get();
+            _this.formatValue = json;
+            _this.error = false;
+            _this.$emit("has-error", false);
+            _this.internalChange = true;
+            _this.$emit("input", _this.value);
+            _this.$nextTick(function () {
+              _this.internalChange = false;
+            });
+          } catch (e) {
+            _this.error = true;
+            _this.$emit("has-error", true);
+          }
+        },
+        onModeChange() {
+          _this.expandAll();
+        }
+      };
+
+      if (window.JSONEditor) {
+        this.editor = new window.JSONEditor(
+          _this.$el.querySelector(".jsoneditor-vue"),
+          options,
+          _this.formatValue
+        );
+      }
+    },
+    expandAll() {
+      if (
+        this.expandedOnStart &&
+        this.editor &&
+        this.expandedModes.includes(this.editor.getMode())
+      ) {
+        this.editor.expandAll();
+      }
+    },
+
+    async setEditor() {
+      if (this.editor) this.editor.set(this.formatValue);
+    }
+  }
+};
+</script>
+
+<style scoped>
+:deep(.jsoneditor-menu a.jsoneditor-poweredBy) {
+  display: none !important;
+}
+:deep(.jsoneditor-menu) {
+  background-color: #4caf50 !important;
+  border-bottom: 1px solid #4caf50 !important;
+}
+:deep(.jsoneditor) {
+  border: thin solid #4caf50 !important;
+}
+:deep(.jsoneditor-modal .pico-modal-header) {
+  background: #4caf50 !important;
+}
+:deep(.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc),
+:deep(.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc) {
+  background: #4caf50 !important;
+  border-color: #4caf50 !important;
+}
+</style>