vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/InstanceDetail/index.vue

@@ -1,96 +1,485 @@
 <template>
-  <view class="instance-detail">
+  <view
+    id="instance-detail-container"
+    class="instance-detail"
+    data-dev-tool="true"
+    :style="{ height: contentHeight - 32 + 'px' }">
+    <!-- 控制栏 -->
     <view class="instance-detail-control">
-      <DevToolTitle>Instance</DevToolTitle>
-
+      <DevToolTitle>{{ t('instance.title') }}</DevToolTitle>
       <Tag
         mode="clear"
         style="margin-left: auto"
         customStyle="margin-left:auto"
-        @click="onRefresh"
-      >
-        刷新
+        @click="onRefresh">
+        {{ t('instance.refresh') }}
       </Tag>
     </view>
 
-    <InstanceTree
-      v-if="instanceRoot"
-      :height="contentHeight - 32 - 32"
-      :data="instanceRoot"
-      showLine
-    />
-    <Empty v-else :text="text" />
+    <!-- 主体内容：上下分层 -->
+    <view
+      class="instance-detail-body"
+      @touchmove="onResizeMove"
+      @mousemove="onResizeMove"
+      @touchend="onResizeEnd"
+      @mouseup="onResizeEnd">
+      <!-- 上部：组件树 -->
+      <view
+        class="instance-detail-top"
+        :style="{ flex: `calc(${topHeightPercent}% - 10px - 16px)` }">
+        <InstanceTree
+          v-if="showTree"
+          height="100%"
+          style="height: 100%"
+          :data="instanceRoot"
+          showLine
+          @select="onNodeSelect" />
+        <Empty v-else :text="text" />
+      </view>
+
+      <!-- 拖拽条 -->
+      <view
+        class="instance-detail-resizer"
+        @touchstart.stop.prevent="onResizeStart"
+        @mousedown.stop.prevent="onResizeStart">
+        <view class="resizer-handle"></view>
+      </view>
+
+      <!-- 下部：属性详情 -->
+      <view
+        class="instance-detail-bottom"
+        :style="{ flex: 100 - topHeightPercent }">
+        <view class="instance-detail-tabs-wrapper">
+          <scroll-view scroll-x class="instance-detail-tabs-scroll">
+            <view class="instance-detail-tabs">
+              <view
+                v-for="(tab, index) in internalTabItems"
+                :key="tab.key"
+                :class="[
+                  'instance-detail-tab-item',
+                  activeInternalTab === index ? 'active' : '',
+                ]"
+                @click="activeInternalTab = index">
+                {{ tab.label }}
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+
+        <view class="instance-detail-props-scroll">
+          <view v-if="selectedNodeData" class="instance-detail-props-content">
+            <template v-if="activeInternalTab === 0">
+              <JsonPretty
+                virtual
+                collapsed
+                :showDoubleQuotes="false"
+                :height="jsonPrettyHeight"
+                :data="selectedNodeData.props"
+                :nodeSelectable="() => false"
+                :pathCollapsible="() => false" />
+            </template>
+            <template v-else-if="activeInternalTab === 1">
+              <JsonPretty
+                virtual
+                collapsed
+                :showDoubleQuotes="false"
+                :height="jsonPrettyHeight"
+                :data="selectedNodeData.data"
+                :nodeSelectable="() => false"
+                :pathCollapsible="() => false" />
+            </template>
+            <template v-else-if="activeInternalTab === 2">
+              <JsonPretty
+                virtual
+                collapsed
+                :showDoubleQuotes="false"
+                :height="jsonPrettyHeight"
+                :data="selectedNodeData.provides"
+                :nodeSelectable="() => false"
+                :pathCollapsible="() => false" />
+            </template>
+            <template v-else-if="activeInternalTab === 3">
+              <JsonPretty
+                virtual
+                collapsed
+                :showDoubleQuotes="false"
+                :height="jsonPrettyHeight"
+                :data="selectedNodeData.functions"
+                :nodeSelectable="() => false"
+                :pathCollapsible="() => false" />
+            </template>
+            <template v-else-if="activeInternalTab === 4">
+              <JsonPretty
+                virtual
+                collapsed
+                :showDoubleQuotes="false"
+                :height="jsonPrettyHeight"
+                :data="selectedNodeData.emits"
+                :nodeSelectable="() => false"
+                :pathCollapsible="() => false" />
+            </template>
+            <template v-else-if="activeInternalTab === 5">
+              <JsonPretty
+                virtual
+                collapsed
+                :showDoubleQuotes="false"
+                :height="jsonPrettyHeight"
+                :data="selectedNodeData.other"
+                :nodeSelectable="() => false"
+                :pathCollapsible="() => false" />
+            </template>
+          </view>
+          <view v-else class="instance-detail-props-empty">
+            <text>{{ t('instance.selectNode') }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
+
 <script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import InstanceTree from '../InstanceTree/index.vue';
-import Empty from '../Empty/index.vue';
 import {
+  ref,
+  shallowRef,
+  computed,
+  onMounted,
   getCurrentInstance,
   nextTick,
-  onMounted,
-  shallowRef,
+  markRaw,
   type ComponentInternalInstance,
 } from 'vue';
+import { useI18n } from '../../i18n';
+import Tag from '../Tag/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import InstanceTree from '../Instance/index.vue';
+import Empty from '../Empty/index.vue';
+import JsonPretty from '../JsonPretty/index.vue';
 
-const props = defineProps<{
+const { t } = useI18n();
+
+const _props = defineProps<{
   zIndex?: number;
   contentHeight: number;
   theme?: string;
 }>();
 
-const emit = defineEmits<{
+const _emit = defineEmits<{
   (e: 'close'): void;
 }>();
 
-const instanceRoot = shallowRef();
-const text = shallowRef('正在获取节点信息');
-let instance: ComponentInternalInstance | null;
+const instanceRoot = ref();
+const showTree = ref(false);
+const status = shallowRef<'getting' | 'noInfo'>('getting');
+const selectedNodeData = ref<{
+  props: any;
+  styles: any;
+  uid: any;
+  type: any;
+  other: any;
+  provides: any;
+  data: any;
+  functions: any;
+  emits: any;
+} | null>(null);
+
+// 属性面板内部 Tab
+const activeInternalTab = ref(0);
+const internalTabItems = computed(() => [
+  { label: t('instance.props'), key: 'props' },
+  { label: t('instance.data'), key: 'data' },
+  { label: t('instance.provides'), key: 'provides' },
+  { label: t('instance.functions'), key: 'functions' },
+  { label: t('instance.emits'), key: 'emits' },
+  { label: t('instance.other'), key: 'other' },
+]);
+
+// 布局高度比例 (0-100)
+const topHeightPercent = ref(60);
+const isResizing = ref(false);
+
+const text = computed(() => {
+  return status.value === 'getting'
+    ? t('instance.gettingInfo')
+    : t('instance.noInfo');
+});
+
+let rootInstance: ComponentInternalInstance | null;
+
 onMounted(() => {
-  instance = getCurrentInstance();
+  rootInstance = getCurrentInstance();
+  refreshRoot();
+
+  // 全局监听移动和结束，保证拖拽流畅
+  // #ifdef H5
+  window.addEventListener('mousemove', onResizeMove);
+  window.addEventListener('mouseup', onResizeEnd);
+  // #endif
+});
 
+// #ifdef H5
+import { onUnmounted } from 'vue';
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onResizeMove);
+  window.removeEventListener('mouseup', onResizeEnd);
+});
+// #endif
+
+const containerRect = { top: 0, height: 0 };
+
+function onResizeStart(_e: TouchEvent | MouseEvent) {
+  isResizing.value = true;
+  // 缓存容器位置信息
+  const query = uni.createSelectorQuery().in(rootInstance?.proxy);
+  query
+    .select('#instance-detail-container')
+    .boundingClientRect((data) => {
+      if (data) {
+        containerRect.top = (data as any).top;
+        containerRect.height = (data as any).height;
+      }
+    })
+    .exec();
+}
+
+function onResizeMove(e: TouchEvent | MouseEvent) {
+  if (!isResizing.value) return;
+
+  e.stopPropagation();
+  e.preventDefault();
+
+  const clientY = (e as TouchEvent).touches
+    ? (e as TouchEvent).touches[0].clientY
+    : (e as MouseEvent).clientY;
+
+  // 使用缓存的容器位置
+  if (containerRect.height > 0) {
+    const relativeY = clientY - containerRect.top - 36;
+    const availableHeight = containerRect.height - 36;
+
+    const newPercent = (relativeY / availableHeight) * 100;
+
+    // 边界约束：15% - 85%
+    if (newPercent >= 15 && newPercent <= 85) {
+      topHeightPercent.value = newPercent;
+    }
+  }
+}
+
+function onResizeEnd() {
+  isResizing.value = false;
+}
+
+function refreshRoot() {
   setTimeout(() => {
-    instanceRoot.value = instance?.subTree?.component?.root;
-    if (!instanceRoot.value) {
-      text.value = '没有获取到节点信息';
+    if (rootInstance?.root) {
+      // components 为 null 是正常的，只需保证 rootInstance.root 本身存在即可
+      // 使用 markRaw 防止深层响应式遍历，这对于大型组件树至关重要
+      showTree.value = true;
+      instanceRoot.value = rootInstance.root
+        ? markRaw(rootInstance.root)
+        : null;
+    } else {
+      status.value = 'noInfo';
+      showTree.value = false;
     }
-  }, 3000);
-});
+  }, 500);
+}
 
 function onRefresh() {
   instanceRoot.value = null;
-  text.value = '正在获取节点信息';
+  status.value = 'getting';
+  selectedNodeData.value = null;
   nextTick(() => {
-    instanceRoot.value = instance?.subTree?.component?.root;
-    if (!instanceRoot.value) {
-      text.value = '没有获取到节点信息';
+    refreshRoot();
+  });
+}
+
+function onNodeSelect(node: any) {
+  if (!node) {
+    selectedNodeData.value = null;
+    return;
+  }
+
+  // 解析 style 字符串为对象，以便 JsonPretty 更好展示
+  const rawStyles = node.styles || {};
+  const formattedStyles: any = {};
+
+  Object.keys(rawStyles).forEach((key) => {
+    if (key === 'style' && typeof rawStyles[key] === 'string') {
+      // 将 style 字符串 ("color: red; font-size: 12px") 解析为对象
+      const parts = rawStyles[key].split(';');
+      parts.forEach((item: string) => {
+        const [k, v] = item.split(':').map((s) => s.trim());
+        if (k && v) {
+          formattedStyles[k] = v;
+        }
+      });
+    } else if (key !== 'style') {
+      // id 等保留
+      formattedStyles[key] = rawStyles[key];
     }
   });
+
+  selectedNodeData.value = {
+    props: node.props || {},
+    styles: formattedStyles,
+    uid: node.uid,
+    type: node.type,
+    other: node.other || {},
+    provides: node.provides || {},
+    data: node.data || {},
+    functions: node.functions || {},
+    emits: node.emits || {},
+  };
 }
+
+const jsonPrettyHeight = computed(() => {
+  const totalBodyHeight = _props.contentHeight - 32; // control bar
+  const resizerHeight = 10; // CSS height
+  const availableHeight = totalBodyHeight - resizerHeight;
+  const bottomHeight = availableHeight * ((100 - topHeightPercent.value) / 100);
+  const tabsHeight = 32; // CSS height (border-box)
+  // padding-top + padding-bottom = 24px
+  const padding = 24;
+  return Math.max(0, Math.floor(bottomHeight - tabsHeight - padding));
+});
 </script>
+
 <style scoped>
 .instance-detail {
-  position: fixed;
-  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
   height: 100%;
-  z-index: 5;
-  top: 0;
-  left: 0;
+  background-color: var(--dev-tool-bg-color);
+  box-sizing: border-box;
+}
+
+.instance-detail-control {
+  display: flex;
+  align-items: center;
   padding: 0 16px;
+  height: 32px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  background-color: var(--dev-tool-bg2-color);
+  box-sizing: border-box;
+}
 
-  overflow: auto;
+.instance-detail-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
 
-  /* background-color: var(--dev-tool-bg3-color); */
+.instance-detail-top {
+  min-height: 50px;
+  padding: 8px 0;
+  overflow: hidden;
+}
+
+.instance-detail-resizer {
+  height: 10px;
+  flex-shrink: 0;
+  background-color: var(--dev-tool-bg3-color);
+  border-top: 1px solid var(--dev-tool-border-color);
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: row-resize;
+  position: relative;
+  z-index: 10;
   box-sizing: border-box;
 }
-.instance-detail-control {
+
+.resizer-handle {
+  width: 30px;
+  height: 2px;
+  background-color: var(--dev-tool-border-color);
+  border-radius: 1px;
+}
+
+.instance-detail-bottom {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--dev-tool-bg2-color);
+  min-height: 50px;
+}
+
+.instance-detail-tabs-wrapper {
+  height: 32px;
+  background-color: var(--dev-tool-bg3-color);
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.instance-detail-tabs-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.instance-detail-tabs {
   display: flex;
+  height: 32px;
   align-items: center;
-  gap: 12px;
+  padding: 0 8px;
+}
+
+.instance-detail-tab-item {
+  padding: 0 12px;
   height: 32px;
-  border-bottom: 1px solid transparent;
+  line-height: 32px;
+  font-size: 12px;
+  color: var(--dev-tool-text-color-secondary);
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s;
+}
+
+.instance-detail-tab-item.active {
+  color: var(--dev-tool-main-color);
+}
+
+.instance-detail-tab-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 12px;
+  right: 12px;
+  height: 1px;
+  background-color: var(--dev-tool-main-color);
+}
+
+.instance-detail-props-scroll {
+  flex: 1;
+  overflow: hidden;
+}
+
+.instance-detail-props-content {
+  padding: 0 16px;
   box-sizing: border-box;
 }
+
+.other-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--dev-tool-text-color);
+}
+
+.instance-detail-props-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
+  min-height: 100px;
+  font-size: 12px;
+  color: var(--dev-tool-text-color-secondary);
+  font-style: italic;
+}
 </style>

package/dist/v3/JsonDetail/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="json-view" :style="customStyle">
     <view class="json-view-control">
-      <DevToolTitle>{{ data?.title ?? 'JSON 详情' }}</DevToolTitle>
+      <DevToolTitle>{{ data?.title ?? t('common.jsonDetail') }}</DevToolTitle>
       <CircularButton
         style="margin-left: auto"
         text="×"
@@ -23,12 +23,17 @@ import DevToolTitle from '../DevToolTitle/index.vue';
 import CircularButton from '../CircularButton/index.vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import type { DevTool } from '../../type';
+import { useI18n } from '../../i18n';
 
-const props = defineProps<{
-  data?: {
-    title: string;
-    data?: Record<string, any>;
-  };
+const { t } = useI18n();
+
+const _props = defineProps<{
+  data?:
+    | {
+        title?: string;
+        data?: Record<string, any>;
+      }
+    | undefined;
   zIndex?: number;
   interceptNetworkList?: DevTool.NetworkItem[];
   customStyle?: Record<string, any>;
@@ -49,12 +54,11 @@ const emit = defineEmits<{
   top: 0;
   left: 0;
   padding: 0 16px;
-
   overflow: auto;
-
   background-color: var(--dev-tool-bg3-color);
   box-sizing: border-box;
 }
+
 .json-view-control {
   display: flex;
   align-items: center;

package/dist/v3/JsonPretty/components/Brackets/index.vue

@@ -22,5 +22,6 @@ function onClick(e: MouseEvent) {
 .json-pretty-tree-brackets:hover {
   color: var(--json-pretty-primary-color);
 }
+
 /* #endif */
 </style>

package/dist/v3/JsonPretty/components/Carets/index.vue

@@ -39,9 +39,10 @@ function onClick(e: MouseEvent) {
 }
 
 /* #ifdef H5 || APP-PLUS */
-.json-pretty-carets::hover {
+.json-pretty-carets:hover {
   color: var(--json-pretty-primary-color);
 }
+
 /* #endif */
 
 .json-pretty-carets-close {

package/dist/v3/JsonPretty/components/CheckController/index.vue

@@ -1,8 +1,7 @@
 <template>
   <view
     :class="`json-pretty-check-controller ${model ? 'is-checked' : ''}`"
-    @click="onClick"
-  >
+    @click="onClick">
     <!-- <view
       :class="`json-pretty-check-controller-inner is-${uiType}`"
       @click="onChange"
@@ -18,20 +17,27 @@
     <checkbox
       v-if="uiType === 'checkbox'"
       :checked="model"
+      :color="themeColor"
       style="transform: scale(0.6)"
-      @change="onChange"
-    />
+      @change="onChange" />
     <radio
       v-if="uiType === 'radio'"
       :checked="model"
+      :color="themeColor"
       style="transform: scale(0.6)"
-      @change="onChange"
-    />
+      @change="onChange" />
   </view>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-const props = defineProps<{ checked: boolean; isMultiple: boolean }>();
+import { getThemeMainColor } from '../../../styles/theme';
+const props = defineProps<{
+  theme?: string;
+  checked: boolean;
+  isMultiple: boolean;
+}>();
+
+const themeColor = computed(() => getThemeMainColor(props.theme));
 const emit = defineEmits<{
   (e: 'change', value: boolean): void;
   (e: 'update:modelValue', value: boolean): void;
@@ -57,18 +63,22 @@ function onClick(e: MouseEvent) {
   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 {
+  .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 {
+  .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;
@@ -85,7 +95,8 @@ function onClick(e: MouseEvent) {
     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 {
+
+.json-pretty-check-controller .json-pretty-check-controller-inner::after {
   box-sizing: content-box;
   content: '';
   border: 2px solid #fff;
@@ -100,26 +111,26 @@ function onClick(e: MouseEvent) {
   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 {
+  .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;
+  inset: 0;
   margin: 0;
 }
 </style>