English | 简体中文
TDesign React Starter is a TDesign-based project developed with React
, Vite
. It can be customized theme configuration, and aims to provide project out-of-the-box, configuration-style middle and background projects.
- Various provided pages for develop
- Complete directory structure for develop
- Code specification configuration
- Support dark mode
- Custom theme colors
- Various space layouts
- Mock data scheme
Initialize project with our CLI tool
tdesign-starter-cli
## install tdesign-starter-cli
npm i tdesign-starter-cli@latest -g
## create project
td-starter init
## install dependencies
npm install
## set up
npm run dev
## build
npm run build
## build for test
npm run build:test
We welcome contributions to our project. Create your Issue or Submit your Pull Request.
- Fork it!
- Create your branch:
git checkout -b feat/xxxx
- Commit:
git commit -a 'feat(project): describe'
- Push:
git push origin feat/xxxx
- New Pull Request
pull request
IE / Edge |
Firefox |
Chrome |
Safari |
---|---|---|---|
Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 |
The MIT License. Please see the license file for more information.
tdesign-react-starter's People
Forkers
xiaotou-sophia sharonhelen michael-f-chen dishui1238 zhoulei0232 mouyong crazyapple1 teresard jee-zh brock999 dut3062796s wd591 nyhxiaoning oldfu chinatanjie jincheny yuugan davidzhang5 anbgsl1110 f2e-awesome-admin hujun416 feiyu0526 yuho-96 kekewind richerfu cy948 jackytse hhy5277 hello-wangpeiheng weizhanzhan derekazhang isabella232 the-redfox xunzhaotech wupeng889900 move132 yanzi475 lzhice mlgbgitlab mamh-mixed adchuihui yq979292 nanxiangscholar lijinshuai21 chengfai yaoshiai phootako630 498246578wwc go-cinch yeyihanr guandai david2zhong 2b45 miro-jian theotao94 heavenlog yinmingdong 693614965 markeluo wms3001 felixsfan ashinz peng-yin raox1ngj1ng lilweeknd wuzhouchao codingleague pot-zjc luyanvv taylorwizard superleven 34245621 arunsathiya justcoolls evanqhu amyyo kscm0308745 hypggg zhemuse ayuechuan nigel-yip-z-q alenlym kingzhongmutdesign-react-starter's Issues
切换路由时,如果路由上的 isFullPage 属性发生了变化,会导致该路由被渲染两次
tdesign-react-starter 版本
0.3.1
重现链接
No response
重现步骤
切换路由时,如果路由上的 isFullPage 属性发生了变化,会导致该路由被渲染两次
路由已经渲染完成之后,才会执行到切换路由表上配置的 isFullPage
切换会导致外部 AppContainer 发生变化,从而内容重新渲染
期望结果
路由的 Content 部分,在切换时只被渲染一次
实际结果
路由的 Content 部分,在切换时只被渲染了两次,里面用于初始化的副作用,也渲染了两次
框架版本
React
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
[layouts/components/Menu] renderMenuItems方法错误使用react hook
tdesign-react-starter 版本
0.3.1
重现链接
No response
重现步骤
动态修改renderMenuItems的参数
期望结果
菜单动态变化
实际结果
Uncaught Error: Rendered more hooks than during the previous render.
框架版本
React@18
浏览器版本
No response
系统版本
No response
Node版本
16
补充说明
No response
[base] list/base这个路由,用最新版火狐下的table组件选择框错位
tdesign-react-starter 版本
最新版cli创建的react项目
重现链接
No response
重现步骤
td-starter 初始化项目,然后选择react,运行还有用最新版火狐打开,table组件的最前面的选择框错位了。
期望结果
No response
实际结果
No response
框架版本
react 18.2
浏览器版本
Firefox最新版
系统版本
window 11
Node版本
18.19
补充说明
No response
[Style] 在 dev 环境中的样式,和 build 打包的 css 不同
tdesign-react-starter 版本
0.3.1
重现链接
https://tdesign.tencent.com/starter/react/login/index
重现步骤
通过 td-starter init
构建项目。分别执行 pnpm dev
与 pnpm build
期望结果
得到完全相同的界面
实际结果
框架版本
"tdesign-react": "^1.1.10"
浏览器版本
Chrome(126.0.6478.127)
系统版本
Windows 11
Node版本
v21.1.0
补充说明
引用顺序如下,打包后仍然有部分 index.less 中的样式会被 td-design 覆盖
// main.tsx
import 'tdesign-react/es/style/index.css';
import './styles/theme.css';
import './styles/index.less';
如何开启cors
tdesign-react-starter 版本
最新版本
重现链接
https://github.com/Tencent/tdesign-react-starter/blob/develop/vite.config.js
重现步骤
server: {
host: '0.0.0.0',
port: 5000,
open: false, // 默认是否打开浏览器
cors:true,
proxy: {
'/api': {
// 用于开发环境下的转发请求
// 更多请参考:https://vitejs.dev/config/#server-proxy
target: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
changeOrigin: true,
},
},
},
期望结果
开启cors
实际结果
No response
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
Header 栏 Badge 展示不完整
重现链接
https://stackblitz.com/edit/tdesign-react-starter
重现步骤
- 克隆项目
- yarn dev 启动预览
期望结果
Badge 展示完整
实际结果
Badge 展示不完整,被父级的 Button 掩盖了部分区域
补充说明
Badge 的定位调整
Environment | Info |
---|---|
相关版本 | - |
框架版本 / 基础库版本 | React(17.0.2) |
系统、浏览器 | Chrome |
Node版本 |
移动端有适配的打算吗?
这个功能解决了什么问题
移动端有适配的打算吗?
你建议的方案是什么
移动端有适配的打算吗?
[base] list/base这个路由,用最新版火狐打开,table组件选择框错位
tdesign-react-starter 版本
最新版cli创建的react项目
重现链接
No response
重现步骤
td-starter 初始化项目,然后选择react,运行还有用最新版火狐打开,table组件的最前面的选择框错位了。
期望结果
No response
实际结果
No response
框架版本
react 18.2
浏览器版本
Firefox最新版
系统版本
window 11
Node版本
18.19
补充说明
No response
丰富可选主题风格
这个功能解决了什么问题
在使用亮色主题时,导航使用的风格为白色风格,整体白色比较多(接近官网提供的页面模版风格:https://tdesign.tencent.com/starter/react/dashboard/base),用户吐槽刺眼
你建议的方案是什么
现在提供了亮色和夜色主题两种风格,是否可以提供一种深色主题风格,解决用户吐槽刺眼的问题
最新版本页面会闪一下Layout布局页面然后才显示全屏的页面
tdesign-react-starter 版本
0.3.1
重现链接
重现步骤
未登录的情况下,直接刷新页面,会先闪一下内部系统的布局页面,然后才显示全屏的页面,非常影响视觉体验!!!
期望结果
未登录的情况下不应该展示内部系统的布局页面!
实际结果
未登录的情况下或者直接输入url跳转页面,会闪到布局的页面
框架版本
React18.2.0
浏览器版本
Chrome
系统版本
MacOS
Node版本
18
补充说明
No response
关于动态菜单的实现的问题
tdesign-react-starter 版本
0.31
重现链接
No response
重现步骤
目前菜单是用路由中的设置,实际开发使用中菜单不是定死的,是需要按照不同权限显示不同的菜单,官方也没有说明如何实现动态菜单,实践中使用 redux 或 接口返回数据 对路由进行过滤 例如(不一定这么写只是个说明要对一些菜单进行过滤):
const allRoutes = [...routes, ...dashboard, ...list, ...form, ...detail, ...result, ...user, ...login, ...otherRoutes];
// return allRoutes.filter(c=>c.)
尝试了各种数十种办法和在Menu.tsx中也进行过滤,但凡只要汲及操作路由操作都是报错白屏,折腾一天无解. 错误主要在
renderMenuItems 中的
<SubMenu key={routerPath} value={routerPath} title={title} icon={Icon ? : undefined}>
{renderMenuItems(children, routerPath)}
这一块!求方案
期望结果
No response
实际结果
No response
框架版本
react 1.0.5
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
[tdesign] 怎么配置proxy?
这个功能解决了什么问题
不知道怎么配置proxy
你建议的方案是什么
请优化更新示例
Demo的瑕疵
tdesign-react-starter 版本
0.1.5
重现链接
https://tdesign.tencent.com/starter/react/#/dashboard/base
重现步骤
然后移动端的适配是不是也该考虑一下hhh
登录页面的移动端简直不太能看
期望结果
No response
实际结果
No response
框架版本
React
浏览器版本
Edge
系统版本
No response
Node版本
No response
补充说明
emm就demo的问题,有点挑刺的感觉,但是还是觉得是问题
祝早日修复啦~
[Table] 表格在 Safari 浏览器内容展示问题
重现链接
https://tdesign.tencent.com/starter/react/#/dashboard/base
重现步骤
打开仪表盘页面,或者本地启动,查看订单排名相关表格内容
期望结果
表格内容滚动区域,内容不被压缩
实际结果
表格第一列的名称及内容被压缩覆盖
Environment | Info |
---|---|
相关版本 | - |
框架版本 / 基础库版本 | React(17.0.2) |
系统、浏览器 | Macos(12.2.1), Safari(15.3) |
Node版本 |
https://tdesign.tencent.com/starter/vue-next/#/form/base。基础表单页 点击表单重置功能页面崩了
tdesign-react-starter 版本
0.1.0
重现链接
No response
重现步骤
https://tdesign.tencent.com/starter/vue-next/#/form/base。
基础表单页 点击表单重置功能页面崩了
期望结果
No response
实际结果
No response
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
主题颜色bug
logo 收起的时 logo 会消失一段时间
tdesign-react-starter 版本
latest
重现链接
https://tdesign.tencent.com/starter/react/#/user/index
重现步骤
点击收起展开按钮
期望结果
点击收起的只有文字消失,logo 不需要替换
实际结果
No response
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
使用npm run dev:mock失败
tdesign-react-starter 版本
develop branch code
重现链接
https://github.com/Tencent/tdesign-react-starter
重现步骤
- 克隆develop branch代码到本地
- npm install
- npm run dev:mock
期望结果
页面正常显示
实际结果
No response
框架版本
- "@types/react": "^17.0.38"
- "@vitejs/plugin-react": "^1.3.2"
浏览器版本
Microsoft Edge Version 110.0.1587.50 (Official build) (64-bit)
系统版本
Windows
Node版本
18.14.1
补充说明
No response
[菜单栏] 选择 item 后自动关闭
tdesign-react-starter 版本
0.1.0
重现链接
https://tdesign.tencent.com/starter/react/#/dashboard/base
重现步骤
- 首页展开菜单栏
- 点击子目录后菜单栏自动收起
期望结果
点击子目录后当前展开的菜单栏不自动收起
实际结果
点击子菜单后自动收起
框架版本
React(17.0.2)
浏览器版本
Chrome(99.0.4844.74)
系统版本
MacOS
Node版本
No response
补充说明
No response
[doc] 文档网站描述中出现 “不相关技术栈” 的使用说明
tdesign-react-starter 版本
最新版
重现链接
https://tdesign.tencent.com/starter/docs/react/deploy
重现步骤
打开官网链接:https://tdesign.tencent.com/starter/docs/react/deploy
React 中使用的 路由插件为 React Router
,并非 VueRouter
。
package.json:
期望结果
建议改成 将 <HashRouter>
改成 <BrowserRouter>
:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
{/* The rest of your app goes here */}
</BrowserRouter>,
root
);
参考:https://reactrouter.com/docs/en/v6/routers/browser-router
实际结果
框架版本
React 17.0.2
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
似乎文档网站并未开源,无法提 PR。
github workflows 问题请教
您好,我复用了您的 issue-assignees.temp.yml 文件,发现几个问题,想向您请教一下。
问题一:我如何才能获取到随机指定的 assignees 并添加到 steps.contributors.outputs.string 位置呢?
body: |
♥️ 有劳 ${{ steps.contributors.outputs.string }} 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @${{ github.event.issue.user.login }} 。
问题二: 编写好的脚本如何本地自测呢?
问题三: 您编写的脚本会给开发者连续发两次邮件提示,如何能合并为一个呢?
[Dropdown] Dropdown Option在缺少value的情况下,只有最后一个option的onClick事件可以生效。
tdesign-react-starter 版本
0.40.6
重现链接
https://stackblitz.com/edit/react-czjpum?file=src%2Fdemo.jsx
重现步骤
见demo链接
期望结果
每次option的onClick事件可以独立触发
实际结果
所有option的onClick事件都指向最后一个option
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
[概览仪表盘] layout _sideContainer 在1440px屏幕下存在多余的水平方向滚动
重现链接
https://tdesign.tencent.com/starter/react/#/dashboard/base
重现步骤
期望结果
不存在水平滚动
实际结果
存在水平滚动
Environment | Info |
---|---|
相关版本 | - |
框架版本 / 基础库版本 | React 17.0.2 |
系统、浏览器 | MacOS(12.0.1)、Chrome版本 98.0.4758.102(正式版本) (x86_64) |
Node版本 |
版本的分割菜单 和多标签tab页什么时候能集成到react版本中
这个功能解决了什么问题
vue 版本的分割菜单 和多标签tab页什么时候能集成到react版本中
你建议的方案是什么
请尽快支持
react版本的starter版本才0.3.vue的都0.9了。react的还在维护吗???
这个功能解决了什么问题
react的starter版本过旧
你建议的方案是什么
希望更新react的starter版本
[Form] 调用了旧的API?
tdesign-react-starter 版本
0.1.3
重现链接
tdesign-react-starter/src/pages/List/Select/components/SearchForm.tsx
Lines 21 to 29 in 21ea7a3
重现步骤
使用 Form
组件的 ref
获取表单数据
tdesign-react-starter/src/pages/List/Select/components/SearchForm.tsx
Lines 21 to 29 in 21ea7a3
期望结果
应输出表单数据
实际结果
实际输出 undefined
框架版本
React(^17.0.2)
浏览器版本
No response
系统版本
Ubuntu(20.04.3) LTS WSL
Node版本
v14.19.1
补充说明
修改为最新API后可正常使用 cy948@20dd610
[组件名称] 描述问题的标题
tdesign 版本
last
重现链接
https://tdesign.tencent.com/starter/react/#/dashboard/base
重现步骤
TDesign Starter 首页 》 销售渠道 悬停在蓝色块区域 会有文字重叠
期望结果
TDesign Starter 首页 》 销售渠道 悬停在蓝色块区域 会有文字重叠
实际结果
TDesign Starter 首页 》 销售渠道 悬停在蓝色块区域 会有文字重叠
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
[CardList] 新增卡片列表页
采用history模式路由,编译部署后运行报错
tdesign-react-starter 版本
0.1.5
重现链接
No response
重现步骤
npm run build之后,使用Nginx作为静态资源管理器。访问浏览器
期望结果
运行正常
实际结果
浏览器访问页面报错如下:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
路由采用hash模式正常
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.