refactor(components): Code 中的 toolbar 添加了打印和扩展按钮

Author: caixw

apps/docs/src/components/stages/stage.tsx

@@ -113,7 +113,14 @@ export default function Stage(props: Props): JSX.Element {
 
 			<Show when={props.source}>
 				{s => (
-					<Code.Root wrap ln={0} lang="tsx" class={styles.code} style={{ height: codeHeight() }}>
+					<Code.Root
+						wrap
+						ln={0}
+						lang="tsx"
+						class={styles.code}
+						style={{ height: codeHeight() }}
+						decorates={['toolbar']}
+					>
 						{s()}
 					</Code.Root>
 				)}

apps/docs/src/components/stages/style.module.css

@@ -106,33 +106,33 @@
 				}
 
 				.code {
-					@apply border-transparent rounded-none! flex-1 w-1/2;
+					@apply bg-palette-2-bg! flex-1 w-1/2;
 				}
+			}
 
-				.stage.vertical {
-					@apply flex-col items-stretch! justify-stretch!;
+			.stage.vertical {
+				@apply flex-col items-stretch! justify-stretch!;
 
-					.demo {
-						@apply w-full max-w-full;
-					}
+				.demo {
+					@apply w-full max-w-full;
+				}
 
-					.code {
-						@apply w-full;
-					}
+				.code {
+					@apply w-full;
 				}
+			}
 
-				.stage.auto {
-					@apply @max-3xl/stages:flex-col! @max-3xl/stages:justify-start! @max-3xl/stages:items-start!;
+			.stage.auto {
+				@apply @max-3xl/stages:flex-col! @max-3xl/stages:justify-start! @max-3xl/stages:items-start!;
 
-					.demo {
-						@apply h-full min-h-fit w-1/2;
-						@apply @max-3xl/stages:w-full!;
-					}
+				.demo {
+					@apply h-full min-h-fit w-1/2;
+					@apply @max-3xl/stages:w-full!;
+				}
 
-					.code {
-						@apply w-1/2 overflow-y-auto;
-						@apply @max-3xl/stages:w-full! @max-3xl/stages:flex-none;
-					}
+				.code {
+					@apply w-1/2 overflow-y-auto;
+					@apply @max-3xl/stages:w-full! @max-3xl/stages:flex-none;
 				}
 			}
 		}

packages/components/src/code/decorate.tsx

@@ -7,7 +7,7 @@ import { render } from 'solid-js/web';
 import IconDown from '~icons/material-symbols/keyboard-arrow-down-rounded';
 import IconUp from '~icons/material-symbols/keyboard-arrow-up-rounded';
 
-import { Button, ToggleButton } from '@components/button';
+import { Button, PrintButton, ToggleButton } from '@components/button';
 import { ClipboardAPI } from '@components/clipboard';
 import styles from './style.module.css';
 
@@ -134,6 +134,10 @@ registerDecorate('toolbar', pre => {
 					<ClipboardAPI.Root ref={el => (clipboardRef = el)} />
 				</Button.Root>
 
+				<ToggleButton.FitScreen kind='flat' class={styles.btn} container={pre} />
+
+				<PrintButton.Root kind='flat' class={styles.btn} element={() => pre} />
+
 				<ToggleButton.Root
 					off={<IconUp />}
 					on={<IconDown />}

packages/components/src/divider/root.tsx

@@ -14,10 +14,8 @@ export type Props = ParentProps<
 		/**
 		 * 如果存在文字，表示文字的位置，否则该值无意义。
 		 *
-		 * @remarks
-		 * 在 children 不为空的情况下，如果未指定 pos，会初始化 'start'。
-		 *
 		 * @reactive
+		 * @defaultValue 'start'
 		 */
 		pos?: 'start' | 'center' | 'end';
 
@@ -69,9 +67,9 @@ export function Root(props: Props): JSX.Element {
 				props.palette,
 				{
 					[styles.vertical]: props.layout !== 'horizontal',
-					[styles[`pos-${props.children ? (props.pos ?? 'none') : 'none'}`]]: true,
+					[styles[`pos-${props.children ? props.pos : 'none'}`]]: true,
+					[styles.divider]: true,
 				},
-				styles.divider,
 				props.class,
 			)}
 		>

packages/components/src/divider/style.module.css

@@ -8,12 +8,12 @@
 
 @layer components {
 	.divider {
-		@apply flex items-center justify-center text-palette-fg whitespace-nowrap w-full h-[1px];
+		@apply flex items-center justify-center text-palette-fg whitespace-nowrap w-full h-px;
 	}
 
 	.divider::before,
 	.divider::after {
-		@apply w-full grow-1 h-[1px] bg-palette-bg-low;
+		@apply w-full grow h-px bg-palette-bg-low;
 	}
 
 	.divider.pos-start::after,
@@ -43,12 +43,12 @@
 	/*************************** vertical ********************************/
 
 	.divider.vertical {
-		@apply flex-col h-full w-[1px];
+		@apply flex-col h-full w-px;
 	}
 
 	.divider.vertical::before,
 	.divider.vertical::after {
-		@apply h-full grow-1 w-[1px];
+		@apply h-full grow w-px;
 	}
 
 	.divider.vertical.pos-start::after,