From d52c6cda05af68c1d3502907f3aefab2bd9000a7 Mon Sep 17 00:00:00 2001
From: baiqing <lbx12309@icloud.com>
Date: Mon, 11 May 2026 23:41:29 +0800
Subject: [PATCH] feat(capsule): animated thinking shine indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

把 transcribing / polishing 阶段的胶囊从原来的"三个圆点 + 文案"换成
扫光的 thinking 文字效果：

- 移除 ProcessingDots 组件
- 文字字号 11 → 14，字重 500，扫光 linear-gradient + background-clip: text
- 进入 transcribing / polishing 的头 2 秒走 0.9s/cycle 快速扫光（提示「刚开始」），
  之后切回 2.4s 稳态。React 副作用切 duration 不重启动画，会平滑减速
- 切换 state 时多一道 220ms 淡入（cap-state-enter）让用户更容易感知
- 5 个 locale 的 capsule.thinking 文案统一为 'thinking'（小写英文），与扫光字面
  视觉一致，避免不同语言长度差影响排版

CSS keyframes 改名 cap-dot → cap-shine，并加 cap-state-enter。
---
 openless-all/app/src/components/Capsule.tsx | 75 +++++++++++++--------
 openless-all/app/src/i18n/en.ts             |  2 +-
 openless-all/app/src/i18n/ja.ts             |  2 +-
 openless-all/app/src/i18n/ko.ts             |  2 +-
 openless-all/app/src/i18n/zh-CN.ts          |  2 +-
 openless-all/app/src/i18n/zh-TW.ts          |  2 +-
 6 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/openless-all/app/src/components/Capsule.tsx b/openless-all/app/src/components/Capsule.tsx
index 848b9a9b..76ce96db 100644
--- a/openless-all/app/src/components/Capsule.tsx
+++ b/openless-all/app/src/components/Capsule.tsx
@@ -56,26 +56,6 @@ function AudioBars({ level }: AudioBarsProps) {
   );
 }
 
-function ProcessingDots() {
-  return (
-    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, width: 20 }}>
-      {[0, 1, 2].map(i => (
-        <span
-          key={i}
-          style={{
-            width: 4,
-            height: 4,
-            borderRadius: 999,
-            background: 'var(--ol-blue)',
-            opacity: 0.85,
-            animation: `cap-dot 0.9s var(--ol-motion-soft) ${i * 0.3}s infinite`,
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
 interface CenterTextProps {
   os: OS;
   kind: 'default' | 'processing' | 'error';
@@ -176,6 +156,20 @@ function Pill({ os, state, level, insertedChars, message, onCancel, onConfirm }:
   const processingLayout = getCapsuleMessageLayout(os, 'processing');
   const enabled = state === 'recording';
 
+  // "thinking" 扫光速度：进入 transcribing/polishing 的头 2 秒走快速（0.9s/cycle，提示
+  // 「流式刚开始」），之后切回慢速（2.4s）作为稳态。切回 idle / done / 其他 state 也复位
+  // 为 fast，下次进入时从头开始 burst。
+  const [shineFast, setShineFast] = useState(true);
+  useEffect(() => {
+    if (state === 'transcribing' || state === 'polishing') {
+      setShineFast(true);
+      const t = setTimeout(() => setShineFast(false), 2000);
+      return () => clearTimeout(t);
+    }
+    setShineFast(true);
+    return undefined;
+  }, [state]);
+
   let center: JSX.Element;
   switch (state) {
     case 'recording':
@@ -187,24 +181,43 @@ function Pill({ os, state, level, insertedChars, message, onCancel, onConfirm }:
         <div
           style={{
             display: 'inline-flex',
-            flexDirection: os === 'win' ? 'column' : 'row',
             alignItems: 'center',
-            gap: os === 'win' ? 4 : 6,
+            // 左右 4px 内边距 + 外层 gap 已经让 "thinking" ↔ ✗/✓ 视觉间距落在 ~4-5px。
+            padding: '0 4px',
             width: '100%',
             maxWidth: metrics.textWidth,
             minWidth: 0,
             justifyContent: 'center',
+            // state 进入动画 —— 用户从 recording 切到 polishing 时多一道淡入提示，
+            // 比纯切换 center 内容更容易被感知。
+            animation: 'cap-state-enter 220ms var(--ol-motion-soft) both',
           }}
         >
-          <ProcessingDots />
           <span
             style={{
-              fontSize: 10.5,
+              // 放大 11 → 14 让 thinking 在胶囊里更显眼。
+              fontSize: 14,
+              // 字重 500：用户反馈 700 太粗。500 是 medium 视觉重量，扫光更稳。
               fontWeight: 500,
+              letterSpacing: 0.5,
+              // 字号 14 + 字重 500 时小写 g/y/p 等下伸字符在 line-height: 1 下会被
+              // clip。给 line-height 一点冗余 + 上下 1px padding，descender 不再被切。
+              paddingBlock: 1,
+              // 扫光：渐变中段用更饱和的 ol-blue（不靠透明度），尾段保留 ink-3 作收尾，
+              // 整条 stripe 比之前更醒目（用户反馈"扫光不够明显"）。
               color: 'var(--ol-ink-2)',
+              backgroundImage:
+                'linear-gradient(100deg, var(--ol-ink-3) 0%, var(--ol-ink-3) 35%, var(--ol-blue) 50%, var(--ol-ink-3) 65%, var(--ol-ink-3) 100%)',
+              backgroundSize: '220% auto',
+              WebkitBackgroundClip: 'text',
+              backgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              // 进入流式的头 ~2 秒用 0.9s 高速扫光（视觉提示「刚开始」），之后 React 副作用
+              // 切到 2.4s 慢速。duration 变化时浏览器不重启动画，会平滑减速。
+              animation: `cap-shine ${shineFast ? '0.9s' : '2.4s'} linear infinite`,
               minWidth: 0,
               textAlign: 'center',
-              lineHeight: processingLayout.allowWrap ? 1.15 : 1,
+              lineHeight: processingLayout.allowWrap ? 1.3 : 1.25,
               whiteSpace: processingLayout.allowWrap ? 'normal' : 'nowrap',
               overflow: 'hidden',
               textOverflow: 'ellipsis',
@@ -242,7 +255,7 @@ function Pill({ os, state, level, insertedChars, message, onCancel, onConfirm }:
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        gap: 8,
+        gap: 4,
         padding: '0 8px',
         width: metrics.width,
         height: metrics.height,
@@ -400,9 +413,13 @@ export function Capsule() {
           from { opacity: 0; transform: translateY(6px) scale(.96); }
           to   { opacity: 1; transform: translateY(0) scale(1); }
         }
-        @keyframes cap-dot {
-          0%, 100% { opacity: 0.3; transform: scale(0.8); }
-          50%      { opacity: 1.0; transform: scale(1.0); }
+        @keyframes cap-shine {
+          0%   { background-position: 200% center; }
+          100% { background-position: -200% center; }
+        }
+        @keyframes cap-state-enter {
+          from { opacity: 0; transform: translateY(2px); }
+          to   { opacity: 1; transform: translateY(0); }
         }
       `}</style>
     </div>
diff --git a/openless-all/app/src/i18n/en.ts b/openless-all/app/src/i18n/en.ts
index a58e295f..83245938 100644
--- a/openless-all/app/src/i18n/en.ts
+++ b/openless-all/app/src/i18n/en.ts
@@ -30,7 +30,7 @@ export const en: typeof zhCN = {
     durationMinutes: '{{value}}m',
   },
   capsule: {
-    thinking: 'Thinking…',
+    thinking: 'thinking',
     cancelled: 'Cancelled',
     error: 'Something went wrong',
     inserted: 'Inserted {{count}}',
diff --git a/openless-all/app/src/i18n/ja.ts b/openless-all/app/src/i18n/ja.ts
index e5a6eca1..884dfd14 100644
--- a/openless-all/app/src/i18n/ja.ts
+++ b/openless-all/app/src/i18n/ja.ts
@@ -32,7 +32,7 @@ export const ja: typeof zhCN = {
     durationMinutes: '{{value}} 分',
   },
   capsule: {
-    thinking: '考えています',
+    thinking: 'thinking',
     cancelled: 'キャンセルしました',
     error: 'エラーが発生しました',
     inserted: '{{count}} 文字を入力しました',
diff --git a/openless-all/app/src/i18n/ko.ts b/openless-all/app/src/i18n/ko.ts
index 535513e1..05db092f 100644
--- a/openless-all/app/src/i18n/ko.ts
+++ b/openless-all/app/src/i18n/ko.ts
@@ -32,7 +32,7 @@ export const ko: typeof zhCN = {
     durationMinutes: '{{value}}분',
   },
   capsule: {
-    thinking: '생각 중',
+    thinking: 'thinking',
     cancelled: '취소됨',
     error: '오류 발생',
     inserted: '{{count}}자 입력됨',
diff --git a/openless-all/app/src/i18n/zh-CN.ts b/openless-all/app/src/i18n/zh-CN.ts
index 6c0aa3ff..91b00c19 100644
--- a/openless-all/app/src/i18n/zh-CN.ts
+++ b/openless-all/app/src/i18n/zh-CN.ts
@@ -28,7 +28,7 @@ export const zhCN = {
     durationMinutes: '{{value}} 分钟',
   },
   capsule: {
-    thinking: '正在思考中',
+    thinking: 'thinking',
     cancelled: '已取消',
     error: '出错了',
     inserted: '已插入 {{count}}',
diff --git a/openless-all/app/src/i18n/zh-TW.ts b/openless-all/app/src/i18n/zh-TW.ts
index a10ccab5..a22e408c 100644
--- a/openless-all/app/src/i18n/zh-TW.ts
+++ b/openless-all/app/src/i18n/zh-TW.ts
@@ -30,7 +30,7 @@ export const zhTW: typeof zhCN = {
     durationMinutes: '{{value}} 分鐘',
   },
   capsule: {
-    thinking: '正在思考中',
+    thinking: 'thinking',
     cancelled: '已取消',
     error: '出錯了',
     inserted: '已插入 {{count}}',