GithubHelp home page GithubHelp logo

tencent / tdesign-react-starter Goto Github PK

View Code? Open in Web Editor NEW
249.0 12.0 85.0 2.36 MB

A starter-kit for TDesign React UI components

Home Page: https://tdesign.tencent.com/starter/react/

License: MIT License

JavaScript 2.25% Shell 0.06% HTML 0.58% TypeScript 84.75% Less 12.35%
react starter-kit tdesign

tdesign-react-starter's Introduction

TDesign Logo

node compatibility License

English | 简体中文

Introduction

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.

Live Preview · Documentation

Features

  • 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

Usage

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

Develop

## install dependencies
npm install

## set up
npm run dev

Build

## build
npm run build

## build for test
npm run build:test

Contributing Guide

We welcome contributions to our project. Create your Issue or Submit your Pull Request.

Pull Request

  1. Fork it!
  2. Create your branch: git checkout -b feat/xxxx
  3. Commit: git commit -a 'feat(project): describe'
  4. Push: git push origin feat/xxxx
  5. New Pull Request pull request

Commit Specification

Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Edge >=84 Firefox >=83 Chrome >=84 Safari >=14.1

License

The MIT License. Please see the license file for more information.

tdesign-react-starter's People

Contributors

94dreamer avatar ancai avatar aouos avatar ashinz avatar dependabot[bot] avatar honkinglin avatar mouyong avatar nathanboy avatar southorange0929 avatar tankwebhunger avatar uyarn avatar victorwuxz avatar xiaotou-sophia avatar xucz avatar yueveron avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tdesign-react-starter's Issues

[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

主题颜色bug

tdesign-react-starter 版本

最新版本

重现链接

No response

重现步骤

image

image

期望结果

鼠标放上之后应该还是主题的颜色

实际结果

按钮获取焦点之后,颜色变为了蓝色

框架版本

No response

浏览器版本

No response

系统版本

No response

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。

最新版本页面会闪一下Layout布局页面然后才显示全屏的页面

tdesign-react-starter 版本

0.3.1

重现链接

https://tdesign.tencent.com

重现步骤

未登录的情况下,直接刷新页面,会先闪一下内部系统的布局页面,然后才显示全屏的页面,非常影响视觉体验!!!

期望结果

未登录的情况下不应该展示内部系统的布局页面!

实际结果

未登录的情况下或者直接输入url跳转页面,会闪到布局的页面

框架版本

React18.2.0

浏览器版本

Chrome

系统版本

MacOS

Node版本

18

补充说明

No response

github workflows 问题请教

您好,我复用了您的 issue-assignees.temp.yml 文件,发现几个问题,想向您请教一下。
问题一:我如何才能获取到随机指定的 assignees 并添加到 steps.contributors.outputs.string 位置呢?

body: |
            ♥️ 有劳 ${{ steps.contributors.outputs.string }} 尽快确认问题。
            确认有效后将下一步计划和可能需要的时间回复给 @${{ github.event.issue.user.login }} 。

问题二: 编写好的脚本如何本地自测呢?
问题三: 您编写的脚本会给开发者连续发两次邮件提示,如何能合并为一个呢?

[tdesign] 怎么配置proxy?

这个功能解决了什么问题

不知道怎么配置proxy

你建议的方案是什么

请优化更新示例

关于动态菜单的实现的问题

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)}

这一块!求方案
0230401222442

期望结果

No response

实际结果

No response

框架版本

react 1.0.5

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

切换路由时,如果路由上的 isFullPage 属性发生了变化,会导致该路由被渲染两次

tdesign-react-starter 版本

0.3.1

重现链接

No response

重现步骤

切换路由时,如果路由上的 isFullPage 属性发生了变化,会导致该路由被渲染两次
路由已经渲染完成之后,才会执行到切换路由表上配置的 isFullPage
image
切换会导致外部 AppContainer 发生变化,从而内容重新渲染
image

期望结果

路由的 Content 部分,在切换时只被渲染一次

实际结果

路由的 Content 部分,在切换时只被渲染了两次,里面用于初始化的副作用,也渲染了两次

框架版本

React

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

采用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模式正常

Header 栏 Badge 展示不完整

重现链接

image

https://stackblitz.com/edit/tdesign-react-starter

重现步骤

  1. 克隆项目
  2. 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

[组件名称] 描述问题的标题

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

[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

如何开启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

Demo的瑕疵

tdesign-react-starter 版本

0.1.5

重现链接

https://tdesign.tencent.com/starter/react/#/dashboard/base

重现步骤

这里的对齐是不是没做好 用户那里明显偏高了
截屏2022-10-22 18 51 32

登录页面,是不是也该用心一点做,这里文字都遮挡了
截屏2022-10-22 18 52 47

然后移动端的适配是不是也该考虑一下hhh
登录页面的移动端简直不太能看

期望结果

No response

实际结果

No response

框架版本

React

浏览器版本

Edge

系统版本

No response

Node版本

No response

补充说明

emm就demo的问题,有点挑刺的感觉,但是还是觉得是问题
祝早日修复啦~

移动端有适配的打算吗?

这个功能解决了什么问题

移动端有适配的打算吗?

你建议的方案是什么

移动端有适配的打算吗?

[Form] 调用了旧的API?

tdesign-react-starter 版本

0.1.3

重现链接

const formRef = useRef<any>();
const onSubmit = (e: any) => {
if (e.validateResult === true) {
MessagePlugin.info('提交成功');
}
const getAllFields = formRef?.current?.getAllFieldsValue;
const queryValue = getAllFields?.();
console.log(queryValue);
};

重现步骤

使用 Form 组件的 ref 获取表单数据

const formRef = useRef<any>();
const onSubmit = (e: any) => {
if (e.validateResult === true) {
MessagePlugin.info('提交成功');
}
const getAllFields = formRef?.current?.getAllFieldsValue;
const queryValue = getAllFields?.();
console.log(queryValue);
};

期望结果

应输出表单数据

实际结果

实际输出 undefined

框架版本

React(^17.0.2)

浏览器版本

No response

系统版本

Ubuntu(20.04.3) LTS WSL

Node版本

v14.19.1

补充说明

修改为最新API后可正常使用 cy948@20dd610

使用npm run dev:mock失败

tdesign-react-starter 版本

develop branch code

重现链接

https://github.com/Tencent/tdesign-react-starter

重现步骤

  1. 克隆develop branch代码到本地
  2. npm install
  3. npm run dev:mock

浏览器报错如下
image

image

期望结果

页面正常显示

image

实际结果

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

[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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.