vite-uni-dev-tool 0.0.12 → 0.0.14

package/{dev/components → dist/v3}/DevTool/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="dev-tool">
+  <view :class="`dev-tool dev-tool-${theme}`">
     <DevToolButton
       v-if="devToolButtonVisible"
       :buttonSize="buttonProps.buttonSize"
@@ -17,8 +17,10 @@
       :mode="mode"
       :useDevSource="useDevSource"
       :zIndex="zIndex + 1"
+      :theme="theme"
       @close="onShowDevToolWindow(false)"
       @sendMessage="onSendMessage"
+      @changeTheme="onChangeTheme"
     />
   </view>
 </template>
@@ -64,6 +66,8 @@ const zIndex = ref(1000);
 
 const useDevSource = ref(false);
 
+const theme = ref<string>('dart');
+
 function onDevToolButtonClick() {
   onShowDevToolWindow(true);
   onSendMessage({
@@ -113,6 +117,10 @@ function onDevOptionSend(options: DevTool.DevToolOptions) {
   }
 }
 
+function onChangeTheme(t: string) {
+  theme.value = t;
+}
+
 onLoad(() => {
   // 共享状态
 
@@ -169,7 +177,6 @@ onHide(() => {
 <style scoped>
 .dev-tool {
   --dev-tool-main-color: #9254de;
-  --dev-tool-border-color: #f0f0f0;
   --dev-tool-normal-bg-color: #f9f9f9;
   --dev-tool-warn-color: #ffa940;
   --dev-tool-warn-bg-color: #fff7e6;
@@ -181,8 +188,30 @@ onHide(() => {
   --dev-tool-base-font-size: 12px;
   --dev-tool-tag-font-size: 10px;
   --dev-tool-tips-font-size: 10px;
-  font-size: 12px;
-
   -webkit-tap-highlight-color: transparent;
 }
+.dev-tool-light {
+  --dev-tool-bg-color: rgba(255, 255, 255, 0.8);
+  --dev-tool-bg2-color: rgba(255, 255, 255, 0.95);
+
+  --dev-tool-text-color: #000;
+  --dev-tool-border-color: #f0f0f0;
+  --dev-tool-info-color: #9c9c9c;
+  --dev-tool-log-color: #f9f9f9;
+  --dev-tool-nil-color: #020201;
+  --dev-tool-string-color: #888888;
+  --dev-tool-number-color: #1d8ce0;
+  --dev-tool-boolean-color: #1d8ce0;
+  --dev-tool-symbol-color: bisque;
+}
+
+.dev-tool-dart {
+  --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
+  --dev-tool-bg2-color: rgba(43, 43, 43, 0.8);
+
+  --dev-tool-text-color: #fff;
+  --dev-tool-border-color: #3d3d3d;
+
+  --dev-tool-log-color: #f9f9f9;
+}
 </style>

package/{dev/components → dist/v3}/DevToolWindow/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <view class="dev-tool-window" v-if="open">
+  <view
+    class="dev-tool-window"
+    v-if="open"
+    :style="{ zIndex: zIndex }"
+    :class="`dev-tool-window dev-tool-window-${theme}`"
+  >
     <!-- :style="{
       height: `${systemInfo?.safeArea?.height}px`
     }" -->
@@ -143,6 +148,7 @@
           v-if="swiperShow(15)"
           :devToolVisible="devToolVisible"
           :sizeFormat="sizeFormat"
+          :theme="theme"
           @showDevButton="onShowDevButton"
           @restartDevTool="onRestartDevTool"
           @restartApp="onRestartApp"
@@ -150,6 +156,7 @@
           @screenshot="onScreenshot"
           @clearCache="onClearCache"
           @destroyDevTool="onDestroyDevTool"
+          @changeTheme="onChangeTheme"
         />
       </swiper-item>
     </swiper>
@@ -362,6 +369,7 @@ const searchUpload = ref('');
 const searchWs = ref('');
 const searchRoute = ref('');
 const searchStorage = ref('');
+const theme = ref('light');
 
 const props = withDefaults(
   defineProps<{
@@ -573,10 +581,15 @@ onMounted(() => {
     currentConsoleType.value = devToolInfo?.currentConsoleType || 'all';
     currentNetworkType.value = devToolInfo?.currentNetworkType || 'all';
     tabScrollLeft.value = devToolInfo?.tabScrollLeft || 0;
+    theme.value = devToolInfo?.theme || 'light';
   }
   if (props.data) {
     listenPostMessage(props.data);
   }
+
+  uni.onThemeChange((res) => {
+    theme.value = res.theme;
+  });
 });
 
 onLoad(() => {
@@ -986,6 +999,14 @@ function onDestroyDevTool() {
   });
 }
 
+function onChangeTheme(t: string) {
+  theme.value = t;
+
+  setDevToolInfo({
+    theme: t,
+  });
+}
+
 function onChangeVuex(value: Record<string, any>) {
   basicSendMessage({
     type: DEV_VUEX_CHANGE,
@@ -1003,6 +1024,20 @@ function onChangePinia(value: Record<string, any>) {
 
 <style scoped>
 .dev-tool-window {
+  --dev-tool-main-color: #9254de;
+  --dev-tool-normal-bg-color: #f9f9f9;
+  --dev-tool-warn-color: #ffa940;
+  --dev-tool-warn-bg-color: #fff7e6;
+  --dev-tool-error-color: #ff4d4f;
+  --dev-tool-error-bg-color: #fff1f0;
+  --dev-tool-success-color: #bae637;
+  --dev-tool-success-bg-color: #fcffe6;
+
+  --dev-tool-base-font-size: 12px;
+  --dev-tool-tag-font-size: 10px;
+  --dev-tool-tips-font-size: 10px;
+  -webkit-tap-highlight-color: transparent;
+
   position: fixed;
   top: 0;
   left: 0;
@@ -1018,19 +1053,47 @@ function onChangePinia(value: Record<string, any>) {
   width: 100vw;
   height: 100vh;
   font-size: 14px;
+  color: var(--dev-tool-text-color);
   box-sizing: border-box;
+  transition: color 0.3s;
+}
+
+.dev-tool-window-light {
+  --dev-tool-bg-color: rgba(255, 255, 255, 0.8);
+  --dev-tool-bg2-color: rgba(255, 255, 255, 0.95);
+
+  --dev-tool-text-color: #000;
+  --dev-tool-border-color: #f0f0f0;
+  --dev-tool-info-color: #9c9c9c;
+  --dev-tool-log-color: #f9f9f9;
+  --dev-tool-nil-color: #020201;
+  --dev-tool-string-color: #888888;
+  --dev-tool-number-color: #1d8ce0;
+  --dev-tool-boolean-color: #1d8ce0;
+  --dev-tool-symbol-color: bisque;
 }
-.dev-tool-window .dev-tool-window-bg {
+.dev-tool-window-dart {
+  --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
+  --dev-tool-bg2-color: rgba(43, 43, 43, 0.8);
+
+  --dev-tool-text-color: #fff;
+  --dev-tool-border-color: #3d3d3d;
+
+  --dev-tool-log-color: #f9f9f9;
+}
+
+.dev-tool-window-bg {
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: rgba(255, 255, 255, 0.8);
+  background-color: var(--dev-tool-bg-color);
   backdrop-filter: blur(6px);
+  transition: background-color 0.3s;
 }
-.dev-tool-window .dev-tool-window-container {
+.dev-tool-window-container {
   height: calc(100% - 32px);
   overflow: auto;
 }

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

@@ -56,10 +56,10 @@ const debounceInput = debounce(onInput, 500);
   height: 24px;
 
   border-radius: 4px;
-  border: 1px solid #eee;
+  border: 1px solid var(--dev-tool-border-color);
 
-  background-color: #fff;
-  transition: max-width 0.3s;
+  background-color: var(--dev-tool-bg-color);
+  transition: background-color 0.3s;
   box-sizing: border-box;
 }
 
@@ -69,10 +69,11 @@ const debounceInput = debounce(onInput, 500);
   box-sizing: border-box;
   border-radius: 5;
   font-family: inherit;
-  color: #000;
+  color: var(--dev-tool-text-color);
   font-weight: 400;
   font: unset;
   height: 24px;
+  transition: color 0.3s;
 }
 
 .filter-input-clear {

package/dist/v3/JsonPretty/hooks/useClipboard.d.ts

@@ -0,0 +1,4 @@
+export declare function useClipboard(): {
+    copy: (source: string) => Promise<void>;
+};
+//# sourceMappingURL=useClipboard.d.ts.map

package/dist/v3/JsonPretty/hooks/useClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboard.d.ts","sourceRoot":"","sources":["../../../../dev/v3/JsonPretty/hooks/useClipboard.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY;mBAGE,MAAM;EAenC"}

package/dist/v3/JsonPretty/hooks/useClipboard.ts

@@ -0,0 +1,21 @@
+import { ref } from "vue";
+
+export function useClipboard() {
+  const copied = ref(false);
+
+  const copy = async (source: string) => {
+    try {
+      await navigator.clipboard.writeText(source);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 300);
+    } catch (err) {
+      console.error("[json-pretty] Copy failed: ", err);
+    }
+  };
+
+  return {
+    copy
+  };
+}

package/dist/v3/JsonPretty/hooks/useError.d.ts

@@ -0,0 +1,8 @@
+type UseErrorOptions = {
+    emitListener: boolean;
+};
+export declare function useError(message: string, { emitListener }: UseErrorOptions): {
+    emit: () => never;
+};
+export {};
+//# sourceMappingURL=useError.d.ts.map

package/dist/v3/JsonPretty/hooks/useError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useError.d.ts","sourceRoot":"","sources":["../../../../dev/v3/JsonPretty/hooks/useError.ts"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG;IACrB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,eAAe;;EAc1E"}

package/dist/v3/JsonPretty/hooks/useError.ts

@@ -0,0 +1,21 @@
+import { watchEffect } from "vue";
+
+type UseErrorOptions = {
+  emitListener: boolean;
+};
+
+export function useError(message: string, { emitListener }: UseErrorOptions) {
+  const emit = () => {
+    throw new Error(`[VueJsonPretty] ${message}`);
+  };
+
+  watchEffect(() => {
+    if (emitListener) {
+      emit();
+    }
+  });
+
+  return {
+    emit
+  };
+}

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

@@ -69,7 +69,7 @@
     </VirtualListPro>
     <template v-else>
       <TreeNode
-        v-for="item in state?.visibleData"
+        v-for="item in flatData"
         :key="item.id"
         :data="data"
         :rootPath="rootPath"
@@ -300,9 +300,9 @@ const updateVisibleData = (scrollTop: number = 0) => {
 };
 
 // 事件处理
-const handleTreeScroll = (e: ScrollEvent) => {
-  updateVisibleData(e?.detail?.scrollTop ?? 0);
-};
+// const handleTreeScroll = (e: ScrollEvent) => {
+//   // updateVisibleData(e?.detail?.scrollTop ?? 0);
+// };
 
 const handleSelectedChange = ({ path }: NodeDataType) => {
   const type = props.selectableType;
@@ -379,11 +379,11 @@ watchEffect(() => {
   }
 });
 
-watchEffect(() => {
-  if (flatData.value) {
-    updateVisibleData();
-  }
-});
+// watchEffect(() => {
+//   if (flatData.value) {
+//     // updateVisibleData();
+//   }
+// });
 
 watch(
   () => props.deep,
@@ -415,7 +415,7 @@ watch(
 
 // 生命周期钩子
 onMounted(() => {
-  updateVisibleData();
+  // updateVisibleData();
 });
 
 onUpdated(() => {

package/dist/v3/JsonPretty/type.d.ts

@@ -0,0 +1,93 @@
+import { 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>;
+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;
+}
+export {};
+//# sourceMappingURL=type.d.ts.map

package/dist/v3/JsonPretty/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../dev/v3/JsonPretty/type.ts"],"names":[],"mappings":"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"}

package/dist/v3/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'
+}

package/dist/v3/JsonPretty/utils/index.d.ts

@@ -0,0 +1,10 @@
+import { JSONDataType, JSONFlattenOptions, JSONFlattenReturnType } from '../type';
+
+export declare function emitError(message: string): void;
+export declare function getDataType(value: unknown): string;
+export declare function jsonFlatten(data: JSONDataType, path?: string, level?: number, options?: JSONFlattenOptions): JSONFlattenReturnType[];
+export declare function arrFlat<T extends unknown[]>(arr: T): unknown[];
+export declare function cloneDeep<T extends unknown>(source: T, hash?: WeakMap<object, any>): T;
+export declare function stringToAutoType(source: string): unknown;
+export declare function isFunction(value: unknown): value is Function;
+//# sourceMappingURL=index.d.ts.map

package/dist/v3/JsonPretty/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../dev/v3/JsonPretty/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAE/C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAElD;AAED,wBAAgB,WAAW,CACzB,IAAI,EAAE,YAAY,EAClB,IAAI,SAAS,EACb,KAAK,SAAI,EACT,OAAO,CAAC,EAAE,kBAAkB,GAC3B,qBAAqB,EAAE,CAqFzB;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,OAAO,EAAE,CAe9D;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,OAAO,EACzC,MAAM,EAAE,CAAC,EACT,IAAI,uBAAgB,GACnB,CAAC,CAmBH;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAoBxD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,QAAQ,CAE5D"}

package/{dev/components → dist/v3}/NetworkList/NetworkDetail.vue

@@ -156,7 +156,7 @@ function onClose() {
   left: 0;
   padding: 0 16px;
 
-  background-color: rgba(255, 255, 255, 0.95);
+  background-color: var(--dev-tool-bg-color);
   box-sizing: border-box;
 }
 .network-detail .network-detail-control {
@@ -185,7 +185,7 @@ function onClose() {
 .network-detail .network-detail-header .net-detail-item > view:first-child {
   white-space: nowrap;
   margin-right: 8px;
-  color: #616161;
+  color: var(--dev-tool-info-color);
 }
 .network-detail .network-detail-payload {
   word-break: break-all;

package/{dev/components → dist/v3}/NetworkList/NetworkItem.vue

@@ -103,7 +103,8 @@ function onClose() {
   align-items: center;
   justify-content: space-between;
   margin-top: 4px;
-  color: #616161;
+  color: var(--dev-tool-text-color);
+  transition: color 0.3s;
 }
 .slide-fade-enter-active {
   transition: all 0.8s ease-out;