vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/DevTool/components/InstanceDetail/index.vue

@@ -1,485 +1,485 @@
-<template>
-  <view
-    id="instance-detail-container"
-    class="instance-detail"
-    data-dev-tool="true"
-    :style="{ height: contentHeight - 32 + 'px' }">
-    <!-- 控制栏 -->
-    <view class="instance-detail-control">
-      <DevToolTitle>{{ t('instance.title') }}</DevToolTitle>
-      <Tag
-        mode="clear"
-        style="margin-left: auto"
-        customStyle="margin-left:auto"
-        @click="onRefresh">
-        {{ t('instance.refresh') }}
-      </Tag>
-    </view>
-
-    <!-- 主体内容：上下分层 -->
-    <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 {
-  ref,
-  shallowRef,
-  computed,
-  onMounted,
-  getCurrentInstance,
-  nextTick,
-  markRaw,
-  type ComponentInternalInstance,
-} from 'vue';
-import { useI18n } from '../../../../i18n';
-import Tag from '../../../components/Tag/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import InstanceTree from '../Instance/index.vue';
-import Empty from '../../../components/Empty/index.vue';
-import JsonPretty from '../../../components/JsonPretty/index.vue';
-
-const { t } = useI18n();
-
-const _props = defineProps<{
-  zIndex?: number;
-  contentHeight: number;
-  theme?: string;
-}>();
-
-const _emit = defineEmits<{
-  (e: 'close'): void;
-}>();
-
-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(() => {
-  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(() => {
-    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;
-    }
-  }, 500);
-}
-
-function onRefresh() {
-  instanceRoot.value = null;
-  status.value = 'getting';
-  selectedNodeData.value = null;
-  nextTick(() => {
-    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 {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  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;
-}
-
-.instance-detail-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-}
-
-.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;
-}
-
-.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;
-  padding: 0 8px;
-}
-
-.instance-detail-tab-item {
-  padding: 0 12px;
-  height: 32px;
-  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>
+<template>
+  <view
+    id="instance-detail-container"
+    class="instance-detail"
+    data-dev-tool="true"
+    :style="{ height: contentHeight - 32 + 'px' }">
+    <!-- 控制栏 -->
+    <view class="instance-detail-control">
+      <DevToolTitle>{{ t('instance.title') }}</DevToolTitle>
+      <Tag
+        mode="clear"
+        style="margin-left: auto"
+        customStyle="margin-left:auto"
+        @click="onRefresh">
+        {{ t('instance.refresh') }}
+      </Tag>
+    </view>
+
+    <!-- 主体内容：上下分层 -->
+    <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 {
+  ref,
+  shallowRef,
+  computed,
+  onMounted,
+  getCurrentInstance,
+  nextTick,
+  markRaw,
+  type ComponentInternalInstance,
+} from 'vue';
+import { useI18n } from '../../../../i18n';
+import Tag from '../../../components/Tag/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import InstanceTree from '../Instance/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+
+const { t } = useI18n();
+
+const _props = defineProps<{
+  zIndex?: number;
+  contentHeight: number;
+  theme?: string;
+}>();
+
+const _emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+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(() => {
+  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(() => {
+    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;
+    }
+  }, 500);
+}
+
+function onRefresh() {
+  instanceRoot.value = null;
+  status.value = 'getting';
+  selectedNodeData.value = null;
+  nextTick(() => {
+    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 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  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;
+}
+
+.instance-detail-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.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;
+  padding: 0 8px;
+}
+
+.instance-detail-tab-item {
+  padding: 0 12px;
+  height: 32px;
+  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>