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:
parent
9eb494b1b4
commit
c45bc4d521
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user