From c262149d51d77eb8eb342b18e3b4161af2ff4cd9 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Wed, 25 Jun 2025 12:02:36 +1000
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 App.vue 中引入并使用 Updated 组件
- 新增 src/components/updated.vue 组件文件

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.vue                |  6 +++++-
 src/components/updated.vue | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/components/updated.vue

diff --git a/src/App.vue b/src/App.vue
index 5be151c..81f3b01 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,8 @@ import LeftArrowIcon from './assets/icons/leftarrow.vue'
 import CorgIcon from './assets/icons/corg.vue'
 import { watch } from 'vue'
 
+import Updated from './components/updated.vue'
+
 const presentPreferencePanel = ref(false)
 
 const route = useRoute()
@@ -21,6 +23,8 @@ watch(() => presentPreferencePanel, (value) => {
 </script>
 
 <template>
+	<Updated />
+
 	<div class="w-screen h-screen overflow-hidden bg-[#191919]">
 		<div class="flex flex-col w-full h-full overflow-y-auto">
 			<div class="py-8 px-4 md:px-8 w-screen bg-gradient-to-b from-[#00000080] to-transparent z-20 absolute top-0">
@@ -77,4 +81,4 @@ watch(() => presentPreferencePanel, (value) => {
 		</div>
 		<PreferencePanel :present="presentPreferencePanel" @dismiss="presentPreferencePanel = false" />
 	</div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/updated.vue b/src/components/updated.vue
new file mode 100644
index 0000000..799630e
--- /dev/null
+++ b/src/components/updated.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import XIcon from '../assets/icons/x.vue'
+import { computed } from 'vue'
+
+const version = computed(() => {
+	try {
+		// 如果你的构建工具支持，可以直接导入
+		return chrome?.runtime?.getManifest?.()?.version || 'unknown'
+	} catch (error) {
+		return 'unknown'
+	}
+})
+</script>
+
+<template>
+	<div class="absolute top-0 left-0 w-screen h-screen bg-neutral-700/30 flex justify-center items-center">
+		<div class="bg-neutral-900/80 shadow-[0_0_16px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl border border-[#ffffff39] rounded-lg w-[60rem] h-3/4 relative overflow-y-auto text-white">
+			<div
+				class="flex justify-between items-center p-8 sticky top-0 bg-gradient-to-b from-neutral-900 to-neutral-900/0 z-10">
+				<div class="text-white text-2xl font-semibold">MSR Mod 已更新至 {{version}}</div>
+				<button
+					class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center transition-all duration-200 hover:bg-neutral-700/80"
+					@click="$emit('dismiss')">
+					<XIcon :size="4" />
+				</button>
+			</div>
+
+			<div class="flex flex-col gap-4 mb-8 px-8 text-lg">
+				<p>MSR Mod 现在有两种渠道接收错误及意见反馈。如果你对 MSR Mod 有任何的意见建议，或是想要回报错误及体验困惑之处，欢迎前往 <a href="https://github.com/Astrian/msr-mod/issues" target="_blank" class="underline">GitHub Issue</a> 或 <a href="https://discord.gg/QQUfeb2gzH" target="_blank" class="underline">Discord 社群</a> 向我们反馈。如果你的意见或错误回报被接受，我们会将其放入 <a href="https://trello.com/b/Ju1TRXla" target="_blank" class="underline">Trello 看板</a> 中进行跟踪，敬请留意。</p>
+
+				<ul class="list-disc list-inside">
+					<li>新增版本更新提示对话框，将在 MSR Mod 更新后首次启动显示。</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>