更新ui

2026-04-28 18:33:11 +08:00 · 2026-04-28 18:33:11 +08:00 · c855cf5be7
commit c855cf5be7
parent 4798647b40
6 changed files with 331 additions and 132 deletions
--- a/index.html
+++ b/index.html
@ -5,7 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CrossSubtitle-AI</title>
  </head>
-  <body class="bg-slate-950">
+  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
--- a/src/App.vue
+++ b/src/App.vue
@ -240,12 +240,14 @@ async function handleExport(format: 'srt' | 'vtt' | 'ass') {
      <div class="toolbar-main">
        <div class="toolbar-title">
          <strong>CrossSubtitle</strong>
-          <span>桌面字幕工作台</span>
          <span class="credit-line">
-            作者：<a href="https://kuraa.cc" target="_blank" rel="noreferrer">kuraa</a> gpt5.4
+            by <a href="https://kuraa.cc" target="_blank" rel="noreferrer">kuraa</a>
          </span>
        </div>
        <div class="toolbar-actions">
+          <button class="button secondary toggle-button" type="button" @click="showAdvanced = !showAdvanced">
+            {{ showAdvanced ? '收起' : '设置' }}
+          </button>
          <button class="button" type="button" :disabled="pending" @click="handlePickFiles">
            {{ pending ? '提交中...' : '添加任务' }}
          </button>
@ -254,7 +256,6 @@ async function handleExport(format: 'srt' | 'vtt' | 'ass') {

      <div class="workspace-toolbar">
        <div class="toolbar-group">
-          <span class="group-title">任务参数</span>
          <div class="form-grid">
            <label class="field">
              <span>模式</span>
@ -286,13 +287,10 @@ async function handleExport(format: 'srt' | 'vtt' | 'ass') {
              <input v-model="bilingualOutput" type="checkbox" />
              <span>双语导出</span>
            </label>
-            <button class="button secondary toggle-button" type="button" @click="showAdvanced = !showAdvanced">
-              {{ showAdvanced ? '隐藏高级设置' : '显示高级设置' }}
-            </button>
          </div>
        </div>

-        <p class="feedback status-text">{{ feedback }}</p>
+        <p v-if="feedback" class="feedback status-text">{{ feedback }}</p>
      </div>

      <div v-if="showAdvanced" class="advanced-shell">
--- a/src/components/SubtitleEditor.vue
+++ b/src/components/SubtitleEditor.vue
@ -7,6 +7,15 @@ const props = defineProps<{
  logs: string[]
 }>()

+const isProcessing = computed(() => {
+  if (!props.task) return false
+  return !['completed', 'failed'].includes(props.task.status)
+})
+
+const canExport = computed(() => {
+  return props.task?.status === 'completed' && (props.task.segments?.length ?? 0) > 0
+})
+
 const emit = defineEmits<{
  save: [segment: SubtitleSegment]
  export: [format: 'srt' | 'vtt' | 'ass']
@ -44,19 +53,22 @@ function updateTranslatedText(segment: SubtitleSegment, value: string) {
          {{ task ? `${segments.length} 条片段` : '选择左侧任务后开始查看' }}
        </p>
      </div>
-      <div class="export-actions">
-        <button class="button secondary small" @click="emit('export', 'srt')">SRT</button>
-        <button class="button secondary small" @click="emit('export', 'vtt')">VTT</button>
-        <button class="button secondary small" @click="emit('export', 'ass')">ASS</button>
+      <div v-if="task" class="export-actions">
+        <button class="button secondary small" :disabled="!canExport" @click="emit('export', 'srt')">SRT</button>
+        <button class="button secondary small" :disabled="!canExport" @click="emit('export', 'vtt')">VTT</button>
+        <button class="button secondary small" :disabled="!canExport" @click="emit('export', 'ass')">ASS</button>
      </div>
    </div>

    <div v-if="!task" class="empty-state">
-      选择任务后显示字幕
+      <p>选择任务后显示字幕</p>
+      <p style="margin-top: 6px; font-size: 11px;">点击左侧任务列表中的任务开始查看</p>
    </div>

    <div v-else-if="segments.length === 0" class="empty-state">
-      暂无字幕片段
+      <template v-if="isProcessing">正在处理中，请稍候...</template>
+      <template v-else-if="task?.status === 'failed'">任务处理失败，无法生成字幕</template>
+      <template v-else>暂无字幕片段</template>
    </div>

    <div v-else class="segment-list">
@ -67,13 +79,14 @@ function updateTranslatedText(segment: SubtitleSegment, value: string) {
      >
        <div class="task-row subtle">
          <span>{{ formatTime(segment.start) }} - {{ formatTime(segment.end) }}</span>
-          <span>{{ segment.id }}</span>
+          <span class="segment-id">{{ segment.id }}</span>
        </div>
        <p class="source-text">{{ segment.sourceText || '等待识别结果...' }}</p>
        <textarea
          class="editor-input"
          :value="segment.translatedText ?? ''"
-          placeholder="译文"
+          :placeholder="task.outputMode === 'translate' ? '译文' : '原文'"
+          :disabled="task.outputMode === 'source'"
          @change="updateTranslatedText(segment, ($event.target as HTMLTextAreaElement).value)"
        />
      </article>
@ -81,9 +94,9 @@ function updateTranslatedText(segment: SubtitleSegment, value: string) {

    <div class="log-drawer" :class="{ expanded: logsExpanded }">
      <button class="log-toggle" type="button" @click="logsExpanded = !logsExpanded">
-        <span>运行日志</span>
-        <span class="subtle">{{ logs.length }} 条</span>
-        <span>{{ logsExpanded ? '收起' : '展开' }}</span>
+        <span>日志</span>
+        <span class="subtle">{{ logs.length }}</span>
+        <span class="log-chevron">{{ logsExpanded ? '−' : '+' }}</span>
      </button>
      <div v-if="logsExpanded" class="log-panel">
        <div v-if="logs.length === 0" class="empty-state">
--- a/src/components/TaskQueue.vue
+++ b/src/components/TaskQueue.vue
@ -25,8 +25,8 @@ const statusLabel: Record<SubtitleTask['status'], string> = {
  <aside class="panel sidebar-panel">
    <div class="panel-title">
      <div>
-        <strong>任务队列</strong>
-        <p class="panel-subtitle">选择任务查看字幕和日志</p>
+        <strong>任务</strong>
+        <p class="panel-subtitle">选择任务查看字幕</p>
      </div>
      <span class="badge">{{ tasks.length }}</span>
    </div>
@ -40,16 +40,18 @@ const statusLabel: Record<SubtitleTask['status'], string> = {
        v-for="task in tasks"
        :key="task.id"
        class="task-item"
-        :class="{ active: task.id === selectedTaskId }"
+        :class="{
+          active: task.id === selectedTaskId,
+          completed: task.status === 'completed',
+        }"
        @click="emit('select', task.id)"
      >
        <div class="task-row">
          <strong class="truncate">{{ task.fileName }}</strong>
-          <span>{{ Math.round(task.progress) }}%</span>
-        </div>
-        <div class="task-row subtle">
-          <span>{{ statusLabel[task.status] }}</span>
-          <span>{{ task.segments.length }} 条</span>
+          <span
+            class="subtle"
+            :class="{ 'status-active': task.status !== 'completed' && task.status !== 'failed' && task.status !== 'queued' }"
+          >{{ statusLabel[task.status] }}</span>
        </div>
        <div class="progress">
          <div class="progress-bar" :style="{ width: `${task.progress}%` }" />
--- a/src/style.css
+++ b/src/style.css
@ -3,10 +3,33 @@
@tailwind utilities;

 :root {
-  color: #111827;
-  background: #eef1f5;
-  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
-  line-height: 1.4;
+  --c-bg: #fafafa;
+  --c-surface: #ffffff;
+  --c-border: #ebebeb;
+  --c-border-hover: #d4d4d4;
+  --c-text: #1a1a2e;
+  --c-text-secondary: #6b6b7b;
+  --c-text-tertiary: #9999a8;
+  --c-accent: #1a1a2e;
+  --c-accent-hover: #2a2a3e;
+  --c-focus: rgba(26, 26, 46, 0.08);
+  --c-progress: #1a1a2e;
+  --c-error: #dc2626;
+  --c-log-bg: #1a1a2e;
+  --c-log-text: #d4d4d4;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-full: 999px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
+  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--c-text);
+  background: var(--c-bg);
+  font-family: "PingFang SC", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

 html,
@ -30,26 +53,57 @@ textarea {
  font: inherit;
 }

+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--c-border);
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--c-border-hover);
+  border: 1px solid transparent;
+  background-clip: content-box;
+}
+
+::selection {
+  background: rgba(26, 26, 46, 0.1);
+}
+
 .app-shell {
  width: 100%;
-  max-width: 1680px;
+  max-width: 1600px;
  margin: 0 auto;
-  padding: 14px;
+  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
-  gap: 14px;
+  gap: 16px;
 }

 .panel {
-  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
-  border: 1px solid #d9e0e8;
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition);
+}
+
+.panel:hover {
+  box-shadow: var(--shadow-md);
 }

 .topbar {
-  padding: 14px 16px;
+  padding: 20px 24px;
  flex: 0 0 auto;
 }

@ -60,7 +114,7 @@ textarea {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  gap: 10px;
+  gap: 12px;
  min-width: 0;
 }

@ -76,8 +130,9 @@ textarea {
 .panel-title strong,
 .workspace-header strong {
  font-size: 15px;
-  font-weight: 600;
-  color: #0f172a;
+  font-weight: 500;
+  color: var(--c-text);
+  letter-spacing: -0.01em;
 }

 .toolbar-title span,
@ -85,8 +140,9 @@ textarea {
 .subtle,
 .feedback,
 .empty-state {
-  color: #64748b;
+  color: var(--c-text-secondary);
  font-size: 12px;
+  font-weight: 400;
 }

 .credit-line {
@ -97,33 +153,37 @@ textarea {
 }

 .credit-line a {
-  color: #0f172a;
+  color: var(--c-text);
  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color var(--transition);
 }

 .credit-line a:hover {
-  text-decoration: underline;
+  border-bottom-color: var(--c-text);
 }

 .workspace-toolbar,
 .advanced-shell {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #e6ebf1;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--c-border);
 }

 .group-title {
  display: inline-block;
-  margin-bottom: 8px;
-  color: #475569;
-  font-size: 12px;
-  font-weight: 600;
+  margin-bottom: 10px;
+  color: var(--c-text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }

 .form-grid,
 .advanced-grid {
  display: grid;
-  gap: 10px;
+  gap: 12px;
 }

 .form-grid {
@ -139,12 +199,13 @@ textarea {
 .check {
  display: flex;
  flex-direction: column;
-  gap: 5px;
+  gap: 6px;
  font-size: 12px;
 }

 .field span {
-  color: #475569;
+  color: var(--c-text-secondary);
+  font-weight: 400;
 }

 .field input,
@ -160,35 +221,53 @@ textarea {
 .field select,
 .editor-input {
  width: 100%;
-  min-height: 34px;
-  padding: 6px 9px;
-  border: 1px solid #cfd8e3;
-  border-radius: 8px;
-  background: #fff;
-  color: #0f172a;
+  min-height: 36px;
+  padding: 8px 12px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  background: var(--c-surface);
+  color: var(--c-text);
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.field input::placeholder,
+.field select::placeholder,
+.editor-input::placeholder {
+  color: var(--c-text-tertiary);
 }

 .field input:focus,
 .field select:focus,
 .editor-input:focus {
  outline: none;
-  border-color: #94a3b8;
-  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
+  border-color: var(--c-accent);
+  box-shadow: 0 0 0 3px var(--c-focus);
 }

 .check {
  flex-direction: row;
  align-items: center;
  justify-content: center;
-  min-height: 34px;
-  padding: 0 10px;
-  border: 1px solid #d9e0e8;
-  border-radius: 8px;
-  background: #f8fafc;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  background: var(--c-bg);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color var(--transition), background var(--transition);
+}
+
+.check:hover {
+  border-color: var(--c-border-hover);
+  background: var(--c-surface);
 }

 .check input {
  margin: 0;
+  accent-color: var(--c-accent);
+  cursor: pointer;
 }

 .desktop-check {
@ -200,50 +279,57 @@ textarea {
 }

 .button {
-  min-height: 34px;
-  padding: 0 12px;
-  border: 1px solid #1f2937;
-  border-radius: 8px;
-  background: #1f2937;
+  min-height: 36px;
+  padding: 0 16px;
+  border: 1px solid var(--c-accent);
+  border-radius: var(--radius-sm);
+  background: var(--c-accent);
  color: #fff;
  cursor: pointer;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  transition: background var(--transition), border-color var(--transition), transform 0.1s ease;
 }

 .button:hover {
-  background: #111827;
+  background: var(--c-accent-hover);
+}
+
+.button:active {
+  transform: scale(0.98);
 }

 .button.secondary {
-  background: #fff;
-  color: #111827;
-  border-color: #cfd8e3;
+  background: transparent;
+  color: var(--c-text);
+  border-color: var(--c-border);
 }

 .button.secondary:hover {
-  background: #f8fafc;
+  background: var(--c-bg);
+  border-color: var(--c-border-hover);
 }

 .button.small {
  min-height: 30px;
-  padding: 0 10px;
+  padding: 0 12px;
  font-size: 12px;
 }

 .button:disabled {
  cursor: default;
-  opacity: 0.6;
+  opacity: 0.4;
 }

 .status-text {
  min-height: 18px;
-  margin: 10px 0 0;
+  margin: 12px 0 0;
 }

 .content-grid {
  display: grid;
-  grid-template-columns: 320px minmax(0, 1fr);
-  gap: 14px;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
 }
@ -256,31 +342,33 @@ textarea {
 .sidebar-panel {
  display: flex;
  flex-direction: column;
-  padding: 12px;
+  padding: 16px;
 }

 .workspace-panel {
  display: flex;
  flex-direction: column;
-  padding: 14px;
+  padding: 20px;
 }

 .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  min-width: 26px;
-  height: 26px;
+  min-width: 24px;
+  height: 24px;
  padding: 0 8px;
-  border-radius: 999px;
-  background: #e2e8f0;
-  color: #334155;
-  font-size: 12px;
-  font-weight: 600;
+  border-radius: var(--radius-full);
+  background: var(--c-bg);
+  color: var(--c-text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  border: 1px solid var(--c-border);
 }

 .empty-state {
-  padding: 14px 0;
+  padding: 20px 0;
+  color: var(--c-text-tertiary);
 }

 .list-stack,
@ -305,16 +393,44 @@ textarea {
 .task-item,
 .segment-item {
  width: 100%;
-  padding: 10px;
-  border: 1px solid #e3e8ef;
-  border-radius: 10px;
-  background: #f8fafc;
+  padding: 12px 14px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  background: var(--c-surface);
  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
+}
+
+.task-item:hover,
+.segment-item:hover {
+  border-color: var(--c-border-hover);
+  box-shadow: var(--shadow-sm);
 }

 .task-item.active {
-  border-color: #94a3b8;
-  background: #eef2f7;
+  border-color: var(--c-accent);
+  background: rgba(26, 26, 46, 0.03);
+  box-shadow: inset 0 0 0 1px var(--c-accent);
+}
+
+.task-item.completed {
+  opacity: 0.85;
+}
+
+.task-item.completed::after {
+  content: '';
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--c-success, #2d6a4f);
+}
+
+.task-item {
+  position: relative;
 }

 .truncate {
@ -324,48 +440,57 @@ textarea {
 }

 .progress {
-  height: 4px;
-  margin-top: 6px;
-  background: #dbe4ee;
-  border-radius: 999px;
+  height: 2px;
+  margin-top: 8px;
+  background: var(--c-border);
+  border-radius: var(--radius-full);
  overflow: hidden;
 }

 .progress-bar {
  height: 100%;
-  background: #334155;
+  background: var(--c-progress);
+  transition: width 0.3s ease;
 }

 .error-text {
-  margin: 6px 0 0;
-  color: #b91c1c;
+  margin: 8px 0 0;
+  color: var(--c-error);
  font-size: 12px;
 }

 .export-actions {
  display: flex;
-  gap: 8px;
+  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
 }

 .source-text {
-  margin: 8px 0;
+  margin: 10px 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
-  color: #0f172a;
+  color: var(--c-text);
+  line-height: 1.6;
 }

 .editor-input {
  min-height: 64px;
  resize: vertical;
+  line-height: 1.5;
+}
+
+.editor-input:disabled {
+  background: var(--c-bg);
+  cursor: not-allowed;
+  opacity: 0.6;
 }

 .log-drawer {
-  margin-top: 12px;
-  border-top: 1px solid #e6ebf1;
-  padding-top: 12px;
+  margin-top: 16px;
+  border-top: 1px solid var(--c-border);
+  padding-top: 16px;
 }

 .log-toggle {
@ -375,12 +500,18 @@ textarea {
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
-  padding: 0 12px;
-  border: 1px solid #d9e0e8;
-  border-radius: 10px;
-  background: #f8fafc;
-  color: #0f172a;
+  padding: 0 14px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  background: var(--c-surface);
+  color: var(--c-text);
  cursor: pointer;
+  transition: border-color var(--transition), background var(--transition);
+}
+
+.log-toggle:hover {
+  border-color: var(--c-border-hover);
+  background: var(--c-bg);
 }

 .log-panel {
@ -390,10 +521,10 @@ textarea {
 .log-list {
  max-height: 220px;
  overflow: auto;
-  padding: 10px;
-  border: 1px solid #dfe6ee;
-  border-radius: 10px;
-  background: #0f172a;
+  padding: 14px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-md);
+  background: var(--c-log-bg);
 }

 .log-line {
@ -401,17 +532,72 @@ textarea {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
-  line-height: 1.5;
-  color: #dbe4ee;
+  line-height: 1.6;
+  color: var(--c-log-text);
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
 }

 .log-line + .log-line {
-  margin-top: 4px;
+  margin-top: 2px;
+}
+
+.segment-id {
+  color: var(--c-text-tertiary);
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 11px;
+}
+
+.log-chevron {
+  font-size: 14px;
+  font-weight: 300;
+  color: var(--c-text-secondary);
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toggle-button {
+  font-size: 12px;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.task-item strong {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.task-item .subtle {
+  margin-top: 2px;
+}
+
+.task-item .status-active {
+  color: var(--c-accent);
+  font-weight: 500;
+}
+
+.segment-item {
+  border-left: 3px solid transparent;
+  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
+}
+
+.segment-item:hover {
+  border-left-color: var(--c-border-hover);
+}
+
+.segment-item .task-row {
+  margin-bottom: 4px;
 }

@media (max-width: 1360px) {
  .content-grid {
-    grid-template-columns: 300px minmax(0, 1fr);
+    grid-template-columns: 280px minmax(0, 1fr);
  }

  .form-grid {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -4,14 +4,14 @@ export default {
  theme: {
    extend: {
      colors: {
-        ink: '#0f172a',
-        mist: '#f8fafc',
-        ember: '#c2410c',
-        lagoon: '#0f766e',
-        haze: '#dbeafe',
+        ink: '#1a1a2e',
+        mist: '#fafafa',
+        ember: '#e85d04',
+        lagoon: '#2d6a4f',
+        haze: '#f0f0f0',
      },
      boxShadow: {
-        float: '0 24px 60px rgba(15, 23, 42, 0.18)',
+        float: '0 8px 32px rgba(0, 0, 0, 0.08)',
      },
      fontFamily: {
        display: ['"Avenir Next"', '"PingFang SC"', 'sans-serif'],