oneao
05d0c7f304
不含 fms-api Java 侧改动与后续导航状态化阶段提交。主要内容： - ui 组件库：date/dropdown/form/input/popover/select/tooltip 调整， 新增 Segmented 组件；fms-table 可编辑单元格渲染器与 FileCard 更新 - 模块管理：列表配置加载自动补全、查询缺配徽标与一键补充、 结构编辑内核 useStructureEditing/useBandLayout、子表表格编辑方式、 分组标题多语言、I18nKeyCell 等（含配套 spec） - 布局/主题/仪表盘/演示页小幅更新
533 lines
11 KiB
SCSS
533 lines
11 KiB
SCSS
/* ============================================================
|
||
* DatePicker / RangePicker 样式
|
||
* 沿用 fms 主题 CSS 变量（见 src/theme/tokens.css）
|
||
* ============================================================ */
|
||
|
||
.fms-date-picker,
|
||
.fms-range-picker {
|
||
display: block;
|
||
width: 100%;
|
||
/* 窄容器下保持日历可读（7 列日期格子约 31px），
|
||
浮层跟随触发器宽度，视觉统一不受影响 */
|
||
min-width: 240px;
|
||
}
|
||
|
||
/* ---------- 触发器（类 Input 外观） ---------- */
|
||
.fms-date-trigger,
|
||
.fms-range-trigger {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
/* min-height 而非 height：与 Input/Select 一致，内容不足时撑到控件高度，
|
||
被放进更矮的容器（如表格编辑单元格）时可被 min-height:0 压缩 */
|
||
min-height: var(--fms-control-height);
|
||
padding: 0 var(--fms-control-padding-x);
|
||
border: 1px solid var(--fms-border);
|
||
border-radius: var(--fms-control-radius);
|
||
background: var(--fms-card);
|
||
color: var(--fms-text);
|
||
font-size: var(--fms-font-size);
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
transition:
|
||
border-color 150ms ease,
|
||
box-shadow 150ms ease;
|
||
}
|
||
|
||
.fms-date-trigger:hover,
|
||
.fms-range-trigger:hover,
|
||
.fms-date-picker.is-open .fms-date-trigger,
|
||
.fms-range-picker.is-open .fms-range-trigger {
|
||
border-color: var(--fms-primary);
|
||
}
|
||
|
||
.fms-date-picker.is-open .fms-date-trigger,
|
||
.fms-range-picker.is-open .fms-range-trigger {
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fms-primary) 18%, transparent);
|
||
}
|
||
|
||
.fms-date-trigger:focus-within,
|
||
.fms-range-trigger:focus-within {
|
||
border-color: var(--fms-primary);
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fms-primary) 18%, transparent);
|
||
}
|
||
|
||
.fms-date-prefix {
|
||
display: inline-flex;
|
||
color: var(--fms-text-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fms-date-input,
|
||
.fms-range-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
color: var(--fms-text);
|
||
font-size: var(--fms-font-size);
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.fms-range-input {
|
||
text-align: center;
|
||
}
|
||
|
||
.fms-range-sep {
|
||
color: var(--fms-text-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fms-date-suffix {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
color: var(--fms-text-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fms-date-clear {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 2px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: transparent;
|
||
color: var(--fms-text-secondary);
|
||
cursor: pointer;
|
||
transition:
|
||
background 150ms ease,
|
||
color 150ms ease;
|
||
}
|
||
|
||
.fms-date-clear:hover {
|
||
color: var(--fms-text);
|
||
background: var(--fms-secondary-hover);
|
||
}
|
||
|
||
.fms-date-clear:focus-visible,
|
||
.fms-cal-nav:focus-visible,
|
||
.fms-cal-title-button:focus-visible,
|
||
.fms-cal-cell:focus-visible,
|
||
.fms-calendar-selector-item:focus-visible,
|
||
.fms-time-list:focus-visible {
|
||
outline: 2px solid var(--fms-primary);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.fms-date-arrow {
|
||
transition: transform 150ms ease;
|
||
}
|
||
|
||
.fms-date-picker.is-open .fms-date-arrow,
|
||
.fms-range-picker.is-open .fms-date-arrow {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 禁用态 */
|
||
.fms-date-picker.is-disabled .fms-date-trigger,
|
||
.fms-range-picker.is-disabled .fms-range-trigger {
|
||
background: var(--fms-disabled-bg);
|
||
color: var(--fms-disabled-text);
|
||
border-color: var(--fms-disabled-border);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.fms-date-picker.is-disabled .fms-date-input,
|
||
.fms-range-picker.is-disabled .fms-range-input {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* ---------- 日历面板 ---------- */
|
||
.fms-calendar-panel {
|
||
--fms-cal-h: 282px; /* 274px 日历内容 + 8px 底部留白，时间区使用同一总高度 */
|
||
width: 100%;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
.fms-calendar-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.fms-cal-nav-group {
|
||
display: inline-flex;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* 日历网格填满面板（跟随触发器宽度），1fr 让 7 列日期自适应均分 */
|
||
.fms-calendar-grid {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
}
|
||
|
||
.fms-cal-nav {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: var(--fms-text-secondary);
|
||
cursor: pointer;
|
||
transition:
|
||
background 150ms ease,
|
||
color 150ms ease;
|
||
}
|
||
|
||
.fms-cal-nav:hover {
|
||
background: var(--fms-secondary-hover);
|
||
color: var(--fms-text);
|
||
}
|
||
|
||
.fms-cal-title {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 104px;
|
||
}
|
||
|
||
.fms-cal-title-button {
|
||
height: 28px;
|
||
padding: 0 4px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
font-family: inherit;
|
||
color: var(--fms-text);
|
||
cursor: pointer;
|
||
transition:
|
||
background 150ms ease,
|
||
color 150ms ease;
|
||
}
|
||
|
||
.fms-cal-title-button:hover,
|
||
.fms-cal-title-button.is-active {
|
||
background: var(--fms-secondary-hover);
|
||
color: var(--fms-primary);
|
||
}
|
||
|
||
.fms-calendar-selector {
|
||
box-sizing: border-box;
|
||
flex: 1 1 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(4, 1fr);
|
||
gap: 8px;
|
||
width: 100%;
|
||
min-height: 0;
|
||
padding: 12px 4px 4px;
|
||
}
|
||
|
||
.fms-calendar-selector-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 0;
|
||
padding: 0 4px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: var(--fms-text);
|
||
font-size: 13px;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
transition:
|
||
background 120ms ease,
|
||
color 120ms ease;
|
||
}
|
||
|
||
.fms-calendar-selector-item:hover {
|
||
background: var(--fms-secondary-hover);
|
||
}
|
||
|
||
.fms-calendar-selector-item.is-current:not(.is-selected) {
|
||
box-shadow: inset 0 0 0 1px var(--fms-primary);
|
||
color: var(--fms-primary);
|
||
}
|
||
|
||
.fms-calendar-selector-item.is-selected {
|
||
background: var(--fms-primary);
|
||
color: var(--fms-primary-text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.fms-cal-weekdays {
|
||
flex: 0 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.fms-cal-weekday {
|
||
text-align: center;
|
||
padding: 4px 0;
|
||
font-size: 12px;
|
||
color: var(--fms-text-secondary);
|
||
}
|
||
|
||
.fms-cal-rows {
|
||
flex: 1 1 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.fms-cal-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
gap: 2px;
|
||
}
|
||
|
||
.fms-cal-cell {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 34px;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
font-size: 13px;
|
||
font-family: inherit;
|
||
color: var(--fms-text);
|
||
cursor: pointer;
|
||
transition:
|
||
background 120ms ease,
|
||
color 120ms ease;
|
||
}
|
||
|
||
.fms-cal-cell:hover {
|
||
background: var(--fms-secondary-hover);
|
||
}
|
||
|
||
.fms-cal-cell.is-other-month {
|
||
color: var(--fms-text-secondary);
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.fms-cal-cell.is-disabled {
|
||
color: var(--fms-disabled-text);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.fms-cal-cell:disabled {
|
||
opacity: 1;
|
||
}
|
||
|
||
.fms-cal-cell.is-disabled:hover {
|
||
background: transparent;
|
||
}
|
||
|
||
/* 今日标记 */
|
||
.fms-cal-cell.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end)
|
||
.fms-cal-cell-inner {
|
||
font-weight: 600;
|
||
color: var(--fms-primary);
|
||
}
|
||
|
||
.fms-cal-cell.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end)::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 4px;
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 50%;
|
||
background: var(--fms-primary);
|
||
}
|
||
|
||
/* 单选选中 */
|
||
.fms-cal-cell.is-selected {
|
||
background: var(--fms-primary);
|
||
color: var(--fms-primary-text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 范围区间底色 */
|
||
.fms-cal-cell.is-in-range,
|
||
.fms-cal-cell.is-in-hover-range {
|
||
background: color-mix(in srgb, var(--fms-primary) 12%, transparent);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* 范围端点（声明在 in-range 之后，优先级更高） */
|
||
.fms-cal-cell.is-range-start,
|
||
.fms-cal-cell.is-range-end {
|
||
background: var(--fms-primary);
|
||
color: var(--fms-primary-text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.fms-cal-cell.is-range-start {
|
||
border-radius: 6px 0 0 6px;
|
||
}
|
||
|
||
.fms-cal-cell.is-range-end {
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
|
||
.fms-cal-cell.is-range-single {
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* ---------- 时间选择（右侧面板，antd 风格：左日期 / 右时间） ---------- */
|
||
.fms-calendar-panel.has-time {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 主体行：左日期 + 右时间并排；align-items:stretch 让时间区高度撑满 */
|
||
.fms-calendar-body {
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.fms-calendar-main {
|
||
flex: 1 1 auto;
|
||
height: var(--fms-cal-h);
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
.fms-calendar-time {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
padding-left: 12px;
|
||
border-left: 1px solid var(--fms-border);
|
||
}
|
||
|
||
.fms-calendar-panel.is-time-only .fms-calendar-time {
|
||
height: var(--fms-cal-h);
|
||
padding-left: 0;
|
||
border-left: none;
|
||
}
|
||
|
||
/* 范围模式：开始 / 结束 两组左右排列 */
|
||
.fms-calendar-time .fms-time-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.fms-calendar-panel.is-range .fms-calendar-time {
|
||
flex-direction: row;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
}
|
||
|
||
.fms-calendar-panel.is-range .fms-time-group {
|
||
height: var(--fms-cal-h);
|
||
gap: 4px;
|
||
}
|
||
|
||
.fms-calendar-panel.is-range .fms-time-group .fms-time-select {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
}
|
||
|
||
.fms-calendar-panel.is-range .fms-time-group + .fms-time-group {
|
||
border-left: 1px solid var(--fms-border);
|
||
}
|
||
|
||
.fms-time-label {
|
||
font-size: 12px;
|
||
color: var(--fms-text-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fms-time-select {
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* 单选模式：时间区与日历主体同高，列表填充后溢出滚动 */
|
||
.fms-calendar-time > .fms-time-select {
|
||
height: var(--fms-cal-h);
|
||
}
|
||
|
||
.fms-time-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 56px;
|
||
}
|
||
|
||
.fms-time-col:not(:first-child) {
|
||
border-left: 1px solid var(--fms-border);
|
||
}
|
||
|
||
.fms-time-list {
|
||
width: 100%;
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.fms-time-list:focus-visible {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.fms-time-list ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.fms-time-item {
|
||
width: 100%;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: var(--fms-text);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition:
|
||
background 120ms ease,
|
||
color 120ms ease;
|
||
}
|
||
|
||
.fms-time-item:hover {
|
||
background: var(--fms-secondary-hover);
|
||
}
|
||
|
||
.fms-time-item.is-active {
|
||
background: var(--fms-primary);
|
||
color: var(--fms-primary-text);
|
||
font-weight: 500;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.fms-date-trigger,
|
||
.fms-range-trigger,
|
||
.fms-date-clear,
|
||
.fms-date-arrow,
|
||
.fms-cal-nav,
|
||
.fms-cal-title-button,
|
||
.fms-cal-cell,
|
||
.fms-calendar-selector-item,
|
||
.fms-time-item {
|
||
transition: none;
|
||
}
|
||
}
|