feat: 添加 Nuxt 和 Next.js 模板 - #24
Open
liweijie0812 wants to merge 2 commits into
Open
Conversation
More templates
commit: |
liweijie0812
added a commit
that referenced
this pull request
Aug 12, 2026
* feat: 添加设计预览页面
新增 design-preview.html 用于展示 TDesign 项目启动模板的示例界面，包含暗色/亮色主题切换、交互式计数器以及技术信息面板。
* feat: 按 design-preview 改造桌面端模板首页
* fix: 用 import.meta.dirname 替代 __dirname 以兼容 Vite native config loader
Vite 计划在未来主版本中将 configLoader 默认切换为 'native'，
该模式下不支持 CommonJS 的 __dirname。将全部 12 个 Vite 模板的
vite.config.ts 中 __dirname 替换为等价的 import.meta.dirname，
消除相关告警并保证模板在 Node 20.11+（engine 要求 ^20.19.0 或
>=22.12.0）下正常运行。
* feat: 为所有 Vite 模板添加 server 配置以支持 CNB 环境访问
为全部 24 个 Vite 模板的 vite.config.ts 添加 server 配置：
- host: '0.0.0.0' 监听所有网卡地址
- allowedHosts: true 允许任意 Host 访问
使模板在 CNB 平台启动后可通过外网地址访问。
* fix: 修复 design-preview 改造的 rel/target 回归与一致性细节
1. 为桌面端/chat 模板所有 target="_blank" 外链补齐 rel="noreferrer"（顶部按钮、footer、资源链接），消除反向 tabnabbing 安全风险
2. 恢复 React/Vue TSX 桌面端顶部按钮丢失的 target="_blank"（外链新窗口打开）
3. 统一各模板 resources 中依赖清单的 external: false 定义
4. 删除 4 个 Vue SFC 桌面端 Demo 中无用的 .count :deep(input) 死代码
说明：TDesign 组件类型未声明 rel/target 时，采用对象展开 {...(... as object)} 方式透传，运行时由组件透传到原生元素。
* refactor: 用 TDesign 组件能力批量替代全部模板自定义样式
按 design-preview 改造的统一要求，将桌面端/mobile/chat 36 个模板首页中的自定义样式批量替换为 TDesign 组件自带能力，减少自定义 CSS：
桌面端（tdesign-vue-next / tdesign-react）
- 技术信息列表：info-list/info-row(dt/dd) → t-descriptions / Descriptions
- 品牌分隔线：brand-divider(span) → t-divider / Divider
- 状态点：status-dot(span) → t-badge / Badge
移动端（tdesign-mobile-vue / tdesign-mobile-react）
- 技术信息列表：info-list/info-row(dl) → CellGroup + Cell(title/note)
- 状态点：status-dot → t-badge / Badge
chat 模板同步应用上述桌面端替换规则。
净减少约 640 行自定义 CSS，全部改用组件库原生能力实现，主题/布局语义保持一致。
* refactor: 用 TDesign 组件能力替代范本首页自定义样式（descriptions/divider/badge/cell）
* fix: 修正 mobile 模板依赖清单/组件文档链接跳转逻辑
在 mobile 模板的 openLink 调用中，参数名 internal 与传入的 item.external 语义相反：
- 依赖清单（internal 路由）此前被当作 external 在新窗口打开
- 组件文档（external）此前被当作 internal 用 location.assign 整页跳转
改为传入 !item.external，使依赖清单在站内跳转、组件文档在新窗口打开。
* refactor: 将 chat 模板的 ChatPanel 组件文件统一重命名为 Demo
* refactor: 将 chat demo 拆分为独立 ChatPanel 组件
将非 vike 的 chat 模板（react-chat-*、vue-chat-*、vue-chat-tsx-*）中内嵌在
Home 页面里的聊天 demo（ChatBot/Chatbot 组件）拆分为独立的 ChatPanel 组件文件，
与 vike chat 模板已有的 ChatPanel 模式保持一致。
* fix: 统一 design-preview 改造细节（构建工具名与依赖链接路径）
- 修复 mobile-vue-rsbuild / mobile-vue-rsbuild-on-demand 首页构建工具误显示为 Vite 的问题，改为 Rsbuild
- 统一 vike 模板依赖清单链接为绝对路径 /dependencies（与桌面端 vike 一致），共 8 个模板
* feat: 按 design-preview 改造 chat 模板首页
* feat: 按 design-preview 改造 mobile 模板首页
* refactor: 将交互示例组件 DemoCounter 重命名为 Demo
* refactor: 抽取 demo 交互示例为独立组件文件
* feat: 按 design-preview 改造桌面端模板首页
将 Vue SFC / Vue TSX / React 三类桌面端模板的首页按
design-preview.html 改造为交互示例 + 技术信息两栏布局，
并尽量使用 TDesign 组件（t-card/t-tag/t-button/t-link/
t-layout 等），减少自定义 CSS。涵盖 vite/rsbuild/vike
三种构建工具及 full/on-demand 引入模式。
PR-URL: #2
* refactor: 用 t-avatar 组件替代 demo-mark 自定义徽标 CSS
* refactor: avatar 反色文字改用 --td-text-color-anti 设计 Token
按 tdesign-composition 设计 Token 规范，将 24 个模板首页 t-avatar 中
写在彩色实心底上的硬编码 #fff 文字色替换为语义 Token var(--td-text-color-anti)，
消除业务样式中的裸 hex 值。
* refactor: 用 t-avatar 组件替代 demo-mark 自定义徽标 CSS
将 24 个模板首页中手写的 .demo-mark（蓝色圆角方块+T字徽标）替换为
TDesign 标准组件 t-avatar / Avatar（vue-next / react / mobile 各端）：
- Vue SFC: <span class="demo-mark"> → <t-avatar size shape="round">
- Vue TSX: 增加 import { Avatar as TAvatar }
- React: 增加 import { Avatar }
每个模板 .demo-mark 的自定义 CSS 由 11 行缩减为仅保留 margin 布局，
合计净减少约 240 行自定义 CSS，改用组件库原生能力实现徽标呈现。
视觉保持一致（通过组件 style 保留深蓝背景与白色文字）。
已对各框架代表性模板执行 typecheck/构建验证通过。
PR-URL: #4
* refactor: 移动端模板改用 TDesign 设计 token，计数器保持按钮点击交互，削减自定义 CSS
* refactor: 非移动端模板计数器从 t-input-number 改为按钮+点击次数展示（不新增自定义样式）
* refactor: 移动端计数器从 t-stepper 还原为按钮+点击次数展示
* refactor: 非移动端模板同样改用 TDesign 设计 token 并组件化计数器
按 tdesign-composition 设计 Token 规范与 ISSUE #3 方向，将 24 个非移动端模板
（Vue SFC / Vue TSX / Vue Chat / React / React Chat，含 vite/rsbuild/vike 及
on-demand 变体）的首页/示例页做与移动端 PR 一致的瘦身：
- 移除全局 style.css / Layout.css / 组件内 :root 与 [theme-mode=dark] 的
--starter-* / --dep-* 自定义变量块，业务样式统一改用 tdesign 内置 --td-*
语义 token（bg/component-border/text/brand/success/radius/shadow 等），
保留 Light/Dark 主题自动适配
- 用 t-input-number / InputNumber 组件替代手写的「减号+数字+加号」计数器
（.demo-button/.count），删除对应自定义 CSS
- 清理硬编码 hex/rgba/圆角/阴影，统一收敛到 token
- 为 on-demand（vue）与 react-chat 模板入口补引 tdesign 全局 token 样式，
保证 --td-* 变量可用
73 个文件净减少约 1500 行自定义 CSS，视觉与交互保持一致。已对 vite/rsbuild/vike
各结构代表模板 typecheck 与 build 验证通过。
* fix: 移动端依赖页 Navbar 增加返回首页按钮，解决无后退入口问题
进入 dependencies 页后 Navbar 仅显示品牌 logo 与主题切换，无返回入口，
只能滚动到页尾点击 Back to home 才能回首页。本次在 12 个移动端模板的
Dependencies 页 Navbar 左侧品牌 logo 前新增返回箭头按钮，点击即回首页。
- Vue SFC / Vue TSX / React × vite/rsbuild/vike 共 12 个模板
- 新增 ChevronLeftIcon 返回按钮（on-demand 模板经 resolver 自动引入）
- 全局样式新增 .back-button，复用 --td-* 设计 token，适配 Light/Dark
* fix: 移动模板中让 stepper 居中（包一层 flex 容器）
t-stepper 组件根节点使用 display: flex（块级），父级 .demo-card 的
text-align: center 无法使其居中。改为在 stepper 外加一层
.demo-stepper（display:flex; justify-content:center）容器，
使 12 个移动模板的计数器都水平居中，视觉与旧版计数器一致。
* refactor: 移动端模板改用 TDesign 设计 token 并组件化计数器，削减自定义 CSS
按 tdesign-composition 设计 Token 规范（tokens.md）与 tdesign-mcp-server
组件 API，对 12 个移动端模板的首页/示例页做进一步瘦身：
- 移除全局 style.css 中 :root/[theme-mode='dark'] 的自定义 --starter-* 变量，
改用 tdesign-mobile 内置 --td-* 语义 token（bg/component-border/text/brand/
success/radius/shadow/spacer 等），保留主题自动适配
- 用 t-stepper / Stepper 组件替代手写计数器（.counter/.count/.demo-button），
净删约 20 行/模板自定义 CSS
- 删除旧 cell 卡片首页残留（.workspace-section/.command-row/.actions 等）与
硬编码 hex/rgba/圆角/阴影，统一收敛到 token
- 为 on-demand（vue）与 react 模板入口引入 tdesign 全局 token 样式，保证
--td-* 变量可用（仅 16KB 全局变量文件，不含组件样式）
40 个文件净减少约 2700 行自定义 CSS，视觉与交互保持一致。12 个模板
typecheck 与 build 全部通过。
PR-URL: #5
* feat: mobile 模板导航栏对齐 PC，补充仓库、文档图标
PR-URL: #7
* fix: 移除 mobile-vue-rsbuild 模板冗余的 onlyBuiltDependencies 配置
PR-URL: #9
* refactor: 收敛 vue-chat-vike 模板样式引入到 +Layout
PR-URL: #10
* fix: 消除 react-rsbuild 模板中 import.meta.hot 的构建警告
在 Rsbuild 中定义 import.meta.hot 为 false，消除 react-router
routeModules 引用 Vite 专属 import.meta.hot 时产生的
'Accessing unknown import.meta property hot' 构建警告。
PR-URL: #15
* feat: 使用 Typography 排版组件统一 PC 与移动端模板首页文本样式
* fix: 清理切换 Typography 组件后遗留的未使用 import
* refactor: 将排版组件精简推广到全部模板，清理冗余自定义样式
延续 vue-rsbuild 与 react-vike 的精简思路，覆盖其余全部模板：
- 移除 .intro-title / .demo-card-title / .info-title 中的 letter-spacing: 0（Typography 组件无 letter-spacing，属 no-op）
- 移除 .intro-copy 中的 font-size: 14px（与组件 body-medium 默认字号一致，交由组件提供）
- 移除移动端 dependencies 页 .dependencies-hero h1 / .dependencies-kicker 的 letter-spacing: 0
保留仍需对齐 design-preview 精确尺寸的 font-size / line-height / margin 覆盖。
* refactor: 精简 vue-rsbuild 与 react-vike 模板排版组件冗余自定义样式
切换到 Typography 组件后，清理为抵消原生标签默认样式而写的冗余规则：
- 移除 .intro-title / .demo-card-title 中的 letter-spacing: 0（组件本身无 letter-spacing，属于 no-op）
- 移除 .intro-copy 中的 font-size: 14px（与组件 body-medium 默认字号一致，交由组件提供）
保留仍必须对齐 design-preview 精确尺寸的 font-size / line-height / margin 覆盖。
* feat: 使用 Typography 排版组件统一 PC 与移动端模板首页文本样式
PR-URL: #12
* refactor: 统一移动端 Dependencies 页面 Typography 使用，清理冗余样式
- 删除 12 个移动端模板 Dependencies.css 中冗余的 letter-spacing: 0
- 简化 hero 区域 kicker 结构，去掉多余 span 包裹，直接给 Typography 组件传 class 并统一 theme="primary"
- 移除 vue-tsx 模板中不再使用的 Typography 导入
与首页优化（PR #12 Typography 统一）方向保持一致。
PR-URL: #16
* refactor: 拆分 vike 模板首页 demo 交互代码到独立 Demo 组件
* refactor: 将 vike 模板首页 demo 交互代码拆分为独立 Demo 组件
将 react-vike、mobile-react-vike、vue-vike、vue-vike-on-demand、
mobile-vue-vike、mobile-vue-vike-on-demand、vue-tsx-vike、
mobile-vue-tsx-vike 这 8 个 vike 模板首页中的 demo 交互示例代码
拆分为独立的 Demo 组件文件（Demo.tsx / Demo.vue），保持与 vite
模板一致的代码组织方式。
PR-URL: #20
* fix: 修复 Vue TSX 模板 Typography 组件导入导致的 build 报错
* Merge branch 'feat/new-template' into auto/fix-vue-build-07f2
解决 PR #21 合并冲突：
- vue-tsx-vike / mobile-vue-tsx-vike 模板保留 base 分支的 Demo 组件拆分
- 修复拆分后 Demo.tsx 的 Typography 组件导入（TypographyParagraph/Title -> Paragraph/Title/Text）
- 移除 mobile 模板悬空的 aria-labelledby
* fix: 修复 Vue TSX 模板 Typography 组件导入导致的 build 报错
PR-URL: #21
* fix: 修复 React 模板 Typography 组件导致编译报错
修复 9 个 React 模板中 Typography 组件的类型错误：
- 将带 theme 的 Typography.Paragraph 改为 Typography.Text（Paragraph 不支持 theme prop）
- 移除 mobile 模板 Title 上悬空的 id 属性及 aria-labelledby
PR-URL: #23
* fix: 修复 vue-chat-vike 模板 Typography 组件导入导致的 build 报错
vue-chat-vike 模板 pages/index/+Page.vue 从 tdesign-vue-next 导入了不存在的
TypographyText/TypographyTitle 组件（正确名称为 Text/Title），导致 vue-tsc
编译报错，与之前修复的 vue-chat-tsx-vike 属于同类问题。
Ref #24
PR-URL: #25
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.