vite-uni-dev-tool 0.0.13 → 0.0.15

package/dist/v3/SourceCode/index.vue

@@ -0,0 +1,231 @@
+<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: var(--dev-tool-bg2-color);
+  box-sizing: border-box;
+  color: var(--dev-tool-text-color);
+}
+
+.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/dist/v3/StorageList/index.vue

@@ -0,0 +1,170 @@
+<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/dist/v3/SystemInfo/index.vue

@@ -0,0 +1,34 @@
+<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/dist/v3/Tabs/index.vue

@@ -0,0 +1,123 @@
+<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/dist/v3/Tag/index.vue

@@ -0,0 +1,89 @@
+<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: var(--dev-tool-text-color);
+  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-log-color);
+  border: 1px solid var(--dev-tool-log-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: var(--dev-tool-text-color);
+  border: 1px solid #000;
+}
+
+.tag-active {
+  border-color: var(--dev-tool-main-color);
+  color: var(--dev-tool-main-color);
+}
+</style>