vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/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>