mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 09:39:08 +08:00
Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter into main
This commit is contained in:
Uyarn
commit
2fd6457771
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "tdesign-vue-next-starter",
|
||||
"version": "0.5.6",
|
||||
"version": "0.6.0",
|
||||
"scripts": {
|
||||
"dev:mock": "vite --open --mode mock",
|
||||
"dev": "vite --open --mode development",
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
"qrcode.vue": "^3.2.2",
|
||||
"qs": "^6.10.5",
|
||||
"tdesign-icons-vue-next": "^0.1.1",
|
||||
"tdesign-vue-next": "^0.24.7",
|
||||
"tdesign-vue-next": "^0.24.9",
|
||||
"tvision-color": "^1.3.1",
|
||||
"vue": "^3.2.31",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -84,18 +84,16 @@ const dynamicComponent = computed(() => {
|
|||
|
||||
&-title {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
color: var(--td-text-color-primary);
|
||||
font-size: @font-size-xl;
|
||||
line-height: @line-height-xl;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
margin: 8px 0 32px;
|
||||
font-size: @font-size-base;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const className = computed(() => {
|
|||
}
|
||||
|
||||
&-circle {
|
||||
border-radius: @border-radius-50;
|
||||
border-radius: var(--td-radius-circle);
|
||||
}
|
||||
|
||||
&-layout {
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@ export const defaultDarkColor = [
|
|||
|
||||
export const COLOR_TOKEN: TColorSeries = {
|
||||
DEFAULT: {
|
||||
'--td-brand-color': '#0052D9',
|
||||
'--td-brand-color-1': '#e0ebff',
|
||||
'--td-brand-color-2': '#c0d8ff',
|
||||
'--td-brand-color-3': '#a1c4ff',
|
||||
'--td-brand-color-4': '#81b1ff',
|
||||
'--td-brand-color-5': '#5f9bff',
|
||||
'--td-brand-color-6': '#3d87ff',
|
||||
'--td-brand-color-7': '#176eff',
|
||||
'--td-brand-color-8': '#0052D9',
|
||||
'--td-brand-color-9': '#0048cd',
|
||||
'--td-brand-color-10': '#0035b5',
|
||||
'--td-brand-color': '#0052d9',
|
||||
'--td-brand-color-1': '#f2f3ff',
|
||||
'--td-brand-color-2': '#d9e1ff',
|
||||
'--td-brand-color-3': '#b5c7ff',
|
||||
'--td-brand-color-4': '#8eabff',
|
||||
'--td-brand-color-5': '#618dff',
|
||||
'--td-brand-color-6': '#366ef4',
|
||||
'--td-brand-color-7': '#0052d9',
|
||||
'--td-brand-color-8': '#003cab',
|
||||
'--td-brand-color-9': '#002a7c',
|
||||
'--td-brand-color-10': '#001a57',
|
||||
},
|
||||
|
||||
CYAN: {
|
||||
|
|
|
|||
|
|
@ -156,10 +156,6 @@ const navToHelper = () => {
|
|||
</script>
|
||||
<style lang="less" scoped>
|
||||
.@{starter-prefix}-header {
|
||||
&-layout {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
&-menu-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -180,7 +176,6 @@ const navToHelper = () => {
|
|||
&-logo-container {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
.header-menu {
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ const goDetail = () => {
|
|||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
font-size: 14px;
|
||||
color: var(--td-text-color-primary);
|
||||
line-height: 22px;
|
||||
|
|
@ -147,7 +147,7 @@ const goDetail = () => {
|
|||
background: var(--td-bg-color-container-hover);
|
||||
|
||||
.msg-content {
|
||||
color: var(--td-brand-color-8);
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
|
||||
.t-list-item__action {
|
||||
|
|
|
|||
|
|
@ -315,7 +315,7 @@ watchEffect(() => {
|
|||
display: inline-flex;
|
||||
max-height: 78px;
|
||||
padding: 8px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
border: 2px solid #e3e6eb;
|
||||
> .t-radio-button__label {
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -92,17 +92,14 @@ export function constructInitDataset({
|
|||
placeholderColor,
|
||||
borderColor,
|
||||
}: { dateTime: Array<string> } & TChartColor) {
|
||||
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
|
||||
const divideNum = 10;
|
||||
const timeArray = [];
|
||||
const inArray = [];
|
||||
const outArray = [];
|
||||
for (let i = 0; i < divideNum; i++) {
|
||||
// const [timeArray, inArray, outArray] = dataset;
|
||||
if (dateTime.length > 0) {
|
||||
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||
// console.log('dateAbsTime..', dateAbsTime, enhandTime);
|
||||
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
||||
} else {
|
||||
timeArray.push(
|
||||
|
|
|
|||
|
|
@ -23,11 +23,10 @@
|
|||
|
||||
h1 {
|
||||
width: 200px;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
width: 100px;
|
||||
|
|
@ -49,7 +48,7 @@
|
|||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: @border-radius-50;
|
||||
border-radius: var(--td-radius-circle);
|
||||
background: var(--td-success-color-5);
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +73,7 @@
|
|||
|
||||
h1 {
|
||||
width: 84px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-family: var(--td-font-family);
|
||||
font-size: 14px;
|
||||
color: var(--td-text-color-secondary);
|
||||
text-align: left;
|
||||
|
|
@ -89,7 +88,7 @@
|
|||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: @border-radius-50;
|
||||
border-radius: var(--td-radius-circle);
|
||||
background: var(--td-success-color-5);
|
||||
}
|
||||
|
||||
|
|
@ -98,7 +97,7 @@
|
|||
}
|
||||
|
||||
.blue {
|
||||
color: var(--td-brand-color-8);
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.secondary-notification {
|
||||
background-color: var(--td-bg-color-container);
|
||||
border-radius: @border-radius;
|
||||
padding: @spacer-3 @spacer-4;
|
||||
border-radius: var(--td-radius-default);
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
.t-tabs__content {
|
||||
padding-top: 0;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.t-tag.t-size-s {
|
||||
margin-right: @spacer-1;
|
||||
margin-right: var(--td-comp-margin-s);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
|
||||
.unread {
|
||||
color: var(--td-brand-color-8);
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
|
||||
.msg-action {
|
||||
|
|
|
|||
|
|
@ -274,7 +274,7 @@ const getContainer = () => {
|
|||
.list-common-table {
|
||||
background-color: var(--td-bg-color-container);
|
||||
padding: 30px 32px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
|
||||
.table-container {
|
||||
margin-top: 30px;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const onInput = () => {
|
|||
<style lang="less" scoped>
|
||||
.table-tree-container {
|
||||
background-color: var(--td-bg-color-container);
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
|
||||
.t-tree {
|
||||
margin-top: 24px;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ const navToHelper = () => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.login-header {
|
||||
height: 64px;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -47,7 +46,6 @@ const navToHelper = () => {
|
|||
|
||||
.logo {
|
||||
width: 188px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.operations-container {
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@
|
|||
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: var(--td-brand-color-8);
|
||||
color: var(--td-brand-color);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: var(--td-brand-color-8);
|
||||
color: var(--td-brand-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
background: var(--td-bg-color-container);
|
||||
color: var(--td-text-color-primary);
|
||||
text-align: left;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
.contract {
|
||||
width: 340px;
|
||||
height: 88px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
margin: 8px 0;
|
||||
|
||||
&-title {
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
.user-intro {
|
||||
padding: 32px 24px;
|
||||
background: var(--td-brand-color);
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
color: var(--td-text-color-primary);
|
||||
|
||||
.name {
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
|
||||
.product-container {
|
||||
margin-top: 16px;
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
.content-container {
|
||||
margin-top: 16px;
|
||||
background: var(--td-bg-color-container);
|
||||
border-radius: @border-radius;
|
||||
border-radius: var(--td-radius-default);
|
||||
}
|
||||
|
||||
.user-team {
|
||||
|
|
|
|||
|
|
@ -6,12 +6,8 @@
|
|||
width: fit-content;
|
||||
}
|
||||
|
||||
.t-layout__header {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.t-button + .t-button {
|
||||
margin-left: @spacer;
|
||||
margin-left: var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
.t-jumper {
|
||||
|
|
@ -30,7 +26,7 @@
|
|||
.left-operation-container,
|
||||
.operation-container {
|
||||
.t-button + .t-button {
|
||||
margin-left: @spacer;
|
||||
margin-left: var(--td-comp-margin-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,7 +76,7 @@
|
|||
}
|
||||
|
||||
&-content-layout {
|
||||
padding: @spacer-3;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
}
|
||||
|
||||
&-layout {
|
||||
|
|
@ -93,7 +89,7 @@
|
|||
z-index: 100;
|
||||
}
|
||||
&-tabs-nav + .@{starter-prefix}-content-layout {
|
||||
padding-top: @spacer-3;
|
||||
padding-top: var(--td-comp-paddingTB-xxl);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
|
@ -111,7 +107,7 @@
|
|||
|
||||
&-footer-layout {
|
||||
padding: 0;
|
||||
margin-bottom: @spacer-3;
|
||||
margin-bottom: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
// slideBar
|
||||
|
|
@ -136,10 +132,10 @@
|
|||
min-height: 100%;
|
||||
|
||||
&-mix {
|
||||
top: 64px;
|
||||
top: var(--td-comp-size-xxxl);
|
||||
|
||||
&-fixed {
|
||||
top: 64px;
|
||||
top: var(--td-comp-size-xxxl);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -177,7 +173,7 @@
|
|||
|
||||
&-logo-normal {
|
||||
color: var(--td-brand-color);
|
||||
font-size: @font-size-l;
|
||||
font: var(--td-font-body-large);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
// 对部分样式进行重置
|
||||
body {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, @font-family;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family);
|
||||
font: var(--td-font-body-medium);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: @font-family;
|
||||
font-family: var(--td-font-family);
|
||||
}
|
||||
|
||||
ul,
|
||||
|
|
@ -63,7 +62,7 @@ a {
|
|||
}
|
||||
|
||||
.t-button-link {
|
||||
margin-right: @spacer-3;
|
||||
margin-right: var(--td-comp-margin-xxl);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
:root,
|
||||
:root[theme-mode='light'] {
|
||||
--td-brand-color-1: #e0ebff;
|
||||
--td-brand-color-2: #c0d8ff;
|
||||
--td-brand-color-3: #a1c4ff;
|
||||
--td-brand-color-4: #81b1ff;
|
||||
--td-brand-color-5: #5f9bff;
|
||||
--td-brand-color-6: #3d87ff;
|
||||
--td-brand-color-7: #176eff;
|
||||
--td-brand-color-8: #0052d9;
|
||||
--td-brand-color-9: #0048cd;
|
||||
--td-brand-color-10: #0035b5;
|
||||
--td-brand-color-1: #f2f3ff;
|
||||
--td-brand-color-2: #d9e1ff;
|
||||
--td-brand-color-3: #b5c7ff;
|
||||
--td-brand-color-4: #8eabff;
|
||||
--td-brand-color-5: #618dff;
|
||||
--td-brand-color-6: #366ef4;
|
||||
--td-brand-color-7: #0052d9;
|
||||
--td-brand-color-8: #003cab;
|
||||
--td-brand-color-9: #002a7c;
|
||||
--td-brand-color-10: #001a57;
|
||||
}
|
||||
|
||||
:root[theme-mode='dark'] {
|
||||
|
|
|
|||
|
|
@ -1,47 +1,7 @@
|
|||
/** 公共前缀 */
|
||||
@starter-prefix: tdesign-starter;
|
||||
|
||||
// 组件库本身只有色彩相关的css token 扩展其他css token使用 待组件库扩充其他token后再做替换 这里使用less vars 避免两种css 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%; // 圆角-全圆角
|
||||
|
||||
// 颜色、尺寸、阴影、圆角、字体 variables 请参考 https://tdesign.tencent.com/starter/docs/vue/design-token
|
||||
// 响应式断点
|
||||
@screen-sm: 768px;
|
||||
@screen-md: 992px;
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ const transform: AxiosTransform = {
|
|||
resolve(config);
|
||||
}, config.requestOptions.retry.delay || 1);
|
||||
});
|
||||
|
||||
config.headers = { ...config.headers, 'Content-Type': 'application/json;charset=UTF-8' };
|
||||
return backoff.then((config) => request.request(config));
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user