fix: dashboard&layout style bug (#403)

* fix: style bug

* fix: style bug

src/layouts/components/Header.vue

@@ -33,7 +33,7 @@
               <t-icon name="help-circle" />
             </t-button>
           </t-tooltip>
-          <t-dropdown :min-column-width="135" trigger="click">
+          <t-dropdown :min-column-width="120" trigger="click">
             <template #dropdown>
               <t-dropdown-menu>
                 <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
@@ -165,6 +165,10 @@ const navToHelper = () => {
     top: 0;
     z-index: 1001;
 
+    :deep(.t-head-menu__inner) {
+      padding-right: var(--td-comp-margin-xl);
+    }
+
     &-side {
       left: 232px;
       right: 0;
@@ -188,14 +192,12 @@ const navToHelper = () => {
 
   :deep(.t-menu__item) {
     min-width: unset;
-    padding: 0px 16px;
   }
 }
 
 .operations-container {
   display: flex;
   align-items: center;
-  margin-right: 12px;
 
   .t-popup__reference {
     display: flex;
@@ -204,29 +206,15 @@ const navToHelper = () => {
   }
 
   .t-button {
-    margin: 0 8px;
+    margin-left: var(--td-comp-margin-l);
-    &.header-user-btn {
-      margin: 0;
-    }
-  }
-
-  .t-icon {
-    font-size: 20px;
-    &.general {
-      margin-right: 16px;
-    }
   }
 }
 
 .header-operate-left {
   display: flex;
-  margin-left: 20px;
   align-items: normal;
   line-height: 0;
-
+  padding-left: var(--td-comp-margin-xl);
-  .collapsed-icon {
-    font-size: 20px;
-  }
 }
 
 .header-logo-container {
@@ -253,14 +241,10 @@ const navToHelper = () => {
   display: inline-flex;
   align-items: center;
   color: var(--td-text-color-primary);
-  .t-icon {
-    margin-left: 4px;
-    font-size: 16px;
-  }
 }
 
 :deep(.t-head-menu__inner) {
-  border-bottom: 1px solid var(--td-border-level-1-color);
+  border-bottom: 1px solid var(--td-component-stroke);
 }
 
 .t-menu--light {
@@ -275,12 +259,6 @@ const navToHelper = () => {
   .header-user-account {
     color: rgba(255, 255, 255, 0.55);
   }
-  .t-button {
-    --ripple-color: var(--td-gray-color-10) !important;
-    &:hover {
-      background: var(--td-gray-color-12) !important;
-    }
-  }
 }
 
 .operations-dropdown-container-item {
@@ -288,20 +266,14 @@ const navToHelper = () => {
   display: flex;
   align-items: center;
 
-  .t-icon {
+  :deep(.t-dropdown__item-text) {
-    margin-right: 8px;
+    display: flex;
+    align-items: center;
   }
 
-  :deep(.t-dropdown__item) {
+  .t-icon {
-    .t-dropdown__item__content {
+    font-size: var(--td-comp-size-xxxs);
-      display: flex;
+    margin-right: var(--td-comp-margin-s);
-      justify-content: center;
-    }
-    .t-dropdown__item__content__text {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-    }
   }
 
   :deep(.t-dropdown__item) {
@@ -315,3 +287,13 @@ const navToHelper = () => {
   }
 }
 </style>
+
+<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
+<style lang="less">
+.operations-dropdown-container-item {
+  .t-dropdown__item-text {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/layouts/components/Notice.vue

@@ -37,7 +37,7 @@
         </div>
       </div>
     </template>
-    <t-badge :count="unreadMsg.length" :offset="[12, 8]">
+    <t-badge :count="unreadMsg.length" :offset="[4, 4]">
       <t-button theme="default" shape="square" variant="text">
         <t-icon name="mail" />
       </t-button>
@@ -190,15 +190,4 @@ const goDetail = () => {
     }
   }
 }
-
-.t-button {
-  margin: 0 8px;
-
-  .t-icon {
-    font-size: 20px;
-    &.general {
-      margin-right: 16px;
-    }
-  }
-}
 </style>

src/layouts/components/Search.vue

@@ -57,16 +57,10 @@ const changeSearchFocus = (value: boolean) => {
   display: flex;
   margin-left: 16px;
   .hover-active {
-    .t-input__inner {
+    background: var(--td-bg-color-secondarycontainer);
-      background: var(--td-bg-color-secondarycontainer);
-    }
-    .t-icon {
-      color: var(--td-brand-color) !important;
-    }
   }
 
   .t-icon {
-    font-size: 20px !important;
     color: var(--td-text-color-primary) !important;
   }
   .header-search {

src/layouts/setting.vue

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

src/pages/dashboard/base/components/MiddleChart.vue

@@ -176,15 +176,20 @@ const onCurrencyChange = (checkedValues: string[]) => {
 
 <style lang="less" scoped>
 .dashboard-chart-card {
-  padding: 8px;
+  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
 
   :deep(.t-card__header) {
-    padding-bottom: 24px;
+    padding: 0;
+  }
+
+  :deep(.t-card__body) {
+    padding: 0;
+    margin-top: var(--td-comp-margin-xxl);
   }
 
   :deep(.t-card__title) {
-    font-size: 20px;
+    font: var(--td-font-title-large);
-    font-weight: 500;
+    font-weight: 400;
   }
 }
 </style>

src/pages/dashboard/base/components/OutputOverview.vue

@@ -155,14 +155,23 @@ const onStokeDataChange = (checkedValues: string[]) => {
 </script>
 
 <style lang="less" scoped>
+:deep(.t-card__body) {
+  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
+}
+
 .dashboard-overview-card {
   :deep(.t-card__header) {
-    padding-bottom: 24px;
+    padding: 0;
   }
 
   :deep(.t-card__title) {
-    font-size: 20px;
+    font: var(--td-font-title-large);
-    font-weight: 500;
+    font-weight: 400;
+  }
+
+  :deep(.t-card__body) {
+    margin-top: var(--td-comp-margin-xxl);
+    padding: 0;
   }
 
   &.overview-panel {
@@ -171,30 +180,36 @@ const onStokeDataChange = (checkedValues: string[]) => {
 
   &.export-panel {
     border-left: none;
+    margin-left: calc(var(--td-comp-margin-xxxl) + var(--td-comp-margin-xxxl));
   }
 }
 
 .inner-card {
-  padding: 24px 0;
+  margin-top: var(--td-comp-margin-s);
+  margin-bottom: var(--td-comp-margin-xxxxl);
 
   :deep(.t-card__header) {
     padding-bottom: 0;
   }
 
+  :deep(.t-card__body) {
+    margin-top: var(--td-comp-margin-s);
+  }
+
   &__content {
     &-title {
-      font-size: 36px;
+      font: var(--td-font-headline-medium);
-      line-height: 44px;
+      font-weight: 400;
     }
 
     &-footer {
       display: flex;
       align-items: center;
-      line-height: 22px;
       color: var(--td-text-color-placeholder);
+      margin-top: var(--td-comp-margin-xxl);
 
       .trend-tag {
-        margin-left: 4px;
+        margin-left: var(--td-comp-margin-s);
       }
     }
   }

src/pages/dashboard/base/components/RankList.vue

@@ -3,7 +3,7 @@
     <t-col :xs="12" :xl="6">
       <t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
         <template #actions>
-          <t-radio-group default-value="dateVal">
+          <t-radio-group default-value="dateVal" variant="default-filled">
             <t-radio-button value="dateVal">本周</t-radio-button>
             <t-radio-button value="monthVal">近三个月</t-radio-button>
           </t-radio-group>
@@ -28,7 +28,7 @@
     <t-col :xs="12" :xl="6">
       <t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
         <template #actions>
-          <t-radio-group default-value="dateVal">
+          <t-radio-group default-value="dateVal" variant="default-filled">
             <t-radio-button value="dateVal">本周</t-radio-button>
             <t-radio-button value="monthVal">近三个月</t-radio-button>
           </t-radio-group>
@@ -67,15 +67,20 @@ const getRankClass = (index: number) => {
 
 <style lang="less" scoped>
 .dashboard-rank-card {
-  padding: 8px;
+  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
 
   :deep(.t-card__header) {
-    padding-bottom: 24px;
+    padding: 0;
   }
 
   :deep(.t-card__title) {
-    font-size: 20px;
+    font: var(--td-font-title-large);
-    font-weight: 500;
+    font-weight: 400;
+  }
+
+  :deep(.t-card__body) {
+    padding: 0;
+    margin-top: var(--td-comp-margin-xxl);
   }
 }
 

src/pages/dashboard/base/components/TopPanel.vue

@@ -4,24 +4,23 @@
       <t-card
         :title="item.title"
         :bordered="false"
-        :style="{ height: '168px' }"
         :class="{ 'dashboard-item': true, 'dashboard-item--main-color': index == 0 }"
       >
         <div class="dashboard-item-top">
-          <span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
+          <span :style="{ fontSize: `${resizeTime * 28}px` }">{{ item.number }}</span>
         </div>
         <div class="dashboard-item-left">
           <div
             v-if="index === 0"
             id="moneyContainer"
             class="dashboard-chart-container"
-            :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 66}px` }"
+            :style="{ width: `${resizeTime * 120}px`, height: '100px', marginTop: '-24px' }"
           ></div>
           <div
             v-else-if="index === 1"
             id="refundContainer"
             class="dashboard-chart-container"
-            :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 42}px` }"
+            :style="{ width: `${resizeTime * 120}px`, height: '56px', marginTop: '-24px' }"
           ></div>
           <span v-else-if="index === 2" :style="{ marginTop: `-24px` }">
             <usergroup-icon />
@@ -114,11 +113,11 @@ const updateContainer = () => {
   }
   moneyChart.resize({
     width: resizeTime.value * 120,
-    height: resizeTime.value * 66,
+    // height: resizeTime.value * 100,
   });
   refundChart.resize({
     width: resizeTime.value * 120,
-    height: resizeTime.value * 42,
+    // height: resizeTime.value * 56,
   });
 };
 
@@ -155,15 +154,19 @@ watch(
 
 <style lang="less" scoped>
 .dashboard-item {
-  padding: 8px;
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
+
+  :deep(.t-card__header) {
+    padding: 0;
+  }
 
   :deep(.t-card__footer) {
-    padding-top: 0;
+    padding: 0;
   }
 
   :deep(.t-card__title) {
-    font-size: 14px;
+    font: var(--td-font-body-medium);
-    font-weight: 500;
+    color: var(--td-text-color-secondary);
   }
 
   :deep(.t-card__body) {
@@ -172,6 +175,9 @@ watch(
     justify-content: space-between;
     flex: 1;
     position: relative;
+    padding: 0;
+    margin-top: var(--td-comp-margin-s);
+    margin-bottom: var(--td-comp-margin-xxl);
   }
 
   &:hover {
@@ -186,8 +192,8 @@ watch(
     > span {
       display: inline-block;
       color: var(--td-text-color-primary);
-      font-size: 36px;
+      font: var(--td-font-headline-medium);
-      line-height: 44px;
+      font-weight: 400;
     }
   }
 
@@ -199,6 +205,7 @@ watch(
 
     > .t-icon {
       cursor: pointer;
+      font-size: var(--td-comp-size-xxxs);
     }
   }
 
@@ -206,26 +213,25 @@ watch(
     display: flex;
     align-items: center;
     justify-content: center;
-    line-height: 22px;
     color: var(--td-text-color-placeholder);
   }
 
   &-trend {
-    margin-left: 8px;
+    margin-left: var(--td-comp-margin-s);
   }
 
   &-left {
     position: absolute;
     top: 0;
-    right: 32px;
+    right: 0;
 
     > span {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 56px;
+      width: var(--td-comp-size-xxxl);
-      height: 56px;
+      height: var(--td-comp-size-xxxl);
-      background: var(--td-brand-color-1);
+      background: var(--td-brand-color-light);
       border-radius: 50%;
 
       .t-icon {

src/pages/dashboard/base/constants.ts

@@ -125,7 +125,7 @@ export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
     align: 'center',
     colKey: 'index',
     title: '排名',
-    width: 80,
+    width: 70,
     fixed: 'left',
   },
   {
@@ -138,26 +138,20 @@ export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
   {
     align: 'center',
     colKey: 'growUp',
-    width: 100,
+    width: 70,
     title: '较上周',
   },
   {
     align: 'center',
     colKey: 'count',
     title: '订单量',
-    width: 100,
+    width: 70,
-  },
-  {
-    align: 'center',
-    colKey: 'date',
-    width: 140,
-    title: '合同签订日期',
   },
   {
     align: 'center',
     colKey: 'operation',
     title: '操作',
-    width: 80,
+    width: 70,
     fixed: 'right',
   },
 ];
@@ -167,7 +161,7 @@ export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
     align: 'center',
     colKey: 'index',
     title: '排名',
-    width: 80,
+    width: 70,
     fixed: 'left',
   },
   {
@@ -180,26 +174,20 @@ export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
   {
     align: 'center',
     colKey: 'growUp',
-    width: 100,
+    width: 70,
     title: '较上周',
   },
   {
     align: 'center',
     colKey: 'count',
     title: '订单量',
-    width: 100,
+    width: 70,
-  },
-  {
-    align: 'center',
-    colKey: 'date',
-    width: 140,
-    title: '合同签订日期',
   },
   {
     align: 'center',
     colKey: 'operation',
     title: '操作',
-    width: 80,
+    width: 70,
     fixed: 'right',
   },
 ];

src/pages/dashboard/base/index.vue

@@ -28,7 +28,4 @@ import OutputOverview from './components/OutputOverview.vue';
 .row-container:not(:last-child) {
   margin-bottom: 16px;
 }
-:deep() .t-card__body {
-  padding-top: 0;
-}
 </style>

src/pages/dashboard/detail/index.vue

@@ -169,11 +169,20 @@ const onMaterialChange = (value: string[]) => {
 
 // 统一增加8px;
 .dashboard-detail-card {
-  padding: 8px;
+  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
+
+  :deep(.t-card__header) {
+    padding: 0;
+  }
 
   :deep(.t-card__title) {
-    font-size: 20px;
+    font: var(--td-font-title-large);
-    font-weight: 500;
+    font-weight: 400;
+  }
+
+  :deep(.t-card__body) {
+    padding: 0;
+    margin-top: var(--td-comp-margin-xxl);
   }
 
   :deep(.t-card__actions) {
@@ -186,11 +195,10 @@ const onMaterialChange = (value: string[]) => {
   display: flex;
   flex-direction: column;
   flex: 1;
-  height: 170px;
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
-  padding: 8px;
 
-  :deep(.t-card__header) {
+  :deep(.t-card__description) {
-    padding-bottom: 8px;
+    margin: 0;
   }
 
   :deep(.t-card__body) {
@@ -198,7 +206,7 @@ const onMaterialChange = (value: string[]) => {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding-top: 0;
+    margin-top: var(--td-comp-margin-s);
   }
 
   &.dark {
@@ -216,9 +224,10 @@ const onMaterialChange = (value: string[]) => {
   }
 
   &__number {
-    font-size: 36px;
+    font: var(--td-font-headline-large);
-    line-height: 44px;
+    font-weight: 400;
     color: var(--td-text-color-primary);
+    margin-bottom: var(--td-comp-margin-xxl);
   }
 
   &__text {
@@ -226,16 +235,18 @@ const onMaterialChange = (value: string[]) => {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    font-size: 14px;
+    font: var(--td-font-body-medium);
     color: var(--td-text-color-placeholder);
     text-align: left;
-    line-height: 18px;
 
+    .t-icon {
+      font-size: var(--td-comp-size-xxxs);
+    }
     &-left {
       display: flex;
 
       .icon {
-        margin: 0 8px;
+        margin: 0 var(--td-comp-margin-s);
       }
     }
   }

src/style/layout.less

@@ -83,7 +83,7 @@
   }
 
   &-content-layout {
-    padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
+    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
   }
 
   &-layout {