diff --git a/src/router/routes/newModules/dashboard.ts b/src/router/routes/newModules/dashboard.ts
index 8011816..6e70b11 100644
--- a/src/router/routes/newModules/dashboard.ts
+++ b/src/router/routes/newModules/dashboard.ts
@@ -24,13 +24,12 @@ const DASHBOARD: AppRouteRecordRaw = {
     },
     {
       path: 'monitor',
-      alias: 'MonitoringPanel',
       name: 'Monitor',
       component: () => import('@/views/home/monitor/index.vue'),
       meta: {
         locale: 'menu.home.monitor',
         requiresAuth: true,
-        roles: ['admin'],
+        permission: 'Home.Monitor',
       },
     },
   ],
diff --git a/src/utils/route-name-mapper.ts b/src/utils/route-name-mapper.ts
index 7405bc1..ef23f5c 100644
--- a/src/utils/route-name-mapper.ts
+++ b/src/utils/route-name-mapper.ts
@@ -16,6 +16,8 @@ const routeNameMap: Record<string, string> = {
   // 首页相关
   'home_workplace': 'Workplace',
   '/home/workplace': 'Workplace',
+  'home_monitor': 'Monitor',
+  '/home/monitor': 'Monitor',
   'home': 'Home',
   '/home': 'Home',
 
diff --git a/src/views/home/monitor/components/chat-item.vue b/src/views/home/monitor/components/chat-item.vue
deleted file mode 100644
index 7900366..0000000
--- a/src/views/home/monitor/components/chat-item.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div :class="['chat-item', itemData.isCollect ? 'chat-item-collected' : '']">
-    <a-space :size="4" direction="vertical" fill>
-      <a-typography-text type="warning">
-        {{ itemData.username }}
-      </a-typography-text>
-      <a-typography-text>{{ itemData.content }}</a-typography-text>
-      <div class="chat-item-footer">
-        <div class="chat-item-time">
-          <a-typography-text type="secondary">
-            {{ itemData.time }}
-          </a-typography-text>
-        </div>
-        <div class="chat-item-actions">
-          <div class="chat-item-actions-item">
-            <icon-command />
-          </div>
-          <div class="chat-item-actions-item chat-item-actions-collect">
-            <icon-star />
-          </div>
-        </div>
-      </div>
-    </a-space>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { PropType } from 'vue';
-  import { ChatRecord } from '@/api/message';
-
-  defineProps({
-    itemData: {
-      type: Object as PropType<ChatRecord>,
-      default() {
-        return {};
-      },
-    },
-  });
-</script>
-
-<style scoped lang="less">
-  .chat-item {
-    padding: 8px;
-    font-size: 12px;
-    line-height: 20px;
-    border-radius: 2px;
-
-    &-footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    &-actions {
-      display: flex;
-      opacity: 0;
-
-      &-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        margin-right: 4px;
-        color: var(--color-text-3);
-        font-size: 14px;
-        border-radius: 50%;
-        cursor: pointer;
-
-        &:hover {
-          background-color: rgb(var(--gray-3));
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    &-collected {
-      .chat-item-actions-collect {
-        color: rgb(var(--gold-6));
-      }
-    }
-
-    &:hover {
-      background-color: rgb(var(--gray-2));
-
-      .chat-item-actions {
-        opacity: 1;
-      }
-    }
-  }
-</style>
diff --git a/src/views/home/monitor/components/chat-list.vue b/src/views/home/monitor/components/chat-list.vue
deleted file mode 100644
index 939bb63..0000000
--- a/src/views/home/monitor/components/chat-list.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="chat-list">
-    <ChatItem v-for="item in renderList" :key="item.id" :item-data="item" />
-    <a-result v-if="!renderList.length" status="404" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { PropType } from 'vue';
-  import { ChatRecord } from '@/api/message';
-  import ChatItem from './chat-item.vue';
-
-  defineProps({
-    renderList: {
-      type: Array as PropType<ChatRecord[]>,
-      default() {
-        return [];
-      },
-    },
-  });
-</script>
-
-<style scoped lang="less">
-  .chat-item {
-    padding: 8px;
-    font-size: 12px;
-    line-height: 20px;
-    border-radius: 2px;
-
-    &-footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    &-actions {
-      display: flex;
-      opacity: 0;
-
-      &-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        margin-right: 4px;
-        color: var(--color-text-3);
-        font-size: 12px;
-        border-radius: 50%;
-        cursor: pointer;
-
-        &:hover {
-          background-color: rgb(var(--gray-3));
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    &-collected {
-      .message-item-actions-collect {
-        color: rgb(var(--gold-6));
-      }
-    }
-
-    &:hover {
-      background-color: rgb(var(--gray-2));
-
-      .message-item-actions {
-        opacity: 1;
-      }
-    }
-  }
-</style>
diff --git a/src/views/home/monitor/components/chat-panel.vue b/src/views/home/monitor/components/chat-panel.vue
deleted file mode 100644
index 25ffdb9..0000000
--- a/src/views/home/monitor/components/chat-panel.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <a-card
-    class="general-card chat-panel"
-    :title="$t('monitor.title.chatPanel')"
-    :bordered="false"
-    :header-style="{ paddingBottom: '0' }"
-    :body-style="{
-      height: '100%',
-      paddingTop: '16px',
-      display: 'flex',
-      flexFlow: 'column',
-    }"
-  >
-    <a-space :size="8">
-      <a-select style="width: 86px" default-value="all">
-        <a-option value="all">
-          {{ $t('monitor.chat.options.all') }}
-        </a-option>
-      </a-select>
-      <a-input-search
-        :placeholder="$t('monitor.chat.placeholder.searchCategory')"
-      />
-      <a-button type="text">
-        <icon-download />
-      </a-button>
-    </a-space>
-    <div class="chat-panel-content">
-      <a-spin :loading="loading" style="width: 100%">
-        <ChatList :render-list="chatData" />
-      </a-spin>
-    </div>
-    <div class="chat-panel-footer">
-      <a-space :size="8">
-        <a-Input>
-          <template #suffix>
-            <icon-face-smile-fill />
-          </template>
-        </a-Input>
-        <a-button type="primary">{{ $t('monitor.chat.update') }}</a-button>
-      </a-space>
-    </div>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import { queryChatList, ChatRecord } from '@/api/message';
-  import useLoading from '@/hooks/loading';
-  import ChatList from './chat-list.vue';
-
-  const { loading, setLoading } = useLoading(true);
-  const chatData = ref<ChatRecord[]>([]);
-  const fetchData = async () => {
-    try {
-      const { data } = await queryChatList();
-      chatData.value = data;
-    } catch (err) {
-      // you can report use errorHandler or other
-    } finally {
-      setLoading(false);
-    }
-  };
-  fetchData();
-</script>
-
-<style scoped lang="less">
-  .chat-panel {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    // padding: 20px;
-    background-color: var(--color-bg-2);
-
-    &-content {
-      flex: 1;
-      margin: 20px 0;
-    }
-  }
-</style>
diff --git a/src/views/home/monitor/components/data-statistic-list.vue b/src/views/home/monitor/components/data-statistic-list.vue
deleted file mode 100644
index 8b00394..0000000
--- a/src/views/home/monitor/components/data-statistic-list.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <div>
-    <a-table
-      :columns="columns"
-      :data="data"
-      row-key="id"
-      :row-selection="{
-        type: 'checkbox',
-        showCheckedAll: true,
-      }"
-      :border="false"
-      :pagination="false"
-    />
-    <a-typography-text type="secondary" class="data-statistic-list-tip">
-      {{ $t('monitor.list.tip.rotations') }} {{ data.length }}
-      {{ $t('monitor.list.tip.rest') }}
-    </a-typography-text>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { computed, h, compile } from 'vue';
-  import { useI18n } from 'vue-i18n';
-  import type {
-    TableColumnData,
-    TableData,
-  } from '@arco-design/web-vue/es/table/interface.d';
-
-  interface PreviewRecord {
-    cover: string;
-    name: string;
-    duration: string;
-    id: string;
-    status: number;
-  }
-  const { t } = useI18n();
-  const data: PreviewRecord[] = [
-    {
-      cover:
-        'http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/c788fc704d32cf3b1136c7d45afc2669.png~tplv-uwbnlip3yd-webp.webp',
-      name: '视频直播',
-      duration: '00:05:19',
-      id: '54e23ade',
-      status: -1,
-    },
-  ];
-  const renderTag = (status: number) => {
-    if (status === -1) {
-      return `<a-tag  color="red" class='data-statistic-list-cover-tag'>
-            ${t('monitor.list.tag.auditFailed')}
-        </a-tag>`;
-    }
-    return '';
-  };
-  // Using the Render function is more flexible than using templates.
-  // But, cannot bind context and local scopes are also lost
-
-  const columns = computed(() => {
-    return [
-      {
-        title: t('monitor.list.title.order'),
-        render({
-          rowIndex,
-        }: {
-          record: TableData;
-          column: TableColumnData;
-          rowIndex: number;
-        }) {
-          const tmp = `<span>${rowIndex + 1}</span>`;
-          return h(compile(tmp));
-        },
-      },
-      {
-        title: t('monitor.list.title.cover'),
-        render({
-          record,
-        }: {
-          record: TableData;
-          column: TableColumnData;
-          rowIndex: number;
-        }) {
-          const tmp = `<div class='data-statistic-list-cover-wrapper'>
-              <img src=${record.cover} />
-              ${renderTag(record.status)}
-            </div>`;
-          return h(compile(tmp));
-        },
-      },
-      {
-        title: t('monitor.list.title.name'),
-        dataIndex: 'name',
-      },
-      {
-        dataIndex: 'duration',
-        title: t('monitor.list.title.duration'),
-      },
-      {
-        dataIndex: 'id',
-        title: t('monitor.list.title.id'),
-      },
-    ];
-  });
-</script>
-
-<style lang="less">
-  // Warning: Here is the global style
-  .data-statistic {
-    &-list {
-      &-cover {
-        &-wrapper {
-          position: relative;
-          height: 68px;
-
-          img {
-            height: 100%;
-          }
-        }
-
-        &-tag {
-          position: absolute;
-          top: 6px;
-          left: 6px;
-        }
-      }
-
-      &-tip {
-        display: block;
-        margin-top: 16px;
-        text-align: center;
-      }
-    }
-  }
-</style>
diff --git a/src/views/home/monitor/components/data-statistic.vue b/src/views/home/monitor/components/data-statistic.vue
deleted file mode 100644
index 3fcad0f..0000000
--- a/src/views/home/monitor/components/data-statistic.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <a-card class="data-statistic" :bordered="false" :body-style="{ padding: '16px' }">
-    <a-tabs default-active-tab="liveMethod">
-      <a-tab-pane
-        key="liveMethod"
-        :title="$t('monitor.tab.title.liveMethod')"
-      />
-      <a-tab-pane
-        key="onlinePopulation"
-        :title="$t('monitor.tab.title.onlinePopulation')"
-      />
-    </a-tabs>
-    <div class="data-statistic__content">
-      <a-radio-group :default-value="3" type="button">
-        <a-radio :value="1">{{ $t('monitor.liveMethod.normal') }}</a-radio>
-        <a-radio :value="2">{{ $t('monitor.liveMethod.flowControl') }}</a-radio>
-        <a-radio :value="3">{{ $t('monitor.liveMethod.video') }}</a-radio>
-        <a-radio :value="4">{{ $t('monitor.liveMethod.web') }}</a-radio>
-      </a-radio-group>
-
-      <div class="data-statistic__list">
-        <div class="table-toolbar data-statistic__toolbar">
-          <div class="toolbar-left" />
-          <div class="toolbar-right">
-            <a-space :size="8">
-              <a-button type="text">{{ $t('monitor.editCarousel') }}</a-button>
-              <a-button disabled>{{ $t('monitor.startCarousel') }}</a-button>
-            </a-space>
-          </div>
-        </div>
-        <div class="data-statistic__list-body">
-          <DataStatisticList />
-        </div>
-      </div>
-    </div>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import DataStatisticList from './data-statistic-list.vue';
-</script>
-
-<style scoped lang="less">
-  /* 工具栏与 docs/前端页面设计规范 table-toolbar 一致；列表操作靠右上角 */
-  .data-statistic {
-    &__content {
-      padding: 16px 0 0;
-    }
-
-    &__list {
-      margin-top: 16px;
-    }
-
-    &__toolbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      gap: 8px;
-      padding: 0 0 16px;
-      margin-bottom: 0;
-      flex-shrink: 0;
-    }
-
-    &__toolbar .toolbar-right {
-      margin-left: auto;
-    }
-
-    &__list-body {
-      margin-top: 0;
-    }
-  }
-</style>
diff --git a/src/views/home/monitor/components/quick-operation.vue b/src/views/home/monitor/components/quick-operation.vue
deleted file mode 100644
index c37db88..0000000
--- a/src/views/home/monitor/components/quick-operation.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <a-card class="general-card" :title="$t('monitor.title.quickOperation')">
-    <a-space direction="vertical" fill :size="10">
-      <a-button long>
-        {{ $t('monitor.quickOperation.changeClarity') }}
-        <template #icon>
-          <IconTags />
-        </template>
-      </a-button>
-      <a-button long>
-        {{ $t('monitor.quickOperation.switchStream') }}
-        <template #icon>
-          <IconSwap />
-        </template>
-      </a-button>
-      <a-button long>
-        {{ $t('monitor.quickOperation.removeClarity') }}
-        <template #icon>
-          <IconStop />
-        </template>
-      </a-button>
-      <a-button long>
-        {{ $t('monitor.quickOperation.pushFlowGasket') }}
-        <template #icon>
-          <IconArrowRight />
-        </template>
-      </a-button>
-    </a-space>
-  </a-card>
-</template>
-
-<script lang="ts" setup></script>
diff --git a/src/views/home/monitor/components/studio-information.vue b/src/views/home/monitor/components/studio-information.vue
deleted file mode 100644
index ba3f756..0000000
--- a/src/views/home/monitor/components/studio-information.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <a-card class="general-card" :title="$t('monitor.title.studioInfo')">
-    <a-form :model="{}" layout="vertical">
-      <a-form-item :label="$t('monitor.studioInfo.label.studioTitle')" required>
-        <a-input
-          :placeholder="`admin${$t(
-            'monitor.studioInfo.placeholder.studioTitle'
-          )}`"
-        />
-      </a-form-item>
-      <a-form-item
-        :label="$t('monitor.studioInfo.label.onlineNotification')"
-        required
-      >
-        <a-textarea />
-      </a-form-item>
-      <a-form-item
-        :label="$t('monitor.studioInfo.label.studioCategory')"
-        required
-      >
-        <a-input-search />
-      </a-form-item>
-      <a-form-item
-        :label="$t('monitor.studioInfo.label.studioCategory')"
-        required
-      >
-        <a-input-search />
-      </a-form-item>
-    </a-form>
-    <a-button type="primary">{{ $t('monitor.studioInfo.btn.fresh') }}</a-button>
-  </a-card>
-</template>
-
-<script lang="ts" setup></script>
diff --git a/src/views/home/monitor/components/studio-status.vue b/src/views/home/monitor/components/studio-status.vue
deleted file mode 100644
index d6ecc6c..0000000
--- a/src/views/home/monitor/components/studio-status.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <a-card
-    class="general-card"
-    :title="$t('monitor.studioStatus.title.studioStatus')"
-  >
-    <template #extra>
-      <a-tag color="green">{{ $t('monitor.studioStatus.smooth') }}</a-tag>
-    </template>
-    <a-descriptions layout="horizontal" :data="dataStatus" :column="2">
-      <template #label="{ label }">
-        <span
-          v-if="['mainstream', 'hotStandby', 'coldStandby'].includes(label)"
-        >
-          <a-typography-text style="padding-right: 8px">
-            {{ $t(`monitor.studioStatus.${label}`) }}
-          </a-typography-text>
-          {{ $t('monitor.studioStatus.bitRate') }}
-        </span>
-        <span v-else>{{ label }}</span>
-      </template>
-    </a-descriptions>
-    <a-typography-title style="margin-bottom: 16px" :heading="6">
-      {{ $t('monitor.studioStatus.title.pictureInfo') }}
-    </a-typography-title>
-    <a-descriptions layout="horizontal" :data="dataPicture" :column="2" />
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { computed } from 'vue';
-  import { useI18n } from 'vue-i18n';
-
-  const { t } = useI18n();
-  const dataStatus = computed(() => [
-    {
-      label: 'mainstream',
-      value: '6 Mbps',
-    },
-    {
-      label: t('monitor.studioStatus.frameRate'),
-      value: '60',
-    },
-    {
-      label: 'hotStandby',
-      value: '6 Mbps',
-    },
-    {
-      label: t('monitor.studioStatus.frameRate'),
-      value: '60',
-    },
-    {
-      label: 'coldStandby',
-      value: '6 Mbps',
-    },
-    {
-      label: t('monitor.studioStatus.frameRate'),
-      value: '60',
-    },
-  ]);
-  const dataPicture = computed(() => [
-    {
-      label: t('monitor.studioStatus.line'),
-      value: '热备',
-    },
-    {
-      label: 'CDN',
-      value: 'KS',
-    },
-    {
-      label: t('monitor.studioStatus.play'),
-      value: 'FLV',
-    },
-    {
-      label: t('monitor.studioStatus.pictureQuality'),
-      value: '原画',
-    },
-  ]);
-</script>
-
-<style scoped lang="less">
-  :deep(.arco-descriptions-item-label) {
-    padding-right: 6px;
-  }
-</style>
diff --git a/src/views/home/monitor/components/studio.vue b/src/views/home/monitor/components/studio.vue
deleted file mode 100644
index 9ae8651..0000000
--- a/src/views/home/monitor/components/studio.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <a-card class="general-card" :title="$t('monitor.title.studioPreview')">
-    <template #extra>
-      <icon-more />
-    </template>
-    <div class="studio-wrapper">
-      <img
-        src="http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/c788fc704d32cf3b1136c7d45afc2669.png~tplv-uwbnlip3yd-webp.webp"
-        class="studio-preview"
-      />
-      <div class="studio-bar">
-        <div v-if="userInfo">
-          <a-space :size="12">
-            <a-avatar :size="24">
-              <img :src="userInfo.avatar" />
-            </a-avatar>
-            <a-typography-text>
-              {{ userInfo.name }} {{ $t('monitor.studioPreview.studio') }}
-            </a-typography-text>
-          </a-space>
-        </div>
-        <a-typography-text type="secondary">
-          36,000 {{ $t('monitor.studioPreview.watching') }}
-        </a-typography-text>
-      </div>
-    </div>
-  </a-card>
-</template>
-
-<script lang="ts" setup>
-  import { useUserStore } from '@/store';
-
-  const userInfo = useUserStore();
-</script>
-
-<style scoped lang="less">
-  .studio {
-    &-preview {
-      display: block;
-      width: 100%;
-      max-width: 600px;
-      margin: 0 auto;
-    }
-
-    &-bar {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 16px;
-    }
-  }
-</style>
diff --git a/src/views/home/monitor/index.vue b/src/views/home/monitor/index.vue
index 5495f8f..dd74f76 100644
--- a/src/views/home/monitor/index.vue
+++ b/src/views/home/monitor/index.vue
@@ -1,120 +1,1314 @@
 <template>
-  <div class="monitor-container">
-    <div class="monitor-page-card">
-      <Breadcrumb
-        class="monitor-page-card__breadcrumb"
-        :items="['menu.home', 'menu.home.monitor']"
-      />
-      <div class="monitor-layout">
-        <div class="monitor-layout__left">
-          <ChatPanel />
-        </div>
-        <div class="monitor-layout__main">
-          <a-space :size="16" direction="vertical" fill>
-            <Studio />
-            <DataStatistic />
-          </a-space>
-        </div>
-        <div class="monitor-layout__right">
-          <a-space :size="16" direction="vertical" fill>
-            <StudioStatus />
-            <QuickOperation />
-            <StudioInformation />
-          </a-space>
-        </div>
+  <div ref="logisticsMonitorRoot" class="logistics-monitor-container">
+    <div class="logistics-monitor-card">
+      <div class="logistics-monitor-header">
+        <h2 class="logistics-monitor-title">{{ $t('monitor.logistics.pageTitle') }}</h2>
+      </div>
+
+      <div class="logistics-monitor-body">
+        <a-tabs
+          v-model:active-key="monitorTab"
+          type="rounded"
+          :animation="false"
+          :justify="true"
+          class="monitor-top-tabs"
+        >
+          <a-tab-pane key="order" :title="$t('monitor.logistics.tab.order')">
+            <a-row :gutter="[12, 12]" align="stretch" class="logistics-monitor-stats">
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.todayOrders') }}</div>
+                      <div class="stat-item__icon stat-item__icon--primary">
+                        <icon-calendar-clock />
+                      </div>
+                    </div>
+                    <div class="stat-value">1,896</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend up">
+                        <icon-arrow-up />
+                        12.5% {{ $t('monitor.logistics.vsYesterday') }}
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.historicalOrders') }}</div>
+                      <div class="stat-item__icon stat-item__icon--primary">
+                        <icon-history />
+                      </div>
+                    </div>
+                    <div class="stat-value">128,460</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend up">
+                        <icon-arrow-up />
+                        2.1% {{ $t('monitor.logistics.vsLastMonth') }}
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.pendingPayment') }}</div>
+                      <div class="stat-item__icon stat-item__icon--warning">
+                        <icon-stamp />
+                      </div>
+                    </div>
+                    <div class="stat-value stat-value--warning">56</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend down">
+                        <icon-arrow-down />
+                        4.0% {{ $t('monitor.logistics.vsYesterday') }}
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.pendingOnline') }}</div>
+                      <div class="stat-item__icon stat-item__icon--primary">
+                        <icon-send />
+                      </div>
+                    </div>
+                    <div class="stat-value">312</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend up">
+                        <icon-arrow-up />
+                        3.6% {{ $t('monitor.logistics.vsYesterday') }}
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.pendingSign') }}</div>
+                      <div class="stat-item__icon stat-item__icon--primary">
+                        <icon-check-circle />
+                      </div>
+                    </div>
+                    <div class="stat-value">892</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend down">
+                        <icon-arrow-down />
+                        1.2% {{ $t('monitor.logistics.vsYesterday') }}
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.orderExceptions') }}</div>
+                      <div class="stat-item__icon stat-item__icon--warning">
+                        <icon-exclamation-circle />
+                      </div>
+                    </div>
+                    <div class="stat-value stat-value--warning">23</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend down">
+                        <icon-arrow-down />
+                        8.2% {{ $t('monitor.logistics.vsYesterday') }}
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.todayRevenue') }}</div>
+                      <div class="stat-item__icon stat-item__icon--primary">
+                        <icon-bar-chart />
+                      </div>
+                    </div>
+                    <div class="stat-value">¥ 126,390</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend up">
+                        <icon-arrow-up />
+                        18.7% {{ $t('monitor.logistics.vsYesterday') }}
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+            </a-row>
+
+            <a-row :gutter="[16, 16]" class="logistics-monitor-trend-charts">
+              <a-col :xs="24" :lg="12">
+                <a-card :title="$t('monitor.logistics.chart.orders7d')" class="chart-card">
+                  <div ref="orderChartRef" class="chart-host"></div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :lg="12">
+                <a-card :title="$t('monitor.logistics.chart.revenueGross7d')" class="chart-card">
+                  <div ref="profitChartRef" class="chart-host"></div>
+                </a-card>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+
+          <a-tab-pane key="customer" :title="$t('monitor.logistics.tab.customer')">
+            <a-row :gutter="[12, 12]" align="stretch" class="logistics-monitor-stats">
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.totalCustomers') }}</div>
+                      <div class="stat-item__icon stat-item__icon--primary">
+                        <icon-user-group />
+                      </div>
+                    </div>
+                    <div class="stat-value">12,480</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend up">
+                        <icon-arrow-up />
+                        1.2% {{ $t('monitor.logistics.vsLastMonth') }}
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.newCustomers') }}</div>
+                      <div class="stat-item__icon stat-item__icon--primary">
+                        <icon-user-add />
+                      </div>
+                    </div>
+                    <div class="stat-value">86</div>
+                    <div class="stat-footer">
+                      <div class="stat-trend up">
+                        <icon-arrow-up />
+                        6.2% {{ $t('monitor.logistics.vsYesterday') }}
+                      </div>
+                      <div class="stat-hint">{{ $t('monitor.logistics.hint.newCustomersToday') }}</div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.onlineCustomers') }}</div>
+                      <div class="stat-item__icon stat-item__icon--online">
+                        <icon-thunderbolt />
+                      </div>
+                    </div>
+                    <div class="stat-value">342</div>
+                    <div class="stat-footer">
+                      <div class="stat-hint stat-hint--accent">{{ $t('monitor.logistics.hint.onlineRealtime') }}</div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+                <a-card hoverable class="stat-card" :body-style="{ padding: '12px', height: '100%' }">
+                  <div class="stat-item">
+                    <div class="stat-item__head">
+                      <div class="stat-label">{{ $t('monitor.logistics.stat.inactiveLogin7d') }}</div>
+                      <div class="stat-item__icon stat-item__icon--warning">
+                        <icon-clock-circle />
+                      </div>
+                    </div>
+                    <div class="stat-value stat-value--warning">156</div>
+                    <div class="stat-footer">
+                      <div class="stat-hint">{{ $t('monitor.logistics.hint.inactiveLogin7d') }}</div>
+                      <div class="stat-hint">{{ $t('monitor.logistics.hint.inactiveLogin7dCompare') }}</div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+            </a-row>
+
+            <a-row :gutter="[16, 16]" class="logistics-monitor-customer-trends">
+              <a-col :span="24">
+                <a-card class="chart-card">
+                  <template #title>
+                    {{ $t('monitor.logistics.chart.customerTrendsSection') }}
+                  </template>
+                  <div class="sign-rate-toolbar pie-toolbar">
+                    <span class="sign-rate-toolbar__label">{{ $t('monitor.logistics.filter.line') }}</span>
+                    <a-select
+                      v-model="customerTrendLine"
+                      :options="lineFilterOptions"
+                      :style="{ width: '160px' }"
+                      allow-clear
+                    />
+                    <span class="sign-rate-toolbar__label">{{ $t('monitor.logistics.filter.statPeriod') }}</span>
+                    <a-radio-group v-model="customerTrendPeriod" type="button" size="small">
+                      <a-radio value="week">{{ $t('monitor.logistics.filter.periodWeek') }}</a-radio>
+                      <a-radio value="month">{{ $t('monitor.logistics.filter.periodMonth') }}</a-radio>
+                    </a-radio-group>
+                  </div>
+                  <a-row :gutter="[12, 12]" class="customer-trend-charts-row">
+                    <a-col :xs="24" :lg="12">
+                      <div class="customer-chart-block">
+                        <div class="customer-chart-block__title">
+                          {{ $t('monitor.logistics.chart.customerOrdersByLine') }}
+                        </div>
+                        <div ref="customerOrderTrendRef" class="chart-host"></div>
+                      </div>
+                    </a-col>
+                    <a-col :xs="24" :lg="12">
+                      <div class="customer-chart-block">
+                        <div class="customer-chart-block__title">
+                          {{ $t('monitor.logistics.chart.customerReceivableByLine') }}
+                        </div>
+                        <div ref="customerReceivableTrendRef" class="chart-host"></div>
+                      </div>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+
+          <a-tab-pane key="track" :title="$t('monitor.logistics.tab.track')">
+            <a-row :gutter="[16, 16]" class="logistics-monitor-sign-rate-row">
+              <a-col :span="24">
+                <a-card class="chart-card">
+                  <template #title>
+                    {{ $t('monitor.logistics.chart.signRateByLine') }}
+                  </template>
+                  <div class="sign-rate-toolbar">
+                    <span class="sign-rate-toolbar__label">{{ $t('monitor.logistics.filter.line') }}</span>
+                    <a-select
+                      v-model="filterLine"
+                      :options="lineFilterOptions"
+                      :style="{ width: '160px' }"
+                      allow-clear
+                    />
+                    <span class="sign-rate-toolbar__label">{{ $t('monitor.logistics.filter.signDays') }}</span>
+                    <a-select
+                      v-model="filterSignDays"
+                      :options="signDaysFilterOptions"
+                      :style="{ width: '120px' }"
+                    />
+                  </div>
+                  <div ref="signRateChartRef" class="chart-host chart-host--sign-rate"></div>
+                </a-card>
+              </a-col>
+            </a-row>
+
+            <a-row :gutter="[16, 16]" class="logistics-monitor-pie-row">
+              <a-col :span="24">
+                <a-card class="chart-card">
+                  <template #title>
+                    {{ $t('monitor.logistics.pie.sectionTitle') }}
+                  </template>
+                  <div class="sign-rate-toolbar pie-toolbar">
+                    <span class="sign-rate-toolbar__label">{{ $t('monitor.logistics.filter.line') }}</span>
+                    <a-select
+                      v-model="pieFilterLine"
+                      :options="lineFilterOptions"
+                      :style="{ width: '160px' }"
+                      allow-clear
+                    />
+                    <span class="sign-rate-toolbar__label">{{ $t('monitor.logistics.filter.statPeriod') }}</span>
+                    <a-radio-group v-model="piePeriod" type="button" size="small">
+                      <a-radio value="week">{{ $t('monitor.logistics.filter.periodWeek') }}</a-radio>
+                      <a-radio value="month">{{ $t('monitor.logistics.filter.periodMonth') }}</a-radio>
+                    </a-radio-group>
+                  </div>
+                  <a-row :gutter="[12, 12]" class="pie-charts-row">
+                    <a-col :xs="24" :md="8">
+                      <div class="pie-chart-block">
+                        <div class="pie-chart-block__title">{{ $t('monitor.logistics.pie.trackComplete') }}</div>
+                        <div ref="pieTrackCompleteRef" class="chart-host chart-host--pie"></div>
+                      </div>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <div class="pie-chart-block">
+                        <div class="pie-chart-block__title">{{ $t('monitor.logistics.pie.trackTimely') }}</div>
+                        <div ref="pieTrackTimelyRef" class="chart-host chart-host--pie"></div>
+                      </div>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <div class="pie-chart-block">
+                        <div class="pie-chart-block__title">{{ $t('monitor.logistics.pie.otd') }}</div>
+                        <div ref="pieOtdRef" class="chart-host chart-host--pie"></div>
+                      </div>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+        </a-tabs>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import ChatPanel from './components/chat-panel.vue';
-  import Studio from './components/studio.vue';
-  import DataStatistic from './components/data-statistic.vue';
-  import StudioStatus from './components/studio-status.vue';
-  import QuickOperation from './components/quick-operation.vue';
-  import StudioInformation from './components/studio-information.vue';
-</script>
+  import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
+  import * as echarts from 'echarts';
+  import { modifyAlpha } from 'zrender/lib/tool/color';
+  import { useI18n } from 'vue-i18n';
 
-<script lang="ts">
-  export default {
-    name: 'Monitor',
+  defineOptions({ name: 'Monitor' });
+
+  const { t } = useI18n();
+
+  const LINE_KEYS = ['us', 'eu', 'sea', 'au', 'jp', 'uk'] as const;
+  type LineKey = (typeof LINE_KEYS)[number];
+
+  const baseSignRates: Record<LineKey, number> = {
+    us: 93.2,
+    eu: 89.5,
+    sea: 91.0,
+    au: 87.3,
+    jp: 94.1,
+    uk: 90.0,
   };
+
+  const orderChartRef = ref<HTMLElement | null>(null);
+  const profitChartRef = ref<HTMLElement | null>(null);
+  const signRateChartRef = ref<HTMLElement | null>(null);
+  const customerOrderTrendRef = ref<HTMLElement | null>(null);
+  const customerReceivableTrendRef = ref<HTMLElement | null>(null);
+  const pieTrackCompleteRef = ref<HTMLElement | null>(null);
+  const pieTrackTimelyRef = ref<HTMLElement | null>(null);
+  const pieOtdRef = ref<HTMLElement | null>(null);
+
+  const logisticsMonitorRoot = ref<HTMLElement | null>(null);
+  const monitorTab = ref<'customer' | 'order' | 'track'>('order');
+
+  let layoutResizeObserver: ResizeObserver | null = null;
+
+  const filterLine = ref<string | undefined>('all');
+  const filterSignDays = ref(7);
+  const pieFilterLine = ref<string | undefined>('all');
+  const piePeriod = ref<'week' | 'month'>('week');
+  const customerTrendLine = ref<string | undefined>('all');
+  const customerTrendPeriod = ref<'week' | 'month'>('week');
+
+  type PieMetricKey = 'complete' | 'timely' | 'otd';
+
+  const pieMetricBase: Record<LineKey, Record<PieMetricKey, number>> = {
+    us: { complete: 92.4, timely: 89.1, otd: 91.3 },
+    eu: { complete: 88.2, timely: 85.6, otd: 87.9 },
+    sea: { complete: 90.5, timely: 88.0, otd: 89.4 },
+    au: { complete: 86.8, timely: 84.2, otd: 86.1 },
+    jp: { complete: 93.1, timely: 90.8, otd: 92.5 },
+    uk: { complete: 89.4, timely: 87.0, otd: 88.6 },
+  };
+
+  let orderChartInstance: echarts.ECharts | null = null;
+  let profitChartInstance: echarts.ECharts | null = null;
+  let signRateChartInstance: echarts.ECharts | null = null;
+  let customerOrderTrendInstance: echarts.ECharts | null = null;
+  let customerReceivableTrendInstance: echarts.ECharts | null = null;
+  let pieTrackCompleteInstance: echarts.ECharts | null = null;
+  let pieTrackTimelyInstance: echarts.ECharts | null = null;
+  let pieOtdInstance: echarts.ECharts | null = null;
+
+  const lineFilterOptions = computed(() => [
+    { label: t('monitor.logistics.filter.allLines'), value: 'all' },
+    ...LINE_KEYS.map((key) => ({
+      label: t(`monitor.logistics.line.${key}`),
+      value: key,
+    })),
+  ]);
+
+  const signDaysFilterOptions = computed(() =>
+    [3, 5, 7, 10, 15].map((n) => ({
+      label: t('monitor.logistics.filter.signDaysOption', { n }),
+      value: n,
+    })),
+  );
+
+  function buildSignRateSeries(): { categories: string[]; values: number[] } {
+    const days = filterSignDays.value;
+    const lineKey = filterLine.value;
+    const keys: LineKey[] =
+      !lineKey || lineKey === 'all'
+        ? [...LINE_KEYS]
+        : LINE_KEYS.includes(lineKey as LineKey)
+          ? [lineKey as LineKey]
+          : [...LINE_KEYS];
+
+    const dayFactor = 1 + (days - 7) * 0.0045;
+
+    const categories: string[] = [];
+    const values: number[] = [];
+
+    keys.forEach((key) => {
+      const raw = baseSignRates[key] * dayFactor + (keys.length === 1 ? 0.3 : 0);
+      const v = Math.min(100, Math.max(0, Number(raw.toFixed(1))));
+      categories.push(t(`monitor.logistics.line.${key}`));
+      values.push(v);
+    });
+
+    return { categories, values };
+  }
+
+  function renderSignRateChart() {
+    if (!signRateChartRef.value) return;
+    const primary = readCssVar('--app-primary-color', '#2D8C8C');
+    const axisLine = readCssVar('--color-border-2', '#e5e6eb');
+    const { categories, values } = buildSignRateSeries();
+
+    if (!signRateChartInstance) {
+      signRateChartInstance = echarts.init(signRateChartRef.value);
+    }
+
+    signRateChartInstance.setOption({
+      grid: { left: '3%', right: '3%', bottom: '3%', top: '8%', containLabel: true },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' },
+        valueFormatter: (val: number) => `${val}%`,
+      },
+      xAxis: {
+        type: 'category',
+        data: categories,
+        axisTick: { alignWithLabel: true },
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { interval: 0, rotate: categories.length > 6 ? 24 : 0 },
+      },
+      yAxis: {
+        type: 'value',
+        min: 0,
+        max: 100,
+        axisLabel: { formatter: '{value}%' },
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: axisLine, opacity: 0.35 } },
+        name: t('monitor.logistics.axis.complianceRate'),
+        nameTextStyle: { color: readCssVar('--color-text-2', '#86909c'), fontSize: 12 },
+      },
+      series: [
+        {
+          name: t('monitor.logistics.series.signRate'),
+          type: 'bar',
+          barMaxWidth: 48,
+          data: values,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: modifyAlpha(primary, 0.95) },
+              { offset: 1, color: modifyAlpha(primary, 0.45) },
+            ]),
+            borderRadius: [4, 4, 0, 0],
+          },
+          label: {
+            show: true,
+            position: 'top',
+            formatter: (p: { value: number }) => `${p.value}%`,
+            fontSize: 11,
+            color: readCssVar('--color-text-2', '#86909c'),
+          },
+        },
+      ],
+    });
+  }
+
+  function getActiveLineKeysForPie(): LineKey[] {
+    const v = pieFilterLine.value;
+    if (!v || v === 'all') return [...LINE_KEYS];
+    return LINE_KEYS.includes(v as LineKey) ? [v as LineKey] : [...LINE_KEYS];
+  }
+
+  function averagePieMetric(metric: PieMetricKey): number {
+    const keys = getActiveLineKeysForPie();
+    const periodMul = piePeriod.value === 'month' ? 1.012 : 0.992;
+    let sum = 0;
+    keys.forEach((k) => {
+      sum += pieMetricBase[k][metric];
+    });
+    const raw = (sum / keys.length) * periodMul;
+    return Math.min(99.5, Math.max(70, Number(raw.toFixed(1))));
+  }
+
+  function buildPieChartOption(passColor: string, metric: PieMetricKey) {
+    const pass = averagePieMetric(metric);
+    const fail = Number((100 - pass).toFixed(1));
+    const neutral = readCssVar('--color-fill-3', '#e5e6eb');
+    const passName = t('monitor.logistics.pie.pass');
+    const failName = t('monitor.logistics.pie.fail');
+
+    return {
+      tooltip: {
+        trigger: 'item' as const,
+        formatter: `{b}: {c}% ({d}%)`,
+      },
+      legend: {
+        bottom: 0,
+        icon: 'circle',
+        textStyle: { fontSize: 12, color: readCssVar('--color-text-2', '#86909c') },
+      },
+      series: [
+        {
+          type: 'pie' as const,
+          radius: ['44%', '72%'],
+          center: ['50%', '46%'],
+          avoidLabelOverlap: true,
+          itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
+          label: {
+            formatter: '{b}\n{d}%',
+            fontSize: 11,
+            color: readCssVar('--color-text-2', '#86909c'),
+          },
+          labelLine: { length: 10, length2: 8 },
+          data: [
+            { name: passName, value: pass, itemStyle: { color: passColor } },
+            { name: failName, value: fail, itemStyle: { color: neutral } },
+          ],
+        },
+      ],
+    };
+  }
+
+  function renderPieCharts() {
+    const primary = readCssVar('--app-primary-color', '#2D8C8C');
+    const timelyColor = readCssVar('--color-link-6', '#14C9C9');
+    const otdColor = readCssVar('--color-warning-6', '#FF7D00');
+
+    if (pieTrackCompleteRef.value) {
+      if (!pieTrackCompleteInstance) pieTrackCompleteInstance = echarts.init(pieTrackCompleteRef.value);
+      pieTrackCompleteInstance.setOption(buildPieChartOption(primary, 'complete'));
+    }
+    if (pieTrackTimelyRef.value) {
+      if (!pieTrackTimelyInstance) pieTrackTimelyInstance = echarts.init(pieTrackTimelyRef.value);
+      pieTrackTimelyInstance.setOption(buildPieChartOption(timelyColor, 'timely'));
+    }
+    if (pieOtdRef.value) {
+      if (!pieOtdInstance) pieOtdInstance = echarts.init(pieOtdRef.value);
+      pieOtdInstance.setOption(buildPieChartOption(otdColor, 'otd'));
+    }
+  }
+
+  function readCssVar(name: string, fallback: string): string {
+    if (typeof document === 'undefined') return fallback;
+    const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    return v || fallback;
+  }
+
+  function onResize() {
+    orderChartInstance?.resize();
+    profitChartInstance?.resize();
+    signRateChartInstance?.resize();
+    customerOrderTrendInstance?.resize();
+    customerReceivableTrendInstance?.resize();
+    pieTrackCompleteInstance?.resize();
+    pieTrackTimelyInstance?.resize();
+    pieOtdInstance?.resize();
+  }
+
+  function getLineTrendColors(): string[] {
+    const primary = readCssVar('--app-primary-color', '#2D8C8C');
+    return [primary, '#00B42A', '#FF7D00', '#14C9C9', '#722ED1', '#F5319D'];
+  }
+
+  function getActiveCustomerLineKeys(): LineKey[] {
+    const v = customerTrendLine.value;
+    if (!v || v === 'all') return [...LINE_KEYS];
+    return LINE_KEYS.includes(v as LineKey) ? [v as LineKey] : [...LINE_KEYS];
+  }
+
+  function buildCustomerPeriodLabels(period: 'week' | 'month'): string[] {
+    const n = period === 'week' ? 8 : 6;
+    return Array.from({ length: n }, (_, i) =>
+      period === 'week'
+        ? t('monitor.logistics.axis.weekIndex', { n: i + 1 })
+        : t('monitor.logistics.axis.monthIndex', { n: i + 1 }),
+    );
+  }
+
+  const orderBaseByLine: Record<LineKey, number> = {
+    us: 420,
+    eu: 310,
+    sea: 280,
+    au: 190,
+    jp: 350,
+    uk: 260,
+  };
+
+  function buildMockOrderSeries(line: LineKey, period: 'week' | 'month', len: number): number[] {
+    const scale = period === 'month' ? 4.2 : 1;
+    const b = orderBaseByLine[line] * scale;
+    const idx = LINE_KEYS.indexOf(line);
+    return Array.from({ length: len }, (_, i) => {
+      const wave = Math.sin((i + idx) * 0.55) * (period === 'month' ? 45 : 12);
+      const trend = i * (period === 'month' ? 8 : 3);
+      return Math.round(b + wave + trend);
+    });
+  }
+
+  function buildMockReceivableSeries(line: LineKey, period: 'week' | 'month', len: number): number[] {
+    const orders = buildMockOrderSeries(line, period, len);
+    const unitPrice = 280 + LINE_KEYS.indexOf(line) * 15;
+    return orders.map((o) => Math.round(o * unitPrice));
+  }
+
+  function renderCustomerTrendCharts() {
+    const period = customerTrendPeriod.value;
+    const categories = buildCustomerPeriodLabels(period);
+    const keys = getActiveCustomerLineKeys();
+    const colors = getLineTrendColors();
+    const axisLine = readCssVar('--color-border-2', '#e5e6eb');
+    const text2 = readCssVar('--color-text-2', '#86909c');
+
+    const orderSeries = keys.map((key) => ({
+      name: t(`monitor.logistics.line.${key}`),
+      type: 'line' as const,
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: keys.length > 2 ? 4 : 6,
+      data: buildMockOrderSeries(key, period, categories.length),
+      itemStyle: { color: colors[LINE_KEYS.indexOf(key) % colors.length] },
+      lineStyle: { width: keys.length > 2 ? 2 : 2.5 },
+    }));
+
+    const receivableSeries = keys.map((key) => ({
+      name: t(`monitor.logistics.line.${key}`),
+      type: 'line' as const,
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: keys.length > 2 ? 4 : 6,
+      data: buildMockReceivableSeries(key, period, categories.length),
+      itemStyle: { color: colors[LINE_KEYS.indexOf(key) % colors.length] },
+      lineStyle: { width: keys.length > 2 ? 2 : 2.5 },
+    }));
+
+    const grid = { left: '3%', right: '3%', bottom: keys.length > 1 ? '14%' : '3%', top: '10%', containLabel: true };
+
+    const baseOption = {
+      grid,
+      legend: {
+        show: keys.length > 1,
+        type: 'scroll' as const,
+        bottom: 0,
+        textStyle: { fontSize: 11, color: text2 },
+      },
+      xAxis: {
+        type: 'category' as const,
+        data: categories,
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { color: text2, interval: 0, rotate: categories.length > 7 ? 18 : 0 },
+      },
+      yAxis: {
+        type: 'value' as const,
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: axisLine, opacity: 0.35 } },
+        axisLabel: { color: text2 },
+      },
+    };
+
+    if (customerOrderTrendRef.value) {
+      if (!customerOrderTrendInstance) {
+        customerOrderTrendInstance = echarts.init(customerOrderTrendRef.value);
+      }
+      customerOrderTrendInstance.setOption(
+        {
+          ...baseOption,
+          tooltip: {
+            trigger: 'axis',
+          },
+          series: orderSeries,
+        },
+        { notMerge: true },
+      );
+    }
+
+    if (customerReceivableTrendRef.value) {
+      if (!customerReceivableTrendInstance) {
+        customerReceivableTrendInstance = echarts.init(customerReceivableTrendRef.value);
+      }
+      customerReceivableTrendInstance.setOption(
+        {
+          ...baseOption,
+          tooltip: {
+            trigger: 'axis',
+            valueFormatter: (val: number) => `¥ ${Number(val).toLocaleString()}`,
+          },
+          yAxis: {
+            ...baseOption.yAxis,
+            axisLabel: {
+              color: text2,
+              formatter: (v: number) => `¥${(v / 1000).toFixed(0)}k`,
+            },
+          },
+          series: receivableSeries,
+        },
+        { notMerge: true },
+      );
+    }
+  }
+
+  function ensureCustomerCharts() {
+    renderCustomerTrendCharts();
+    customerOrderTrendInstance?.resize();
+    customerReceivableTrendInstance?.resize();
+  }
+
+  function ensureOrderLineCharts() {
+    const primary = readCssVar('--app-primary-color', '#2D8C8C');
+    const axisLine = readCssVar('--color-border-2', '#e5e6eb');
+    const dayLabels = [
+      t('monitor.logistics.axis.d1'),
+      t('monitor.logistics.axis.d2'),
+      t('monitor.logistics.axis.d3'),
+      t('monitor.logistics.axis.d4'),
+      t('monitor.logistics.axis.d5'),
+      t('monitor.logistics.axis.d6'),
+      t('monitor.logistics.axis.today'),
+    ];
+
+    if (orderChartRef.value) {
+      if (!orderChartInstance) {
+        orderChartInstance = echarts.init(orderChartRef.value);
+        orderChartInstance.setOption({
+          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+          tooltip: { trigger: 'axis' },
+          xAxis: {
+            type: 'category',
+            data: dayLabels,
+            axisLine: { lineStyle: { color: axisLine } },
+          },
+          yAxis: { type: 'value', axisLine: { lineStyle: { color: axisLine } } },
+          series: [
+            {
+              name: t('monitor.logistics.series.orders'),
+              type: 'line',
+              smooth: true,
+              data: [1230, 1350, 1420, 1580, 1660, 1790, 1896],
+              itemStyle: { color: primary },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: modifyAlpha(primary, 0.2) },
+                  { offset: 1, color: modifyAlpha(primary, 0) },
+                ]),
+              },
+            },
+          ],
+        });
+      }
+    }
+
+    if (profitChartRef.value) {
+      if (!profitChartInstance) {
+        profitChartInstance = echarts.init(profitChartRef.value);
+        const revenueColor = '#00B42A';
+        const grossColor = '#FF7D00';
+        profitChartInstance.setOption({
+          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+          tooltip: { trigger: 'axis' },
+          legend: {
+            data: [t('monitor.logistics.series.revenue'), t('monitor.logistics.series.grossProfit')],
+            bottom: 0,
+          },
+          xAxis: {
+            type: 'category',
+            data: dayLabels,
+            axisLine: { lineStyle: { color: axisLine } },
+          },
+          yAxis: { type: 'value', axisLine: { lineStyle: { color: axisLine } } },
+          series: [
+            {
+              name: t('monitor.logistics.series.revenue'),
+              type: 'line',
+              smooth: true,
+              data: [85600, 92300, 98700, 105200, 111500, 118900, 126390],
+              itemStyle: { color: revenueColor },
+            },
+            {
+              name: t('monitor.logistics.series.grossProfit'),
+              type: 'line',
+              smooth: true,
+              data: [21400, 23000, 24600, 26200, 27800, 29600, 31500],
+              itemStyle: { color: grossColor },
+            },
+          ],
+        });
+      }
+    }
+
+    orderChartInstance?.resize();
+    profitChartInstance?.resize();
+  }
+
+  function ensureTrackCharts() {
+    renderSignRateChart();
+    renderPieCharts();
+    signRateChartInstance?.resize();
+    pieTrackCompleteInstance?.resize();
+    pieTrackTimelyInstance?.resize();
+    pieOtdInstance?.resize();
+  }
+
+  onMounted(async () => {
+    await nextTick();
+    window.addEventListener('resize', onResize);
+    if (typeof ResizeObserver !== 'undefined' && logisticsMonitorRoot.value) {
+      layoutResizeObserver = new ResizeObserver(() => onResize());
+      layoutResizeObserver.observe(logisticsMonitorRoot.value);
+    }
+  });
+
+  function disposeOrderCharts() {
+    orderChartInstance?.dispose();
+    profitChartInstance?.dispose();
+    orderChartInstance = null;
+    profitChartInstance = null;
+  }
+
+  function disposeTrackCharts() {
+    signRateChartInstance?.dispose();
+    pieTrackCompleteInstance?.dispose();
+    pieTrackTimelyInstance?.dispose();
+    pieOtdInstance?.dispose();
+    signRateChartInstance = null;
+    pieTrackCompleteInstance = null;
+    pieTrackTimelyInstance = null;
+    pieOtdInstance = null;
+  }
+
+  function disposeCustomerCharts() {
+    customerOrderTrendInstance?.dispose();
+    customerReceivableTrendInstance?.dispose();
+    customerOrderTrendInstance = null;
+    customerReceivableTrendInstance = null;
+  }
+
+  watch(
+    monitorTab,
+    (key, prev) => {
+      if (prev === 'order') disposeOrderCharts();
+      if (prev === 'track') disposeTrackCharts();
+      if (prev === 'customer') disposeCustomerCharts();
+      nextTick(() => {
+        if (key === 'order') ensureOrderLineCharts();
+        if (key === 'track') ensureTrackCharts();
+        if (key === 'customer') ensureCustomerCharts();
+        nextTick(() => onResize());
+      });
+    },
+    { immediate: true },
+  );
+
+  watch([filterLine, filterSignDays], () => {
+    nextTick(() => {
+      if (monitorTab.value === 'track') renderSignRateChart();
+    });
+  });
+
+  watch([pieFilterLine, piePeriod], () => {
+    nextTick(() => {
+      if (monitorTab.value === 'track') renderPieCharts();
+    });
+  });
+
+  watch([customerTrendLine, customerTrendPeriod], () => {
+    nextTick(() => {
+      if (monitorTab.value === 'customer') renderCustomerTrendCharts();
+    });
+  });
+
+  onUnmounted(() => {
+    layoutResizeObserver?.disconnect();
+    layoutResizeObserver = null;
+    window.removeEventListener('resize', onResize);
+    orderChartInstance?.dispose();
+    profitChartInstance?.dispose();
+    signRateChartInstance?.dispose();
+    customerOrderTrendInstance?.dispose();
+    customerReceivableTrendInstance?.dispose();
+    pieTrackCompleteInstance?.dispose();
+    pieTrackTimelyInstance?.dispose();
+    pieOtdInstance?.dispose();
+    orderChartInstance = null;
+    profitChartInstance = null;
+    signRateChartInstance = null;
+    customerOrderTrendInstance = null;
+    customerReceivableTrendInstance = null;
+    pieTrackCompleteInstance = null;
+    pieTrackTimelyInstance = null;
+    pieOtdInstance = null;
+  });
 </script>
 
 <style scoped lang="less">
-  /* 见 docs/前端页面设计规范：灰底壳 + 白卡片 + 16px 体系 */
-  .monitor-container {
+  .logistics-monitor-container {
     box-sizing: border-box;
     flex: 1;
     min-height: 0;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 16px 16px 32px;
+    padding: 16px;
     background: #f0f3f4;
+    overflow: hidden;
   }
 
-  .monitor-page-card {
-    flex: 1;
-    min-height: 0;
+  .logistics-monitor-card {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    max-height: 100%;
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     padding: 16px;
+    box-sizing: border-box;
+    overflow: hidden;
   }
 
-  .monitor-page-card__breadcrumb {
-    flex-shrink: 0;
+  .logistics-monitor-header {
     margin-bottom: 16px;
+    flex-shrink: 0;
+    text-align: center;
   }
 
-  .monitor-layout {
+  .logistics-monitor-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .monitor-top-tabs {
+    width: 100%;
     flex: 1;
     min-height: 0;
     display: flex;
+    flex-direction: column;
     overflow: hidden;
 
-    &__left {
-      flex: 0 0 300px;
-      min-width: 0;
-    }
-
-    &__main {
+    :deep(.arco-tabs) {
       flex: 1;
-      min-width: 0;
-      padding: 0 16px;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
     }
 
-    &__right {
-      flex: 0 0 280px;
+    :deep(.arco-tabs-nav) {
+      justify-content: flex-start;
+      flex-shrink: 0;
+    }
+
+    :deep(.arco-tabs-nav-tab-list) {
+      justify-content: flex-start;
+      flex-wrap: wrap;
+    }
+
+    :deep(.arco-tabs-content) {
+      flex: 1;
+      min-height: 0;
       min-width: 0;
+      padding: 12px 0 0;
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    :deep(.arco-tabs-content-list) {
+      height: 100%;
+    }
+
+    :deep(.arco-tabs-pane) {
+      overflow: visible;
     }
   }
 
-  @media (max-width: @screen-lg) {
-    .monitor-layout {
-      flex-wrap: wrap;
-      overflow: visible;
+  .logistics-monitor-title {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+    color: var(--color-text-1);
+  }
 
-      &__left {
-        flex: 1 1 100%;
-        margin-bottom: 16px;
-      }
+  .logistics-monitor-stats {
+    margin-bottom: 10px;
 
-      &__main {
-        flex: none;
-        flex-basis: 100%;
-        order: -1;
-        margin-bottom: 16px;
-        padding: 0;
-      }
+    :deep(.arco-col) {
+      display: flex;
+      min-width: 0;
+    }
 
-      &__right {
-        flex: 1 1 100%;
-      }
+  }
+
+  .logistics-monitor-trend-charts {
+    margin-top: 0;
+  }
+
+  .logistics-monitor-customer-trends {
+    margin-top: 0;
+  }
+
+  .customer-trend-charts-row {
+    margin-top: 4px;
+  }
+
+  .customer-chart-block {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    min-height: 0;
+  }
+
+  .customer-chart-block__title {
+    text-align: center;
+    font-size: clamp(13px, 1.5vw, 14px);
+    font-weight: 600;
+    color: var(--color-text-1);
+    margin-bottom: 4px;
+    flex-shrink: 0;
+  }
+
+  .logistics-monitor-sign-rate-row {
+    margin-top: 0;
+  }
+
+  .sign-rate-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .sign-rate-toolbar__label {
+    font-size: 14px;
+    color: var(--color-text-2);
+    white-space: nowrap;
+  }
+
+  .stat-card {
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+
+    :deep(.arco-card) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    :deep(.arco-card-body) {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
+  }
+
+  .stat-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .stat-item__head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 4px;
+    min-height: 40px;
+  }
+
+  .stat-item__icon {
+    flex-shrink: 0;
+    margin-top: -2px;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+  }
+
+  .stat-item__icon--primary {
+    background: var(--app-primary-color-light);
+    color: var(--app-primary-color);
+  }
+
+  .stat-item__icon--warning {
+    background: rgb(var(--orange-1));
+    color: rgb(var(--orange-6));
+  }
+
+  .stat-item__icon--danger {
+    background: rgb(var(--red-1));
+    color: rgb(var(--red-6));
+  }
+
+  .stat-item__icon--online {
+    background: rgb(var(--cyan-1));
+    color: rgb(var(--cyan-6));
+  }
+
+  .stat-label {
+    flex: 1;
+    min-width: 0;
+    font-size: 13px;
+    line-height: 1.35;
+    color: var(--color-text-2);
+    padding-top: 2px;
+    padding-right: 4px;
+  }
+
+  .stat-value {
+    font-size: clamp(18px, 2.4vw, 22px);
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--color-text-1);
+    word-break: break-all;
+  }
+
+  .stat-value--warning {
+    color: rgb(var(--orange-6));
+  }
+
+  .stat-value--danger {
+    color: rgb(var(--red-6));
+  }
+
+  .stat-footer {
+    margin-top: auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: 4px;
+    padding-top: 8px;
+  }
+
+  .stat-trend {
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+
+  .stat-trend.up {
+    color: rgb(var(--green-6));
+  }
+
+  .stat-trend.down {
+    color: rgb(var(--red-6));
+  }
+
+  .stat-hint {
+    font-size: 12px;
+    line-height: 1.35;
+    color: var(--color-text-3);
+  }
+
+  .stat-hint--accent {
+    color: var(--app-primary-color);
+  }
+
+  .chart-card {
+    height: auto;
+    width: 100%;
+  }
+
+  .chart-host {
+    width: 100%;
+    height: clamp(200px, min(32vh, 36vw), 380px);
+    min-height: 200px;
+    max-height: 420px;
+  }
+
+  .chart-host--sign-rate {
+    height: clamp(220px, min(34vh, 38vw), 400px);
+    min-height: 220px;
+    max-height: 440px;
+  }
+
+  .logistics-monitor-pie-row {
+    margin-top: 0;
+  }
+
+  .pie-toolbar {
+    margin-bottom: 8px;
+  }
+
+  .pie-charts-row {
+    margin-top: 4px;
+  }
+
+  .pie-chart-block {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    min-height: 0;
+  }
+
+  .pie-chart-block__title {
+    text-align: center;
+    font-size: clamp(13px, 1.5vw, 14px);
+    font-weight: 600;
+    color: var(--color-text-1);
+    margin-bottom: 4px;
+    flex-shrink: 0;
+  }
+
+  .chart-host--pie {
+    width: 100%;
+    height: clamp(200px, min(28vh, 32vw), 340px);
+    min-height: 200px;
+    max-height: 380px;
+    flex: 0 0 auto;
+  }
+
+  @media (max-width: 768px) {
+    .chart-host {
+      max-height: none;
+      height: clamp(200px, 40vw, 280px);
+    }
+
+    .chart-host--sign-rate {
+      max-height: none;
+      height: clamp(210px, 42vw, 300px);
+    }
+
+    .chart-host--pie {
+      max-height: none;
+      height: clamp(190px, 55vw, 260px);
     }
   }
 </style>
diff --git a/src/views/home/monitor/locale/en-US.ts b/src/views/home/monitor/locale/en-US.ts
index 7a4272a..c1338eb 100644
--- a/src/views/home/monitor/locale/en-US.ts
+++ b/src/views/home/monitor/locale/en-US.ts
@@ -1,48 +1,63 @@
 export default {
   'menu.home.monitor': 'Real-time Monitor',
-  'monitor.title.chatPanel': 'Chat Window',
-  'monitor.title.quickOperation': 'Quick Operation',
-  'monitor.title.studioInfo': 'Studio Information',
-  'monitor.title.studioPreview': 'Studio Preview',
-  'monitor.chat.options.all': 'All',
-  'monitor.chat.placeholder.searchCategory': 'Search Category',
-  'monitor.chat.update': 'Update',
-  'monitor.list.title.order': 'Order',
-  'monitor.list.title.cover': 'Cover',
-  'monitor.list.title.name': 'Name',
-  'monitor.list.title.duration': 'Duration',
-  'monitor.list.title.id': 'ID',
-  'monitor.list.tip.rotations': 'Rotations ',
-  'monitor.list.tip.rest': ', The program list is not visible to viewers',
-  'monitor.list.tag.auditFailed': 'Audit Failed',
-  'monitor.tab.title.liveMethod': 'Live Method',
-  'monitor.tab.title.onlinePopulation': 'Online Population',
-  'monitor.liveMethod.normal': 'Normal Live',
-  'monitor.liveMethod.flowControl': 'Flow Control Live',
-  'monitor.liveMethod.video': 'Video Live',
-  'monitor.liveMethod.web': 'Web Live',
-  'monitor.editCarousel': 'Edit',
-  'monitor.startCarousel': 'Start',
-  'monitor.quickOperation.changeClarity': 'Change the Clarity',
-  'monitor.quickOperation.switchStream': 'Switch Stream',
-  'monitor.quickOperation.removeClarity': 'Remove the Clarity',
-  'monitor.quickOperation.pushFlowGasket': 'Push Flow Gasket',
-  'monitor.studioInfo.label.studioTitle': 'Studio Title',
-  'monitor.studioInfo.label.onlineNotification': 'Online Notification',
-  'monitor.studioInfo.label.studioCategory': 'Studio Category',
-  'monitor.studioInfo.placeholder.studioTitle': "'s Studio",
-  'monitor.studioInfo.btn.fresh': 'Fresh',
-  'monitor.studioStatus.title.studioStatus': 'Studio Status',
-  'monitor.studioStatus.title.pictureInfo': 'Picture Information',
-  'monitor.studioStatus.smooth': 'Smooth',
-  'monitor.studioStatus.frameRate': 'Frame',
-  'monitor.studioStatus.bitRate': 'Bit',
-  'monitor.studioStatus.mainstream': 'Main',
-  'monitor.studioStatus.hotStandby': 'Hot',
-  'monitor.studioStatus.coldStandby': 'Cold',
-  'monitor.studioStatus.line': 'Line',
-  'monitor.studioStatus.play': 'Format',
-  'monitor.studioStatus.pictureQuality': 'Quality',
-  'monitor.studioPreview.studio': 'Studio',
-  'monitor.studioPreview.watching': 'watching',
+  'monitor.logistics.pageTitle': 'Real-time monitoring center',
+  'monitor.logistics.stat.todayOrders': 'Forecast orders today',
+  'monitor.logistics.stat.historicalOrders': 'All-time orders',
+  'monitor.logistics.stat.pendingPayment': 'Pending payment',
+  'monitor.logistics.stat.pendingOnline': 'Pending carrier scan',
+  'monitor.logistics.stat.pendingSign': 'Pending delivery',
+  'monitor.logistics.stat.orderExceptions': 'Order exceptions',
+  'monitor.logistics.stat.todayRevenue': 'Revenue today',
+  'monitor.logistics.stat.totalCustomers': 'Total customers',
+  'monitor.logistics.stat.newCustomers': 'New customers',
+  'monitor.logistics.stat.onlineCustomers': 'Online customers',
+  'monitor.logistics.stat.inactiveLogin7d': 'No login 7+ days',
+  'monitor.logistics.vsYesterday': 'vs yesterday',
+  'monitor.logistics.vsLastMonth': 'vs last month',
+  'monitor.logistics.hint.newCustomersToday': 'New sign-ups today',
+  'monitor.logistics.hint.onlineRealtime': 'Active sessions (live)',
+  'monitor.logistics.hint.inactiveLogin7d': 'Customers with no login in 7+ days',
+  'monitor.logistics.hint.inactiveLogin7dCompare': '+5 vs last week',
+  'monitor.logistics.chart.orders7d': 'Order volume (last 7 days)',
+  'monitor.logistics.chart.revenueGross7d': 'Revenue & gross profit (last 7 days)',
+  'monitor.logistics.chart.customerTrendsSection': 'By lane · week / month trends',
+  'monitor.logistics.chart.customerOrdersByLine': 'Order volume trend',
+  'monitor.logistics.chart.customerReceivableByLine': 'Accounts receivable trend',
+  'monitor.logistics.axis.weekIndex': 'W{n}',
+  'monitor.logistics.axis.monthIndex': 'M{n}',
+  'monitor.logistics.chart.signRateByLine': 'On-time sign-off rate by lane',
+  'monitor.logistics.axis.complianceRate': 'Compliance rate',
+  'monitor.logistics.series.signRate': 'Sign-off compliance',
+  'monitor.logistics.filter.line': 'Lane',
+  'monitor.logistics.filter.signDays': 'Sign-off days',
+  'monitor.logistics.filter.allLines': 'All lanes',
+  'monitor.logistics.filter.signDaysOption': '{n} days',
+  'monitor.logistics.line.us': 'US lane',
+  'monitor.logistics.line.eu': 'EU lane',
+  'monitor.logistics.line.sea': 'SEA lane',
+  'monitor.logistics.line.au': 'AU lane',
+  'monitor.logistics.line.jp': 'JP lane',
+  'monitor.logistics.line.uk': 'UK lane',
+  'monitor.logistics.series.orders': 'Orders',
+  'monitor.logistics.series.revenue': 'Revenue',
+  'monitor.logistics.series.grossProfit': 'Gross profit',
+  'monitor.logistics.axis.d1': 'Day 1',
+  'monitor.logistics.axis.d2': 'Day 2',
+  'monitor.logistics.axis.d3': 'Day 3',
+  'monitor.logistics.axis.d4': 'Day 4',
+  'monitor.logistics.axis.d5': 'Day 5',
+  'monitor.logistics.axis.d6': 'Day 6',
+  'monitor.logistics.axis.today': 'Today',
+  'monitor.logistics.filter.statPeriod': 'Period',
+  'monitor.logistics.filter.periodWeek': 'Week',
+  'monitor.logistics.filter.periodMonth': 'Month',
+  'monitor.logistics.pie.sectionTitle': 'Track & OTD (by lane / period)',
+  'monitor.logistics.pie.trackComplete': 'Track completeness',
+  'monitor.logistics.pie.trackTimely': 'Track timeliness',
+  'monitor.logistics.pie.otd': 'OTD compliance',
+  'monitor.logistics.pie.pass': 'Met',
+  'monitor.logistics.pie.fail': 'Not met',
+  'monitor.logistics.tab.customer': 'Customers',
+  'monitor.logistics.tab.order': 'Orders',
+  'monitor.logistics.tab.track': 'Tracking',
 };
diff --git a/src/views/home/monitor/locale/zh-CN.ts b/src/views/home/monitor/locale/zh-CN.ts
index f46a87a..0218612 100644
--- a/src/views/home/monitor/locale/zh-CN.ts
+++ b/src/views/home/monitor/locale/zh-CN.ts
@@ -1,48 +1,63 @@
 export default {
   'menu.home.monitor': '实时监控',
-  'monitor.title.chatPanel': '聊天窗口',
-  'monitor.title.quickOperation': '快捷操作',
-  'monitor.title.studioInfo': '直播信息',
-  'monitor.title.studioPreview': '直播预览',
-  'monitor.chat.options.all': '全部',
-  'monitor.chat.placeholder.searchCategory': '搜索类目',
-  'monitor.chat.update': '更新',
-  'monitor.list.title.order': '序号',
-  'monitor.list.title.cover': '封面',
-  'monitor.list.title.name': '名称',
-  'monitor.list.title.duration': '视频时长',
-  'monitor.list.title.id': '视频Id',
-  'monitor.list.tip.rotations': '轮播次数',
-  'monitor.list.tip.rest': '，节目单观众不可见',
-  'monitor.list.tag.auditFailed': '审核未通过',
-  'monitor.tab.title.liveMethod': '直播方式',
-  'monitor.tab.title.onlinePopulation': '在线人数',
-  'monitor.liveMethod.normal': '普通直播',
-  'monitor.liveMethod.flowControl': '控流直播',
-  'monitor.liveMethod.video': '视频直播',
-  'monitor.liveMethod.web': '网页开播',
-  'monitor.editCarousel': '编辑轮播',
-  'monitor.startCarousel': '开始轮播',
-  'monitor.quickOperation.changeClarity': '切换清晰度',
-  'monitor.quickOperation.switchStream': '主备流切换',
-  'monitor.quickOperation.removeClarity': '摘除清晰度',
-  'monitor.quickOperation.pushFlowGasket': '推流垫片',
-  'monitor.studioInfo.label.studioTitle': '直播标题',
-  'monitor.studioInfo.label.onlineNotification': '上线通知',
-  'monitor.studioInfo.label.studioCategory': '直播类目',
-  'monitor.studioInfo.placeholder.studioTitle': '的直播间',
-  'monitor.studioInfo.btn.fresh': '更新',
-  'monitor.studioStatus.title.studioStatus': '直播状态',
-  'monitor.studioStatus.title.pictureInfo': '画面信息',
-  'monitor.studioStatus.smooth': '流畅',
-  'monitor.studioStatus.frameRate': '帧率',
-  'monitor.studioStatus.bitRate': '码率',
-  'monitor.studioStatus.mainstream': '主流',
-  'monitor.studioStatus.hotStandby': '热备',
-  'monitor.studioStatus.coldStandby': '冷备',
-  'monitor.studioStatus.line': '线路',
-  'monitor.studioStatus.play': '播放格式',
-  'monitor.studioStatus.pictureQuality': '画质',
-  'monitor.studioPreview.studio': '直播间',
-  'monitor.studioPreview.watching': '在看',
+  'monitor.logistics.pageTitle': '实时监控中心',
+  'monitor.logistics.stat.todayOrders': '今日预报订单',
+  'monitor.logistics.stat.historicalOrders': '历史总订单',
+  'monitor.logistics.stat.pendingPayment': '待支付订单',
+  'monitor.logistics.stat.pendingOnline': '待上网订单',
+  'monitor.logistics.stat.pendingSign': '待签收订单',
+  'monitor.logistics.stat.orderExceptions': '订单异常',
+  'monitor.logistics.stat.todayRevenue': '今日总营收',
+  'monitor.logistics.stat.totalCustomers': '客户总数',
+  'monitor.logistics.stat.newCustomers': '新增客户数',
+  'monitor.logistics.stat.onlineCustomers': '在线客户数',
+  'monitor.logistics.stat.inactiveLogin7d': '超7天未登录',
+  'monitor.logistics.vsYesterday': '较昨日',
+  'monitor.logistics.vsLastMonth': '较上月',
+  'monitor.logistics.hint.newCustomersToday': '统计口径：今日新注册',
+  'monitor.logistics.hint.onlineRealtime': '当前在线会话数（实时）',
+  'monitor.logistics.hint.inactiveLogin7d': '超7天未产生登录行为的客户',
+  'monitor.logistics.hint.inactiveLogin7dCompare': '较上周 +5 人',
+  'monitor.logistics.chart.orders7d': '近7日订单数趋势',
+  'monitor.logistics.chart.revenueGross7d': '近7日营收 & 毛利趋势',
+  'monitor.logistics.chart.customerTrendsSection': '按线路 · 周/月趋势',
+  'monitor.logistics.chart.customerOrdersByLine': '单量趋势',
+  'monitor.logistics.chart.customerReceivableByLine': '应收趋势',
+  'monitor.logistics.axis.weekIndex': '第{n}周',
+  'monitor.logistics.axis.monthIndex': '{n}月',
+  'monitor.logistics.chart.signRateByLine': '各线路签收达标率',
+  'monitor.logistics.axis.complianceRate': '达标率',
+  'monitor.logistics.series.signRate': '签收达标率',
+  'monitor.logistics.filter.line': '线路',
+  'monitor.logistics.filter.signDays': '签收天数',
+  'monitor.logistics.filter.allLines': '全部线路',
+  'monitor.logistics.filter.signDaysOption': '{n} 天',
+  'monitor.logistics.line.us': '美线',
+  'monitor.logistics.line.eu': '欧线',
+  'monitor.logistics.line.sea': '东南亚线',
+  'monitor.logistics.line.au': '澳线',
+  'monitor.logistics.line.jp': '日本线',
+  'monitor.logistics.line.uk': '英国线',
+  'monitor.logistics.series.orders': '订单数',
+  'monitor.logistics.series.revenue': '营收',
+  'monitor.logistics.series.grossProfit': '毛利',
+  'monitor.logistics.axis.d1': '1日',
+  'monitor.logistics.axis.d2': '2日',
+  'monitor.logistics.axis.d3': '3日',
+  'monitor.logistics.axis.d4': '4日',
+  'monitor.logistics.axis.d5': '5日',
+  'monitor.logistics.axis.d6': '6日',
+  'monitor.logistics.axis.today': '今日',
+  'monitor.logistics.filter.statPeriod': '统计周期',
+  'monitor.logistics.filter.periodWeek': '周',
+  'monitor.logistics.filter.periodMonth': '月',
+  'monitor.logistics.pie.sectionTitle': '轨迹与 OTD 达成（按线路 / 周期）',
+  'monitor.logistics.pie.trackComplete': '轨迹完整率',
+  'monitor.logistics.pie.trackTimely': '轨迹及时率',
+  'monitor.logistics.pie.otd': 'OTD 达标率',
+  'monitor.logistics.pie.pass': '达标',
+  'monitor.logistics.pie.fail': '未达标',
+  'monitor.logistics.tab.customer': '客户',
+  'monitor.logistics.tab.order': '订单',
+  'monitor.logistics.tab.track': '轨迹',
 };
diff --git a/src/views/home/monitor/mock.ts b/src/views/home/monitor/mock.ts
index 47bee2d..4bdc142 100644
--- a/src/views/home/monitor/mock.ts
+++ b/src/views/home/monitor/mock.ts
@@ -1,26 +1,7 @@
-import Mock from 'mockjs';
-
-import setupMock, {
-  successResponseWrap,
-  // failResponseWrap,
-} from '@/utils/setup-mock';
+import setupMock from '@/utils/setup-mock';
 
 setupMock({
   setup() {
-    Mock.mock(new RegExp('/api/chat/list'), () => {
-      // return failResponseWrap(null, '重新登陆', 50008);
-      const data = Mock.mock({
-        'data|4-6': [
-          {
-            'id|+1': 1,
-            'username': '用户7352772',
-            'content': '马上就开始了，好激动！',
-            'time': '13:09:12',
-            'isCollect|2': true,
-          },
-        ],
-      });
-      return successResponseWrap(data.data);
-    });
+    /* 物流监控页暂无独立 Mock 接口 */
   },
 });
diff --git a/src/views/home/workplace/components/announcement.vue b/src/views/home/workplace/components/announcement.vue
index 504fa85..c68b514 100644
--- a/src/views/home/workplace/components/announcement.vue
+++ b/src/views/home/workplace/components/announcement.vue
@@ -101,7 +101,6 @@
     height: 24px;
     margin-bottom: 4px;
     cursor: pointer;
-    transition: background-color 0.2s;
 
     &:hover {
       background-color: var(--color-fill-1);
diff --git a/src/views/home/workplace/components/data-panel.vue b/src/views/home/workplace/components/data-panel.vue
index c173679..fd9344b 100644
--- a/src/views/home/workplace/components/data-panel.vue
+++ b/src/views/home/workplace/components/data-panel.vue
@@ -12,8 +12,6 @@
           :title="$t('workplace.onlineContent')"
           :value="373.5"
           :precision="1"
-          :value-from="0"
-          animation
           show-group-separator
         >
           <template #suffix>
@@ -33,8 +31,6 @@
         <a-statistic
           :title="$t('workplace.putIn')"
           :value="368"
-          :value-from="0"
-          animation
           show-group-separator
         >
           <template #suffix>
@@ -54,8 +50,6 @@
         <a-statistic
           :title="$t('workplace.newDay')"
           :value="8874"
-          :value-from="0"
-          animation
           show-group-separator
         >
           <template #suffix>
@@ -75,8 +69,6 @@
         <a-statistic
           :title="$t('workplace.pendingOnline')"
           :value="156"
-          :value-from="0"
-          animation
           show-group-separator
         >
           <template #suffix>
@@ -96,8 +88,6 @@
         <a-statistic
           :title="$t('workplace.problematic')"
           :value="12"
-          :value-from="0"
-          animation
           show-group-separator
         >
           <template #suffix>
@@ -118,8 +108,6 @@
           :title="$t('workplace.newFromYesterday')"
           :value="2.8"
           :precision="1"
-          :value-from="0"
-          animation
         >
           <template #suffix> % <icon-caret-up class="up-icon" /> </template>
         </a-statistic>
diff --git a/src/views/home/workplace/index.vue b/src/views/home/workplace/index.vue
index 0bdfec0..4f50efa 100644
--- a/src/views/home/workplace/index.vue
+++ b/src/views/home/workplace/index.vue
@@ -48,7 +48,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    perspective: 1200px;
   }
 
   .container {
@@ -121,14 +120,7 @@
     background-color: var(--color-bg-2);
     border-radius: 24px;
     flex-shrink: 0;
-    transform-style: preserve-3d;
-    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
-
-    &:hover {
-      transform: translateY(-8px) translateZ(20px) rotateX(2deg);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
-    }
   }
 
   :deep(.panel-border) {
diff --git a/src/views/operation/inboundScan/index.vue b/src/views/operation/inboundScan/index.vue
index bb45c6c..d0089ed 100644
--- a/src/views/operation/inboundScan/index.vue
+++ b/src/views/operation/inboundScan/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="waybill-container">
+    <div class="waybill-layout">
     <!-- 表单区域 -->
     <div class="form-section">
       <a-form :model="formData" layout="vertical" class="waybill-form">
@@ -127,6 +128,7 @@
       />
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -289,12 +291,21 @@ onMounted(() => {
   background-color: #f5f5f5;
   flex: 1;
   min-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
+.waybill-layout {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
 .page-header {
   display: flex;
   justify-content: space-between;
@@ -333,9 +344,13 @@ onMounted(() => {
   background: #fff;
   border-radius: 8px;
   padding: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  flex-shrink: 0;
+  flex: 3 1 0;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  align-self: stretch;
 }
 
 .waybill-form {
@@ -348,7 +363,8 @@ onMounted(() => {
   }
   
   .large-input {
-    width: 50%;
+    width: 100%;
+    max-width: 100%;
     height: 48px;
     font-size: 16px;
   }
@@ -377,11 +393,11 @@ onMounted(() => {
     display: flex;
     align-items: flex-end;
     gap: 16px;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
   }
 
   .inline-field {
-    flex: 1;
+    flex: 1 1 100%;
     min-width: 0;
 
     .inline-label {
@@ -435,7 +451,8 @@ onMounted(() => {
   border-radius: 8px;
   padding: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  flex: 1;
+  flex: 7 1 0;
+  min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -490,5 +507,24 @@ onMounted(() => {
     touch-action: pan-x pan-y;
   }
 }
+
+@media (max-width: 992px) {
+  .waybill-layout {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .form-section {
+    flex: 0 0 auto;
+    max-width: none;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .recent-orders-section {
+    flex: 1;
+    min-height: 360px;
+  }
+}
 </style>
 
diff --git a/src/views/operation/outboundScan/index.vue b/src/views/operation/outboundScan/index.vue
index 2bb4f49..10ea436 100644
--- a/src/views/operation/outboundScan/index.vue
+++ b/src/views/operation/outboundScan/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="waybill-container">
+    <div class="waybill-layout">
     <!-- 表单区域 -->
     <div class="form-section">
       <a-form :model="formData" layout="vertical" class="waybill-form">
@@ -56,6 +57,7 @@
       />
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -164,12 +166,21 @@ onMounted(() => {
   background-color: #f5f5f5;
   flex: 1;
   min-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
+.waybill-layout {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
 .page-header {
   display: flex;
   justify-content: space-between;
@@ -208,9 +219,13 @@ onMounted(() => {
   background: #fff;
   border-radius: 8px;
   padding: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  flex-shrink: 0;
+  flex: 3 1 0;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  align-self: stretch;
 }
 
 .waybill-form {
@@ -223,7 +238,8 @@ onMounted(() => {
   }
   
   .large-input {
-    width: 50%;
+    width: 100%;
+    max-width: 100%;
     height: 48px;
     font-size: 16px;
   }
@@ -248,7 +264,8 @@ onMounted(() => {
   border-radius: 8px;
   padding: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  flex: 1;
+  flex: 7 1 0;
+  min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -303,5 +320,24 @@ onMounted(() => {
     touch-action: pan-x pan-y;
   }
 }
+
+@media (max-width: 992px) {
+  .waybill-layout {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .form-section {
+    flex: 0 0 auto;
+    max-width: none;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .recent-orders-section {
+    flex: 1;
+    min-height: 360px;
+  }
+}
 </style>
 
diff --git a/src/views/operation/printLabel/index.vue b/src/views/operation/printLabel/index.vue
index 064192b..daad524 100644
--- a/src/views/operation/printLabel/index.vue
+++ b/src/views/operation/printLabel/index.vue
@@ -1,18 +1,21 @@
 <template>
   <div class="waybill-container">
+    <div class="waybill-layout">
     <!-- 表单区域 -->
     <div class="form-section">
       <a-form :model="formData" layout="vertical" class="waybill-form">
-        <!-- 单号输入、单号类型、标签模板 同一行 -->
-        <a-form-item :label="$t('operation.printLabel.form.scanNumber')" class="form-item-inline">
-          <div class="form-row-inline">
-            <a-input
-              v-model="formData.waybillNumber"
-              :placeholder="$t('operation.printLabel.form.placeholder.scanOrInput')"
-              size="large"
-              class="large-input"
-              @press-enter="handleScan"
-            />
+        <!-- 单号一行；单号类型、标签模板下拉同一行 -->
+        <a-form-item :label="$t('operation.printLabel.form.scanNumber')" class="form-item-scan">
+          <a-input
+            v-model="formData.waybillNumber"
+            :placeholder="$t('operation.printLabel.form.placeholder.scanOrInput')"
+            size="large"
+            class="scan-input"
+            @press-enter="handleScan"
+          />
+        </a-form-item>
+        <a-form-item class="form-item-selects" hide-label>
+          <div class="form-row-selects">
             <a-select
               v-model="formData.numberType"
               :placeholder="$t('operation.printLabel.form.placeholder.numberType')"
@@ -103,6 +106,7 @@
       />
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -273,12 +277,21 @@ function handleReset() {
   background-color: #f5f5f5;
   flex: 1;
   min-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
+.waybill-layout {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
 .page-header {
   display: flex;
   justify-content: space-between;
@@ -317,13 +330,17 @@ function handleReset() {
   background: #fff;
   border-radius: 8px;
   padding: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  flex-shrink: 0;
+  flex: 3 1 0;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  align-self: stretch;
 }
 
 .waybill-form {
-  .form-item-inline {
+  .form-item-scan {
     :deep(.arco-form-item-label) {
       font-size: 14px;
       font-weight: 500;
@@ -331,24 +348,34 @@ function handleReset() {
     }
   }
 
-  .form-row-inline {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex-wrap: nowrap;
+  .form-item-selects {
+    margin-bottom: 0;
+
+    :deep(.arco-form-item-wrapper) {
+      flex: 1;
+    }
   }
 
-  .large-input {
-    width: 1000px;
-    min-width: 1000px;
-    height: 60px;
-    font-size: 14px;
+  .scan-input {
+    width: 100%;
+    min-width: 0;
+    height: 48px;
+    font-size: 15px;
+  }
+
+  .form-row-selects {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    min-width: 0;
   }
 
   .select-number-type,
   .select-label-template {
-    width: 300px;
-    min-width: 300px;
+    flex: 1 1 0;
+    min-width: 0;
   }
 
   .form-actions {
@@ -371,7 +398,8 @@ function handleReset() {
   border-radius: 8px;
   padding: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  flex: 1;
+  flex: 7 1 0;
+  min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -426,4 +454,23 @@ function handleReset() {
     touch-action: pan-x pan-y;
   }
 }
+
+@media (max-width: 992px) {
+  .waybill-layout {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .form-section {
+    flex: 0 0 auto;
+    max-width: none;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .recent-orders-section {
+    flex: 1;
+    min-height: 360px;
+  }
+}
 </style>
diff --git a/src/views/user/profile/index.vue b/src/views/user/profile/index.vue
index 5ea5207..3424639 100644
--- a/src/views/user/profile/index.vue
+++ b/src/views/user/profile/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="profile-center">
-    <!-- 顶部个人信息卡片 - 3D 悬浮 -->
-    <div class="profile-hero-card card-3d">
+    <!-- 顶部个人信息卡片 -->
+    <div class="profile-hero-card">
       <div class="hero-bg" />
       <div class="hero-content">
         <div class="avatar-wrap">
@@ -39,9 +39,9 @@
       </div>
     </div>
 
-    <!-- 账户概览卡片组 - 3D 悬浮 -->
+    <!-- 账户概览卡片组 -->
     <div class="cards-row">
-      <div class="stat-card card-3d stat-balance">
+      <div class="stat-card stat-balance">
         <div class="stat-icon">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
@@ -52,7 +52,7 @@
           <span class="stat-value">￥{{ formatNumber(profile.accountBalance) }}</span>
         </div>
       </div>
-      <div class="stat-card card-3d stat-quota">
+      <div class="stat-card stat-quota">
         <div class="stat-icon">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
@@ -63,7 +63,7 @@
           <span class="stat-value">{{ formatNumber(profile.totalQuota) }}</span>
         </div>
       </div>
-      <div class="stat-card card-3d stat-used">
+      <div class="stat-card stat-used">
         <div class="stat-icon">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M9 19v-6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2zm0 0V9a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v10m-6 0a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2m0 0V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2z" />
@@ -76,9 +76,9 @@
       </div>
     </div>
 
-    <!-- 联系信息 + 快捷操作 - 3D 悬浮 -->
+    <!-- 联系信息 + 快捷操作 -->
     <div class="cards-grid">
-      <div class="info-card card-3d">
+      <div class="info-card">
         <div class="card-header">
           <h3 class="card-title">{{ t('profile.contactInfo') }}</h3>
         </div>
@@ -106,7 +106,7 @@
         </div>
       </div>
 
-      <div class="info-card quick-actions-card card-3d">
+      <div class="info-card quick-actions-card">
         <div class="card-header">
           <h3 class="card-title">{{ t('profile.quickActions') }}</h3>
         </div>
@@ -361,19 +361,6 @@ onMounted(() => {
   min-height: 100%;
   padding: 32px 24px 48px;
   background: #f7f8fa;
-  perspective: 1200px;
-}
-
-// 3D 悬浮卡片通用样式
-.card-3d {
-  transform-style: preserve-3d;
-  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
-  will-change: transform;
-
-  &:hover {
-    transform: translateY(-8px) translateZ(20px) rotateX(2deg);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
-  }
 }
 
 // 顶部个人信息卡片