vite-uni-dev-tool 0.0.11 → 0.0.13

package/dev/components/Button/index.vue

@@ -1,34 +0,0 @@
-<template>
-  <view class="button" :style="style" @click="onClick">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts" setup>
-defineProps<{ style?: any }>();
-const emit = defineEmits<{ (e: 'click', event?: MouseEvent): void }>();
-const onClick = (e: MouseEvent) => {
-  emit('click', e);
-};
-</script>
-<style scoped>
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 32px;
-  border-radius: 4px;
-  color: #fff;
-  outline: none;
-  border: 1px solid transparent;
-  background-color: var(--dev-tool-main-color);
-  transform: all 0.3s;
-  font-size: var(--dev-tool-base-font-size);
-  padding: 0;
-  cursor: pointer;
-}
-
-.button:active {
-  background-color: darken(#9254de, 10%);
-}
-</style>

package/dev/components/CaptureScreen/index.vue

@@ -1,62 +0,0 @@
-<template>
-  <view class="capture-screen-content">
-    <view class="capture-screen-control">
-      <Tag style="margin-left: auto" mode="clear" @click="emit('clear')">
-        清空
-      </Tag>
-    </view>
-
-    <view class="capture-screen-list">
-      <view class="capture-screen-item" v-for="item in captureScreenList">
-        <view class="info-row">时间：{{ item.timer }} </view>
-        <view class="info-row">页面：{{ item.position }}</view>
-      </view>
-
-      <Empty v-if="!captureScreenList || captureScreenList.length === 0" />
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import type { DevTool } from '../../type';
-import Empty from '../Empty/index.vue';
-import Tag from '../Tag/index.vue';
-
-defineProps<{
-  captureScreenList: DevTool.CaptureScreenItem[];
-}>();
-
-const emit = defineEmits<{
-  (e: 'clear'): void;
-}>();
-</script>
-<style scoped>
-.capture-screen-content {
-  height: 100%;
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.capture-screen-list {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-
-.capture-screen-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;
-}
-
-.capture-screen-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-}
-.info-row {
-  height: 28px;
-  line-height: 28px;
-}
-</style>

package/dev/components/Checkbox/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <view
-    :class="`checkbox ${modelValue ? 'checkbox-active' : ''}`"
-    @click="onClickCheckbox"
-  >
-    {{ modelValue ? '√' : '' }}
-  </view>
-</template>
-<script lang="ts" setup>
-const props = defineProps<{
-  modelValue?: boolean;
-}>();
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
-  (e: 'change', value: boolean): void;
-}>();
-
-function onClickCheckbox() {
-  const value = !props.modelValue;
-  emit('update:modelValue', value);
-  emit('change', value);
-}
-</script>
-<style scoped>
-.checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  border: 1px solid var(--dev-tool-main-color);
-  transition: all 0.3s;
-  color: #fff;
-  box-sizing: border-box;
-}
-.checkbox-active {
-  background-color: var(--dev-tool-main-color);
-}
-</style>

package/dev/components/CloseButton/index.vue

@@ -1,26 +0,0 @@
-<template>
-  <view class="close-button" @click="onClick"> × </view>
-</template>
-<script lang="ts" setup>
-const emit = defineEmits<{ (e: 'click'): void }>();
-
-function onClick() {
-  emit('click');
-}
-</script>
-
-<style scoped>
-.close-button {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: auto;
-  border-radius: 50%;
-  border: 1px solid #000;
-  box-sizing: border-box;
-  color: #000;
-}
-</style>

package/dev/components/Code/index.vue

@@ -1,230 +0,0 @@
-<template>
-  <view class="dev-tool-code">
-    <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;
-}>();
-
-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: 1000;
-  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>

package/dev/components/Connection/index.vue

@@ -1,88 +0,0 @@
-<template>
-  <view class="connection-content">
-    <view class="connection-item">
-      <DevToolTitle>网络连接</DevToolTitle>
-      <view class="connection-item-content">
-        <view class="connection-row">
-          <view>IP地址：</view>
-          <Tag
-            :mode="
-              netWorkStatus?.isConnected === undefined || netWorkStatus?.ip
-                ? 'info'
-                : netWorkStatus?.isConnected && netWorkStatus?.ip
-                  ? 'success'
-                  : 'error'
-            "
-          >
-            {{
-              netWorkStatus?.isConnected === undefined
-                ? '未获取'
-                : netWorkStatus?.ip || '未获取'
-            }}
-          </Tag>
-        </view>
-        <view class="connection-row">
-          <view>连接状态：</view>
-          <Tag
-            :mode="
-              netWorkStatus?.isConnected === undefined
-                ? 'info'
-                : netWorkStatus?.isConnected
-                  ? 'success'
-                  : 'error'
-            "
-          >
-            {{
-              netWorkStatus?.isConnected === undefined
-                ? '未获取'
-                : netWorkStatus?.isConnected
-                  ? '已连接'
-                  : '已断开'
-            }}
-          </Tag>
-        </view>
-        <view class="connection-row">
-          <view>网络类型：</view>
-          <Tag mode="info">{{ netWorkStatus?.networkType ?? '未获取' }}</Tag>
-        </view>
-        <!-- <view class="connection-row">
-          <view>上传速度：</view>
-          <view>0 B/s</view>
-        </view>
-        <view class="connection-row">
-          <view>下载速度：</view>
-          <view>0 B/s</view>
-        </view> -->
-      </view>
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import DevToolTitle from '../DevToolTitle/index.vue';
-defineProps<{
-  netWorkStatus: {
-    isConnected?: boolean;
-    networkType?: string;
-    ip?: string;
-  };
-}>();
-</script>
-<style scoped>
-.connection-content {
-  height: 100%;
-  overflow: auto;
-  font-size: var(--dev-tool-base-font-size);
-}
-.connection-item {
-  padding: 16px 16px 0 16px;
-  box-sizing: border-box;
-}
-
-.connection-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 8px 0;
-}
-</style>

package/dev/components/ConsoleList/Code.vue

@@ -1,227 +0,0 @@
-<template>
-  <view class="dev-tool-code">
-    <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"> {{ 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;
-}>();
-
-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('');
-
-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: 1000;
-  top: 0;
-  left: 0;
-  padding: 0 16px;
-  /* #ifdef H5 */
-  padding: 50px 16px;
-  /* #endif */
-
-  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>