style(input): 调整发送按钮为圆形图标样式并更新主题色

- prompt-input.tsx: 发送按钮改为 36x36 圆形,使用 SVG 箭头/方块图标替代文字
- input-box.tsx: 占位区域尺寸同步调整为 36x36
- globals.css: 新增 brand-default/brand-sxwz 品牌 CSS class,新增 ws-interactive-hover token,主题色 #8e47f0 → #150033
This commit is contained in:
mt 2026-06-10 17:52:02 +08:00
parent 9eb494b1b4
commit c45bc4d521
3 changed files with 26 additions and 12 deletions

View File

@ -1157,7 +1157,11 @@ export const PromptInputSubmit = ({
? !!disabled ? !!disabled
: disabled || !hasContent || isSubmitted; : disabled || !hasContent || isSubmitted;
let Icon = <ArrowUpIcon className="size-4" />; // let Icon = <ArrowUpIcon className="size-4" />;
let Icon = <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.75 14.75V0.75M0.75 5.75L5.75 0.75L10.75 5.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>;
let text: string = t.inputBox.submit; let text: string = t.inputBox.submit;
@ -1165,11 +1169,13 @@ export const PromptInputSubmit = ({
Icon = <Loader2Icon className="size-4 animate-spin" />; Icon = <Loader2Icon className="size-4 animate-spin" />;
text = t.inputBox.submitting; text = t.inputBox.submitting;
} else if (status === "streaming") { } else if (status === "streaming") {
Icon = <SquareIcon className="size-4" />; Icon = <svg className="!w-[12px] !h-[12px]" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="12" height="12" rx="2" fill="white"/>
</svg>;
text = t.inputBox.stop; text = t.inputBox.stop;
} else if (status === "error") { } else if (status === "error") {
// 没有报错状态先用error状态代替 // 没有报错状态先用error状态代替
Icon = <XIcon className="size-4" />; // Icon = <XIcon className="size-4" />;
// MARK: 这里后端没有返回错误信息,先写死一个文本 // MARK: 这里后端没有返回错误信息,先写死一个文本
text = t.inputBox.submit; text = t.inputBox.submit;
} }
@ -1180,10 +1186,10 @@ export const PromptInputSubmit = ({
aria-label="Submit" aria-label="Submit"
// 被button{bgc:#fff}覆盖了,只能加"!" // 被button{bgc:#fff}覆盖了,只能加"!"
className={cn( className={cn(
"h-[40px] w-[140px] rounded-[10px] border-0 font-bold transition-all", "h-[36px] w-[36px] rounded-[50%] border-0 font-bold transition-all ",
isDisabled isDisabled
? "cursor-not-allowed !bg-gray-200 text-gray-400" ? "cursor-not-allowed !bg-[#15003399] text-gray-400"
: "!bg-[#F0E8FB] text-[#8E47F0] hover:!bg-[#8E47F0] hover:text-[#FFFFFF]", : "!bg-[#150033] text-[#8E47F0] hover:text-[#FFFFFF]",
className, className,
)} )}
size={size} size={size}
@ -1192,8 +1198,8 @@ export const PromptInputSubmit = ({
disabled={isDisabled} disabled={isDisabled}
{...props} {...props}
> >
{/* {children ?? Icon} */} {children ?? Icon}
{text} {/* {text} */}
</InputGroupButton> </InputGroupButton>
</Tooltip> </Tooltip>
); );

View File

@ -151,7 +151,7 @@ function WorkspaceToolButton({
return ( return (
<PromptInputButton <PromptInputButton
className={cn( className={cn(
"group h-full rounded-[10px] p-[10px]! hover:bg-ws-surface-subtle hover:text-ws-interactive-primary", "group h-full rounded-[10px] p-[10px]! hover:bg-ws-interactive-hover hover:text-ws-interactive-primary",
className, className,
)} )}
{...props} {...props}
@ -1050,7 +1050,7 @@ export function InputBox({
</ModelSelector> */} </ModelSelector> */}
<PromptInputTools> <PromptInputTools>
{/* 占位符 */} {/* 占位符 */}
<div className="w-[150px] h-[40px]"></div> <div className="w-[36px] h-[36px]"></div>
</PromptInputTools> </PromptInputTools>
</PromptInputFooter> </PromptInputFooter>
<PromptInputSubmit <PromptInputSubmit

View File

@ -68,6 +68,12 @@
@source inline("bg-{background,muted,primary,secondary,accent}"); @source inline("bg-{background,muted,primary,secondary,accent}");
@source inline("border-{border,input}"); @source inline("border-{border,input}");
.brand-default {
}
.brand-sxwz {
}
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@theme { @theme {
@ -206,6 +212,7 @@
--color-ws-surface-subtle: var(--ws-color-surface-subtle); --color-ws-surface-subtle: var(--ws-color-surface-subtle);
--color-ws-surface-elevated: var(--ws-color-surface-elevated); --color-ws-surface-elevated: var(--ws-color-surface-elevated);
--color-ws-interactive-primary: var(--ws-color-interactive-primary); --color-ws-interactive-primary: var(--ws-color-interactive-primary);
--color-ws-interactive-hover: var(--ws-color-interactive-hover);
--color-ws-line-default: var(--ws-color-line-default); --color-ws-line-default: var(--ws-color-line-default);
--color-ws-text-muted: var(--ws-color-text-muted); --color-ws-text-muted: var(--ws-color-text-muted);
--color-ws-icon-muted: var(--ws-color-icon-muted); --color-ws-icon-muted: var(--ws-color-icon-muted);
@ -311,7 +318,8 @@
--ws-color-fg-primary: #333333; --ws-color-fg-primary: #333333;
--ws-color-surface-subtle: #f9f8fa; --ws-color-surface-subtle: #f9f8fa;
--ws-color-surface-elevated: #fbfafc; --ws-color-surface-elevated: #fbfafc;
--ws-color-interactive-primary: #8e47f0; --ws-color-interactive-hover: #1500331A;
--ws-color-interactive-primary: #150033;
--ws-color-line-default: #e4e7ec; --ws-color-line-default: #e4e7ec;
--ws-color-text-muted: #667085; --ws-color-text-muted: #667085;
--ws-color-icon-muted: #a3a1a1; --ws-color-icon-muted: #a3a1a1;
@ -364,7 +372,7 @@
--ws-color-fg-primary: #f5f5f5; --ws-color-fg-primary: #f5f5f5;
--ws-color-surface-subtle: #1f1f1f; --ws-color-surface-subtle: #1f1f1f;
--ws-color-surface-elevated: #24222a; --ws-color-surface-elevated: #24222a;
--ws-color-interactive-primary: #b987ff; --ws-color-interactive-primary: #150033;
--ws-color-line-default: #3b3f48; --ws-color-line-default: #3b3f48;
--ws-color-text-muted: #98a2b3; --ws-color-text-muted: #98a2b3;
--ws-color-icon-muted: #d0d0d0; --ws-color-icon-muted: #d0d0d0;