vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{Performance → DevTool/components/Performance}/modules/PerformanceMetrics.vue

@@ -1,153 +1,153 @@
-<template>
-  <view
-    class="performance-metrics"
-    :class="{ 'performance-metrics-tab': isTab }">
-    <view v-if="showCpu" class="metric-item">
-      <view class="metric-value" :class="cpuStatusClass">{{ cpuLoad }}%</view>
-      <view class="metric-label">
-        <view class="legend-dot bg-cpu"></view>
-        CPU
-      </view>
-    </view>
-    <view v-if="showMemory" class="metric-item">
-      <view class="metric-value fps-memory">{{ memory }} MB</view>
-      <view class="metric-label">
-        <view class="legend-dot bg-memory"></view>
-        Memory
-      </view>
-    </view>
-    <view v-if="showFps" class="metric-item">
-      <view class="metric-value" :class="fpsStatusClass">{{ fps }}</view>
-      <view class="metric-label">
-        <view class="legend-dot" :class="fpsBgStatusClass"></view>
-        FPS
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
-  isTab: boolean;
-  fps: number;
-  cpuLoad: number;
-  memory: number;
-  showFps: boolean;
-  showCpu: boolean;
-  showMemory: boolean;
-}>();
-
-const fpsStatusClass = computed(() => {
-  if (props.fps >= 50) return 'fps-good';
-  if (props.fps >= 30) return 'fps-warning';
-  return 'fps-danger';
-});
-
-const cpuStatusClass = computed(() => {
-  if (props.cpuLoad <= 30) return 'fps-good';
-  if (props.cpuLoad <= 70) return 'fps-warning';
-  return 'fps-danger';
-});
-
-const fpsBgStatusClass = computed(() => {
-  if (props.fps >= 50) return 'bg-good';
-  if (props.fps >= 30) return 'bg-warning';
-  return 'bg-danger';
-});
-</script>
-
-<style scoped>
-.performance-metrics,
-.performance-metrics-tab {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-  margin-top: 4px;
-}
-
-.performance-metrics-tab {
-  padding: 10px 0;
-}
-
-.metric-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-}
-
-.metric-label {
-  display: flex;
-  align-items: center;
-  color: #909399; /* Tab 模式默认 */
-  text-transform: uppercase;
-  margin-top: 2px;
-}
-
-.performance-widget .metric-label {
-  color: #333; /* widget 模式下加深标签颜色，需由父组件透传样式或 global 样式控制，此处暂保留结构 */
-}
-
-/* Legend Dots */
-.legend-dot {
-  width: 24px;
-  height: 2px;
-  margin-right: 10px;
-  position: relative;
-  display: inline-block;
-  border-radius: 1px;
-  background-color: currentColor;
-}
-
-.legend-dot::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  border: 2px solid currentColor;
-  background-color: var(--dev-tool-bg2-color, #fff);
-}
-
-.bg-cpu {
-  color: #9254de !important;
-}
-
-.bg-good {
-  color: #67c23a !important;
-}
-
-.bg-warning {
-  color: #e6a23c !important;
-}
-
-.bg-danger {
-  color: #f56c6c !important;
-}
-
-.bg-memory {
-  color: #409eff !important;
-}
-
-/* Colors */
-.fps-good {
-  color: #67c23a;
-}
-
-.fps-warning {
-  color: #e6a23c;
-}
-
-.fps-danger {
-  color: #f56c6c;
-}
-
-.fps-memory {
-  color: #409eff;
-}
-</style>
+<template>
+  <view
+    class="performance-metrics"
+    :class="{ 'performance-metrics-tab': isTab }">
+    <view v-if="showCpu" class="metric-item">
+      <view class="metric-value" :class="cpuStatusClass">{{ cpuLoad }}%</view>
+      <view class="metric-label">
+        <view class="legend-dot bg-cpu"></view>
+        CPU
+      </view>
+    </view>
+    <view v-if="showMemory" class="metric-item">
+      <view class="metric-value fps-memory">{{ memory }} MB</view>
+      <view class="metric-label">
+        <view class="legend-dot bg-memory"></view>
+        Memory
+      </view>
+    </view>
+    <view v-if="showFps" class="metric-item">
+      <view class="metric-value" :class="fpsStatusClass">{{ fps }}</view>
+      <view class="metric-label">
+        <view class="legend-dot" :class="fpsBgStatusClass"></view>
+        FPS
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  isTab: boolean;
+  fps: number;
+  cpuLoad: number;
+  memory: number;
+  showFps: boolean;
+  showCpu: boolean;
+  showMemory: boolean;
+}>();
+
+const fpsStatusClass = computed(() => {
+  if (props.fps >= 50) return 'fps-good';
+  if (props.fps >= 30) return 'fps-warning';
+  return 'fps-danger';
+});
+
+const cpuStatusClass = computed(() => {
+  if (props.cpuLoad <= 30) return 'fps-good';
+  if (props.cpuLoad <= 70) return 'fps-warning';
+  return 'fps-danger';
+});
+
+const fpsBgStatusClass = computed(() => {
+  if (props.fps >= 50) return 'bg-good';
+  if (props.fps >= 30) return 'bg-warning';
+  return 'bg-danger';
+});
+</script>
+
+<style scoped>
+.performance-metrics,
+.performance-metrics-tab {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  margin-top: 4px;
+}
+
+.performance-metrics-tab {
+  padding: 10px 0;
+}
+
+.metric-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.metric-label {
+  display: flex;
+  align-items: center;
+  color: #909399; /* Tab 模式默认 */
+  text-transform: uppercase;
+  margin-top: 2px;
+}
+
+.performance-widget .metric-label {
+  color: #333; /* widget 模式下加深标签颜色，需由父组件透传样式或 global 样式控制，此处暂保留结构 */
+}
+
+/* Legend Dots */
+.legend-dot {
+  width: 24px;
+  height: 2px;
+  margin-right: 10px;
+  position: relative;
+  display: inline-block;
+  border-radius: 1px;
+  background-color: currentColor;
+}
+
+.legend-dot::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  background-color: var(--dev-tool-bg2-color, #fff);
+}
+
+.bg-cpu {
+  color: #9254de !important;
+}
+
+.bg-good {
+  color: #67c23a !important;
+}
+
+.bg-warning {
+  color: #e6a23c !important;
+}
+
+.bg-danger {
+  color: #f56c6c !important;
+}
+
+.bg-memory {
+  color: #409eff !important;
+}
+
+/* Colors */
+.fps-good {
+  color: #67c23a;
+}
+
+.fps-warning {
+  color: #e6a23c;
+}
+
+.fps-danger {
+  color: #f56c6c;
+}
+
+.fps-memory {
+  color: #409eff;
+}
+</style>

package/dist/v3/{Performance → DevTool/components/Performance}/modules/PerformanceWidget.vue

@@ -39,14 +39,17 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, getCurrentInstance, ref } from 'vue';
-import DraggableContainer from '../../DraggableContainer/index.vue';
+import DraggableContainer from '../../../../components/DraggableContainer/index.vue';
 import PerformanceMetrics from './PerformanceMetrics.vue';
 import { usePerformanceData } from './usePerformanceData';
 import { usePerformanceChart } from './usePerformanceChart';
-import CircularButton from '../../CircularButton/index.vue';
-import { MSG_TYPE, DEV_CORE_MESSAGE } from '../../../const';
-import { getDevToolInfo, setDevToolInfo } from '../../../modules/devToolInfo';
-import { debounce } from '../../../utils';
+import CircularButton from '../../../../components/CircularButton/index.vue';
+import { MSG_TYPE, DEV_CORE_MESSAGE } from '../../../../../const';
+import {
+  getDevToolInfo,
+  setDevToolInfo,
+} from '../../../../../modules/devToolInfo';
+import { debounce } from '../../../../../utils';
 
 const props = withDefaults(
   defineProps<{
@@ -179,12 +182,12 @@ const onMonitorChange = (enabled: boolean) => {
 onMounted(() => {
   const info = getDevToolInfo();
   if (info && info.performancePosition) {
-    x.value = info.performancePosition.left;
-    y.value = info.performancePosition.top;
+    x.value = Number(info.performancePosition.left) || 10;
+    y.value = Number(info.performancePosition.top) || 200;
     if (info.performancePosition.width)
-      width.value = info.performancePosition.width;
+      width.value = Number(info.performancePosition.width) || 240;
     if (info.performancePosition.height)
-      height.value = info.performancePosition.height;
+      height.value = Number(info.performancePosition.height) || 180;
   }
   loadSettings();