解决冲突

This commit is contained in:
lq
2025-09-26 15:15:08 +08:00
4 changed files with 80 additions and 23 deletions

View File

@ -32,6 +32,10 @@
border-color: #e6e6e8 !important;
color: #737478 !important;
}
&:active {
border-color: #D7D7D9 !important;
color: #211F24 !important;
}
}
&.ant-btn-dangerous {
border-color: $color-error !important;

View File

@ -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;
}
}
}
}

View File

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

View File

@ -30,36 +30,43 @@
<!-- 日期导航按钮 -->
<div class="flex items-center ml-12px">
<a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text">
<template #icon><SvgIcon name="xt-left" size="14" class="color-#737478" /></template>
<a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text" size="small">
<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">
<template #icon><SvgIcon name="xt-right" size="14" class="color-#737478" /></template>
<a-button class="ml-4px prv-btn" @click="navigate(1)" type="text" size="small">
<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"
@popupVisibleChange="handleDropdownVisibleChange"
:open="dropdownVisible"
@openChange="handleDropdownVisibleChange"
>
<a-button type="text" class="prv-today">
{{ choseType }}<SvgIcon name="xt-down" size="14" class="color-#737478" />
<a-button type="text" class="prv-today !bg-#f7f8fa !hover:bg-#E6E6E8 !px-12px">
<span>{{ choseType }} </span>
<SvgIcon name="xt-down" size="14" class="color-#737478" />
</a-button>
<template #content>
<a-doption value="日" class="doption"></a-doption>
<a-doption value="周" class="doption"></a-doption>
<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>
@ -69,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 {
@ -80,6 +88,8 @@ interface Props {
};
}
const DAYS = ['日','周','月'];
const props = withDefaults(defineProps<Props>(), {
modelValue: () => ({ choseType: '周', dayModel: new Date(), weekModel: new Date(), monthModel: new Date() }),
});
@ -146,8 +156,10 @@ const getDateRange = (): { start: string; end: string } => {
};
// 5. 维度切换处理(日/周/月)
const handleTypeChange = (val: '日' | '周' | '月') => {
choseType.value = val;
const handleTypeChange = (val) => {
const { key } = val;
choseType.value = key;
// 切换维度时默认选中当天对应的维度日期
const today = new Date();
currentDate.value = today;
@ -254,17 +266,16 @@ setTimeout(() => {
}, 0);
</script>
<style scoped>
.arco-dropdown-open .arco-icon-down {
transform: rotate(180deg);
transition: transform 0.2s ease;
}
<style scoped lang="scss">
.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;
@ -272,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>