后端前端CRM人工智能AI Agent【免费下载链接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.项目地址https://gitcode.com/gh_mirrors/crm48/crm点击查看免费下载本文以 Comp AI CRM 仓库内.agents/skills/shadcn/rules/styling.md样式规范为核心骨架系统讲解基于 shadcn/ui 的语义化样式体系如何用语义色代替原始 Tailwind 颜色、如何优先使用内置变体、如何用cn()合并条件类以及如何通过 CSS 变量完成主题定制与暗色模式切换。读完本文你将掌握一套可直接落地的组件样式开发与定制规范并能在 packages/ui 的真实组件Button、Badge、MessageScroller、Attachment 等中找到对应实现证据。一、规范定位这是项目必须遵守的样式规则styling.md是 Comp AI CRM 的 shadcn skill 中始终强制生效always enforced的规则文件与之并列的还有 rules/forms.md表单、rules/composition.md组件结构等。该文件为 Tailwind 类名与 shadcn/ui 组件的使用划定边界核心思想是组件的外观由语义化 token 与内置变体负责className只负责布局。这一思想贯穿下列 11 条规则每条都配套Incorrect / Correct正反示例可直接作为代码评审的检查清单语义色Semantic colors状态/指示器不得使用原始颜色值优先使用内置变体Built-in variants firstclassName仅用于布局禁止space-x-*/space-y-*等宽高优先size-*优先truncate简写禁止手动dark:颜色覆盖条件类统一使用cn()浮层组件禁止手动z-index使用shimmer/scroll-fade工具类而非自定义动画二、先理解机制CSS 变量 → Tailwind 工具类 → 组件在展开规则前先看支撑这些规则的主题机制详见 customization.md它遵循三层链路CSS 变量定义在:root亮色与.dark暗色中Tailwind 将变量映射为工具类如bg-primary、text-muted-foreground组件消费这些工具类——改一个变量所有引用它的组件同步变化。在 Comp AI CRM 中这套变量集中定义在 packages/ui/src/styles/globals.css首部通过import tailwindcss、import tw-animate-css与import shadcn/tailwind.css引入基础并用custom-variant dark (:is(.dark *))声明基于类的暗色模式。变量与 Tailwind 工具类的映射通过theme inline块完成例如theme inline { --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-muted-foreground: var(--muted-foreground); /* ... */ }项目还额外注册了--color-success、--color-warning、--color-info、--color-tag、--color-overlay等扩展语义色供业务组件直接使用见 globals.css。这一事实说明项目需要的新颜色应先考虑补充语义变量而不是在 JSX 里硬编码色值。三、核心规则逐条解析正反示例3.1 语义色优先错误写法直接使用 Tailwind 调色板div classNamebg-blue-500 text-white p classNametext-gray-600Secondary text/p /div正确写法使用语义 tokendiv classNamebg-primary text-primary-foreground p classNametext-muted-foregroundSecondary text/p /div语义 token 在亮/暗两种主题下自动适配而bg-blue-500在暗色主题中不会有任何响应。3.2 状态/指示器禁止使用原始颜色值上涨、下跌、启用、错误等状态色应使用 Badge 变体、text-destructive等语义 token或新增自定义 CSS 变量——不要直接写text-emerald-600这类原始色错误写法span classNametext-emerald-60020.1%/span span classNametext-green-500Active/span span classNametext-red-600-3.2%/span正确写法Badge variantsecondary20.1%/Badge BadgeActive/Badge span classNametext-destructive-3.2%/span如果缺少表示成功/正向的语义 token规范给出两条出路使用 Badge 变体或与用户确认后向主题新增自定义 CSS 变量步骤见第六节。在 Comp AI CRM 中Badge 组件已通过cva定义了default、secondary、destructive、outline、ghost、link、mono、token共 8 个变体见 packages/ui/src/components/badge.tsx其中destructive变体内部使用bg-destructive/10 text-destructive的语义组合正是指示器的标准姿势。3.3 优先使用内置变体不要用一堆工具类手搓出本来就有变体的效果错误写法Button classNameborder border-input bg-transparent hover:bg-accent Click me /Button正确写法Button variantoutlineClick me/Button查看仓库中 packages/ui/src/components/button.tsx 的实现Button的cva变体覆盖了default、outline、outline-ghost、secondary、ghost、destructive、contrast、link八种尺寸涵盖xs/sm/default/lg/xl/icon/icon-xs/icon-sm/icon-lg绝大多数视觉需求都应先在此列表中寻找答案。3.4 className 仅用于布局className只允许承担max-w-md、mx-auto、mt-4这类布局职责禁止用它覆盖组件的颜色或排版错误写法Card classNamebg-blue-100 text-blue-900 font-bold CardContentDashboard/CardContent /Card正确写法Card classNamemax-w-md mx-auto CardContentDashboard/CardContent /Card当确实需要自定义组件外观时按以下优先级依次尝试内置变体——variantoutline、variantdestructive等语义色 token——bg-primary、text-muted-foregroundCSS 变量—— 在全局 CSS 文件中定义自定义颜色参见 customization.md。3.5 禁止 space-x-* / space-y-*space-*依赖相邻兄弟选择器与子元素margin冲突且不可组合统一改用 flex 布局 gap-*div classNameflex flex-col gap-4 Input / Input / ButtonSubmit/Button /div换算关系space-y-4→flex flex-col gap-4space-x-2→flex gap-2。3.6 等宽高等高时优先 size-*当宽度与高度相等时用size-10而非w-10 h-10适用于图标、头像、骨架屏等。在 Button 实现中可以看到size-*已内嵌于组件基类如[_svg:not([class*size-])]:size-4图标统一由size-*控制正是这条规则的落地button.tsx。3.7 优先 truncate 简写truncate等价于overflow-hidden text-ellipsis whitespace-nowrap三件套永远写简写span classNametruncateA very long file name that must be ellipsized…/span仓库中 packages/ui/src/components/attachment.tsx 对附件标题的处理正是block max-w-full min-w-0 truncate font-medium的组合。3.8 禁止手动 dark: 颜色覆盖语义 token 已经通过 CSS 变量自动处理亮/暗两套主题不要再写bg-white dark:bg-gray-950错误写法div classNamebg-white dark:bg-gray-950.../div正确写法div classNamebg-background text-foreground.../div暗色模式下--background从#ffffff自动切换为#0f0f0f、--foreground从#171717切换为#f5f5f5见 globals.css无需任何组件改动。3.9 条件类统一使用 cn()项目提供cn()工具函数用于合并/条件类名禁止在 className 字符串里手写模板字面量三元错误写法div className{flex items-center ${isActive ? bg-primary text-primary-foreground : bg-muted}}正确写法import { cn } from crm/ui/lib/utils div className{cn(flex items-center, isActive ? bg-primary text-primary-foreground : bg-muted)}cn()的实现位于 packages/ui/src/lib/utils.ts本质是clsx与tailwind-merge的组合前者负责条件合并后者负责智能去重冲突类——例如同时传入p-2与p-4时只保留后者从而保证调用方传入的类能安全覆盖组件默认类。3.10 浮层组件禁止手动 z-indexDialog、Sheet、Drawer、AlertDialog、DropdownMenu、Popover、Tooltip、HoverCard等浮层组件自带层级管理永远不要追加z-50或z-[999]。手动堆叠 z-index 会破坏组件自身的层叠上下文导致弹层被错误遮挡。若确有层级需求应优先调整 DOM 结构或在主题层解决。3.11 用 shimmer / scroll-fade 工具类替代自定义动画实时思考中…或加载文字闪烁效果直接使用shimmer工具类滚动容器边缘渐隐使用scroll-fade含轴向变体scroll-fade-x、scroll-fade-b不要手写keyframes、bg-clip-text渐变扫光或 mask 渐变。错误写法手搓动画span classNameanimate-pulse bg-gradient-to-r from-muted-foreground/40 via-foreground/70 to-muted-foreground/40 bg-clip-text text-transparent [animation:shimmer_1.6s_infinite] Thinking… /span正确写法使用工具类span classNameshimmerThinking…/span这些工具类在项目内已大量内置使用packages/ui/src/components/attachment.tsx附件处于uploading/processing状态时标题自动应用shimmer动画packages/ui/src/components/message-scroller.tsxMessageScroller的滚动视口使用scroll-fade-b在底部做边缘渐隐配套规范 rules/chat.md 明确要求思考中指示器使用shimmer工具类而非自定义 keyframes其 eval 校验项也写入了no custom shimmer keyframes的硬性要求见.agents/skills/shadcn/evals/evals.json。复用现成工具类的好处动效参数全局统一、天然适配prefers-reduced-motion、减少无意义的样式膨胀。四、主题定制改变量即可全局换肤规则之外掌握主题定制能力才能让语义 token 真正为我所用完整步骤见 customization.md。4.1 颜色变量体系name / name-foreground 约定每个颜色遵循name/name-foreground命名约定基础变量用于背景-foreground用于该背景上的文字/图标。常用变量一览变量用途--background/--foreground页面背景与默认文字--card/--card-foreground卡片表面--primary/--primary-foreground主按钮与主要操作--secondary/--secondary-foreground次级操作--muted/--muted-foreground弱化/禁用状态--accent/--accent-foreground悬停与强调状态--destructive/--destructive-foreground错误与破坏性操作--border默认边框色--input表单输入边框--ring焦点环颜色--chart-1~--chart-5图表/数据可视化--sidebar-*侧边栏专属色--surface/--surface-foreground次级表面在 globals.css 中可以看到 Comp AI CRM 的实际取值主色--primary: #006b4f品牌绿、破坏色--destructive: #ae2e24、焦点环--ring: #006b4f并额外扩展了--success、--warning、--info、--severity-*、--code-*、--tag等业务语义变量。4.2 OKLCH 色彩空间规范推荐的变量格式为 OKLCH--primary: oklch(0.205 0 0)三个值分别表示亮度0–1、色度0 为灰色与色相0–360。OKLCH 相比 HEX/RGB 在明度感知上更均匀便于人工推导亮暗两套变量。注意 Comp AI CRM 的globals.css同时混用了 HEX如#006b4f与 OKLCH如--success: oklch(0.55 0.13 150)二者均可正常消费。4.3 暗色模式接入采用 class 策略在根元素上切换.dark类。Next.js 项目使用next-themes的ThemeProviderimport { ThemeProvider } from next-themes ThemeProvider attributeclass defaultThemesystem enableSystem {children} /ThemeProvider仓库的 packages/ui/src/styles/globals.css 中.dark块重新定义了全部变量如--background: #0f0f0f、--ring: #40be96配合custom-variant dark即可在任意位置使用dark:变体。4.4 应用预设主题与直接改变量# 从 ui.shadcn.com 应用预设代码 npx shadcnlatest apply --preset a2r6bw # 位置参数简写 npx shadcnlatest apply a2r6bw # 切换到命名预设并覆盖已有组件 npx shadcnlatest apply --preset nova # 保留现有组件、仅应用预设 npx shadcnlatest init --preset nova --force --no-reinstall # 使用自定义主题 URL npx shadcnlatest apply --preset https://ui.shadcn.com/init?baseradixstylenovathemeblue...也可以直接编辑globals.css中的 CSS 变量实现换肤。4.5 添加自定义颜色Tailwind v4 / v3新增颜色时必须写入npx shadcnlatest info显示的tailwindCssFile通常即globals.css不要新建 CSS 文件。三步走/* 1. 在全局 CSS 中定义变量 */ :root { --warning: oklch(0.84 0.16 84); --warning-foreground: oklch(0.28 0.07 46); } .dark { --warning: oklch(0.41 0.11 46); --warning-foreground: oklch(0.99 0.02 95); }/* 2a. Tailwind v4通过 theme inline 注册 */ theme inline { --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); }若tailwindVersion为v3用npx shadcnlatest info确认则在tailwind.config.js中注册module.exports { theme: { extend: { colors: { warning: oklch(var(--warning) / alpha-value), warning-foreground: oklch(var(--warning-foreground) / alpha-value), }, }, }, }// 3. 在组件中使用 div classNamebg-warning text-warning-foregroundWarning/div4.6 圆角与组件级定制--radius全局控制圆角rounded-lg取var(--radius)rounded-md取calc(var(--radius) - 2px)。Comp AI CRM 中--radius: 5pxglobals.css并在theme inline中派生出--radius-sm: 4px、--radius-lg: 8px、--radius-xl: 12px等梯度。组件级定制按四档优先级递进内置变体Button variantoutline sizesmClick/ButtonclassName 传布局类Card classNamemx-auto max-w-md.../Card新增 cva 变体编辑组件源码// components/ui/button.tsx warning: bg-warning text-warning-foreground hover:bg-warning/90,包装组件将 shadcn/ui 原语组合为高层组件export function ConfirmDialog({ title, description, onConfirm, children }) { return ( AlertDialog AlertDialogTrigger asChild{children}/AlertDialogTrigger AlertDialogContent AlertDialogHeader AlertDialogTitle{title}/AlertDialogTitle AlertDialogDescription{description}/AlertDialogDescription /AlertDialogHeader AlertDialogFooter AlertDialogCancelCancel/AlertDialogCancel AlertDialogAction onClick{onConfirm}Confirm/AlertDialogAction /AlertDialogFooter /AlertDialogContent /AlertDialog ) }五、组件升级与变更审查shadcn 组件以源码形式存在于项目中升级前先做差异审查# 查看某个组件相对最新注册表是否有差异 npx shadcnlatest add button --diff # 预演只列出会受影响的所有文件 npx shadcnlatest add button --dry-run # 查看单个文件的差异 npx shadcnlatest add button --diff button.tsx--dry-run与--diff组合可以在真正写入前精确预览变更范围配合 SKILL.md 中描述的智能合并smart merge工作流使用。六、落地实践与验收清单在 Comp AI CRM 中这套规范由 shadcn skill见 .agents/skills/shadcn/SKILL.md驱动对 Agent 生成代码与人工评审同样生效。最终验收可以对照这份清单逐条过页面/组件背景与文字全部使用bg-background、text-foreground等语义 token无bg-blue-500类原始色状态指示涨跌、在线、错误使用 Badge 变体或text-destructive无text-green-500类原始色Button 等组件优先查variant/size表无手搓边框悬停背景的组合类className中只有布局类max-w-*、mx-auto、mt-*无颜色/排版覆盖无space-x-*/space-y-*全部为flex gap-*等宽高元素使用size-*无w-10 h-10溢出省略统一truncate无dark:bg-*、dark:text-*手动覆盖条件类均通过cn()合并crm/ui/lib/utils无模板字符串三元Dialog/Sheet/Popover 等浮层无手动z-*思考中…等效果使用shimmer滚动边缘渐隐使用scroll-fade-*无自定义keyframes。遵循上述规则后你的组件将天然获得主题一致、亮暗自适应、动效统一、升级无痛四重保障——这正是 Comp AI CRM 全站 UI见 packages/ui/src/components 下 70 组件能够保持视觉一致性的底层原因。赞分享后端前端CRM人工智能AI Agent【免费下载链接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.项目地址https://gitcode.com/gh_mirrors/crm48/crm点击查看免费下载相关推荐Comp AI CRM 中的 AI Elements基于 shadcn/ui 的 AI 聊天界面组件库实战指南Comp AI CRM 中的 AI Elements基于 shadcn/ui 的 AI 聊天界面组件库实战指南 本指南围绕 Comp AI CRM 仓库中锁定后端前端CRM人工智能AI Agentinbox-zero 前端 UI 组件与样式开发指南基于 Shadcn UI、Radix UI 与 Tailwind 的组件规范实践inbox zero 前端 UI 组件与样式开发指南基于 Shadcn UI、Radix UI 与 Tailwind 的组件规范实践 本文是 inbox ze人工智能AI 应用后端前端gVisor 与 Knative 集成让 Kubernetes 上的 Serverless 工作负载运行在 gVisor 沙箱中gVisor 与 Knative 集成让 Kubernetes 上的 Serverless 工作负载运行在 gVisor 沙箱中 本文基于 gVisor 仓库后端前端CRM人工智能AI Agent上一篇如何用MoocDownloader高效下载中国大学MOOC课程离线学习的终极解决方案下一篇深度解析Windows内核级硬件信息欺骗技术的3种实现机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考