From 915a6bd1180a7e51d26cfa2a2a9cc05a04a14947 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 28 Apr 2022 14:19:32 +0800
Subject: [PATCH] refactor(card): replace all card with t-card

---
 src/components/card/Card.vue                  | 183 --------
 src/components/card/index.vue                 | 160 -------
 src/components/product-card/index.vue         | 127 ++++++
 src/layouts/components/Header.vue             |  22 +-
 .../base/components/middle-chart.vue          | 170 +++++++
 .../dashboard/base/components/overview.vue    | 205 +++++++++
 .../dashboard/base/components/rank-list.vue   | 100 +++++
 .../dashboard/base/components/top-panel.vue   | 260 +++++++++++
 src/pages/dashboard/base/constants.ts         |   4 +-
 src/pages/dashboard/base/index.less           |  95 ----
 src/pages/dashboard/base/index.vue            | 416 +-----------------
 src/pages/dashboard/detail/index.less         |  73 ---
 src/pages/dashboard/detail/index.vue          | 116 ++++-
 src/pages/detail/advanced/index.less          |  18 +
 src/pages/detail/advanced/index.vue           |  19 +-
 src/pages/detail/base/index.less              |  16 +-
 src/pages/detail/base/index.vue               |  12 +-
 src/pages/detail/deploy/constants.ts          |   2 +-
 src/pages/detail/deploy/index.vue             |  30 +-
 src/pages/form/step/index.less                |  20 +
 src/pages/form/step/index.vue                 |   5 +-
 src/pages/list/base/index.vue                 |  13 +-
 src/pages/list/card/index.vue                 |   4 +-
 src/pages/list/components/CommonTable.vue     |   3 +-
 src/pages/user/index.less                     |   9 +-
 src/pages/user/index.vue                      |  34 +-
 src/style/index.less                          |   4 -
 src/style/layout.less                         |  16 +-
 28 files changed, 1104 insertions(+), 1032 deletions(-)
 delete mode 100644 src/components/card/Card.vue
 delete mode 100644 src/components/card/index.vue
 create mode 100644 src/components/product-card/index.vue
 create mode 100644 src/pages/dashboard/base/components/middle-chart.vue
 create mode 100644 src/pages/dashboard/base/components/overview.vue
 create mode 100644 src/pages/dashboard/base/components/rank-list.vue
 create mode 100644 src/pages/dashboard/base/components/top-panel.vue
 delete mode 100644 src/pages/dashboard/base/index.less
 delete mode 100644 src/pages/dashboard/detail/index.less

diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
deleted file mode 100644
index 27ddec9..0000000
--- a/src/components/card/Card.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-  <div :class="cardClass">
-    <div class="list-card-item_detail">
-      <t-row justify="space-between">
-        <div :class="cardLogoClass">
-          <shop-icon v-if="product.type === 1" />
-          <calendar-icon v-if="product.type === 2" />
-          <service-icon v-if="product.type === 3" />
-          <user-avatar-icon v-if="product.type === 4" />
-          <laptop-icon v-if="product.type === 5" />
-        </div>
-        <t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">
-          {{ product.isSetup ? '已启用' : '已停用' }}
-        </t-tag>
-      </t-row>
-      <p class="list-card-item_detail--name">{{ product.name }}</p>
-      <p class="list-card-item_detail--desc">{{ product.description }}</p>
-      <t-row justify="space-between" align="middle" :class="cardControlClass">
-        <div>
-          <t-button shape="circle" :disabled="!product.isSetup">{{ typeMap[product.type - 1] }}</t-button>
-          <t-button shape="circle" :disabled="!product.isSetup">
-            <add-icon />
-          </t-button>
-        </div>
-        <t-dropdown
-          :disabled="!product.isSetup"
-          trigger="click"
-          :options="[
-            {
-              content: '管理',
-              value: 'manage',
-              onClick: () => handleClickManage(product),
-            },
-            {
-              content: '删除',
-              value: 'delete',
-              onClick: () => handleClickDelete(product),
-            },
-          ]"
-        >
-          <t-button theme="default" :disabled="!product.isSetup" shape="square" variant="text">
-            <more-icon />
-          </t-button>
-        </t-dropdown>
-      </t-row>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed, PropType } from 'vue';
-import {
-  ShopIcon,
-  CalendarIcon,
-  ServiceIcon,
-  UserAvatarIcon,
-  LaptopIcon,
-  MoreIcon,
-  AddIcon,
-} from 'tdesign-icons-vue-next';
-
-export interface CardProductType {
-  type: number;
-  isSetup: boolean;
-  description: string;
-  name: string;
-}
-
-const props = defineProps({
-  product: {
-    type: Object as PropType<CardProductType>,
-  },
-});
-
-const emit = defineEmits(['manage-product', 'delete-item']);
-
-const cardClass = computed(() => ['list-card-item', { 'list-card-item__disabled': !props.product.isSetup }]);
-
-const cardLogoClass = computed(() => [
-  'list-card-item_detail--logo',
-  { 'list-card-item_detail--logo__disabled': !props.product.isSetup },
-]);
-
-const cardControlClass = computed(() => [
-  'list-card-item_detail--control',
-  { 'list-card-item_detail--control__disabled': !props.product.isSetup },
-]);
-
-const typeMap = ['A', 'B', 'C', 'D', 'E'];
-
-const handleClickManage = (product: CardProductType) => {
-  emit('manage-product', product);
-};
-
-const handleClickDelete = (product: CardProductType) => {
-  emit('delete-item', product);
-};
-</script>
-
-<style lang="less" scoped>
-@import '@/style/variables';
-
-.list-card-item {
-  display: flex;
-  flex-direction: column;
-  border-radius: @border-radius;
-  overflow: hidden;
-  cursor: pointer;
-  color: @text-color-secondary;
-
-  &_detail {
-    flex: 1;
-    background: @bg-color-container;
-    padding: 24px 32px;
-    min-height: 140px;
-
-    &--logo {
-      width: 56px;
-      height: 56px;
-      border-radius: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: @brand-color-1;
-      font-size: 32px;
-      color: @brand-color;
-
-      &__disabled {
-        color: @brand-color-3;
-      }
-    }
-
-    &--name {
-      margin: 24px 0 8px 0;
-      font-size: 16px;
-      font-weight: 400;
-      color: @text-color-primary;
-    }
-
-    &--desc {
-      font-size: 12px;
-      line-height: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      margin-bottom: 24px;
-      height: 40px;
-    }
-
-    &--control {
-      > div:first-child {
-        position: relative;
-
-        > button:last-child {
-          position: absolute;
-          left: 18px;
-          background-color: @brand-color-2;
-          --ripple-color: @brand-color-2;
-          color: @brand-color;
-        }
-      }
-
-      .t-icon-more {
-        font-size: 24px;
-        color: @text-color-primary;
-      }
-    }
-  }
-
-  &__disabled {
-    color: @text-color-disabled;
-
-    .list-card-item_detail--name {
-      color: @text-color-disabled;
-    }
-
-    .t-icon-more {
-      color: @text-color-disabled;
-    }
-  }
-}
-</style>
diff --git a/src/components/card/index.vue b/src/components/card/index.vue
deleted file mode 100644
index bb0d579..0000000
--- a/src/components/card/index.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-  <div :class="containerCls">
-    <div v-if="title || $slots.title || $slots.option || subtitle || describe" :class="titleCls">
-      <div :class="titleTextCls">
-        {{ title }}
-        <span v-if="describe" class="card-describe">{{ describe }}</span>
-        <span v-if="subtitle" class="card-subtitle">{{ subtitle }}</span>
-      </div>
-      <span class="card-option">
-        <slot name="option" />
-      </span>
-    </div>
-    <div class="card-content">
-      <slot />
-    </div>
-    <div v-if="size !== 'small'" class="card-spacer-bottom" />
-  </div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps({
-  title: String,
-  subtitle: String,
-  describe: String,
-  compact: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String,
-    default: 'default',
-  },
-  border: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const containerCls = computed(() => {
-  const { compact, border } = props;
-  return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
-});
-
-const titleCls = computed(() => {
-  const { size } = props;
-  return [
-    'card-title',
-    {
-      'card-title--small': size === 'small',
-      'card-title--default': size !== 'small',
-    },
-  ];
-});
-
-const titleTextCls = computed(() => {
-  const { size } = props;
-  return [
-    {
-      'card-title__text--small': size === 'small',
-      'card-title__text--default': size !== 'small',
-    },
-  ];
-});
-</script>
-<style lang="less">
-@import '@/style/variables';
-
-.t-col-lg-6 + .t-col-lg-6 {
-  @media (max-width: @screen-md-max) {
-    .card-container {
-      margin-top: 16px;
-    }
-  }
-}
-
-.card {
-  &-option {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-container {
-    padding: 24px 32px;
-    background: @bg-color-container;
-    border-radius: @border-radius;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-
-    &-compact {
-      padding: 16px 16px 0;
-      margin-top: 24px;
-      margin-bottom: 16px;
-    }
-
-    &--border {
-      border: solid 1px @component-border;
-    }
-  }
-
-  &-title {
-    display: flex;
-    justify-content: space-between;
-    font-size: 20px;
-    line-height: 24px;
-    font-family: PingFangSC-Regular;
-    font-weight: 500;
-    color: @text-color-primary;
-
-    &--small {
-      margin-bottom: 8px;
-    }
-
-    &--default {
-      margin-bottom: 24px;
-    }
-
-    &__text {
-      display: inline-flex;
-
-      &--default {
-        margin: @spacer 0;
-      }
-
-      &--small {
-        display: inline-block;
-        width: 100%;
-      }
-    }
-  }
-
-  &-describe {
-    font-size: 14px;
-    color: @brand-color;
-    color: @text-color-placeholder;
-    line-height: 22px;
-    margin-left: 4px;
-  }
-  &-subtitle {
-    font-size: 14px;
-    color: @brand-color;
-    color: @text-color-secondary;
-    line-height: 22px;
-    margin-left: 4px;
-  }
-
-  &-content {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    flex: 1;
-  }
-
-  &-spacer-bottom {
-    height: @spacer;
-  }
-}
-</style>
diff --git a/src/components/product-card/index.vue b/src/components/product-card/index.vue
new file mode 100644
index 0000000..39cd303
--- /dev/null
+++ b/src/components/product-card/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <t-card theme="poster2">
+    <template #avatar>
+      <t-avatar size="56px">
+        <template #icon>
+          <shop-icon v-if="product.type === 1" />
+          <calendar-icon v-if="product.type === 2" />
+          <service-icon v-if="product.type === 3" />
+          <user-avatar-icon v-if="product.type === 4" />
+          <laptop-icon v-if="product.type === 5" />
+        </template>
+      </t-avatar>
+    </template>
+    <template #status>
+      <t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">{{
+        product.isSetup ? '已启用' : '已停用'
+      }}</t-tag>
+    </template>
+    <template #content>
+      <p class="list-card-item_detail--name">{{ product.name }}</p>
+      <p class="list-card-item_detail--desc">{{ product.description }}</p>
+    </template>
+    <template #footer>
+      <t-avatar-group cascading="left-up" :max="2">
+        <t-avatar>{{ typeMap[product.type - 1] }}</t-avatar>
+        <t-avatar
+          ><template #icon>
+            <add-icon />
+          </template>
+        </t-avatar>
+      </t-avatar-group>
+    </template>
+    <template #actions>
+      <t-dropdown
+        :disabled="!product.isSetup"
+        trigger="click"
+        :options="[
+          {
+            content: '管理',
+            value: 'manage',
+            onClick: () => handleClickManage(product),
+          },
+          {
+            content: '删除',
+            value: 'delete',
+            onClick: () => handleClickDelete(product),
+          },
+        ]"
+      >
+        <t-button theme="default" :disabled="!product.isSetup" shape="square" variant="text">
+          <more-icon />
+        </t-button>
+      </t-dropdown>
+    </template>
+  </t-card>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue';
+import {
+  ShopIcon,
+  CalendarIcon,
+  ServiceIcon,
+  UserAvatarIcon,
+  LaptopIcon,
+  MoreIcon,
+  AddIcon,
+} from 'tdesign-icons-vue-next';
+
+export interface CardProductType {
+  type: number;
+  isSetup: boolean;
+  description: string;
+  name: string;
+}
+
+// eslint-disable-next-line
+const props = defineProps({
+  product: {
+    type: Object as PropType<CardProductType>,
+  },
+});
+
+const emit = defineEmits(['manage-product', 'delete-item']);
+
+const typeMap = ['A', 'B', 'C', 'D', 'E'];
+
+const handleClickManage = (product: CardProductType) => {
+  emit('manage-product', product);
+};
+
+const handleClickDelete = (product: CardProductType) => {
+  emit('delete-item', product);
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.list-card-item {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+
+  &_detail {
+    min-height: 140px;
+
+    &--name {
+      margin-bottom: 8px;
+      font-size: 16px;
+      font-weight: 400;
+      color: @text-color-primary;
+    }
+
+    &--desc {
+      color: @text-color-secondary;
+      font-size: 12px;
+      line-height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      height: 40px;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 7584b55..14878ac 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -3,7 +3,7 @@
     <t-head-menu :class="menuCls" :theme="theme" expand-type="popup" :value="active">
       <template #logo>
         <span v-if="showLogo" class="header-logo-container" @click="handleNav('/dashboard/base')">
-          <tLogoFull class="t-logo" />
+          <LogoFull class="t-logo" />
         </span>
         <div v-else class="header-operate-left">
           <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
@@ -69,7 +69,7 @@ import { useRouter } from 'vue-router';
 import { useSettingStore } from '@/store';
 import { getActive } from '@/router';
 import { prefix } from '@/config/global';
-import tLogoFull from '@/assets/assets-logo-full.svg?component';
+import LogoFull from '@/assets/assets-logo-full.svg?component';
 import { MenuRoute } from '@/interface';
 
 import Notice from './Notice.vue';
@@ -161,24 +161,6 @@ const navToHelper = () => {
     height: 64px;
   }
 
-  &-menu-fixed {
-    position: fixed;
-    top: 0;
-    z-index: 10;
-
-    &-side {
-      left: 232px;
-      right: 0;
-      z-index: 10;
-      width: auto;
-      transition: all 0.3s;
-
-      &-compact {
-        left: 64px;
-      }
-    }
-  }
-
   &-logo-container {
     cursor: pointer;
     display: inline-flex;
diff --git a/src/pages/dashboard/base/components/middle-chart.vue b/src/pages/dashboard/base/components/middle-chart.vue
new file mode 100644
index 0000000..b3e4a72
--- /dev/null
+++ b/src/pages/dashboard/base/components/middle-chart.vue
@@ -0,0 +1,170 @@
+<template>
+  <t-row :gutter="16" class="row-container">
+    <t-col :xs="12" :xl="9">
+      <t-card title="统计数据" :subtitle="`(万元)${currentMonth}`" class="dashboard-chart-card">
+        <template #option>
+          <div class="dashboard-chart-title-container">
+            <t-date-picker
+              class="card-date-picker-container"
+              theme="primary"
+              mode="date"
+              range
+              :default-value="LAST_7_DAYS"
+              @change="onCurrencyChange"
+            />
+          </div>
+        </template>
+        <div
+          id="monitorContainer"
+          ref="monitorContainer"
+          class="dashboard-chart-container"
+          :style="{ width: '100%', height: `${resizeTime * 326}px` }"
+        />
+      </t-card>
+    </t-col>
+    <t-col :xs="12" :xl="3">
+      <t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card">
+        <div
+          id="countContainer"
+          ref="countContainer"
+          :style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
+          class="dashboard-chart-container"
+        />
+      </t-card>
+    </t-col>
+  </t-row>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
+
+import * as echarts from 'echarts/core';
+import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
+import { PieChart, LineChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useSettingStore } from '@/store';
+import { LAST_7_DAYS } from '@/utils/date';
+import { changeChartsTheme } from '@/utils/color';
+
+import { getPieChartDataSet, getLineChartDataSet } from '../index';
+
+echarts.use([TooltipComponent, LegendComponent, PieChart, GridComponent, LineChart, CanvasRenderer]);
+
+const getThisMonth = (checkedValues?: string[]) => {
+  let date: Date;
+  if (!checkedValues || checkedValues.length === 0) {
+    date = new Date();
+    return `${date.getFullYear()}-${date.getMonth() + 1}`;
+  }
+  date = new Date(checkedValues[0]);
+  const date2 = new Date(checkedValues[1]);
+
+  const startMonth = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
+  const endMonth = date2.getMonth() + 1 > 9 ? date2.getMonth() + 1 : `0${date2.getMonth() + 1}`;
+  return `${date.getFullYear()}-${startMonth}  至  ${date2.getFullYear()}-${endMonth}`;
+};
+
+const store = useSettingStore();
+const resizeTime = ref(1);
+
+const chartColors = computed(() => store.chartColors);
+
+// monitorChart
+let monitorContainer: HTMLElement;
+let monitorChart: echarts.ECharts;
+const renderMonitorChart = () => {
+  if (!monitorContainer) {
+    monitorContainer = document.getElementById('monitorContainer');
+  }
+  monitorChart = echarts.init(monitorContainer);
+  monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
+};
+
+// monitorChart
+let countContainer: HTMLElement;
+let countChart: echarts.ECharts;
+const renderCountChart = () => {
+  if (!countContainer) {
+    countContainer = document.getElementById('countContainer');
+  }
+  countChart = echarts.init(countContainer);
+  countChart.setOption(getPieChartDataSet(chartColors.value));
+};
+
+const renderCharts = () => {
+  renderMonitorChart();
+  renderCountChart();
+};
+
+// chartSize update
+const updateContainer = () => {
+  if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
+    resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
+  } else if (document.documentElement.clientWidth < 1080) {
+    resizeTime.value = Number((document.documentElement.clientWidth / 1080).toFixed(2));
+  } else {
+    resizeTime.value = 1;
+  }
+
+  monitorChart.resize({
+    width: monitorContainer.clientWidth,
+    height: resizeTime.value * 326,
+  });
+  countChart.resize({
+    width: resizeTime.value * 326,
+    height: resizeTime.value * 326,
+  });
+};
+
+onMounted(() => {
+  renderCharts();
+  nextTick(() => {
+    updateContainer();
+  });
+  window.addEventListener('resize', updateContainer, false);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainer);
+});
+
+const currentMonth = ref(getThisMonth());
+
+watch(
+  () => store.brandTheme,
+  () => {
+    changeChartsTheme([monitorChart, countChart]);
+  },
+);
+
+watch(
+  () => store.mode,
+  () => {
+    [monitorChart, countChart].forEach((item) => {
+      item.dispose();
+    });
+
+    renderCharts();
+  },
+);
+
+const onCurrencyChange = (checkedValues: string[]) => {
+  currentMonth.value = getThisMonth(checkedValues);
+  monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
+};
+</script>
+
+<style lang="less" scoped>
+.dashboard-chart-card {
+  padding: 8px;
+
+  :deep(.t-card__header) {
+    padding-bottom: 24px;
+  }
+
+  :deep(.t-card__title) {
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/base/components/overview.vue b/src/pages/dashboard/base/components/overview.vue
new file mode 100644
index 0000000..6cbf67e
--- /dev/null
+++ b/src/pages/dashboard/base/components/overview.vue
@@ -0,0 +1,205 @@
+<template>
+  <t-card>
+    <t-row>
+      <t-col :xs="12" :xl="9">
+        <t-card
+          :bordered="false"
+          title="出入库概览"
+          subtitle="(件)"
+          :class="{ 'dashboard-overview-card': true, 'overview-panel': true }"
+        >
+          <template #actions>
+            <t-date-picker
+              class="card-date-picker-container"
+              theme="primary"
+              mode="date"
+              range
+              :default-value="LAST_7_DAYS"
+              @change="onStokeDataChange"
+            />
+          </template>
+          <div
+            id="stokeContainer"
+            ref="stokeContainer"
+            style="width: 100%; height: 351px"
+            class="dashboard-chart-container"
+          ></div>
+        </t-card>
+      </t-col>
+      <t-col :xs="12" :xl="3">
+        <t-card :bordered="false" :class="{ 'dashboard-overview-card': true, 'export-panel': true }">
+          <template #actions>
+            <t-button>导出数据</t-button>
+          </template>
+          <t-row>
+            <t-col :xs="6" :xl="12">
+              <t-card :bordered="false" subtitle="本月出库总计（件）" class="inner-card">
+                <div class="inner-card__content">
+                  <div class="inner-card__content-title">1726</div>
+                  <div class="inner-card__content-footer">
+                    自从上周以来
+                    <trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
+                  </div>
+                </div>
+              </t-card>
+            </t-col>
+            <t-col :xs="6" :xl="12">
+              <t-card :bordered="false" subtitle="本月入库总计（件）" class="inner-card">
+                <div class="inner-card__content">
+                  <div class="inner-card__content-title">226</div>
+                  <div class="inner-card__content-footer">
+                    自从上周以来
+                    <trend class="trend-tag" type="down" :is-reverse-color="false" describe="20.3%" />
+                  </div>
+                </div>
+              </t-card>
+            </t-col>
+          </t-row>
+        </t-card>
+      </t-col>
+    </t-row>
+  </t-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'DashboardBase',
+};
+</script>
+
+<script setup lang="ts">
+import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
+
+import * as echarts from 'echarts/core';
+import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useSettingStore } from '@/store';
+import { LAST_7_DAYS } from '@/utils/date';
+import { changeChartsTheme } from '@/utils/color';
+
+// 导入样式
+import Trend from '@/components/trend/index.vue';
+import { constructInitDataset } from '../index';
+
+echarts.use([TooltipComponent, LegendComponent, GridComponent, LineChart, CanvasRenderer]);
+
+const store = useSettingStore();
+const resizeTime = ref(1);
+
+const chartColors = computed(() => store.chartColors);
+
+// stokeCharts
+let stokeContainer: HTMLElement;
+let stokeChart: echarts.ECharts;
+const renderStokeChart = () => {
+  if (!stokeContainer) {
+    stokeContainer = document.getElementById('stokeContainer');
+  }
+  stokeChart = echarts.init(stokeContainer);
+  stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
+};
+
+const renderCharts = () => {
+  renderStokeChart();
+};
+
+// chartSize update
+const updateContainer = () => {
+  if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
+    resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
+  } else if (document.documentElement.clientWidth < 1080) {
+    resizeTime.value = Number((document.documentElement.clientWidth / 1080).toFixed(2));
+  } else {
+    resizeTime.value = 1;
+  }
+
+  stokeChart.resize({
+    width: stokeContainer.clientWidth,
+    height: stokeContainer.clientHeight,
+  });
+};
+
+onMounted(() => {
+  renderCharts();
+  nextTick(() => {
+    updateContainer();
+  });
+  window.addEventListener('resize', updateContainer, false);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainer);
+});
+
+watch(
+  () => store.brandTheme,
+  () => {
+    changeChartsTheme([stokeChart]);
+  },
+);
+
+watch(
+  () => store.mode,
+  () => {
+    [stokeChart].forEach((item) => {
+      item.dispose();
+    });
+
+    renderCharts();
+  },
+);
+
+const onStokeDataChange = (checkedValues: string[]) => {
+  stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.dashboard-overview-card {
+  :deep(.t-card__header) {
+    padding-bottom: 24px;
+  }
+
+  :deep(.t-card__title) {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  &.overview-panel {
+    border-right: none;
+  }
+
+  &.export-panel {
+    border-left: none;
+  }
+}
+
+.inner-card {
+  padding: 24px 0;
+
+  :deep(.t-card__header) {
+    padding-bottom: 0;
+  }
+
+  &__content {
+    &-title {
+      font-size: 36px;
+      line-height: 44px;
+    }
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      line-height: 22px;
+      color: @text-color-placeholder;
+
+      .trend-tag {
+        margin-left: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/dashboard/base/components/rank-list.vue b/src/pages/dashboard/base/components/rank-list.vue
new file mode 100644
index 0000000..0c1588c
--- /dev/null
+++ b/src/pages/dashboard/base/components/rank-list.vue
@@ -0,0 +1,100 @@
+<template>
+  <t-row :gutter="16" class="row-container">
+    <t-col :xs="12" :xl="6">
+      <t-card title="销售订单排名" class="dashboard-rank-card">
+        <template #actions>
+          <t-radio-group default-value="dateVal">
+            <t-radio-button value="dateVal">本周</t-radio-button>
+            <t-radio-button value="monthVal">近三个月</t-radio-button>
+          </t-radio-group>
+        </template>
+        <t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
+          <template #index="{ rowIndex }">
+            <span :class="getRankClass(rowIndex)">
+              {{ rowIndex + 1 }}
+            </span>
+          </template>
+          <template #growUp="{ row }">
+            <span>
+              <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
+            </span>
+          </template>
+          <template #operation="slotProps">
+            <a class="t-button-link" @click="rehandleClickOp(slotProps)">详情</a>
+          </template>
+        </t-table>
+      </t-card>
+    </t-col>
+    <t-col :xs="12" :xl="6">
+      <t-card title="销售订单排名" class="dashboard-rank-card">
+        <template #actions>
+          <t-radio-group default-value="dateVal">
+            <t-radio-button value="dateVal">本周</t-radio-button>
+            <t-radio-button value="monthVal">近三个月</t-radio-button>
+          </t-radio-group>
+        </template>
+        <t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
+          <template #index="{ rowIndex }">
+            <span :class="getRankClass(rowIndex)">
+              {{ rowIndex + 1 }}
+            </span>
+          </template>
+          <template #growUp="{ row }">
+            <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
+          </template>
+          <template #operation="slotProps">
+            <a class="t-button-link" @click="rehandleClickOp(slotProps)">详情</a>
+          </template>
+        </t-table>
+      </t-card>
+    </t-col>
+  </t-row>
+</template>
+
+<script setup lang="ts">
+// 导入样式
+import Trend from '@/components/trend/index.vue';
+
+import { SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } from '../constants';
+
+const rehandleClickOp = (val: MouseEvent) => {
+  console.log(val);
+};
+const getRankClass = (index: number) => {
+  return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.dashboard-rank-card {
+  padding: 8px;
+
+  :deep(.t-card__header) {
+    padding-bottom: 24px;
+  }
+
+  :deep(.t-card__title) {
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+
+.dashboard-rank__cell {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  color: white;
+  font-size: 14px;
+  background-color: @gray-color-5;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+
+  &--top {
+    background: @brand-color;
+  }
+}
+</style>
diff --git a/src/pages/dashboard/base/components/top-panel.vue b/src/pages/dashboard/base/components/top-panel.vue
new file mode 100644
index 0000000..d11eb40
--- /dev/null
+++ b/src/pages/dashboard/base/components/top-panel.vue
@@ -0,0 +1,260 @@
+<template>
+  <t-row :gutter="[16, 16]">
+    <t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3">
+      <t-card
+        :title="item.title"
+        :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>
+        </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` }"
+          ></div>
+          <div
+            v-else-if="index === 1"
+            id="refundContainer"
+            class="dashboard-chart-container"
+            :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 42}px` }"
+          ></div>
+          <span v-else-if="index === 2" :style="{ marginTop: `-24px` }">
+            <usergroup-icon />
+          </span>
+          <span v-else :style="{ marginTop: '-24px' }">
+            <file-icon />
+          </span>
+        </div>
+        <template #footer>
+          <div class="dashboard-item-bottom">
+            <div class="dashboard-item-block">
+              自从上周以来
+              <trend
+                class="dashboard-item-trend"
+                :type="item.upTrend ? 'up' : 'down'"
+                :is-reverse-color="index === 0"
+                :describe="item.upTrend || item.downTrend"
+              />
+            </div>
+            <t-icon name="chevron-right" />
+          </div>
+        </template>
+      </t-card>
+    </t-col>
+  </t-row>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'DashboardBase',
+};
+</script>
+
+<script setup lang="ts">
+import { onMounted, watch, ref, onUnmounted, nextTick } from 'vue';
+
+import * as echarts from 'echarts/core';
+import { LineChart, BarChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import { UsergroupIcon, FileIcon } from 'tdesign-icons-vue-next';
+import { useSettingStore } from '@/store';
+import { changeChartsTheme } from '@/utils/color';
+
+// 导入样式
+import Trend from '@/components/trend/index.vue';
+import { constructInitDashboardDataset } from '../index';
+
+import { PANE_LIST } from '../constants';
+
+echarts.use([LineChart, BarChart, CanvasRenderer]);
+
+const store = useSettingStore();
+const resizeTime = ref(1);
+
+// moneyCharts
+let moneyContainer: HTMLElement;
+let moneyChart: echarts.ECharts;
+const renderMoneyChart = () => {
+  if (!moneyContainer) {
+    moneyContainer = document.getElementById('moneyContainer');
+  }
+  moneyChart = echarts.init(moneyContainer);
+  moneyChart.setOption(constructInitDashboardDataset('line'));
+};
+
+// refundCharts
+let refundContainer: HTMLElement;
+let refundChart: echarts.ECharts;
+const renderRefundChart = () => {
+  if (!refundContainer) {
+    refundContainer = document.getElementById('refundContainer');
+  }
+  refundChart = echarts.init(refundContainer);
+  refundChart.setOption(constructInitDashboardDataset('bar'));
+};
+
+const renderCharts = () => {
+  renderMoneyChart();
+  renderRefundChart();
+};
+
+// chartSize update
+const updateContainer = () => {
+  if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
+    resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
+  } else if (document.documentElement.clientWidth < 1080) {
+    resizeTime.value = Number((document.documentElement.clientWidth / 1080).toFixed(2));
+  } else {
+    resizeTime.value = 1;
+  }
+  moneyChart.resize({
+    width: resizeTime.value * 120,
+    height: resizeTime.value * 66,
+  });
+  refundChart.resize({
+    width: resizeTime.value * 120,
+    height: resizeTime.value * 42,
+  });
+};
+
+onMounted(() => {
+  renderCharts();
+  nextTick(() => {
+    updateContainer();
+  });
+  window.addEventListener('resize', updateContainer, false);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainer);
+});
+
+watch(
+  () => store.brandTheme,
+  () => {
+    changeChartsTheme([refundChart]);
+  },
+);
+
+watch(
+  () => store.mode,
+  () => {
+    [moneyChart, refundChart].forEach((item) => {
+      item.dispose();
+    });
+
+    renderCharts();
+  },
+);
+</script>
+
+<style lang="less" scoped>
+@import '@/style/variables.less';
+
+.dashboard-item {
+  padding: 8px;
+
+  :deep(.t-card__footer) {
+    padding-top: 0;
+  }
+
+  :deep(.t-card__title) {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  :deep(.t-card__body) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    position: relative;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &-top {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    > span {
+      display: inline-block;
+      color: @text-color-primary;
+      font-size: 36px;
+      line-height: 44px;
+    }
+  }
+
+  &-bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    > .t-icon {
+      cursor: pointer;
+    }
+  }
+
+  &-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 22px;
+    color: @text-color-placeholder;
+  }
+
+  &-trend {
+    margin-left: 8px;
+  }
+
+  &-left {
+    position: absolute;
+    top: 0;
+    right: 32px;
+
+    > span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 56px;
+      height: 56px;
+      background: @brand-color-1;
+      border-radius: 50%;
+
+      .t-icon {
+        font-size: 24px;
+        color: @brand-color;
+      }
+    }
+  }
+
+  // 针对第一个卡片需要反色处理
+  &--main-color {
+    background: @brand-color;
+    color: @text-color-primary;
+
+    :deep(.t-card__title),
+    .dashboard-item-top span,
+    .dashboard-item-bottom {
+      color: @text-color-anti;
+    }
+
+    .dashboard-item-block {
+      color: @text-color-anti;
+      opacity: 0.6;
+    }
+
+    .dashboard-item-bottom {
+      color: @text-color-anti;
+    }
+  }
+}
+</style>
diff --git a/src/pages/dashboard/base/constants.ts b/src/pages/dashboard/base/constants.ts
index 153e170..9075524 100644
--- a/src/pages/dashboard/base/constants.ts
+++ b/src/pages/dashboard/base/constants.ts
@@ -133,7 +133,7 @@ export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
     ellipsis: true,
     colKey: 'productName',
     title: '客户名称',
-    minWidth: 200,
+    width: 150,
   },
   {
     align: 'center',
@@ -174,8 +174,8 @@ export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
     align: 'left',
     ellipsis: true,
     colKey: 'productName',
+    width: 150,
     title: '供应商名称',
-    minWidth: 200,
   },
   {
     align: 'center',
diff --git a/src/pages/dashboard/base/index.less b/src/pages/dashboard/base/index.less
deleted file mode 100644
index bcee2f5..0000000
--- a/src/pages/dashboard/base/index.less
+++ /dev/null
@@ -1,95 +0,0 @@
-@import '@/style/variables.less';
-
-.dashboard-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex: 1;
-
-  .dashboard-item-top {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-
-    > span {
-      display: inline-block;
-      color: @text-color-primary;
-      font-size: 36px;
-      line-height: 44px;
-    }
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.dashboard-item-bottom {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  > .t-icon {
-    cursor: pointer;
-  }
-}
-
-.dashboard-item-block {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 22px;
-  color: @text-color-placeholder;
-}
-
-.dashboard-item-trend {
-  margin-left: 8px;
-}
-
-.dashboard-item-left {
-  position: absolute;
-  top: 32px;
-  right: 32px;
-
-  > span {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 56px;
-    height: 56px;
-    background: @brand-color-1;
-    border-radius: 50%;
-
-    .t-icon {
-      font-size: 24px;
-      color: @brand-color;
-    }
-  }
-}
-
-.dashboard-rank {
-  display: inline-flex;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  color: white;
-  font-size: 14px;
-  background-color: @gray-color-5;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-
-  &__top {
-    background: @brand-color;
-  }
-}
-
-.overview-panel {
-  background-color: @bg-color-container;
-  border-radius: 3px;
-}
-
-.row-container {
-  margin-top: 16px;
-}
diff --git a/src/pages/dashboard/base/index.vue b/src/pages/dashboard/base/index.vue
index 59a8848..3d6222e 100644
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@@ -1,205 +1,13 @@
 <template>
   <div>
-    <t-row :gutter="[16, 16]">
-      <t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3">
-        <card :subtitle="item.title" size="small" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }">
-          <div class="dashboard-item">
-            <div class="dashboard-item-top">
-              <span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
-            </div>
-            <div class="dashboard-item-left">
-              <div v-if="index === 0">
-                <div
-                  id="moneyContainer"
-                  class="dashboard-chart-container"
-                  :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 66}px`, marginTop: '22px' }"
-                />
-              </div>
-              <div v-else-if="index === 1">
-                <div
-                  id="refundContainer"
-                  class="dashboard-chart-container"
-                  :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 42}px`, marginTop: '24px' }"
-                />
-              </div>
-
-              <span v-else-if="index === 2">
-                <t-icon name="usergroup" />
-              </span>
-              <span v-else>
-                <t-icon name="file" />
-              </span>
-            </div>
-            <div class="dashboard-item-bottom">
-              <div class="dashboard-item-block">
-                自从上周以来
-                <trend
-                  class="dashboard-item-trend"
-                  :type="item.upTrend ? 'up' : 'down'"
-                  :is-reverse-color="index === 0"
-                  :describe="item.upTrend || item.downTrend"
-                />
-              </div>
-              <t-icon name="chevron-right" />
-            </div>
-          </div>
-        </card>
-      </t-col>
-    </t-row>
-
+    <!-- 顶部 card  -->
+    <top-panel class="row-container" />
     <!-- 中部图表  -->
-    <t-row :gutter="16" class="row-container">
-      <t-col :xs="12" :xl="9">
-        <card title="统计数据" :describe="`(万元)${currentMonth}`">
-          <template #option>
-            <div class="dashboard-chart-title-container">
-              <t-date-picker
-                class="card-date-picker-container"
-                theme="primary"
-                mode="date"
-                range
-                :default-value="LAST_7_DAYS"
-                @change="onCurrencyChange"
-              />
-            </div>
-          </template>
-          <div
-            id="monitorContainer"
-            ref="monitorContainer"
-            class="dashboard-chart-container"
-            :style="{ width: '100%', height: `${resizeTime * 326}px` }"
-          />
-        </card>
-      </t-col>
-      <t-col :xs="12" :xl="3">
-        <card title="销售渠道" :describe="currentMonth">
-          <div
-            id="countContainer"
-            ref="countContainer"
-            :style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
-            class="dashboard-chart-container"
-          />
-        </card>
-      </t-col>
-    </t-row>
-
+    <middle-chart class="row-container" />
     <!-- 列表排名 -->
-    <t-row :gutter="16" class="row-container">
-      <t-col :xs="12" :xl="6">
-        <card title="销售订单排名">
-          <template #option>
-            <t-radio-group default-value="dateVal">
-              <t-radio-button value="dateVal">本周</t-radio-button>
-              <t-radio-button value="monthVal">近三个月</t-radio-button>
-            </t-radio-group>
-          </template>
-          <t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
-            <template #index="{ rowIndex }">
-              <span :class="getRankClass(rowIndex)">
-                {{ rowIndex + 1 }}
-              </span>
-            </template>
-            <template #growUp="{ row }">
-              <span>
-                <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
-              </span>
-            </template>
-            <template #operation="slotProps">
-              <a class="t-button-link" @click="rehandleClickOp(slotProps)">详情</a>
-            </template>
-          </t-table>
-        </card>
-      </t-col>
-      <t-col :xs="12" :xl="6">
-        <card title="采购订单排名">
-          <template #option>
-            <t-radio-group default-value="dateVal">
-              <t-radio-button value="dateVal">本周</t-radio-button>
-              <t-radio-button value="monthVal">近三个月</t-radio-button>
-            </t-radio-group>
-          </template>
-          <t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
-            <template #index="{ rowIndex }">
-              <span :class="getRankClass(rowIndex)">
-                {{ rowIndex + 1 }}
-              </span>
-            </template>
-            <template #growUp="{ row }">
-              <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
-            </template>
-            <template #operation="slotProps">
-              <a class="t-button-link" @click="rehandleClickOp(slotProps)">详情</a>
-            </template>
-          </t-table>
-        </card>
-      </t-col>
-    </t-row>
-
+    <rank-list class="row-container" />
     <!-- 出入库概览 -->
-    <div class="row-container overview-panel">
-      <t-row>
-        <t-col :xs="12" :xl="9">
-          <card title="出入库概览" describe="(件)">
-            <template #option>
-              <t-date-picker
-                class="card-date-picker-container"
-                theme="primary"
-                mode="date"
-                range
-                :default-value="LAST_7_DAYS"
-                @change="onStokeDataChange"
-              />
-            </template>
-            <div
-              id="stokeContainer"
-              ref="stokeContainer"
-              style="width: 100%; height: 351px"
-              class="dashboard-chart-container"
-            />
-          </card>
-        </t-col>
-        <t-col :xs="12" :xl="3">
-          <card>
-            <template #option>
-              <t-button>导出数据</t-button>
-            </template>
-            <t-row>
-              <t-col :xs="6" :xl="12">
-                <card describe="本月出库总计（件）" class="inner-card" size="small">
-                  <div class="dashboard-item">
-                    <div class="dashboard-item-top">
-                      <span>1726</span>
-                    </div>
-                    <div class="dashboard-item-bottom">
-                      <div class="dashboard-item-block">
-                        自从上周以来
-                        <trend class="dashboard-item-trend" type="down" :is-reverse-color="false" describe="20.3%" />
-                      </div>
-                    </div>
-                  </div>
-                </card>
-              </t-col>
-
-              <t-col :xs="6" :xl="12">
-                <card describe="本月入库总计（件）" class="inner-card" size="small">
-                  <div class="dashboard-item">
-                    <div class="dashboard-item-top">
-                      <span>226</span>
-                    </div>
-                    <div class="dashboard-item-bottom">
-                      <div class="dashboard-item-block">
-                        自从上周以来
-                        <trend class="dashboard-item-trend" type="down" :is-reverse-color="false" describe="20.3%" />
-                      </div>
-                    </div>
-                  </div>
-                </card>
-              </t-col>
-            </t-row>
-          </card>
-        </t-col>
-      </t-row>
-    </div>
+    <over-view class="row-container" />
   </div>
 </template>
 
@@ -210,214 +18,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
-
-import * as echarts from 'echarts/core';
-import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
-import { PieChart, LineChart, BarChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
-import { useSettingStore } from '@/store';
-import { LAST_7_DAYS } from '@/utils/date';
-import { changeChartsTheme } from '@/utils/color';
-
-// 导入样式
-import Trend from '@/components/trend/index.vue';
-import Card from '@/components/card/index.vue';
-import { constructInitDataset, getPieChartDataSet, getLineChartDataSet, constructInitDashboardDataset } from './index';
-
-import { PANE_LIST, SALE_TEND_LIST, BUY_TEND_LIST, SALE_COLUMNS, BUY_COLUMNS } from './constants';
-
-echarts.use([TooltipComponent, LegendComponent, PieChart, GridComponent, LineChart, BarChart, CanvasRenderer]);
-
-const getThisMonth = (checkedValues?: string[]) => {
-  let date: Date;
-  if (!checkedValues || checkedValues.length === 0) {
-    date = new Date();
-    return `${date.getFullYear()}-${date.getMonth() + 1}`;
-  }
-  date = new Date(checkedValues[0]);
-  const date2 = new Date(checkedValues[1]);
-
-  const startMonth = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
-  const endMonth = date2.getMonth() + 1 > 9 ? date2.getMonth() + 1 : `0${date2.getMonth() + 1}`;
-  return `${date.getFullYear()}-${startMonth}  至  ${date2.getFullYear()}-${endMonth}`;
-};
-
-const store = useSettingStore();
-const resizeTime = ref(1);
-
-const chartColors = computed(() => store.chartColors);
-
-// moneyCharts
-let moneyContainer: HTMLElement;
-let moneyChart: echarts.ECharts;
-const renderMoneyChart = () => {
-  if (!moneyContainer) {
-    moneyContainer = document.getElementById('moneyContainer');
-  }
-  moneyChart = echarts.init(moneyContainer);
-  moneyChart.setOption(constructInitDashboardDataset('line'));
-};
-
-// refundCharts
-let refundContainer: HTMLElement;
-let refundChart: echarts.ECharts;
-const renderRefundChart = () => {
-  if (!refundContainer) {
-    refundContainer = document.getElementById('refundContainer');
-  }
-  refundChart = echarts.init(refundContainer);
-  refundChart.setOption(constructInitDashboardDataset('bar'));
-};
-
-// stokeCharts
-let stokeContainer: HTMLElement;
-let stokeChart: echarts.ECharts;
-const renderStokeChart = () => {
-  if (!stokeContainer) {
-    stokeContainer = document.getElementById('stokeContainer');
-  }
-  stokeChart = echarts.init(stokeContainer);
-  stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
-};
-
-// monitorChart
-let monitorContainer: HTMLElement;
-let monitorChart: echarts.ECharts;
-const renderMonitorChart = () => {
-  if (!monitorContainer) {
-    monitorContainer = document.getElementById('monitorContainer');
-  }
-  monitorChart = echarts.init(monitorContainer);
-  monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
-};
-
-// monitorChart
-let countContainer: HTMLElement;
-let countChart: echarts.ECharts;
-const renderCountChart = () => {
-  if (!countContainer) {
-    countContainer = document.getElementById('countContainer');
-  }
-  countChart = echarts.init(countContainer);
-  countChart.setOption(getPieChartDataSet(chartColors.value));
-};
-
-const renderCharts = () => {
-  renderMoneyChart();
-  renderRefundChart();
-  renderStokeChart();
-  renderMonitorChart();
-  renderCountChart();
-};
-
-// chartSize update
-const updateContainer = () => {
-  if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
-    resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
-  } else if (document.documentElement.clientWidth < 1080) {
-    resizeTime.value = Number((document.documentElement.clientWidth / 1080).toFixed(2));
-  } else {
-    resizeTime.value = 1;
-  }
-  moneyChart.resize({
-    width: resizeTime.value * 120,
-    height: resizeTime.value * 66,
-  });
-  refundChart.resize({
-    width: resizeTime.value * 120,
-    height: resizeTime.value * 42,
-  });
-  stokeChart.resize({
-    width: stokeContainer.clientWidth,
-    height: stokeContainer.clientHeight,
-  });
-  monitorChart.resize({
-    width: monitorContainer.clientWidth,
-    height: resizeTime.value * 326,
-  });
-  countChart.resize({
-    width: resizeTime.value * 326,
-    height: resizeTime.value * 326,
-  });
-};
-
-onMounted(() => {
-  renderCharts();
-  nextTick(() => {
-    updateContainer();
-  });
-  window.addEventListener('resize', updateContainer, false);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateContainer);
-});
-
-const currentMonth = ref(getThisMonth());
-
-watch(
-  () => store.brandTheme,
-  () => {
-    changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
-  },
-);
-
-watch(
-  () => store.mode,
-  () => {
-    [moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
-      item.dispose();
-    });
-
-    renderCharts();
-  },
-);
-
-const onCurrencyChange = (checkedValues: string[]) => {
-  currentMonth.value = getThisMonth(checkedValues);
-  monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
-};
-const onStokeDataChange = (checkedValues: string[]) => {
-  stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
-};
-const rehandleClickOp = (val: MouseEvent) => {
-  console.log(val);
-};
-const getRankClass = (index: number) => {
-  return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
-};
+import TopPanel from './components/top-panel.vue';
+import MiddleChart from './components/middle-chart.vue';
+import RankList from './components/rank-list.vue';
+import OverView from './components/overview.vue';
 </script>
 
-<style lang="less" scoped>
-@import './index.less';
-</style>
-
-<style lang="less">
-@import '@/style/variables.less';
-
-.card-container.main-color {
-  background: @brand-color;
-  color: @text-color-primary;
-
-  .card-subtitle {
-    color: @text-color-anti;
-  }
-  .card-describe {
-    color: @text-color-anti;
-  }
-
-  .dashboard-item-top span {
-    color: @text-color-anti;
-  }
-
-  .dashboard-item-block {
-    color: @text-color-anti;
-    opacity: 0.6;
-  }
-
-  .dashboard-item-bottom {
-    color: @text-color-anti;
-  }
+<style scoped>
+.row-container {
+  margin-bottom: 16px;
 }
 </style>
diff --git a/src/pages/dashboard/detail/index.less b/src/pages/dashboard/detail/index.less
deleted file mode 100644
index 54c9f77..0000000
--- a/src/pages/dashboard/detail/index.less
+++ /dev/null
@@ -1,73 +0,0 @@
-@import '@/style/variables.less';
-
-.card-container-margin {
-  margin-top: 16px;
-}
-
-.card-date-button {
-  margin-left: 8px;
-}
-
-.dark {
-  .dashboard-detail-container-item {
-    &:hover {
-      background: @gray-color-14;
-      cursor: pointer;
-    }
-  }
-}
-
-.light {
-  .dashboard-detail-container-item {
-    &:hover {
-      background: @gray-color-1;
-      cursor: pointer;
-    }
-  }
-}
-
-.dashboard-detail-container-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex: 1;
-  height: 170px;
-
-  .title {
-    color: @text-color-secondary;
-  }
-
-  .number {
-    font-size: 36px;
-    line-height: 44px;
-    color: @text-color-primary;
-  }
-
-  .dashboard-detail-container-item-text {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    color: @text-color-placeholder;
-    text-align: left;
-    line-height: 18px;
-
-    &-left {
-      display: flex;
-
-      .icon {
-        margin: 0 8px;
-      }
-    }
-  }
-}
-
-.dashboard-chart-title-left {
-  display: flex;
-  width: 100%;
-  color: @text-color-placeholder;
-  justify-content: left;
-  font-size: 15px;
-  padding-left: 8px;
-}
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index 7d7e1db..1822a56 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -1,60 +1,62 @@
 <template>
   <div class="dashboard-panel-detail">
-    <card title="本月采购申请情况">
+    <t-card title="本月采购申请情况" class="dashboard-detail-card">
       <t-row :gutter="[16, 16]">
         <t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
-          <card border class="dashboard-detail-container-item" size="small" :subtitle="item.title">
-            <div class="number">{{ item.number }}</div>
-            <div class="dashboard-detail-container-item-text">
-              <div class="dashboard-detail-container-item-text-left">
+          <t-card class="dashboard-list-card" :description="item.title">
+            <div class="dashboard-list-card__number">{{ item.number }}</div>
+            <div class="dashboard-list-card__text">
+              <div class="dashboard-list-card__text-left">
                 环比
                 <trend class="icon" :type="item.upTrend ? 'up' : 'down'" :describe="item.upTrend || item.downTrend" />
               </div>
               <t-icon name="chevron-right" />
             </div>
-          </card>
+          </t-card>
         </t-col>
       </t-row>
-    </card>
-    <t-row :gutter="[16, 16]" class="card-container-margin">
+    </t-card>
+    <t-row :gutter="[16, 16]" class="row-margin">
       <t-col :xs="12" :xl="9">
-        <card title="采购商品申请趋势" describe="(件)">
-          <template #option>
+        <t-card class="dashboard-detail-card" title="采购商品申请趋势" subtitle="(件)">
+          <template #actions>
             <t-date-picker
               class="card-date-picker-container"
               :default-value="LAST_7_DAYS"
               theme="primary"
               mode="date"
               range
+              style="width: 240px"
               @change="onMaterialChange"
             />
           </template>
-          <div id="lineContainer" style="width: 100%; height: 406px" />
-        </card>
+          <div id="lineContainer" style="width: 100%; height: 410px" />
+        </t-card>
       </t-col>
       <t-col :xs="12" :xl="3">
         <product-card
           v-for="(item, index) in PRODUCT_LIST"
           :key="index"
           :product="item"
-          :class="{ 'card-container-margin': index !== 0 }"
+          :class="{ 'row-margin': index !== 0 }"
         />
       </t-col>
     </t-row>
-    <card title="采购商品满意度分布" class="card-container-margin">
-      <template #option>
+    <t-card :class="['dashboard-detail-card', 'row-margin']" title="采购商品满意度分布">
+      <template #actions>
         <t-date-picker
           class="card-date-picker-container"
           :default-value="LAST_7_DAYS"
           theme="primary"
           mode="date"
           range
+          style="display: inline-block; margin-right: 8px; width: 240px"
           @change="onSatisfyChange"
         />
         <t-button class="card-date-button"> 导出数据 </t-button>
       </template>
       <div id="scatterContainer" style="width: 100%; height: 330px" />
-    </card>
+    </t-card>
   </div>
 </template>
 
@@ -71,7 +73,7 @@ import * as echarts from 'echarts/core';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
 import { LineChart, ScatterChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
-import ProductCard from '@/components/card/Card.vue';
+import ProductCard from '@/components/product-card/index.vue';
 
 import { getFolderLineDataSet, getScatterDataSet } from './index';
 import { PANE_LIST_DATA, PRODUCT_LIST } from './constants';
@@ -80,7 +82,6 @@ import { useSettingStore } from '@/store';
 import { changeChartsTheme } from '@/utils/color';
 
 import Trend from '@/components/trend/index.vue';
-import Card from '@/components/card/index.vue';
 
 echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
 
@@ -159,5 +160,82 @@ const onMaterialChange = (value: string[]) => {
 </script>
 
 <style lang="less" scoped>
-@import url('./index.less');
+@import '@/style/variables.less';
+
+.row-margin {
+  margin-top: 16px;
+}
+
+// 统一增加8px;
+.dashboard-detail-card {
+  padding: 8px;
+
+  :deep(.t-card__title) {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  :deep(.t-card__actions) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.dashboard-list-card {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 170px;
+  padding: 8px;
+
+  :deep(.t-card__header) {
+    padding-bottom: 8px;
+  }
+
+  :deep(.t-card__body) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &.dark {
+    &:hover {
+      background: @gray-color-14;
+      cursor: pointer;
+    }
+  }
+
+  &.light {
+    &:hover {
+      background: @gray-color-14;
+      cursor: pointer;
+    }
+  }
+
+  &__number {
+    font-size: 36px;
+    line-height: 44px;
+    color: @text-color-primary;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    color: @text-color-placeholder;
+    text-align: left;
+    line-height: 18px;
+
+    &-left {
+      display: flex;
+
+      .icon {
+        margin: 0 8px;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/pages/detail/advanced/index.less b/src/pages/detail/advanced/index.less
index 6416b86..fb17f41 100644
--- a/src/pages/detail/advanced/index.less
+++ b/src/pages/detail/advanced/index.less
@@ -1,5 +1,23 @@
 @import '../base/index.less';
 
+.detail-advanced {
+  :deep(.t-card) {
+    padding: 8px;
+  }
+  :deep(.t-card__title) {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .advanced-card {
+    margin-top: 0 !important;
+
+    .card-title-default {
+      margin-bottom: 12px;
+    }
+  }
+}
+
 .product-block-container {
   .t-col-xl-4 + .t-col-xl-4 {
     @media (max-width: @screen-lg-max) {
diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue
index ec69747..6b41596 100644
--- a/src/pages/detail/advanced/index.vue
+++ b/src/pages/detail/advanced/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <card title="基本信息">
+  <div class="detail-advanced">
+    <t-card title="基本信息">
       <div class="info-block">
         <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
           <h1>{{ item.name }}</h1>
@@ -15,10 +15,10 @@
           </span>
         </div>
       </div>
-    </card>
+    </t-card>
 
     <!-- 发票进度 -->
-    <card title="发票进度" class="container-base-margin-top">
+    <t-card title="发票进度" class="container-base-margin-top">
       <t-row justify="space-between">
         <t-steps :current="updateCurrent">
           <t-step-item title="申请提交" content="已于12月21日提交" />
@@ -27,10 +27,10 @@
           <t-step-item title="完成" content />
         </t-steps>
       </t-row>
-    </card>
+    </t-card>
 
     <!-- 产品目录 -->
-    <card title="产品目录" class="container-base-margin-top">
+    <t-card title="产品目录" class="container-base-margin-top">
       <template #option>
         <t-radio-group default-value="dateVal">
           <t-radio-button value="dateVal"> 季度 </t-radio-button>
@@ -50,10 +50,10 @@
           <product :data="item" />
         </t-col>
       </t-row>
-    </card>
+    </t-card>
 
     <!-- 产品采购明细 -->
-    <card title="产品采购明细" class="container-base-margin-top">
+    <t-card title="产品采购明细" class="container-base-margin-top">
       <t-table
         :columns="columns"
         :data="data"
@@ -87,7 +87,7 @@
           <t-icon name="descending-order" />
         </template>
       </t-table>
-    </card>
+    </t-card>
 
     <t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
       <template #body>
@@ -123,7 +123,6 @@ import { BASE_INFO_DATA, TABLE_COLUMNS_DATA as columns, PRODUCT_LIST } from './c
 import request from '@/utils/request';
 import { ResDataType } from '@/interface';
 
-import Card from '@/components/card/index.vue';
 import Product from './components/Product.vue';
 
 const data = ref([]);
diff --git a/src/pages/detail/base/index.less b/src/pages/detail/base/index.less
index abfdaed..22002ad 100644
--- a/src/pages/detail/base/index.less
+++ b/src/pages/detail/base/index.less
@@ -1,7 +1,18 @@
 @import '@/style/variables.less';
 
-.detail-base-info-steps {
-  padding-top: 12px;
+.detail-base {
+  :deep(.t-card) {
+    padding: 8px;
+  }
+
+  :deep(.t-card__title) {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  &-info-steps {
+    padding-top: 12px;
+  }
 }
 
 .info-block {
@@ -59,7 +70,6 @@
 }
 
 .dialog-info-block {
-
   .info-item {
     padding: 12px 0;
     display: flex;
diff --git a/src/pages/detail/base/index.vue b/src/pages/detail/base/index.vue
index 7a1d8ee..a49c3bb 100644
--- a/src/pages/detail/base/index.vue
+++ b/src/pages/detail/base/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <card title="基本信息">
+  <div class="detail-base">
+    <t-card title="基本信息">
       <div class="info-block">
         <div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
           <h1>{{ item.name }}</h1>
@@ -15,15 +15,15 @@
           </span>
         </div>
       </div>
-    </card>
+    </t-card>
 
-    <card title="变更记录" class="container-base-margin-top">
+    <t-card title="变更记录" class="container-base-margin-top">
       <t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
         <t-step-item title="上传合同附件" content="这里是提示文字" />
         <t-step-item title="修改合同金额" content="这里是提示文字" />
         <t-step-item title="新建合同" content="2020-12-01 15:00:00 管理员-李川操作" />
       </t-steps>
-    </card>
+    </t-card>
   </div>
 </template>
 
@@ -34,8 +34,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-import Card from '@/components/card/index.vue';
-
 const BASE_INFO_DATA = [
   {
     name: '合同名称',
diff --git a/src/pages/detail/deploy/constants.ts b/src/pages/detail/deploy/constants.ts
index 6f10515..8152271 100644
--- a/src/pages/detail/deploy/constants.ts
+++ b/src/pages/detail/deploy/constants.ts
@@ -83,7 +83,7 @@ export const BASE_INFO_DATA = [
 
 export const TABLE_COLUMNS = [
   {
-    minWidth: '448',
+    width: '448',
     ellipsis: true,
     colKey: 'name',
     title: '项目名称',
diff --git a/src/pages/detail/deploy/index.vue b/src/pages/detail/deploy/index.vue
index ad71ac2..2a620be 100644
--- a/src/pages/detail/deploy/index.vue
+++ b/src/pages/detail/deploy/index.vue
@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <div class="detail-deploy">
     <t-row :gutter="16">
-      <t-col :span="6">
-        <card title="部署趋势">
+      <t-col :lg="6" :xs="12">
+        <t-card title="部署趋势">
           <div class="deploy-panel-left">
             <div id="monitorContainer" style="width: 100%; height: 265px" />
           </div>
-        </card>
+        </t-card>
       </t-col>
-      <t-col :span="6">
-        <card title="告警情况">
+      <t-col :lg="6" :xs="12">
+        <t-card title="告警情况">
           <template #option>
             <t-radio-group default-value="dateVal" @change="onAlertChange">
               <t-radio-button value="dateVal"> 本周 </t-radio-button>
@@ -17,12 +17,12 @@
             </t-radio-group>
           </template>
           <div id="dataContainer" style="width: 100%; height: 265px" />
-        </card>
+        </t-card>
       </t-col>
     </t-row>
 
     <!-- 项目列表 -->
-    <card title="项目列表" class="container-base-margin-top">
+    <t-card title="项目列表" class="container-base-margin-top">
       <t-table
         :columns="columns"
         :data="data"
@@ -46,7 +46,7 @@
           <t-icon name="descending-order" />
         </template>
       </t-table>
-    </card>
+    </t-card>
 
     <t-dialog v-model:visible="visible" header="基本信息" @confirm="onConfirm">
       <template #body>
@@ -89,7 +89,6 @@ import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
 import { changeChartsTheme } from '@/utils/color';
 
 import { prefix } from '@/config/global';
-import Card from '@/components/card/index.vue';
 import { ResDataType } from '@/interface';
 import request from '@/utils/request';
 
@@ -205,5 +204,14 @@ const deleteClickOp = (e) => {
 </script>
 
 <style lang="less" scoped>
-@import url('../base/index.less');
+.detail-deploy {
+  :deep(.t-card) {
+    padding: 8px;
+  }
+
+  :deep(.t-card__title) {
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
 </style>
diff --git a/src/pages/form/step/index.less b/src/pages/form/step/index.less
index 2487001..5875b98 100644
--- a/src/pages/form/step/index.less
+++ b/src/pages/form/step/index.less
@@ -2,6 +2,10 @@
 
 .form-step-container {
   background-color: @bg-color-container;
+
+  .t-card {
+    padding: 8px;
+  }
 }
 
 .rule-tips {
@@ -15,3 +19,19 @@
 .step-form {
   padding: 24px;
 }
+
+.step-form-4 {
+  padding: 66px 0 90px 0;
+  text-align: center;
+  > .t-icon {
+    margin-bottom: 16px;
+  }
+  > .text {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+  > .button-group {
+    margin-top: 32px;
+  }
+}
diff --git a/src/pages/form/step/index.vue b/src/pages/form/step/index.vue
index 2ac7608..44e4a02 100644
--- a/src/pages/form/step/index.vue
+++ b/src/pages/form/step/index.vue
@@ -2,14 +2,14 @@
   <div>
     <div class="form-step-container">
       <!-- 简单步骤条 -->
-      <card title="基本信息">
+      <t-card :bordered="false">
         <t-steps class="step-container" :current="activeForm" status="process">
           <t-step-item title="提交开票申请" />
           <t-step-item title="填写发票信息" />
           <t-step-item title="确认邮寄地址" />
           <t-step-item title="完成" />
         </t-steps>
-      </card>
+      </t-card>
 
       <!-- 分步表单1 -->
       <div v-show="activeForm === 0" class="rule-tips">
@@ -150,7 +150,6 @@ export default {
 import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { ValidateResultContext } from 'tdesign-vue-next';
-import Card from '@/components/card/index.vue';
 
 import {
   FORM_RULES,
diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue
index 4c8e6b8..4047ffa 100644
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <card class="list-card-container">
+    <t-card class="list-card-container">
       <t-row justify="space-between">
         <div class="left-operation-container">
           <t-button @click="handleSetupContract"> 新建合同 </t-button>
@@ -15,7 +15,7 @@
           </t-input>
         </div>
       </t-row>
-
+      <!-- 如果开启多标签tab页 请修改offsetTop的配置 -->
       <t-table
         :data="data"
         :columns="COLUMNS"
@@ -25,6 +25,8 @@
         :pagination="pagination"
         :selected-row-keys="selectedRowKeys"
         :loading="dataLoading"
+        :header-affixed-top="true"
+        :header-affix-props="{ offsetTop: 0, container: getContainer }"
         @page-change="rehandlePageChange"
         @change="rehandleChange"
         @select-change="rehandleSelectChange"
@@ -55,7 +57,7 @@
           <a class="t-button-link" @click="handleClickDelete(slotProps)">删除</a>
         </template>
       </t-table>
-    </card>
+    </t-card>
 
     <t-dialog
       v-model:visible="confirmVisible"
@@ -81,7 +83,6 @@ import { MessagePlugin } from 'tdesign-vue-next';
 
 import { CONTRACT_STATUS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES } from '@/constants';
 import Trend from '@/components/trend/index.vue';
-import Card from '@/components/card/index.vue';
 import { ResDataType } from '@/interface';
 import request from '@/utils/request';
 
@@ -177,6 +178,10 @@ const handleClickDelete = (row: { rowIndex: any }) => {
   deleteIdx.value = row.rowIndex;
   confirmVisible.value = true;
 };
+
+const getContainer = () => {
+  return document.querySelector('.tdesign-starter-layout');
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/pages/list/card/index.vue b/src/pages/list/card/index.vue
index d9a0037..a748a90 100644
--- a/src/pages/list/card/index.vue
+++ b/src/pages/list/card/index.vue
@@ -26,7 +26,7 @@
             :xs="6"
             :xl="3"
           >
-            <card
+            <product-card
               class="list-card-item"
               :product="product"
               @delete-item="handleDeleteItem"
@@ -71,7 +71,7 @@ export default {
 import { ref, computed, onMounted } from 'vue';
 import { SearchIcon } from 'tdesign-icons-vue-next';
 import { MessagePlugin } from 'tdesign-vue-next';
-import Card from '@/components/card/Card.vue';
+import ProductCard from '@/components/product-card/index.vue';
 import DialogForm from './components/DialogForm.vue';
 import request from '@/utils/request';
 import { ResDataType } from '@/interface';
diff --git a/src/pages/list/components/CommonTable.vue b/src/pages/list/components/CommonTable.vue
index 150d64e..411dc02 100644
--- a/src/pages/list/components/CommonTable.vue
+++ b/src/pages/list/components/CommonTable.vue
@@ -121,7 +121,8 @@ const COLUMNS = [
   {
     title: '合同名称',
     fixed: 'left',
-    minWidth: '300',
+    width: 200,
+    ellipsis: true,
     align: 'left',
     colKey: 'name',
   },
diff --git a/src/pages/user/index.less b/src/pages/user/index.less
index 6619b7f..e9e6d9d 100644
--- a/src/pages/user/index.less
+++ b/src/pages/user/index.less
@@ -1,8 +1,8 @@
 @import '@/style/variables';
 
-.card-padding-no {
-  padding-left: 0;
-  padding-right: 0;
+/deep/ .t-card__title {
+  font-size: 20px;
+  font-weight: 500;
 }
 
 .user-left-greeting {
@@ -66,7 +66,7 @@
 }
 
 .user-intro {
-  padding: 48px;
+  padding: 32px 24px;
   background: @brand-color;
   border-radius: @border-radius;
   color: @text-color-primary;
@@ -123,7 +123,6 @@
 
 .content-container {
   margin-top: 16px;
-  padding: 28px 32px;
   background: @bg-color-container;
   border-radius: @border-radius;
 }
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index b70d6fe..0b258aa 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -9,8 +9,8 @@
         <img src="@/assets/assets-tencent-logo.png" class="logo" />
       </div>
 
-      <card class="user-info-list" size="small" title="个人信息">
-        <template #option>
+      <t-card class="user-info-list" title="个人信息">
+        <template #actions>
           <t-button theme="default" shape="square" variant="text">
             <t-icon name="edit" size="18" />
           </t-button>
@@ -25,16 +25,16 @@
             </div>
           </t-col>
         </t-row>
-      </card>
+      </t-card>
 
-      <card class="content-container">
+      <t-card class="content-container">
         <t-tabs value="second">
           <t-tab-panel value="first" label="内容列表">
             <p>内容列表</p>
           </t-tab-panel>
           <t-tab-panel value="second" label="内容列表">
-            <card class="card-padding-no" title="主页访问数据" describe="（次）">
-              <template #option>
+            <t-card :bordered="false" class="card-padding-no" title="主页访问数据" describe="（次）">
+              <template #actions>
                 <t-date-picker
                   class="card-date-picker-container"
                   :default-value="LAST_7_DAYS"
@@ -45,24 +45,24 @@
                 />
               </template>
               <div id="lineContainer" style="width: 100%; height: 330px" />
-            </card>
+            </t-card>
           </t-tab-panel>
           <t-tab-panel value="third" label="内容列表">
             <p>内容列表</p>
           </t-tab-panel>
         </t-tabs>
-      </card>
+      </t-card>
     </t-col>
 
     <t-col :flex="1">
-      <card class="user-intro">
+      <t-card class="user-intro">
         <t-avatar size="90px">T</t-avatar>
         <div class="name">My Account</div>
         <div class="position">XXG 港澳业务拓展组员工 直客销售</div>
-      </card>
+      </t-card>
 
-      <card title="团队成员" class="user-team" size="small">
-        <template #option>
+      <t-card title="团队成员" class="user-team">
+        <template #actions>
           <t-button theme="default" shape="square" variant="text">
             <t-icon name="edit" size="18" />
           </t-button>
@@ -72,10 +72,10 @@
             <t-list-item-meta :image="item.avatar" :title="item.title" :description="item.description" />
           </t-list-item>
         </t-list>
-      </card>
+      </t-card>
 
-      <card title="服务产品" class="product-container" size="small">
-        <template #option>
+      <t-card title="服务产品" class="product-container">
+        <template #actions>
           <t-button theme="default" shape="square" variant="text">
             <t-icon name="edit" size="18" />
           </t-button>
@@ -85,7 +85,7 @@
             <component :is="getIcon(item)"></component>
           </t-col>
         </t-row>
-      </card>
+      </t-card>
     </t-col>
   </t-row>
 </template>
@@ -111,8 +111,6 @@ import ProductCIcon from '@/assets/assets-product-3.svg';
 import ProductDIcon from '@/assets/assets-product-4.svg';
 import { changeChartsTheme } from '@/utils/color';
 
-import Card from '@/components/card/index.vue';
-
 echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
 
 let lineContainer: HTMLElement;
diff --git a/src/style/index.less b/src/style/index.less
index bda1325..7705022 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -75,7 +75,3 @@ p {
 .container-base-margin-top {
   margin-top: 16px;
 }
-
-.card-date-picker-container {
-  width: 240px;
-}
diff --git a/src/style/layout.less b/src/style/layout.less
index e4e1273..d3b79a2 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -1,7 +1,6 @@
 @import './variables.less';
 @import './font-family.less';
 
-
 // layout rewrite
 
 .t-layout__sider {
@@ -20,7 +19,7 @@
 }
 
 .t-menu--dark .t-menu__operations .t-icon {
-  color: rgba(255, 255, 255, .55);
+  color: rgba(255, 255, 255, 0.55);
   &:hover {
     cursor: pointer;
   }
@@ -37,15 +36,14 @@
 }
 
 .@{prefix} {
-
   // 布局元素调整
   &-wrapper {
     height: 100vh;
     display: flex;
     flex-direction: column;
   }
-  
-  &-main-wrapper{
+
+  &-main-wrapper {
     height: 500px;
     overflow: scroll;
   }
@@ -60,7 +58,7 @@
     padding: @spacer-3;
   }
 
-  &-layout{
+  &-layout {
     height: calc(100vh - 64px);
     overflow-y: scroll;
     &-tabs-nav {
@@ -70,7 +68,7 @@
       z-index: 100;
     }
     &-tabs-nav + .@{prefix}-content-layout {
-      padding-top:  @spacer-3;
+      padding-top: @spacer-3;
     }
   }
 
@@ -177,3 +175,7 @@
   color: @text-color-primary;
   opacity: 0.4;
 }
+
+.t-menu__popup {
+  z-index: 1000;
+}