@tbox.cn/app-template-agent 0.7.5 → 0.8.0

package/{apps/client → packages/agent-ui-kit}/src/components/ChatInput/index.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
-import { useMediaUpload } from '@/hooks/useMediaUpload';
+import { useMediaUpload } from '../../hooks/useMediaUpload';
 import { useASRAdapter, isInAlipayShell } from '@tbox.cn/app-sdk/client';
-import { useChatConfigStore } from '@/store/chat-config';
+import { useChatConfigStore } from '../../chat-config';
 
-import type { ChatInputMessage, InputMethod } from '@/types/chat';
-import { MediaList } from '@/components/MediaList';
+import type { ChatInputMessage, InputMethod } from '../../types';
+import { MediaList } from '../../components/MediaList';
 import { useVoicePress } from './voice/useVoicePress';
 import { VoicePressField } from './voice/VoicePressField';
 import { VoiceRecordingOverlay } from './voice/VoiceRecordingOverlay';
@@ -48,6 +48,7 @@ export function ChatInput({
   onSend,
   onCancel,
   onNewChat,
+  onVoiceActivityChange,
   disclaimer = '以上内容由AI生成，请谨慎甄别。',
 }: {
   generating?: boolean;
@@ -55,6 +56,7 @@ export function ChatInput({
   onSend: (msg: ChatInputMessage) => void;
   onCancel?: () => void;
   onNewChat?: () => void;
+  onVoiceActivityChange?: (active: boolean) => void;
   disclaimer?: string;
 }) {
   const [text, setText] = useState('');
@@ -85,6 +87,13 @@ export function ChatInput({
     asr,
     onResult: (t) => onSend({ text: t, mediaItems: [], inputMethod: 'voice' }),
   });
+  const voiceActive = voice.interactionState !== 'idle';
+
+  useEffect(() => {
+    onVoiceActivityChange?.(voiceActive);
+  }, [onVoiceActivityChange, voiceActive]);
+
+  useEffect(() => () => onVoiceActivityChange?.(false), [onVoiceActivityChange]);
 
   const isWebPc = !inShell && typeof window !== 'undefined' && window.innerWidth > 450;
 

package/{apps/client → packages/agent-ui-kit}/src/components/ChatInput/voice/useVoicePress.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { IASRAdapter } from '@tbox.cn/app-sdk/client';
 import { useRefreshSession } from '@tbox.cn/app-sdk/client';
-import { isSessionExpiredError } from '@/utils/session-error';
-import { toast } from '@/utils/toast';
+import { isSessionExpiredError } from '../../../utils/session-error';
+import { toast } from '../../../utils/toast';
 import {
   getMoveInteractionState,
   getReleaseAction,

package/packages/agent-ui-kit/src/components/HistoryEntry/index.less

@@ -0,0 +1,49 @@
+/* 顶部历史入口：参考稿的浅灰胶囊，居中跟随内容滚动；历史拉出后由页面撤下。 */
+.history-entry {
+  display: flex;
+  justify-content: center;
+  /* 自身不留边距；与欢迎区的 4PX 间距由页面 index.less 的 `.history-entry ~ .mall-home` 统一编排。 */
+  padding: 0;
+
+  &__button {
+    appearance: none;
+    padding: 3PX 12PX;
+    border: none;
+    border-radius: 25PX;
+    background: rgba(15, 64, 113, 0.06);
+    color: var(--tbox-text-muted);
+    font-size: 11.5PX;
+    font-weight: 400;
+    line-height: 16PX;
+    transition: background var(--tbox-transition-fast);
+
+    &:active {
+      background: rgba(15, 64, 113, 0.1);
+    }
+
+    /* 加载态小转子：与文案同处胶囊内，替代原独立指示器 */
+    display: inline-flex;
+    align-items: center;
+    gap: 5PX;
+
+    &:disabled {
+      /* 未就绪只是短暂不可点，保持视觉常态；加载态由文案表达。 */
+      cursor: default;
+    }
+  }
+
+  &__spinner {
+    width: 10PX;
+    height: 10PX;
+    border: 1.5PX solid rgba(15, 64, 113, 0.18);
+    border-top-color: var(--tbox-primary);
+    border-radius: 50%;
+    animation: history-entry-spin 0.6s linear infinite;
+  }
+}
+
+@keyframes history-entry-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/packages/agent-ui-kit/src/components/HistoryEntry/index.tsx

@@ -0,0 +1,42 @@
+// 顶部历史入口胶囊：同时承载点击入口和轻量下拉状态反馈。
+// 常驻渲染是刻意的：运行时未就绪时只禁用，不隐藏——否则就绪后插入 DOM 会把下方欢迎区顶开。
+import type { PullStatus } from '../../utils/pull-down-machine';
+import './index.less';
+
+function labelOf(status: PullStatus, loading: boolean): string {
+  if (loading || status === 'loading') return '加载中...';
+  if (status === 'pulling') return '下拉查看历史';
+  if (status === 'ready') return '松手查看历史';
+  if (status === 'noMore') return '没有更多历史记录';
+  return '历史记录';
+}
+
+export default function HistoryEntry({
+  visible,
+  loading,
+  disabled,
+  pullStatus,
+  onLoad,
+}: {
+  visible: boolean;
+  loading: boolean;
+  disabled: boolean;
+  pullStatus: PullStatus;
+  onLoad: () => void;
+}) {
+  if (!visible) return null;
+
+  return (
+    <div className="history-entry">
+      <button
+        type="button"
+        className="history-entry__button"
+        disabled={disabled}
+        onClick={onLoad}
+      >
+        {(loading || pullStatus === 'loading') && <span className="history-entry__spinner" />}
+        {labelOf(pullStatus, loading)}
+      </button>
+    </div>
+  );
+}

package/{apps/client → packages/agent-ui-kit}/src/components/MediaList/index.less

@@ -58,7 +58,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.3s ease;
+    transition: background var(--tbox-motion-duration-base) ease;
   }
 
   &__progress-inner {
@@ -157,7 +157,7 @@
     white-space: nowrap;
 
     &--failed {
-      color: #ff4d4f;
+      color: var(--tbox-error);
     }
   }
 
@@ -195,7 +195,7 @@
   z-index: 10;
   opacity: 0;
   transform: translateY(8px);
-  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+  transition: opacity var(--tbox-motion-duration-fast) ease-out, transform var(--tbox-motion-duration-fast) ease-out;
   pointer-events: none;
 
   &--visible {

package/{apps/client → packages/agent-ui-kit}/src/components/MediaList/index.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { X, Warning, Prohibit, Plus, VideoCamera } from '@phosphor-icons/react';
-import { previewImages } from '@/utils/imagePreview';
-import { toast } from '@/utils/toast';
-import type { MediaItem } from '@/types/chat';
+import { previewImages } from '../../utils/imagePreview';
+import { toast } from '../../utils/toast';
+import type { MediaItem } from '../../types';
 import './index.less';
 
 /** 媒体选项图标（远程素材，对齐原模板）。 */
@@ -15,12 +15,12 @@ const POPOVER_ICONS: Record<string, { icon: string; label: string; bg: string }>
   camera: {
     icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*xdKLSabxqmQAAAAAOnAAAAgAel-hAQ/original',
     label: '拍摄',
-    bg: '#4f58ec26',
+    bg: '#096bfa26',
   },
   video: {
-    icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*xdKLSabxqmQAAAAAOnAAAAgAel-hAQ/original',
+    icon: 'https://mdn.alipayobjects.com/huamei_nzq4hr/afts/img/A*DfDhSYAMzoQAAAAAHiAAAAgAel-hAQ/original',
     label: '视频',
-    bg: '#4f58ec26',
+    bg: '#096bfa26',
   },
 };
 

package/{apps/client → packages/agent-ui-kit}/src/components/MessageBubble/index.less

@@ -2,7 +2,7 @@
   display: flex;
   align-items: flex-start;
   margin-bottom: 20px;
-  padding: 0 24px;
+  padding: 0 var(--tbox-page-gutter);
 
   &--user {
     flex-direction: row-reverse;
@@ -26,7 +26,7 @@
 
   &--user {
     justify-content: flex-end;
-    margin-right: 12px;
+    margin-right: 0;
   }
   &--bot {
     justify-content: flex-start;
@@ -34,12 +34,12 @@
 
   &__role {
     font-size: 19px;
-    color: #70788d;
+    color: var(--tbox-text-secondary);
     margin-right: 8px;
   }
   &__time {
     font-size: 18px;
-    color: #a0a7b8;
+    color: var(--tbox-text-muted);
   }
 }
 
@@ -49,19 +49,24 @@
   margin-bottom: 12px;
 }
 
+/* 多卡纵向铺开 wrapper（决策出卡 >1 张时 SDK CardCarousel 外层；单卡直出无此层） */
+.msg-cards {
+  margin-top: 8px;
+}
+
 .msg-bubble {
   padding: 18px 22px;
-  border-radius: 20px;
   line-height: 1.6;
+  /* mall-vis 气泡影（demo .msg-bubble 基座影，用户气泡沿用；bot 气泡自持双层影） */
   box-shadow: 0 4px 16px rgba(50, 65, 92, 0.08);
 
   &--user {
-    background-color: rgba(255, 255, 255, 0.9);
-    border-radius: 48px 48px 8px;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 48px 8px 48px 48px;
     width: fit-content;
     max-width: 100%;
     margin-left: auto;
-    margin-right: 12px;
+    margin-right: 0;
     margin-bottom: 8px;
     display: flex;
     align-items: center;
@@ -73,10 +78,10 @@
     font-size: 30px;
     line-height: 1.6;
     padding: 22px;
-    color: #1b1212;
-    background-color: rgba(255, 255, 255, 0.4);
+    color: var(--tbox-text-primary);
+    background: rgba(255, 255, 255, 0.4);
     border: 1px solid #edf0f6;
-    border-radius: 48px 8px 48px 48px;
+    border-radius: 8px 48px 48px;
     box-shadow:
       0 3px 8px 5px rgba(1, 112, 254, 0.0392),
       0 2px 4px rgba(72, 78, 86, 0.0706);
@@ -104,7 +109,7 @@
   }
 
   &--user &__text {
-    color: #1f3b63;
+    color: var(--tbox-text-primary);
     font-weight: 500;
     overflow-wrap: break-word;
   }
@@ -180,7 +185,7 @@
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background: #8a9ab8;
+    background: #aab3c2; /* mall-vis thinking 点灰（非主色） */
     animation: dot-fade 1.4s ease-in-out infinite;
 
     &--2 {
@@ -208,7 +213,7 @@
   display: inline-block;
   width: 4px;
   height: 24px;
-  background: #5874ff;
+  background: #5874ff; /* mall-vis 流式光标蓝 */
   margin-left: 4px;
   vertical-align: middle;
   animation: blink 1s step-end infinite;
@@ -227,7 +232,7 @@
 /* Markdown */
 .msg-markdown {
   font-size: 25px;
-  color: #2a3142;
+  color: var(--tbox-text-primary);
   overflow-wrap: anywhere;
 
   h1,
@@ -263,7 +268,7 @@
     font-style: italic;
   }
   a {
-    color: #1677ff;
+    color: var(--tbox-primary);
     text-decoration: underline;
   }
   ul,
@@ -275,10 +280,10 @@
     margin: 4px 0;
   }
   blockquote {
-    border-left: 4px solid #667eea;
+    border-left: 4px solid #667eea; /* mall-vis 引用竖条（ReasoningBlock 折叠族同源） */
     padding-left: 16px;
     margin: 12px 0;
-    color: #666;
+    color: var(--tbox-text-secondary);
   }
   code {
     background: rgba(0, 0, 0, 0.06);
@@ -308,13 +313,13 @@
   }
   th,
   td {
-    border: 1px solid #ddd;
+    border: 1px solid var(--tbox-border);
     padding: 8px 12px;
     text-align: left;
     font-size: 26px;
   }
   th {
-    background: #f0f0f5;
+    background: var(--tbox-bg-subtle);
     font-weight: 600;
   }
 }

package/packages/agent-ui-kit/src/components/MessageBubble/index.test.tsx

@@ -0,0 +1,112 @@
+// @vitest-environment happy-dom
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { TboxCardPayload } from '@tbox.cn/app-contracts';
+
+const mocks = vi.hoisted(() => ({
+  state: {
+    cardsByMessageId: {} as Record<string, TboxCardPayload[]>,
+    conversationId: null,
+  },
+}));
+
+vi.mock('../../store-context', () => ({
+  useChatStore: (selector: (state: typeof mocks.state) => unknown) => selector(mocks.state),
+  // W2-1：内联卡过滤经 context 注入（域语义保持原 witness：会员门禁卡系剥离，
+  // 原直连 '@/components/MemberGateSheet/model' 的 MEMBER_GATE_CARD_TYPES 语义）
+  useInlineCardFilter: () =>
+    (cards: Array<{ cardType: string }>) =>
+      cards.filter((c) => !['member-login-cta', 'member-enrollment-cta'].includes(c.cardType)),
+}));
+vi.mock('../CardRenderer', () => ({
+  CardRenderer: ({ card }: { card: TboxCardPayload }) => <div data-card-id={card.id} />,
+}));
+vi.mock('../../components/ReasoningBlock', () => ({ default: () => null }));
+vi.mock('../../components/ToolCallBlock', () => ({ default: () => null }));
+vi.mock('../../components/ActionBar', () => ({
+  ActionBar: () => null,
+  CopyButton: () => null,
+  getMessageCopyText: () => '',
+}));
+vi.mock('../../components/ActionBar/DebugButton', () => ({ DebugButton: () => null }));
+
+import { MessageBubble } from './index';
+
+function card(id: string, cardType: string): TboxCardPayload {
+  return { id, cardType, data: {}, status: 'ready', meta: { createdAt: 1 } };
+}
+
+const emptyAssistantMessage = {
+  id: 'assistant-1',
+  role: 'assistant' as const,
+  content: '',
+  status: 'done' as const,
+  createdAt: 1,
+};
+
+describe('MessageBubble member gate card partition', () => {
+  let host: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    root = createRoot(host);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+  });
+
+  it('does not leave an empty message row for a login-only card', () => {
+    mocks.state.cardsByMessageId = {
+      'assistant-1': [card('login-1', 'member-login-cta')],
+    };
+    act(() => root.render(<MessageBubble message={emptyAssistantMessage} />));
+    expect(host.innerHTML).toBe('');
+  });
+
+  it('keeps ordinary cards while removing the login card from a mixed carousel', () => {
+    mocks.state.cardsByMessageId = {
+      'assistant-1': [
+        card('login-1', 'member-login-cta'),
+        card('coupon-1', 'coupon-detail'),
+      ],
+    };
+    act(() => root.render(<MessageBubble message={emptyAssistantMessage} />));
+    expect(host.querySelector('[data-card-id="login-1"]')).toBeNull();
+    expect(host.querySelector('[data-card-id="coupon-1"]')).not.toBeNull();
+    expect(host.querySelector('[aria-label^="第 "]')).toBeNull();
+  });
+
+  it('strips enrollment-cta from inline carousel (module button is a bypassing openLink jump)', () => {
+    mocks.state.cardsByMessageId = {
+      'assistant-1': [
+        card('enroll-1', 'member-enrollment-cta'),
+        card('member-card-1', 'member-card-summary'),
+      ],
+    };
+    act(() => root.render(<MessageBubble message={emptyAssistantMessage} />));
+    // 入会卡内联渲染会旁路 gate 闭环（openLink 裸外跳）——必须剥离，由 MemberGateSheet 投影
+    expect(host.querySelector('[data-card-id="enroll-1"]')).toBeNull();
+    expect(host.querySelector('[data-card-id="member-card-1"]')).not.toBeNull();
+  });
+
+  it('多卡决策出卡 → 纵向按序渲染，无轮播圆点', () => {
+    mocks.state.cardsByMessageId = {
+      'assistant-1': [
+        card('coupon-1', 'coupon-detail'),
+        card('member-1', 'member-card-summary'),
+      ],
+    };
+    act(() => root.render(<MessageBubble message={emptyAssistantMessage} />));
+    const all = host.querySelectorAll('[data-card-id]');
+    expect(all.length).toBe(2);
+    expect(all[0].getAttribute('data-card-id')).toBe('coupon-1');
+    expect(all[1].getAttribute('data-card-id')).toBe('member-1');
+    // 纵向铺开：不再有轮播圆点指示器
+    expect(host.querySelector('[aria-label^="第 "]')).toBeNull();
+  });
+});

package/{apps/client → packages/agent-ui-kit}/src/components/MessageBubble/index.tsx

@@ -2,17 +2,17 @@ import { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Copy } from '@phosphor-icons/react';
-import { previewImages } from '@/utils/imagePreview';
-import type { ChatMessage } from '@/types/chat';
-import ReasoningBlock from '@/components/ReasoningBlock';
-import ToolCallBlock from '@/components/ToolCallBlock';
-import { ActionBar, CopyButton, getMessageCopyText } from '@/components/ActionBar';
-import { DebugButton } from '@/components/ActionBar/DebugButton';
-import { CardRenderer } from '@/cards/CardRenderer';
+import { previewImages } from '../../utils/imagePreview';
+import type { ChatMessage } from '../../types';
+import ReasoningBlock from '../../components/ReasoningBlock';
+import ToolCallBlock from '../../components/ToolCallBlock';
+import { ActionBar, CopyButton, getMessageCopyText } from '../../components/ActionBar';
+import { DebugButton } from '../../components/ActionBar/DebugButton';
+import { CardRenderer } from '../CardRenderer';
 import { CardCarousel } from '@tbox.cn/app-sdk/client';
-import { useChatStore } from '@/store/chat';
-import { copyText } from '@/utils/copyText';
-import { toast } from '@/utils/toast';
+import { useChatStore, useInlineCardFilter } from '../../store-context';
+import { copyText } from '../../utils/copyText';
+import { toast } from '../../utils/toast';
 import './index.less';
 
 const TBOX_FILE_URL = 'https://mdn.alipayobjects.com/tcmarket/afts/file/';
@@ -21,6 +21,8 @@ const TBOX_FILE_URL = 'https://mdn.alipayobjects.com/tcmarket/afts/file/';
 export function MessageBubble({ message }: { message: ChatMessage }) {
   const cardsByMessageId = useChatStore((s) => s.cardsByMessageId);
   const conversationId = useChatStore((s) => s.conversationId);
+  // 018 tool-debug：服务端旗标单源（HELLO_ACK；无 URL 逃逸——数据面信任锚点在服务端）
+  const toolDebug = useChatStore((s) => s.helloAck?.toolDebug === true);
   const isUser = message.role === 'user';
   const roleName = isUser ? '你' : 'AI 助手';
   const timeLabel = new Date(message.createdAt).toLocaleTimeString('zh-CN', {
@@ -32,8 +34,6 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
   const isThinking = message.status === 'thinking';
   const isStreaming = message.status === 'streaming';
   const hasReasoning = !!message.reasoning;
-  // 018 tool-debug：服务端旗标单源（HELLO_ACK；无 URL 逃逸——数据面信任锚点在服务端）
-  const toolDebug = useChatStore((s) => s.helloAck?.toolDebug === true);
   // 018：formSubmit 伪工具 prod 过滤不变；dev 放行（防御性——若事件到达则可见）
   const visibleToolCalls = useMemo(
     () => (message.toolCalls || []).filter((tc) => toolDebug || tc.name !== '__a2uiFormSubmit'),
@@ -41,9 +41,10 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
   );
   const hasToolCalls = visibleToolCalls.length > 0;
 
+  const filterInlineCards = useInlineCardFilter();
   const messageCards = useMemo(
-    () => (isUser ? [] : cardsByMessageId[message.id] || []),
-    [cardsByMessageId, message.id, isUser],
+    () => (isUser ? [] : filterInlineCards(cardsByMessageId[message.id] || [])),
+    [cardsByMessageId, message.id, isUser, filterInlineCards],
   );
   const imageItems = isUser
     ? message.mediaItems?.filter((i) => i.type === 'image' && (i.src || i.fileId))
@@ -60,6 +61,11 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
 
   const imageUrls = (imageItems || []).map((it) => it.src || `${TBOX_FILE_URL}${it.fileId}`);
 
+  // 登录入口由页面级半屏浮层承载；仅含登录卡的空 assistant 行不进入聊天流。
+  if (!isUser && !isPureThinking && !hasReasoning && !hasToolCalls && !showBubble && messageCards.length === 0) {
+    return null;
+  }
+
   return (
     <div className={`msg-row ${isUser ? 'msg-row--user' : 'msg-row--bot'}`}>
       <div className="msg-main">
@@ -117,6 +123,7 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
 
         {/* 卡片在对话气泡之后显示（决策出卡多张/意图卡/历史卡统一经 cardsByMessageId 挂载，多卡纵向铺开） */}
         <CardCarousel
+          className="msg-cards"
           cards={messageCards}
           renderItem={(card) => <CardRenderer key={card.id} card={card} />}
         />
@@ -138,7 +145,7 @@ export function MessageBubble({ message }: { message: ChatMessage }) {
         {isUser && !!message.content && (
           <div className="msg-toolbar msg-toolbar--user">
             <div className="msg-toolbar__action" onClick={copy}>
-              <Copy size={12} color="#5f7ec6" />
+              <Copy size={12} color="#535b6c" />
             </div>
           </div>
         )}

package/{apps/client → packages/agent-ui-kit}/src/components/PullDownIndicator/index.less

@@ -6,13 +6,13 @@
   gap: 12px;
 
   &--animated {
-    transition: margin-top 0.3s ease-out;
+    transition: margin-top var(--tbox-motion-duration-base) ease-out;
   }
 
   &__spinner {
     width: 32px;
     height: 32px;
-    border: 3px solid #d0d5dd;
+    border: 3px solid var(--tbox-border-strong);
     border-top-color: var(--tbox-primary);
     border-radius: 50%;
     animation: pull-spin 0.6s linear infinite;

package/{apps/client → packages/agent-ui-kit}/src/components/PullDownIndicator/index.tsx

@@ -1,5 +1,5 @@
-import type { PullStatus } from '@tbox.cn/app-sdk/client';
-import { PULL_DOWN_THRESHOLD } from '@tbox.cn/app-sdk/client';
+import type { PullStatus } from '../../utils/pull-down-machine';
+import { PULL_DOWN_THRESHOLD } from '../../utils/pull-down-machine';
 import './index.less';
 
 /** 下拉加载历史的顶部指示器。 */

package/packages/agent-ui-kit/src/components/QuickCommands/index.less

@@ -0,0 +1,63 @@
+.quick-commands {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: var(--tbox-content-max-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  gap: 8PX;
+  overflow-x: auto;
+  padding: 0 var(--tbox-page-gutter) 9PX;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* 语音交互时只隐藏胶囊，保留原高度和页面灰底，继续遮挡聊天内容。 */
+  &--hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &__item {
+    flex: 1 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5PX;
+    height: 34PX;
+    padding: 0 13PX;
+    appearance: none;
+    /* mall-vis 快捷指令胶囊：白底 + 2px 描边 + 50px 胶囊圆角（数据仍服务端驱动） */
+    background: rgba(255, 255, 255, 0.92);
+    border: 1PX solid rgba(15, 64, 113, 0.14);
+    border-radius: 25PX;
+    box-shadow: 0 4PX 16PX rgba(38, 59, 92, 0.05);
+    transition: background var(--tbox-transition-fast), border-color var(--tbox-transition-fast);
+
+    &:active {
+      border-color: var(--tbox-primary);
+    }
+  }
+
+  &__icon {
+    width: 16PX;
+    height: 16PX;
+    object-fit: contain;
+  }
+
+  &__icon-svg {
+    color: var(--tbox-primary);
+  }
+
+  &__label {
+    color: var(--tbox-text-primary);
+    font-size: 13PX;
+    font-weight: 500;
+    line-height: 18PX;
+    white-space: nowrap;
+  }
+}