Fam Zheng
818 lines
23 KiB
Vue
818 lines
23 KiB
Vue
<template>
|
||
<!-- 没 pass 时强制弹输入框 -->
|
||
<div v-if="needPass" class="auth-overlay">
|
||
<div class="auth-modal">
|
||
<h2>🔒 输入访问令牌</h2>
|
||
<p class="auth-hint">notes 是私密录音库，需要 passphrase 才能访问。</p>
|
||
<form @submit.prevent="submitPass">
|
||
<input
|
||
v-model="passDraft"
|
||
type="password"
|
||
autofocus
|
||
placeholder="passphrase"
|
||
class="auth-input"
|
||
/>
|
||
<button class="auth-btn" :disabled="!passDraft.trim()">进入</button>
|
||
</form>
|
||
<p v-if="authError" class="auth-err">{{ authError }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="root">
|
||
<aside class="sidebar">
|
||
<header class="side-head">
|
||
<h1>📝 Notes</h1>
|
||
<button class="logout-btn" @click="logout" title="退出 / 改 passphrase">⎋</button>
|
||
</header>
|
||
<div class="upload-row">
|
||
<button
|
||
v-if="recState === 'idle'"
|
||
class="rec-btn"
|
||
:disabled="uploading"
|
||
@click="startRec"
|
||
>🎙️ 直接录</button>
|
||
<button
|
||
v-else
|
||
class="rec-btn recording"
|
||
@click="stopRec"
|
||
>⏹ {{ fmtSec(recDuration) }}</button>
|
||
<label class="upload-pick">
|
||
<input
|
||
ref="fileInput"
|
||
type="file"
|
||
accept="audio/*,video/*"
|
||
@change="onFile"
|
||
/>
|
||
<span class="upload-btn small" :class="{ uploading }">{{ uploading ? '⏳' : '＋ 文件' }}</span>
|
||
</label>
|
||
</div>
|
||
<p v-if="uploadErr" class="upload-err">{{ uploadErr }}</p>
|
||
<ul class="list">
|
||
<li v-if="loading" class="list-empty">加载…</li>
|
||
<li v-else-if="!list.length" class="list-empty">还没录音，点上面 ＋ 传一个</li>
|
||
<li
|
||
v-for="r in list"
|
||
:key="r.id"
|
||
class="item"
|
||
:class="{ active: selectedId === r.id, [r.status]: true }"
|
||
@click="select(r.id)"
|
||
>
|
||
<div class="item-title">{{ r.title }}</div>
|
||
<div class="item-meta">
|
||
<span class="status">{{ statusLabel(r.status) }}</span>
|
||
<span>· {{ fmtSize(r.size_bytes) }}</span>
|
||
<span v-if="r.has_summary">· ✓ 纪要</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
|
||
<main class="content">
|
||
<p v-if="!selected" class="empty">← 从左边挑一条</p>
|
||
<template v-else>
|
||
<header class="cont-head">
|
||
<div class="title-row">
|
||
<h2>
|
||
{{ selected.title }}
|
||
<button class="rename-btn" title="重命名" @click="rename">✏️</button>
|
||
</h2>
|
||
<div class="actions">
|
||
<button
|
||
class="action-btn"
|
||
:disabled="['pending','transcribing','cleaning','summarizing'].includes(selected.status)"
|
||
:title="selected.transcript ? '已有 transcript，只重跑 LLM 润色 + 纪要' : '重新 ASR + 润色 + 纪要'"
|
||
@click="retry"
|
||
>↻ 重跑</button>
|
||
<button class="action-btn danger" @click="remove">🗑 删除</button>
|
||
</div>
|
||
</div>
|
||
<div class="head-meta">
|
||
<span>{{ statusLabel(selected.status) }}</span>
|
||
<span>· {{ fmtSize(selected.size_bytes) }}</span>
|
||
<span>· {{ selected.created_at }}</span>
|
||
</div>
|
||
<div v-if="selected.status === 'done'" class="feishu-row">
|
||
<a
|
||
v-if="selected.feishu_url"
|
||
:href="selected.feishu_url"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="feishu-link"
|
||
>📄 飞书文档 · {{ selected.feishu_url.replace(/^https?:\/\//, '').slice(0, 40) }}…</a>
|
||
<button
|
||
class="feishu-btn"
|
||
:disabled="feishuPushing"
|
||
@click="pushFeishu"
|
||
>
|
||
{{ feishuPushing ? '⏳ 推送中…'
|
||
: selected.feishu_url ? '↻ 重新生成' : '📤 一键转飞书文档' }}
|
||
</button>
|
||
<p v-if="feishuErr" class="feishu-err">{{ feishuErr }}</p>
|
||
</div>
|
||
</header>
|
||
<audio :src="audioUrl(selected.id)" controls class="audio" />
|
||
|
||
<section v-if="selected.error" class="block err">
|
||
<h3>错误</h3>
|
||
<pre>{{ selected.error }}</pre>
|
||
</section>
|
||
|
||
<section class="block">
|
||
<h3>📋 会议纪要</h3>
|
||
<p v-if="!selected.summary && selected.status === 'done'" class="muted">空</p>
|
||
<p v-else-if="['pending','transcribing','summarizing'].includes(selected.status)" class="muted">
|
||
{{ progressText(selected.status) }}…
|
||
</p>
|
||
<div v-else class="prose" v-html="mdLite(selected.summary)"></div>
|
||
</section>
|
||
|
||
<section class="block">
|
||
<h3>✨ 清理润色</h3>
|
||
<p v-if="!selected.cleaned && selected.status === 'done'" class="muted">空（cleanup step 失败，看下方原文）</p>
|
||
<p v-else-if="['pending','transcribing','cleaning','summarizing'].includes(selected.status)" class="muted">
|
||
{{ progressText(selected.status) }}…
|
||
</p>
|
||
<div v-else class="prose" v-html="mdLite(selected.cleaned)"></div>
|
||
</section>
|
||
|
||
<section class="block">
|
||
<details>
|
||
<summary><h3 style="display:inline">🎙️ 转写原文（默认折叠）</h3></summary>
|
||
<p v-if="!selected.transcript" class="muted">{{ selected.status === 'failed' ? '转写失败' : '尚未生成' }}</p>
|
||
<pre v-else class="transcript">{{ selected.transcript }}</pre>
|
||
</details>
|
||
</section>
|
||
</template>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||
import {
|
||
listRecordings,
|
||
getRecording,
|
||
uploadRecording,
|
||
deleteRecording,
|
||
retryRecording,
|
||
renameRecording,
|
||
convertFeishu,
|
||
audioUrl as audioUrlFn,
|
||
getPass,
|
||
setPass,
|
||
clearPass,
|
||
} from './lib/api.js'
|
||
|
||
const needPass = ref(!getPass())
|
||
const passDraft = ref('')
|
||
const authError = ref('')
|
||
|
||
const list = ref([])
|
||
const loading = ref(false)
|
||
const selected = ref(null)
|
||
const selectedId = ref(null)
|
||
const uploading = ref(false)
|
||
const uploadErr = ref('')
|
||
const feishuPushing = ref(false)
|
||
const feishuErr = ref('')
|
||
let pollTimer = null
|
||
|
||
// 浏览器内录音（iOS 没法选录音机 App 文件，直接 web record 更顺）
|
||
const recState = ref('idle') // 'idle' | 'recording'
|
||
const recDuration = ref(0)
|
||
let mediaRecorder = null
|
||
let recChunks = []
|
||
let recStream = null
|
||
let recTimer = null
|
||
|
||
async function startRec() {
|
||
uploadErr.value = ''
|
||
if (!navigator.mediaDevices?.getUserMedia) {
|
||
uploadErr.value = '浏览器不支持 mic 录音'
|
||
return
|
||
}
|
||
try {
|
||
recStream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||
} catch (e) {
|
||
uploadErr.value = 'mic 权限被拒：' + (e.message || e.name)
|
||
return
|
||
}
|
||
// Safari 偏向 audio/mp4，Chrome/Edge 优先 audio/webm
|
||
const tries = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', '']
|
||
let mimeType = ''
|
||
for (const t of tries) {
|
||
if (!t || (window.MediaRecorder && MediaRecorder.isTypeSupported(t))) {
|
||
mimeType = t
|
||
break
|
||
}
|
||
}
|
||
recChunks = []
|
||
mediaRecorder = mimeType
|
||
? new MediaRecorder(recStream, { mimeType })
|
||
: new MediaRecorder(recStream)
|
||
mediaRecorder.ondataavailable = (e) => { if (e.data && e.data.size) recChunks.push(e.data) }
|
||
mediaRecorder.onstop = onRecStop
|
||
mediaRecorder.start(1000) // 1s chunks 保证 stop 时有数据
|
||
recState.value = 'recording'
|
||
recDuration.value = 0
|
||
recTimer = setInterval(() => recDuration.value++, 1000)
|
||
}
|
||
|
||
function stopRec() {
|
||
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
||
mediaRecorder.stop()
|
||
}
|
||
if (recTimer) { clearInterval(recTimer); recTimer = null }
|
||
}
|
||
|
||
async function onRecStop() {
|
||
const mimeType = mediaRecorder?.mimeType || 'audio/webm'
|
||
const blob = new Blob(recChunks, { type: mimeType })
|
||
if (recStream) {
|
||
recStream.getTracks().forEach(t => t.stop())
|
||
recStream = null
|
||
}
|
||
recState.value = 'idle'
|
||
// 生成文件名
|
||
const ext = mimeType.includes('mp4') ? 'm4a'
|
||
: mimeType.includes('webm') ? 'webm'
|
||
: mimeType.includes('ogg') ? 'ogg'
|
||
: 'bin'
|
||
const ts = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')
|
||
const file = new File([blob], `录音-${ts}.${ext}`, { type: mimeType })
|
||
if (file.size < 1024) {
|
||
uploadErr.value = '录音太短（< 1KB），没保存'
|
||
return
|
||
}
|
||
await doUpload(file)
|
||
}
|
||
|
||
function fmtSec(s) {
|
||
const m = Math.floor(s / 60)
|
||
const sec = s % 60
|
||
return m + ':' + (sec < 10 ? '0' : '') + sec
|
||
}
|
||
|
||
async function submitPass() {
|
||
setPass(passDraft.value.trim())
|
||
try {
|
||
await listRecordings()
|
||
needPass.value = false
|
||
authError.value = ''
|
||
await refresh()
|
||
syncFromUrl()
|
||
startPoll()
|
||
} catch (e) {
|
||
if (e.unauthorized) {
|
||
authError.value = '令牌不对'
|
||
clearPass()
|
||
} else {
|
||
authError.value = e.message || String(e)
|
||
}
|
||
}
|
||
}
|
||
|
||
function logout() {
|
||
clearPass()
|
||
needPass.value = true
|
||
list.value = []
|
||
selected.value = null
|
||
selectedId.value = null
|
||
history.replaceState(null, '', window.location.pathname)
|
||
stopPoll()
|
||
}
|
||
|
||
async function refresh(silent = false) {
|
||
if (!silent) loading.value = true
|
||
try {
|
||
const fresh = await listRecordings()
|
||
// 增量更新：尽量复用已有 ref，避免整 array 替换导致闪动
|
||
if (!list.value.length) {
|
||
list.value = fresh
|
||
} else {
|
||
const byId = new Map(list.value.map(r => [r.id, r]))
|
||
list.value = fresh.map(r => {
|
||
const old = byId.get(r.id)
|
||
if (old) {
|
||
Object.assign(old, r)
|
||
return old
|
||
}
|
||
return r
|
||
})
|
||
}
|
||
}
|
||
catch (e) {
|
||
if (e.unauthorized) { logout(); return }
|
||
}
|
||
finally { if (!silent) loading.value = false }
|
||
// 同步当前选中
|
||
if (selectedId.value) {
|
||
try {
|
||
const fresh = await getRecording(selectedId.value)
|
||
if (selected.value) {
|
||
Object.assign(selected.value, fresh)
|
||
} else {
|
||
selected.value = fresh
|
||
}
|
||
} catch {}
|
||
}
|
||
}
|
||
|
||
async function select(id) {
|
||
selectedId.value = id
|
||
// URL 同步：?id=N，方便刷新 / 分享 / bookmark
|
||
const q = new URLSearchParams(window.location.search)
|
||
q.set('id', String(id))
|
||
history.replaceState(null, '', '?' + q.toString())
|
||
try { selected.value = await getRecording(id) }
|
||
catch (e) {
|
||
if (e.unauthorized) { logout(); return }
|
||
}
|
||
}
|
||
|
||
function syncFromUrl() {
|
||
const id = parseInt(new URLSearchParams(window.location.search).get('id'))
|
||
if (id && id !== selectedId.value) select(id)
|
||
}
|
||
|
||
function onFile(e) {
|
||
const f = e.target.files?.[0]
|
||
if (!f) return
|
||
doUpload(f).then(() => { e.target.value = '' })
|
||
}
|
||
|
||
async function doUpload(file) {
|
||
uploading.value = true
|
||
uploadErr.value = ''
|
||
try {
|
||
const title = file.name.replace(/\.[^.]+$/, '')
|
||
const r = await uploadRecording(title, file)
|
||
await refresh()
|
||
select(r.id)
|
||
} catch (e) {
|
||
if (e.unauthorized) { logout(); return }
|
||
uploadErr.value = e.message || String(e)
|
||
} finally {
|
||
uploading.value = false
|
||
}
|
||
}
|
||
|
||
async function remove() {
|
||
if (!confirm('删除这条录音 + 转写 + 纪要？')) return
|
||
try {
|
||
await deleteRecording(selectedId.value)
|
||
selectedId.value = null
|
||
selected.value = null
|
||
history.replaceState(null, '', window.location.pathname)
|
||
await refresh()
|
||
} catch (e) { alert(e.message) }
|
||
}
|
||
|
||
async function rename() {
|
||
const cur = selected.value?.title || ''
|
||
const t = prompt('改个名字', cur)
|
||
if (t == null) return
|
||
const trimmed = t.trim()
|
||
if (!trimmed || trimmed === cur) return
|
||
try {
|
||
await renameRecording(selectedId.value, trimmed)
|
||
if (selected.value) selected.value.title = trimmed
|
||
const inList = list.value.find(r => r.id === selectedId.value)
|
||
if (inList) inList.title = trimmed
|
||
} catch (e) { alert(e.message) }
|
||
}
|
||
|
||
async function retry() {
|
||
try {
|
||
await retryRecording(selectedId.value)
|
||
await refresh()
|
||
} catch (e) { alert(e.message) }
|
||
}
|
||
|
||
async function pushFeishu() {
|
||
if (feishuPushing.value) return
|
||
feishuPushing.value = true
|
||
feishuErr.value = ''
|
||
try {
|
||
const r = await convertFeishu(selectedId.value)
|
||
if (selected.value) {
|
||
selected.value.feishu_doc_id = r.doc_id
|
||
selected.value.feishu_url = r.url
|
||
}
|
||
} catch (e) {
|
||
feishuErr.value = e.message || String(e)
|
||
} finally {
|
||
feishuPushing.value = false
|
||
}
|
||
}
|
||
|
||
function audioUrl(id) { return audioUrlFn(id) }
|
||
|
||
function statusLabel(s) {
|
||
return ({
|
||
pending: '⏳ 排队',
|
||
transcribing: '🎙️ 转写中',
|
||
cleaning: '✨ 清理润色中',
|
||
summarizing: '📋 总结中',
|
||
done: '✓ 完成',
|
||
failed: '✗ 失败',
|
||
})[s] || s
|
||
}
|
||
function progressText(s) {
|
||
return ({
|
||
pending: '等候处理',
|
||
transcribing: '语音转写中（视音频长度可能要几分钟）',
|
||
cleaning: 'LLM 分段 + 去口语 + 润色 + 高亮',
|
||
summarizing: 'LLM 生成会议纪要',
|
||
})[s] || s
|
||
}
|
||
function fmtSize(b) {
|
||
if (!b) return '?'
|
||
if (b < 1024) return b + 'B'
|
||
if (b < 1024 * 1024) return (b / 1024).toFixed(1) + 'KB'
|
||
if (b < 1024 * 1024 * 1024) return (b / 1024 / 1024).toFixed(1) + 'MB'
|
||
return (b / 1024 / 1024 / 1024).toFixed(2) + 'GB'
|
||
}
|
||
|
||
// 极简 markdown
|
||
function mdLite(s) {
|
||
if (!s) return ''
|
||
let h = s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||
h = h.replace(/^### (.+)$/gm, '<h4>$1</h4>')
|
||
h = h.replace(/^## (.+)$/gm, '<h3>$1</h3>')
|
||
h = h.replace(/^# (.+)$/gm, '<h2>$1</h2>')
|
||
h = h.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
|
||
h = h.replace(/`([^`]+)`/g, '<code>$1</code>')
|
||
h = h.replace(/(^|\n)\s*[-*]\s+/g, '$1• ')
|
||
return h.split(/\n{2,}/).map(p => `<p>${p.replace(/\n/g, '<br>')}</p>`).join('')
|
||
}
|
||
|
||
function startPoll() {
|
||
stopPoll()
|
||
pollTimer = setInterval(() => refresh(true), 5000)
|
||
}
|
||
function stopPoll() {
|
||
if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
|
||
}
|
||
|
||
onMounted(async () => {
|
||
if (!needPass.value) {
|
||
await refresh()
|
||
syncFromUrl()
|
||
startPoll()
|
||
}
|
||
// 浏览器前进/后退按钮也同步
|
||
window.addEventListener('popstate', syncFromUrl)
|
||
})
|
||
onBeforeUnmount(() => {
|
||
stopPoll()
|
||
window.removeEventListener('popstate', syncFromUrl)
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
:root {
|
||
--bg: #0f0f0f;
|
||
--bg-elev: #161616;
|
||
--bg-card: #1a1a2e;
|
||
--bg-hover: #232342;
|
||
--bg-active: #2a1a3e;
|
||
--border: #2a2a3a;
|
||
--border-soft: #1f1f2a;
|
||
--text: #e0e0e0;
|
||
--text-dim: #a0a0a0;
|
||
--text-mute: #666;
|
||
--accent: #c084fc;
|
||
--accent-strong: #7c5cbf;
|
||
--accent-cyan: #06b6d4;
|
||
--accent-green: #4ade80;
|
||
--accent-amber: #f59e0b;
|
||
--accent-red: #ef4444;
|
||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body, #app { height: 100%; }
|
||
body {
|
||
font-family: var(--font-sans);
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
|
||
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
input, textarea { font-family: inherit; background: transparent; border: none; color: inherit; outline: none; }
|
||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
||
</style>
|
||
|
||
<style scoped>
|
||
.auth-overlay {
|
||
position: fixed; inset: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: var(--bg);
|
||
}
|
||
.auth-modal {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 28px;
|
||
width: 360px;
|
||
max-width: calc(100vw - 32px);
|
||
}
|
||
.auth-modal h2 { font-size: 20px; margin-bottom: 8px; }
|
||
.auth-hint { color: var(--text-mute); font-size: 13px; margin-bottom: 20px; }
|
||
.auth-input {
|
||
width: 100%;
|
||
background: var(--bg-elev);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
font-size: 14px;
|
||
color: var(--text);
|
||
margin-bottom: 12px;
|
||
}
|
||
.auth-input:focus { border-color: var(--accent-strong); }
|
||
.auth-btn {
|
||
width: 100%;
|
||
background: var(--accent-strong);
|
||
color: #fff;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
}
|
||
.auth-btn:hover:not(:disabled) { background: var(--accent); }
|
||
.auth-err {
|
||
color: var(--accent-red);
|
||
margin-top: 12px;
|
||
font-size: 13px;
|
||
background: rgba(239,68,68,0.08);
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.root { height: 100%; display: flex; }
|
||
|
||
.sidebar {
|
||
width: 340px;
|
||
border-right: 1px solid var(--border-soft);
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-shrink: 0;
|
||
background: var(--bg-elev);
|
||
}
|
||
.side-head {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
}
|
||
.side-head h1 { font-size: 17px; font-weight: 600; }
|
||
.logout-btn {
|
||
width: 28px; height: 28px; border-radius: 50%;
|
||
font-size: 14px; color: var(--text-mute);
|
||
}
|
||
.logout-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
|
||
|
||
.upload-row {
|
||
padding: 12px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.rec-btn {
|
||
flex: 1;
|
||
background: var(--accent-strong);
|
||
color: #fff;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
transition: background 0.15s;
|
||
}
|
||
.rec-btn:hover:not(:disabled) { background: var(--accent); }
|
||
.rec-btn.recording {
|
||
background: var(--accent-red);
|
||
animation: rec-pulse 1.4s ease-in-out infinite;
|
||
}
|
||
@keyframes rec-pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.7; }
|
||
}
|
||
.upload-pick { position: relative; display: block; cursor: pointer; flex-shrink: 0; }
|
||
.upload-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
|
||
.upload-btn {
|
||
display: block;
|
||
text-align: center;
|
||
background: var(--bg-elev);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-dim);
|
||
padding: 10px 14px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
transition: background 0.15s;
|
||
}
|
||
.upload-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||
.upload-btn.uploading { background: var(--bg-card); color: var(--text-dim); }
|
||
.upload-btn.small { padding: 10px 12px; }
|
||
.upload-err {
|
||
color: var(--accent-red);
|
||
font-size: 12px;
|
||
margin: 0 12px 8px;
|
||
background: rgba(239,68,68,0.08);
|
||
padding: 6px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.list { list-style: none; flex: 1; overflow-y: auto; }
|
||
.list-empty { padding: 40px 16px; text-align: center; color: var(--text-mute); font-size: 13px; }
|
||
.item {
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid var(--border-soft);
|
||
cursor: pointer;
|
||
}
|
||
.item:hover { background: var(--bg-card); }
|
||
.item.active { background: var(--bg-active); }
|
||
.item.active .item-title { color: var(--accent); }
|
||
.item.failed .status { color: var(--accent-red); }
|
||
.item.done .status { color: var(--accent-green); }
|
||
.item-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.item-meta {
|
||
margin-top: 2px;
|
||
font-size: 11px;
|
||
color: var(--text-mute);
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 24px 32px;
|
||
}
|
||
.empty {
|
||
display: flex;
|
||
height: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text-mute);
|
||
font-size: 15px;
|
||
}
|
||
.cont-head { margin-bottom: 18px; }
|
||
.cont-head h2 { font-size: 22px; margin-bottom: 6px; }
|
||
.head-meta {
|
||
font-size: 12px;
|
||
color: var(--text-mute);
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
/* 旧 .danger-btn / .retry-btn 已被 .action-btn 替代 */
|
||
|
||
.title-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.title-row h2 { flex: 1; min-width: 0; }
|
||
.actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
.action-btn {
|
||
font-size: 12px;
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
background: var(--bg-elev);
|
||
color: var(--text-dim);
|
||
border: 1px solid var(--border);
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
}
|
||
.action-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
|
||
.action-btn.danger { color: var(--accent-red); }
|
||
.action-btn.danger:hover:not(:disabled) {
|
||
background: rgba(239, 68, 68, 0.12);
|
||
border-color: rgba(239, 68, 68, 0.4);
|
||
}
|
||
|
||
.feishu-row {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.feishu-link {
|
||
color: var(--accent-cyan);
|
||
background: rgba(6, 182, 212, 0.1);
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
.feishu-link:hover { background: rgba(6, 182, 212, 0.2); }
|
||
.feishu-btn {
|
||
background: var(--accent-strong);
|
||
color: #fff;
|
||
padding: 6px 14px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
.feishu-btn:hover:not(:disabled) { background: var(--accent); }
|
||
.feishu-err {
|
||
width: 100%;
|
||
margin: 0;
|
||
color: var(--accent-red);
|
||
background: rgba(239,68,68,0.08);
|
||
padding: 6px 10px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
}
|
||
.retry-btn { background: rgba(124, 92, 191, 0.15); color: var(--accent); }
|
||
.retry-btn:hover { background: rgba(124, 92, 191, 0.3); }
|
||
.danger-btn { background: rgba(239, 68, 68, 0.1); color: var(--accent-red); }
|
||
.danger-btn:hover { background: rgba(239, 68, 68, 0.25); }
|
||
|
||
.audio { width: 100%; margin-bottom: 20px; }
|
||
|
||
.block {
|
||
background: var(--bg-card);
|
||
border-radius: 8px;
|
||
padding: 16px 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.block.err { background: rgba(239,68,68,0.08); }
|
||
.block h3 {
|
||
font-size: 13px;
|
||
color: var(--text-dim);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 10px;
|
||
}
|
||
.muted { color: var(--text-mute); font-size: 13px; }
|
||
.transcript {
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
color: var(--text-dim);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
}
|
||
.prose { font-size: 14px; line-height: 1.7; }
|
||
.prose :deep(p) { margin-bottom: 10px; }
|
||
.prose :deep(h2), .prose :deep(h3), .prose :deep(h4) {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
margin: 14px 0 6px;
|
||
}
|
||
.prose :deep(b) { color: var(--accent); }
|
||
.prose :deep(code) {
|
||
background: var(--bg-elev);
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
font-family: ui-monospace, monospace;
|
||
font-size: 12px;
|
||
}
|
||
.block.err pre { white-space: pre-wrap; color: var(--accent-red); font-size: 12px; }
|
||
|
||
.block details > summary {
|
||
cursor: pointer;
|
||
list-style: none;
|
||
user-select: none;
|
||
margin-bottom: 4px;
|
||
}
|
||
.block details > summary::-webkit-details-marker { display: none; }
|
||
.block details > summary::before {
|
||
content: '▶';
|
||
display: inline-block;
|
||
margin-right: 6px;
|
||
font-size: 11px;
|
||
color: var(--text-mute);
|
||
transition: transform 0.15s;
|
||
}
|
||
.block details[open] > summary::before { transform: rotate(90deg); }
|
||
.block details > summary h3 {
|
||
margin: 0 !important;
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
font-size: 13px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.root { flex-direction: column; }
|
||
.sidebar { width: 100%; height: 45vh; border-right: none; border-bottom: 1px solid var(--border-soft); }
|
||
}
|
||
</style>
|