fix(webui): 日历补上圆角 —— 外层面板圆了、里面的格子还是直角
用户:「日历页面怎么没有圆角」。 原因与列表那次同源:**外层面板一直是圆的**(`.app-shell > *` 给了 14px), 但里面的日格/列写的是 `border-b border-r`(直角 + 细边框),而我早前为了修滚动 去掉了面板的 `overflow: hidden` ⇒ 里面的直角就戳在圆角外面,看起来"整页没有圆角"。 改法:日格、周视图列、以及日历的两个大面板都改用 `.glass-card` (圆角 14px + 白色玻璃 + 细边框),与列表项、顶部气泡同一套语言。 顺手去掉日格上的 `overflow-hidden`(它会把事件条裁掉,而"裁掉"正是这几轮的老毛病)。 实测(自有浏览器,壁纸开):日历里 **42 个 `.glass-card`**(月视图 42 格 + 面板), 格子 `border-radius: 14px`、底色 `rgba(255,255,255,0.78)`。 (这条同样是"外层圆角 + 内层直角"这一类问题 —— 我已经在列表、顶部、日历上 各修了一次。要找根因的话:**面板圆角不能靠 `overflow: hidden` 裁**(它会杀滚动), 所以每一层自己都要圆角。这是这套"浮动面板"设计的固有代价,写在这里备查。)
This commit is contained in:
@ -511,7 +511,7 @@ function MonthGrid({
|
||||
key={i}
|
||||
onClick={() => onPickDay(d)}
|
||||
onDoubleClick={() => onCreateAt(atNineOClock(d))}
|
||||
className={`border-b border-r border-gray-100 p-1 flex flex-col gap-0.5 min-h-0 overflow-hidden cursor-pointer ${
|
||||
className={`glass-card border-b border-r border-gray-100 p-1 flex flex-col gap-0.5 min-h-0 cursor-pointer ${
|
||||
isPicked ? 'bg-blue-50/70 ring-1 ring-inset ring-blue-300' : outside ? 'bg-gray-50/60' : 'bg-white'
|
||||
}`}
|
||||
>
|
||||
@ -572,7 +572,7 @@ function WeekGrid({
|
||||
const now = new Date();
|
||||
|
||||
return (
|
||||
<div className="flex-1 min-h-0 overflow-auto">
|
||||
<div className="glass-card flex-1 min-h-0 overflow-auto">
|
||||
<div className="grid grid-cols-7 min-w-[36rem] h-full">
|
||||
{days.map((d, i) => {
|
||||
const list = byDay.get(dayKey(d)) ?? [];
|
||||
@ -583,7 +583,7 @@ function WeekGrid({
|
||||
key={i}
|
||||
onClick={() => onPickDay(d)}
|
||||
onDoubleClick={() => onCreateAt(atNineOClock(d))}
|
||||
className={`border-r border-gray-100 flex flex-col min-h-[28rem] cursor-pointer ${
|
||||
className={`glass-card border-r border-gray-100 flex flex-col min-h-[28rem] cursor-pointer ${
|
||||
isPicked ? 'bg-blue-50/50' : ''
|
||||
}`}
|
||||
>
|
||||
@ -645,7 +645,7 @@ function DayGrid({
|
||||
const nowHour = isSameDay(anchor, new Date()) ? new Date().getHours() : -1;
|
||||
|
||||
return (
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
<div className="glass-card flex-1 min-h-0 overflow-y-auto">
|
||||
<div className="px-3 py-2 text-xs text-gray-500 border-b border-gray-100">
|
||||
{formatSolarWithLunar(anchor)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user