vite-uni-dev-tool 0.0.13 → 0.0.15

package/dist/v2/PiniaList/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <view class="pinia-content">
+    <JsonPretty
+      :data="piniaList"
+      showLength
+      editable
+      v-if="showJson"
+      @update:data="onUpdateData"
+      @nodeClick="onNodeClick"
+    />
+    <Empty v-else />
+  </view>
+</template>
+
+<script>
+import JsonPretty from '../JsonPretty/index.vue';
+import Empty from '../Empty/index.vue';
+import { getValueByPath } from '../../utils';
+
+export default {
+  components: {
+    JsonPretty,
+    Empty,
+  },
+  props: {
+    piniaList: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      currentSelect: null,
+    };
+  },
+  computed: {
+    showJson() {
+      try {
+        const str = JSON.stringify(this.piniaList);
+        if (
+          typeof this.piniaList === 'object' &&
+          (str === '' || str === '{}')
+        ) {
+          return false;
+        }
+        return true;
+      } catch (error) {
+        return false;
+      }
+    },
+  },
+  methods: {
+    onUpdateData(data) {
+      try {
+        const keys = this.currentSelect?.path?.slice(5);
+        if (!keys) return;
+        const newData = getValueByPath(data, keys);
+
+        this.$emit('update:piniaList', data);
+        this.$emit('diffValue', {
+          [keys]: newData,
+        });
+      } catch (error) {
+        console.log('error: ', error);
+      }
+    },
+    onNodeClick(node) {
+      this.currentSelect = node;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pinia-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+}
+</style>

package/dist/v2/RouteList/index.vue

@@ -0,0 +1,137 @@
+<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
+      :dataSource="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>
+import Tag from '../Tag/index.vue';
+import Empty from '../Empty/index.vue';
+import FilterInput from '../FilterInput/index.vue';
+import VirtualListPro from '../VirtualListPro/index.vue';
+import AutoSize from '../VirtualListPro/AutoSize.vue';
+
+export default {
+  components: {
+    Tag,
+    Empty,
+    FilterInput,
+    VirtualListPro,
+    AutoSize,
+  },
+  props: {
+    routeList: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      height: 0,
+    };
+  },
+  mounted() {
+    const { windowHeight } = uni.getWindowInfo();
+    this.height = windowHeight - 32 - 32;
+  },
+  methods: {
+    onGoTo(page) {
+      this.$emit('goTo', page);
+    },
+    onRefresh() {
+      this.$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/dist/v2/RunJS/index.vue

@@ -0,0 +1,128 @@
+<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/dist/v2/SettingList/index.vue

@@ -0,0 +1,318 @@
+<template>
+  <view class="setting-content">
+    <view class="setting-item">
+      <DevToolTitle>DevTool(v0.0.12-vue2)</DevToolTitle>
+      <view class="setting-item-content">
+        <view class="setting-row">
+          <view>显示调试按钮：</view>
+          <checkbox
+            :checked="devToolVisible"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="onChangeShowDevButton"
+          />
+        </view>
+        <view class="setting-tips"> 取消后将不在展示调试按钮 </view>
+        <view class="setting-row">
+          <view>重启调试器：</view>
+        </view>
+
+        <view class="setting-tips">点击后将会重启调试器</view>
+        <button class="setting-button" @click="onRestartDevTool(true)">
+          重启调试器
+        </button>
+
+        <view class="setting-row">
+          <view>销毁调试器：</view>
+        </view>
+
+        <view class="setting-tips">
+          点击后将会销毁调试器，销毁后不再接收调试信息，需要通过 createDevTool()
+          重新创建
+        </view>
+        <button class="setting-button" @click="onDestructionDevTool">
+          销毁调试器
+        </button>
+
+        <view class="setting-row">
+          <view>重启APP：</view>
+        </view>
+        <view class="setting-tips">点击后将会重启APP</view>
+        <button class="setting-button" @click="onRestartApp(true)">
+          重启APP
+        </button>
+        <view class="setting-row">
+          <view>占用存储空间：{{ sizeFormat }}</view>
+        </view>
+        <view class="setting-tips">
+          当前所有信息占用的存储空间,只会清除 Console, Network, Upload,
+          Websocket, UniEvent
+        </view>
+        <button class="setting-button" @click="onClearCache">清除缓存</button>
+      </view>
+    </view>
+    <view class="setting-item">
+      <DevToolTitle>主题</DevToolTitle>
+      <view class="setting-item-content">
+        <view class="setting-theme">
+          <view
+            class="setting-item-theme setting-theme-light"
+            :class="{
+              'setting-theme-active': theme === 'light',
+            }"
+            @click="$emit('changeTheme', 'light')"
+          ></view>
+          <view
+            class="setting-item-theme setting-theme-dark"
+            :class="{
+              'setting-theme-active': theme === 'dart',
+            }"
+            @click="$emit('changeTheme', 'dart')"
+          ></view>
+        </view>
+      </view>
+    </view>
+    <view class="setting-item">
+      <DevToolTitle>Log</DevToolTitle>
+      <view class="setting-item-content">
+        <view class="setting-row">
+          <view>导出当前日志信息：</view>
+          <checkbox
+            :checked="setting.exportLog"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="setting.exportLog = !setting.exportLog"
+          />
+        </view>
+        <view class="setting-tips">勾选后将会导出当前的Log</view>
+        <view class="setting-row">
+          <view>导出当前网络信息：</view>
+          <checkbox
+            :checked="setting.exportNetwork"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="setting.exportNetwork = !setting.exportNetwork"
+          />
+        </view>
+        <view class="setting-tips">勾选后将会导出当前的Network</view>
+        <view class="setting-row">
+          <view>导出当前上传信息：</view>
+          <checkbox
+            :checked="setting.exportUpload"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="setting.exportUpload = !setting.exportUpload"
+          />
+        </view>
+        <view class="setting-tips">勾选后将会导出当前的Upload</view>
+        <view class="setting-row">
+          <view>导出当前套接字信息：</view>
+          <checkbox
+            :checked="setting.exportWebsocket"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="setting.exportWebsocket = !setting.exportWebsocket"
+          />
+        </view>
+        <view class="setting-tips">勾选后将会导出当前的Websocket</view>
+        <view class="setting-row">
+          <view>导出当前缓存信息：</view>
+          <checkbox
+            :checked="setting.exportStorage"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="setting.exportStorage = !setting.exportStorage"
+          />
+        </view>
+        <view class="setting-tips">
+          勾选后将会导出当前的Storage, Vuex, Pinia
+        </view>
+        <view class="setting-row">
+          <view>导出当前窗口信息：</view>
+          <checkbox
+            :checked="setting.exportWindow"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="setting.exportWindow = !setting.exportWindow"
+          />
+        </view>
+        <view class="setting-tips">勾选后将会导出当前的Window</view>
+
+        <view class="setting-row">
+          <view>导出当前设备信息：</view>
+          <checkbox
+            :checked="setting.exportDevice"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="setting.exportDevice = !setting.exportDevice"
+          />
+        </view>
+        <view class="setting-tips">勾选后将会导出当前的Device</view>
+
+        <view class="setting-row">
+          <view>导出当前系统信息：</view>
+          <checkbox
+            :checked="setting.exportSystem"
+            color="#9254de"
+            style="transform: scale(0.8)"
+            @click="setting.exportSystem = !setting.exportSystem"
+          />
+        </view>
+        <view class="setting-tips">勾选后将会导出当前的System</view>
+
+        <button class="setting-button" @click="onExportLog">导出</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import DevToolTitle from '../DevToolTitle/index.vue';
+
+export default {
+  components: {
+    DevToolTitle,
+  },
+  emits: [
+    'showDevButton',
+    'restartDevTool',
+    'restartApp',
+    'exportLog',
+    'screenshot',
+    'clearCache',
+    'destroyDevTool',
+    'changeTheme',
+  ],
+  props: {
+    devToolVisible: {
+      type: Boolean,
+      default: true,
+    },
+    sizeFormat: {
+      type: String,
+      default: '',
+    },
+    theme: {
+      type: String,
+      default: 'light',
+    },
+  },
+  data() {
+    return {
+      setting: {
+        restartDevTool: false,
+        restartApp: false,
+        exportLog: false,
+        exportNetwork: false,
+        exportUpload: false,
+        exportStorage: false,
+        exportWebsocket: false,
+        exportWindow: false,
+        exportDevice: false,
+        exportSystem: false,
+      },
+    };
+  },
+  methods: {
+    onChangeShowDevButton() {
+      this.$emit('showDevButton', !this.devToolVisible);
+    },
+    onRestartDevTool(restart) {
+      if (restart) {
+        this.$emit('restartDevTool');
+      }
+    },
+    onDestructionDevTool() {
+      this.$emit('destroyDevTool');
+    },
+    onRestartApp(restart) {
+      if (restart) {
+        this.$emit('restartApp');
+      }
+    },
+    onExportLog() {
+      this.$emit('exportLog', {
+        exportLog: this.setting.exportLog,
+        exportNetwork: this.setting.exportNetwork,
+        exportStorage: this.setting.exportStorage,
+        exportWebsocket: this.setting.exportWebsocket,
+        exportUpload: this.setting.exportUpload,
+        exportWindow: this.setting.exportWindow,
+        exportDevice: this.setting.exportDevice,
+        exportSystem: this.setting.exportSystem,
+      });
+    },
+    onScreenshot() {
+      this.$emit('screenshot');
+    },
+    onClearCache() {
+      this.$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;
+}
+.setting-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;
+}
+.setting-theme {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.setting-item-theme {
+  margin-top: 16px;
+  width: 30px;
+  height: 30px;
+
+  border-radius: 4px;
+  border: 1px solid #fff;
+}
+
+.setting-theme-light {
+  background-color: #fff;
+}
+.setting-theme-dark {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.setting-theme-active {
+  border: 1px solid var(--dev-tool-main-color);
+}
+</style>