vite-uni-dev-tool 0.0.12 → 0.0.13

package/dev/components/RouteList/index.vue

@@ -1,121 +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="15"
-      :height="height"
-      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';
-import { onMounted, ref } from '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');
-}
-const height = ref(0);
-onMounted(() => {
-  const { windowHeight } = uni.getWindowInfo();
-  height.value = windowHeight - 32 - 32;
-});
-</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,222 +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
-            :modelValue="devToolVisible"
-            @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';
-defineProps<{
-  devToolVisible?: boolean;
-  sizeFormat?: string;
-}>();
-const setting = reactive({
-  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) {
-  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/SourceCode/index.vue

@@ -1,231 +0,0 @@
-<template>
-  <view class="dev-tool-code" :style="{ zIndex: zIndex }">
-    <view class="dev-tool-code-control">
-      <FilterInput
-        v-model="modelValue"
-        style="width: 100%"
-        @search="onSearch"
-      />
-      <CloseButton style="margin-left: auto" @click="onClose" />
-    </view>
-    <view class="dev-tool-code-title">{{ fileName }}</view>
-    <scroll-view
-      scroll-y="true"
-      scroll-x="true"
-      class="dev-tool-code-list"
-      scroll-with-animation="true"
-      :scroll-top="scrollTop"
-      :scroll-into-view="scrollIntoView"
-    >
-      <view
-        v-for="(code, index) in codes"
-        :id="`dev-tool-code-item-${index}`"
-        :key="index"
-        :class="`dev-tool-code-item ${index === activeRowCol.activeRow ? 'dev-tool-code-item-active' : ''}`"
-      >
-        <view class="dev-tool-code-item-index">
-          {{ start + index + 1 }}
-        </view>
-
-        <view class="dev-tool-code-item-content" v-html="code"></view>
-      </view>
-      <Empty v-if="!codes || codes.length === 0" />
-    </scroll-view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { computed, ref, nextTick, onMounted } from 'vue';
-import FilterInput from '../FilterInput/index.vue';
-import CloseButton from '../CloseButton/index.vue';
-import Empty from '../Empty/index.vue';
-import { escapeHTML, hightLight, isAndroid, parseStock } from '../../utils';
-
-const props = defineProps<{
-  url: string;
-  sourceFileServers?: string[];
-  mode?: string;
-  zIndex?: number;
-}>();
-
-const emit = defineEmits<{ (e: 'close'): void }>();
-
-const modelValue = ref('');
-const scrollTop = ref(0);
-const fileName = computed(() => {
-  const name =
-    props?.url?.split('/')?.pop()?.replace(/\)|\(/, '') ?? '文件名称未知';
-  return name;
-});
-
-const activeRowCol = ref({ row: -1, col: -1, activeRow: -1 });
-
-let backupCodes: string[] = [];
-
-const codes = ref<string[]>([]);
-
-const scrollIntoView = ref('');
-
-const start = computed(() => {
-  return activeRowCol.value.row - 20 > 0 ? activeRowCol.value.row - 20 : 0;
-});
-
-function onClose() {
-  emit('close');
-}
-
-function onSearch(value: string) {
-  codes.value = backupCodes.map((code) => {
-    return hightLight(code, value);
-  });
-}
-
-let index = 0;
-function getCode(url: string, i: number = 0) {
-  let allUrl = url;
-  // 平台判断
-  if (isAndroid()) {
-    if (!props.sourceFileServers?.[i]) {
-      index = 0;
-      return;
-    }
-
-    allUrl = props.sourceFileServers?.[i] + '/src/' + url;
-  }
-
-  uni.showLoading({ mask: true });
-  uni.request({
-    url: allUrl,
-    success: (res) => {
-      if (typeof res.data === 'string') {
-        // 为什么要注释掉？
-        // 在 Android 识别到标签后会进行重启，导致代码无法显示
-        // TODO: 还有其它原因导致重启
-        const str = res.data
-          ?.replace(/<jscript/, '// [DevTool] 注释 <javascript')
-          ?.replace(/<\/script>/, '// [DevTool] 注释 </javascript>')
-          ?.replace(/<style/, '// [DevTool] 注释 <style')
-          ?.replace(/<\/style>/, '// [DevTool] 注释 </style>');
-        backupCodes = escapeHTML(str ?? '')
-          .toString()
-          .split('\n');
-
-        const start =
-          activeRowCol.value.row - 20 > 0 ? activeRowCol.value.row - 20 : 0;
-
-        const end =
-          activeRowCol.value.row + 20 > backupCodes.length
-            ? backupCodes.length
-            : activeRowCol.value.row + 20;
-
-        // backupCodes.slice(start, end);
-
-        codes.value = backupCodes.slice(start, end);
-
-        activeRowCol.value.activeRow = activeRowCol.value.row - start;
-
-        nextTick(() => {
-          scrollIntoView.value = `dev-tool-code-item-${activeRowCol.value.activeRow}`;
-        });
-      }
-    },
-    fail: (err) => {
-      index++;
-      getCode(url, index);
-      uni.showToast({ icon: 'none', title: '正在重新尝试中...' });
-    },
-    complete: () => {
-      uni.hideLoading();
-    },
-  });
-}
-
-/** 开发环境获取源代码 */
-function getSourceCodeDev(url: string) {
-  if (!url) {
-    uni.showToast({ icon: 'none', title: '[DevTool] url 处理异常' });
-    uni?.__dev__console?.log('[DevTool] url 处理异常');
-    return;
-  }
-
-  getCode(url, index);
-}
-
-onMounted(() => {
-  let url = props?.url;
-
-  const { path, col, row } = parseStock(props?.url ?? '');
-
-  if (path) {
-    url = path;
-  }
-
-  activeRowCol.value.col = col;
-  activeRowCol.value.row = row;
-
-  if (props.mode === 'development') {
-    // 开发环境查看源码
-    getSourceCodeDev(url);
-  } else if (props.mode === 'production') {
-    // TODO 生产环境查看源码
-  }
-});
-</script>
-<style scoped>
-.dev-tool-code {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1001;
-  top: 0;
-  left: 0;
-  padding: 0 16px;
-
-  background-color: rgba(255, 255, 255, 0.95);
-  box-sizing: border-box;
-  color: #000;
-}
-
-.dev-tool-code-control {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-
-.dev-tool-code-title {
-  height: 32px;
-  line-height: 32px;
-  margin-bottom: 4px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: auto;
-}
-
-.dev-tool-code-list {
-  height: calc(100% - 68px);
-}
-
-.dev-tool-code-item {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-.dev-tool-code-item-active {
-  color: #fff;
-  background-color: var(--dev-tool-main-color);
-}
-
-.dev-tool-code-item-index {
-  flex-shrink: 0;
-  width: 20px;
-  margin-right: 8px;
-  text-align: right;
-}
-
-.dev-tool-code-item-content {
-  white-space: pre;
-}
-</style>