Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(statistic): new component #3329

Merged
merged 21 commits into from
Nov 22, 2023
Merged

Conversation

liweijie0812
Copy link
Contributor

@liweijie0812 liweijie0812 commented Sep 5, 2023

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

迁移vue2 statistic PR Tencent/tdesign-vue#2397

💡 需求背景和解决方案

📝 更新日志

  • feat(statistic): 新增 Statistic 统计数值组件

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@github-actions
Copy link
Contributor

github-actions bot commented Sep 5, 2023

完成

@HaixingOoO
Copy link
Contributor

image
const elapsed应该改成this.elapsed,要不this.elapsed === this.duration的判断不会执行,导致函数一直在运行。

@Wen1kang
Copy link
Collaborator

Wen1kang commented Nov 9, 2023

1.标题文案token使用错误,应该用--td-font-body-medium,不用另外设font-weight参数

image

2.标题margin-bottom参数错误,应该用--td-comp-margin-s

image

3.icon的margin-right使用错误,应该用--td-comp-margin-s

image

4.icon的font-size使用错误,应该用--td-font-size-title-large

image

5.数据的font-size需要使用token:--td-font-size-headline-mediumline-height需要使用token:--td-line-height-headline-medium;不需要设置font-weight

image

6.单位的font-size需要使用token:--td-font-body-mediumline-height需要使用token:--td-line-height-headline-medium或者不需要设置都可,因为目标是居底对齐;font-family不需要设置,这里跟随系统字体;margin-left需要使用token:--td-comp-margin-xs

image

7.整个content的区域高度不对,应该是36px,这里的line-height不需要设置,应该使用数据字体行高撑开,font-family不需要在content设定,font-weight不需要设置

image

8.假设是字符情况,应该继承第3条的就可以,而不是单独设定样式

image

9.这些为demo组合样式,font-size和padding按照现在即可,但background, color, border-radius需要使用token,background: --td-brand-color-light; color: --td-brand-color; border-radius: --td-radius-medium

image

10.列的行高应该是继承文案,font-size: --td-font-size-body-medium; line-height: --td-line-height-body-medium

image

11.列的icon没有设定尺寸,应该是font-size: --td-font-size-body-large,并且icon使用错误,应该是arrow-triangle-xx-filled

image

@Wen1kang
Copy link
Collaborator

1.数据的 font-family 要优先使用 TCloudNumber 的字体,不是使用默认字体,另外unit也是,如果字体找不到再使用默认字体,添加 font- family 参数
TCloudNumber, -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol
资源包要放在组件内,@uyarn 也要关注一下,字体链接,只需要使用TCloudNumberVF就好
image

2.unit的字符用错token了,这里应该是 var(--td-font-size-body-medium)
image

3.组合使用,箭头没有居中对齐
image

4.数值动画的后缀大小要用token,font-size: var(--td-font-size-title-large); margin-left: var(--td-comp-margin-s);
image

@uyarn
Copy link
Collaborator

uyarn commented Nov 22, 2023

1.数据的 font-family 要优先使用 TCloudNumber 的字体,不是使用默认字体,另外unit也是,如果字体找不到再使用默认字体,添加 font- family 参数 TCloudNumber, -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol 资源包要放在组件内,@uyarn 也要关注一下,字体链接,只需要使用TCloudNumberVF就好 image

2.unit的字符用错token了,这里应该是 var(--td-font-size-body-medium) image

3.组合使用,箭头没有居中对齐 image

4.数值动画的后缀大小要用token,font-size: var(--td-font-size-title-large); margin-left: var(--td-comp-margin-s); image

DONE

@uyarn uyarn merged commit 6f786f3 into Tencent:develop Nov 22, 2023
5 checks passed
This was referenced Nov 22, 2023
@liweijie0812 liweijie0812 deleted the feat-statistic branch November 22, 2023 15:22
};

const formatValue = computed(() => {
let _value: number | undefined | string = innerValue.value;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

项目中禁止使用下划线开头的命名,辛苦后续调整下

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eslint 开启no-underscore-dangle,禁止下划线开头
检查结果
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #3643


onMounted(() => props.animation && props.animationStart && start());

expose({ start });
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里抛出了组件实例方法,但是 API 文档没有呈现,用户无法感知。
API 平台已录入该方法,辛苦使用 npm run api:docs Statistic "VueNext(PC)" finalProject 更新 API 文档

image

const trendIcons = {
increase: <ArrowTriangleUpFilledIcon />,
decrease: <ArrowTriangleDownFilledIcon />,
};
Copy link
Collaborator

@chaishi chaishi Nov 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

常量 trendIcons 建议定义在组件最外面,而非 render 函数里,可避免每次渲染是计算时重复创建对象。一个数字可能没关系,但如果放在 Table 数据表中,就会变很多。

const trendIcons = {
        increase: ArrowTriangleUpFilledIcon,
        decrease: ArrowTriangleDownFilledIcon,
      };

innerValue.value = to;
},
});
(tween.value as any)?.start();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里使用了 as any,需要再次确认下具体是哪部分代码导致了 TS 类型丢失

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants