diff --git a/src/components/FilterBar.vue b/src/components/FilterBar.vue index 55df9c9..8dd2c95 100644 --- a/src/components/FilterBar.vue +++ b/src/components/FilterBar.vue @@ -20,11 +20,6 @@ const props = withDefaults(defineProps(), { // 定义 Emits (声明组件会触发哪些事件) const emit = defineEmits<{ (e: 'change', payload: { keyword: string, filters: FilterState }): void - - // // 当点击下拉菜单里的“确定”时触发，回传筛选对象 - // (e: 'confirm', filters: FilterState): void; - // // 当点击右侧“搜索”按钮时触发，回传搜索关键词 - // (e: 'search', keyword: string): void; }>() // --- 类型定义 --- @@ -45,41 +40,10 @@ const filters: FilterConfig[] = [ // 按照截图还原的省份数据 const locations = [ - '不限', - '北京', - '天津', - '河北', - '山西', - '内蒙古', - '辽宁', - '吉林', - '黑龙江', - '上海', - '江苏', - '浙江', - '安徽', - '福建', - '江西', - '山东', - '河南', - '湖北', - '湖南', - '广东', - '广西', - '海南', - '重庆', - '四川', - '贵州', - '云南', - '西藏', - '陕西', - '甘肃', - '青海', - '宁夏', - '新疆', - '台湾', - '香港', - '澳门', + '不限', '北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', + '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', + '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', + '陕西', '甘肃', '青海', '宁夏', '新疆', '台湾', '香港', '澳门', ] // --- 状态 --- @@ -95,19 +59,13 @@ const selectedFilters = reactive({ sort: '默认', }) -// 临时选中的值（用于在点击“确定”之前暂存，如果需要这种逻辑的话，本例为了简单直接修改 selectedFilters） -// 如果要严格复刻逻辑，通常点击选项时只变色，点确定才生效。这里简化为点击即选中高亮。 - // --- 计算属性 --- function getLabel(key: FilterKey) { - // 如果不是默认值，可以显示选中的值，否则显示标题 - // 这里为了保持截图样式，保持显示标题 const map = { location: '位置', type: '类型', major: '专业', sort: '排序' } return map[key] } const countSelected = computed(() => { - // 简单计算：如果当前打开的是位置，且选的不是不限，则为1，否则0 if (activeFilter.value === 'location') { return selectedFilters.location !== '不限' ? 1 : 0 } @@ -115,7 +73,6 @@ const countSelected = computed(() => { }) function shouldShowFilter(filter: FilterConfig) { - // 显示所有非排序过滤器，或者当排序过滤器启用时显示排序过滤器 return filter.key !== 'sort' || (filter.key === 'sort' && props.sortEnabled) } @@ -146,15 +103,12 @@ function clearCurrentFilter() { // 确定按钮 function confirmSelection() { emit('change', { keyword: searchQuery.value, filters: { ...selectedFilters } }) - // 使用展开运算符 {...} 创建副本，防止父组件修改影响子组件（可选） - // emit('confirm', { ...selectedFilters }); activeFilter.value = null // 关闭菜单 } // 搜索按钮 function handleSearch() { emit('change', { keyword: searchQuery.value, filters: { ...selectedFilters } }) - // emit('search', searchQuery.value); } // --- 点击外部关闭逻辑 --- @@ -174,8 +128,9 @@ onUnmounted(() => { - - + \ No newline at end of file diff --git a/src/components/ui/WPopconfirm.vue b/src/components/ui/WPopconfirm.vue index 3dca8a9..cb145a0 100644 --- a/src/components/ui/WPopconfirm.vue +++ b/src/components/ui/WPopconfirm.vue @@ -120,16 +120,14 @@ const overlayPositionClass = computed(() => { // 2. 箭头的位置与旋转 (相对于 Popover) const arrowPositionClass = computed(() => { - const base = 'absolute h-3 w-3 bg-white border-slate-200 z-[-1]' // z-index -1 保证在阴影下方，但需要父级不遮挡 + // Update: 增加了 dark:bg-slate-800 和 dark:border-slate-700 + const base = 'absolute h-3 w-3 bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 z-[-1]' // 基础偏移量 - // const centerOffset = props.arrowPointAtCenter ? 'left-1/2 -translate-x-1/2' : '' - // 如果不是 PointAtCenter，根据 Left/Right 微调箭头位置，避免靠太边 const hAlign = props.arrowPointAtCenter ? '' : (props.placement.includes('left') ? 'left-4' : props.placement.includes('right') ? 'right-4' : '') const vAlign = props.arrowPointAtCenter ? '' : (props.placement.includes('top') ? 'top-3' : props.placement.includes('bottom') ? 'bottom-3' : '') // 12个方向的箭头逻辑 - // 核心原理：Top 气泡，箭头在 Bottom，边框是 右下 (旋转45度) if (props.placement.startsWith('top')) { return `${base} -bottom-1.5 border-b border-r rotate-45 ${props.placement === 'top' || props.arrowPointAtCenter ? 'left-1/2 -translate-x-1/2' : hAlign}` } @@ -145,7 +143,7 @@ const arrowPositionClass = computed(() => { return '' }) -// 3. 过渡动画方向 (Transform Origin) +// 3. 过渡动画方向 const transitionOriginClass = computed(() => { if (props.placement.startsWith('top')) return 'origin-bottom' @@ -162,9 +160,13 @@ const transitionOriginClass = computed(() => { const okBtnClass = computed(() => { const base = 'rounded px-3 py-1 text-xs text-white transition-colors' switch (props.okType) { - case 'danger': return `${base} bg-red-500 hover:bg-red-600 border border-red-500` - case 'default': return 'rounded px-3 py-1 text-xs text-slate-600 border border-slate-200 hover:border-blue-400 hover:text-blue-500 transition-colors bg-white' - default: return `${base} bg-blue-600 hover:bg-blue-700 border border-blue-600` + case 'danger': + return `${base} bg-red-500 hover:bg-red-600 border border-red-500` + case 'default': + // Update: 默认按钮在暗色模式下背景透明/深色，文字变浅，边框变深 + return 'rounded px-3 py-1 text-xs text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-600 hover:border-blue-400 hover:text-blue-500 transition-colors bg-white dark:bg-slate-800' + default: + return `${base} bg-blue-600 hover:bg-blue-700 border border-blue-600` } }) @@ -187,8 +189,13 @@ const okBtnClass = computed(() => { >
@@ -198,18 +205,20 @@ const okBtnClass = computed(() => {
- + +
-
+ +
{{ title }}
-
+
{{ description }} @@ -222,7 +231,12 @@ const okBtnClass = computed(() => {
- + \ No newline at end of file diff --git a/src/pages/simulate.vue b/src/pages/simulate.vue index d280a26..e7cde86 100644 --- a/src/pages/simulate.vue +++ b/src/pages/simulate.vue @@ -801,7 +801,7 @@ function deletePlan(planId: string) {
{{ school.schoolName }} @@ -831,7 +831,7 @@ function deletePlan(planId: string) {
{{ school.enrollProbability }}% @@ -851,7 +851,7 @@ function deletePlan(planId: string) {
{{ school.planNum }}人 @@ -870,7 +870,7 @@ function deletePlan(planId: string) {