💄 自定义Sentry反馈按钮样式

package.json

@@ -109,6 +109,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
     "@microsoft/tsdoc": "^0.16.0",
+    "@sentry/core": "^10.32.1",
     "@tauri-apps/cli": "2.9.6",
     "@types/fs-extra": "^11.0.4",
     "@types/js-md5": "^0.8.0",

pnpm-lock.yaml

@@ -120,6 +120,9 @@ importers:
       '@microsoft/tsdoc':
         specifier: ^0.16.0
         version: 0.16.0
+      '@sentry/core':
+        specifier: ^10.32.1
+        version: 10.32.1
       '@tauri-apps/cli':
         specifier: 2.9.6
         version: 2.9.6

src/assets/styles/sentry.custom.scss

@@ -0,0 +1,14 @@
+/**
+ * 自定义 Sentry 反馈 BUG 按钮样式
+ * @since Beta v0.9.1
+ */
+
+html #sentry-feedback {
+  --page-margin: 8px 8px 64px 8px;
+  --background: var(--tgc-btn-1);
+  --foreground: var(--btn-text);
+  --font-family: var(--font-text);
+  --dialog-color: var(--common-text-title);
+  --input-color: var(--app-page-content);
+  --button-color: var(--tgc-od-blue);
+}

src/components/pageConfig/tc-appBadge.vue

@@ -6,9 +6,6 @@
     </div>
     <div class="tab-info">v{{ versionApp }}.{{ buildTime === "" ? "Dev" : buildTime }}</div>
     <div class="tab-links">
-      <div class="tab-link" title="反馈BUG" @click="toReport()">
-        <v-icon color="white">mdi-contactless-payment-circle-outline</v-icon>
-      </div>
       <div class="tab-link" title="点击加入反馈群" @click="toGroup()">
         <img alt="qq" src="/platforms/other/qq.webp" />
       </div>
@@ -25,7 +22,6 @@
   </div>
 </template>
 <script lang="ts" setup>
-import * as Sentry from "@sentry/vue";
 import useAppStore from "@store/app.js";
 import { app } from "@tauri-apps/api";
 import { openUrl } from "@tauri-apps/plugin-opener";
@@ -37,11 +33,6 @@ const versionApp = ref<string>();
 
 onMounted(async () => (versionApp.value = await app.getVersion()));
 
-async function toReport(): Promise<void> {
-  const eventId = Sentry.captureMessage("设置页反馈", "info");
-  Sentry.showReportDialog({ eventId: eventId });
-}
-
 async function toRelease(): Promise<void> {
   await openUrl("https://github.com/BTMuli/TeyvatGuide/releases/latest");
 }

src/main.ts

@@ -3,6 +3,7 @@
  * @since Beta v0.9.1
  */
 
+import type { FeedbackInternalOptions } from "@sentry/core";
 import * as Sentry from "@sentry/vue";
 import { createApp } from "vue";
 import { createVuetify } from "vuetify";
@@ -23,7 +24,46 @@ Sentry.init({
   app,
   dsn: "https://8d59057c08ff381e1fccf3c9e97c6a6c@o4510617609175040.ingest.de.sentry.io/4510617659506768",
   release: `TeyvatGuide@${pkgJson.version}`,
-  integrations: [],
+  integrations: [
+    Sentry.feedbackAsyncIntegration(<FeedbackInternalOptions>{
+      // 🌗 主题与注入行为
+      colorScheme: "system",
+      autoInject: true,
+      triggerLabel: "",
+
+      // 📝 表单标题与按钮文案
+      formTitle: "问题反馈",
+      cancelButtonLabel: "取消",
+      submitButtonLabel: "提交反馈",
+      successMessageText: "感谢您的反馈，我们将尽快处理。",
+
+      // 🧑 用户信息字段
+      nameLabel: "反馈人",
+      namePlaceholder: "请输入您的姓名或昵称",
+      emailLabel: "电子邮箱",
+      emailPlaceholder: "请输入您的邮箱地址，以便我们与您联系",
+
+      // 🐛 问题描述字段
+      messageLabel: "问题描述",
+      messagePlaceholder: "请详细描述您遇到的问题及复现步骤",
+      isRequiredLabel: "（必填）",
+
+      // 📸 截图工具相关
+      addScreenshotButtonLabel: "添加当前页面截图",
+      removeScreenshotButtonLabel: "移除截图",
+      highlightToolText: "标记重点区域",
+      removeHighlightText: "移除标记",
+      hideToolText: "遮挡敏感信息",
+    }),
+  ],
+  beforeSend(event, hint) {
+    console.log(hint);
+    // Check if it is an exception, and if so, show the report dialog
+    if (event.exception && event.event_id) {
+      Sentry.showReportDialog({ eventId: event.event_id });
+    }
+    return event;
+  },
   // Setting this option to true will send default PII data to Sentry.
   // For example, automatic IP address collection on events
   sendDefaultPii: true,