批量语音转文字改成右下角常驻

This commit is contained in:
xuncha
2026-02-06 23:09:01 +08:00
parent ca1a386146
commit fe0e2e6592
6 changed files with 428 additions and 318 deletions

View File

@@ -2616,42 +2616,14 @@
&:hover:not(:disabled) {
color: var(--primary-color);
}
&.transcribing {
color: var(--primary-color);
cursor: pointer;
opacity: 1 !important;
}
}
// 批量转写模态框基础样式
.batch-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: batchFadeIn 0.2s ease-out;
}
.batch-modal-content {
background: var(--bg-primary);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-height: 90vh;
overflow-y: auto;
animation: batchSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes batchFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes batchSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
// 批量转写模态框基础样式(共享样式在 styles/batchTranscribe.scss
// 批量转写确认对话框
.batch-confirm-modal {
@@ -2845,187 +2817,3 @@
}
}
}
// 批量转写进度对话框
.batch-progress-modal {
width: 420px;
max-width: 90vw;
.batch-modal-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
svg { color: var(--primary-color); }
h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
}
.batch-modal-body {
padding: 1.5rem;
.progress-info {
.progress-text {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
font-size: 14px;
color: var(--text-secondary);
.progress-percent {
font-weight: 600;
color: var(--primary-color);
font-size: 16px;
}
}
.progress-bar {
height: 8px;
background: var(--bg-tertiary);
border-radius: 4px;
overflow: hidden;
margin-bottom: 1rem;
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--primary-color));
border-radius: 4px;
transition: width 0.3s ease;
}
}
}
.batch-tip {
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem;
background: var(--bg-tertiary);
border-radius: 8px;
span {
font-size: 13px;
color: var(--text-secondary);
}
}
}
}
// 批量转写结果对话框
.batch-result-modal {
width: 420px;
max-width: 90vw;
.batch-modal-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
svg { color: #4caf50; }
h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
}
.batch-modal-body {
padding: 1.5rem;
.result-summary {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
.result-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border-radius: 8px;
background: var(--bg-tertiary);
svg { flex-shrink: 0; }
.label {
font-size: 14px;
color: var(--text-secondary);
}
.value {
margin-left: auto;
font-size: 18px;
font-weight: 600;
}
&.success {
svg { color: #4caf50; }
.value { color: #4caf50; }
}
&.fail {
svg { color: #f44336; }
.value { color: #f44336; }
}
}
}
.result-tip {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem;
background: rgba(255, 152, 0, 0.1);
border-radius: 8px;
border: 1px solid rgba(255, 152, 0, 0.3);
svg {
flex-shrink: 0;
margin-top: 2px;
color: #ff9800;
}
span {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
}
}
.batch-modal-footer {
display: flex;
justify-content: flex-end;
padding: 1rem 1.5rem;
border-top: 1px solid var(--border-color);
button {
padding: 0.5rem 1.5rem;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
&.btn-primary {
background: var(--primary-color);
color: white;
&:hover { opacity: 0.9; }
}
}
}
}