feat: 添加托盘最小化通知；禁用 F12 键事件监听

2025-12-06 18:36:55 +08:00 · 2025-04-09 11:24:00 +08:00
parent 364d38ddc0
commit 6687888c97
3 changed files with 143 additions and 134 deletions
--- a/src/client/ClientSettings.vue
+++ b/src/client/ClientSettings.vue
@@ -1,95 +1,92 @@
 <script setup lang="ts">
-import { useColorMode } from '@vueuse/core';
-import { disable, enable, isEnabled } from "@tauri-apps/plugin-autostart";
-import { ref, watch, onMounted } from 'vue';
-import {
+  import { useColorMode } from '@vueuse/core';
+  import { disable, enable, isEnabled } from "@tauri-apps/plugin-autostart";
+  import { ref, watch, onMounted } from 'vue';
+  import {
    NGrid,
-  NGridItem, // Corrected import NGridItem
+    NGridItem,
    NMenu,
    NRadio,
-  NRadioGroup, // Added NRadioGroup
+    NRadioGroup,
    NSwitch,
    NSpace,
    NCard,
-  NSpin, // Added NSpin for loading state
-  NFormItem, // Added NFormItem
+    NSpin,
+    NFormItem,
    NAlert,
    NCheckboxGroup,
    NCheckbox,
-  NDivider, // Added NAlert for error messages
-} from 'naive-ui';
-import type { MenuOption } from 'naive-ui'; // Import MenuOption type
-import { ThemeType } from '@/api/api-models';
-import { NotificationType, useSettings } from './store/useSettings';
-import { getVersion } from '@tauri-apps/api/app';
+    NDivider,
+  } from 'naive-ui';
+  import type { MenuOption } from 'naive-ui';
+  import { ThemeType } from '@/api/api-models';
+  import { NotificationType, useSettings } from './store/useSettings';
+  import { getVersion } from '@tauri-apps/api/app';
+import { invoke } from '@tauri-apps/api/core';

-// --- State ---
+  // --- State ---

-const currentTab = ref('general');
-const isLoading = ref(true); // Loading state for initial fetch
-  const errorMsg = ref<string | null>(null); // Error message state
+  const currentTab = ref('general');
+  const isLoading = ref(true);
+  const errorMsg = ref<string | null>(null);
+  const titleClickCount = ref(0); // 添加计数器状态变量
+  let resetTimeout: number | null = null; // 用于重置计数器的超时ID

  const setting = useSettings();
-  const currentVersion = await getVersion(); // Fetch current version on mount
+  const currentVersion = await getVersion();

-// Navigation
-const navOptions: MenuOption[] = [ // Explicitly typed
+  // Navigation
+  const navOptions: MenuOption[] = [
    { label: '常规', key: 'general' },
    { label: '通知', key: 'notification' },
    { label: '其他', key: 'other' },
    { label: '关于', key: 'about' },
-];
+  ];

-// Theme
+  // Theme

-const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+  const themeType = useStorage('Settings.Theme', ThemeType.Auto);

-// Autostart Settings
-const isStartOnBoot = ref(false); // Initialize with default, fetch in onMounted
-const minimizeOnStart = ref(false); // Placeholder state for minimize setting
+  // Autostart Settings
+  const isStartOnBoot = ref(false);
+  const minimizeOnStart = ref(false);

-// --- Lifecycle Hooks ---
+  // --- Lifecycle Hooks ---

-onMounted(async () => {
+  onMounted(async () => {
    isLoading.value = true;
    errorMsg.value = null;
    try {
      isStartOnBoot.value = await isEnabled();
-    // TODO: Fetch initial state for minimizeOnStart if applicable
    } catch (err) {
      console.error("Failed to fetch autostart status:", err);
      errorMsg.value = "无法获取开机启动状态，请稍后重试。";
-    // Keep default isStartOnBoot value (false)
    } finally {
      isLoading.value = false;
    }
-});
+  });

-// --- Watchers for Side Effects ---
+  // --- Watchers for Side Effects ---

-watch(isStartOnBoot, async (newValue, oldValue) => {
-  // Prevent running on initial load if oldValue is the initial default
-  // or during the initial fetch if needed (though onMounted handles initial state)
-  if (isLoading.value || newValue === oldValue) return; // Avoid unnecessary calls
+  watch(isStartOnBoot, async (newValue, oldValue) => {
+    if (isLoading.value || newValue === oldValue) return;

-  errorMsg.value = null; // Clear previous errors
+    errorMsg.value = null;
    try {
      if (newValue) {
        await enable();
-      //window.$message.success('已启用开机启动');
      } else {
        await disable();
-      //window.$message.success('已禁用开机启动'); // Provide feedback for disabling too
      }
    } catch (err) {
      console.error("Failed to update autostart status:", err);
      errorMsg.value = `设置开机启动失败: ${err instanceof Error ? err.message : '未知错误'}`;
-    // Revert UI state on failure
      isStartOnBoot.value = oldValue;
      window.$message.error('设置开机启动失败');
    }
-});
-const renderNotifidactionEnable = (name: NotificationType) => h(NCheckbox, {
+  });
+
+  const renderNotifidactionEnable = (name: NotificationType) => h(NCheckbox, {
    checked: setting.settings.notificationSettings?.enableTypes.includes(name),
    onUpdateChecked: (value) => {
      setting.settings.notificationSettings.enableTypes ??= [];
@@ -101,15 +98,25 @@ const renderNotifidactionEnable = (name: NotificationType) => h(NCheckbox, {
    },
  }, () => '启用');

-watch(minimizeOnStart, (newValue) => {
-    // TODO: Implement logic to save/apply minimizeOnStart setting
-    // Example: saveToConfig('minimizeOnStart', newValue);
-    console.log("Minimize on start:", newValue);
-    if (newValue) {
-        window.$message.info('启动后最小化功能待实现'); // Placeholder feedback
-    }
-});
+  // --- 隐藏功能处理函数 ---
+  const handleTitleClick = () => {
+    titleClickCount.value++;

+    if (resetTimeout !== null) {
+      clearTimeout(resetTimeout);
+    }
+
+    resetTimeout = setTimeout(() => {
+      titleClickCount.value = 0;
+    }, 3000) as unknown as number;
+
+    if (titleClickCount.value === 10) {
+      invoke('open_dev_tools')
+        .then(() => {
+          window.$message.success('已打开 Dev Tools');
+        })
+    }
+  };
 </script>

 <template>
@@ -121,7 +128,10 @@ watch(minimizeOnStart, (newValue) => {
    <!-- 标题区域 -->
    <div style="max-width: 72rem; margin: 0 auto; padding: 0 1rem;">
      <!-- Added padding -->
-      <h1 style="font-size: 1.875rem; font-weight: 600; margin-bottom: 1rem;">
+      <h1
+        style="font-size: 1.875rem; font-weight: 600; margin-bottom: 1rem;"
+        @click="handleTitleClick"
+      >
        <!-- Added margin -->
        设置
      </h1>
@@ -135,7 +145,6 @@ watch(minimizeOnStart, (newValue) => {
    >
      <!-- Left Navigation -->
      <NGridItem span="6">
-        <!-- Responsive spans -->
        <NMenu
          v-model:value="currentTab"
          :options="navOptions"
@@ -145,13 +154,11 @@ watch(minimizeOnStart, (newValue) => {

      <!-- Right Content Area -->
      <NGridItem span="18">
-        <!-- Responsive spans -->
        <NSpin :show="isLoading">
          <NSpace
            vertical
            size="large"
          >
-            <!-- Global Error Display -->
            <NAlert
              v-if="errorMsg"
              title="操作错误"
@@ -162,18 +169,13 @@ watch(minimizeOnStart, (newValue) => {
              {{ errorMsg }}
            </NAlert>

-            <!-- Content Transition -->
            <Transition
              name="fade"
              mode="out-in"
            >
              <div :key="currentTab">
-                <!-- Key needed for transition on content change -->
-                <!-- General Settings -->
                <template v-if="currentTab === 'general'">
-                  <NSpace
-                    vertical
-                  >
+                  <NSpace vertical>
                    <NCard
                      title="启动"
                      :bordered="false"
@@ -200,7 +202,6 @@ watch(minimizeOnStart, (newValue) => {
                            v-model:value="setting.settings.bootAsMinimized"
                            @update:value="setting.save()"
                          />
-                          <!-- Add appropriate logic/state for this -->
                        </LabelItem>
                      </NFlex>
                    </NCard>
@@ -233,7 +234,6 @@ watch(minimizeOnStart, (newValue) => {
                  </NSpace>
                </template>

-                <!-- Notification Settings -->
                <template v-else-if="currentTab === 'notification'">
                  <NCard
                    title="通知设置"
@@ -247,7 +247,7 @@ watch(minimizeOnStart, (newValue) => {
                      <NCheckbox
                        v-model:checked="setting.settings.enableNotification"
                        @update:checked="(value) => {
-                          setting.save()
+                          setting.save();
                        }"
                      >
                        启用通知
@@ -275,7 +275,6 @@ watch(minimizeOnStart, (newValue) => {
                  </NCard>
                </template>

-                <!-- Other Settings -->
                <template v-else-if="currentTab === 'other'">
                  <NCard
                    title="其他设置"
@@ -285,7 +284,6 @@ watch(minimizeOnStart, (newValue) => {
                  </NCard>
                </template>

-                <!-- About Section -->
                <template v-else-if="currentTab === 'about'">
                  <NCard
                    title="关于"
@@ -294,7 +292,7 @@ watch(minimizeOnStart, (newValue) => {
                    <template #header-extra>
                      <div
                        style="width: 10px; height: 10px;"
-                        @click="$router.push({name: 'client-test'})"
+                        @click="$router.push({ name: 'client-test' })"
                      />
                    </template>
                    <p>VTsuruEventFetcher Tauri</p>
@@ -336,7 +334,6 @@ watch(minimizeOnStart, (newValue) => {
                    <p>
                      反馈: 🐧 873260337
                    </p>
-                    <!-- Add more about info -->
                  </NCard>
                </template>
              </div>
@@ -352,21 +349,18 @@ watch(minimizeOnStart, (newValue) => {
 </template>

 <style scoped>
-/* Scoped styles if needed, e.g., for the transition */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}

-.fade-enter-from,
-.fade-leave-to {
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.2s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
    opacity: 0;
-}
-.label-item {
+  }
+
+  .label-item {
    height: 20px;
-}
-/* Optional: Adjust NFormItem label alignment if needed */
-/* :deep(.n-form-item-label) { */
-  /* Add custom styles */
-/* } */
+  }
 </style>
--- a/src/client/data/initialize.ts
+++ b/src/client/data/initialize.ts
@@ -33,6 +33,12 @@ export async function initAll(isOnBoot: boolean) {
    if (setting.settings.bootAsMinimized && !isDev) {
      const appWindow = getCurrentWindow();
      appWindow.hide();
+      sendNotification({
+        title: "VTsuru.Client",
+        body: '已启动并最小化到托盘',
+        silent: false,
+        extra: { type: 'question-box' },
+      });
    }
  }
  let permissionGranted = await isPermissionGranted();
@@ -113,6 +119,16 @@ export async function initAll(isOnBoot: boolean) {

  appWindow.setMinSize(new PhysicalSize(720, 480));

+  // 监听f12事件
+  if (!isDev) {
+    window.addEventListener('keydown', (event) => {
+      if (event.key === 'F12') {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+  }
+
  clientInited.value = true;
 }
 export function OnClientUnmounted() {
--- a/src/data/UpdateNote.ts
+++ b/src/data/UpdateNote.ts
@@ -14,11 +14,10 @@ export const updateNotes: updateNoteType[] = [
        content: [
          ['比当前所有 EventFetcher 部署方法都更要简单且支持扫码登录的客户端开始测试力, 支持Windows, Linux, MacOS (后两个没测试过'],
          [
-            '如果对此感兴趣的话可以使用 ',
+            '安装方式: ',
            () => h(NButton, {
-              text: true, tag: 'a', href: FETCH_API + 'https://github.com/Megghy/vtsuru-fetcher-client/releases/download/app-v0.1.0/vtsuru-fetcher-client_0.1.0_x64-setup.exe', target: '_blank', type: 'info'
-            }, () => '这个链接'),
-            ' 下载Windows客户端, 其他平台请在下面的客户端 Repo 中的 Release 下载',
+              text: true, tag: 'a', href: 'https://www.wolai.com/carN6qvUm3FErze9Xo53ii', target: '_blank', type: 'info'
+            }, () => '查看介绍'),
          ],
          [
            '当前可能存在一些问题, 可以加入秋秋群 873260337 进行反馈, 有功能需求也可以提出'