tencent / tdesign-vue-next-starter

A starter-kit for TDesign Vue Next UI components

English | 简体中文

Introduction

TDesign Vue Next Starter is a TDesign-based developed with Vue 3, Vite, Pinia, TypeScript. 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.

Commit Specification

• Angular Convention
• Vue Style Guide

Browser Support

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

Community Versions

There are kinds of community versions of starter-kit based on TDesign Vue Next, visit community-link for more detail. If you developed a community versions of tdesign starter, please create a issue or submit a pull request to let us know 😊.

License

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

tdesign-vue-next-starter's Issues

使用按需引用插件时，运行报错

tdesign-vue-next-starter 版本

0.2.1

重现链接

No response

重现步骤

yarn add -D unplugin-vue-components unplugin-auto-import

yarn dev

期望结果

正常使用

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

多标签模式

请问后续是否有支持多标签模式的计划呢？

[Menu] tdesign-vue-next 更新至 0.10.2之后 侧边栏收起浮窗无法显示，顶部栏浮窗也无法显示

tdesign-vue-next-starter 版本

0.2.0

重现链接

https://tdesign.tencent.com/starter/vue-next/#/dashboard/base

重现步骤

官方示例
1.进入页面以后，收起左侧菜单，鼠标移入不再有弹框
2.进入页面以后，点击右上角系统设置，布局导航切换为中间顶部导航，鼠标移入顶部菜单不再有弹框

期望结果

收缩之后的弹窗能正常展示

实际结果

收缩之后的菜单弹窗overflow，无法展示

框架版本

^3.2.31

浏览器版本

Chrome( 99.0.4844.74)

系统版本

No response

Node版本

No response

补充说明

tdesign-vue-next 版本 0.10.1的时候功能算是正常，更新到0.10.2之后出现异常
翻看 tdesign-vue-next 源码变动，
menu/submenu.tsx 里 renderPopup()的渲染逻辑改写了，还有css增加了

.t-menu{
  overflow: hidden auto;
}

但是starter关于这块layouts没有跟上，导致了目前的问题

调试之后。猜测是因为MenuContent.tsx 根节点div导致了renderPopup走向和预期不一致的原因
此处进行了一些改写尝试，虽然用t-menu替换div有效，但是顶部菜单之类的布局还是存在问题，遂提出此issue

动态路由或动态菜单

希望能加入动态路由，这样可以根据不同角色用户显示不同的菜单

配置路由的文档和代码不匹配

进入开发
"修改 src/config/routes/js 文件"这个文件不存在

全面基于CSS Token改造

这个功能解决了什么问题

Starter项目此前基于less的方案做了一些定制的样式，同时掺杂了不少过渡阶段的代码，配合接下来TDesign的整体设计，包括主题生成器等功能，需要将整体方案都切换到基于CSS Token来做。

你建议的方案是什么

1. 移除目前掺杂在代码中的TDesign的less文件
2. 处理组件中使用TDesign less vars的地方，改为使用CSS Token

打包报错

Describe Environment

Add browser version here

Describe the bug
运行pnpm build 打包报错，日志如下

$ pnpm build

                              ~~~~~~~~~~~~~~~~~~~~~~~~

src/pages/list/card/index.vue:63:28 - error TS2307: Cannot find module 'tdesign-icons-vue-next' or its corresponding type declarations.

63 import { SearchIcon } from 'tdesign-icons-vue-next';
                              ~~~~~~~~~~~~~~~~~~~~~~~~

src/pages/list/card/components/Card.vue:65:8 - error TS2307: Cannot find module 'tdesign-icons-vue-next' or its corresponding type declarations.

65 } from 'tdesign-icons-vue-next';
          ~~~~~~~~~~~~~~~~~~~~~~~~

src/pages/list/base/index.vue:70:28 - error TS2307: Cannot find module 'tdesign-icons-vue-next' or its corresponding type declarations.

70 import { SearchIcon } from 'tdesign-icons-vue-next';
                              ~~~~~~~~~~~~~~~~~~~~~~~~


Found 4 errors.

 ELIFECYCLE  Command failed with exit code 2.

Additional context

node -v
v16.13.2
pnpm -v
6.26.1
pnpm config get registry
https://registry.npmmirror.com/

[多标签Tab页] 关闭左侧，关闭其他可能导致主页标签被删除

重现链接

https://tdesign.tencent.com/starter/vue-next/#/dashboard/base

重现步骤

前提：开启多标签Tab页
【关闭左侧】：一定会把主页标签删除，在非主页标签点击右键，选择关闭左侧
【关闭其他】：在非主页标签点击邮件，选择关闭其他，会将主页标签删除

期望结果

主页标签不能被删除

Environment	Info
相关版本	-
框架版本 / 基础库版本	0.3.0
系统、浏览器	Chrome(100.0.4896.127)
Node版本	16.15.0

[vite.config.ts] base路径在生产下存在问题

tdesign-vue-next-starter 版本

0.2.0

重现链接

No response

重现步骤

，随便加个动态路由页面，build完，自己本地serve ./dist 项目跑起来就知道了

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

td-starter的vite.config配置有路径问题，我用了动态路由，生产环境打包路由全错了，页面加载不出来。既然有env文件就用好，别的开源项目也没这么坑。解决方案在这里https://blog.csdn.net/xingorg/article/details/120537203

分割菜单模式，一级菜单未被点亮，搜索框的图标离边框太远

tdesign-vue-next-starter 版本

Vue Next for Web 0.12

重现链接

https://tdesign.tencent.com/starter/vue-next/#/user/index

重现步骤

切换为分割菜单模式，一级菜单未被点亮

搜索框图标离边框太远

期望结果

切换为分割菜单模式，一级菜单被点亮，但是希望不要像vue2版本一样不是很明显

vue2版本

希望能够在vue2版本基础上加深一下颜色，使得第一级菜单被点亮更加显眼

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[多标签Tab页] 启用多标签Tab页时，打开多个页签然后在浏览器地址栏刷新页签丢失

tdesign-vue-next-starter 版本

能重现

重现链接

https://github.com/Tencent/tdesign-vue-next-starter

重现步骤

第一步：设置栏启用 【使用 多标签Tab页】，复制最新配置到代码处修改为isUseTabsRouter: true；
第二步：重新加载项目，同时点击多个菜单，此时存在多个tab页签，然后到浏览器地址栏处点击刷新或地址按回车键刷新，tab页签会丢失，只剩当前页签。

期望结果

当前tab页面在浏览器地址栏刷新，不应该导致其他tab页签丢失。

实际结果

当前tab页面在浏览器地址栏刷新，其他已经打开的tab页签会丢失。

框架版本

vue 3.2.31

浏览器版本

99.0.4844.82

系统版本

win10

Node版本

v14.17.5

补充说明

1、个人推断出现此问题原因是 浏览器刷新导致 pinia中useTabsRouterStore的tabRouterList数据丢失，从而导致界面页签丢失。

菜单混合模式顶部的一级菜单没用被点亮

菜单混合模式顶部的一级菜单没用被点亮

左侧菜单Bug

重现链接

https://tdesign.tencent.com/starter/vue-next/#/list/base

重现步骤

预览官方案例时，发现的问题
1.将左侧菜单收起
2.打开基础列表页

期望结果

左侧菜单的下拉菜单不被右边表格遮盖住

实际结果

左侧菜单的下拉菜单会被右边表格遮盖住

Environment	Info
相关版本	-
框架版本 / 基础库版本	Vue
系统、浏览器	Chrome
Node版本

结果页能否加一个系统维护中

这个功能解决了什么问题

结果页能否加一个系统维护中 ，用于版本更新后再使用

你建议的方案是什么

结果页加一个系统维护中

希望默认不开启动态路由和权限这块，有需求自己加就可以了。

这个功能解决了什么问题

动态路由权限这个地方写的耦合度太高了，要改起来很麻烦，可不可以单独做成插件，觉得完全没有必要写在代码里面，写的这一块那一块的，要么明确也在一个地方，改还好找。
用户登录完成，添加路由

你建议的方案是什么

动态路由权限这个地方写的耦合度太高了，要改起来很麻烦，可不可以单独做成插件，觉得完全没有必要写在代码里面，写的这一块那一块的，要么明确也在一个地方，改还好找。
用户登录完成，添加路由

希望有权限管理，用户、角色，这样更方便上手了

首先感谢TDesign团队。
这个starter很漂亮，速度也很快。如果加上用户/角色权限管理，就更棒了。

store 目录下面的permission 文件里面restore方法

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[多标签][多标签Tab页] tab标签行未延伸到最右侧，与页面内容重合

tdesign-vue-next-starter 版本

0.2.1

重现链接

https://tdesign.tencent.com/starter/vue-next/#/form/base

重现步骤

期望结果

参考：

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[顶部导航布局]列表页层级展示问题

重现链接

https://tdesign.tencent.com/starter/vue-next/#/dashboard/base

重现步骤

设置 -> 切换为顶部导航布局模式 -> 导航悬浮查看子菜单(无背景色）

列表页层级覆盖了导航菜单

期望结果

正常展示

实际结果

展示异常

Environment	Info
相关版本	-
框架版本 / 基础库版本	Vue3
系统、浏览器	MacOS(12.0.1)、Chrome版本 98.0.4758.102（正式版本） (x86_64)
Node版本

需要添加一个指令 dev:linux

tdesign-vue-next-starter/package.json

Line 7 in 93df364

"build:test": "vite build --mode test",

在 linux 服务器上，无浏览器环境，--open 选项无法执行。

首次进入或者刷新进入任意路由出现警告

[Vue Router warn]: No match found for location with path "/detail/deploy"
首次进入或者刷新进入任意路由出现警告

Feature Request: 在脚手架自动生成的项目中自带light/dark mode切换按钮

在TDesign Web Vue Next 文档的右上角有一个 dark mode 的切换按钮，但是通过 tdesign-vue-next-starter 生成的项目中却没有这个按钮。希望能够在初始化的项目中添加这个组件。

左侧菜单优化建议

当左侧菜单路由的children.length 为1的时候，目前是显示为二级菜单，只显示一级是否会更好一点。

[Bug][Table]背景是列表页面时，菜单显示层次错误

tdesign-vue-next

You will open a bug issue at tdesign-vue-next。

Describe Environment

browser version: chrome
tdesign-vue-next version:
0.8.0

Describe the bug

Additional context

浏览器访问服务器响应头返回Content-Type: text/plain; charset=utf-8，浏览器阻止访问

Describe Environment
windows10
Add browser version here
edge浏览器
Describe the bug
A clear and concise description of what the bug is.
这边用gin框架搭的服务器，用tdesing-vue-next-starter生成的前端代码，通过gin代理访问
gin代码：

func main() {
	r := gin.Default()
	r.Static("/", "./dist")
	r.Run()
}

部分电脑访问响应头返回：Content-Type: text/plain; charset=utf-8
部分电脑访问响应头返回：Content-Type: text/javascript; charset=utf-8
当返回事text/plain时浏览器阻止访问。
Additional context
Add any other context about the problem here.

tdesign-vue-next-starter 无法回到上一个页面this.$router.back() 或者 go(-1)没有啥反应。

tdesign-vue-next-starter 版本

这个是之前写的，不知道是什么版本了

补充说明

切换菜单的时候，始终无法回到前一个路由，this.$router.back() 或者 go(-1)没有啥反应，这非常奇怪。

切换一下菜单

浏览器回退按钮没有激活

dian'ji点击也没有反应，this.$router.back()

是否提供升级方案

因为模板肯定会经常迭代，请问是否提供升级方案或者说有比较完整的修改记录来提供给使用者去修复bug或升级功能？

[Header] layouts/components/Header的style是否少写了scoped

tdesign-vue-starter 版本

"tdesign-vue-next": "~0.11.2"

重现链接

No response

重现步骤

No response

期望结果

互不影响

实际结果

样式影响了login的header样式

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

下载模板失败：Service Temporarily Unavailable

Describe Environment
node -v
v14.18.1
npm -v
6.14.15

Describe the bug
使用官网td-starter in 初始化项目时，提示下载模板失败
✖ ❗错误：下载模板失败
❗错误信息： HTTPError: Response code 503
(Service Temporarily Unavailable)

Additional context
Add any other context about the problem here.

浏览器访问服务器响应头返回Content-Type: text/plain; charset=utf-8，浏览器阻止访问

Describe Environment
windows10
Add browser version here
edge浏览器
Describe the bug
A clear and concise description of what the bug is.
这边用gin框架搭的服务器，用tdesing-vue-next-starter生成的前端代码，通过gin代理访问
gin代码：

func main() {
	r := gin.Default()
	r.Static("/", "./dist")
	r.Run()
}

部分电脑访问响应头返回：Content-Type: text/plain; charset=utf-8
部分电脑访问响应头返回：Content-Type: text/javascript; charset=utf-8
当返回事text/plain时浏览器阻止访问。
Additional context
Add any other context about the problem here.

图标无法离线使用

这个功能解决了什么问题

因为是在内网使用，无法连接外网，显示不了icon。

你建议的方案是什么

增加离线使用方式。

自定义主题色中，无法保存并使用通过色板调色选取的主题色

tdesign-vue-next-starter 版本

latest

重现链接

https://tdesign.tencent.com/starter/vue-next/#/list/base

重现步骤

1. 通过色板选择一个颜色
   
2. 点击复制配置项

{
    "showFooter": true,
    "isSidebarCompact": false,
    "showBreadcrumb": false,
    "mode": "light",
    "layout": "side",
    "splitMenu": false,
    "isFooterAside": false,
    "isSidebarFixed": true,
    "isHeaderFixed": true,
    "showHeader": true,
    "backgroundTheme": "blueGrey",
    "brandTheme": "dynamic"
}

这份配置没有关于色板颜色的配置，复制到项目中是没有办法知道刚刚选择的颜色是什么的

期望结果

支持色板自定义主题色

实际结果

色板的自定义主题色无法保存

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

需要Tab多页签支持👍

当我听说tdesign-starter，第一时间下载试用，感觉还不错，但遗憾的发现，不支持多tab页面切换
这是一种非常符合国人操作习惯的模式，希望尽快安排上
类似解决方案：https://github.com/noahlam/vue-multi-tab
预览：https://noahlam.github.io/vue-multi-tab/

富文本编辑器 - Tinymce

🚀 Tinymce 安装与使用

#18

• 在线代码：https://codesandbox.io/s/nifty-wiles-b99lnm
• 代码仓库： https://github.com/pengYYYYY/tinymce-starter

todo 使用流程......

新增权限管理相关示例代码

这个功能解决了什么问题

此issue可以讨论和跟进任意和权限管理功能相关的代码的想法

你建议的方案是什么

新增权限管理相关示例代码

[Bug][Table]更新到0.7.0后，菜单下拉与表格定位冲突

可否写个文档/视频，讲一下代码逻辑？

可否写个文档（如果录一段视频或者直播就更好了），讲一下代码逻辑？
不用太详细，只需要把代码串起来就好，顺便解释一下以此为基础的开发流程。
作为一个半吊子的vue初学者（本人是开发后端的），完全自己啃代码太吃力

[Header]loyouts/components/Header的组件，样式标识是否少写了scoped

tdesign-vue-next-starter 版本

~0.11.2

重现链接

No response

重现步骤

期望结果

login页面的header和layouts的header的样式互不影响

实际结果

影响了login页面，header组件的.operations-container样式

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

npm i tdesign-vue-next 安装过程中失败

PS F:\study\tdesign-starter> npm i tdesign-vue-next
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup [
npm WARN cleanup 'F:\study\tdesign-starter\node_modules',
npm WARN cleanup [Error: EPERM: operation not permitted, unlink 'F:\study\tdesign-starter\node_modules\dayjs\locale\is.js'] {
npm WARN cleanup errno: -4048,
npm WARN cleanup code: 'EPERM',
npm WARN cleanup syscall: 'unlink',
npm WARN cleanup path: 'F:\study\tdesign-starter\node_modules\dayjs\locale\is.js'
npm WARN cleanup }
npm WARN cleanup ]
npm WARN cleanup ]
npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! network Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xmlc\AppData\Local\npm-cache_logs\2022-04-18T03_04_44_934Z-debug-0.log

后台框架自适应移动端

这个功能解决了什么问题

新增后台框架部分的移动端自适应，在部分场景下有移动端需求，建议在现有框架基础上增加自适应。

你建议的方案是什么

新增后台框架部分的移动端自适应，在部分场景下有移动端需求，建议在现有框架基础上增加自适应。当在手机使用时，将框架菜单制作为左侧抽屉式菜单，顶部多余操作按钮不显示。内容区用户根据自己需要自己做自适应

系统设置里面切换导航布局为第二个，横板显示的时候，为什么顶部导航栏只有1级菜单，二级菜单哪去了？

tdesign-vue-starter 版本

是，最新版0.2.0 cli

另外一个问题，布局的第一个和第三个没有发现变化，侧边导航栏并没有变色

[多标签Tab页] tab不美观，与整体页面色调、样式违和

这个功能解决了什么问题

完善tab页显示效果

你建议的方案是什么

1、标签色调、高度建议调优，与整体页面框架匹配
2、已激活状态下的标签高度与未激活的标签高度保持一致
3、右键功能关闭左侧支持允许不关闭最左侧主页标签
4、目前右键功能仅支持已激活状态下标签，希望全部标签都允许右键功能

[WIP]共建计划

介绍

tdesign-vue-next-starter 为 tdesign 桌面端 starter kit 的 vue3实现。帮你快速开始搭建中后台页面。

vue2实现传送门

计划中的插件

• 富文本编辑器 #84
• markdown 编辑器
• 图片裁剪
• excel 导入导出

计划

后续我们官方会输入更多页面模版，并对现有模版进行优化。

共建

• 可以提出你需要的案例和场景，我们会进行讨论是否纳入到我们的页面模版中来。
• 可以提出你在开发中后台使用过的高频内容，比如：富文本输入组件，图片裁剪组件，流程图，等等。
• 可以提出你对当前代码实现方式的不同实现。

运行npm run build 打包不了！

You installed esbuild on another platform than the one you're currently using.
This won't work because esbuild is written with native code and needs to
install a platform-specific binary executable.

Specifically the "esbuild-darwin-arm64" package is present but this platform
needs the "esbuild-darwin-64" package instead. People often get into this
situation by installing esbuild on Windows or macOS and copying "node_modules"
into a Docker image that runs Linux, or by copying "node_modules" between
Windows and WSL environments.

If you are installing with npm, you can try not copying the "node_modules"
directory when you copy the files over, and running "npm ci" or "npm install"
on the destination platform after the copy. Or you could consider using yarn
instead which has built-in support for installing a package on multiple
platforms simultaneously.

If you are installing with yarn, you can try listing both this platform and the
other platform in your ".yarnrc.yml" file using the "supportedArchitectures"
feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
Keep in mind that this means multiple copies of esbuild will be present.

Another alternative is to use the "esbuild-wasm" package instead, which works
the same way on all platforms. But it comes with a heavy performance cost and
can sometimes be 10x slower than the "esbuild" package, so you may also not
want to do that.

安装时报错

是否计划pinia替代vuex

如今大多vue3组件都开始使用pinia替代vuex 咱们这个还用的vuex 是否考虑更换

tdesign-vue-next从0.5+版本到0.6+的指引

由于0.5+版本到0.6+版本之间进行了较大规模的类名升级，tdesign-vue-next-starter 此前中对部分样式通过类名进行了覆盖，所以如果您需要从0.5升级到0.6及往后的版本，请按照此issue所列的内容进行修改。

1. t-popup-reference 改为 t-popup__reference
2. t-radio-group-medium 改为 t-size-m
3. t-form__controls--content 改为 t-form__controls-content
4. t-layout-has-sider 改为 t-layout--with-sider
5. t-layout--sider 改为 t-layout__sider

希望后台管理系统模板能够出配套的后端代码，包含菜单权限、账号管理、角色管理、组织（部门）管理、个人中心的模板代码

这个功能解决了什么问题

能够真正做到模板下载后就可以自定义开发

你建议的方案是什么

菜单权限：涉及菜单及按钮权限新建、编辑、删除以及菜单和按钮支持内嵌和外链第三方网站
账号管理：涉及账号的新建、编辑、删除及多个角色的分配以及所属组织（部门）的分配
角色管理：涉及角色的新建、编辑、删除及可访问菜单按钮权限的分配以及删除角色后对应的账号角色重新分配问题
组织（部门）管理：涉及组织（部门）的新建、编辑、删除以及删除组织（部门）后对应的账号组织（部门）重新分配问题
个人中心：昵称、头像、真实姓名、联系电话等等的修改

升级方案

请问后期的升级方案是通过自行合并代码还是有其他更优的方案呢？

使用cli工具构建项目一直clone失败

使用官网的td-starter init命令，初始化模板时，git clone一直失败，不论vue2还是vue3。node v16.13.0