mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-25 07:16:51 +00:00
feat: 优化了语音配置页面的效果；新增语音实际波形图显示；新增语音点击跳转进度
fix: 修复了一个可能导致语音解密错乱的问题
This commit is contained in:
cc
@@ -1108,6 +1108,14 @@
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 使发送的语音消息和转文字也使用接收者的样式 (浅色)
|
||||
&.sent.voice {
|
||||
.bubble-content {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bubble-avatar {
|
||||
@@ -1309,10 +1317,6 @@
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.message-bubble.sent .voice-message {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.voice-play-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -1345,6 +1349,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
.voice-waveform {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
height: 24px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.waveform-bar {
|
||||
flex: 1;
|
||||
width: 2px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1px;
|
||||
transition: transform 0.2s ease, background 0.2s ease;
|
||||
|
||||
&.played {
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.message-bubble.sent.voice .waveform-bar {
|
||||
background: rgba(0, 0, 0, 0.1); // 基色改为透明黑
|
||||
|
||||
&.played {
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.voice-wave-placeholder {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 3px;
|
||||
height: 18px;
|
||||
|
||||
span {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
background: var(--text-tertiary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.voice-message.playing .voice-wave span {
|
||||
animation: voicePulse 0.9s ease-in-out infinite;
|
||||
}
|
||||
@@ -1403,23 +1451,13 @@
|
||||
border-radius: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
background: var(--bg-secondary);
|
||||
background: var(--card-bg);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.voice-transcript.sent {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #333333;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.voice-transcript.received {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
.voice-transcript.error {
|
||||
color: #d9480f;
|
||||
cursor: pointer;
|
||||
@@ -1882,6 +1920,7 @@
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 语音转文字按钮样式 */
|
||||
.voice-transcribe-btn {
|
||||
width: 28px;
|
||||
@@ -1909,4 +1948,4 @@
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1366,6 +1366,10 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
||||
const voiceTranscriptRequestedRef = useRef(false)
|
||||
const [showImagePreview, setShowImagePreview] = useState(false)
|
||||
const [autoTranscribeVoice, setAutoTranscribeVoice] = useState(true)
|
||||
const [voiceCurrentTime, setVoiceCurrentTime] = useState(0)
|
||||
const [voiceDuration, setVoiceDuration] = useState(0)
|
||||
const [voiceWaveform, setVoiceWaveform] = useState<number[]>([])
|
||||
const voiceAutoDecryptTriggered = useRef(false)
|
||||
|
||||
// 加载自动转文字配置
|
||||
useEffect(() => {
|
||||
@@ -1658,18 +1662,92 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
||||
if (!audio) return
|
||||
const handlePlay = () => setIsVoicePlaying(true)
|
||||
const handlePause = () => setIsVoicePlaying(false)
|
||||
const handleEnded = () => setIsVoicePlaying(false)
|
||||
const handleEnded = () => {
|
||||
setIsVoicePlaying(false)
|
||||
setVoiceCurrentTime(0)
|
||||
}
|
||||
const handleTimeUpdate = () => {
|
||||
setVoiceCurrentTime(audio.currentTime)
|
||||
}
|
||||
const handleLoadedMetadata = () => {
|
||||
setVoiceDuration(audio.duration)
|
||||
}
|
||||
audio.addEventListener('play', handlePlay)
|
||||
audio.addEventListener('pause', handlePause)
|
||||
audio.addEventListener('ended', handleEnded)
|
||||
audio.addEventListener('timeupdate', handleTimeUpdate)
|
||||
audio.addEventListener('loadedmetadata', handleLoadedMetadata)
|
||||
return () => {
|
||||
audio.pause()
|
||||
audio.removeEventListener('play', handlePlay)
|
||||
audio.removeEventListener('pause', handlePause)
|
||||
audio.removeEventListener('ended', handleEnded)
|
||||
audio.removeEventListener('timeupdate', handleTimeUpdate)
|
||||
audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
|
||||
}
|
||||
}, [isVoice])
|
||||
|
||||
// 生成波形数据
|
||||
useEffect(() => {
|
||||
if (!voiceDataUrl) {
|
||||
setVoiceWaveform([])
|
||||
return
|
||||
}
|
||||
|
||||
const generateWaveform = async () => {
|
||||
try {
|
||||
// 从 data:audio/wav;base64,... 提取 base64
|
||||
const base64 = voiceDataUrl.split(',')[1]
|
||||
const binaryString = window.atob(base64)
|
||||
const bytes = new Uint8Array(binaryString.length)
|
||||
for (let i = 0; i < binaryString.length; i++) {
|
||||
bytes[i] = binaryString.charCodeAt(i)
|
||||
}
|
||||
|
||||
const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)()
|
||||
const audioBuffer = await audioCtx.decodeAudioData(bytes.buffer)
|
||||
const rawData = audioBuffer.getChannelData(0) // 获取单声道数据
|
||||
const samples = 35 // 波形柱子数量
|
||||
const blockSize = Math.floor(rawData.length / samples)
|
||||
const filteredData: number[] = []
|
||||
|
||||
for (let i = 0; i < samples; i++) {
|
||||
let blockStart = blockSize * i
|
||||
let sum = 0
|
||||
for (let j = 0; j < blockSize; j++) {
|
||||
sum = sum + Math.abs(rawData[blockStart + j])
|
||||
}
|
||||
filteredData.push(sum / blockSize)
|
||||
}
|
||||
|
||||
// 归一化
|
||||
const multiplier = Math.pow(Math.max(...filteredData), -1)
|
||||
const normalizedData = filteredData.map(n => n * multiplier)
|
||||
setVoiceWaveform(normalizedData)
|
||||
void audioCtx.close()
|
||||
} catch (e) {
|
||||
console.error('Failed to generate waveform:', e)
|
||||
// 降级：生成随机但平滑的波形
|
||||
setVoiceWaveform(Array.from({ length: 35 }, () => 0.2 + Math.random() * 0.8))
|
||||
}
|
||||
}
|
||||
|
||||
void generateWaveform()
|
||||
}, [voiceDataUrl])
|
||||
|
||||
// 消息加载时自动检测语音缓存
|
||||
useEffect(() => {
|
||||
if (!isVoice || voiceDataUrl) return
|
||||
window.electronAPI.chat.resolveVoiceCache(session.username, String(message.localId))
|
||||
.then(result => {
|
||||
if (result.success && result.hasCache && result.data) {
|
||||
const url = `data:audio/wav;base64,${result.data}`
|
||||
voiceDataUrlCache.set(voiceCacheKey, url)
|
||||
setVoiceDataUrl(url)
|
||||
}
|
||||
})
|
||||
}, [isVoice, message.localId, session.username, voiceCacheKey, voiceDataUrl])
|
||||
|
||||
// 监听流式转写结果
|
||||
useEffect(() => {
|
||||
if (!isVoice) return
|
||||
@@ -1734,7 +1812,7 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
||||
// 监听模型下载完成事件
|
||||
useEffect(() => {
|
||||
if (!isVoice) return
|
||||
|
||||
|
||||
const handleModelDownloaded = (event: CustomEvent) => {
|
||||
if (event.detail?.messageId === String(message.localId)) {
|
||||
// 重置状态，允许重新尝试转写
|
||||
@@ -1744,7 +1822,7 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
||||
void requestVoiceTranscript()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('model-downloaded', handleModelDownloaded as EventListener)
|
||||
return () => {
|
||||
window.removeEventListener('model-downloaded', handleModelDownloaded as EventListener)
|
||||
@@ -1932,6 +2010,17 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
||||
}
|
||||
}
|
||||
|
||||
const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!voiceDataUrl || !voiceAudioRef.current) return
|
||||
e.stopPropagation()
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const x = e.clientX - rect.left
|
||||
const percentage = x / rect.width
|
||||
const newTime = percentage * voiceDuration
|
||||
voiceAudioRef.current.currentTime = newTime
|
||||
setVoiceCurrentTime(newTime)
|
||||
}
|
||||
|
||||
const showDecryptHint = !voiceDataUrl && !voiceLoading && !isVoicePlaying
|
||||
const showTranscript = Boolean(voiceDataUrl) && (voiceTranscriptLoading || voiceTranscriptError || voiceTranscript !== undefined)
|
||||
const transcriptText = (voiceTranscript || '').trim()
|
||||
@@ -1960,12 +2049,30 @@ function MessageBubble({ message, session, showTime, myAvatarUrl, isGroupChat, o
|
||||
>
|
||||
{isVoicePlaying ? <Pause size={16} /> : <Play size={16} />}
|
||||
</button>
|
||||
<div className="voice-wave">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<div className="voice-wave" onClick={handleSeek}>
|
||||
{voiceDataUrl && voiceWaveform.length > 0 ? (
|
||||
<div className="voice-waveform">
|
||||
{voiceWaveform.map((amplitude, i) => {
|
||||
const progress = (voiceCurrentTime / (voiceDuration || 1))
|
||||
const isPlayed = (i / voiceWaveform.length) < progress
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`waveform-bar ${isPlayed ? 'played' : ''}`}
|
||||
style={{ height: `${Math.max(20, amplitude * 100)}%` }}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="voice-wave-placeholder">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="voice-info">
|
||||
<span className="voice-label">语音</span>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
@@ -51,12 +51,12 @@
|
||||
transition: all 0.2s;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
background: var(--card-bg);
|
||||
color: var(--primary);
|
||||
@@ -68,15 +68,15 @@
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color);
|
||||
border-radius: 3px;
|
||||
@@ -87,7 +87,7 @@
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
|
||||
|
||||
.section-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
@@ -110,7 +110,7 @@
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-secondary);
|
||||
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
@@ -124,24 +124,24 @@
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
|
||||
|
||||
.optional {
|
||||
font-weight: 400;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-hint {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
@@ -171,7 +171,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.key-status {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
@@ -179,7 +179,7 @@
|
||||
margin-bottom: 10px;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
@@ -189,16 +189,16 @@
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
|
||||
&:read-only {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -220,18 +220,18 @@
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-with-toggle {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
padding-right: 70px;
|
||||
}
|
||||
|
||||
|
||||
.toggle-visibility {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
@@ -243,7 +243,7 @@
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
@@ -253,6 +253,19 @@
|
||||
}
|
||||
|
||||
.whisper-section {
|
||||
background: color-mix(in srgb, var(--primary) 3%, transparent);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-top: 24px;
|
||||
|
||||
label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.whisper-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
@@ -273,70 +286,148 @@
|
||||
.whisper-status-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin: 4px 0 10px;
|
||||
margin: 12px 0 16px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
.status {
|
||||
padding: 2px 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status.ok {
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
color: #059669;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #10b981;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.status.warn {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
color: #d97706;
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.path {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.whisper-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
margin-top: 10px;
|
||||
|
||||
.progress-bar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
height: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--primary);
|
||||
background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
|
||||
border-radius: 999px;
|
||||
transition: width 0.2s ease;
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
animation: progress-shimmer 2s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
|
||||
&.percent {
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-download-model {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
|
||||
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 20%, transparent);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-shimmer {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.log-toggle-line {
|
||||
@@ -355,8 +446,8 @@
|
||||
.language-checkboxes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-top: 8px;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.language-checkbox {
|
||||
@@ -365,21 +456,56 @@
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
accent-color: var(--primary);
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
.checkbox-custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-primary);
|
||||
border: 1.5px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
svg {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .checkbox-custom {
|
||||
border-color: var(--text-tertiary);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
&:hover .checkbox-label {
|
||||
input:checked+.checkbox-custom {
|
||||
background: color-mix(in srgb, var(--primary) 10%, transparent);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 10%, transparent);
|
||||
|
||||
svg {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&:active .checkbox-custom {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -422,12 +548,12 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.switch-input:checked + .switch-slider {
|
||||
.switch-input:checked+.switch-slider {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.switch-input:checked + .switch-slider::before {
|
||||
.switch-input:checked+.switch-slider::before {
|
||||
transform: translateX(22px);
|
||||
background: #ffffff;
|
||||
}
|
||||
@@ -456,7 +582,7 @@
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
@@ -466,25 +592,40 @@
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
|
||||
box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 15%, transparent);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 25%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--text-tertiary);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
@@ -513,12 +654,12 @@
|
||||
font-size: 14px;
|
||||
z-index: 100;
|
||||
animation: slideDown 0.3s ease;
|
||||
|
||||
|
||||
&.success {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
&.error {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
@@ -530,6 +671,7 @@
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
@@ -537,9 +679,12 @@
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -554,7 +699,7 @@
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 12px;
|
||||
width: fit-content;
|
||||
|
||||
|
||||
.mode-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -568,11 +713,11 @@
|
||||
transition: all 0.2s;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
background: var(--card-bg);
|
||||
color: var(--primary);
|
||||
@@ -595,26 +740,26 @@
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: var(--bg-primary);
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
border-color: var(--primary);
|
||||
|
||||
|
||||
.theme-preview {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.theme-preview {
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.theme-accent {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
@@ -625,24 +770,24 @@
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.theme-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
|
||||
.theme-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
.theme-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.theme-check {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
@@ -802,8 +947,13 @@
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -909,7 +1059,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
padding-right: 36px;
|
||||
@@ -930,11 +1080,11 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
&.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -962,21 +1112,21 @@
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
.wxid-value {
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
.wxid-time {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
@@ -1007,14 +1157,14 @@
|
||||
.wxid-dialog-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
|
||||
|
||||
h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
@@ -1036,25 +1186,25 @@
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
background: var(--primary-light);
|
||||
|
||||
|
||||
.wxid-id {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wxid-id {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
.wxid-date {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
@@ -1066,4 +1216,4 @@
|
||||
border-top: 1px solid var(--border-primary);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -126,14 +126,14 @@ function SettingsPage() {
|
||||
setLogEnabled(savedLogEnabled)
|
||||
setAutoTranscribeVoice(savedAutoTranscribe)
|
||||
setTranscribeLanguages(savedTranscribeLanguages)
|
||||
|
||||
|
||||
// 如果语言列表为空，保存默认值
|
||||
if (!savedTranscribeLanguages || savedTranscribeLanguages.length === 0) {
|
||||
const defaultLanguages = ['zh']
|
||||
setTranscribeLanguages(defaultLanguages)
|
||||
await configService.setTranscribeLanguages(defaultLanguages)
|
||||
}
|
||||
|
||||
|
||||
if (savedWhisperModelDir) setWhisperModelDir(savedWhisperModelDir)
|
||||
} catch (e) {
|
||||
console.error('加载配置失败:', e)
|
||||
@@ -776,6 +776,7 @@ function SettingsPage() {
|
||||
<div className="language-checkboxes">
|
||||
{[
|
||||
{ code: 'zh', name: '中文' },
|
||||
{ code: 'yue', name: '粤语' },
|
||||
{ code: 'en', name: '英文' },
|
||||
{ code: 'ja', name: '日文' },
|
||||
{ code: 'ko', name: '韩文' }
|
||||
@@ -787,32 +788,33 @@ function SettingsPage() {
|
||||
onChange={async (e) => {
|
||||
const checked = e.target.checked
|
||||
let newLanguages: string[]
|
||||
|
||||
|
||||
if (checked) {
|
||||
// 添加语言
|
||||
newLanguages = [...transcribeLanguages, lang.code]
|
||||
} else {
|
||||
// 移除语言，但至少保留一个
|
||||
if (transcribeLanguages.length <= 1) {
|
||||
showMessage('至少需要选择一种语言', false)
|
||||
return
|
||||
}
|
||||
newLanguages = transcribeLanguages.filter(l => l !== lang.code)
|
||||
}
|
||||
|
||||
|
||||
setTranscribeLanguages(newLanguages)
|
||||
await configService.setTranscribeLanguages(newLanguages)
|
||||
showMessage(`已${checked ? '添加' : '移除'}${lang.name}`, true)
|
||||
}}
|
||||
/>
|
||||
<span className="checkbox-label">{lang.name}</span>
|
||||
<div className="checkbox-custom">
|
||||
<Check size={14} />
|
||||
<span>{lang.name}</span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group whisper-section">
|
||||
<label>语音识别模型 (SenseVoiceSmall)</label>
|
||||
<span className="form-hint">基于 Sherpa-onnx，支持中文、英文、日文、韩文</span>
|
||||
<span className="form-hint">基于 Sherpa-onnx，支持中、粤、英、日、韩及情感/事件识别</span>
|
||||
<span className="form-hint">模型下载目录</span>
|
||||
<input
|
||||
type="text"
|
||||
@@ -833,14 +835,19 @@ function SettingsPage() {
|
||||
</div>
|
||||
{isWhisperDownloading ? (
|
||||
<div className="whisper-progress">
|
||||
<div className="progress-bar">
|
||||
<div className="progress-fill" style={{ width: `${whisperDownloadProgress}%` }} />
|
||||
<div className="progress-info">
|
||||
<span>正在准备模型文件...</span>
|
||||
<span className="percent">{whisperDownloadProgress.toFixed(0)}%</span>
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar">
|
||||
<div className="progress-fill" style={{ width: `${whisperDownloadProgress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<span>{whisperDownloadProgress.toFixed(0)}%</span>
|
||||
</div>
|
||||
) : (
|
||||
<button className="btn btn-primary" onClick={handleDownloadWhisperModel}>
|
||||
<Download size={16} /> 下载模型
|
||||
<button className="btn btn-primary btn-download-model" onClick={handleDownloadWhisperModel}>
|
||||
<Download size={18} /> 下载模型
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user