From 301c691f041106b917bd68482bb922dbe58f0216 Mon Sep 17 00:00:00 2001
From: himeditator <hironin@foxmail.com>
Date: Thu, 26 Jun 2025 21:53:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(ControlPage):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/views/ControlPage.vue | 53 +++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/views/ControlPage.vue b/src/renderer/src/views/ControlPage.vue
index 66455ed..88fb388 100644
--- a/src/renderer/src/views/ControlPage.vue
+++ b/src/renderer/src/views/ControlPage.vue
@@ -4,6 +4,9 @@
       <a-col :span="controlSpan">
         <div class="caption-control">
           <a-card size="small" title="页面宽度">
+            <template #extra>
+              <a-button type="link" @click="showAbout = true">关于本项目</a-button>
+            </template>
             <div>
               <a-input type="range" class="span-input" min="6" max="18" v-model:value="controlSpan" />
             </div>
@@ -18,8 +21,25 @@
         </div>
       </a-col>
     </a-row>
+    <a-modal v-model:open="showAbout" title="关于本项目" :footer="null">
+      <div class="about-modal-content">
+        <h2 class="about-title">Auto Caption 项目</h2>
+        <p class="about-desc">一个跨平台的字幕显示软件。</p>
+        <a-divider />
+        <div class="about-info">
+          <p><b>作者：</b>HiMeditator</p>
+          <p><b>版本：</b>v0.1.0</p>
+          <p>
+            <b>项目地址：</b>
+            <a href="https://github.com/HiMeditator/auto-caption" target="_blank" style="display:inline-flex;align-items:center;">
+              GitHub | auto-caption
+            </a>
+          </p>
+        </div>
+        <div class="about-date">2026 年 6 月 26 日</div>
+      </div>
+    </a-modal>
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -28,6 +48,7 @@ import CaptionControl from '../components/CaptionControl.vue';
 import CaptionData from '../components/CaptionData.vue'
 import { ref } from 'vue'
 const controlSpan = ref(8)
+const showAbout = ref(false)
 </script>
 
 <style scoped>
@@ -49,4 +70,34 @@ const controlSpan = ref(8)
 .span-input {
   width: 100px;
 }
+
+.about-modal-content {
+  text-align: center;
+  padding: 8px 0 0 0;
+}
+
+.about-title {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 0.2em;
+}
+
+.about-desc {
+  color: #666;
+  margin-bottom: 0.5em;
+}
+
+.about-info {
+  text-align: left;
+  display: inline-block;
+  margin: 0 auto;
+  font-size: 1em;
+}
+
+.about-date {
+  margin-top: 1.5em;
+  color: #aaa;
+  font-size: 0.95em;
+  text-align: right;
+}
 </style>
\ No newline at end of file