feat: 更新calendar view页面

src/styles/Antdui.scss

@@ -190,13 +190,18 @@ tr
 .ant-picker-input input {
   color: var(--color-neutral-1) !important;
 }
-.ant-picker-cell-inner {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 32px !important;
-  height: 32px !important;
-  border-radius: 6px !important;
+.ant-picker-dropdown {
+  .ant-picker-cell-inner {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    border-radius: 6px !important;
+  }
+  
+  /* 其他弹窗样式保留 */
+  .ant-picker-cell-in-view .ant-picker-cell-inner {
+    color: var(--color-neutral-1);
+  }
 }
 :where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown  div.ant-picker-cell-inner{
   color: var(--color-el-date-prev);

src/styles/theme.scss

@@ -364,6 +364,11 @@
   --color-attchment-summary-bg: #f9fafb;
 
   --color-el-date-prev: #bfc1c3;
+
+  --color-el-segmented-checked-bg: #fff;
+  --color-el-segmented-bg: #f1f5f9;
+
+  --color-calendar-cell-bg: #fff;
 }
 
 :root.dark {
@@ -598,5 +603,10 @@
   --color-attchment-summary-bg: #2b2f36;
 
   --color-el-date-prev: #737980;
+
+  --color-el-segmented-checked-bg: #4b5563;
+  --color-el-segmented-bg: #374151;
+
+  --color-calendar-cell-bg: #30353c;
 }
   

src/views/DestinationDelivery/src/DestinationDelivery.vue

@@ -14,7 +14,11 @@ const handleCreate = () => {
   router.push({ name: 'Create New Booking' })
 }
 
-const controllerType = ref('button')
+const pageType = ref('Calendar View')
+const directionOptions = [
+  { label: 'Calendar View', value: 'Calendar View', icon: 'icon_ratesheet_b' },
+  { label: 'List View', value: 'List View', icon: 'icon_date_b' }
+]
 </script>
 <template>
   <div class="destination-delivery">
@@ -41,12 +45,22 @@ const controllerType = ref('button')
         </el-button>
       </div>
     </div>
-    <el-radio-group v-model="controllerType">
-      <el-radio-button label="select" value="select" />
-      <el-radio-button label="button" value="button" />
-    </el-radio-group>
-    <ListView ref="listView" v-if="controllerType === 'select'"></ListView>
-    <CalendarView v-if="controllerType === 'button'"></CalendarView>
+    <div class="page-type">
+      <el-segmented v-model="pageType" :options="directionOptions" style="margin-bottom: 1rem">
+        <template #default="scope">
+          <div class="flex-center">
+            <span
+              :class="['font_family', 'icon-' + scope.item.icon]"
+              style="margin-right: 4px"
+            ></span>
+            <div>{{ scope.item.label }}</div>
+          </div>
+        </template>
+      </el-segmented>
+    </div>
+
+    <ListView ref="listView" v-if="pageType === 'List View'"></ListView>
+    <CalendarView v-if="pageType === 'Calendar View'"></CalendarView>
   </div>
 </template>
 
@@ -65,4 +79,21 @@ const controllerType = ref('button')
   align-items: center;
   justify-content: space-between;
 }
+.page-type {
+  margin: 24px;
+  .el-segmented {
+    --el-segmented-item-selected-color: var(--color-neutral-1);
+    --el-segmented-item-selected-bg-color: var(--color-el-segmented-checked-bg);
+    --el-segmented-bg-color: var(--color-el-segmented-bg);
+    --el-border-radius-base: 6px;
+  }
+  .flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :deep(.el-segmented__item-label) {
+    color: var(--color-neutral-2);
+  }
+}
 </style>

src/views/DestinationDelivery/src/components/CalendarView.vue

@@ -1,38 +1,43 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 
-const value = ref()
+const value = ref<Dayjs>(dayjs())
 
 // ✅ 修正：精确匹配年月日
-const getListData = (current: Date) => {
-  const dateStr = current.toISOString().split('T')[0] // "YYYY-MM-DD"
-
-  // 定义事件数据（示例：2026年1月）
-  const events: Record<string, Array<{ type: string; content: string }>> = {
-    '2026-01-08': [
-      { type: 'warning', content: 'This is warning event.' },
-      { type: 'success', content: 'This is usual event.' }
-    ],
-    '2026-01-10': [
-      { type: 'warning', content: 'This is warning event.' },
-      { type: 'success', content: 'This is usual event.' },
-      { type: 'error', content: 'This is error event.' }
-    ],
-    '2026-01-15': [
-      { type: 'warning', content: 'This is warning event' },
-      { type: 'success', content: 'This is very long usual event。。....' },
-      { type: 'error', content: 'This is error event 1.' },
-      { type: 'error', content: 'This is error event 2.' },
-      { type: 'error', content: 'This is error event 3.' },
-      { type: 'error', content: 'This is error event 4.' }
-    ]
+const getListData = (value: Dayjs) => {
+  let listData
+  switch (value.date()) {
+    case 8:
+      listData = [
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'success', content: 'This is usual event.' }
+      ]
+      break
+    case 10:
+      listData = [
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'success', content: 'This is usual event.' },
+        { type: 'error', content: 'This is error event.' }
+      ]
+      break
+    case 15:
+      listData = [
+        { type: 'warning', content: 'This is warning event' },
+        { type: 'success', content: 'This is very long usual event。。....' },
+        { type: 'error', content: 'This is error event 1.' },
+        { type: 'error', content: 'This is error event 2.' },
+        { type: 'error', content: 'This is error event 3.' },
+        { type: 'error', content: 'This is error event 4.' }
+      ]
+      break
+    default:
   }
-
-  return events[dateStr] || []
+  return listData || []
 }
 
 const getMonthData = (current: Date) => {
-  // 示例：2026年9月（注意：JS 月份从 0 开始）
   if (current.getFullYear() === 2026 && current.getMonth() === 8) {
     return 1394
   }
@@ -42,17 +47,13 @@ const getMonthData = (current: Date) => {
 
 <template>
   <div class="calendar-container">
-    <!-- 关键：添加 fullscreen 属性 -->
-    <a-calendar
-      v-model:value="value"
-      fullscreen
-      :date-cell-render="({ current }) => $slots.dateCellRender?.({ current })"
-      :month-cell-render="({ current }) => $slots.monthCellRender?.({ current })"
-    >
+    <a-calendar v-model:value="value" fullscreen>
       <template #dateCellRender="{ current }">
         <ul class="events">
           <li v-for="(item, index) in getListData(current)" :key="index">
-            <a-badge :status="item.type" :text="item.content" />
+            <!-- 使用原生 span 替代 a-badge（更易控制暗黑样式） -->
+            <span class="event-badge" :class="`event- $ {item.type}`"></span>
+            <span class="event-text">{{ item.content }}</span>
           </li>
         </ul>
       </template>
@@ -68,75 +69,135 @@ const getMonthData = (current: Date) => {
 </template>
 
 <style scoped>
-/* 容器宽度必须足够 */
 .calendar-container {
-  width: 860px;
-  margin: 20px auto;
+  padding: 0 24px;
+}
+
+/* ===== 深色主题覆盖 ===== */
+:deep(.ant-picker-calendar) {
+  background-color: var(--color-mode);
+  color: #e0e0e0;
+  border: none;
+}
+
+:deep(.ant-picker-calendar-header) {
+  background-color: var(--color-mode);
+  /* border-bottom: 1px solid #333; */
+}
+
+:deep(.ant-picker-calendar-header .ant-picker-year-select),
+:deep(.ant-picker-calendar-header .ant-picker-month-select) {
+  /* background-color: #2d2d2d; */
+  border: 1px solid #444;
+  color: #e0e0e0;
+}
+
+:deep(.ant-picker-calendar-body) {
+  background-color: #1a1a1a;
+}
+
+/* 修复日期格子布局 —— 关键！ */
+:deep(.ant-picker-calendar-date) {
+  /* width: calc(100% / 7) !important; */
+  height: 100px !important;
+  display: block !important;
+  /* float: left !important; */
+  /* box-sizing: border-box !important; */
+  /* padding: 8px !important; */
+  /* text-align: center !important; */
+  /* border: 1px solid #333 !important; */
+  background-color: var(--color-calendar-cell-bg) !important;
+  /* cursor: pointer; */
+  /* position: relative; */
+}
+.ant-picker-calendar .ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view),
+.ant-picker-dropdown .ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view) {
+  background-color: red !important;
+}
+:deep(.ant-picker-calendar-date:hover) {
+  background-color: #2a2a2a !important;
+}
+
+/* 日期数字 */
+:deep(.ant-picker-calendar-date-value) {
+  display: block;
+  font-size: 14px;
+  line-height: 1.2;
+  color: #e0e0e0;
+  margin-bottom: 4px;
+}
+
+/* 选中状态 */
+:deep(.ant-picker-calendar-date-selected) {
+  background-color: #0066ff !important;
+  border-color: #0066ff !important;
+  color: white !important;
 }
 
-/* 事件列表样式 */
+/* 今天 */
+:deep(.ant-picker-calendar-date-today) {
+  background-color: #2a2a2a !important;
+  border-color: #555 !important;
+}
+
+/* 事件列表 */
 .events {
   list-style: none;
   margin: 0;
   padding: 0;
-  max-height: 80px;
-  overflow: hidden;
+  max-height: 70px;
+  overflow-y: auto;
+  font-size: 12px;
 }
 
 .events li {
-  margin-top: 4px;
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+  color: #ccc;
+  text-align: left;
 }
 
-.events .ant-badge-status {
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.event-badge {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
 }
 
-/* 月份备注样式 */
-.notes-month {
-  text-align: center;
-  font-size: 28px;
-  line-height: 1.2;
+.event-warning {
+  background-color: #faad14;
 }
-.notes-month span {
-  display: block;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.45);
+.event-success {
+  background-color: #52c41a;
 }
-
-/* 使用 :deep() 穿透 scoped 限制 */
-:deep(.ant-picker-calendar) {
-  width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
+.event-error {
+  background-color: #ff4d4f;
 }
 
-:deep(.ant-picker-calendar-date) {
-  width: calc(100% / 7) !important;
-  display: block !important;
-  float: left !important; /* 关键：确保横向排列 */
-  box-sizing: border-box !important;
+/* 月份备注 */
+:deep(.notes-month) {
+  text-align: center;
+  color: #e0e0e0;
 }
-
-/* 清除可能的 flex 干扰 */
-:deep(.ant-picker-calendar-body),
-:deep(.ant-picker-calendar-panel) {
-  display: block !important;
-  flex: none !important;
-}
-
-/* ✅ 修复：仅作用于弹窗日期选择器，不影响 ACalendar */
-/* .ant-picker-dropdown {
-  .ant-picker-cell-inner {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 32px !important;
-    height: 32px !important;
-    border-radius: 6px !important;
+:deep(.notes-month section) {
+  font-size: 28px;
+  line-height: 28px;
+}
+:deep(.notes-month span) {
+  font-size: 14px;
+  color: #aaa;
+}
+</style>
+<style lang="scss">
+div:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-calendar.ant-picker-calendar-full
+  .ant-picker-panel {
+  background-color: var(--color-mode);
+  span,
+  td,
+  th {
+    color: var(--color-neutral-1);
   }
-} */
+}
 </style>