vite-uni-dev-tool 0.0.11 → 0.0.13

package/dev/components/RouteList/index.vue

@@ -1,110 +0,0 @@
-<template>
-  <view class="route-content">
-    <view class="route-control">
-      <FilterInput
-        style="width: 100%"
-        placeholder="搜索name/path"
-        :modelValue="modelValue"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
-      <Tag mode="clear" @click="onRefresh">刷新</Tag>
-    </view>
-
-    <VirtualListPro :data="routeList" :pageSize="10" className="route-list">
-      <template v-slot="{ list, start }">
-        <AutoSize
-          v-for="(item, index) in list"
-          :index="start + index"
-          :key="start + index"
-        >
-          <view class="route-item">
-            <view class="route-item-name">
-              <view v-html="item.name" />
-              <Tag v-if="item.type" mode="info">{{ item.type }}</Tag>
-              <Tag mode="warn" v-if="item.index === 4 || item.index === 3">
-                当前页
-              </Tag>
-              <Tag mode="primary" v-if="item.index === 4 || item.index === 2">
-                启动页
-              </Tag>
-            </view>
-            <view class="route-item-path">
-              <view v-html="item.path" />
-              <Tag mode="main" @click="onGoTo(item)">跳转</Tag>
-            </view>
-          </view>
-        </AutoSize>
-        <Empty v-if="!routeList || routeList.length === 0" />
-      </template>
-    </VirtualListPro>
-  </view>
-</template>
-<script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import type { DevTool } from '../../type';
-import VirtualListPro from '../VirtualListPro/index.vue';
-import AutoSize from '../VirtualListPro/AutoSize.vue';
-
-defineProps<{ routeList: DevTool.Page[]; modelValue?: string }>();
-const emit = defineEmits<{
-  (e: 'goTo', params: DevTool.Page): void;
-  (e: 'search', value: string): void;
-  (e: 'update:modelValue', value: string): void;
-  (e: 'routeRefresh'): void;
-}>();
-
-function onGoTo(page: DevTool.Page) {
-  emit('goTo', page);
-}
-function onRefresh() {
-  emit('routeRefresh');
-}
-</script>
-<style scoped>
-.route-content {
-  height: 100%;
-
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.route-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;
-}
-
-.route-list {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-.route-content .route-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-}
-.route-content .route-item .route-item-name {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  gap: 12px;
-}
-
-.route-content .route-item .route-item-path {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  word-break: break-all;
-}
-/* #ifdef APP-PLUS */
-.route-content .route-item .route-item-path :deep(.tag) {
-  margin-left: 16px;
-}
-/* #endif */
-</style>

package/dev/components/RunJS/index.vue

@@ -1,128 +0,0 @@
-<template>
-  <view class="run-js">
-    <view class="run-js-control">
-      <FilterInput
-        :modelValue="modelValue"
-        placeholder="查询"
-        @search="emit('search', $event)"
-        @update:modelValue="emit('update:modelValue', $event)"
-      />
-      <Tag mode="clear" @click="emit('clear')">清空</Tag>
-    </view>
-    <view class="run-js-list">
-      <view class="run-js-item" v-for="item in runJSList">
-        <view :class="`run-js-item-icon run-js-item-${item.mode}`"></view>
-        <view class="run-js-item-duration" v-if="item.mode === 'output'">
-          {{ item.duration }}ms
-        </view>
-        <view
-          class="run-js-item-content"
-          v-html="item.mode === 'input' ? item.code : item.result"
-        >
-        </view>
-      </view>
-      <view class="run-js-item">
-        <view class="run-js-item-icon run-js-item-input"> </view>
-
-        <input v-model="code" class="run-js-input" @confirm="onConfirm" />
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { DevTool } from '../../type';
-import FilterInput from '../FilterInput/index.vue';
-import Tag from '../Tag/index.vue';
-
-defineProps<{ runJSList: DevTool.RunJSItem[]; modelValue: string }>();
-
-const emit = defineEmits<{
-  (e: 'search', value: string): void;
-  (e: 'update:modelValue', value: string): void;
-  (e: 'clear'): void;
-  (e: 'run', value: string): void;
-}>();
-const code = ref('');
-function onConfirm() {
-  const value = code.value;
-  if (!value) return;
-  code.value = '';
-  setTimeout(() => {
-    emit('run', value);
-  }, 100);
-}
-</script>
-<style scoped>
-.run-js {
-  height: 100%;
-  font-size: var(--dev-tool-base-font-size);
-}
-.run-js-control {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0 16px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-
-.run-js-list {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-
-.run-js-item {
-  position: relative;
-  display: flex;
-  padding: 0 16px;
-  min-height: 28px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  overflow: hidden;
-}
-
-.run-js-item-icon {
-  width: 8px;
-  height: 8px;
-  border: 1px solid #000;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  overflow: hidden;
-}
-
-.run-js-item-input {
-  margin: 10px 0 10px -4px;
-  transform: rotate(45deg);
-}
-
-.run-js-item-output {
-  margin: 10px -4px 10px 0px;
-  transform: rotate(-135deg);
-}
-
-.run-js-item-content {
-  margin-left: 16px;
-  min-height: 28px;
-  line-height: 28px;
-  white-space: pre-line;
-  word-break: break-all;
-}
-
-.run-js-input {
-  margin: 1px 0 1px 16px;
-  min-height: 26px;
-  width: 100%;
-  border: 1px solid transparent;
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.run-js-item-duration {
-  position: absolute;
-  top: 2px;
-  right: 16px;
-  height: 24px;
-  line-height: 24px;
-}
-</style>

package/dev/components/SettingList/index.vue

@@ -1,225 +0,0 @@
-<template>
-  <view class="setting-content">
-    <view class="setting-item">
-      <DevToolTitle>DevTool</DevToolTitle>
-      <view class="setting-item-content">
-        <view class="setting-row">
-          <view>显示调试按钮：</view>
-          <Checkbox
-            v-model="setting.showDevButton"
-            @change="onChangeShowDevButton"
-          />
-        </view>
-        <view class="setting-tips"> 取消后将不在展示调试按钮 </view>
-        <view class="setting-row">
-          <view>重启调试器：</view>
-        </view>
-
-        <view class="setting-tips">点击后将会重启调试器</view>
-        <DButton class="setting-button" @click="onRestartDevTool(true)">
-          重启调试器
-        </DButton>
-
-        <view class="setting-row">
-          <view>销毁调试器：</view>
-        </view>
-
-        <view class="setting-tips">
-          点击后将会销毁调试器，销毁后不再接收调试信息，需要通过 createDevTool()
-          重新创建
-        </view>
-        <DButton class="setting-button" @click="onDestructionDevTool">
-          销毁调试器
-        </DButton>
-
-        <view class="setting-row">
-          <view>重启APP：</view>
-        </view>
-        <view class="setting-tips">点击后将会重启APP</view>
-        <DButton class="setting-button" @click="onRestartApp(true)">
-          重启APP
-        </DButton>
-        <view class="setting-row">
-          <view>占用存储空间：{{ sizeFormat }}</view>
-        </view>
-        <view class="setting-tips">
-          当前所有信息占用的存储空间,只会清除 Console, Network, Upload,
-          Websocket, UniEvent
-        </view>
-        <DButton class="setting-button" @click="onClearCache">
-          清除缓存
-        </DButton>
-      </view>
-    </view>
-    <view class="setting-item">
-      <DevToolTitle>Log</DevToolTitle>
-      <view class="setting-item-content">
-        <view class="setting-row">
-          <view>导出当前日志信息：</view>
-          <Checkbox v-model="setting.exportLog" />
-        </view>
-        <view class="setting-tips">勾选后将会导出当前的Log</view>
-        <view class="setting-row">
-          <view>导出当前网络信息：</view>
-          <Checkbox v-model="setting.exportNetwork" />
-        </view>
-        <view class="setting-tips">勾选后将会导出当前的Network</view>
-        <view class="setting-row">
-          <view>导出当前上传信息：</view>
-          <Checkbox v-model="setting.exportUpload" />
-        </view>
-        <view class="setting-tips">勾选后将会导出当前的Upload</view>
-        <view class="setting-row">
-          <view>导出当前套接字信息：</view>
-          <Checkbox v-model="setting.exportWebsocket" />
-        </view>
-        <view class="setting-tips">勾选后将会导出当前的Websocket</view>
-        <view class="setting-row">
-          <view>导出当前缓存信息：</view>
-          <Checkbox v-model="setting.exportStorage" />
-        </view>
-        <view class="setting-tips">
-          勾选后将会导出当前的Storage, Vuex, Pinia
-        </view>
-        <view class="setting-row">
-          <view>导出当前窗口信息：</view>
-          <Checkbox v-model="setting.exportWindow" />
-        </view>
-        <view class="setting-tips">勾选后将会导出当前的Window</view>
-
-        <view class="setting-row">
-          <view>导出当前设备信息：</view>
-          <Checkbox v-model="setting.exportDevice" />
-        </view>
-        <view class="setting-tips">勾选后将会导出当前的Device</view>
-
-        <view class="setting-row">
-          <view>导出当前系统信息：</view>
-          <Checkbox v-model="setting.exportSystem" />
-        </view>
-        <view class="setting-tips">勾选后将会导出当前的System</view>
-
-        <DButton class="setting-button" @click="onExportLog"> 导出 </DButton>
-      </view>
-    </view>
-
-    <!-- 
-    <view class="setting-item">
-      <view class="setting-item-title">截图</view>
-      <DButton
-        class="setting-button"
-        
-        @click="onScreenshot"
-      >
-        截图当前路由
-      </DButton>
-    </view> 
-    -->
-  </view>
-</template>
-<script lang="ts" setup>
-import { reactive } from 'vue';
-import Checkbox from '../Checkbox/index.vue';
-import DButton from '../Button/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-const props = defineProps<{
-  devToolVisible?: boolean;
-  sizeFormat?: string;
-}>();
-const setting = reactive({
-  showDevButton: props.devToolVisible,
-
-  restartDevTool: false,
-  restartApp: false,
-  exportLog: false,
-  exportNetwork: false,
-  exportUpload: false,
-  exportStorage: false,
-  exportWebsocket: false,
-  exportWindow: false,
-  exportDevice: false,
-  exportSystem: false,
-});
-const emit = defineEmits<{
-  (e: 'showDevButton', show: boolean): void;
-  (e: 'restartDevTool', restart?: boolean): void;
-  (e: 'restartApp', restart?: boolean): void;
-  (
-    e: 'exportLog',
-    params: {
-      exportLog: boolean;
-      exportNetwork: boolean;
-      exportStorage: boolean;
-      exportWebsocket: boolean;
-      exportUpload: boolean;
-      exportWindow: boolean;
-      exportDevice: boolean;
-      exportSystem: boolean;
-    },
-  ): void;
-  (e: 'screenshot'): void;
-  (e: 'clearCache'): void;
-  (e: 'destroyDevTool'): void;
-}>();
-
-function onChangeShowDevButton(show: boolean) {
-  emit('showDevButton', show);
-}
-function onRestartDevTool(restart: boolean) {
-  console.log('restart: ', restart);
-  restart && emit('restartDevTool');
-}
-
-function onDestructionDevTool() {
-  emit('destroyDevTool');
-}
-
-function onRestartApp(restart: boolean) {
-  restart && emit('restartApp');
-}
-function onExportLog() {
-  if (setting.exportLog || setting.exportNetwork || setting.exportStorage) {
-    emit('exportLog', {
-      exportLog: setting.exportLog,
-      exportNetwork: setting.exportNetwork,
-      exportStorage: setting.exportStorage,
-      exportWebsocket: setting.exportWebsocket,
-      exportUpload: setting.exportUpload,
-      exportWindow: setting.exportWindow,
-      exportDevice: setting.exportDevice,
-      exportSystem: setting.exportSystem,
-    });
-  }
-}
-function onScreenshot() {
-  emit('screenshot');
-}
-
-function onClearCache() {
-  emit('clearCache');
-}
-</script>
-<style scoped>
-.setting-content {
-  height: 100%;
-  overflow: auto;
-  font-size: var(--dev-tool-base-font-size);
-}
-.setting-item {
-  padding: 16px 16px 0 16px;
-  box-sizing: border-box;
-}
-
-.setting-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 8px 0;
-  min-height: 18px;
-}
-.setting-tips {
-  color: #616161;
-  font-size: var(--dev-tool-tips-font-size);
-  margin-bottom: 8px;
-}
-</style>

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>