mirror of
https://github.com/HiMeditator/auto-caption.git
synced 2026-02-13 02:54:48 +08:00
feat(ControlPage): 添加项目信息展示
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user