后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载Tremor 是一套基于 React 与 Tailwind CSS 的开源数据可视化组件库由兼具设计与工程背景的数据科学家维护可以让你以搭积木的方式快速拼装出专业的 Dashboard。本文基于 RedwoodJS 官方 how-to 文档完整演示从零创建项目、安装 Tremor、配置 Tailwind CSS、生成页面与组件到用Grid/Col/Card/AreaChart布局图表、用Metric/ProgressBar/BadgeDelta组装 KPI 卡片的全过程并深入仓库源码揭示yarn rw setup ui tailwindcss背后究竟帮你做了什么最后给出借助 RedwoodJS Cell GraphQL Prisma 将静态仪表盘升级为动态仪表盘的路线图。Tremor 与 RedwoodJS 的契合点RedwoodJS 是一个全栈框架一个项目即是一个包含api与web两个 workspace 的 monorepo而 Tremor 的模块化组件图表、卡片、指标、进度条等与 Tailwind CSS 的 utility-first 理念天然契合。把 Tremor 装进 RedwoodJS 的webworkspace你既能享受 Tremor 的开箱即用组件又能复用 RedwoodJS 的页面路由、Cell 数据获取与 GraphQL 服务层快速产出“静态骨架 动态数据”的仪表盘应用。第一步创建 RedwoodJS 项目在终端中创建一个全新的 TypeScript 项目yarn create redwood-app my-project --ts如果只想用 JavaScript省略--ts标志即可如果已经有一个 RedwoodJS 项目可以跳过这一步直接进入下一节官方强烈建议使用yarn而非 npm因为 RedwoodJS 是包含api和web两个 workspace 的 monorepo后续安装 Tremor 等 web 端依赖都需要借助 yarn workspaces 完成。第二步用 setup 命令配置 Tailwind CSSTremor 依赖 Tailwind CSS 提供样式能力因此先执行 RedwoodJS 内置的 UI 设置命令yarn rw setup ui tailwindcss这一步会安装 TailwindCSS、其 peer 依赖PostCSS 等并生成tailwind.config.js文件。源码层面这条命令到底做了什么从仓库源码 packages/cli/src/commands/setup/ui/libraries/tailwindcss.js 可以看到该命令由一组 Listr 任务构成实际行为远比“生成一个配置文件”丰富安装项目级依赖向根目录安装prettier-plugin-tailwindcss^0.5.12用于按 Tailwind 官方规则自动排序 class安装 web 端依赖通过yarn workspace web add -D安装postcss、postcss-loader、tailwindcss^3.4.17、autoprefixer注意本仓库中 Tailwind 被锁定在 3.x 版本线生成 PostCSS 配置写入web/config/postcss.config.js基于 postcss.config.js.template若已存在且未传--force会报错初始化 Tailwind执行yarn tailwindcss init生成web/config/tailwind.config.js并把默认的content: []替换为content: [src/**/*.{js,jsx,ts,tsx}]即让 Tailwind 扫描 web 源码目录注入 CSS 指令在web/src/index.css顶部写入tailwind base;、tailwind components;、tailwind utilities;三条指令若已存在则跳过更新 scaffold.css询问是否用 Tailwind 版样式覆盖web/src/scaffold.css脚手架生成的表单样式不存在该文件时自动跳过VS Code 体验优化推荐安装 PostCSS Language Support 与 Tailwind CSS IntelliSense 两个扩展并向.vscode/settings.json合并tailwindCSS.classAttributes包含class、className、activeClassName、errorClassName让 Tailwind IntelliSense 能识别 Redwood 特有的 className 属性Prettier 集成在prettier.config.js中写入tailwindConfig指向与prettier-plugin-tailwindcss插件。这些任务在 packages/cli/src/commands/setup/ui/tests/tailwindcss.test.ts 中都有对应测试覆盖例如“install: false时跳过安装”“index.css 已有指令时跳过写入”“不使用 VS Code 时跳过扩展配置”等可以据此验证上述行为。如果重复执行设置命令可用--force别名-f覆盖既有配置用--install false别名-i跳过依赖安装。第三步在 web workspace 中安装 Tremor 与 Heroiconsyarn workspace web add tremor/react yarn workspace web add heroicons/react1.0.6tremor/react是 Tremor 的 React 组件库本体heroicons/react提供图标文档明确指定1.0.6这个版本号安装时请保持版本一致以避免兼容性问题之所以用yarn workspace web add是因为 Tremor 属于 web 端组件只应出现在webworkspace 的依赖中。第四步更新 Tailwind 配置以包含 Tremor 模块打开web/config/tailwind.config.js在content数组中追加 Tremor 的源码路径/** type {import(tailwindcss).Config} */ module.exports { content: [ src/**/*.{js,jsx,ts,tsx}, ../node_modules/tremor/**/*.{js,ts,jsx,tsx}, ], theme: { extend: {}, }, plugins: [], }第一项src/**/*.{js,jsx,ts,tsx}是 setup 命令自动写入的用于扫描你自己的页面与组件第二项是手动追加的 Tremor 模块路径Tailwind 的content扫描器需要读取 Tremor 源码里的 class 名才能生成对应的工具类遗漏这一步会导致 Tremor 组件样式缺失注意路径前缀是../因为webworkspace 位于项目根目录的子目录中node_modules提升到了仓库根层级所以要从web/config/的位置回溯一级才能找到它。第五步生成 Dashboard 页面并绘制面积图生成页面与路由yarn rw g page dashboard /执行后你会得到新页面文件web/src/pages/DashboardPage/DashboardPage.tsxweb/src/Routes.tsx中自动新增一条路由// web/src/Routes.tsx Route path/ page{DashboardPage} namedashboard /命令末尾的/表示把该页面挂载在应用根路径上访问首页即可看到仪表盘。编写含面积图的 Dashboard 页面用 Tremor 的Grid、Col、Card、Title、AreaChart组件以及 RedwoodJS 的MetaTags组装页面import { Grid, Col, Card, Title, AreaChart } from tremor/react import { MetaTags } from redwoodjs/web const DashboardPage () { const chartdata [ { date: Jan 22, SemiAnalysis: 2890, The Pragmatic Engineer: 2338, }, { date: Feb 22, SemiAnalysis: 2756, The Pragmatic Engineer: 2103, }, { date: Mar 22, SemiAnalysis: 3322, The Pragmatic Engineer: 2194, }, { date: Apr 22, SemiAnalysis: 3470, The Pragmatic Engineer: 2108, }, { date: May 22, SemiAnalysis: 3475, The Pragmatic Engineer: 1812, }, { date: Jun 22, SemiAnalysis: 3129, The Pragmatic Engineer: 1726, }, ] const dataFormatter (number: number) { return $ Intl.NumberFormat(us).format(number).toString() } return ( div classNamem-12 MetaTags titleDashboard descriptionDashboard page / h1 classNametext-2xl mb-12Dashboard/h1 Grid numCols{1} numColsSm{2} numColsLg{3} classNamemy-8 gap-6 Col numColSpan{1} numColSpanLg{3} Card TitleNewsletter revenue over time (USD)/Title AreaChart classNameh-72 mt-4 data{chartdata} indexdate categories{[SemiAnalysis, The Pragmatic Engineer]} colors{[indigo, green]} valueFormatter{dataFormatter} / /Card /Col /Grid /div ) } export default DashboardPage关键点解读Grid是响应式栅格容器numCols{1}移动端 1 列、numColsSm{2}小屏 2 列、numColsLg{3}大屏 3 列通过 className 追加gap-6控制间距Col定义单个单元格的跨列数numColSpan{1}为默认 1 列numColSpanLg{3}表示大屏下让图表区横跨整行AreaChart的核心 propsdata为数据数组、index指定 X 轴字段这里是date、categories指定要绘制的数值字段列表、colors指定每条序列的颜色、valueFormatter自定义数值格式化dataFormatter使用Intl.NumberFormat把数字格式化为美元金额AreaChart的 Y 轴刻度会自动调用它MetaTags来自redwoodjs/web为页面注入title与description等文档头信息。第六步创建可复用的 KPI Card 组件生成组件骨架yarn rw g component KpiCard命令会生成web/src/components/KpiCard/KpiCard.tsx默认导出同名的 React 组件。RedwoodJS 的组件生成器会把组件放在web/src/components/下的同名目录中这也正是页面中通过src/components/KpiCard/KpiCard引用它的原因。用 Tremor 组件组装 KPI 卡片// /web/src/components/KpiCard/KpiCard.tsx import { BadgeDelta, DeltaType, Card, Flex, Metric, ProgressBar, Text, } from tremor/react export type Kpi { title: string metric: string progress: number metricTarget: string delta: string deltaType: DeltaType } interface Props { kpi: Kpi } const KpiCard ({ kpi }: Props) { return ( Card classNamemax-w-lg Flex alignItemsstart div Text{kpi.title}/Text Metric{kpi.metric}/Metric /div BadgeDelta deltaType{kpi.deltaType}{kpi.delta}/BadgeDelta /Flex Flex classNamemt-4 Text classNametruncate{${kpi.progress}% (${kpi.metric})}/Text Text{kpi.metricTarget}/Text /Flex ProgressBar percentageValue{kpi.progress} classNamemt-2 / /Card ) } export default KpiCard组件职责拆解CardTremor 的基础容器自带默认的圆角、边框与阴影样式classNamemax-w-lg通过 Tailwind 工具类限制卡片宽度并配合外层布局实现居中Flex弹性布局组件第一行用alignItemsstart让标题/指标与角标顶部对齐第二行通过mt-4与truncate对齐进度文案Text与Metric分别用于次要文字与主指标数字形成“标题 大数字”的视觉层级BadgeDeltaDeltaType右上角的涨跌徽章deltaType决定徽章的颜色语义如increase、moderateIncrease、moderateDecrease等由 Tremor 导出的DeltaType联合类型约束ProgressBar用percentageValue渲染目标达成进度条为纯数字指标补充上下文导出的Kpi类型把“一张 KPI 卡片需要的数据”固化下来便于后续从 GraphQL 查询结果直接映射。第七步把 KPI 卡片组装进 Dashboard先导入组件与类型import KpiCard from src/components/KpiCard/KpiCard // Import the KpiCard component import type { Kpi } from src/components/KpiCard/KpiCard // Import the Kpi type再准备示例 KPI 数据const kpis: Kpi[] [ // Create some sample KPI data { title: Sales, metric: $ 12,699, progress: 15.9, metricTarget: $ 80,000, delta: 13.2%, deltaType: moderateIncrease, }, { title: Profit, metric: $ 45,564, progress: 36.5, metricTarget: $ 125,000, delta: 23.9%, deltaType: increase, }, { title: Customers, metric: 1,072, progress: 53.6, metricTarget: 2,000, delta: 10.1%, deltaType: moderateDecrease, }, ]然后在Grid中迭代渲染每个 KPI 占一列图表继续独占一行{ kpis.map((kpi, i) ( Col key{i} numColSpan{1} KpiCard kpi{kpi} / /Col )) }完整的 Dashboard 页面把以上片段合并最终页面如下import { Grid, Col, Card, Title, AreaChart } from tremor/react import { MetaTags } from redwoodjs/web import KpiCard from src/components/KpiCard/KpiCard // Import the KpiCard component import type { Kpi } from src/components/KpiCard/KpiCard // Import the Kpi type const DashboardPage () { const chartdata [ { date: Jan 22, SemiAnalysis: 2890, The Pragmatic Engineer: 2338, }, { date: Feb 22, SemiAnalysis: 2756, The Pragmatic Engineer: 2103, }, { date: Mar 22, SemiAnalysis: 3322, The Pragmatic Engineer: 2194, }, { date: Apr 22, SemiAnalysis: 3470, The Pragmatic Engineer: 2108, }, { date: May 22, SemiAnalysis: 3475, The Pragmatic Engineer: 1812, }, { date: Jun 22, SemiAnalysis: 3129, The Pragmatic Engineer: 1726, }, ] const kpis: Kpi[] [ // Create some sample KPI data { title: Sales, metric: $ 12,699, progress: 15.9, metricTarget: $ 80,000, delta: 13.2%, deltaType: moderateIncrease, }, { title: Profit, metric: $ 45,564, progress: 36.5, metricTarget: $ 125,000, delta: 23.9%, deltaType: increase, }, { title: Customers, metric: 1,072, progress: 53.6, metricTarget: 2,000, delta: 10.1%, deltaType: moderateDecrease, }, ] const dataFormatter (number: number) { return $ Intl.NumberFormat(us).format(number).toString() } return ( div classNamem-12 MetaTags titleDashboard descriptionDashboard page / h1 classNamemb-12 text-2xlDashboard/h1 Grid numCols{1} numColsSm{2} numColsLg{3} classNamemy-8 gap-6 {kpis.map((kpi, i) ( Col key{i} numColSpan{1} KpiCard kpi{kpi} / /Col ))} Col numColSpan{1} numColSpanLg{3} Card TitleNewsletter revenue over time (USD)/Title AreaChart classNamemt-4 h-72 data{chartdata} indexdate categories{[SemiAnalysis, The Pragmatic Engineer]} colors{[indigo, green]} valueFormatter{dataFormatter} / /Card /Col /Grid /div ) } export default DashboardPage布局效果大屏上第一行是三张并排的 KPI 卡片Sales / Profit / Customers第二行是横跨整行的 Newsletter 营收面积图两条序列SemiAnalysis 与 The Pragmatic Engineer分别以 indigo、green 着色。启动开发服务器验证yarn rw dev命令会同时启动 web 与 api 两个开发服务器。浏览器打开首页后应能看到标题为 “Dashboard” 的页面顶部三张 KPI 卡片下方是带两条数据序列的 “Newsletter revenue over time (USD)” 面积图。至此你已经完成了第一个静态数据驱动的仪表盘。下一步让仪表盘动态化当前示例中的数据chartdata与kpis都是写死在页面里的静态数据。要让仪表盘真正“活”起来官方推荐的进阶路径是探索更多组件Tremor 还提供了大量图表如柱状图BarChart、折线图LineChart、漏斗图、仪表盘Gauge等以及可直接复用的 Blocks 布局按需引入即可扩展仪表盘的表达力用 RedwoodJS Cell 对接 GraphQL参考 RedwoodJS 的 Cells 文档把KpiCard与AreaChart的静态数据替换为 Cell 查询结果。Cell 约定XxxCell.tsx导出QUERY、Loading、Empty、Failure、Success等模块天然适配“加载中 / 空态 / 失败 / 成功”四种仪表盘状态用 Prisma Service 提供真实数据在api侧用 Prisma 定义数据模型参考 Services 文档 编写查询逻辑并通过 GraphQL 文档 中的 SDL 暴露给前端。仓库中对应示例应用redwoodjs-tremor-dashboard-demo正是用 RedwoodJS Cell 从 Prisma 支撑的数据库经 GraphQL 取数渲染动态仪表盘并提供了可在线体验的演示站点。小结本指南完整走通了“RedwoodJS Tremor”搭建仪表盘的链路yarn create redwood-app创建全栈项目 →yarn rw setup ui tailwindcss一键配置 Tailwind仓库源码显示它还会顺带处理 PostCSS、VS Code 插件推荐、Prettier 排序插件与 scaffold.css 迁移→ 在webworkspace 安装tremor/react与指定版本的 heroicons → 更新tailwind.config.js的content扫描路径 → 用生成器产出页面与组件再用Grid/Col完成响应式布局、Card/AreaChart承载图表、Metric/ProgressBar/BadgeDelta呈现 KPI。静态版只需不到一百行 JSX动态版则可无缝接入 RedwoodJS 的 Cells、GraphQL 与 Prisma让仪表盘从“数据展示”升级为“数据产品”。赞分享后端前端Web框架开发工具【免费下载链接】redwoodRedwoodGraphQL项目地址https://gitcode.com/gh_mirrors/re/redwood点击查看免费下载相关推荐在 RedwoodJS 中用 Tremor 快速构建数据仪表盘Dashboard实战指南在 RedwoodJS 中用 Tremor 快速构建数据仪表盘Dashboard实战指南 导读 本指南基于 RedwoodJS 官方文档 Build Das后端前端Web框架开发工具使用 Tremor 在 RedwoodJS 中快速构建数据仪表盘Dashboard实战指南使用 Tremor 在 RedwoodJS 中快速构建数据仪表盘Dashboard实战指南 Tremor 是一套开源的 React 数据可视化组件库专为后端前端Web框架开发工具RedwoodJS 实战用 Tremor 快速搭建数据可视化 DashboardRedwoodJS 实战用 Tremor 快速搭建数据可视化 Dashboard 本篇指南以 RedwoodJS 官方 How to 文档 docs/doc后端前端Web框架开发工具上一篇暗黑破坏神3终极自动化助手10分钟掌握D3keyHelper完整使用指南下一篇网盘直链下载助手免费解析 9 大网盘真实直链的快速上手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考