feat: 添加下拉菜单组件样式并更新日期选择器交互

src/styles/components/ant-dropdown.scss

@@ -0,0 +1,28 @@
+.ant-dropdown {
+  .ant-dropdown-menu {
+    padding: 4px 0;
+    border-radius: 4px;
+    border: 1px solid var(--Border-1, #d7d7d9);
+    background: var(--BG-White, #fff);
+
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  }
+  .ant-dropdown-menu-item {
+    height: 36px;
+    padding: 0 12px !important;
+    .ant-dropdown-menu-title-content {
+      color: var(--Text-1, #211f24);
+
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.active {
+      .ant-dropdown-menu-title-content {
+        color: $color-primary;
+      }
+    }
+  }
+}

src/styles/components/index.scss

@@ -17,3 +17,4 @@
 @import "./ant-spin.scss";
 @import "./ant-drawer.scss";
 @import "./ant-pagination.scss";
+@import "./ant-dropdown.scss";

src/views/property-marketing/assignment-management/components/date-selector.vue

@@ -30,34 +30,43 @@
 
     <!-- 日期导航按钮 -->
     <div class="flex items-center ml-12px">
-      <a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text">
+      <a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text" size="small">
-        <template #icon><icon-left /></template>
+        <template #icon>
+          <SvgIcon name="xt-left" size="20" class="color-#737478" />
+        </template>
       </a-button>
       <a-button
         @click="navigateToToday"
         type="text"
-        style="background-color: #f7f8fa !important; color: #211f24 !important; height: 28px"
+        style="color: #211f24 !important"
+        size="small"
+        class="!bg-#f7f8fa !hover:bg-#E6E6E8"
         >今天</a-button
       >
-      <a-button class="ml-4px prv-btn" @click="navigate(1)" type="text">
+      <a-button class="ml-4px prv-btn" @click="navigate(1)" type="text" size="small">
-        <template #icon><icon-right /></template>
+        <template #icon>
+          <SvgIcon name="xt-right" size="20" class="color-#737478" />
+        </template>
       </a-button>
     </div>
 
     <!-- 维度切换下拉框 -->
-    <div class="flex items-center">
+    <div class="flex items-center ml-12px">
       <a-dropdown
         position="bottom"
         @select="handleTypeChange"
         class="w-80px"
-        :popupVisible="dropdownVisible"
+        :open="dropdownVisible"
-        @popupVisibleChange="handleDropdownVisibleChange"
+        @openChange="handleDropdownVisibleChange"
       >
-        <a-button type="text" class="prv-today"> {{ choseType }}<icon-down class="ml-4px" /> </a-button>
+        <a-button type="text" class="prv-today !bg-#f7f8fa !hover:bg-#E6E6E8 !px-12px">
-        <template #content>
+          <span>{{ choseType }} </span>
-          <a-doption value="日" class="doption">日</a-doption>
+          <SvgIcon name="xt-down" size="14" class="color-#737478" />
-          <a-doption value="周" class="doption">周</a-doption>
+        </a-button>
-          <a-doption value="月" class="doption">月</a-doption>
+        <template #overlay>
+          <a-menu @click="handleTypeChange">
+            <a-menu-item  v-for="item in DAYS" :key="item" :class="choseType === item ? 'active' : ''"> {{ item }} </a-menu-item>
+          </a-menu>
         </template>
       </a-dropdown>
     </div>
@@ -67,6 +76,7 @@
 <script lang="ts" setup>
 import { ref, watch, defineProps, defineEmits, withDefaults, computed } from 'vue';
 import DateUtils from '@/utils/DateUtils';
+import { DownOutlined } from '@ant-design/icons-vue';
 
 // 1. 定义Props：接收父组件初始日期配置
 interface Props {
@@ -78,6 +88,8 @@ interface Props {
   };
 }
 
+const DAYS = ['日','周','月'];
+
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => ({ choseType: '周', dayModel: new Date(), weekModel: new Date(), monthModel: new Date() }),
 });
@@ -144,8 +156,10 @@ const getDateRange = (): { start: string; end: string } => {
 };
 
 // 5. 维度切换处理（日/周/月）
-const handleTypeChange = (val: '日' | '周' | '月') => {
+const handleTypeChange = (val) => {
-  choseType.value = val;
+  const { key } = val;
+
+  choseType.value = key;
   // 切换维度时默认选中当天对应的维度日期
   const today = new Date();
   currentDate.value = today;
@@ -252,17 +266,16 @@ setTimeout(() => {
 }, 0);
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.arco-dropdown-open .arco-icon-down {
-  transform: rotate(180deg);
-  transition: transform 0.2s ease;
-}
 .prv-btn {
   background-color: #f7f8fa !important; /* 使用正确的6位十六进制颜色值 */
   width: 28px;
   height: 28px;
   border-radius: 4px;
   color: #211f24 !important;
+  &:hover {
+    background-color: var(--BG-300, #e6e6e8) !important;
+  }
 }
 .doption {
   width: 78px !important;
@@ -270,10 +283,23 @@ setTimeout(() => {
 .prv-today {
   color: #211f24 !important;
   width: 80px !important;
-  background-color: #f7f8fa !important;
+  // background-color: #f7f8fa !important;
   height: 28px;
-  margin-left: 4px;
   display: flex;
   justify-content: space-between;
+  border-color: $color-primary !important;
+  &:hover {
+    border-color: $color-primary !important;
+    color: #211f24 !important;
+  }
+}
+
+.ant-dropdown-trigger {
+  &.ant-dropdown-open {
+    .svg-icon {
+      transform: rotate(180deg);
+      transition: transform 0.2s ease;
+    }
+  }
 }
 </style>