vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v2/SourceCode/index.vue

@@ -0,0 +1,237 @@
+<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>
+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';
+
+export default {
+  components: {
+    FilterInput,
+    CloseButton,
+    Empty,
+  },
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    sourceFileServers: {
+      type: Array,
+      default: () => [],
+    },
+    mode: {
+      type: String,
+      default: '',
+    },
+    zIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      modelValue: '',
+      scrollTop: 0,
+      activeRowCol: { row: -1, col: -1, activeRow: -1 },
+      codes: [],
+      scrollIntoView: '',
+      backupCodes: [],
+    };
+  },
+  computed: {
+    fileName() {
+      const name =
+        this.url?.split('/')?.pop()?.replace(/\)|\(/, '') ?? '文件名称未知';
+      return name;
+    },
+    start() {
+      return this.activeRowCol.row - 20 > 0 ? this.activeRowCol.row - 20 : 0;
+    },
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    onSearch(value) {
+      this.codes = this.backupCodes.map((code) => {
+        return hightLight(code, value);
+      });
+    },
+    getCode(url, i = 0) {
+      let allUrl = url;
+      // 平台判断
+      if (isAndroid()) {
+        if (!this.sourceFileServers?.[i]) {
+          this.index = 0;
+          return;
+        }
+
+        allUrl = this.sourceFileServers?.[i] + '/src/' + url;
+      }
+
+      uni.showLoading({ mask: true });
+      uni.request({
+        url: allUrl,
+        success: (res) => {
+          if (typeof res.data === 'string') {
+            // 处理代码内容
+            const str = res.data
+              ?.replace(/<jscript/, '// [DevTool] 注释 <javascript')
+              ?.replace(/<\/script>/, '// [DevTool] 注释 </javascript>')
+              ?.replace(/<style/, '// [DevTool] 注释 <style')
+              ?.replace(/<\/style>/, '// [DevTool] 注释 </style>');
+            this.backupCodes = escapeHTML(str ?? '')
+              .toString()
+              .split('\n');
+
+            const start =
+              this.activeRowCol.row - 20 > 0 ? this.activeRowCol.row - 20 : 0;
+            const end =
+              this.activeRowCol.row + 20 > this.backupCodes.length
+                ? this.backupCodes.length
+                : this.activeRowCol.row + 20;
+
+            this.codes = this.backupCodes.slice(start, end);
+            this.activeRowCol.activeRow = this.activeRowCol.row - start;
+
+            this.$nextTick(() => {
+              this.scrollIntoView = `dev-tool-code-item-${this.activeRowCol.activeRow}`;
+            });
+          }
+        },
+        fail: (err) => {
+          this.index++;
+          this.getCode(url, this.index);
+          uni.showToast({ icon: 'none', title: '正在重新尝试中...' });
+        },
+        complete: () => {
+          uni.hideLoading();
+        },
+      });
+    },
+    getSourceCodeDev(url) {
+      if (!url) {
+        uni.showToast({ icon: 'none', title: '[DevTool] url 处理异常' });
+        uni?.__dev__console?.log('[DevTool] url 处理异常');
+        return;
+      }
+
+      this.getCode(url, this.index);
+    },
+  },
+  mounted() {
+    this.index = 0; // 初始化index
+    let url = this.url;
+    const { path, col, row } = parseStock(this.url ?? '');
+
+    if (path) {
+      url = path;
+    }
+
+    this.activeRowCol.col = col;
+    this.activeRowCol.row = row;
+
+    if (this.mode === 'development') {
+      // 开发环境查看源码
+      this.getSourceCodeDev(url);
+    } else if (this.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/v2/StorageList/index.vue

@@ -0,0 +1,165 @@
+<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>
+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';
+
+export default {
+  components: {
+    Tag,
+    JsonPretty,
+    Empty,
+    CloseButton,
+    FilterInput,
+  },
+  props: {
+    storageList: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      storageFilerItem: [
+        {
+          label: '新增',
+          value: 'add',
+        },
+        {
+          label: '刷新',
+          value: 'refresh',
+        },
+        {
+          label: '清除',
+          value: 'clear',
+        },
+      ],
+    };
+  },
+  methods: {
+    onUpdateData(data, item) {
+      const tempList = JSON.parse(JSON.stringify(this.storageList));
+      const index = this.storageList.findIndex(
+        (store) => store.key === item._oldKey,
+      );
+      if (index === -1) return;
+      tempList[index] = {
+        key: data.key,
+        _oldKey: tempList[index]._oldKey,
+        value: data.value,
+      };
+
+      this.$emit('update:storageList', tempList);
+      this.$emit('diffValue', {
+        ...data,
+        _oldKey: tempList[index]._oldKey,
+        key: data.key,
+      });
+    },
+    onChoose(type) {
+      this.$emit('choose', type);
+    },
+    onRemove(key) {
+      this.$emit('remove', key);
+    },
+    calcValue(value) {
+      try {
+        return {
+          value: JSON.parse(value),
+          type: 'object',
+        };
+      } catch (error) {
+        return {
+          value,
+          type: 'string',
+        };
+      }
+    },
+  },
+};
+</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;
+  margin-bottom: 8px;
+  word-break: break-all;
+}
+.storage-content .storage-list .storage-item .storage-key .storage-key-label {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.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/v2/SystemInfo/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="system-content">
+    <JsonPretty :data="systemInfo" showLength v-if="showJson" />
+    <Empty v-else />
+  </view>
+</template>
+
+<script>
+import JsonPretty from '../JsonPretty/index.vue';
+import Empty from '../Empty/index.vue';
+
+export default {
+  components: {
+    JsonPretty,
+    Empty,
+  },
+  props: {
+    systemInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    showJson() {
+      try {
+        const str = JSON.stringify(this.systemInfo);
+        if (
+          typeof this.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/v2/Tabs/index.vue

@@ -0,0 +1,127 @@
+<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>
+import CloseButton from '../CloseButton/index.vue';
+
+export default {
+  components: {
+    CloseButton,
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      required: true,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    scrollLeft: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tabsRef: null,
+    };
+  },
+  computed: {
+    scrollIntoView() {
+      return `tabs-item-${this.modelValue}`;
+    },
+  },
+  methods: {
+    onChangeTabs(item) {
+      this.$emit('update:modelValue', item.index);
+      this.$emit('change', item.index);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    onScroll(e) {
+      this.$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/v2/Tag/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <view
+    :class="`tag tag-${mode} ${active ? 'tag-active' : ''}`"
+    @click="onClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    /** @type {primary | warn | success | error | info | log | main | clear | all} */
+    mode: {
+      type: String,
+      default: 'primary',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onClick(event) {
+      this.$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>