vite-uni-dev-tool 0.0.1

package/dev/components/DeviceInfo/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <view class="device-info-content">
+    <JsonPretty :data="deviceInfo" v-if="showJson" />
+    <Empty v-else />
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import Empty from '../Empty/index.vue';
+import JsonPretty from '../JsonPretty/index.vue';
+const props = defineProps<{
+  deviceInfo: Record<string, any>;
+}>();
+
+const showJson = computed(() => {
+  try {
+    const str = JSON.stringify(props.deviceInfo);
+    if (typeof props.deviceInfo === 'object' && (str === '' || str === '{}')) {
+      return false;
+    }
+    return true;
+  } catch (error) {
+    return false;
+  }
+});
+</script>
+<style>
+.device-info-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+}
+</style>

package/dev/components/Empty/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <view class="dev-tool-empty">
+    <image :src="empty" class="dev-tool-empty-image" />
+    <text class="dev-tool-empty-text">{{ text ?? '暂无调试信息' }}</text>
+  </view>
+</template>
+<script lang="ts" setup>
+import empty from './empty.png';
+defineProps<{ text?: string }>();
+</script>
+<style scoped>
+.dev-tool-empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+}
+.dev-tool-empty-image {
+  margin-top: 50px;
+  width: 50px;
+  height: 50px;
+}
+
+.dev-tool-empty-text {
+  color: #888;
+}
+</style>

package/dev/components/FilterInput/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <view class="filter-input-wrapper">
+    <input
+      :class="`filter-input`"
+      :value="modelValue"
+      :placeholder="placeholder || '请输入'"
+      @input="debounceInput"
+    />
+    <view class="filter-input-clear" @click="onClear"> × </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { debounce } from '../../utils';
+import { ref, onMounted } from 'vue';
+const props = defineProps<{
+  placeholder?: string;
+  modelValue?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'search', value: string): void;
+  (e: 'openSearch', value: boolean): void;
+}>();
+
+const isActive = ref(false);
+
+function onInput(e: any) {
+  const value = e.detail.value;
+  emit('update:modelValue', value);
+  emit('search', value);
+}
+
+function onClear() {
+  emit('update:modelValue', '');
+  emit('search', '');
+}
+
+function openSearch(open: boolean) {
+  isActive.value = open;
+  emit('openSearch', open);
+  if (!open && props.modelValue) {
+    emit('update:modelValue', '');
+    emit('search', '');
+  }
+}
+
+const debounceInput = debounce(onInput, 500);
+</script>
+<style scoped>
+.filter-input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  width: 100%;
+  height: 24px;
+
+  border-radius: 4px;
+  border: 1px solid #eee;
+
+  background-color: #fff;
+  transition: max-width 0.3s;
+  box-sizing: border-box;
+}
+
+.filter-input {
+  flex: 1;
+  box-shadow: none;
+  box-sizing: border-box;
+  border-radius: 5;
+  font-family: inherit;
+  color: #000;
+  font-weight: 400;
+  font: unset;
+  height: 24px;
+}
+
+.filter-input-clear {
+  padding-left: 8px;
+}
+
+.filter-input-icon {
+  width: 24px;
+  height: 24px;
+}
+</style>

package/dev/components/JsonPretty/components/Brackets/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <view class="json-pretty-tree-brackets" @click="onClick">
+    {{ data }}
+  </view>
+</template>
+<script lang="ts" setup>
+defineProps<{ data: string }>();
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
+}>();
+
+function onClick(e: MouseEvent) {
+  emit('click', e);
+}
+</script>
+<style>
+.json-pretty-tree-brackets {
+  cursor: pointer;
+}
+.json-pretty-tree-brackets:hover {
+  color: var(--json-pretty-primary-color);
+}
+</style>

package/dev/components/JsonPretty/components/Carets/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <view
+    v-if="isOpen && isClose"
+    :class="`json-pretty-carets json-pretty-carets-${
+      isOpen ? 'open' : 'close'
+    }`"
+    @click="onClick"
+  >
+    <svg
+      viewBox="0 0 1024 1024"
+      focusable="false"
+      data-icon="caret-down"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+      ></path>
+    </svg>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+// import "./styles.less";
+const props = defineProps<{ nodeType: string }>();
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
+}>();
+
+const isOpen = computed(() => {
+  return props.nodeType === 'objectStart' || props.nodeType === 'arrayStart';
+});
+
+const isClose = computed(() => {
+  return (
+    props.nodeType === 'objectCollapsed' || props.nodeType === 'arrayCollapsed'
+  );
+});
+
+function onClick(e: MouseEvent) {
+  emit('click', e);
+}
+</script>
+<style>
+.json-pretty-carets {
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+}
+.json-pretty-carets svg {
+  transition: transform 0.3s;
+}
+
+.json-pretty-carets::hover {
+  color: var(--json-pretty-primary-color);
+}
+
+.json-pretty-carets-close {
+  transform: rotate(-90deg);
+}
+</style>

package/dev/components/JsonPretty/components/CheckController/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <view
+    :class="`json-pretty-check-controller ${model ? 'is-checked' : ''}`"
+    @click="onClick"
+  >
+    <view :class="`json-pretty-check-controller-inner is-${uiType}`" />
+    <input
+      :checked="model"
+      :class="`json-pretty-check-controller-original is-${uiType}`"
+      :type="uiType"
+      @change="onChange"
+    />
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+// import "./style.less";
+const props = defineProps<{ checked: boolean; isMultiple: boolean }>();
+const emit = defineEmits<{
+  (e: 'change', value: boolean): void;
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+const uiType = computed(() => (props.isMultiple ? 'checkbox' : 'radio'));
+const model = computed({
+  get: (): boolean => props.checked,
+  set: (val) => emit('update:modelValue', val)
+});
+
+function onChange() {
+  emit('change', model.value);
+}
+
+function onClick(e: MouseEvent) {
+  e.stopPropagation();
+}
+</script>
+
+<style>
+.json-pretty-check-controller {
+  position: absolute;
+  left: 0;
+}
+.json-pretty-check-controller.is-checked .json-pretty-check-controller-inner {
+  background-color: var(--json-pretty-color-primary);
+  border-color: var(--json-pretty-color-primary);
+}
+.json-pretty-check-controller.is-checked
+  .json-pretty-check-controller-inner.is-checkbox:after {
+  transform: rotate(45deg) scaleY(1);
+}
+.json-pretty-check-controller.is-checked
+  .json-pretty-check-controller-inner.is-radio:after {
+  transform: translate(-50%, -50%) scale(1);
+}
+.json-pretty-check-controller .json-pretty-check-controller-inner {
+  display: inline-block;
+  position: relative;
+  border: 1px solid var(--json-pretty-border-color);
+  border-radius: 2px;
+  vertical-align: middle;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  z-index: 1;
+  cursor: pointer;
+  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
+    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+}
+.json-pretty-check-controller .json-pretty-check-controller-inner:after {
+  box-sizing: content-box;
+  content: '';
+  border: 2px solid #fff;
+  border-left: 0;
+  border-top: 0;
+  height: 8px;
+  left: 4px;
+  position: absolute;
+  top: 1px;
+  transform: rotate(45deg) scaleY(0);
+  width: 4px;
+  transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s;
+  transform-origin: center;
+}
+.json-pretty-check-controller .json-pretty-check-controller-inner.is-radio {
+  border-radius: 100%;
+}
+.json-pretty-check-controller
+  .json-pretty-check-controller-inner.is-radio:after {
+  border-radius: 100%;
+  height: 4px;
+  background-color: #fff;
+  left: 50%;
+  top: 50%;
+}
+.json-pretty-check-controller .json-pretty-check-controller-original {
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+}
+</style>

package/dev/components/JsonPretty/components/TreeNode/index.vue

@@ -0,0 +1,348 @@
+<template>
+  <view
+    :class="{
+      'json-pretty-tree-node': true,
+      'has-selector': showSelectController,
+      'has-carets': showIcon,
+      'is-highlight': highlightSelectedNode && checked,
+      'json-pretty-tree-node-active': state.editing,
+      dark: theme === 'dark',
+    }"
+    @click="handleNodeClick"
+    @mouseover="handleNodeMouseover"
+    :style="style"
+  >
+    <view v-if="showLineNumber" class="json-pretty-node-index">{{
+      node.id + 1
+    }}</view>
+
+    <CheckController
+      v-if="
+        showSelectController &&
+        selectable &&
+        node.type !== 'objectEnd' &&
+        node.type !== 'arrayEnd'
+      "
+      :isMultiple="isMultiple"
+      :checked="checked"
+      @change="handleSelectedChange"
+    />
+
+    <view class="json-pretty-indent">
+      <view
+        v-for="(item, index) in Array(node.level)"
+        :key="index"
+        :class="{
+          'json-pretty-indent-unit': true,
+          'has-line': showLine,
+        }"
+      >
+        <view v-for="() in Array(indent)" :key="Math.random()">&nbsp;</view>
+      </view>
+      <Carets v-if="showIcon" :nodeType="node.type" @click="handleIconClick" />
+    </view>
+
+    <view v-if="node.key" class="json-pretty-key">
+      <slot name="render-node-key" :node="props.node" :default-key="prettyKey">
+        {{ prettyKey }}
+      </slot>
+      <view class="json-pretty-colon">{{
+        `:${showKeyValueSpace ? ' ' : ''}`
+      }}</view>
+    </view>
+
+    <view class="json-pretty-value-wrapper">
+      <Brackets
+        v-if="node.type !== 'content' && node.content"
+        :data="node.content.toString()"
+        @click="handleBracketsClick"
+      />
+
+      <view v-else :class="valueClass" @click="handleValueEdit">
+        <input
+          v-if="editable && state.editing"
+          class="json-pretty-edit-input"
+          :value="defaultValue"
+          :focus="state.editing"
+          @blur="handleInputBlur"
+        />
+        <view v-else>
+          <slot
+            name="render-node-value"
+            :node="props.node"
+            :default-value="defaultValue"
+          >
+            {{ defaultValue }}
+          </slot>
+        </view>
+      </view>
+
+      <view v-if="node.showComma">,</view>
+
+      <view v-if="showLength && collapsed" class="json-pretty-comment">
+        // {{ node.length }} items
+      </view>
+    </view>
+    <view class="json-pretty-tree-node-actions" v-if="showNodeActions">
+      <slot name="render-node-actions" :copy="handleCopy">
+        <view @click="handleCopy" class="json-pretty-tree-node-actions-item"
+          >copy</view
+        >
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { reactive, computed } from 'vue';
+import Brackets from '../Brackets/index.vue';
+import CheckController from '../CheckController/index.vue';
+import Carets from '../Carets/index.vue';
+import { getDataType, isFunction, stringToAutoType } from '../../utils';
+
+import type { NodeDataType, TreeNodeProps } from '../../type';
+import { getValueByPath } from '../../../../utils';
+
+const props = withDefaults(defineProps<TreeNodeProps>(), {
+  rootPath: 'root',
+  indent: 2,
+  showDoubleQuotes: true,
+  showLine: true,
+  selectOnClickNode: true,
+  highlightSelectedNode: true,
+  theme: 'light',
+  showKeyValueSpace: true,
+  editableTrigger: 'click',
+  checked: false,
+  nodeSelectable: () => false,
+});
+
+const emit = defineEmits<{
+  (e: 'nodeClick', node: NodeDataType): void;
+  (e: 'nodeMouseover', node: NodeDataType): void;
+  (e: 'bracketsClick', collapsed: boolean, node: NodeDataType): void;
+  (e: 'iconClick', collapsed: boolean, node: NodeDataType): void;
+  (e: 'selectedChange', node: NodeDataType): void;
+  (e: 'valueChange', value: any, path: string): void;
+}>();
+
+const dataType = computed<string>(() => getDataType(props.node.content));
+
+const valueClass = computed(
+  () => `json-pretty-value json-pretty-value-${dataType.value}`,
+);
+
+const prettyKey = computed(() =>
+  props.showDoubleQuotes ? `"${props.node.key}"` : props.node.key,
+);
+
+const isMultiple = computed(() => props.selectableType === 'multiple');
+
+const isSingle = computed(() => props.selectableType === 'single');
+
+const selectable = computed(
+  () =>
+    isFunction(props?.nodeSelectable) &&
+    props?.nodeSelectable?.(props.node) &&
+    (isMultiple.value || isSingle.value),
+);
+
+const state = reactive({
+  editing: false,
+});
+
+const handleInputBlur = (e: FocusEvent) => {
+  const source = (e.detail as any).value;
+  const value = stringToAutoType(source);
+  emit('valueChange', value, props.node.path);
+  state.editing = false;
+};
+
+const defaultValue = computed(() => {
+  let value = props.node?.content;
+  if (value === null) {
+    value = 'null';
+  } else if (value === undefined) {
+    value = 'undefined';
+  }
+  return dataType.value === 'string' ? `"${value}"` : value + '';
+});
+
+const handleBracketsClick = () => {
+  emit('bracketsClick', !props.collapsed, props.node);
+};
+
+const handleIconClick = () => {
+  emit('iconClick', !props.collapsed, props.node);
+};
+
+const handleSelectedChange = () => {
+  emit('selectedChange', props.node);
+};
+
+const handleNodeClick = () => {
+  emit('nodeClick', props.node);
+  if (selectable.value && props.selectOnClickNode) {
+    emit('selectedChange', props.node);
+  }
+};
+
+const handleNodeMouseover = () => {
+  emit('nodeMouseover', props.node);
+};
+
+const handleValueEdit = (e: MouseEvent) => {
+  if (!props.editable) return;
+
+  if (!state.editing) {
+    state.editing = true;
+  }
+};
+
+const handleCopy = () => {
+  const { key, path } = props.node;
+  const rootPath = props.rootPath;
+
+  const content = getValueByPath(props.data, path.slice(rootPath.length));
+
+  const copiedData = JSON.stringify(
+    key ? { [key]: content } : content,
+    null,
+    2,
+  );
+
+  uni.setClipboardData({
+    data: copiedData,
+    success() {
+      uni.showToast({
+        title: '复制成功',
+        icon: 'none',
+      });
+    },
+    fail() {
+      uni.showToast({
+        title: '复制失败',
+        icon: 'none',
+      });
+    },
+  });
+};
+</script>
+<style scoped>
+.json-pretty-tree-node {
+  display: flex;
+  align-items: center;
+  position: relative;
+  line-height: 20px;
+}
+.json-pretty-tree-node.has-carets {
+  padding-left: 15px;
+}
+.json-pretty-tree-node.has-selector,
+.json-pretty-tree-node.has-carets.has-selector {
+  padding-left: 30px;
+}
+.json-pretty-tree-node.is-highlight,
+.json-pretty-tree-node:hover {
+  background-color: var(--json-pretty-highlight-bg-color);
+  border-radius: 4px;
+}
+.json-pretty-tree-node.is-highlight .json-pretty-tree-node-actions,
+.json-pretty-tree-node:hover .json-pretty-tree-node-actions {
+  display: block;
+}
+.json-pretty-tree-node .json-pretty-indent {
+  display: flex;
+  position: relative;
+}
+.json-pretty-tree-node .json-pretty-indent-unit {
+  display: flex;
+}
+.json-pretty-tree-node .json-pretty-indent-unit.has-line {
+  border-left: 1px dashed var(--json-pretty-border-color);
+}
+.json-pretty-tree-node .json-pretty-tree-node-actions {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 0 4px;
+  background-color: var(--json-pretty-highlight-bg-color);
+  border-radius: 4px;
+}
+.json-pretty-tree-node
+  .json-pretty-tree-node-actions
+  .json-pretty-tree-node-actions-item {
+  cursor: pointer;
+}
+.json-pretty-tree-node
+  .json-pretty-tree-node-actions
+  .json-pretty-tree-node-actions-item:hover {
+  color: var(--json-pretty-color-primary);
+}
+.json-pretty-tree-node.dark.is-highlight,
+.json-pretty-tree-node.dark:hover {
+  background-color: var(--json-pretty-highlight-bg-color-dark);
+}
+.json-pretty-tree-node.dark .json-pretty-tree-node-actions {
+  background-color: var(--json-pretty-highlight-bg-color-dark);
+}
+.json-pretty-tree-node-active {
+  background-color: var(--json-pretty-highlight-bg-color);
+  border-radius: 4px;
+}
+.json-pretty-tree-node-active .json-pretty-tree-node-actions {
+  display: block;
+}
+.json-pretty-node-index {
+  position: absolute;
+  right: 100%;
+  margin-right: 4px;
+  user-select: none;
+}
+.json-pretty-colon {
+  white-space: pre;
+}
+.json-pretty-comment {
+  color: var(--json-pretty-color-primary);
+}
+.json-pretty-key {
+  display: flex;
+}
+.json-pretty-value-wrapper {
+  display: flex;
+  align-items: center;
+}
+.json-pretty-value {
+  /* word-break: break-word; */
+  white-space: nowrap;
+}
+.json-pretty-value-null {
+  color: var(--json-pretty-color-null);
+}
+.json-pretty-value-undefined {
+  color: var(--json-pretty-color-undefined);
+}
+.json-pretty-value-number {
+  color: var(--json-pretty-color-number);
+}
+.json-pretty-value-boolean {
+  color: var(--json-pretty-color-boolean);
+}
+.json-pretty-value-string {
+  color: var(--json-pretty-color-string);
+}
+.json-pretty-edit-input {
+  padding: 0px 8px;
+  border: 1px solid #eee;
+  box-shadow: none;
+  box-sizing: border-box;
+  border-radius: 5;
+  font-family: inherit;
+  color: #000;
+  font-weight: 400;
+  background-color: #fff;
+  font: unset;
+  height: 16px;
+}
+</style>