新增总览

1.显示屏幕使用时间
2.显示所有设备使用总览

Author: 1812z

src/App.vue

@@ -40,6 +40,11 @@ const toast = ref({
   type: 'error'
 });
 
+const OVERVIEW_DEVICE = {
+  device: 'summary',
+  currentApp: '不告诉你'
+};
+
 // 获取本地日期字符串
 const getLocalDateString = (date = new Date()) => {
   const offset = date.getTimezoneOffset() * 60000;
@@ -79,7 +84,9 @@ const fetchDevices = async () => {
     if (!response.ok) {
       throw new Error(`请求失败: ${response.status}`);
     }
-    devices.value = await response.json();
+    const realDevices = await response.json();
+    devices.value = [OVERVIEW_DEVICE, ...realDevices];
+
     if (devices.value.length > 0 && !selectedDevice.value) {
       selectedDevice.value = devices.value[0].device;
     }
@@ -251,12 +258,15 @@ onUnmounted(() => {
             />
 
             <!-- 日期筛选组件 -->
-            <DateSelector
-                v-model="statsType"
-                v-model:offset="timeOffset"
-                v-model:selected-date="selectedDate"
-                :date-range-text="getDateRangeText()"
-            />
+            <Transition name="slide-fade">
+              <DateSelector
+                  v-show="selectedDevice !== null"
+                  v-model="statsType"
+                  v-model:offset="timeOffset"
+                  v-model:selected-date="selectedDate"
+                  :date-range-text="getDateRangeText()"
+              />
+            </Transition>
           </div>
         </div>
 
@@ -268,8 +278,8 @@ onUnmounted(() => {
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                 </svg>
-                <span v-if="selectedDevice">{{ selectedDevice }} 使用统计</span>
-                <span v-else>请选择设备查看统计</span>
+                <span v-if="selectedDevice!=='summary'">{{ selectedDevice }} 使用统计</span>
+                <span v-else>总览</span>
               </h2>
 
               <button v-if="selectedDevice" @click="refreshStats" class="px-3 py-1 text-sm bg-gray-100 rounded-md hover:bg-gray-200 transition-colors dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
@@ -296,7 +306,7 @@ onUnmounted(() => {
             </transition>
 
             <DeviceStats
-                v-if="selectedDevice"
+                v-if="devices.length !== 1 && selectedDevice"
                 :key="statsKey"
                 :device-id="selectedDevice"
                 :device-info="getSelectedDevice()"
@@ -308,7 +318,7 @@ onUnmounted(() => {
             />
 
             <!-- 空状态提示 - 仅当没有设备时显示 -->
-            <div v-else-if="devices.length === 0" class="text-center py-8 text-gray-500">
+            <div v-else class="text-center py-8 text-gray-500">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
               </svg>
@@ -370,4 +380,39 @@ onUnmounted(() => {
 .fade-leave-from {
   opacity: 1;
 }
+
+/* DateSelector 动画 - 方案四：使用 max-height 和 overflow */
+.slide-fade-enter-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.slide-fade-enter-from {
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(-10px);
+}
+
+.slide-fade-enter-to {
+  opacity: 1;
+  max-height: 220px;
+  transform: translateY(0);
+}
+
+.slide-fade-leave-from {
+  opacity: 1;
+  max-height: 300px;
+  transform: translateY(0);
+}
+
+.slide-fade-leave-to {
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(-10px);
+}
 </style>

src/components/AISummary.vue

@@ -74,6 +74,8 @@ watch(() => props.isExpanded, (expanded) => {
 
 // 监听设备ID变化，重新加载数据
 watch(() => props.deviceId, () => {
+  if (props.deviceId === "summary") return;
+
   // 重置数据但保持展开状态
   summary.value = null;
   timestamp.value = null;

src/components/DateSelector.vue

@@ -174,7 +174,7 @@ const getTimeRangeText = () => {
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
-            模式
+            时间
           </h2>
           <Transition name="fade" mode="out-in">
             <span v-if="statsType !== 'daily'" key="date-range-text" class="text-sm font-medium">{{ dateRangeText }}</span>

src/components/DeviceList.vue

@@ -80,9 +80,11 @@ const getBatteryTextClass = (level, isCharging) => {
       >
         <div class="flex justify-between items-start">
           <div class="flex-1">
-            <h3 class="font-bold text-lg">{{ device.device }}</h3>
+            <h3 class="font-bold text-lg">
+              {{ device.device === 'summary' ? '总览' : device.device }}
+            </h3>
             <p class="not-dark:text-gray-600 text-sm mt-1">
-              <span class="font-medium">当前应用:</span> {{ device.currentApp || '无' }}
+              <span class="font-medium"  v-show="device.device!=='summary'">当前应用:</span>{{ device.device === 'summary' ? '点击查看总览' : device.currentApp }}
             </p>
 
             <!-- 动态电量显示 -->
@@ -154,6 +156,7 @@ const getBatteryTextClass = (level, isCharging) => {
           <span
               class="inline-block px-2 py-1 text-xs rounded-full"
               :class="device.running ? 'bg-green-100 not-dark:text-green-800 dark:bg-green-950' : 'bg-red-100 not-dark:text-red-800 dark:bg-red-950'"
+              v-show="device.device!=='summary'"
           >
             {{ device.running ? '运行中' : '已停止' }}
           </span>

src/components/DeviceStats.vue

@@ -1,12 +1,13 @@
 <script setup>
 import {ref, onMounted, watch, computed} from 'vue';
 import { useStats } from '../composables/useStats.js';
-
+import { formatTime } from "../composables/formatTime.js"
 import RecentApps from "./RecentApps.vue";
 import UsageDetails from "./UsageDetails.vue";
 import AppUsageChart from "./charts/AppUsageChart.vue";
 import TimeUsageChart from "./charts/TimeUsageChart.vue";
 import AISummary from "./AISummary.vue";
+import EyeTimeStats from "./EyeTimeStats.vue";
 
 const props = defineProps({
   deviceId: {
@@ -63,18 +64,6 @@ const calculateRunningTime = () => {
   return Math.floor((now - startTime) / 60000);
 };
 
-// 格式化时间
-const formatTime = (minutes) => {
-  const totalMinutes = parseFloat(minutes);
-  if (totalMinutes < 60) {
-    return `${totalMinutes.toFixed(2)}分`;
-  } else {
-    const hours = Math.floor(totalMinutes / 60);
-    const remainingMinutes = Math.round(totalMinutes % 60);
-    return `${hours}时${remainingMinutes}分`;
-  }
-};
-
 // 获取设备统计信息
 const getDeviceStats = () => {
   const defaultStats = {
@@ -153,7 +142,7 @@ watch(stats, (newStats) => {
         <p class="text-xl md:text-2xl font-bold">{{ getDeviceStats().appCount }}</p>
       </div>
       <div class="bg-green-50 hover:bg-green-100 transition-colors duration-200 p-4 rounded-lg shadow-md dark:bg-green-950 dark:hover:bg-green-900">
-        <p class="text-sm text-green-700">总时间</p>
+        <p class="text-sm text-green-700">应用总时间</p>
         <p class="text-xl md:text-2xl font-bold whitespace-nowrap">{{ formatTime(getDeviceStats().totalUsageMinutes) }}</p>
       </div>
       <div class="bg-yellow-50 hover:bg-yellow-100 transition-colors duration-200 p-4 rounded-lg shadow-md dark:bg-yellow-950 dark:hover:bg-yellow-900">
@@ -168,32 +157,49 @@ watch(stats, (newStats) => {
       </div>
     </div>
 
-    <!-- 当前使用情况 -->
-    <div class="mb-6">
-      <div class="bg-blue-50 hover:bg-blue-100 transition-colors duration-200 p-4 rounded-lg shadow-md dark:bg-[#1d1f20] dark:hover:bg-blue-900/30">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm text-blue-800">{{ deviceInfo?.running ? '当前应用' : '上次应用' }}</p>
-            <p class="text-xl font-bold">{{ deviceInfo?.currentApp }}</p>
-          </div>
-          <div>
-            <p class="text-sm text-blue-800">状态</p>
-            <p class="text-xl font-bold">{{ deviceInfo?.running ? '运行中' : '已停止' }}</p>
-          </div>
-          <div>
-            <p class="text-sm text-blue-800">已运行时间</p>
-            <p class="text-xl font-bold">{{ calculateRunningTime() }} 分钟</p>
+    <!-- 当前使用情况和用眼时间的切换容器 -->
+    <div class="relative mb-6">
+      <Transition name="slide-fade" mode="out-in">
+        <!-- 当前使用情况 -->
+        <div v-if="deviceInfo?.device !== 'summary'" key="current-app">
+          <div class="bg-blue-50 hover:bg-blue-100 transition-colors duration-200 p-4 rounded-lg shadow-md dark:bg-[#1d1f20] dark:hover:bg-blue-900/30">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm text-blue-800">{{ deviceInfo?.running ? '当前应用' : '上次应用' }}</p>
+                <p class="text-xl font-bold">{{ deviceInfo?.currentApp }}</p>
+              </div>
+              <div>
+                <p class="text-sm text-blue-800">状态</p>
+                <p class="text-xl font-bold">{{ deviceInfo?.running ? '运行中' : '已停止' }}</p>
+              </div>
+              <div>
+                <p class="text-sm text-blue-800">已运行时间</p>
+                <p class="text-xl font-bold">{{ calculateRunningTime() }} 分钟</p>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+
+        <!-- 用眼时间 -->
+        <div v-else key="eye-time">
+          <EyeTimeStats
+              :statsType="props.statsType"
+              :timeOffset="props.timeOffset"
+              :date="props.date"
+          />
+        </div>
+      </Transition>
     </div>
 
     <!-- AI总结组件 - 支持双向绑定展开状态 -->
-    <AISummary
-        v-if="showAiSummary"
-        :device-id="deviceId"
-        v-model:is-expanded="isAISummaryExpanded"
-    />
+    <Transition name="slide-fade" mode="out-in">
+      <AISummary
+          v-show="showAiSummary && deviceInfo?.device !== 'summary'"
+          :device-id="deviceId"
+          v-model:is-expanded="isAISummaryExpanded"
+      />
+    </Transition>
+
 
     <!-- 图表组件 -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
@@ -212,6 +218,47 @@ watch(stats, (newStats) => {
     <UsageDetails :stats="stats || {}" :show-limit="10" />
 
     <!-- 最近使用的APP组件 -->
-    <RecentApps v-show="props.statsType === 'daily'" :deviceId="deviceId" />
+    <RecentApps v-show="props.statsType === 'daily' && deviceInfo?.device !== 'summary'" :deviceId="deviceId"/>
   </div>
-</template>
+</template>
+
+<style scoped>
+/* Transition动画：同时进行淡入淡出，并保持布局流动 */
+.slide-fade-enter-active {
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.3s ease-out;
+  overflow: hidden;
+}
+
+/* 为左侧整体容器添加平滑过渡 */
+.space-y-6 > * {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-20px);
+  max-height: 0;
+}
+
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+  max-height: 0;
+}
+
+.slide-fade-enter-to,
+.slide-fade-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+  max-height: 500px; /* 根据实际内容高度调整 */
+}
+
+/* 让容器在动画期间也有过渡效果 */
+.relative.mb-6 {
+  transition: height 0.3s ease-out;
+}
+</style>