@autional/ui 0.1.0-rc.44 → 0.1.0-rc.46

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@autional/ui",
-  "version": "0.1.0-rc.44",
-  "description": "Autional shared React component library (atoms + molecules) — the canonical home of the component layer",
+  "version": "0.1.0-rc.46",
+  "description": "Autional shared React component library (atoms + molecules) �?the canonical home of the component layer",
   "license": "AGPL-3.0",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -82,7 +82,7 @@
     "react-i18next": "17.0.7",
     "typescript": "5.8.3",
     "vitest": "3.2.0",
-    "@autional/tokens": "0.1.0-rc.12"
+    "@autional/tokens": "0.1.0-rc.15"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/atoms/Input.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { fieldControlClass, fieldControlHeight } from '../internal/field-styles';
+import { fieldControlClass, fieldControlClassFor, fieldControlHeight, type FieldShape, type FieldSize } from '../internal/field-styles';
 
-// 注：`prefix` 与 HTML 自带的 `prefix` 属性同名（后者在 <input> 上没有意义，TS 会报
-// 「ReactNode 不能赋给 string」）。所以这里显式 Omit 掉它再重定义 —— 保住最自然的调用名。
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+// 注：`prefix` 与 `size` 都与 HTML 自带的同名属性冲突（`prefix?: string`、`size?: number`，
+// 而这里要的是 ReactNode 与 'sm'|'md'|'lg'）。两处都是 **tsc 当场报出来的** ——
+// 所以显式 Omit 掉再重定义，保住最自然的调用名，而不是改成 `inputSize` 这种妥协名。
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'> {
 	error?: string;
 	/**
 	 * 前缀槽：图标或极短的单位符号（如货币符号）。
@@ -19,22 +20,32 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
 	prefix?: React.ReactNode;
 	/** 后缀槽：清除按钮、单位后缀一类。同样占真实布局空间。 */
 	suffix?: React.ReactNode;
+	/**
+	 * 尺寸档（第 61 轮）：sm=h-9 / md=h-10（默认）/ lg=h-14。
+	 * 舰队里手写的搜索框有三种几何，这个参数就是为它们准备的 —— **只影响有槽形态**，
+	 * 无槽形态仍走默认高度（既有消费方零影响）。
+	 */
+	size?: FieldSize;
+	/** 形状档：default=rounded-md / pill=rounded-full（大圆角搜索框）。同样只影响有槽形态。 */
+	shape?: FieldShape;
 }
 
 // 外观来自 ../internal/field-styles —— 与 @autional/ui/rhf 的绑定控件同一份，不各自维护。
 //
 // 两种渲染形态（**无槽时逐字节不变**，既有消费方零影响）：
 //   · 无 prefix/suffix：只有一个 <input>，外框在它自己身上（原样）；
-//   · 有槽：外框交给 wrapper，<input> 变透明并占满剩余宽度 —— 高度/圆角由调用方
-//     原有的 className 决定（舰队里搜索框有三种几何：py-2 / py-2.5 / py-3.5 rounded-full），
-//     所以这一层**不替调用方决定尺寸**。
+//   · 有槽：外框交给 wrapper，<input> 变透明并占满剩余宽度 —— 高度/圆角由 `size` / `shape`
+//     两轴决定（第 61 轮补：舰队里搜索框有三种几何 py-2 / py-2.5 / py-3.5 + rounded-full，
+//     组件层若只有一种，站点就只能各自写材质 —— 那就是这条维度存在的原因）。
+//     ⚠️ 调用方**不要**再传高度/内边距/圆角：同一批属性只能有一个来源，否则胜负由
+//     Tailwind 的生成顺序决定，而那是无声的。
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className = '', error, prefix, suffix, ...props }, ref) => {
+	({ className = '', error, prefix, suffix, size = 'md', shape = 'default', ...props }, ref) => {
 		const hasSlot = prefix != null || suffix != null;
 		return (
 			<div className="w-full">
 				{hasSlot ? (
-					<div className={fieldControlClass(!!error, 'flex items-center gap-2 ' + className)}>
+					<div className={fieldControlClassFor(size, shape, !!error, 'items-center gap-2 ' + className)}>
 						{prefix != null && (
 							<span className="shrink-0 text-[var(--color-text-muted)]" aria-hidden="true">{prefix}</span>
 						)}
@@ -49,4 +60,4 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 		);
 	},
 );
-Input.displayName = 'Input';
+Input.displayName = 'Input';

package/src/internal/field-styles.ts

@@ -1,14 +1,49 @@
 // 表单控件的外观只有一份 —— Input atom 与 @autional/ui/rhf 的绑定控件都用它。
 // 各自复制一份类名串的后果不是「看起来一样」，而是「改了一处、另一处没变」：
 // 那正是这一层要消灭的东西（与 antd 组件级令牌同理，只是这里是一段 Tailwind 类）。
+//
+// 第 61 轮加了尺寸与形状两轴 —— 起因是舰队里手写的搜索框有**三种几何**
+// （py-2 / py-2.5 / py-3.5 + rounded-full），而组件层只有一种，于是站点只能各自写材质。
+// 关键纪律：**高度/内边距/圆角只由一个地方发出来**（这里），调用方的 className 不得与它冲突 ——
+// 否则胜负由 Tailwind 的生成顺序决定，那是无声的。
 
-const BASE =
-	'flex w-full rounded-md border bg-[var(--color-bg-surface)] px-3 py-2 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+// ⚠️ 拆 BASE 的时候差点丢掉两个状态样式（focus-visible 环、disabled）——
+// 「重写一个常量的整行」时最容易漏掉的就是**行尾那几个**。它们与尺寸/形状不冲突，
+// 所以留在 STRUCT 里，一处不少。
+const STRUCT =
+	'flex w-full border bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] ' +
+	'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 ' +
+	'disabled:cursor-not-allowed disabled:opacity-50';
 
-/** 单行控件的高度。textarea 不给（它要能长高）。 */
+/** 尺寸档：高度是**定值**（不是 padding 撑出来的）—— 同一行里的控件要对齐，定值才可预测。 */
+export type FieldSize = 'sm' | 'md' | 'lg';
+const SIZE: Record<FieldSize, string> = {
+	sm: 'h-9 px-3 text-sm',
+	md: 'h-10 px-3 text-sm',
+	lg: 'h-14 px-4 text-base',
+};
+
+/** 形状档。pill 是给「搜索框」一类大圆角控件用的，不是给表单控件的默认。 */
+export type FieldShape = 'default' | 'pill';
+const SHAPE: Record<FieldShape, string> = {
+	default: 'rounded-md',
+	pill: 'rounded-full',
+};
+
+/** 单行控件的默认高度。textarea 不给（它要能长高）。 */
 export const fieldControlHeight = 'h-10';
 
-export function fieldControlClass(invalid?: boolean, extra = ''): string {
+export function fieldControlClassFor(
+	size: FieldSize = 'md',
+	shape: FieldShape = 'default',
+	invalid?: boolean,
+	extra = '',
+): string {
 	const border = invalid ? 'border-[var(--color-danger)]' : 'border-[var(--color-border-subtle)]';
-	return `${BASE} ${border} ${extra}`.trim();
+	return `${STRUCT} ${SIZE[size]} ${SHAPE[shape]} ${border} ${extra}`.trim();
+}
+
+/** 旧签名（默认 md + default）—— **逐字节不变**，既有消费方零影响。 */
+export function fieldControlClass(invalid?: boolean, extra = ''): string {
+	return fieldControlClassFor('md', 'default', invalid, extra);
 }

package/src/molecules/{ConsolePageHeader.tsx → AppPageHeader.tsx}

@@ -2,17 +2,23 @@
 
 import React from 'react';
 
-// ConsolePageHeader —— 控制台页面的页头：左对齐标题 + 右侧操作槽 + 可选副标题。
+// AppPageHeader —— **应用外壳里的页面页头**：左对齐标题 + 右侧操作槽 + 可选副标题。
 //
 // 为什么不是 DS 里已有的 PageHeader：那是**营销 hero**（text-center + text-3xl/sm:text-4xl），
-// 落地页在用；控制台页头是另一种东西（左对齐 + text-xl/font-semibold + 右侧操作槽）。
+// 落地页在用；应用页头是另一种东西（左对齐 + text-xl/font-semibold + 右侧操作槽）。
 // 两者**同名不同物**，互相替换会把控制台的密度打散 —— 所以这里另立一件，PageHeader 保持原样（D5）。
 //
+// 第 63 轮改名（L17）：原名 ConsolePageHeader 把契约说小了 —— user 门户（面向终端用户，
+// 不是「控制台」）早就是它的大用户。实测改名当时 **393 处**调用（站点 359 + 设计系统 34），
+// 而 L17 登记的是 174 处：**台账里的数字也会腐**，动手前必须重数。
+// 新名字跟着 AppShell 走：外壳叫什么，外壳里的页头就叫什么，与页面是不是「控制台」无关。
+// 不保留旧名别名 —— 全舰队同一批迁完，留一个只被我们自己引用的旧名字只会变成死代码。
+//
 // 收敛前实测（2026-10）：三个控制台在 **106 个页面**里把这段页头内联写了 106 遍，
 // 包裹容器的 className 有 **11 种**（mb-4 / mb-6、有没有 justify-between、有没有响应式断点各不相同）。
 // 这里固定成一种：窄屏纵向堆叠、sm 起横向两端对齐、gap-3、下边距 mb-6 —— 与其中 55 处的多数派一致。
 
-export interface ConsolePageHeaderProps {
+export interface AppPageHeaderProps {
 	/** 页面标题。 */
 	title: React.ReactNode;
 	/** 标题下方的说明文字（可选）。 */
@@ -23,12 +29,12 @@ export interface ConsolePageHeaderProps {
 	className?: string;
 }
 
-export const ConsolePageHeader = React.memo(function ConsolePageHeader({
+export const AppPageHeader = React.memo(function AppPageHeader({
 	title,
 	description,
 	actions,
 	className = '',
-}: ConsolePageHeaderProps) {
+}: AppPageHeaderProps) {
 	return (
 		<div
 			className={`mb-6 flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between ${className}`}

package/src/molecules/index.ts

@@ -23,8 +23,8 @@ export { PageContainer } from './PageContainer';
 export type { PageContainerProps } from './PageContainer';
 export { AppShell } from './AppShell';
 export type { AppShellProps } from './AppShell';
-export { ConsolePageHeader } from './ConsolePageHeader';
-export type { ConsolePageHeaderProps } from './ConsolePageHeader';
+export { AppPageHeader } from './AppPageHeader';
+export type { AppPageHeaderProps } from './AppPageHeader';
 export { Alert } from './Alert';
 export type { AlertProps, AlertVariant } from './Alert';
 export { Result } from './Result';