vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v2/JsonPretty/index.vue

@@ -0,0 +1,531 @@
+<template>
+  <view
+    :class="{
+      'json-pretty-tree': true,
+      'is-virtual': virtual,
+      dark: theme === 'dark',
+    }"
+    :style="
+      showLineNumber
+        ? {
+            paddingLeft: `${
+              Number(originFlatData.length.toString().length) * 12
+            }px`,
+            ...style,
+          }
+        : style
+    "
+  >
+    <VirtualListPro
+      v-if="autoVirtual"
+      :height="state.height"
+      :pageSize="pageSize"
+      :dataSource="flatData"
+      scroll-with-animation
+      showBackTop
+    >
+      <template v-slot="{ list, start }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :index="start + index"
+          :key="start + index"
+        >
+          <TreeNode
+            :data="data"
+            :rootPath="rootPath"
+            :indent="indent"
+            :node="item"
+            :collapsed="!!state.hiddenPaths[item.path]"
+            :theme="theme"
+            :showDoubleQuotes="showDoubleQuotes"
+            :showLength="showLength"
+            :checked="selectedPaths.includes(item.path)"
+            :selectableType="selectableType"
+            :showLine="showLine"
+            :showLineNumber="showLineNumber"
+            :showSelectController="showSelectController"
+            :selectOnClickNode="selectOnClickNode"
+            :nodeSelectable="nodeSelectable"
+            :highlightSelectedNode="highlightSelectedNode"
+            :editable="editable"
+            :editableTrigger="editableTrigger"
+            :showIcon="showIcon"
+            :showKeyValueSpace="showKeyValueSpace"
+            :showNodeActions="showNodeActions"
+            @nodeClick="handleNodeClick"
+            @nodeMouseover="handleNodeMouseover"
+            @bracketsClick="handleBracketsClick"
+            @iconClick="handleIconClick"
+            @selectedChange="handleSelectedChange"
+            @valueChange="handleValueChange"
+            :style="
+              itemHeight && itemHeight !== 20
+                ? { lineHeight: `${itemHeight}px` }
+                : {}
+            "
+          />
+        </AutoSize>
+      </template>
+    </VirtualListPro>
+    <template v-else>
+      <TreeNode
+        v-for="item in flatData"
+        :key="item.id"
+        :data="data"
+        :rootPath="rootPath"
+        :indent="indent"
+        :node="item"
+        :collapsed="!!state.hiddenPaths[item.path]"
+        :theme="theme"
+        :showDoubleQuotes="showDoubleQuotes"
+        :showLength="showLength"
+        :checked="selectedPaths.includes(item.path)"
+        :selectableType="selectableType"
+        :showLine="showLine"
+        :showLineNumber="showLineNumber"
+        :showSelectController="showSelectController"
+        :selectOnClickNode="selectOnClickNode"
+        :nodeSelectable="nodeSelectable"
+        :highlightSelectedNode="highlightSelectedNode"
+        :editable="editable"
+        :editableTrigger="editableTrigger"
+        :showIcon="showIcon"
+        :showKeyValueSpace="showKeyValueSpace"
+        :showNodeActions="showNodeActions"
+        @nodeClick="handleNodeClick"
+        @nodeMouseover="handleNodeMouseover"
+        @bracketsClick="handleBracketsClick"
+        @iconClick="handleIconClick"
+        @selectedChange="handleSelectedChange"
+        @valueChange="handleValueChange"
+        :style="
+          itemHeight && itemHeight !== 20
+            ? { lineHeight: `${itemHeight}px` }
+            : {}
+        "
+      />
+    </template>
+  </view>
+</template>
+
+<script>
+import TreeNode from './components/TreeNode/index.vue';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+import { emitError, jsonFlatten, cloneDeep, isFunction } from './utils';
+import { setValueByPath } from '../../utils';
+
+export default {
+  components: {
+    TreeNode,
+    VirtualListPro,
+    AutoSize,
+  },
+  props: {
+    data: {
+      type: [Object, Array],
+      default: () => {},
+    },
+    fontSize: {
+      type: String,
+      default: '12px',
+    },
+    itemHeight: {
+      type: Number,
+      default: 20,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    deep: {
+      type: Number,
+      default: Infinity,
+    },
+    collapsedNodeLength: {
+      type: Number,
+      default: Infinity,
+    },
+    collapsedOnClickBrackets: {
+      type: Boolean,
+      default: true,
+    },
+    pathCollapsible: {
+      type: Function,
+      default: () => false,
+    },
+    nodeSelectable: {
+      type: Function,
+      default: () => false,
+    },
+    rootPath: {
+      type: String,
+      default: 'root',
+    },
+    indent: {
+      type: Number,
+      default: 2,
+    },
+    showDoubleQuotes: {
+      type: Boolean,
+      default: true,
+    },
+    showLine: {
+      type: Boolean,
+      default: true,
+    },
+    selectOnClickNode: {
+      type: Boolean,
+      default: true,
+    },
+    highlightSelectedNode: {
+      type: Boolean,
+      default: true,
+    },
+    theme: {
+      type: String,
+      default: 'light',
+    },
+    showKeyValueSpace: {
+      type: Boolean,
+      default: true,
+    },
+    editableTrigger: {
+      type: String,
+      default: 'click',
+    },
+    virtual: {
+      type: Boolean,
+      default: false,
+    },
+    autoVirtualRow: {
+      type: Number,
+      default: null,
+    },
+    selectedValue: {
+      type: [String, Array],
+      default: '',
+    },
+    selectableType: {
+      type: String,
+      default: '',
+    },
+    showLength: {
+      type: Boolean,
+      default: false,
+    },
+    showLineNumber: {
+      type: Boolean,
+      default: false,
+    },
+    showSelectController: {
+      type: Boolean,
+      default: false,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+    showIcon: {
+      type: Boolean,
+      default: true,
+    },
+    showNodeActions: {
+      type: Boolean,
+      default: false,
+    },
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // 响应式状态
+      state: {
+        translateY: 0,
+        visibleData: [],
+        hiddenPaths: {},
+        height: this.height ?? 400,
+      },
+    };
+  },
+  computed: {
+    // 计算扁平化数据
+    originFlatData() {
+      return jsonFlatten(this.data, this.rootPath);
+    },
+    // 计算分页大小
+    pageSize() {
+      return Math.ceil(this.height / this.itemHeight) + 5;
+    },
+    // 计算处理后的扁平化数据
+    flatData() {
+      let startHiddenItem = null;
+      const data = [];
+      const length = this.originFlatData.length;
+
+      for (let i = 0; i < length; i++) {
+        const cur = this.originFlatData[i];
+        const item = {
+          ...cur,
+          id: i,
+        };
+        const isHidden = this.state.hiddenPaths[item.path];
+
+        if (startHiddenItem && startHiddenItem.path === item.path) {
+          const isObject = startHiddenItem.type === 'objectStart';
+          const mergeItem = {
+            ...item,
+            ...startHiddenItem,
+            showComma: item.showComma,
+            content: isObject ? '{...}' : '[...]',
+            type: isObject ? 'objectCollapsed' : 'arrayCollapsed',
+          };
+          startHiddenItem = null;
+          data.push(mergeItem);
+        } else if (isHidden && !startHiddenItem) {
+          startHiddenItem = item;
+          continue;
+        } else {
+          if (startHiddenItem) continue;
+          else data.push(item);
+        }
+      }
+      return data;
+    },
+    // 计算选中路径
+    selectedPaths() {
+      const value = this.selectedValue;
+      if (value && this.selectableType === 'multiple' && Array.isArray(value)) {
+        return value;
+      }
+      return [value];
+    },
+    // 计算属性错误信息
+    propsErrorMessage() {
+      const error =
+        this.selectableType &&
+        !this.selectOnClickNode &&
+        !this.showSelectController;
+      return error
+        ? 'When selectableType is not null, selectOnClickNode and showSelectController cannot be false at the same time, because this will cause the selection to fail.'
+        : '';
+    },
+    // 计算是否自动启用虚拟列表
+    autoVirtual() {
+      if (this.virtual) return true;
+      if (typeof this.autoVirtualRow === 'number') {
+        return this.flatData.length > this.autoVirtualRow;
+      }
+      return false;
+    },
+  },
+  watch: {
+    // 监听深度变化
+    deep(newVal) {
+      if (newVal) {
+        this.state.hiddenPaths = this.initHiddenPaths(
+          newVal,
+          this.collapsedNodeLength,
+        );
+      }
+    },
+    // 监听折叠节点长度变化
+    collapsedNodeLength(newVal) {
+      if (newVal) {
+        this.state.hiddenPaths = this.initHiddenPaths(this.deep, newVal);
+      }
+    },
+    // 监听是否折叠
+    collapsed: {
+      handler(val) {
+        if (val) {
+          this.updateCollapsedPaths(true, this.rootPath);
+        }
+      },
+      immediate: true,
+    },
+    // 监听数据变化
+    data: {
+      handler() {
+        // 数据变化时重新计算
+        this.state.hiddenPaths = this.initHiddenPaths(
+          this.deep,
+          this.collapsedNodeLength,
+        );
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    // 检查属性错误
+    if (this.propsErrorMessage) {
+      emitError(this.propsErrorMessage);
+    }
+  },
+  methods: {
+    // 初始化隐藏路径
+    initHiddenPaths(deep, collapsedNodeLength) {
+      return this.originFlatData.reduce((acc, item) => {
+        const doCollapse =
+          item.level >= deep || item.length >= collapsedNodeLength;
+        const pathComparison =
+          isFunction(this.pathCollapsible) && this.pathCollapsible(item);
+
+        if (
+          (item.type === 'objectStart' || item.type === 'arrayStart') &&
+          (doCollapse || pathComparison)
+        ) {
+          return {
+            ...acc,
+            [item.path]: 1,
+          };
+        }
+        return acc;
+      }, {});
+    },
+    // 更新可见数据
+    updateVisibleData(scrollTop = 0) {
+      const flatDataValue = this.flatData ?? [];
+      if (this.autoVirtual) {
+        const visibleCount = this.height / this.itemHeight;
+        const scrollCount = Math.floor(scrollTop / this.itemHeight);
+        let start =
+          scrollCount < 0
+            ? 0
+            : scrollCount + visibleCount > flatDataValue.length
+              ? flatDataValue.length - visibleCount
+              : scrollCount;
+
+        if (start < 0) start = 0;
+        const end = start + visibleCount;
+
+        this.state.translateY = start * this.itemHeight;
+        this.state.visibleData = flatDataValue.filter(
+          (item, index) => index >= start && index < end,
+        );
+      } else {
+        this.state.visibleData = flatDataValue;
+      }
+    },
+    // 处理节点点击
+    handleNodeClick(node) {
+      this.$emit('nodeClick', node);
+    },
+    // 处理节点鼠标悬停
+    handleNodeMouseover(node) {
+      this.$emit('nodeMouseover', node);
+    },
+    // 处理选中变化
+    handleSelectedChange({ path }) {
+      const type = this.selectableType;
+      if (type === 'multiple') {
+        const index = this.selectedPaths.findIndex((item) => item === path);
+        const newVal = [...this.selectedPaths];
+
+        if (index !== -1) {
+          newVal.splice(index, 1);
+        } else {
+          newVal.push(path);
+        }
+
+        this.$emit('update:selectedValue', newVal);
+        this.$emit('selectedChange', newVal, [...this.selectedPaths]);
+      } else if (type === 'single') {
+        if (this.selectedPaths[0] !== path) {
+          const [oldVal] = this.selectedPaths;
+          const newVal = path;
+          this.$emit('update:selectedValue', newVal);
+          this.$emit('selectedChange', newVal, oldVal);
+        }
+      }
+    },
+    // 更新折叠路径
+    updateCollapsedPaths(collapsed, path) {
+      if (collapsed) {
+        this.state.hiddenPaths = {
+          ...this.state.hiddenPaths,
+          [path]: 1,
+        };
+      } else {
+        const newPaths = { ...this.state.hiddenPaths };
+        delete newPaths[path];
+        this.state.hiddenPaths = newPaths;
+      }
+
+      if (path === this.rootPath) {
+        this.state.height = collapsed ? this.itemHeight : this.height;
+      }
+    },
+    // 处理括号点击
+    handleBracketsClick(collapsed, node) {
+      if (this.collapsedOnClickBrackets) {
+        this.updateCollapsedPaths(collapsed, node.path);
+      }
+      this.$emit('bracketsClick', collapsed, node);
+    },
+    // 处理图标点击
+    handleIconClick(collapsed, node) {
+      this.updateCollapsedPaths(collapsed, node.path);
+      this.$emit('iconClick', collapsed, node);
+    },
+    // 处理值变化
+    handleValueChange(value, path) {
+      const newData = cloneDeep(this.data);
+      const rootPath = this.rootPath;
+      const key = path.slice(rootPath.length);
+      setValueByPath(newData, key, value);
+      this.$emit('update:data', newData);
+    },
+  },
+};
+</script>
+
+<style>
+.json-pretty-tree {
+  /* theme color */
+  --json-pretty-color-primary: #9254de;
+  --json-pretty-color-info: #1d8ce0;
+  --json-pretty-color-error: #ff4d4f;
+  --json-pretty-color-success: #888888;
+  --json-pretty-color-nil: #020201;
+
+  /* field values color */
+  --json-pretty-color-string: var(--json-pretty-color-success);
+  --json-pretty-color-number: var(--json-pretty-color-info);
+  --json-pretty-color-boolean: var(--json-pretty-color-info);
+  --json-pretty-color-null: var(--json-pretty-color-nil);
+  --json-pretty-color-undefined: var(--json-pretty-color-nil);
+
+  /* highlight */
+  --json-pretty-highlight-bg-color: rgba(146, 84, 222, 0.1);
+  --json-pretty-highlight-bg-color-dark: #2e4558;
+
+  /* comment */
+  --json-pretty-comment-color: #bfcbd9;
+
+  /* common border-color */
+  --json-pretty-border-color: #bfcbd9;
+
+  font-family:
+    'Monaco', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', monospace;
+  font-size: v-bind(fontSize);
+  text-align: left;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+
+.json-pretty-tree.is-virtual {
+  overflow: auto;
+}
+
+.json-pretty-tree-node {
+  white-space: nowrap;
+}
+
+.dark {
+  /* 深色主题样式 */
+}
+</style>

package/dist/v2/JsonPretty/type.ts

@@ -0,0 +1,125 @@
+import type { CSSProperties } from 'vue';
+
+export type JsonPrettyNodeProps = {
+  data: any;
+  rootPath: string;
+  indent: number;
+  showLength: boolean;
+  showDoubleQuotes: boolean;
+  renderNodeKey: any;
+  renderNodeValue: any;
+};
+export interface NodeDataType extends JSONFlattenReturnType {
+  id: number;
+}
+
+export interface JSONFlattenOptions {
+  key?: string;
+  index?: number;
+  showComma: boolean;
+  length: number;
+  type:
+    | 'content'
+    | 'objectStart'
+    | 'objectEnd'
+    | 'objectCollapsed'
+    | 'arrayStart'
+    | 'arrayEnd'
+    | 'arrayCollapsed';
+}
+
+export type JSONDataType =
+  | string
+  | number
+  | boolean
+  | unknown[]
+  | Record<string, unknown>
+  | null;
+
+export interface JSONFlattenReturnType extends JSONFlattenOptions {
+  content: string | number | null | boolean;
+  level: number;
+  path: string;
+}
+
+export type StyleValue =
+  | false
+  | null
+  | undefined
+  | string
+  | CSSProperties
+  | Array<StyleValue>;
+
+// 定义 Props 类型
+type SelectableType = 'single' | 'multiple' | null;
+
+export type TreeNodeProps = Partial<{
+  data: any;
+  indent: number;
+  showLength: boolean;
+  showDoubleQuotes: boolean;
+  selectableType: SelectableType;
+  showSelectController: boolean;
+  showLine: boolean;
+  showLineNumber: boolean;
+  showNodeActions: boolean;
+  selectOnClickNode: boolean;
+  highlightSelectedNode: boolean;
+  showIcon: boolean;
+  theme: string;
+  showKeyValueSpace: boolean;
+  editable: boolean;
+  editableTrigger: string;
+  node: NodeDataType;
+  checked: boolean;
+  collapsed: boolean;
+  style: CSSProperties;
+  fontSize: string;
+  onNodeClick: (node: NodeDataType) => void;
+  onNodeMouseover: (node: NodeDataType) => void;
+  onBracketsClick: (collapsed: boolean, node: NodeDataType) => void;
+  onIconClick: (collapsed: boolean, node: NodeDataType) => void;
+  onValueChange: (value: boolean, path: string) => void;
+  onSelectedChange: (node: NodeDataType) => void;
+}> &
+  TreeNodeRequiredProps;
+
+export type TreeNodeRequiredProps = {
+  node: NodeDataType;
+  rootPath: string;
+  nodeSelectable: (node: NodeDataType) => boolean;
+};
+
+export type TreeRequired = TreeNodeRequiredProps & {};
+
+export type Tree = Partial<TreeNodeProps> &
+  Partial<
+    {
+      deep: number;
+      collapsedNodeLength: number;
+      virtual: boolean;
+      itemHeight: number;
+      height: number;
+      selectedValue: string | Array<any>;
+      collapsedOnClickBrackets: boolean;
+      style: CSSProperties;
+      pathCollapsible: (node: NodeDataType) => boolean;
+      /** 超过行数将会自动启用虚拟列表 */
+      autoVirtualRow: number;
+    } & TreeRequired
+  >;
+
+export interface ScrollEvent {
+  detail: {
+    scrollLeft: number; // 横向滚动距离
+    scrollTop: number; // 纵向滚动距离
+    scrollHeight: number; // 可滚动区域的高度
+    scrollWidth: number; // 可滚动区域的宽度
+    deltaX: number; // 横向滚动增量
+    deltaY: number; // 纵向滚动增量
+  };
+  target: EventTarget; // 事件源组件
+  currentTarget: EventTarget; // 当前组件
+  timeStamp: number; // 事件触发时间戳
+  type: string; // 事件类型，这里是 'scroll'
+}