vite-uni-dev-tool 0.0.1

package/dev/components/RouteList/index.vue

@@ -0,0 +1,98 @@
+<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>
+    <view class="route-list">
+      <view class="route-item" v-for="item in routeList" :key="item.path">
+        <view class="route-item-name">
+          <view v-html="item.name" />
+          <Tag v-if="item.isNav" mode="info">Nav</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>
+      <Empty v-if="!routeList || routeList.length === 0" text="暂无路由信息" />
+    </view>
+  </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';
+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');
+}
+</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/SettingList/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <view class="setting-content">
+    <view class="setting-item">
+      <view class="setting-item-title">DevTool</view>
+      <view class="setting-item-content">
+        <view class="setting-row">
+          <view>显示调试按钮：</view>
+          <Checkbox
+            v-model="setting.showDevButton"
+            @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
+        </view>
+        <DButton class="setting-button" @click="onClearCache">
+          清除缓存
+        </DButton>
+      </view>
+    </view>
+    <view class="setting-item">
+      <view class="setting-item-title">Log</view>
+      <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';
+const props = defineProps<{
+  devToolVisible?: boolean;
+  sizeFormat?: string;
+}>();
+const setting = reactive({
+  showDevButton: props.devToolVisible,
+
+  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) {
+  console.log('restart: ', restart);
+  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-content .setting-item {
+  padding: 16px 16px 0 16px;
+  box-sizing: border-box;
+}
+.setting-content .setting-item .setting-item-title {
+  display: flex;
+  align-items: center;
+}
+.setting-content .setting-item .setting-item-title::before {
+  content: '';
+  margin-right: 8px;
+  width: 2px;
+  height: 18px;
+  border-radius: 2px;
+  background-color: var(--dev-tool-main-color);
+}
+.setting-content .setting-item .setting-item-content .setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px 0;
+  min-height: 18px;
+}
+.setting-content .setting-tips {
+  color: #616161;
+  font-size: var(--dev-tool-tips-font-size);
+  margin-bottom: 8px;
+}
+</style>

package/dev/components/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/dev/components/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/dev/components/Tabs/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <view class="tabs">
+    <scroll-view
+      class="tabs-list"
+      ref="tabsRef"
+      scroll-x="true"
+      enable-flex="true"
+      :scrollLeft="scrollLeft"
+      @scroll="onScroll"
+    >
+      <view
+        v-for="item in items"
+        :key="item.key"
+        :class="`tabs-item ${
+          item.key === modelValue ? 'tabs-item-active' : ''
+        } `"
+        @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 { ref } from 'vue';
+import CloseButton from '../CloseButton/index.vue';
+// const activeKey = ref("Console");
+defineProps<{
+  modelValue: string;
+  items: { label: string; key: string; value: any }[];
+  scrollLeft?: number;
+}>();
+
+const tabsRef = ref();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'update:modelValue', value: string): void;
+  (e: 'change', value: string): void;
+  (e: 'scroll', value: any): void;
+}>();
+function onChangeTabs(item: { label: string; key: string; value: any }) {
+  // activeKey.value = item.key;
+  emit('update:modelValue', item.key);
+  emit('change', item.key);
+}
+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>