企业官网建设流程全解析

免费建手机网站后台,百度网络小说排行榜,自助模块化网站建设,淘宝一个关键词要刷多久本章将正式实现你的框架需求之一#xff1a;大 / 中 / 小 三种尺寸体系#xff08;Large / Medium / Small#xff09;#xff0c;并且做到#xff1a;全局控制#xff08;Zustand 管理#xff09;组件级覆盖#xff08;Button、Input、Card 等自动适配#xff09;与 …本章将正式实现你的框架需求之一大 / 中 / 小 三种尺寸体系Large / Medium / Small并且做到全局控制Zustand 管理组件级覆盖Button、Input、Card 等自动适配与 shadcn/ui 的 variant 体系完美兼容与主题与语言系统协同工作支持未来扩展如文字大小、行距、spacing 等保证企业级 UI 一致性本章的尺寸体系将贯穿整个 UI 组件系统是专业管理后台不可或缺的能力。第 6 章全局尺寸系统sm / md / lg—— 统一 UI 尺寸控制体系现代后台系统通常需要两类尺寸全局尺寸系统级别例如后台全局切换“大号”字体或“紧凑模式”组件尺寸组件级别例如 Button sizelg 或 Card sizesm本章将实现一个全局尺寸sm / md / lg默认组件尺寸为全局尺寸组件允许单独覆盖尺寸全局变化时所有组件同步更新下拉切换控制器 UISizeSwitcher配合 Tailwind CVA 实现可扩展的尺寸 token最终效果App 顶部有一个尺寸切换器切换后所有组件自动响应按钮变大、输入框变大、卡片 padding 变大单个组件仍可使用sizesm覆盖全局配置6.1 使用 Zustand 管理全局尺寸状态首先创建目录src/stores/ui.ts写入import { create } from zustand; export type UISize sm | md | lg; interface UIState { size: UISize; setSize: (size: UISize) void; } export const useUIStore createUIState((set) ({ size: md, // 默认中等 setSize: (size) set({ size }), }));状态结构非常简单size: 当前全局尺寸setSize: 切换尺寸方法未来如果需要扩展如 UI 密度、字体大小、圆角大小可以继续放到这个 store 中。6.2 创建尺寸切换组件在src/components/SizeSwitcher.tsx创建import { useUIStore } from ../stores/ui; export const SizeSwitcher () { const { size, setSize } useUIStore(); return ( select classNamerounded-md border px-2 py-1 value{size} onChange{(e) setSize(e.target.value as sm | md | lg)} option valuesmSmall/option option valuemdMedium/option option valuelgLarge/option /select ); };用ShadCn实现import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from /components/ui/select; import { useUIStore } from ../stores/ui; export const SizeSwitcher () { const { size, setSize } useUIStore(); return ( Select value{size} onValueChange{(value) setSize(value as sm | md | lg)} SelectTrigger classNamew-[180px] SelectValue placeholderSelect size / /SelectTrigger SelectContent SelectItem valuesmSmall/SelectItem SelectItem valuemdMedium/SelectItem SelectItem valuelgLarge/SelectItem /SelectContent /Select ); };6.3 将 SizeSwitcher 集成到 App 里测试修改src/App.tsximport { Search, User, Settings, Plus } from lucide-react; import { useTranslation } from react-i18next; import { Button } from /components/ui/button; import { LanguageSwitcher } from ./components/LanguageSwitcher; import { SizeSwitcher } from ./components/SizeSwitcher; import { ThemeSwitcher } from ./components/ThemeSwitcher; function App() { const { t } useTranslation(); return ( div classNameflex min-h-screen flex-col items-center justify-center gap-4 space-x-3 p-4 divApp Initialized/div Button默认按钮/Button Button sizesm小/Button Button sizelg大/Button Button variantoutline描边按钮/Button IconDemo / CreateButton / LanguageSwitcher / h1 classNametext-2xl font-bold{t(dashboard.title)}/h1 p{t(dashboard.welcome, { name: 龙傲天 })}/p div{t(common.language)}/div ThemeSwitcher / h1 classNametext-2xl font-boldTheme System Ready/h1 div classNamerounded-md border bg-card p-4 text-card-foreground This box will change when you toggle theme. /div div classNamebg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] 主题变量测试 /div SizeSwitcher / h1 classNametext-2xl font-boldGlobal UI Size System/h1 div classNamespace-x-3 ButtonButton/Button Button variantoutlineOutline/Button Button sizelgOverride lg/Button /div /div ); } function IconDemo() { return ( div classNameflex items-center gap-4 Search classNameh-5 w-5 text-muted-foreground / User classNameh-5 w-5 text-blue-500 / Settings classNameh-5 w-5 text-green-500 / /div ); } function CreateButton() { return ( Button Plus classNamemr-2 h-4 w-4 / 新建 /Button ); } export default App;此时尺寸切换器已经能改变 Button 尺寸但我们需要完善组件逻辑。6.4 让组件自动读取全局尺寸Button 示例你的 shadcn Button 文件如下根据前几章在src/components/ui/button.tsx修改import * as React from react import { cn } from /lib/utils import { useUIStore } from /stores/ui const componentSizes { sm: px-2 py-1 text-sm, md: px-3 py-2 text-base, lg: px-4 py-3 text-lg, } export interface ButtonProps extends React.ButtonHTMLAttributesHTMLButtonElement { size?: sm | md | lg | auto; // auto follow global variant?: default | outline | ghost; } export const Button React.forwardRefHTMLButtonElement, ButtonProps( ({ className, size auto, variant default, ...props }, ref) { const globalSize useUIStore((s) s.size); const finalSize size auto ? globalSize : size; return ( button ref{ref} className{cn( rounded-md font-medium transition-colors, componentSizes[finalSize], variant outline ? border border-input hover:bg-accent hover:text-accent-foreground : bg-primary text-primary-foreground hover:bg-primary/90, className )} {...props} / ); } ); Button.displayName Button;现在 Button 有三种尺寸应用方式用法说明Button /使用全局尺寸Button sizelg /覆盖为大号尺寸Button sizesm /覆盖为小号尺寸SizeSwitcher /控制全局尺寸完美符合企业 UI 要求。6.5 为 Input、Card 等组件添加全局尺寸支持范例强烈推荐在组件目录中建立一个公共尺寸工具src/components/ui/useComponentSize.ts内容import { useUIStore } from /stores/ui; export const useComponentSize (size?: sm | md | lg | auto) { const globalSize useUIStore((s) s.size); return size auto || !size ? globalSize : size; };之后每个组件都可以这样写const finalSize useComponentSize(size)让我们为 Input 组件建立一个尺寸支持生成 inputpnpm dlx shadcn-uilatest add input编辑文件src/components/ui/input.tsx添加import { useComponentSize } from ./useComponentSize; const inputSizes { sm: h-7 px-2 text-sm, md: h-9 px-3 text-base, lg: h-11 px-4 text-lg, }; export interface InputProps extends React.InputHTMLAttributesHTMLInputElement { size?: sm | md | lg | auto; } const Input React.forwardRefHTMLInputElement, InputProps( ({ className, type, size auto, ...props }, ref) { const finalSize useComponentSize(size); return ( input type{type} className{cn( border rounded-md bg-background focus:ring-2, inputSizes[finalSize], className )} ref{ref} {...props} / ); } );输入框也具备全局尺寸能力。6.6 UI 尺寸系统设计原理重要理解你的尺寸系统遵循两层设计第一层系统 UI 尺寸sm / md / lg存储在 Zustand。全局作用于所有组件的默认尺寸。第二层组件本身的尺寸参数sizesm覆盖第一层。优先级组件尺寸 全局尺寸如SizeSwitcher / // 全局尺寸 lg Button / // 自动变成 lg Button sizesm /// 单独变成 sm非常灵活。6.7 在顶级 Layout 中使用后续章节会使用最终你会在src/components/Layout.tsx放置header classNameflex items-center justify-between p-4 border-b LanguageSwitcher / ThemeSwitcher / SizeSwitcher / /header这是企业后台的经典“全局配置栏”。6.8 本章小结本章完成了✔ 全局尺寸状态Zustand✔ 尺寸切换器SizeSwitcher✔ Button 支持全局尺寸 局部覆盖✔ 创建 useComponentSize 钩子✔ Input 等组件也支持尺寸系统✔ App 整体可响应大小变化✔ 为后续所有 UI 组件奠定一致规范至此你的项目现在拥有完整的 UI 三尺寸体系并可与theme 主题系统shadcn UITailwindi18n动态路由权限协同工作。项目已经具备成熟后台框架的视觉基础。