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 || !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;
@ -1165,11 +1169,13 @@ export const PromptInputSubmit = ({
Icon = <Loader2Icon className="size-4 animate-spin" />;
text = t.inputBox.submitting;
} 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;
} else if (status === "error") {
// 没有报错状态先用error状态代替
Icon = <XIcon className="size-4" />;
// Icon = <XIcon className="size-4" />;
// MARK: 这里后端没有返回错误信息,先写死一个文本
text = t.inputBox.submit;
}
@ -1180,10 +1186,10 @@ export const PromptInputSubmit = ({
aria-label="Submit"
// 被button{bgc:#fff}覆盖了,只能加"!"
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
? "cursor-not-allowed !bg-gray-200 text-gray-400"
: "!bg-[#F0E8FB] text-[#8E47F0] hover:!bg-[#8E47F0] hover:text-[#FFFFFF]",
? "cursor-not-allowed !bg-[#15003399] text-gray-400"
: "!bg-[#150033] text-[#8E47F0] hover:text-[#FFFFFF]",
className,
)}
size={size}
@ -1192,8 +1198,8 @@ export const PromptInputSubmit = ({
disabled={isDisabled}
{...props}
>
{/* {children ?? Icon} */}
{text}
{children ?? Icon}
{/* {text} */}
</InputGroupButton>
</Tooltip>
);

View File

@ -151,7 +151,7 @@ function WorkspaceToolButton({
return (
<PromptInputButton
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,
)}
{...props}
@ -1050,7 +1050,7 @@ export function InputBox({
</ModelSelector> */}
<PromptInputTools>
{/* 占位符 */}
<div className="w-[150px] h-[40px]"></div>
<div className="w-[36px] h-[36px]"></div>
</PromptInputTools>
</PromptInputFooter>
<PromptInputSubmit

View File

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