image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-09-20 02:34:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat/upgrade style (#365)

Browse Source 
* feat: upgrade vars

* feat: replace vars

* feat: remove variables
This commit is contained in:
yuyang 2022-11-25 17:47:11 +08:00 committed by GitHub
parent 4b72175a98
commit b83f188dbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 62 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -28,7 +28,7 @@
"qrcode.vue": "^3.2.2", "qrcode.vue": "^3.2.2",
"qs": "^6.10.5", "qs": "^6.10.5",
"tdesign-icons-vue-next": "^0.1.1", "tdesign-icons-vue-next": "^0.1.1",
"tdesign-vue-next": "^0.24.7", "tdesign-vue-next": "^0.24.9",
"tvision-color": "^1.3.1", "tvision-color": "^1.3.1",
"vue": "^3.2.31", "vue": "^3.2.31",
"vue-clipboard3": "^2.0.0", "vue-clipboard3": "^2.0.0",

8
src/components/result/index.vue
View File

@ -84,18 +84,16 @@ const dynamicComponent = computed(() => {
&-title { &-title {
font-style: normal; font-style: normal;
font-weight: 500;
margin-top: 8px; margin-top: 8px;
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
font-size: @font-size-xl; font: var(--td-font-title-large);
line-height: @line-height-xl; font-weight: 500;
} }
&-tip { &-tip {
margin: 8px 0 32px; margin: 8px 0 32px;
font-size: @font-size-base; font: var(--td-font-body-medium);
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
line-height: @line-height-base;
} }
} }
</style> </style>

2
src/components/thumbnail/index.vue
View File

@ -32,7 +32,7 @@ const className = computed(() => {
} }
&-circle { &-circle {
border-radius: @border-radius-50; border-radius: var(--td-radius-circle);
} }
&-layout { &-layout {

22
src/config/color.ts
View File

@ -27,17 +27,17 @@ export const defaultDarkColor = [
export const COLOR_TOKEN: TColorSeries = { export const COLOR_TOKEN: TColorSeries = {
DEFAULT: { DEFAULT: {
'--td-brand-color': '#0052D9', '--td-brand-color': '#0052d9',
'--td-brand-color-1': '#e0ebff', '--td-brand-color-1': '#f2f3ff',
'--td-brand-color-2': '#c0d8ff', '--td-brand-color-2': '#d9e1ff',
'--td-brand-color-3': '#a1c4ff', '--td-brand-color-3': '#b5c7ff',
'--td-brand-color-4': '#81b1ff', '--td-brand-color-4': '#8eabff',
'--td-brand-color-5': '#5f9bff', '--td-brand-color-5': '#618dff',
'--td-brand-color-6': '#3d87ff', '--td-brand-color-6': '#366ef4',
'--td-brand-color-7': '#176eff', '--td-brand-color-7': '#0052d9',
'--td-brand-color-8': '#0052D9', '--td-brand-color-8': '#003cab',
'--td-brand-color-9': '#0048cd', '--td-brand-color-9': '#002a7c',
'--td-brand-color-10': '#0035b5', '--td-brand-color-10': '#001a57',
}, },
CYAN: { CYAN: {

5
src/layouts/components/Header.vue
View File

@ -156,10 +156,6 @@ const navToHelper = () => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.@{starter-prefix}-header { .@{starter-prefix}-header {
&-layout {
height: 64px;
}
&-menu-fixed { &-menu-fixed {
position: fixed; position: fixed;
top: 0; top: 0;
@ -180,7 +176,6 @@ const navToHelper = () => {
&-logo-container { &-logo-container {
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
height: 64px;
} }
} }
.header-menu { .header-menu {

4
src/layouts/components/Notice.vue
View File

@ -136,7 +136,7 @@ const goDetail = () => {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
padding: 16px 24px; padding: 16px 24px;
border-radius: @border-radius; border-radius: var(--td-radius-default);
font-size: 14px; font-size: 14px;
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
line-height: 22px; line-height: 22px;
@ -147,7 +147,7 @@ const goDetail = () => {
background: var(--td-bg-color-container-hover); background: var(--td-bg-color-container-hover);
.msg-content { .msg-content {
color: var(--td-brand-color-8); color: var(--td-brand-color);
} }
.t-list-item__action { .t-list-item__action {

2
src/layouts/setting.vue
View File

@ -315,7 +315,7 @@ watchEffect(() => {
display: inline-flex; display: inline-flex;
max-height: 78px; max-height: 78px;
padding: 8px; padding: 8px;
border-radius: @border-radius; border-radius: var(--td-radius-default);
border: 2px solid #e3e6eb; border: 2px solid #e3e6eb;
> .t-radio-button__label { > .t-radio-button__label {
display: inline-flex; display: inline-flex;

3
src/pages/dashboard/base/index.ts
View File

@ -92,17 +92,14 @@ export function constructInitDataset({
placeholderColor, placeholderColor,
borderColor, borderColor,
}: { dateTime: Array<string> } & TChartColor) { }: { dateTime: Array<string> } & TChartColor) {
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
const divideNum = 10; const divideNum = 10;
const timeArray = []; const timeArray = [];
const inArray = []; const inArray = [];
const outArray = []; const outArray = [];
for (let i = 0; i < divideNum; i++) { for (let i = 0; i < divideNum; i++) {
// const [timeArray, inArray, outArray] = dataset;
if (dateTime.length > 0) { if (dateTime.length > 0) {
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum; const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i; const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
// console.log('dateAbsTime..', dateAbsTime, enhandTime);
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD')); timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
} else { } else {
timeArray.push( timeArray.push(

13
src/pages/detail/base/index.less
View File

@ -23,11 +23,10 @@
h1 { h1 {
width: 200px; width: 200px;
font-weight: normal; font: var(--td-font-body-medium);
font-size: @font-size-base;
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
font-weight: normal;
text-align: left; text-align: left;
line-height: 22px;
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
width: 100px; width: 100px;
@ -49,7 +48,7 @@
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: @border-radius-50; border-radius: var(--td-radius-circle);
background: var(--td-success-color-5); background: var(--td-success-color-5);
} }
@ -74,7 +73,7 @@
h1 { h1 {
width: 84px; width: 84px;
font-family: PingFangSC-Regular; font-family: var(--td-font-family);
font-size: 14px; font-size: 14px;
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
text-align: left; text-align: left;
@ -89,7 +88,7 @@
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: @border-radius-50; border-radius: var(--td-radius-circle);
background: var(--td-success-color-5); background: var(--td-success-color-5);
} }
@ -98,7 +97,7 @@
} }
.blue { .blue {
color: var(--td-brand-color-8); color: var(--td-brand-color);
} }
} }
} }

8
src/pages/detail/secondary/index.less
View File

@ -1,7 +1,7 @@
.secondary-notification { .secondary-notification {
background-color: var(--td-bg-color-container); background-color: var(--td-bg-color-container);
border-radius: @border-radius; border-radius: var(--td-radius-default);
padding: @spacer-3 @spacer-4; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
.t-tabs__content { .t-tabs__content {
padding-top: 0; padding-top: 0;
@ -34,7 +34,7 @@
} }
.t-tag.t-size-s { .t-tag.t-size-s {
margin-right: @spacer-1; margin-right: var(--td-comp-margin-s);
margin-left: 0; margin-left: 0;
} }
} }
@ -51,7 +51,7 @@
} }
.unread { .unread {
color: var(--td-brand-color-8); color: var(--td-brand-color);
} }
.msg-action { .msg-action {

2
src/pages/list/components/CommonTable.vue
View File

@ -274,7 +274,7 @@ const getContainer = () => {
.list-common-table { .list-common-table {
background-color: var(--td-bg-color-container); background-color: var(--td-bg-color-container);
padding: 30px 32px; padding: 30px 32px;
border-radius: @border-radius; border-radius: var(--td-radius-default);
.table-container { .table-container {
margin-top: 30px; margin-top: 30px;

2
src/pages/list/tree/index.vue
View File

@ -45,7 +45,7 @@ const onInput = () => {
<style lang="less" scoped> <style lang="less" scoped>
.table-tree-container { .table-tree-container {
background-color: var(--td-bg-color-container); background-color: var(--td-bg-color-container);
border-radius: @border-radius; border-radius: var(--td-radius-default);
.t-tree { .t-tree {
margin-top: 24px; margin-top: 24px;

2
src/pages/login/components/Header.vue
View File

@ -37,7 +37,6 @@ const navToHelper = () => {
<style lang="less" scoped> <style lang="less" scoped>
.login-header { .login-header {
height: 64px;
padding: 0 24px; padding: 0 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -47,7 +46,6 @@ const navToHelper = () => {
.logo { .logo {
width: 188px; width: 188px;
height: 64px;
} }
.operations-container { .operations-container {

4
src/pages/login/index.less
View File

@ -152,7 +152,7 @@
.tip { .tip {
font-size: 14px; font-size: 14px;
color: var(--td-brand-color-8); color: var(--td-brand-color);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -182,7 +182,7 @@
.tip { .tip {
float: right; float: right;
font-size: 14px; font-size: 14px;
color: var(--td-brand-color-8); color: var(--td-brand-color);
} }
} }

10
src/pages/user/index.less
View File

@ -10,7 +10,7 @@
background: var(--td-bg-color-container); background: var(--td-bg-color-container);
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
text-align: left; text-align: left;
border-radius: @border-radius; border-radius: var(--td-radius-default);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -35,7 +35,7 @@
.contract { .contract {
width: 340px; width: 340px;
height: 88px; height: 88px;
border-radius: @border-radius; border-radius: var(--td-radius-default);
margin: 8px 0; margin: 8px 0;
&-title { &-title {
@ -66,7 +66,7 @@
.user-intro { .user-intro {
padding: 32px 24px; padding: 32px 24px;
background: var(--td-brand-color); background: var(--td-brand-color);
border-radius: @border-radius; border-radius: var(--td-radius-default);
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
.name { .name {
@ -107,7 +107,7 @@
.product-container { .product-container {
margin-top: 16px; margin-top: 16px;
border-radius: @border-radius; border-radius: var(--td-radius-default);
.content { .content {
width: 100%; width: 100%;
@ -122,7 +122,7 @@
.content-container { .content-container {
margin-top: 16px; margin-top: 16px;
background: var(--td-bg-color-container); background: var(--td-bg-color-container);
border-radius: @border-radius; border-radius: var(--td-radius-default);
} }
.user-team { .user-team {

20
src/style/layout.less
View File

@ -6,12 +6,8 @@
width: fit-content; width: fit-content;
} }
.t-layout__header {
height: auto;
}
.t-button + .t-button { .t-button + .t-button {
margin-left: @spacer; margin-left: var(--td-comp-margin-s);
} }
.t-jumper { .t-jumper {
@ -30,7 +26,7 @@
.left-operation-container, .left-operation-container,
.operation-container { .operation-container {
.t-button + .t-button { .t-button + .t-button {
margin-left: @spacer; margin-left: var(--td-comp-margin-s);
} }
} }
@ -80,7 +76,7 @@
} }
&-content-layout { &-content-layout {
padding: @spacer-3; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
} }
&-layout { &-layout {
@ -93,7 +89,7 @@
z-index: 100; z-index: 100;
} }
&-tabs-nav + .@{starter-prefix}-content-layout { &-tabs-nav + .@{starter-prefix}-content-layout {
padding-top: @spacer-3; padding-top: var(--td-comp-paddingTB-xxl);
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -111,7 +107,7 @@
&-footer-layout { &-footer-layout {
padding: 0; padding: 0;
margin-bottom: @spacer-3; margin-bottom: var(--td-comp-margin-xxl);
} }
// slideBar // slideBar
@ -136,10 +132,10 @@
min-height: 100%; min-height: 100%;
&-mix { &-mix {
top: 64px; top: var(--td-comp-size-xxxl);
&-fixed { &-fixed {
top: 64px; top: var(--td-comp-size-xxxl);
z-index: 0; z-index: 0;
} }
} }
@ -177,7 +173,7 @@
&-logo-normal { &-logo-normal {
color: var(--td-brand-color); color: var(--td-brand-color);
font-size: @font-size-l; font: var(--td-font-body-large);
transition: all 0.3s; transition: all 0.3s;
} }
} }

11
src/style/reset.less
View File

@ -1,16 +1,15 @@
// 对部分样式进行重置 // 对部分样式进行重置
body { body {
color: var(--td-text-color-secondary); color: var(--td-text-color-secondary);
font-family: -apple-system, BlinkMacSystemFont, @font-family; font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family);
font-size: @font-size-base; font: var(--td-font-body-medium);
line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
pre { pre {
font-family: @font-family; font-family: var(--td-font-family);
} }
ul, ul,
@ -63,9 +62,9 @@ a {
} }
.t-button-link { .t-button-link {
margin-right: @spacer-3; margin-right: var(--td-comp-margin-xxl);
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }

20
src/style/theme/default.less
View File

@ -1,15 +1,15 @@
:root, :root,
:root[theme-mode='light'] { :root[theme-mode='light'] {
--td-brand-color-1: #e0ebff; --td-brand-color-1: #f2f3ff;
--td-brand-color-2: #c0d8ff; --td-brand-color-2: #d9e1ff;
--td-brand-color-3: #a1c4ff; --td-brand-color-3: #b5c7ff;
--td-brand-color-4: #81b1ff; --td-brand-color-4: #8eabff;
--td-brand-color-5: #5f9bff; --td-brand-color-5: #618dff;
--td-brand-color-6: #3d87ff; --td-brand-color-6: #366ef4;
--td-brand-color-7: #176eff; --td-brand-color-7: #0052d9;
--td-brand-color-8: #0052d9; --td-brand-color-8: #003cab;
--td-brand-color-9: #0048cd; --td-brand-color-9: #002a7c;
--td-brand-color-10: #0035b5; --td-brand-color-10: #001a57;
} }
:root[theme-mode='dark'] { :root[theme-mode='dark'] {

42
src/style/variables.less
View File

@ -1,47 +1,7 @@
/** 公共前缀 */ /** 公共前缀 */
@starter-prefix: tdesign-starter; @starter-prefix: tdesign-starter;
// 组件库本身只有色彩相关的css token 扩展其他css token使用 待组件库扩充其他token后再做替换 这里使用less vars 避免两种css token让使用者混淆 // 颜色、尺寸、阴影、圆角、字体 variables 请参考 https://tdesign.tencent.com/starter/docs/vue/design-token
// tdesign 只保持一套token即可
// Spacer
@spacer: 8px;
@spacer-s: calc(@spacer * 0.5); // 间距-4
@spacer-l: calc(@spacer * 1.5); // 间距-12
@spacer-1: @spacer; // 间距-8
@spacer-2: calc(@spacer * 2); // 间距-16
@spacer-3: calc(@spacer * 3); // 间距-24
@spacer-4: calc(@spacer * 4); // 间距-32
@spacer-5: calc(@spacer * 5); // 间距-大-40
@spacer-6: calc(@spacer * 6); // 间距-大-48
@spacer-7: calc(@spacer * 7); // 间距-大-48
@spacer-8: calc(@spacer * 8); // 间距-大-48
@spacer-9: calc(@spacer * 9); // 间距-大-48
@spacer-10: calc(@spacer * 10); // 间距-大-80
// Font
@font-size: 10px;
@font-size-s: calc(@font-size * 1.2); // 字号-五级字号
@font-size-base: calc(@font-size * 1.4); // 字号-四级字号
@font-size-l: calc(@font-size * 1.6); // 字号-三级字号
@font-size-xl: calc(@font-size * 2); // 字号-二级字号
@font-size-xxl: calc(@font-size * 3.6); // 字号-一级字号
// Line Height
@line-height: 1.5; // 行高-常规
@line-height-s: 20px; // 行高-对应五级文字
@line-height-base: 22px; // 行高-对应四级文字
@line-height-l: 24px; // 行高-对应三级文字
@line-height-xl: 28px; // 行高-对应二级文字
@line-height-xxl: 44px; //行高-对应一级文字
@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
// Border Radius
@border-radius: 3px; // 圆角-全局
@border-radius-50: 50%; // 圆角-全圆角
// 响应式断点 // 响应式断点
@screen-sm: 768px; @screen-sm: 768px;
@screen-md: 992px; @screen-md: 992px;