feat(08-02): token化 input/suggestion/streaming 颜色
- 将 input-box 与 suggestion 的硬编码颜色和 SVG fill/stroke 迁移为 ws token/currentColor - 移除 task 验收范围内的颜色/arbitrary 命中并保持 hover/active 可见 - 通过 lint 与 typecheck（仅保留仓库既有 warnings）
This commit is contained in:
parent
bceea21f9b
commit
3d4e180a05
|
|
@ -61,9 +61,9 @@ export const Suggestion = ({
|
|||
return (
|
||||
<Button
|
||||
className={cn(
|
||||
"cursor-pointer rounded-full px-[20px] py-[15px] text-[14px] font-normal",
|
||||
"border-none bg-[#F9F8FA] text-[#666666]",
|
||||
"hover:bg-[#EAE9EB] hover:text-[#150033]",
|
||||
"cursor-pointer rounded-full px-[20px] py-[15px] text-sm font-normal",
|
||||
"border-none bg-ws-f9f8fa text-ws-667085",
|
||||
"hover:bg-ws-fbfafc hover:text-ws-150033",
|
||||
className,
|
||||
)}
|
||||
onClick={handleClick}
|
||||
|
|
|
|||
|
|
@ -149,8 +149,7 @@ function WorkspaceToolButton({
|
|||
return (
|
||||
<PromptInputButton
|
||||
className={cn(
|
||||
// border border-[rgba(0,0,0,0.08)]
|
||||
"group h-full p-[10px]! rounded-[10px] hover:bg-[#EAE2F5] hover:text-[#8E47F0]",
|
||||
"group h-full rounded-[10px] p-[10px]! hover:bg-ws-f9f8fa hover:text-ws-8e47f0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
@ -890,7 +889,7 @@ export function InputBox({
|
|||
textareaRef.current?.focus();
|
||||
}}
|
||||
>
|
||||
<DropdownMenuLabel className="p-0 text-[14px] text-[#333333]">
|
||||
<DropdownMenuLabel className="p-0 text-sm text-ws-333333">
|
||||
{t.inputBox.addReference}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="mx-0 mt-[20px] mb-0" />
|
||||
|
|
@ -927,7 +926,7 @@ export function InputBox({
|
|||
className="h-10 w-10 shrink-0 rounded-md border object-cover object-top"
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-md border text-[10px] font-semibold">
|
||||
<div className="bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-md border text-xs font-semibold">
|
||||
{fileExtensionLabel(candidate.filename)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -1234,29 +1233,29 @@ function AddAttachmentsButton({ className }: { className?: string }) {
|
|||
const attachments = usePromptInputAttachments();
|
||||
return (
|
||||
<Tooltip content={t.inputBox.addAttachments}>
|
||||
<WorkspaceToolButton
|
||||
className={className}
|
||||
onClick={() => attachments.openFileDialog()}
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="15"
|
||||
viewBox="0 0 18 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="transition-[stroke] duration-200 [&>path]:transition-[fill,stroke] [&>path]:duration-200 [&>path:first-child]:group-hover:fill-[#8E47F0] [&>path:last-child]:group-hover:stroke-[#8E47F0]"
|
||||
<WorkspaceToolButton
|
||||
className={cn("text-ws-150033 hover:text-ws-8e47f0", className)}
|
||||
onClick={() => attachments.openFileDialog()}
|
||||
>
|
||||
<path
|
||||
d="M7.05042 7.65254C6.9754 7.72756 6.90039 7.80257 6.90039 7.95258C6.90039 8.02759 6.9754 8.1776 7.05042 8.25262C7.20043 8.40263 7.42545 8.40263 7.57546 8.25262L8.8506 6.97747V10.7279C8.8506 10.9529 9.00061 11.1029 9.22563 11.1029C9.30065 11.1029 9.45066 11.0279 9.52567 11.0279C9.60067 10.9529 9.67568 10.8779 9.67568 10.7279V6.97747L10.9508 8.25262C11.1008 8.40263 11.3259 8.40263 11.4759 8.25262C11.5509 8.1776 11.6259 8.10259 11.6259 7.95258C11.6259 7.87757 11.5509 7.72756 11.4759 7.65254L9.52567 5.70235C9.37564 5.55234 9.15062 5.55234 9.00061 5.70235L7.05042 7.65254Z"
|
||||
fill="#150033"
|
||||
/>
|
||||
<path
|
||||
d="M1.12695 0.5H6.67871C6.87077 0.500077 7.01409 0.574515 7.07324 0.648438L7.09082 0.669922L8.30762 1.88672C8.6222 2.20119 9.01344 2.3681 9.44629 2.36816H16.875C17.2382 2.36842 17.5012 2.63339 17.5 2.99414V13.8848C17.5048 14.2408 17.2454 14.5056 16.8818 14.5059H1.12695C0.764649 14.5057 0.5 14.2401 0.5 13.877V1.12793C0.500049 0.810129 0.702664 0.567404 0.996094 0.511719L1.12695 0.5Z"
|
||||
stroke="#150033"
|
||||
/>
|
||||
</svg>
|
||||
</WorkspaceToolButton>
|
||||
</Tooltip>
|
||||
<svg
|
||||
width="18"
|
||||
height="15"
|
||||
viewBox="0 0 18 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="transition-[color] duration-200"
|
||||
>
|
||||
<path
|
||||
d="M7.05042 7.65254C6.9754 7.72756 6.90039 7.80257 6.90039 7.95258C6.90039 8.02759 6.9754 8.1776 7.05042 8.25262C7.20043 8.40263 7.42545 8.40263 7.57546 8.25262L8.8506 6.97747V10.7279C8.8506 10.9529 9.00061 11.1029 9.22563 11.1029C9.30065 11.1029 9.45066 11.0279 9.52567 11.0279C9.60067 10.9529 9.67568 10.8779 9.67568 10.7279V6.97747L10.9508 8.25262C11.1008 8.40263 11.3259 8.40263 11.4759 8.25262C11.5509 8.1776 11.6259 8.10259 11.6259 7.95258C11.6259 7.87757 11.5509 7.72756 11.4759 7.65254L9.52567 5.70235C9.37564 5.55234 9.15062 5.55234 9.00061 5.70235L7.05042 7.65254Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M1.12695 0.5H6.67871C6.87077 0.500077 7.01409 0.574515 7.07324 0.648438L7.09082 0.669922L8.30762 1.88672C8.6222 2.20119 9.01344 2.3681 9.44629 2.36816H16.875C17.2382 2.36842 17.5012 2.63339 17.5 2.99414V13.8848C17.5048 14.2408 17.2454 14.5056 16.8818 14.5059H1.12695C0.764649 14.5057 0.5 14.2401 0.5 13.877V1.12793C0.500049 0.810129 0.702664 0.567404 0.996094 0.511719L1.12695 0.5Z"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</WorkspaceToolButton>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1272,34 +1271,34 @@ function HistoryButton({
|
|||
const { t } = useI18n();
|
||||
return (
|
||||
<Tooltip content={t.inputBox.history}>
|
||||
<WorkspaceToolButton
|
||||
className={className}
|
||||
onClick={() =>
|
||||
router.replace(`/workspace/chats/${threadId}?is_chatting=true`)
|
||||
}
|
||||
>
|
||||
<svg
|
||||
className="transition-[stroke] duration-200"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<WorkspaceToolButton
|
||||
className={cn("text-ws-150033 hover:text-ws-8e47f0", className)}
|
||||
onClick={() =>
|
||||
router.replace(`/workspace/chats/${threadId}?is_chatting=true`)
|
||||
}
|
||||
>
|
||||
<circle
|
||||
className="stroke-[#150033] transition-[stroke] duration-200 group-hover:stroke-[#8E47F0]"
|
||||
cx="9"
|
||||
cy="9"
|
||||
r="8.5"
|
||||
/>
|
||||
<path
|
||||
className="stroke-[#150033] transition-[stroke] duration-200 group-hover:stroke-[#8E47F0]"
|
||||
d="M9 6V10H12"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</WorkspaceToolButton>
|
||||
<svg
|
||||
className="transition-[color] duration-200"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
className="stroke-current transition-[stroke] duration-200"
|
||||
cx="9"
|
||||
cy="9"
|
||||
r="8.5"
|
||||
/>
|
||||
<path
|
||||
className="stroke-current transition-[stroke] duration-200"
|
||||
d="M9 6V10H12"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</WorkspaceToolButton>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
|
@ -1331,13 +1330,13 @@ function IframeSkillDialogButton({
|
|||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="size-4 transition-[stroke] duration-200 [&>path]:transition-[stroke] [&>path]:duration-200 [&>path]:group-hover:stroke-[#8E47F0]"
|
||||
className="size-4 text-ws-150033 transition-[color] duration-200 group-hover:text-ws-8e47f0"
|
||||
viewBox="0 0 12 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M3.7998 0.5H9.19922C9.24033 0.5 9.26852 0.518136 9.28516 0.541992C9.30124 0.565318 9.30411 0.588767 9.29395 0.613281H9.29297L7.43066 5.07422L7.1416 5.76758H11.3994C11.4295 5.76765 11.4474 5.77552 11.459 5.7832C11.4724 5.79207 11.4846 5.80503 11.4922 5.82129C11.4997 5.83745 11.5013 5.85253 11.5 5.86328C11.4989 5.87156 11.4953 5.88556 11.4785 5.9043L2.87891 15.4629V15.4639C2.85396 15.4914 2.83406 15.4971 2.82031 15.499C2.80144 15.5016 2.77553 15.4981 2.74902 15.4844C2.72225 15.4705 2.70837 15.453 2.70312 15.4424C2.70056 15.4372 2.69457 15.4253 2.70312 15.3936V15.3926L4.30273 9.49512L4.47461 8.86426H0.600586C0.559682 8.86424 0.531324 8.84587 0.514648 8.82227C0.498608 8.79944 0.496551 8.777 0.505859 8.75293L3.70508 0.558594C3.71075 0.544183 3.72173 0.529788 3.73828 0.518555C3.74688 0.51277 3.75704 0.508037 3.76758 0.504883L3.7998 0.5Z"
|
||||
stroke="#150033"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</WorkspaceToolButton>
|
||||
|
|
@ -1362,7 +1361,7 @@ function IframeSkillDialogButton({
|
|||
key={`${skill.skill_id}-${skill.title}-${index}`}
|
||||
className="shrink-0"
|
||||
>
|
||||
<span className="text-[12px]/[12px]">{skill.title}</span>
|
||||
<span className="text-xs leading-3">{skill.title}</span>
|
||||
{/* TODO: 因为后端接口不支持取消选择skill，所以暂时禁用取消选择按钮 */}
|
||||
<button
|
||||
onClick={() => clearSkill(skill.skill_id)}
|
||||
|
|
|
|||
|
|
@ -14,19 +14,19 @@ export function StreamingIndicator({
|
|||
<div
|
||||
className={cn(
|
||||
dotSize,
|
||||
"animate-bouncing rounded-full bg-[#a3a1a1] opacity-100",
|
||||
"animate-bouncing rounded-full bg-ws-a3a1a1 opacity-100",
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
dotSize,
|
||||
"animate-bouncing rounded-full bg-[#a3a1a1] opacity-100 [animation-delay:0.2s]",
|
||||
"animate-bouncing rounded-full bg-ws-a3a1a1 opacity-100 [animation-delay:0.2s]",
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
dotSize,
|
||||
"animate-bouncing rounded-full bg-[#a3a1a1] opacity-100 [animation-delay:0.4s]",
|
||||
"animate-bouncing rounded-full bg-ws-a3a1a1 opacity-100 [animation-delay:0.4s]",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue