Compare commits
2 Commits
mac-adapti
...
v0.3.0
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
606f9b480b | ||
|
|
546beb3112 |
@@ -2,6 +2,11 @@
|
|||||||
<img src="./build/icon.png" width="100px" height="100px"/>
|
<img src="./build/icon.png" width="100px" height="100px"/>
|
||||||
<h1 align="center">auto-caption</h1>
|
<h1 align="center">auto-caption</h1>
|
||||||
<p>Auto Caption 是一个跨平台的实时字幕显示软件。</p>
|
<p>Auto Caption 是一个跨平台的实时字幕显示软件。</p>
|
||||||
|
<img src="https://img.shields.io/badge/version-0.3.0-blue">
|
||||||
|
<img src="https://img.shields.io/github/issues/HiMeditator/auto-caption?color=orange">
|
||||||
|
<img src="https://img.shields.io/github/languages/top/HiMeditator/auto-caption?color=royalblue">
|
||||||
|
<img src="https://img.shields.io/github/repo-size/HiMeditator/auto-caption?color=green">
|
||||||
|
<img src="https://visitor-badge.laobi.icu/badge?page_id=himeditator.github.io">
|
||||||
<p>
|
<p>
|
||||||
| <b>简体中文</b>
|
| <b>简体中文</b>
|
||||||
| <a href="./README_en.md">English</a>
|
| <a href="./README_en.md">English</a>
|
||||||
|
|||||||
@@ -2,6 +2,11 @@
|
|||||||
<img src="./build/icon.png" width="100px" height="100px"/>
|
<img src="./build/icon.png" width="100px" height="100px"/>
|
||||||
<h1 align="center">auto-caption</h1>
|
<h1 align="center">auto-caption</h1>
|
||||||
<p>Auto Caption is a cross-platform real-time caption display software.</p>
|
<p>Auto Caption is a cross-platform real-time caption display software.</p>
|
||||||
|
<img src="https://img.shields.io/badge/version-0.3.0-blue">
|
||||||
|
<img src="https://img.shields.io/github/issues/HiMeditator/auto-caption?color=orange">
|
||||||
|
<img src="https://img.shields.io/github/languages/top/HiMeditator/auto-caption?color=royalblue">
|
||||||
|
<img src="https://img.shields.io/github/repo-size/HiMeditator/auto-caption?color=green">
|
||||||
|
<img src="https://visitor-badge.laobi.icu/badge?page_id=himeditator.github.io">
|
||||||
<p>
|
<p>
|
||||||
| <a href="./README.md">简体中文</a>
|
| <a href="./README.md">简体中文</a>
|
||||||
| <b>English</b>
|
| <b>English</b>
|
||||||
|
|||||||
@@ -2,6 +2,11 @@
|
|||||||
<img src="./build/icon.png" width="100px" height="100px"/>
|
<img src="./build/icon.png" width="100px" height="100px"/>
|
||||||
<h1 align="center">auto-caption</h1>
|
<h1 align="center">auto-caption</h1>
|
||||||
<p>Auto Caption はクロスプラットフォームのリアルタイム字幕表示ソフトウェアです。</p>
|
<p>Auto Caption はクロスプラットフォームのリアルタイム字幕表示ソフトウェアです。</p>
|
||||||
|
<img src="https://img.shields.io/badge/version-0.3.0-blue">
|
||||||
|
<img src="https://img.shields.io/github/issues/HiMeditator/auto-caption?color=orange">
|
||||||
|
<img src="https://img.shields.io/github/languages/top/HiMeditator/auto-caption?color=royalblue">
|
||||||
|
<img src="https://img.shields.io/github/repo-size/HiMeditator/auto-caption?color=green">
|
||||||
|
<img src="https://visitor-badge.laobi.icu/badge?page_id=himeditator.github.io">
|
||||||
<p>
|
<p>
|
||||||
| <a href="./README.md">简体中文</a>
|
| <a href="./README.md">简体中文</a>
|
||||||
| <a href="./README_en.md">English</a>
|
| <a href="./README_en.md">English</a>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 373 KiB After Width: | Height: | Size: 440 KiB |
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 443 KiB |
|
Before Width: | Height: | Size: 384 KiB After Width: | Height: | Size: 450 KiB |
@@ -29,6 +29,7 @@
|
|||||||
|
|
||||||
### 新增功能
|
### 新增功能
|
||||||
|
|
||||||
|
- 添加长字幕内容隐藏功能 (#1)
|
||||||
- 添加多界面语言支持(中文、英语、日语)
|
- 添加多界面语言支持(中文、英语、日语)
|
||||||
- 添加暗色主题
|
- 添加暗色主题
|
||||||
|
|
||||||
@@ -40,7 +41,7 @@
|
|||||||
|
|
||||||
### 修复bug
|
### 修复bug
|
||||||
|
|
||||||
- 添加字幕引擎长时间空置后报错的问题
|
- 添加字幕引擎长时间空置后报错的问题 (#2)
|
||||||
|
|
||||||
### 新增文档
|
### 新增文档
|
||||||
|
|
||||||
@@ -48,63 +49,26 @@
|
|||||||
- 新增英语、日语字幕引擎说明文档和用户手册
|
- 新增英语、日语字幕引擎说明文档和用户手册
|
||||||
- 新增 electron ipc api 文档
|
- 新增 electron ipc api 文档
|
||||||
|
|
||||||
|
## v0.3.0
|
||||||
|
|
||||||
|
2025-07-09
|
||||||
|
|
||||||
|
对字幕引擎代码进行了重构,软件适配了 macOS 平台,添加了新功能。
|
||||||
|
|
||||||
Here are the translations of the selected macOS audio output configuration section:
|
### 新增功能
|
||||||
|
|
||||||
### English Translation:
|
- 添加软件内设置 API KEY 的功能
|
||||||
```markdown
|
- 添加字幕字体粗细和文本阴影的设置
|
||||||
### Capturing System Audio Output on macOS
|
- 添加复制字幕记录到剪贴板的功能 (#3)
|
||||||
|
|
||||||
The subtitle engine cannot directly capture system audio output on macOS platform and requires additional driver installation. The current subtitle engine uses [BlackHole](https://github.com/ExistentialAudio/BlackHole). First open Terminal and execute one of the following commands (recommended to choose the first one):
|
### 优化体验
|
||||||
|
|
||||||
```bash
|
- 字幕时间记录精确到毫秒
|
||||||
brew install blackhole-2ch
|
- 更详细的说明文档(添加字幕引擎规格说明、用户文档和字幕引擎文档更新) (#4)
|
||||||
brew install blackhole-16ch
|
- 适配 macOS 平台
|
||||||
brew install blackhole-64ch
|
- 字幕窗口有了更大的顶置优先级
|
||||||
```
|
- 预览窗口可以实时显示最新的字幕内容
|
||||||
|
|
||||||
After installation completes, open `Audio MIDI Setup` (searchable via `cmd + space`). Check if BlackHole appears in the device list - if not, restart your computer.
|
### 修复bug
|
||||||
|
|
||||||
Once BlackHole is confirmed installed, in the `Audio MIDI Setup` page, click the plus (+) button at bottom left and select "Create Multi-Output Device". Include both BlackHole and your desired audio output destination in the outputs. Finally, set this multi-output device as your default audio output device.
|
- 修复使用系统主题时暗色系统载入为亮色的问题
|
||||||
|
|
||||||
Now the subtitle engine can capture system audio output and generate subtitles.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Japanese Translation:
|
|
||||||
```markdown
|
|
||||||
### macOSでのシステムオーディオ出力の取得方法
|
|
||||||
|
|
||||||
字幕エンジンはmacOSプラットフォームで直接システムオーディオ出力を取得できず、追加のドライバーインストールが必要です。現在の字幕エンジンでは[BlackHole](https://github.com/ExistentialAudio/BlackHole)を使用しています。まずターミナルを開き、以下のいずれかのコマンドを実行してください(最初のオプションを推奨します):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
brew install blackhole-2ch
|
|
||||||
brew install blackhole-16ch
|
|
||||||
brew install blackhole-64ch
|
|
||||||
```
|
|
||||||
|
|
||||||
インストール完了後、`オーディオMIDI設定`(`cmd + space`で検索可能)を開きます。デバイスリストにBlackHoleが表示されているか確認してください - 表示されていない場合はコンピュータを再起動してください。
|
|
||||||
|
|
||||||
BlackHoleのインストールが確認できたら、`オーディオMIDI設定`ページで左下のプラス(+)ボタンをクリックし、「マルチ出力デバイスを作成」を選択します。出力にBlackHoleと希望するオーディオ出力先の両方を含めてください。最後に、このマルチ出力デバイスをデフォルトのオーディオ出力デバイスに設定します。
|
|
||||||
|
|
||||||
これで字幕エンジンがシステムオーディオ出力をキャプチャし、字幕を生成できるようになります。
|
|
||||||
```
|
|
||||||
|
|
||||||
Key translation notes:
|
|
||||||
1. Technical terms:
|
|
||||||
- "Audio MIDI Setup" → "オーディオMIDI設定" (Japanese)
|
|
||||||
- "Multi-Output Device" → "マルチ出力デバイス" (Japanese)
|
|
||||||
- Maintained "BlackHole" and "brew" commands as-is
|
|
||||||
|
|
||||||
2. Structure:
|
|
||||||
- Kept the same section hierarchy with ### headers
|
|
||||||
- Preserved all code blocks and formatting
|
|
||||||
- Maintained the step-by-step instruction flow
|
|
||||||
|
|
||||||
3. Localization:
|
|
||||||
- Used appropriate Japanese technical terms
|
|
||||||
- Adjusted phrasing for natural reading in each language
|
|
||||||
- Kept all terminal commands and interface elements unchanged
|
|
||||||
|
|
||||||
Both translations accurately convey the technical procedures while adapting naturally to their target languages.
|
|
||||||
|
|||||||
@@ -8,10 +8,10 @@
|
|||||||
- [x] 添加对自带字幕引擎的详细规格说明 *2025/07/07*
|
- [x] 添加对自带字幕引擎的详细规格说明 *2025/07/07*
|
||||||
- [x] 添加复制字幕到剪贴板功能 *2025/07/08*
|
- [x] 添加复制字幕到剪贴板功能 *2025/07/08*
|
||||||
- [x] 适配 macOS 平台 *2025/07/08*
|
- [x] 适配 macOS 平台 *2025/07/08*
|
||||||
|
- [x] 添加字幕文字描边 *2025/07/09*
|
||||||
|
|
||||||
## 待完成
|
## 待完成
|
||||||
|
|
||||||
- [ ] 添加字幕文字描边
|
|
||||||
- [ ] 添加本地字幕引擎
|
- [ ] 添加本地字幕引擎
|
||||||
- [ ] 添加基于 Vosk 的字幕引擎
|
- [ ] 添加基于 Vosk 的字幕引擎
|
||||||
- [ ] 验证 / 添加基于 FunASR 的字幕引擎
|
- [ ] 验证 / 添加基于 FunASR 的字幕引擎
|
||||||
|
|||||||
BIN
docs/img/03.png
Normal file
|
After Width: | Height: | Size: 152 KiB |
BIN
docs/img/04.png
Normal file
|
After Width: | Height: | Size: 172 KiB |
BIN
docs/img/05.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
@@ -35,6 +35,8 @@ Alibaba Cloud provides detailed tutorials for this:
|
|||||||
|
|
||||||
### Capturing System Audio Output on macOS
|
### Capturing System Audio Output on macOS
|
||||||
|
|
||||||
|
> Based on the [Setup Multi-Output Device](https://github.com/ExistentialAudio/BlackHole/wiki/Multi-Output-Device) tutorial
|
||||||
|
|
||||||
The caption engine cannot directly capture system audio output on macOS platform and requires additional driver installation. The current caption engine uses [BlackHole](https://github.com/ExistentialAudio/BlackHole). First open Terminal and execute one of the following commands (recommended to choose the first one):
|
The caption engine cannot directly capture system audio output on macOS platform and requires additional driver installation. The current caption engine uses [BlackHole](https://github.com/ExistentialAudio/BlackHole). First open Terminal and execute one of the following commands (recommended to choose the first one):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@@ -43,10 +45,16 @@ brew install blackhole-16ch
|
|||||||
brew install blackhole-64ch
|
brew install blackhole-64ch
|
||||||
```
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
After installation completes, open `Audio MIDI Setup` (searchable via `cmd + space`). Check if BlackHole appears in the device list - if not, restart your computer.
|
After installation completes, open `Audio MIDI Setup` (searchable via `cmd + space`). Check if BlackHole appears in the device list - if not, restart your computer.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
Once BlackHole is confirmed installed, in the `Audio MIDI Setup` page, click the plus (+) button at bottom left and select "Create Multi-Output Device". Include both BlackHole and your desired audio output destination in the outputs. Finally, set this multi-output device as your default audio output device.
|
Once BlackHole is confirmed installed, in the `Audio MIDI Setup` page, click the plus (+) button at bottom left and select "Create Multi-Output Device". Include both BlackHole and your desired audio output destination in the outputs. Finally, set this multi-output device as your default audio output device.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
Now the caption engine can capture system audio output and generate captions.
|
Now the caption engine can capture system audio output and generate captions.
|
||||||
|
|
||||||
### Modifying Settings
|
### Modifying Settings
|
||||||
|
|||||||
@@ -37,6 +37,9 @@ macOS プラットフォームでオーディオ出力を取得するには追
|
|||||||
|
|
||||||
### macOS でのシステムオーディオ出力の取得方法
|
### macOS でのシステムオーディオ出力の取得方法
|
||||||
|
|
||||||
|
> [マルチ出力デバイスの設定](https://github.com/ExistentialAudio/BlackHole/wiki/Multi-Output-Device) チュートリアルに基づいて作成
|
||||||
|
|
||||||
|
|
||||||
字幕エンジンは macOS プラットフォームで直接システムオーディオ出力を取得できず、追加のドライバーインストールが必要です。現在の字幕エンジンでは [BlackHole](https://github.com/ExistentialAudio/BlackHole) を使用しています。まずターミナルを開き、以下のいずれかのコマンドを実行してください(最初のオプションを推奨します):
|
字幕エンジンは macOS プラットフォームで直接システムオーディオ出力を取得できず、追加のドライバーインストールが必要です。現在の字幕エンジンでは [BlackHole](https://github.com/ExistentialAudio/BlackHole) を使用しています。まずターミナルを開き、以下のいずれかのコマンドを実行してください(最初のオプションを推奨します):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@@ -45,10 +48,16 @@ brew install blackhole-16ch
|
|||||||
brew install blackhole-64ch
|
brew install blackhole-64ch
|
||||||
```
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
インストール完了後、`オーディオMIDI設定`(`cmd + space`で検索可能)を開きます。デバイスリストにBlackHoleが表示されているか確認してください - 表示されていない場合はコンピュータを再起動してください。
|
インストール完了後、`オーディオMIDI設定`(`cmd + space`で検索可能)を開きます。デバイスリストにBlackHoleが表示されているか確認してください - 表示されていない場合はコンピュータを再起動してください。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
BlackHoleのインストールが確認できたら、`オーディオ MIDI 設定`ページで左下のプラス(+)ボタンをクリックし、「マルチ出力デバイスを作成」を選択します。出力に BlackHole と希望するオーディオ出力先の両方を含めてください。最後に、このマルチ出力デバイスをデフォルトのオーディオ出力デバイスに設定します。
|
BlackHoleのインストールが確認できたら、`オーディオ MIDI 設定`ページで左下のプラス(+)ボタンをクリックし、「マルチ出力デバイスを作成」を選択します。出力に BlackHole と希望するオーディオ出力先の両方を含めてください。最後に、このマルチ出力デバイスをデフォルトのオーディオ出力デバイスに設定します。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
これで字幕エンジンがシステムオーディオ出力をキャプチャし、字幕を生成できるようになります。
|
これで字幕エンジンがシステムオーディオ出力をキャプチャし、字幕を生成できるようになります。
|
||||||
|
|
||||||
### 設定の変更
|
### 設定の変更
|
||||||
|
|||||||
@@ -38,6 +38,8 @@ Auto Caption 是一个跨平台的字幕显示软件,能够实时获取系统
|
|||||||
|
|
||||||
### macOS 获取系统音频输出
|
### macOS 获取系统音频输出
|
||||||
|
|
||||||
|
> 基于 [Setup Multi-Output Device](https://github.com/ExistentialAudio/BlackHole/wiki/Multi-Output-Device) 教程编写
|
||||||
|
|
||||||
字幕引擎无法在 macOS 平台直接获取系统的音频输出,需要安装额外的驱动。目前字幕引擎采用的是 [BlackHole](https://github.com/ExistentialAudio/BlackHole)。首先打开终端,执行以下命令中的其中一个(建议选择第一个):
|
字幕引擎无法在 macOS 平台直接获取系统的音频输出,需要安装额外的驱动。目前字幕引擎采用的是 [BlackHole](https://github.com/ExistentialAudio/BlackHole)。首先打开终端,执行以下命令中的其中一个(建议选择第一个):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@@ -46,10 +48,16 @@ brew install blackhole-16ch
|
|||||||
brew install blackhole-64ch
|
brew install blackhole-64ch
|
||||||
```
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
安装完成后打开 `音频 MIDI 设置`(`cmd + space` 打开搜索,可以搜索到)。观察设备列表中是否有 BlackHole 设备,如果没有需要重启电脑。
|
安装完成后打开 `音频 MIDI 设置`(`cmd + space` 打开搜索,可以搜索到)。观察设备列表中是否有 BlackHole 设备,如果没有需要重启电脑。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
在确定安装好 BlackHole 设备后,在 `音频 MIDI 设置` 页面,点击左下角的加号,选择“创建多输出设备”。在输出中包含 BlackHole 和你想要的音频输出目标。最后将该多输出设备设置为默认音频输出设备。
|
在确定安装好 BlackHole 设备后,在 `音频 MIDI 设置` 页面,点击左下角的加号,选择“创建多输出设备”。在输出中包含 BlackHole 和你想要的音频输出目标。最后将该多输出设备设置为默认音频输出设备。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
现在字幕引擎就能捕获系统的音频输出并生成字幕了。
|
现在字幕引擎就能捕获系统的音频输出并生成字幕了。
|
||||||
|
|
||||||
### 修改设置
|
### 修改设置
|
||||||
|
|||||||
@@ -65,8 +65,11 @@ class ControlWindow {
|
|||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.handle('control.nativeTheme.get', () => {
|
ipcMain.handle('control.nativeTheme.get', () => {
|
||||||
if(nativeTheme.shouldUseDarkColors) return 'dark'
|
if(allConfig.uiTheme === 'system'){
|
||||||
return 'light'
|
if(nativeTheme.shouldUseDarkColors) return 'dark'
|
||||||
|
return 'light'
|
||||||
|
}
|
||||||
|
return allConfig.uiTheme
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.on('control.uiLanguage.change', (_, args) => {
|
ipcMain.on('control.uiLanguage.change', (_, args) => {
|
||||||
|
|||||||
@@ -20,13 +20,20 @@ export interface Styles {
|
|||||||
fontFamily: string,
|
fontFamily: string,
|
||||||
fontSize: number,
|
fontSize: number,
|
||||||
fontColor: string,
|
fontColor: string,
|
||||||
|
fontWeight: number,
|
||||||
background: string,
|
background: string,
|
||||||
opacity: number,
|
opacity: number,
|
||||||
showPreview: boolean,
|
showPreview: boolean,
|
||||||
transDisplay: boolean,
|
transDisplay: boolean,
|
||||||
transFontFamily: string,
|
transFontFamily: string,
|
||||||
transFontSize: number,
|
transFontSize: number,
|
||||||
transFontColor: string
|
transFontColor: string,
|
||||||
|
transFontWeight: number,
|
||||||
|
textShadow: boolean,
|
||||||
|
offsetX: number,
|
||||||
|
offsetY: number,
|
||||||
|
blur: number,
|
||||||
|
textShadowColor: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CaptionItem {
|
export interface CaptionItem {
|
||||||
|
|||||||
@@ -11,13 +11,20 @@ const defaultStyles: Styles = {
|
|||||||
fontFamily: 'sans-serif',
|
fontFamily: 'sans-serif',
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
fontColor: '#000000',
|
fontColor: '#000000',
|
||||||
|
fontWeight: 4,
|
||||||
background: '#dbe2ef',
|
background: '#dbe2ef',
|
||||||
opacity: 80,
|
opacity: 80,
|
||||||
showPreview: true,
|
showPreview: true,
|
||||||
transDisplay: true,
|
transDisplay: true,
|
||||||
transFontFamily: 'sans-serif',
|
transFontFamily: 'sans-serif',
|
||||||
transFontSize: 24,
|
transFontSize: 24,
|
||||||
transFontColor: '#000000'
|
transFontColor: '#000000',
|
||||||
|
transFontWeight: 4,
|
||||||
|
textShadow: false,
|
||||||
|
offsetX: 2,
|
||||||
|
offsetY: 2,
|
||||||
|
blur: 0,
|
||||||
|
textShadowColor: '#ffffff'
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultControls: Controls = {
|
const defaultControls: Controls = {
|
||||||
|
|||||||
@@ -11,6 +11,8 @@
|
|||||||
|
|
||||||
.switch-label {
|
.switch-label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: right;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -22,6 +22,7 @@
|
|||||||
v-model:value="currentFontFamily"
|
v-model:value="currentFontFamily"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-item">
|
<div class="input-item">
|
||||||
<span class="input-label">{{ $t('style.fontColor') }}</span>
|
<span class="input-label">{{ $t('style.fontColor') }}</span>
|
||||||
<a-input
|
<a-input
|
||||||
@@ -41,6 +42,16 @@
|
|||||||
/>
|
/>
|
||||||
<div class="input-item-value">{{ currentFontSize }}px</div>
|
<div class="input-item-value">{{ currentFontSize }}px</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="input-item">
|
||||||
|
<span class="input-label">{{ $t('style.fontWeight') }}</span>
|
||||||
|
<a-input
|
||||||
|
class="input-area"
|
||||||
|
type="range"
|
||||||
|
min="1" max="9"
|
||||||
|
v-model:value="currentFontWeight"
|
||||||
|
/>
|
||||||
|
<div class="input-item-value">{{ currentFontWeight*100 }}</div>
|
||||||
|
</div>
|
||||||
<div class="input-item">
|
<div class="input-item">
|
||||||
<span class="input-label">{{ $t('style.background') }}</span>
|
<span class="input-label">{{ $t('style.background') }}</span>
|
||||||
<a-input
|
<a-input
|
||||||
@@ -70,6 +81,11 @@
|
|||||||
<span class="switch-label">{{ $t('style.translation') }}</span>
|
<span class="switch-label">{{ $t('style.translation') }}</span>
|
||||||
<a-switch v-model:checked="currentTransDisplay" />
|
<a-switch v-model:checked="currentTransDisplay" />
|
||||||
</div>
|
</div>
|
||||||
|
<span style="display:inline-block;width:20px;"></span>
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
<span class="switch-label">{{ $t('style.textShadow') }}</span>
|
||||||
|
<a-switch v-model:checked="currentTextShadow" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-show="currentTransDisplay">
|
<div v-show="currentTransDisplay">
|
||||||
@@ -103,6 +119,60 @@
|
|||||||
/>
|
/>
|
||||||
<div class="input-item-value">{{ currentTransFontSize }}px</div>
|
<div class="input-item-value">{{ currentTransFontSize }}px</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="input-item">
|
||||||
|
<span class="input-label">{{ $t('style.fontWeight') }}</span>
|
||||||
|
<a-input
|
||||||
|
class="input-area"
|
||||||
|
type="range"
|
||||||
|
min="1" max="9"
|
||||||
|
v-model:value="currentTransFontWeight"
|
||||||
|
/>
|
||||||
|
<div class="input-item-value">{{ currentTransFontWeight*100 }}</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-show="currentTextShadow" style="margin-top:10px;">
|
||||||
|
<a-card size="small" :title="$t('style.shadow.title')">
|
||||||
|
<div class="input-item">
|
||||||
|
<span class="input-label">{{ $t('style.shadow.offsetX') }}</span>
|
||||||
|
<a-input
|
||||||
|
class="input-area"
|
||||||
|
type="range"
|
||||||
|
min="-10" max="10"
|
||||||
|
v-model:value="currentOffsetX"
|
||||||
|
/>
|
||||||
|
<div class="input-item-value">{{ currentOffsetX }}px</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-item">
|
||||||
|
<span class="input-label">{{ $t('style.shadow.offsetY') }}</span>
|
||||||
|
<a-input
|
||||||
|
class="input-area"
|
||||||
|
type="range"
|
||||||
|
min="-10" max="10"
|
||||||
|
v-model:value="currentOffsetY"
|
||||||
|
/>
|
||||||
|
<div class="input-item-value">{{ currentOffsetY }}px</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-item">
|
||||||
|
<span class="input-label">{{ $t('style.shadow.blur') }}</span>
|
||||||
|
<a-input
|
||||||
|
class="input-area"
|
||||||
|
type="range"
|
||||||
|
min="0" max="10"
|
||||||
|
v-model:value="currentBlur"
|
||||||
|
/>
|
||||||
|
<div class="input-item-value">{{ currentBlur }}px</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-item">
|
||||||
|
<span class="input-label">{{ $t('style.shadow.color') }}</span>
|
||||||
|
<a-input
|
||||||
|
class="input-area"
|
||||||
|
type="color"
|
||||||
|
v-model:value="currentTextShadowColor"
|
||||||
|
/>
|
||||||
|
<div class="input-item-value">{{ currentTextShadowColor }}</div>
|
||||||
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
@@ -112,14 +182,16 @@
|
|||||||
v-if="currentPreview"
|
v-if="currentPreview"
|
||||||
class="preview-container"
|
class="preview-container"
|
||||||
:style="{
|
:style="{
|
||||||
backgroundColor: addOpicityToColor(currentBackground, currentOpacity)
|
backgroundColor: addOpicityToColor(currentBackground, currentOpacity),
|
||||||
|
textShadow: currentTextShadow ? `${currentOffsetX}px ${currentOffsetY}px ${currentBlur}px ${currentTextShadowColor}` : 'none'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<p :class="[currentLineBreak?'':'left-ellipsis']"
|
<p :class="[currentLineBreak?'':'left-ellipsis']"
|
||||||
:style="{
|
:style="{
|
||||||
fontFamily: currentFontFamily,
|
fontFamily: currentFontFamily,
|
||||||
fontSize: currentFontSize + 'px',
|
fontSize: currentFontSize + 'px',
|
||||||
color: currentFontColor
|
color: currentFontColor,
|
||||||
|
fontWeight: currentFontWeight * 100
|
||||||
}">
|
}">
|
||||||
<span v-if="captionData.length">{{ captionData[captionData.length-1].text }}</span>
|
<span v-if="captionData.length">{{ captionData[captionData.length-1].text }}</span>
|
||||||
<span v-else>{{ $t('example.original') }}</span>
|
<span v-else>{{ $t('example.original') }}</span>
|
||||||
@@ -129,7 +201,8 @@
|
|||||||
:style="{
|
:style="{
|
||||||
fontFamily: currentTransFontFamily,
|
fontFamily: currentTransFontFamily,
|
||||||
fontSize: currentTransFontSize + 'px',
|
fontSize: currentTransFontSize + 'px',
|
||||||
color: currentTransFontColor
|
color: currentTransFontColor,
|
||||||
|
fontWeight: currentTransFontWeight * 100
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<span v-if="captionData.length">{{ captionData[captionData.length-1].translation }}</span>
|
<span v-if="captionData.length">{{ captionData[captionData.length-1].translation }}</span>
|
||||||
@@ -147,7 +220,6 @@ import { storeToRefs } from 'pinia'
|
|||||||
import { notification } from 'ant-design-vue'
|
import { notification } from 'ant-design-vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useCaptionLogStore } from '@renderer/stores/captionLog';
|
import { useCaptionLogStore } from '@renderer/stores/captionLog';
|
||||||
|
|
||||||
const captionLog = useCaptionLogStore();
|
const captionLog = useCaptionLogStore();
|
||||||
const { captionData } = storeToRefs(captionLog);
|
const { captionData } = storeToRefs(captionLog);
|
||||||
|
|
||||||
@@ -160,6 +232,7 @@ const currentLineBreak = ref<number>(0)
|
|||||||
const currentFontFamily = ref<string>('sans-serif')
|
const currentFontFamily = ref<string>('sans-serif')
|
||||||
const currentFontSize = ref<number>(24)
|
const currentFontSize = ref<number>(24)
|
||||||
const currentFontColor = ref<string>('#000000')
|
const currentFontColor = ref<string>('#000000')
|
||||||
|
const currentFontWeight = ref<number>(4)
|
||||||
const currentBackground = ref<string>('#dbe2ef')
|
const currentBackground = ref<string>('#dbe2ef')
|
||||||
const currentOpacity = ref<number>(50)
|
const currentOpacity = ref<number>(50)
|
||||||
const currentPreview = ref<boolean>(true)
|
const currentPreview = ref<boolean>(true)
|
||||||
@@ -167,6 +240,12 @@ const currentTransDisplay = ref<boolean>(true)
|
|||||||
const currentTransFontFamily = ref<string>('sans-serif')
|
const currentTransFontFamily = ref<string>('sans-serif')
|
||||||
const currentTransFontSize = ref<number>(24)
|
const currentTransFontSize = ref<number>(24)
|
||||||
const currentTransFontColor = ref<string>('#000000')
|
const currentTransFontColor = ref<string>('#000000')
|
||||||
|
const currentTransFontWeight = ref<number>(4)
|
||||||
|
const currentTextShadow = ref<boolean>(false)
|
||||||
|
const currentOffsetX = ref<number>(2)
|
||||||
|
const currentOffsetY = ref<number>(2)
|
||||||
|
const currentBlur = ref<number>(0)
|
||||||
|
const currentTextShadowColor = ref<string>('#ffffff')
|
||||||
|
|
||||||
function addOpicityToColor(color: string, opicity: number) {
|
function addOpicityToColor(color: string, opicity: number) {
|
||||||
const opicityValue = Math.round(opicity * 255 / 100);
|
const opicityValue = Math.round(opicity * 255 / 100);
|
||||||
@@ -185,6 +264,7 @@ function applyStyle(){
|
|||||||
captionStyle.fontFamily = currentFontFamily.value;
|
captionStyle.fontFamily = currentFontFamily.value;
|
||||||
captionStyle.fontSize = currentFontSize.value;
|
captionStyle.fontSize = currentFontSize.value;
|
||||||
captionStyle.fontColor = currentFontColor.value;
|
captionStyle.fontColor = currentFontColor.value;
|
||||||
|
captionStyle.fontWeight = currentFontWeight.value;
|
||||||
captionStyle.background = currentBackground.value;
|
captionStyle.background = currentBackground.value;
|
||||||
captionStyle.opacity = currentOpacity.value;
|
captionStyle.opacity = currentOpacity.value;
|
||||||
captionStyle.showPreview = currentPreview.value;
|
captionStyle.showPreview = currentPreview.value;
|
||||||
@@ -192,6 +272,12 @@ function applyStyle(){
|
|||||||
captionStyle.transFontFamily = currentTransFontFamily.value;
|
captionStyle.transFontFamily = currentTransFontFamily.value;
|
||||||
captionStyle.transFontSize = currentTransFontSize.value;
|
captionStyle.transFontSize = currentTransFontSize.value;
|
||||||
captionStyle.transFontColor = currentTransFontColor.value;
|
captionStyle.transFontColor = currentTransFontColor.value;
|
||||||
|
captionStyle.transFontWeight = currentTransFontWeight.value;
|
||||||
|
captionStyle.textShadow = currentTextShadow.value;
|
||||||
|
captionStyle.offsetX = currentOffsetX.value;
|
||||||
|
captionStyle.offsetY = currentOffsetY.value;
|
||||||
|
captionStyle.blur = currentBlur.value;
|
||||||
|
captionStyle.textShadowColor = currentTextShadowColor.value;
|
||||||
|
|
||||||
captionStyle.sendStylesChange();
|
captionStyle.sendStylesChange();
|
||||||
|
|
||||||
@@ -206,6 +292,7 @@ function backStyle(){
|
|||||||
currentFontFamily.value = captionStyle.fontFamily;
|
currentFontFamily.value = captionStyle.fontFamily;
|
||||||
currentFontSize.value = captionStyle.fontSize;
|
currentFontSize.value = captionStyle.fontSize;
|
||||||
currentFontColor.value = captionStyle.fontColor;
|
currentFontColor.value = captionStyle.fontColor;
|
||||||
|
currentFontWeight.value = captionStyle.fontWeight;
|
||||||
currentBackground.value = captionStyle.background;
|
currentBackground.value = captionStyle.background;
|
||||||
currentOpacity.value = captionStyle.opacity;
|
currentOpacity.value = captionStyle.opacity;
|
||||||
currentPreview.value = captionStyle.showPreview;
|
currentPreview.value = captionStyle.showPreview;
|
||||||
@@ -213,6 +300,12 @@ function backStyle(){
|
|||||||
currentTransFontFamily.value = captionStyle.transFontFamily;
|
currentTransFontFamily.value = captionStyle.transFontFamily;
|
||||||
currentTransFontSize.value = captionStyle.transFontSize;
|
currentTransFontSize.value = captionStyle.transFontSize;
|
||||||
currentTransFontColor.value = captionStyle.transFontColor;
|
currentTransFontColor.value = captionStyle.transFontColor;
|
||||||
|
currentTransFontWeight.value = captionStyle.transFontWeight;
|
||||||
|
currentTextShadow.value = captionStyle.textShadow;
|
||||||
|
currentOffsetX.value = captionStyle.offsetX;
|
||||||
|
currentOffsetY.value = captionStyle.offsetY;
|
||||||
|
currentBlur.value = captionStyle.blur;
|
||||||
|
currentTextShadowColor.value = captionStyle.textShadowColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetStyle() {
|
function resetStyle() {
|
||||||
@@ -229,6 +322,16 @@ watch(changeSignal, (val) => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@import url(../assets/input.css);
|
@import url(../assets/input.css);
|
||||||
|
.general-note {
|
||||||
|
padding: 10px 10px 0;
|
||||||
|
max-width: min(36vw, 400px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-label {
|
||||||
|
color: #1668dc;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.preview-container {
|
.preview-container {
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
<p class="about-desc">{{ $t('status.about.desc') }}</p>
|
<p class="about-desc">{{ $t('status.about.desc') }}</p>
|
||||||
<a-divider />
|
<a-divider />
|
||||||
<div class="about-info">
|
<div class="about-info">
|
||||||
<p><b>{{ $t('status.about.version') }}</b><a-tag color="green">v0.2.0</a-tag></p>
|
<p><b>{{ $t('status.about.version') }}</b><a-tag color="green">v0.3.0</a-tag></p>
|
||||||
<p>
|
<p>
|
||||||
<b>{{ $t('status.about.author') }}</b>
|
<b>{{ $t('status.about.author') }}</b>
|
||||||
<a
|
<a
|
||||||
|
|||||||
@@ -66,6 +66,7 @@ export default {
|
|||||||
"fontFamily": "Font Family",
|
"fontFamily": "Font Family",
|
||||||
"fontColor": "Font Color",
|
"fontColor": "Font Color",
|
||||||
"fontSize": "Font Size",
|
"fontSize": "Font Size",
|
||||||
|
"fontWeight": "Font Weight",
|
||||||
"background": "Background",
|
"background": "Background",
|
||||||
"opacity": "Opacity",
|
"opacity": "Opacity",
|
||||||
"preview": "Preview",
|
"preview": "Preview",
|
||||||
@@ -73,6 +74,14 @@ export default {
|
|||||||
trans: {
|
trans: {
|
||||||
"title": "Translation Style Settings",
|
"title": "Translation Style Settings",
|
||||||
"useSame": "Use Original Style"
|
"useSame": "Use Original Style"
|
||||||
|
},
|
||||||
|
"textShadow": "Text Shadow",
|
||||||
|
shadow: {
|
||||||
|
"title": "Text Shadow Settings",
|
||||||
|
"offsetX": "Offset X",
|
||||||
|
"offsetY": "Offset Y",
|
||||||
|
"blur": "Blur",
|
||||||
|
"color": "Color"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
status: {
|
status: {
|
||||||
@@ -96,7 +105,7 @@ export default {
|
|||||||
"projLink": "Project Link",
|
"projLink": "Project Link",
|
||||||
"manual": "User Manual",
|
"manual": "User Manual",
|
||||||
"engineDoc": "Caption Engine Manual",
|
"engineDoc": "Caption Engine Manual",
|
||||||
"date": "July 5, 2026"
|
"date": "July 9, 2026"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
log: {
|
log: {
|
||||||
|
|||||||
@@ -66,6 +66,7 @@ export default {
|
|||||||
"fontFamily": "フォント",
|
"fontFamily": "フォント",
|
||||||
"fontColor": "カラー",
|
"fontColor": "カラー",
|
||||||
"fontSize": "サイズ",
|
"fontSize": "サイズ",
|
||||||
|
"fontWeight": "文字の太さ",
|
||||||
"background": "背景色",
|
"background": "背景色",
|
||||||
"opacity": "不透明度",
|
"opacity": "不透明度",
|
||||||
"preview": "プレビュー",
|
"preview": "プレビュー",
|
||||||
@@ -73,6 +74,14 @@ export default {
|
|||||||
trans: {
|
trans: {
|
||||||
"title": "翻訳スタイル設定",
|
"title": "翻訳スタイル設定",
|
||||||
"useSame": "原文のスタイルを使用"
|
"useSame": "原文のスタイルを使用"
|
||||||
|
},
|
||||||
|
"textShadow": "文字影",
|
||||||
|
shadow: {
|
||||||
|
"title": "テキストの影設定",
|
||||||
|
"offsetX": "Offset X",
|
||||||
|
"offsetY": "Offset Y",
|
||||||
|
"blur": "ぼかし半径",
|
||||||
|
"color": "影の色"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
status: {
|
status: {
|
||||||
@@ -96,7 +105,7 @@ export default {
|
|||||||
"projLink": "プロジェクトリンク",
|
"projLink": "プロジェクトリンク",
|
||||||
"manual": "ユーザーマニュアル",
|
"manual": "ユーザーマニュアル",
|
||||||
"engineDoc": "字幕エンジンマニュアル",
|
"engineDoc": "字幕エンジンマニュアル",
|
||||||
"date": "2025 年 7 月 5 日"
|
"date": "2025 年 7 月 9 日"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
log: {
|
log: {
|
||||||
|
|||||||
@@ -66,6 +66,7 @@ export default {
|
|||||||
"fontFamily": "字体族",
|
"fontFamily": "字体族",
|
||||||
"fontColor": "字体颜色",
|
"fontColor": "字体颜色",
|
||||||
"fontSize": "字体大小",
|
"fontSize": "字体大小",
|
||||||
|
"fontWeight": "字体粗细",
|
||||||
"background": "背景颜色",
|
"background": "背景颜色",
|
||||||
"opacity": "不透明度",
|
"opacity": "不透明度",
|
||||||
"preview": "显示预览",
|
"preview": "显示预览",
|
||||||
@@ -73,6 +74,14 @@ export default {
|
|||||||
trans: {
|
trans: {
|
||||||
"title": "翻译样式设置",
|
"title": "翻译样式设置",
|
||||||
"useSame": "使用原文样式"
|
"useSame": "使用原文样式"
|
||||||
|
},
|
||||||
|
"textShadow": "文本阴影",
|
||||||
|
shadow: {
|
||||||
|
"title": "文本阴影设置",
|
||||||
|
"offsetX": "X轴偏移",
|
||||||
|
"offsetY": "Y轴偏移",
|
||||||
|
"blur": "模糊半径",
|
||||||
|
"color": "阴影颜色"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
status: {
|
status: {
|
||||||
@@ -96,7 +105,7 @@ export default {
|
|||||||
"projLink": "项目链接",
|
"projLink": "项目链接",
|
||||||
"manual": "用户手册",
|
"manual": "用户手册",
|
||||||
"engineDoc": "字幕引擎手册",
|
"engineDoc": "字幕引擎手册",
|
||||||
"date": "2025 年 7 月 5 日"
|
"date": "2025 年 7 月 9 日"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
log: {
|
log: {
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
|
|||||||
const fontFamily = ref<string>('sans-serif')
|
const fontFamily = ref<string>('sans-serif')
|
||||||
const fontSize = ref<number>(24)
|
const fontSize = ref<number>(24)
|
||||||
const fontColor = ref<string>('#000000')
|
const fontColor = ref<string>('#000000')
|
||||||
|
const fontWeight = ref<number>(4)
|
||||||
const background = ref<string>('#dbe2ef')
|
const background = ref<string>('#dbe2ef')
|
||||||
const opacity = ref<number>(80)
|
const opacity = ref<number>(80)
|
||||||
const showPreview = ref<boolean>(true)
|
const showPreview = ref<boolean>(true)
|
||||||
@@ -15,6 +16,12 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
|
|||||||
const transFontFamily = ref<string>('sans-serif')
|
const transFontFamily = ref<string>('sans-serif')
|
||||||
const transFontSize = ref<number>(24)
|
const transFontSize = ref<number>(24)
|
||||||
const transFontColor = ref<string>('#000000')
|
const transFontColor = ref<string>('#000000')
|
||||||
|
const transFontWeight = ref<number>(4)
|
||||||
|
const textShadow = ref<boolean>(false)
|
||||||
|
const offsetX = ref<number>(2)
|
||||||
|
const offsetY = ref<number>(2)
|
||||||
|
const blur = ref<number>(0)
|
||||||
|
const textShadowColor = ref<string>('#ffffff')
|
||||||
|
|
||||||
const iBreakOptions = ref(breakOptions['zh'])
|
const iBreakOptions = ref(breakOptions['zh'])
|
||||||
const changeSignal = ref<boolean>(false)
|
const changeSignal = ref<boolean>(false)
|
||||||
@@ -35,13 +42,20 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
|
|||||||
fontFamily: fontFamily.value,
|
fontFamily: fontFamily.value,
|
||||||
fontSize: fontSize.value,
|
fontSize: fontSize.value,
|
||||||
fontColor: fontColor.value,
|
fontColor: fontColor.value,
|
||||||
|
fontWeight: fontWeight.value,
|
||||||
background: background.value,
|
background: background.value,
|
||||||
opacity: opacity.value,
|
opacity: opacity.value,
|
||||||
showPreview: showPreview.value,
|
showPreview: showPreview.value,
|
||||||
transDisplay: transDisplay.value,
|
transDisplay: transDisplay.value,
|
||||||
transFontFamily: transFontFamily.value,
|
transFontFamily: transFontFamily.value,
|
||||||
transFontSize: transFontSize.value,
|
transFontSize: transFontSize.value,
|
||||||
transFontColor: transFontColor.value
|
transFontColor: transFontColor.value,
|
||||||
|
transFontWeight: transFontWeight.value,
|
||||||
|
textShadow: textShadow.value,
|
||||||
|
offsetX: offsetX.value,
|
||||||
|
offsetY: offsetY.value,
|
||||||
|
blur: blur.value,
|
||||||
|
textShadowColor: textShadowColor.value
|
||||||
}
|
}
|
||||||
window.electron.ipcRenderer.send('control.styles.change', styles)
|
window.electron.ipcRenderer.send('control.styles.change', styles)
|
||||||
}
|
}
|
||||||
@@ -55,13 +69,20 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
|
|||||||
fontFamily.value = args.fontFamily
|
fontFamily.value = args.fontFamily
|
||||||
fontSize.value = args.fontSize
|
fontSize.value = args.fontSize
|
||||||
fontColor.value = args.fontColor
|
fontColor.value = args.fontColor
|
||||||
|
fontWeight.value = args.fontWeight
|
||||||
background.value = args.background
|
background.value = args.background
|
||||||
opacity.value = args.opacity
|
opacity.value = args.opacity
|
||||||
showPreview.value = args.showPreview
|
showPreview.value = args.showPreview
|
||||||
transDisplay.value = args.transDisplay
|
transDisplay.value = args.transDisplay
|
||||||
transFontFamily.value = args.transFontFamily
|
transFontFamily.value = args.transFontFamily
|
||||||
transFontSize.value = args.transFontSize
|
transFontSize.value = args.transFontSize
|
||||||
transFontColor.value = args.transFontColor
|
transFontColor.value = args.transFontColor,
|
||||||
|
transFontWeight.value = args.transFontWeight
|
||||||
|
textShadow.value = args.textShadow
|
||||||
|
offsetX.value = args.offsetX
|
||||||
|
offsetY.value = args.offsetY
|
||||||
|
blur.value = args.blur
|
||||||
|
textShadowColor.value = args.textShadowColor
|
||||||
changeSignal.value = true
|
changeSignal.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -74,6 +95,7 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
|
|||||||
fontFamily, // 字体族
|
fontFamily, // 字体族
|
||||||
fontSize, // 字体大小
|
fontSize, // 字体大小
|
||||||
fontColor, // 字体颜色
|
fontColor, // 字体颜色
|
||||||
|
fontWeight, // 字体粗细
|
||||||
background, // 背景颜色
|
background, // 背景颜色
|
||||||
opacity, // 背景透明度
|
opacity, // 背景透明度
|
||||||
showPreview, // 是否显示预览
|
showPreview, // 是否显示预览
|
||||||
@@ -81,6 +103,12 @@ export const useCaptionStyleStore = defineStore('captionStyle', () => {
|
|||||||
transFontFamily, // 翻译字体族
|
transFontFamily, // 翻译字体族
|
||||||
transFontSize, // 翻译字体大小
|
transFontSize, // 翻译字体大小
|
||||||
transFontColor, // 翻译字体颜色
|
transFontColor, // 翻译字体颜色
|
||||||
|
transFontWeight, // 翻译字体粗细
|
||||||
|
textShadow, // 是否显示文本阴影
|
||||||
|
offsetX, // 阴影X轴偏移
|
||||||
|
offsetY, // 阴影Y轴偏移
|
||||||
|
blur, // 阴影模糊度半径
|
||||||
|
textShadowColor, // 阴影颜色
|
||||||
backgroundRGBA, // 带透明度的背景颜色
|
backgroundRGBA, // 带透明度的背景颜色
|
||||||
setStyles, // 设置样式
|
setStyles, // 设置样式
|
||||||
sendStylesChange, // 发送样式改变
|
sendStylesChange, // 发送样式改变
|
||||||
|
|||||||
@@ -14,6 +14,11 @@ export const useGeneralSettingStore = defineStore('generalSetting', () => {
|
|||||||
|
|
||||||
const antdTheme = ref<Object>(antDesignTheme['light'])
|
const antdTheme = ref<Object>(antDesignTheme['light'])
|
||||||
|
|
||||||
|
window.electron.ipcRenderer.invoke('control.nativeTheme.get').then((theme) => {
|
||||||
|
if(theme === 'light') setLightTheme()
|
||||||
|
else if(theme === 'dark') setDarkTheme()
|
||||||
|
})
|
||||||
|
|
||||||
watch(uiLanguage, (newValue) => {
|
watch(uiLanguage, (newValue) => {
|
||||||
i18n.global.locale.value = newValue
|
i18n.global.locale.value = newValue
|
||||||
useEngineControlStore().captionEngine = engines[newValue]
|
useEngineControlStore().captionEngine = engines[newValue]
|
||||||
|
|||||||
@@ -20,13 +20,20 @@ export interface Styles {
|
|||||||
fontFamily: string,
|
fontFamily: string,
|
||||||
fontSize: number,
|
fontSize: number,
|
||||||
fontColor: string,
|
fontColor: string,
|
||||||
|
fontWeight: number,
|
||||||
background: string,
|
background: string,
|
||||||
opacity: number,
|
opacity: number,
|
||||||
showPreview: boolean,
|
showPreview: boolean,
|
||||||
transDisplay: boolean,
|
transDisplay: boolean,
|
||||||
transFontFamily: string,
|
transFontFamily: string,
|
||||||
transFontSize: number,
|
transFontSize: number,
|
||||||
transFontColor: string
|
transFontColor: string,
|
||||||
|
transFontWeight: number,
|
||||||
|
textShadow: boolean,
|
||||||
|
offsetX: number,
|
||||||
|
offsetY: number,
|
||||||
|
blur: number,
|
||||||
|
textShadowColor: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CaptionItem {
|
export interface CaptionItem {
|
||||||
|
|||||||
@@ -19,11 +19,17 @@
|
|||||||
<CloseOutlined />
|
<CloseOutlined />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="caption-container">
|
<div
|
||||||
|
class="caption-container"
|
||||||
|
:style="{
|
||||||
|
textShadow: captionStyle.textShadow ? `${captionStyle.offsetX}px ${captionStyle.offsetY}px ${captionStyle.blur}px ${captionStyle.textShadowColor}` : 'none'
|
||||||
|
}"
|
||||||
|
>
|
||||||
<p :class="[captionStyle.lineBreak?'':'left-ellipsis']" :style="{
|
<p :class="[captionStyle.lineBreak?'':'left-ellipsis']" :style="{
|
||||||
fontFamily: captionStyle.fontFamily,
|
fontFamily: captionStyle.fontFamily,
|
||||||
fontSize: captionStyle.fontSize + 'px',
|
fontSize: captionStyle.fontSize + 'px',
|
||||||
color: captionStyle.fontColor
|
color: captionStyle.fontColor,
|
||||||
|
fontWeight: captionStyle.fontWeight * 100
|
||||||
}">
|
}">
|
||||||
<span v-if="captionData.length">{{ captionData[captionData.length-1].text }}</span>
|
<span v-if="captionData.length">{{ captionData[captionData.length-1].text }}</span>
|
||||||
<span v-else>{{ $t('example.original') }}</span>
|
<span v-else>{{ $t('example.original') }}</span>
|
||||||
@@ -33,7 +39,8 @@
|
|||||||
:style="{
|
:style="{
|
||||||
fontFamily: captionStyle.transFontFamily,
|
fontFamily: captionStyle.transFontFamily,
|
||||||
fontSize: captionStyle.transFontSize + 'px',
|
fontSize: captionStyle.transFontSize + 'px',
|
||||||
color: captionStyle.transFontColor
|
color: captionStyle.transFontColor,
|
||||||
|
fontWeight: captionStyle.transFontWeight * 100
|
||||||
}">
|
}">
|
||||||
<span v-if="captionData.length">{{ captionData[captionData.length-1].translation }}</span>
|
<span v-if="captionData.length">{{ captionData[captionData.length-1].translation }}</span>
|
||||||
<span v-else>{{ $t('example.translation') }}</span>
|
<span v-else>{{ $t('example.translation') }}</span>
|
||||||
|
|||||||