tencent / tdesign-common

TDesign style/utils shared by multiple frameworks repo.

TDesign 公共库

公共库包含公共样式与工具函数，各框架以子仓库的形式引入此仓库。

目录说明

|-- style // 组件库 UI 开发
  |-- web // web UI 开发
  |-- mobile // mobile UI 开发
|-- js // 组件库公用函数

UI 开发指南

参考

如何进行分支开发

分支拉取规则：网页组件使用 feature/web/_ ；移动端组件使用 feature/mobile/_ ；小程序使用 feature/mp/* 。

具体示例如下，

feature/web/button
feature/mobile/button
feature/mp/button

tdesign-common's Issues

Reporting a vulnerability

Hello!

I hope you are doing well!

We are a security research team. Our tool automatically detected a vulnerability in this repository. We want to disclose it responsibly. GitHub has a feature called Private vulnerability reporting, which enables security research to privately disclose a vulnerability. Unfortunately, it is not enabled for this repository.

Can you enable it, so that we can report it?

Thanks in advance!

PS: you can read about how to enable private vulnerability reporting here: https://docs.github.com/en/code-security/security-advisories/repository-security-advisories/configuring-private-vulnerability-reporting-for-a-repository

我想在最上一个栏目加上菜单栏目，怎么实现啊

这个功能解决了什么问题

多菜单分割，而不是一个菜单列出所有的nav

你建议的方案是什么

无

[BreadCrumb] API 文档（类型定义） typo

位置：breadcrumb -> type.ts

/**
 * 最大宽度，超出后会以省略号形式呈现。优先级高于 Breadcrum 中的 maxItemWidth
 */
maxWidth?: string;

Breadcrum 应为 Breadcrumb

⚠️ 此问题为共性问题，应该在 React、Vue 和 Vue Next 中都又出现。

[InputNumber] size 为 small，theme 为 column的情况下，右侧表现异常

tdesign-react 版本

0.29.0

重现链接

https://stackblitz.com/edit/angular-qb3htg?file=src%2Fdemo.jsx

重现步骤

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

ERROR: IE 无法获取未定义或 null 引用的属性“0”

正则匹配再IE浏览器下，matched为null 未做异常处理

tdesign-common/js/loading/circle-adapter.ts

Line 24 in a2e704a

const endColor = `rgba(${matched[0]}, ${matched[1]}, ${matched[2]}, 0)`;

[Design Token] size token 替换

这个功能解决了什么问题

size token 替换组件中的padding/width/height/margin 支持后续主题配置切换间距、边距及尺寸大小

进展

基础

• Button #982
• Icon
• Link #987

布局

• Divider #987
• Grid
• Layout #987
• Space

导航

• Affix #987
• Anchor #987
• Breadcrumb #987
• Dropdown #987
• Menu #990
• Pagination #990
• Steps #990
• Tabs #990

输入

• Cascader #993
• Checkbox #993
• ColorPicker #1018
• DatePicker #993 #1018
• Form #993
• Input #993
• InputAdornment #993
• InputNumber #993
• Radio #993
• RangeInput #1011
• Select #1011
• SelectInput #1011
• Slider #1011
• Switch #1017
• TagInput #1017
• Textarea #1017
• Transfer #1017
• TimePicker #1015
• TreeSelect
• Upload #1013

数据展示

• Avatar #1007
• Badge #1007
• Calendar #1013
• Card #1007
• Collapse #1005
• Comment #1005
• Image #1003
• ImageViewer #1003
• List #1005
• Loading #1003
• Progress #1003
• Skeleton #1003
• Swiper #1003
• Table #1003
• Tag #1003
• Timeline
• Tooltip #1003
• Tree #990
• Watermark #990
• Rate #990

消息提醒

• Alert #987
• Dialog #982
• Drawer #990
• Guide #990
• Message #983
• Notification #987
• Popconfirm #987
• Popup #1003

[提升] 建议把 submodules 里的 url 改成 https

这个功能解决了什么问题

用 ssh 还要配 ssh key，每次换新电脑都要配一次还挺麻烦的

你建议的方案是什么？

把 submodules 里的 url 改成 https

🔍 为什么你应该使用全局 Token 开发组件样式

为什么 PR review 时经常会被提醒使用 Token 变量？

很多初次贡献代码的同学，可能经常会被提醒没有正确使用 Token 变量，原因如截图中所示，如果直接 hard code 写值，后续就不能通过修改全局 Token 变量的方式，快速修改所有组件的表现。如这里所描述的 主题配置

除了截图中的 radius 圆角相关的 Token 变量，目前 TDesign 中提取的全局变量有如下几类：

• 色彩
• 文字
• 圆角
• 尺寸/间距

全局 Design Token 变量在哪里？

见 https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_index.less

注意 style/web/theme 下文件中均为命名以 --td- 开头的 CSS 变量，例如：
https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less

这里是借用了高级浏览器本身支持 CSS variables 的特性，可以达到 TDesign 组件库官网在线实时主题修改和定制的能力。

但请你不要在组件样式中直接使用 --td- 的 CSS 变量，而应该使用 https://github.com/Tencent/tdesign-common/blob/develop/style/web/_variables.less 中包装后的 Less 变量。

// Good
background-color: @brand-color;

// Bad
background-color: --td-brand-color;

// Bad
background-color: #0052d9;

不直接使用 CSS 变量而使用包了一层的 Less 变量的原因：

1. 统一风格
2. 还可以继续使用 Less 提供的更丰富的函数来做进一步的加工处理

（后续可能会统一替换为所有样式都直接使用 CSS 变量，去掉 Less 依赖，但在目前相当长的一段时间内都会是以上实现方式）

从设计稿还原时，怎样找到对应的 Token 变量

以设计师常用的 Codesign 设计稿为例（Figma 资源类似）
https://codesign.woa.com/app/design/OYDgGjYoDN0wEVQ/qxWyZ12BJJjmVXk/inspect

设计会给出如图填充背景色标注为：#0052D9

你不应当直接在组件实现代码中使用这个值，而是需要在 https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less 文件中找到对应的色板变量 --td-brand-color-7

然后找到对应的语义化的 Token --td-brand-color，最终的代码中应该使用的就是对应的 Less Token @brand-color。

为什么不能直接使用色板中的 Token？

@brand-color 和 @brand-color-7 在浅色模式下效果是一样的，因为它们的值是一样：
https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less#L69

但在暗色模式下却不是相等的：
https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_dark.less#L68

为了在浅色和暗色模式下都达到最好的展示效果，两种模式下会分别取浅色/暗色两套色板不同色阶的位置颜色，但语义化的 Token 含义是稳定的，就是 @brand-color 它表示了整个组件库的主色调。当你在组件样式中使用了 @brand-color 时，就可以在不同默认切换时自动使用最合适的色板值。

类似的还有尺寸/间距相关的 token：https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_size.less

// Good
padding: @pop-padding-m;

// Bad
padding: @size-3;

你应该也能体会到，语义化的 @pop-padding-m 可读性和可维护性都要高于看不出什么含义的 @size-3

[Tree] Tree 的改动，单侧失败也合并了，导致 3 个框架的都有问题

tdesign-common 版本

无版本

重现链接

No response

重现步骤

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

input组件的placeholder文字颜色不对

Describe Framework

tdesign-vue、tdesign-vue-next、tdesign-react

Describe Environment

Chrome 97.0.4692.99 (x86_64)

Describe the bug
input组件的placeholder文字颜色不对，目前使用的是text-color-secondary，应该要使用text-color-placeholder

滚动条的宽高应该保持一致

tdesign-common 版本

1.0.0

重现链接

tdesign-common/style/web/_global.less

Lines 13 to 26 in bcf196d

	// 统一的scrollbar
	.narrow-scrollbar {
	&::-webkit-scrollbar {
	width: 8px;
	background: transparent;
	}
	&::-webkit-scrollbar-thumb {
	border-radius: 6px;
	border: 2px solid transparent;
	background-clip: content-box;
	background-color: @scrollbar-color;
	}
	}

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[date-picker]addMonth有误

tdesign-common 版本

重现链接

https://github.com/Tencent/tdesign-common/blob/develop/js/date-picker/utils.ts#L181

重现步骤

setMonth并非单纯增加一个月。

比如

var a = new Date('2022-01-31');
a.setMonth(1);
console.log(a); // 2022-03-03

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

InputNumber 组件，聚焦状态缺少蓝色边框样式

• InputNumber 聚焦时，缺少蓝色边框
• InputNumer 禁用时，文本颜色和其他组件不一样

[mobile/cell] 图标颜色与标题文字颜色不一致

tdesign-common 版本

latest

重现链接

Tencent/tdesign-mobile-react#178

重现步骤

Tencent/tdesign-mobile-react#178

tdesign-mobile-react cell

期望结果

图标颜色与标题一致

实际结果

图标颜色与标题不一致

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

使用子仓库方式引入的考量是什么

为啥不考虑npm package

[tree] tree setData 拦截参数错误

tdesign-common 版本

是

重现链接

No response

重现步骤

Tencent/tdesign-vue-next#1205

修复这个 issue 时对进行了 setData 更改，拦截了除 label 和 value 之外的参数以避免由于传参错误出现程序崩溃的问题。
但是这里的拦截不应该是仅仅获取 label 和 value，因为 label 和 value 是可配置的，仅获取 label 和 value 是存在问题的。

仅获取 label 和 value 间接导致了这个问题： #652

目前的做法如下，是存在问题的

    setData(data: OptionData) {
      const _data = pick(data, ['label', 'value']);
      Object.assign(node.data, _data);
      Object.assign(node, _data);
    },

重新整理

这里来捋一下：

1. setData 的目的
   改变本节点的数据

2. 如何实现的
   现在的代码将 data 和 node.data 和 node 做了 assign

    setData(data: OptionData) {
      Object.assign(node.data, data);
      Object.assign(node, data);
    },

3. 存在的风险

• 如果 data 中包含 children，那么就会导致树在重渲染时崩溃，如上 issue
• 暂未可知的风险，因为 data 可以直接修改 node 的数据，树又是使用 node 进行渲染，所有有可能出现无意更改了不可更改的数据

4. 如何解决

• 方案一
  先解决问题：先对 data 做一个拦截，把可预见的参数(目前是 children)拦截掉，如下：

    setData(data: OptionData) {
      const _data = omit(data, ['children']);
      Object.assign(node.data, _data);
      Object.assign(node, _data);
    },

• 方案二（和 @PengYYYYY 沟通）
  依旧是先解决问题：对data 进行拦截，同样是拦截 children，只是看是否能针对 children 中的元素做拦截，而不是直接拦截 children，原因如下：

  1. node.setData 理论是带有子节点的，所以用户传 children 对 node 进行修改也是合理的
  2. 之前 issue 问题的根本是因为 children 的元素不是 treeNode

  所以看是否可以这样做，如果children不是treeNode,就把它过滤掉对应的元素

最终选择方案

讨论后选择方案一

为什么不选择方案二：
按照现在暴露的api和数据，用户根本获取不到 treeNode，所以确实无法判断。

[Locale] 新加个俄语

这个功能解决了什么问题

新加俄语

你建议的方案是什么

新加俄语

timepicker 组件自定义快捷标签

这个功能解决了什么问题

timepicker 组件，无法像datepicker一样支持快捷标签的功能

你建议的方案是什么

timepicker 组件，支持开放自定义快捷标签插槽让用户可以自定义快捷标签

[Jumper] 内置文案国际化

这个功能解决了什么问题

Jumper组件内置文案国际化支持

你建议的方案是什么

Jumper组件内置文案国际化支持

【Mobile：Fab】组件示例文档翻译

总体目标

• 将 docs/mobile/api_v2 文件夹下的 xx.en-US.md 等文件翻译成英文

翻译示例

• 将 xx.en-US.md 文档的中文内容翻译成英文
• 以 Button 为例

验收标准

• 翻译正确，合入仓库

IssueShoot

• 预估时长: 1
• 期望完成时间: 2023-07-03 00:00:00 +0000 UTC
• 开发难度: 低
• 参与人数: 1
• 验收标准: 实现期望改造效果，提 PR 并通过验收无误
• 备注: 最终激励以实际提交 pull request 并合并为准

mobile badge less

描述

tdesign-common/style/mobile/components/badge/_index.less

Line 30 in 0c1d4d4

transform: translate(50%, -50%);

tdesign-common/style/mobile/components/badge/_index.less

Line 44 in 0c1d4d4

transform: translate(50%, -50%) scale(.75);

tdesign-common/style/mobile/components/badge/_index.less

Line 64 in 0c1d4d4

transform: rotate(45deg);

badge 组件当前使用 transform 用于 size的调整，ribbon的旋转，以及has-children样式。
这么写的 transform 是复合属性，样式层叠属性之间设置是冲突的。

行为是否合理？

期望

不冲突

现在的情况

冲突

文档翻译

这个功能解决了什么问题

官网文档示例和设计指南部分的翻译工作

你建议的方案是什么

参照现有 Button 目录，增加 xx.en-US.md 文件，根据已有中文文档进行翻译工作，参见：https://github.com/Tencent/tdesign-common/blob/develop/docs/web/api/button.en-US.md

请在 issue 评论区说明自己想要认领的组件，并尽早提交 PR

验证方式：在本仓库 (tdesign-common) 提交 PR 后，请在 tdesign-vue 也发起一个 PR，CI 全部通过后会有机器人评论本次 PR 合入后官网的预览地址：Tencent/tdesign-vue#1408

以已完成的 Button 为例，访问官网地址 https://tdesign.tencent.com/vue/components/button-en 可以查看到官网切换到英文时的效果：

组件认领列表：

基础

• button- #472
• divider @vapourma
• icon @vapourma

布局

• grid @vapourma
• layout @vapourma

导航

• affix @Tomaolala
• anchor @Tomaolala
• breadcrumb @GolderBrother
• dropdown @GolderBrother
• menu @GolderBrother
• pagination @GolderBrother
• steps @vapourma
• tabs @yangchao987

输入

• cascader @GolderBrother
• checkbox @GolderBrother
• color-picker @GolderBrother
• date-picker @GolderBrother
• form @GolderBrother
• input @yangchao987
• input-number @GolderBrother
• radio @yangchao987
• select @GolderBrothe
• select-input @GolderBrother
• slider @GolderBrother
• switch @GolderBrother
• tag-input @GolderBrother
• textarea @GolderBrother
• transfer @GolderBrother
• time-picker @GolderBrother
• tree-select@GolderBrother
• upload @GolderBrother

数据展示

• avatar @Tomaolala
• badge @vapourma
• calendar @vapourma
• card @yangchao987
• collapse @vapourma
• comment @vapourma
• list @vapourma
• loading @xiaosansiji
• progress @vapourma
• skeleton @vapourma
• swiper @vapourma
• table @vapourma
• tag @vapourma
• tooltip@vapourma
• tree@vapourma

消息提醒

• alert @Tomaolala
• dialog @Tomaolala
• drawer @GolderBrother
• message @GolderBrother
• notification @GolderBrother
• pop-confirm @GolderBrother
• popup @GolderBrother

组件库文档英文翻译

这个功能解决了什么问题

官网文档示例和设计指南部分的翻译工作

你建议的方案是什么

参照现有 Button 目录，增加 xx.en-US.md 文件，根据已有中文文档进行翻译工作，参见：https://github.com/Tencent/tdesign-common/blob/develop/docs/web/api/button.en-US.md

请在 issue 评论区说明自己想要认领的组件，并尽早提交 PR
组件认领列表：

基础

• button- #472
• divider
• icon

布局

• grid
• layout

导航

• affix
• anchor
• breadcrumb
• dropdown
• pagination
• steps
• tabs

输入

• cascader
• checkbox
• color-picker
• date-picker
• form
• input
• input-number
• radio
• select
• select-input
• slider
• switch
• tag-input
• textarea
• transfer
• time-picker
• tree-select
• upload

数据展示

• avatar
• badge
• calendar
• card
• collapse
• comment
• list
• loading
• progress
• skeleton
• swiper
• table
• tag
• tooltip
• tree

消息提醒

• alert
• dialog
• drawer
• message
• notification
• pop-confirm
• popup

[Bug] Steps 最后一项内容过长时会无限制撑开宽度，导致前几项的内容被压缩，无法正常显示

Demo如：https://codesandbox.io/s/tdesign-vue-demo-forked-jh5zd

官网任一框架的demo，改动最后一项的内容也可复现

感觉此处的效果应该是最后一项默认最短只有其内容大小的宽度，最长为flex均分的每一项内容的宽度

[Tree] 收拢的两个节点缝隙间有异常的可点击区域

重现链接

https://codesandbox.io/s/u9efo?file=/src/demo.vue

重现步骤

当t-tree任意两项有子级的节点，先被展开，然后再被收拢，这时这两个节点间缝隙会出现另外的可点击区域。经验证这个可点击的元素为节点的子级，且点击后会触发子节点的事件。

期望结果

节点的子级如期隐藏，并且节点间缝隙不会出现另外的可点击区域和事件

补充说明

目前给 .t-tree__item--hidden 这加上样式 overflow: hidden; 能临时解决

Environment	Info
相关版本	0.36.0
框架版本 / 基础库版本	Vue2
系统、浏览器	macOS/chrome
Node版本

问题gif图

【Mobile：Divider】组件示例文档翻译

总体目标

• 将 docs/mobile/api_v2 文件夹下的 xx.en-US.md 等文件翻译成英文

翻译示例

• 将 xx.en-US.md 文档的中文内容翻译成英文
• 以 Button 为例

验收标准

• 翻译正确，合入仓库

IssueShoot

• 预估时长: 1
• 期望完成时间: 2023-07-03 00:00:00 +0000 UTC
• 开发难度: 低
• 参与人数: 1
• 验收标准: 实现期望改造效果，提 PR 并通过验收无误
• 备注: 最终激励以实际提交 pull request 并合并为准

[Overview] typo

位置：docs -> web -> overview.md

<div class="image-wrapper">
  <a class="item" href="./components/popconfirm">
    <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-popconfirm.png" />
    <img class="__dark__" src="https://tdesign.gtimg.com/site/doc/doc-popconfirm-dark.png" />
    <p class="name">Popconform 气泡提示框</p>
  </a>
</div>

Popconform 应为 Popconfirm

---

位置：docs -> web -> overview.md

<div class="image-wrapper">
  <a class="item" href="./components/breadcrumb">
    <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-breadcrumb.png" />
    <img class="__dark__" src="https://tdesign.gtimg.com/site/doc/doc-breadcrumb-dark.png" />
    <p class="name">Breadcumb 面包屑</p>
  </a>
</div>

Breadcumb 应为 Breadcrumb

[Design Token] font token影响自定义font family的使用

tdesign-common 版本

• 影响web端的组件库在业务中的使用

重现步骤

font属性中 font-family是必须的选项 https://developer.mozilla.org/zh-CN/docs/Web/CSS/font 在Design Token中必须存在
由于设置了font属性的的节点是默认继承的 font-family会影响节点的子节点
对于有特定字体需求的业务 会影响子节点的字体

期望结果

font token不影响自定义font family的使用

实际结果

font token影响自定义font family的使用

框架版本

• web端的组件库的 vue 大于0.45.2的版本
• web端的组件库的 react 大于0.39.0的版本
• web端的组件库的 vue-next 大于0.19.1的版本

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

希望css variables可以加上圆角

这个功能解决了什么问题

目前我们希望基于Tdesign中抽离的css variables去做样式定制，以符合自身品牌的设计规范。
设计师设计的样式中组件有圆角，但目前Tdesign抽离出来的css variables未包含圆角样式。

你建议的方案是什么

建议加上圆角的css variables

Switch 组件，关闭状态背景颜色和设计稿不一致

[slider] 希望增加环形滑块

这个功能解决了什么问题

类似这样的角度选择

你建议的方案是什么

布局方式增加环形滑块

[Dialog] 公共文档中涉及特定框架的语法糖问题

现在 vue 和 react 有关Dialog的文档引用自 common 公共文档中，但公共文档涉及 vue 框架的语法糖问题，会给 react 读者带来困扰。

该问题已经在 tdesign-react 中已提过 issue ：

Tencent/tdesign-react#713

重现链接

https://tdesign.tencent.com/vue/components/dialog

重现步骤

基于popup实现的expand-collapse动画改造

目前基于popup的动画实现是通过在transition阶段不断改变max-height、overflow来实现的。
以vue2的实现为例

// 以下代码用于处理展开-收起动画相关,
    // 需要使用popup的组件设置非对外暴露的expandAnimation开启 对不需要展开收起动画的其他组件无影响
    getContentElm(el: HTMLElement): HTMLElement {
      if (this.expandAnimation) {
        const content = el.querySelector(`.${name}__content`) as HTMLElement;
        return content;
      }
      return null;
    },
    // 动画结束后 清除展开收起动画相关属性 避免造成不必要的影响
    resetExpandStyles(el: HTMLElement) {
      const content = this.getContentElm(el);
      if (content) {
        content.style.overflow = '';
        if (this.presetMaxHeight !== Infinity) {
          content.style.maxHeight = '';
        }
      }
    },
    // 设置展开动画初始条件
    beforeEnter(el: HTMLElement) {
      const content = this.getContentElm(el);
      if (content) {
        content.style.overflow = 'hidden';
        content.style.maxHeight = '0';
      }
    },
    // 设置max-height,触发展开动画
    enter(el: HTMLElement) {
      const content = this.getContentElm(el);
      if (content) {
        // 对比scrollHeight和组件自身设置的maxHeight 选择小的做展开动画
        const scrollHeight = Math.min(content.scrollHeight, this.presetMaxHeight);
        content.style.maxHeight = `${scrollHeight}px`;
      }
    },
    // 设置max-height为0,触发收起动画
    leave(el: HTMLElement) {
      const content = this.getContentElm(el);
      if (content) content.style.maxHeight = '0';
    },
    // 设置收起动画初始条件
    beforeLeave(el: HTMLElement) {
      const content = this.getContentElm(el);
      if (content) {
        content.style.overflow = 'hidden';
      }
    },

比如expand阶段 beforeEnter阶段需要先设置了max-height为0，overflow为hidden, 在下一个enter阶段将max-height改变，由此触发max-height的动画，在执行结束后再将逻辑擦除，避免对组件的影响；collapse阶段基本同理只是方向逆转。
这样的实现有几个问题

1. 实现的逻辑配合大量JS代码，导致popup组件本身承担着很多功能的同时还需要承担这部分代码，复杂度增加 维护成本增加
2. 向上伸展收起的实现不是100%达到预期要求
3. 没法达到多框架复用 各框架还是需要分别承担这部分逻辑的维护

@ikeq 提供了基于clip-path实现的方案 效果如 https://c6t4i.csb.app/ 效果符合预期，期望接下来将popup的expand-collpase动画，替换成这个实现方式，将之前基于max-height实现的逻辑剔除，完全基于CSS来实现，降低维护成本。

同时希望这个实现方式可以扩展到更多左右方向展开收起的实现上，如dropdown、casacder组件的二级展开动画。

去除全局 reset/normalize 样式，减少业务项目引入影响

这个功能解决了什么问题

减少业务项目因为引入 tdesign 组件库，导致全局默认样式被修改，类似反馈 Tencent/tdesign-vue#416

你建议的方案是什么？

去除 https://github.com/Tencent/tdesign-common/blob/develop/style/web/_reset.less 引入，reset 样式拆分到 TDesign 组件样式作用范围内

认领3.31~4.20完成

          认领3.31~4.20完成

select/select-input/slider/switch/tag-input/textarea/transfer/time-picker/tree-select/upload

Originally posted by @vapourma in #788 (comment)

[Select] 本地启动dev-server的时候docs.css出现404，组件样式错乱

tdesign-common 版本

1.0.0

重现链接

http://0.0.0.0:9000/components/select/

重现步骤

运行环境： macOS Monterey 12.4 Chrome 102.0.5005.61

1. git clone tdesign-common项目到本地
2. git submodule init && git submodule update
3. 安装主工程和子工程的依赖
4. 进入/style/web目录，运动npm start
5. 访问 http://0.0.0.0:9000/components/select/，看到页面上select组件样式错乱
6. 打开开发者调试工具，发现docs.css是404状态

期望结果

正常展示样式，可进行HTML和CSS编辑调整

实际结果

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[t-date-range-picker] 日期选择器在drak模式下样式错误

tdesign-vue-next-starter 版本

0.17

重现链接

No response

重现步骤

开启drak模式，然后选择一个时间便可看见

期望结果

白色框中应该有黑色的数字

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

认领3.31~4.30完成

          认领3.31~4.30完成

collapse/comment/list/loading/progress/skeleton/swiper/table/tag/tooltip/tree

Originally posted by @vapourma in #788 (comment)

Radio 在4K屏幕下选中时选中点没在中心

Describe Framework

tdesign-vue

Describe Environment

Chrome 97.0.4692.99

Describe the bug
Radio 在4K屏幕下选中时选中点没在中心，1080P缩小页面使用放大镜也可复现此BUG

Additional context

Could not resolve './style/css.js'

Could not resolve './style/css.js'

CSS BEM 规范类名调整

BEM: https://github.com/Tencent/tdesign-common/blob/develop/css-naming.md

基于clip-path的展开收起动画支持横向使用场景

背景

书接上回

• #155
  基于popup的组件，使用clip-path使用的动画已经改造完成
  这个实现方式理论上还可以用在目前部分未实现展开收起动画的场景，比如cascader组件的子菜单、dropdown的多级展开中，期望基于clip-path的动画可以提升影响范围，应用到其他组件的展开收起动画的实现中。

Select 和 Input 的 placeholder 颜色不一致

[Feature Request] Menu 添加 `auto` 主题模式/或者默认自适应主题

背景说明

现在的 Menu 组件的 theme 属性有两个选项：

1. light
2. dark

在不指定的默认情况下，Menu 的样式是 light，而 TDesign 现在支持了以 variable 为基础的主题模式
Vue 版本举例：https://tdesign.tencent.com/vue/dark-mode

通过设置 theme-mode 属性并不能同步切换 Menu 组件的 light/dark 模式，需要给 Menu 组件的 theme 属性再额外绑定一个变量进行处理，比较麻烦。

方案

方案 1

给 theme 属性添加一个 auto 模式，这个模式下的 color 相关的样式通过 variable 来设置

方案 2

Menu 组件默认样式通过 variable 设置，有指定 light/dark 主题需求的可以通过 theme 来手动设置

test

[docs] 如何在本地预览添加的demo

这个功能解决了什么问题

请问有没有完整的指导文档，去指导如何正确的添加Demo示例；

我在本地添加完示例之后，进行预览发现没有读取，我的操作步骤如下：

1. 在tdesign-vue-next的switch组件的_example添加对应的custom-value.vue
2. 在_common中去更新docs\web\api\switch.md

### 自定义值的开关

使用自定义值的开关

{{custom-value}}

4. 本地运行预览的时候，出现了对应的菜单但是内容加载是失败的
   

你建议的方案是什么

建议增加对应的文档并完善到共享指南中；

[t-tree] label样式上支持多行文本,与左侧icon顶端对齐

这个功能解决了什么问题

目前样式上如果是多行文本,会如下呈现

期望样式如下,与左侧icon维持顶部对齐

你建议的方案是什么

与左侧icon维持顶部对齐

[t-loading] css样式警告

tdesign-vue-next 版本

0.17.5

重现链接

No response

重现步骤

1. 使用MessagePlugin

import { MessagePlugin } from 'tdesign-vue-next';

MessagePlugin.loading('loading');

2. npm run dev开发，使用Edge浏览器调试，打开开发人员工具，“问题”面板警告

'mask' should be listed after '-webkit-mask'.

.t-loading__gradient-conic {
    width: 100%;
    height: 100%;
    background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
    border-radius: 50%;
    /* stylelint-disable-next-line */
    mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
    /* stylelint-disable-next-line */
    -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
}

期望结果

.t-loading__gradient-conic {
    width: 100%;
    height: 100%;
    background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
    border-radius: 50%;
    /* stylelint-disable-next-line */
    -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
    /* stylelint-disable-next-line */
    mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
}

实际结果

No response

框架版本

Vue(3.2.37)

浏览器版本

Edge(103.0.1264.71)

系统版本

Win10(KB5015878)

Node版本

16.13.1

补充说明

No response

时间选择器的样式层级问题

hover样式的层级高于蓝色部分，这个是符合预期的设计吗？感觉有一些奇怪。
在hover被激活的情况下稍微滚动多一点就能看到一个灰色的色块跟着数字一起滑上去，体验不是很好。

https://tdesign.tencent.com/vue-next/components/time-picker

官网的demo就可以用来测试。

[pull-down-refresh] autoprefixer: end value has mixed support, consider using flex-end instead

tdesign-common 版本

1.0.0

重现链接

No response

重现步骤

⚠️ Compiled with warnings.

./src/tdesign-mobile-vue/src/_common/style/mobile/components/pull-down-refresh/_index.less)
Module Warning (from ./node_modules/@tarojs/webpack-runner/node_modules/postcss-loader/dist/cjs.js):
Warning

(24:3) autoprefixer: end value has mixed support, consider using flex-end instead

期望结果

justify-content: flex-end;

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response