vite-uni-dev-tool 1.0.0 → 1.2.0

package/dist/v3/components/DevErrorBoundary/index.vue

@@ -0,0 +1,380 @@
+<template>
+  <slot v-if="!hasError"></slot>
+  <view v-else class="dev-error-boundary">
+    <view class="dev-error-card">
+      <view class="dev-error-header">
+        <view class="dev-error-icon-wrapper">
+          <view class="dev-error-icon">!</view>
+          <view class="dev-error-icon-pulse"></view>
+        </view>
+        <view class="dev-error-title-box">
+          <text class="dev-error-title">{{ t('errorBoundary.title') }}</text>
+          <text class="dev-error-subtitle">Runtime Exception Isolated</text>
+        </view>
+      </view>
+
+      <view class="dev-error-body">
+        <view class="dev-error-msg-container">
+          <view class="dev-error-msg-header">
+            <text class="dev-error-msg-label">StackTrace</text>
+            <view class="dev-error-copy" @tap="copyError">
+              <text class="dev-error-copy-text">Copy</text>
+            </view>
+          </view>
+          <scroll-view scroll-y class="dev-error-msg-box">
+            <text class="dev-error-msg">{{ errorMessage }}</text>
+          </scroll-view>
+        </view>
+        <view class="dev-error-tips-box">
+          <view class="dev-error-tips-dot"></view>
+          <text class="dev-error-tips">{{ t('errorBoundary.tips') }}</text>
+        </view>
+      </view>
+
+      <view class="dev-error-footer">
+        <view class="dev-error-btn-retry" @tap="retry">
+          <text class="dev-error-btn-text">{{ t('errorBoundary.retry') }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- Subtle background decoration -->
+    <view class="dev-error-bg-circle-1"></view>
+    <view class="dev-error-bg-circle-2"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onErrorCaptured, onMounted, onUnmounted, nextTick } from 'vue';
+import { i18n } from '../../../i18n/instance';
+import { DEV_ERROR_BOUNDARY_TRIGGER } from '../../../const';
+import { getCurrentPagePath } from '../../../utils';
+
+const t = (key: string) => i18n.t(key);
+
+const hasError = ref(false);
+const errorMessage = ref('');
+
+/**
+ * 处理错误的核心逻辑
+ */
+const handleError = (err: any, info?: string) => {
+  if (hasError.value) return; // 状态锁，防止重复处理
+
+  console.log('[DevTool] Boundary Handling Error:', err?.message || err);
+  hasError.value = true;
+  errorMessage.value =
+    err?.stack || err?.message || err?.toString() || 'Unknown Error';
+
+  // 手动打印到控制台
+  console.error(`[ErrorBoundary]`, err);
+  if (info) console.warn(`[ErrorBoundary] Info: ${info}`);
+
+  // 强制下一帧显示
+  nextTick(() => {
+    hasError.value = true;
+  });
+};
+
+onMounted(() => {
+  // #ifndef H5
+  // 在非 H5 环境（小程序、APP），由于 onErrorCaptured 可能失效，启用全局监听作为核心捕获方案
+  const mountedPath = getCurrentPagePath();
+  uni.$on(DEV_ERROR_BOUNDARY_TRIGGER, (data: any) => {
+    const currentPath = getCurrentPagePath();
+    if (currentPath === mountedPath && !hasError.value) {
+      handleError(data.err, data.info);
+    }
+  });
+  // #endif
+});
+
+onUnmounted(() => {
+  // #ifndef H5
+  uni.$off(DEV_ERROR_BOUNDARY_TRIGGER);
+  // #endif
+});
+
+onErrorCaptured((err: any, _instance: any, info: string) => {
+  // 在 H5 环境，onErrorCaptured 通常能可靠工作
+  // 在其它环境，它可能与全局拦截器同时生效，handleError 内部已有 hasError 锁定
+  handleError(err, info);
+  // 阻止错误继续向上冒泡，防止触发全局拦截器产生的二次 emit
+  return false;
+});
+
+const retry = () => {
+  hasError.value = false;
+  errorMessage.value = '';
+};
+
+const copyError = () => {
+  uni.setClipboardData({
+    data: errorMessage.value,
+    success: () => {
+      uni.showToast({
+        title: 'Copied to clipboard',
+        icon: 'none',
+      });
+    },
+  });
+};
+
+defineExpose({
+  retry,
+});
+</script>
+
+<style scoped>
+.dev-error-boundary {
+  position: fixed;
+  inset: 0;
+  z-index: 995;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 40rpx;
+  background-color: #f6f8fa;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Background elements for premium feel */
+.dev-error-bg-circle-1 {
+  position: absolute;
+  width: 400rpx;
+  height: 400rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgb(255 77 79 / 5%) 0%, transparent 70%);
+  top: -100rpx;
+  right: -100rpx;
+  z-index: 1;
+}
+
+.dev-error-bg-circle-2 {
+  position: absolute;
+  width: 300rpx;
+  height: 300rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgb(24 144 255 / 5%) 0%, transparent 70%);
+  bottom: -50rpx;
+  left: -50rpx;
+  z-index: 1;
+}
+
+.dev-error-card {
+  background-color: rgb(255 255 255 / 95%);
+  backdrop-filter: blur(10px);
+  border-radius: 32rpx;
+  box-shadow:
+    0 10rpx 30rpx rgb(0 0 0 / 4%),
+    0 30rpx 100rpx rgb(0 0 0 / 8%);
+  width: 100%;
+  max-width: 680rpx;
+  overflow: hidden;
+  border: 1rpx solid rgb(255 255 255 / 80%);
+  animation: dev-premium-entrance 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 2;
+}
+
+@keyframes dev-premium-entrance {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(40rpx);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.dev-error-header {
+  display: flex;
+  align-items: center;
+  padding: 40rpx;
+  background: linear-gradient(135deg, #fff7f6 0%, #fff 100%);
+  border-bottom: 2rpx solid #f0f0f0;
+}
+
+.dev-error-icon-wrapper {
+  position: relative;
+  width: 64rpx;
+  height: 64rpx;
+  background: linear-gradient(135deg, #ff7875 0%, #ff4d4f 100%);
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 28rpx;
+  flex-shrink: 0;
+  box-shadow: 0 8rpx 20rpx rgb(255 77 79 / 25%);
+}
+
+.dev-error-icon {
+  color: #fff;
+  font-size: 36rpx;
+  font-weight: 900;
+  z-index: 3;
+}
+
+.dev-error-icon-pulse {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #ff4d4f;
+  border-radius: 20rpx;
+  opacity: 0.4;
+  animation: dev-icon-pulse 2s infinite;
+  z-index: 2;
+}
+
+@keyframes dev-icon-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+
+  70% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.dev-error-title-box {
+  display: flex;
+  flex-direction: column;
+}
+
+.dev-error-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #1a1a1a;
+  letter-spacing: -0.5rpx;
+}
+
+.dev-error-subtitle {
+  font-size: 20rpx;
+  color: #ff4d4f;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 1rpx;
+  margin-top: 4rpx;
+}
+
+.dev-error-body {
+  padding: 40rpx;
+}
+
+.dev-error-msg-container {
+  border-radius: 20rpx;
+  background-color: #141414;
+  overflow: hidden;
+  margin-bottom: 30rpx;
+  box-shadow: inset 0 2rpx 10rpx rgb(0 0 0 / 20%);
+}
+
+.dev-error-msg-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  background-color: #1a1a1a;
+  border-bottom: 1rpx solid #2a2a2a;
+}
+
+.dev-error-msg-label {
+  color: #8c8c8c;
+  font-size: 20rpx;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.dev-error-copy {
+  padding: 4rpx 16rpx;
+  background-color: #333;
+  border-radius: 8rpx;
+}
+
+.dev-error-copy:active {
+  background-color: #444;
+}
+
+.dev-error-copy-text {
+  color: #d9d9d9;
+  font-size: 20rpx;
+}
+
+.dev-error-msg-box {
+  padding: 24rpx;
+  max-height: 360rpx;
+}
+
+.dev-error-msg {
+  font-size: 22rpx;
+  color: #ff7875;
+  font-family:
+    'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  word-break: break-all;
+  line-height: 1.6;
+}
+
+.dev-error-tips-box {
+  display: flex;
+  align-items: center;
+  background-color: #fffaf0;
+  padding: 20rpx 24rpx;
+  border-radius: 12rpx;
+  border: 1rpx solid #ffe58f;
+}
+
+.dev-error-tips-dot {
+  width: 10rpx;
+  height: 10rpx;
+  background-color: #faad14;
+  border-radius: 50%;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+
+.dev-error-tips {
+  font-size: 24rpx;
+  color: #856404;
+  line-height: 1.4;
+  flex: 1;
+}
+
+.dev-error-footer {
+  padding: 0 40rpx 50rpx;
+}
+
+.dev-error-btn-retry {
+  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+  height: 88rpx;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgb(24 144 255 / 30%);
+  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.dev-error-btn-retry:active {
+  transform: scale(0.95);
+  box-shadow: 0 4rpx 12rpx rgb(24 144 255 / 20%);
+}
+
+.dev-error-btn-text {
+  color: #fff;
+  font-size: 30rpx;
+  font-weight: 600;
+}
+</style>

package/dist/v3/{DraggableContainer → components/DraggableContainer}/index.vue

@@ -33,7 +33,7 @@ export default {
  * 适用于 DevTool 窗口化及悬浮窗展示
  */
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
-import { debounce } from '../../utils';
+import { debounce } from '../../../utils';
 
 const props = withDefaults(
   defineProps<{

package/dist/v3/{FilterInput → components/FilterInput}/index.vue

@@ -10,7 +10,7 @@
   </view>
 </template>
 <script lang="ts" setup>
-import { debounce } from '../../utils';
+import { debounce } from '../../../utils';
 defineProps<{
   placeholder?: string;
   modelValue?: string;

package/dist/v3/{JsonPretty → components/JsonPretty}/components/CheckController/index.vue

@@ -30,7 +30,7 @@
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getThemeMainColor } from '../../../styles/theme';
+import { getThemeMainColor } from '../../../../styles/theme';
 const props = defineProps<{
   theme?: string;
   checked: boolean;

package/dist/v3/{JsonPretty → components/JsonPretty}/components/TreeNode/index.vue

@@ -11,7 +11,12 @@
     @click="handleNodeClick"
     @mouseover="handleNodeMouseover"
     :style="customStyle">
-    <view v-if="showLineNumber" class="json-pretty-node-index">
+    <view
+      v-if="showLineNumber"
+      class="json-pretty-node-index"
+      :style="{
+        width: `${Number(node.total?.toString().length || 1) * 8 + 10}px`,
+      }">
       {{ node.id + 1 }}
     </view>
 
@@ -98,7 +103,7 @@ import Carets from '../Carets/index.vue';
 import { getDataType, isFunction, stringToAutoType } from '../../utils';
 
 import type { NodeDataType, TreeNodeProps } from '../../type';
-import { getValueByPath } from '../../../../utils';
+import { getValueByPath } from '../../../../../utils';
 
 const props = withDefaults(defineProps<TreeNodeProps>(), {
   rootPath: 'root',
@@ -313,9 +318,10 @@ const handleCopy = () => {
 }
 
 .json-pretty-node-index {
-  position: absolute;
-  right: 100%;
-  margin-right: 4px;
+  flex-shrink: 0;
+  text-align: right;
+  margin-right: 12px;
+  color: var(--json-pretty-comment-color);
   user-select: none;
 }
 

package/dist/v3/{JsonPretty → components/JsonPretty}/index.vue

@@ -3,18 +3,10 @@
     :class="{
       'json-pretty-tree': true,
       'is-virtual': virtual,
+      'show-line-number': showLineNumber,
       dark: theme === 'dark',
     }"
-    :style="
-      showLineNumber
-        ? {
-            paddingLeft: `${
-              Number(originFlatData.length.toString().length) * 12
-            }px`,
-            ...style,
-          }
-        : style
-    ">
+    :style="style">
     <Empty v-if="isEmpty" />
     <VirtualList
       v-else-if="autoVirtual"
@@ -132,7 +124,7 @@ import AutoSize from '../VirtualList/AutoSize.vue';
 import { emitError, jsonFlatten, cloneDeep, isFunction } from './utils';
 
 import type { NodeDataType, Tree } from './type';
-import { setValueByPath } from '../../utils';
+import { setValueByPath } from '../../../utils';
 import Empty from '../Empty/index.vue';
 
 // 定义 emits 类型
@@ -174,10 +166,16 @@ const props = withDefaults(defineProps<Tree>(), {
 });
 const emits = defineEmits<Emits>();
 
-const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
+const originFlatData = computed(() => {
+  const result = jsonFlatten(props.data, props.rootPath);
+  const total = result.length;
+  return result.map((item) => ({ ...item, total }));
+});
 
 const pageSize = computed(() => {
-  return Math.ceil(props.height / props.itemHeight) + 5;
+  const h = typeof props.height === 'number' ? props.height : 400;
+  const ih = typeof props.itemHeight === 'number' ? props.itemHeight : 20;
+  return Math.ceil(h / ih) + 5;
 });
 
 // 初始化折叠路径
@@ -505,6 +503,11 @@ onUnmounted(() => {
   overflow: auto;
   position: relative;
   width: 100%;
+  box-sizing: border-box;
+}
+
+.json-pretty-tree.show-line-number {
+  padding-left: 10px;
 }
 
 .json-pretty-tree.is-virtual {

package/dist/v3/{JsonPretty → components/JsonPretty}/type.ts

@@ -11,6 +11,7 @@ export type JsonPrettyNodeProps = {
 };
 export interface NodeDataType extends JSONFlattenReturnType {
   id: number;
+  total?: number;
 }
 
 export interface JSONFlattenOptions {

package/dist/v3/{JsonPretty → components/JsonPretty}/utils/index.ts

@@ -2,7 +2,7 @@ import type {
   JSONDataType,
   JSONFlattenOptions,
   JSONFlattenReturnType,
-} from '../type';
+} from '../../../type';
 
 export function emitError(message: string): void {
   throw new Error(`[JsonPretty] ${message}`);

package/dist/v3/{MovableContainer → components/MovableContainer}/index.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { debounce } from '../../utils';
+import { debounce } from '../../../utils';
 import { ref, computed, watch } from 'vue';
 
 const props = withDefaults(
@@ -51,12 +51,16 @@ watch([() => props.x, () => props.y], ([newX, newY]) => {
 });
 
 const areaStyle = computed(() => {
-  const { _paddingBottom, paddingTop, ...rest } = (props.customStyle ||
-    {}) as any;
+  const style = (props.customStyle || {}) as any;
+  const { paddingBottom, paddingTop, ...rest } = style;
+
+  const top = parseInt(paddingTop) || 0;
+  const bottom = parseInt(paddingBottom) || 0;
+
   return {
     ...rest,
-    top: paddingTop || 0,
-    height: props.contentHeight + 'px',
+    top: top + 'px',
+    height: props.contentHeight + bottom + 'px',
     position: 'fixed' as const,
     left: 0,
     width: '100vw',

package/dist/v3/{Pick → components/Pick}/index.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script lang="ts" setup>
-import { debounce } from '../../utils';
+import { debounce } from '../../../utils';
 import { ref, computed } from 'vue';
 
 const props = defineProps<{

package/dist/v3/{Tabs → components/Tabs}/index.vue

@@ -16,7 +16,10 @@
         :class="`tabs-item ${idx === modelValue ? 'tabs-item-active' : ''} `"
         :id="`tabs-item-${idx}`"
         @click="onChangeTabs(idx)">
-        {{ item.label }}
+        <view class="tabs-item-content">
+          <text v-if="item.icon" class="tabs-item-icon">{{ item.icon }}</text>
+          <text>{{ item.label }}</text>
+        </view>
       </view>
     </scroll-view>
     <view class="tabs-extra">
@@ -31,7 +34,13 @@ import { computed, ref, onMounted } from 'vue';
 import CircularButton from '../CircularButton/index.vue';
 
 defineProps<{
-  items: { label: string; key: string; value: any; index: number }[];
+  items: {
+    label: string;
+    key: string;
+    value: any;
+    index: number;
+    icon?: string;
+  }[];
   scrollLeft?: number;
 }>();
 
@@ -104,18 +113,35 @@ function onScroll(e: any) {
 
 .tabs-item {
   display: inline-block;
-  padding: 0 16px;
+  padding: 0 12px;
   height: 32px;
   line-height: 32px;
-  border-bottom: 1px solid transparent;
+  border-bottom: 2px solid transparent;
   box-sizing: border-box;
   transition: all 0.3s;
   cursor: pointer;
+  color: var(--dev-tool-text-color-secondary);
+}
+
+.tabs-item-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tabs-item-icon {
+  font-size: 14px;
+  opacity: 0.8;
 }
 
 .tabs-item-active {
   color: var(--dev-tool-main-color);
   border-color: var(--dev-tool-main-color);
+  background: rgb(var(--dev-tool-main-color-rgb), 0.05);
+}
+
+.tabs-item-active .tabs-item-icon {
+  opacity: 1;
 }
 
 .tabs-extra {

package/dist/v3/{VirtualList → components/VirtualList}/AutoSize.vue

@@ -4,8 +4,8 @@
   </view>
 </template>
 <script lang="ts" setup>
+import { uniqueId } from '../../../utils';
 import { getCurrentInstance, onMounted, nextTick } from 'vue';
-import { uniqueId } from '../../utils';
 
 const props = defineProps<{
   index: number;

package/dist/v3/{VirtualList → components/VirtualList}/index.vue

@@ -380,6 +380,10 @@ watch(
   height: 100%;
 }
 
+:deep(.virtual-list-scroll .uni-scroll-view .uni-scroll-view) {
+  overflow: auto !important;
+}
+
 .virtual-list-measure-inner {
   /* width: max-content; */
   min-width: 100%;