Skip to content

【已审核】style(ui): 统一全代码库滚动条架构 #1427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
climashscape wants to merge 1 commit into from
Closed

【已审核】style(ui): 统一全代码库滚动条架构 #1427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 30 additions & 38 deletions apps/electron/src/renderer/components/agent/tool-result-renderers/pierre-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,45 @@
* 供 edit-result / write-result / read-result 等工具渲染器复用。
*/

/**
* 滚动条共享样式 — 尺寸/圆角/轨道/透明度引用全局 --scrollbar-* 变量（globals.css :root）。
* 颜色在使用处写 hsl(var(--muted-foreground) / var(--opacity))：--muted-foreground 经 host
* 继承链传入 shadow root，随主题（.dark/.theme-*）正确变化；不能预先算成 --scrollbar-thumb 变量。
*/
export const PIERRE_SCROLLBAR_CSS = `
[data-code]::-webkit-scrollbar {
width: var(--scrollbar-size, 6px);
height: var(--scrollbar-size, 6px);
}
[data-code]::-webkit-scrollbar-track {
background: var(--scrollbar-track, transparent);
}
[data-code]::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / var(--scrollbar-thumb-opacity, 0.3));
border-radius: var(--scrollbar-radius, 3px);
}
[data-code]::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / var(--scrollbar-thumb-hover-opacity, 0.5));
}
[data-code]::-webkit-scrollbar-corner {
background: var(--scrollbar-track, transparent);
}
`

/** Pierre diffs 主题颜色 CSS — 注入到 unsafeCSS */
export const PIERRE_DIFF_CSS = `
:root, :host {
/* 覆盖 pierre 库默认 color-scheme: light dark，让 light-dark() 跟随应用主题 class 而非系统偏好 */
color-scheme: inherit;
--diffs-bg: transparent;
--diffs-addition-base: rgb(67,167,71);
--diffs-deletion-base: rgb(206,66,52);
--diffs-addition-bg: light-dark(rgb(228,244,233), rgb(19,34,23));
--diffs-deletion-bg: light-dark(rgb(248,231,230), rgb(39,22,20));
--diffs-separator-bg: hsl(var(--background));
--diffs-gap-style: 3px solid hsl(var(--content-area));
--diffs-scrollbar-thumb: light-dark(hsl(var(--muted-foreground) / 0.6), hsl(var(--muted-foreground) / 0.2));
--diffs-scrollbar-thumb-hover: light-dark(hsl(var(--muted-foreground) / 0.8), hsl(var(--muted-foreground) / 0.35));
}
[data-code]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[data-code]::-webkit-scrollbar-track {
background: transparent;
}
[data-code]::-webkit-scrollbar-thumb {
background: var(--diffs-scrollbar-thumb);
border-radius: 3px;
}
[data-code]::-webkit-scrollbar-thumb:hover {
background: var(--diffs-scrollbar-thumb-hover);
}
[data-code]::-webkit-scrollbar-corner {
background: transparent;
}
${PIERRE_SCROLLBAR_CSS}
[data-separator=line-info],
[data-separator=line-info] [data-separator-wrapper],
[data-separator=line-info] [data-separator-content],
Expand Down Expand Up @@ -71,27 +80,10 @@ export const PIERRE_DIFF_CSS = `
/** Pierre File 组件的 CSS — 纯代码预览（无 diff 行类型） */
export const PIERRE_FILE_CSS = `
:root, :host {
color-scheme: inherit;
--diffs-bg: transparent;
--diffs-scrollbar-thumb: light-dark(hsl(var(--muted-foreground) / 0.6), hsl(var(--muted-foreground) / 0.2));
--diffs-scrollbar-thumb-hover: light-dark(hsl(var(--muted-foreground) / 0.8), hsl(var(--muted-foreground) / 0.35));
}
[data-code]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[data-code]::-webkit-scrollbar-track {
background: transparent;
}
[data-code]::-webkit-scrollbar-thumb {
background: var(--diffs-scrollbar-thumb);
border-radius: 3px;
}
[data-code]::-webkit-scrollbar-thumb:hover {
background: var(--diffs-scrollbar-thumb-hover);
}
[data-code]::-webkit-scrollbar-corner {
background: transparent;
}
${PIERRE_SCROLLBAR_CSS}
[data-column-number],
[data-gutter] {
background-color: hsl(var(--content-area)) !important;
Expand Down
13 changes: 12 additions & 1 deletion apps/electron/src/renderer/components/ai-elements/rich-text-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -930,7 +930,18 @@ export const RichTextInput = forwardRef<RichTextInputHandle, RichTextInputProps>
font-style: ${suggestionActive ? 'italic' : 'normal'};
}
.ProseMirror::-webkit-scrollbar {
width: 3px;
/* 输入框超细特例，引用全局 --scrollbar-size-sm */
width: var(--scrollbar-size-sm, 3px);
}
.ProseMirror::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / var(--scrollbar-thumb-opacity));
border-radius: var(--scrollbar-radius, 3px);
}
.ProseMirror::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / var(--scrollbar-thumb-hover-opacity));
}
.ProseMirror::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
.mention-chip {
background-color: hsl(var(--primary) / 0.1);
Expand Down
63 changes: 2 additions & 61 deletions apps/electron/src/renderer/components/diff/DiffView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useAtomValue } from 'jotai'
import { MultiFileDiff } from '@pierre/diffs/react'
import type { FileContents } from '@pierre/diffs'
import { resolvedThemeAtom } from '@/atoms/theme'
import { PIERRE_DIFF_CSS } from '@/components/agent/tool-result-renderers/pierre-styles'
import './diff-scroll.css'

/** 单侧超过此行数的文件不计算 diff，避免 Myers O(N*D) + shiki 阻塞主线程 */
Expand Down Expand Up @@ -60,67 +61,7 @@ export const DiffView = React.memo(function DiffView({ oldContent, newContent, f
lineDiffType: 'none' as const,
overflow: 'scroll' as const,
themeType: theme as 'light' | 'dark' | 'system',
unsafeCSS: `
:root, :host {
--diffs-bg: transparent;
--diffs-addition-base: rgb(67,167,71);
--diffs-deletion-base: rgb(206,66,52);
--diffs-addition-bg: light-dark(rgb(228,244,233), rgb(19,34,23));
--diffs-deletion-bg: light-dark(rgb(248,231,230), rgb(39,22,20));
--diffs-separator-bg: hsl(var(--background));
--diffs-gap-style: 3px solid hsl(var(--content-area));
--diffs-scrollbar-thumb: light-dark(hsl(var(--muted-foreground) / 0.6), hsl(var(--muted-foreground) / 0.2));
--diffs-scrollbar-thumb-hover: light-dark(hsl(var(--muted-foreground) / 0.8), hsl(var(--muted-foreground) / 0.35));
}
.diff-scroll [data-code]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.diff-scroll [data-code]::-webkit-scrollbar-track {
background: transparent;
}
.diff-scroll [data-code]::-webkit-scrollbar-thumb {
background: var(--diffs-scrollbar-thumb);
border-radius: 3px;
}
.diff-scroll [data-code]::-webkit-scrollbar-thumb:hover {
background: var(--diffs-scrollbar-thumb-hover);
}
.diff-scroll [data-code]::-webkit-scrollbar-corner {
background: transparent;
}
[data-separator=line-info],
[data-separator=line-info] [data-separator-wrapper],
[data-separator=line-info] [data-separator-content],
[data-separator=line-info] [data-expand-button] {
background-color: var(--diffs-separator-bg) !important;
}
[data-line-type=change-addition] {
background-color: var(--diffs-addition-bg) !important;
}
[data-line-type=change-deletion] {
background-color: var(--diffs-deletion-bg) !important;
}
[data-line-type=change-addition] [data-column-number],
[data-line-type=change-addition] [data-gutter-buffer]:not([data-gutter-buffer=buffer]) {
color: rgb(67,167,71) !important;
background-color: var(--diffs-addition-bg) !important;
}
[data-line-type=change-deletion] [data-column-number],
[data-line-type=change-deletion] [data-gutter-buffer]:not([data-gutter-buffer=buffer]) {
color: rgb(206,66,52) !important;
background-color: var(--diffs-deletion-bg) !important;
}
[data-gutter-buffer=buffer] {
background: none !important;
}
[data-line-type=context] [data-column-number],
[data-line-type=metadata] [data-column-number],
[data-line-type=expanded] [data-column-number],
[data-gutter] {
background-color: hsl(var(--content-area)) !important;
}
`,
unsafeCSS: PIERRE_DIFF_CSS,
}), [viewMode, theme])

if (tooLarge) {
Expand Down
18 changes: 10 additions & 8 deletions apps/electron/src/renderer/components/diff/diff-scroll.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
/* Diff 滚动条 — overlay 在代码上方，不占布局空间 */
/* Diff 滚动条 — overlay 在代码上方，不占布局空间。
* 尺寸/圆角/轨道引用全局 --scrollbar-* 变量（globals.css :root），颜色在使用处
* 写 hsl(var(--muted-foreground) / var(--opacity)) 以正确跟随主题。 */
.diff-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
width: var(--scrollbar-size, 6px);
height: var(--scrollbar-size, 6px);
}

.diff-scroll::-webkit-scrollbar-track {
background: transparent;
background: var(--scrollbar-track, transparent);
}

.diff-scroll::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / 0.2);
border-radius: 3px;
background: hsl(var(--muted-foreground) / var(--scrollbar-thumb-opacity, 0.3));
border-radius: var(--scrollbar-radius, 3px);
}

.diff-scroll::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.35);
background: hsl(var(--muted-foreground) / var(--scrollbar-thumb-hover-opacity, 0.5));
}

.diff-scroll::-webkit-scrollbar-corner {
background: transparent;
background: var(--scrollbar-track, transparent);
}
6 changes: 3 additions & 3 deletions apps/electron/src/renderer/components/ui/scroll-area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ const ScrollBar = React.forwardRef<
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
"h-full w-[var(--scrollbar-size)] border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
"h-[var(--scrollbar-size)] flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 scroll-area-thumb" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
Expand Down
2 changes: 1 addition & 1 deletion apps/electron/src/renderer/components/voice-dictation/VoiceDictationApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -614,7 +614,7 @@ export function VoiceDictationApp({ embedded = false }: { embedded?: boolean }):
<div className="h-px bg-border/70" />
<div
ref={transcriptBoxRef}
className="box-border min-h-[34px] px-3 pt-2.5 pb-2.5 text-[15px] leading-7 text-foreground [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
className="box-border min-h-[34px] px-3 pt-2.5 pb-2.5 text-[15px] leading-7 text-foreground scrollbar-none"
style={{
maxHeight: transcriptMaxHeight ?? undefined,
overflowY: 'auto',
Expand Down
Loading