vite-uni-dev-tool 0.0.12 → 0.0.13

package/dev/components/StorageList/index.vue

@@ -1,170 +0,0 @@
-<template>
-  <view class="storage-content">
-    <view class="storage-control">
-      <FilterInput
-        :modelValue="modelValue"
-        style="width: 100%"
-        placeholder="查询key"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
-      <Tag
-        v-for="item in storageFilerItem"
-        mode="clear"
-        :key="item.label"
-        @click="onChoose(item.value)"
-      >
-        {{ item.label }}
-      </Tag>
-    </view>
-    <view class="storage-list">
-      <view class="storage-item" v-for="item in storageList" :key="item.key">
-        <view class="storage-key">
-          <view class="storage-key-label">
-            <view>key: </view>
-            <view v-html="item._oldKey" />
-          </view>
-          <CloseButton style="margin-left: auto" @click="onRemove(item.key)" />
-        </view>
-
-        <JsonPretty
-          :data="{
-            key: item.key,
-            value: item.value,
-          }"
-          showLength
-          editable
-          @update:data="onUpdateData($event, item)"
-        />
-      </view>
-      <Empty v-if="!storageList || storageList.length === 0" />
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Empty from '../Empty/index.vue';
-import CloseButton from '../CloseButton/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import type { DevTool } from '../../type';
-const props = defineProps<{
-  storageList: DevTool.StorageItem[];
-  modelValue: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'choose', type: string): void;
-  (e: 'remove', key: string): void;
-  (e: 'update:storageList', data: Record<string, any>): void;
-  (e: 'diffValue', value: any): void;
-  (e: 'update:modelValue', value: string): void;
-  (e: 'search', value: string): void;
-}>();
-
-function onUpdateData(
-  data: DevTool.StorageItem,
-  item: DevTool.StorageItem,
-) {
-  const tempList = JSON.parse(JSON.stringify(props.storageList));
-  const index = props.storageList.findIndex(
-    (store) => store.key === item._oldKey,
-  );
-  if (index === -1) return;
-  tempList[index] = {
-    key: data.key,
-    _oldKey: tempList[index]._oldKey,
-    value: data.value,
-  };
-
-  emit('update:storageList', tempList);
-  emit('diffValue', {
-    ...data,
-    _oldKey: tempList[index]._oldKey,
-    key: data.key,
-  });
-}
-
-const storageFilerItem = [
-  {
-    label: '新增',
-    value: 'add',
-  },
-  {
-    label: '刷新',
-    value: 'refresh',
-  },
-  {
-    label: '清除',
-    value: 'clear',
-  },
-];
-function calcValue(value: string) {
-  try {
-    return {
-      value: JSON.parse(value),
-      type: 'object',
-    };
-  } catch (error) {
-    return {
-      value,
-      type: 'string',
-    };
-  }
-}
-function onChoose(type: string) {
-  emit('choose', type);
-}
-function onRemove(key: string) {
-  emit('remove', key);
-}
-</script>
-<style scoped>
-.storage-content {
-  height: 100%;
-  font-size: var(--dev-tool-base-font-size);
-}
-.storage-content .storage-list {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-.storage-content .storage-list .storage-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-}
-.storage-content .storage-list .storage-item .storage-key {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  word-break: break-all;
-}
-.storage-key-label {
-  display: flex;
-  align-items: center;
-}
-.storage-content .storage-list .storage-item .storage-value {
-  word-break: break-all;
-}
-.storage-content .storage-list .storage-item .storage-remove {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin: auto 0 auto 16px;
-  border-radius: 50%;
-  border: 1px solid #000;
-  box-sizing: border-box;
-}
-.storage-control {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 0 16px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-</style>

package/dev/components/SystemInfo/index.vue

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

package/dev/components/Tabs/index.vue

@@ -1,123 +0,0 @@
-<template>
-  <view class="tabs">
-    <scroll-view
-      class="tabs-list"
-      ref="tabsRef"
-      scroll-x="true"
-      enable-flex="true"
-      scroll-with-animation
-      :scrollLeft="scrollLeft"
-      :scroll-into-view="scrollIntoView"
-      @scroll="onScroll"
-    >
-      <view
-        v-for="item in items"
-        :key="item.key"
-        :class="`tabs-item ${
-          item.index === modelValue ? 'tabs-item-active' : ''
-        } `"
-        :id="`tabs-item-${item.index}`"
-        @click="onChangeTabs(item)"
-      >
-        {{ item.label }}
-      </view>
-    </scroll-view>
-    <view class="tabs-extra">
-      <slot name="extra"></slot>
-      <CloseButton style="margin: 0 16px" @click="onClose" />
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import CloseButton from '../CloseButton/index.vue';
-// const activeKey = ref("Console");
-const props = defineProps<{
-  modelValue: number;
-  items: { label: string; key: string; value: any; index: number }[];
-  scrollLeft?: number;
-}>();
-
-const tabsRef = ref();
-
-const emit = defineEmits<{
-  (e: 'close'): void;
-  (e: 'update:modelValue', value: number): void;
-  (e: 'change', value: number): void;
-  (e: 'scroll', value: any): void;
-}>();
-
-const scrollIntoView = computed(() => {
-  return `tabs-item-${props.modelValue}`;
-});
-
-function onChangeTabs(item: {
-  label: string;
-  key: string;
-  value: any;
-  index: number;
-}) {
-  // activeKey.value = item.key;
-  emit('update:modelValue', item.index);
-  emit('change', item.index);
-}
-function onClose() {
-  emit('close');
-}
-
-function onScroll(e: any) {
-  emit('scroll', e);
-}
-</script>
-
-<style scoped>
-.tabs {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-  font-size: var(--dev-tool-base-font-size);
-}
-.tabs .tabs-list {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  overflow: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  white-space: nowrap;
-  width: 100%;
-}
-.tabs-list ::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-.tabs-list ::-webkit-scrollbar-thumb {
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
-.tabs .tabs-item {
-  display: inline-block;
-  padding: 0 16px;
-  height: 32px;
-  line-height: 32px;
-  border-bottom: 1px solid transparent;
-  box-sizing: border-box;
-  transition: all 0.3s;
-  cursor: pointer;
-}
-.tabs .tabs-item-active {
-  color: var(--dev-tool-main-color);
-  border-color: var(--dev-tool-main-color);
-}
-
-.tabs-extra {
-  display: flex;
-  align-items: center;
-}
-</style>

package/dev/components/Tag/index.vue

@@ -1,89 +0,0 @@
-<template>
-  <view
-    :class="`tag tag-${mode} ${active ? 'tag-active' : ''}`"
-    @click="onClick"
-  >
-    <slot></slot>
-  </view>
-</template>
-<script setup lang="ts">
-defineProps<{
-  mode:
-    | 'primary'
-    | 'warn'
-    | 'success'
-    | 'error'
-    | 'info'
-    | 'log'
-    | 'main'
-    | 'clear'
-    | string;
-  active?: boolean;
-}>();
-const emit = defineEmits<{ (e: 'click', event: MouseEvent): void }>();
-function onClick(event: MouseEvent) {
-  emit('click', event);
-}
-</script>
-<style scoped>
-.tag {
-  display: flex;
-  align-items: center;
-  padding: 0 4px;
-  width: min-content;
-  height: 24px;
-  color: #fff;
-  border-radius: 4px;
-  white-space: nowrap;
-  box-sizing: border-box;
-  font-size: var(--dev-tool-tag-font-size);
-  cursor: pointer;
-  transition: all 0.3s;
-}
-.tag-log {
-  color: #000;
-  background-color: var(--dev-tool-border-color);
-  border: 1px solid var(--dev-tool-border-color);
-}
-.tag-info {
-  color: #000;
-  background-color: var(--dev-tool-normal-bg-color);
-  border: 1px solid var(--dev-tool-normal-bg-color);
-}
-.tag-warn {
-  background-color: var(--dev-tool-warn-color);
-  border: 1px solid var(--dev-tool-warn-color);
-}
-.tag-success {
-  background-color: var(--dev-tool-success-color);
-  border: 1px solid var(--dev-tool-success-color);
-}
-.tag-error {
-  background-color: var(--dev-tool-error-color);
-  border: 1px solid var(--dev-tool-error-color);
-}
-.tag-main {
-  background-color: var(--dev-tool-main-color);
-  color: #fff;
-  border: 1px solid var(--dev-tool-main-color);
-}
-
-.tag-primary {
-  color: #fff;
-  background-color: #0958d9;
-  border: 1px solid #0958d9;
-}
-.tag-clear {
-  color: #0958d9;
-  border: 1px solid #0958d9;
-}
-.tag-all {
-  color: #000;
-  border: 1px solid #000;
-}
-
-.tag-active {
-  border-color: var(--dev-tool-main-color);
-  color: var(--dev-tool-main-color);
-}
-</style>

package/dev/components/UniEvent/UniEventItem.vue

@@ -1,126 +0,0 @@
-<template>
-  <view class="uni-event-item">
-    <view class="uni-event-item-row"> {{ eventItem.eventName }} </view>
-    <view class="uni-event-item-row">
-      <Tag mode="info" v-if="eventItem.type == 'on'">
-        {{ eventItem.type }}
-      </Tag>
-      <Tag mode="warn" v-if="eventItem.type == 'once'">
-        {{ eventItem.type }}
-      </Tag>
-      <Tag mode="main" v-if="eventItem.type == 'emit'">
-        {{ eventItem.type }}
-      </Tag>
-      <Tag mode="error" v-if="eventItem.type == 'off'">
-        {{ eventItem.type }}
-      </Tag>
-      <view class="uni-event-item-right"> {{ eventItem.timer }}</view>
-    </view>
-
-    <view
-      :class="`uni-event-item-right ${isUseDevSource ? 'link' : ''}`"
-      @click="onStackClick"
-    >
-      {{ eventItem.stack }}
-    </view>
-
-    <SourceCode
-      v-if="openCode && eventItem.stack"
-      :url="eventItem.stack"
-      :sourceFileServers="sourceFileServers"
-      :mode="mode"
-      :zIndex="zIndex"
-      @close="onCloseCode"
-    />
-  </view>
-</template>
-<script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import SourceCode from '../SourceCode/index.vue';
-import type { DevTool } from '../../type';
-import { computed, ref } from 'vue';
-import { isAndroid, isMockWX } from '../../utils';
-
-const props = defineProps<{
-  eventItem: DevTool.EventItem;
-  mode?: string;
-  useDevSource?: boolean;
-  sourceFileServers?: string[];
-  zIndex?: number;
-}>();
-
-const openCode = ref(false);
-
-const isUseDevSource = computed(() => {
-  return (
-    !isMockWX(props?.eventItem?.stack ?? '') &&
-    props.mode === 'development' &&
-    props.useDevSource
-  );
-});
-
-const isWXLink = computed(() => {
-  console.log('props?.eventItem: ', props?.eventItem);
-  console.log('props.mode: ', props.mode);
-  return (
-    isMockWX(props?.eventItem?.stack ?? '') || props.mode !== 'development'
-  );
-});
-
-function onStackClick() {
-  if (isWXLink.value) {
-    uni.showToast({
-      icon: 'none',
-      title: '[DevTool] 请在小程序真机调试模式下查看源码',
-    });
-    return;
-  }
-
-  if (!isUseDevSource.value) {
-    return;
-  }
-
-  if (isAndroid()) {
-    if (props.sourceFileServers && props.sourceFileServers.length > 0) {
-      openCode.value = true;
-    } else {
-      uni.showToast({
-        icon: 'none',
-        title: '[DevTool] sourceFileServers 配置异常',
-      });
-      uni?.__dev__console?.log('[DevTool] sourceFileServers 配置异常');
-    }
-  } else {
-    openCode.value = true;
-  }
-}
-
-function onCloseCode() {
-  openCode.value = false;
-}
-</script>
-
-<style scoped>
-.uni-event-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-
-.uni-event-item-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 28px;
-  word-break: break-all;
-}
-
-.uni-event-item-right {
-  text-align: right;
-  word-break: break-all;
-}
-.link {
-  cursor: pointer;
-  text-decoration: underline;
-}
-</style>

package/dev/components/UniEvent/index.vue

@@ -1,98 +0,0 @@
-<template>
-  <view class="uni-event-content">
-    <DevToolTitle innerStyle="padding: 0 16px">事件触发统计</DevToolTitle>
-    <view class="uni-event-statistics">
-      <view class="uni-event-statistics-item">
-        <view>on: </view>
-        <Tag mode="log" style="flex: 1; justify-content: center">
-          {{ eventCount?.on ?? 0 }}
-        </Tag>
-      </view>
-      <view class="uni-event-statistics-item">
-        <view>once: </view>
-        <Tag mode="warn" style="flex: 1; justify-content: center">
-          {{ eventCount?.once ?? 0 }}
-        </Tag>
-      </view>
-      <view class="uni-event-statistics-item">
-        <view>emit: </view>
-        <Tag mode="main" style="flex: 1; justify-content: center">
-          {{ eventCount?.emit ?? 0 }}
-        </Tag>
-      </view>
-      <view class="uni-event-statistics-item">
-        <view>off: </view>
-        <Tag mode="error" style="flex: 1; justify-content: center">
-          {{ eventCount?.off ?? 0 }}
-        </Tag>
-      </view>
-    </view>
-    <DevToolTitle innerStyle="padding: 0 16px">
-      事件触发列表
-
-      <Tag mode="clear" style="margin-left: auto" @click="emit('clear')">
-        清空
-      </Tag>
-    </DevToolTitle>
-    <view class="uni-event-list">
-      <UniEventItem
-        v-for="item in eventList"
-        :eventItem="item"
-        :mode="mode"
-        :useDevSource="useDevSource"
-        :sourceFileServers="sourceFileServers"
-        :zIndex="zIndex"
-      />
-      <Empty v-if="!eventList || eventList.length === 0"> </Empty>
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import DevToolTitle from '../DevToolTitle/index.vue';
-import UniEventItem from './UniEventItem.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import type { DevTool } from '@/dev/type';
-
-defineProps<{
-  eventList?: DevTool.EventItem[];
-  eventCount?: DevTool.EventCount;
-  useDevSource?: boolean;
-  mode?: string;
-  sourceFileServers?: string[];
-  zIndex?: number;
-}>();
-
-const emit = defineEmits<{
-  (e: 'clear'): void;
-}>();
-</script>
-<style scoped>
-.uni-event-content {
-  height: 100%;
-  overflow: auto;
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.uni-event-statistics {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding: 0 16px;
-  height: 32px;
-  box-sizing: border-box;
-  gap: 12px;
-}
-.uni-event-statistics-item {
-  display: flex;
-  align-items: center;
-  width: 25%;
-}
-.uni-event-statistics-item view:first-child {
-  margin-right: 8px;
-}
-.uni-event-list {
-  height: calc(100% - 32px * 3);
-  overflow: auto;
-}
-</style>