FileTranslator/index.html at main · Tridict/FileTranslator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="zh-Hans">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			name="description"
			content="在线的文件翻译小工具，可以翻译markdown文件，并保存为.md格式。"
		/>
		<title>文件翻译</title>
		<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> -->
		<!-- <link href="./dist/css/bootstrap.min.css" rel="stylesheet" /> -->
		<link rel="stylesheet" href="style/style.css" />
	</head>
	<body>
		<div id="app">
			<header>
				<h1>文件翻译</h1>
				<div class="description">
					<p>
						基于百度翻译api的文件翻译小工具，请到<a
							href="https//fanyi-api.baidu.com"
							>百度翻译</a
						>申请AppId和Key。
					</p>
					<p>目前支持格式：txt、md</p>
				</div>
			</header>
			<main>
				<!-- 输入appid和key -->
				<div class="row">
					<label
						>App ID:
						<input type="text" placeholder="请输入App ID" v-model="appid" />
					</label>
					<label
						>Key:
						<input type="text" placeholder="请输入key" v-model="key" />
					</label>
				</div>

				<!-- 翻译区域 -->
				<div class="file-box" v-for="(file, index) in files" :key="index">
					<div class="row">
						<button
							type="button"
							class="btn-close icon"
							aria-label="Close"
							@click="onRemoveFile(index)"
						></button>
						<span class="file-name">{{file.name}}</span>
					</div>
					<div class="row-col">
						<!-- 选择语言 -->
						<div class="col">
							<select v-model="from">
								<option value="auto">自动检测</option>
								<option
									v-for="(lan, index) in languages"
									:key="index"
									:value="lan.code"
								>
									{{lan.name}}
								</option>
							</select>
							<button
								type="button"
								class="btn-swap icon"
								:disabled="!canSwap"
								@click="onSwapLanguage"
							></button>
							<select v-model="to">
								<option
									v-for="(lan, index) in languages"
									:key="index"
									:value="lan.code"
								>
									{{lan.name}}
								</option>
							</select>
							<!-- 翻译按钮 -->
							<button
								class="btn-translate"
								type="button"
								:disabled="!canTranslate"
								@click="onTranslate(file)"
							>
								<span v-if="!canTranslate">
									<i class="icon"></i>
									<i class="loading icon"></i>
								</span>
								<span v-if="canTranslate">翻译</span>
							</button>
						</div>

					</div>

					<!-- 翻译文本预览区域 -->
					<div class="txt-area row-col">
						<div class="col output-area">
							<textarea v-model="file.content" rows="10"></textarea>
							<div class="col toolbar"></div>
						</div>
						<div class="col output-area">
							<!-- <pre>{{file.displayResult}}</pre> -->
							<textarea ref="output" readonly v-model="file.displayResult" rows="10"></textarea>
							<div class="col toolbar">
							<!-- <div v-if="file.result" class="col toolbar"> -->
								<button
									type="button"
									class="btn-clone icon"
									aria-label="Clone"
									@click="onCloneResult"
								></button>
								<div class="right">
									<div>
										<button type="button" @click="onToggleResult(index)">
											<span v-if="isDisplayBothLanguage">只显示译文</span>
											<span v-if="!isDisplayBothLanguage">双语显示</span>
										</button>
									</div>
									<div>
										<a :download="file.name" :href="getDownloadLink(file.displayResult)">
											<button type="button">保存译文</button>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 上传文件 -->
				<div class="row upload-box">
					<label>上传文件：
						<input type="file" ref="fileInput" multiple />
					</label>
					<button type="button" @click="onImportFiles">📥 Import</button>
				</div>
				<div class="droptarget-wrap">
					<div id="droptarget" ref="dropTarget">把文件拖到此处</div>
				</div>
			</main>
		</div>
		<script src="./dist/js/store.legacy.min.js"></script>
		<script src="./dist/js/vue.global.prod.js"></script>
		<script src="./main.js" type="module"></script>
	</body>
</html>