20260813173539
This commit is contained in:
oneao committed
1 parent
4bd730f649
commit
ab30604fe4
13 files changed
+1267
-555
No files matched your search
+226
-11
@@ -175,14 +175,11 @@ body {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ===== Drawer ===== */
|
||||
/* ===== Drawer（桌面端右侧抽屉） ===== */
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@@ -193,17 +190,24 @@ body {
|
||||
visibility: visible;
|
||||
}
|
||||
.drawer {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
margin: 0 12px;
|
||||
padding: 18px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 420px;
|
||||
max-width: 92vw;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 16px 16px 0 0;
|
||||
transform: translateY(100%);
|
||||
border-radius: 0;
|
||||
box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
.drawer-mask.open .drawer {
|
||||
transform: translateY(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
.drawer-head {
|
||||
display: flex;
|
||||
@@ -311,3 +315,214 @@ body {
|
||||
.col-resize-handle.active {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ===== Field config table（右侧字段配置） ===== */
|
||||
.field-config {
|
||||
padding: 4px 4px 8px;
|
||||
}
|
||||
.fc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 8px 12px;
|
||||
}
|
||||
.fc-head h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
margin: 0;
|
||||
}
|
||||
.fc-head .muted {
|
||||
color: #94a3b8;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
}
|
||||
.table-scroll {
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
.field-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
.field-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
color: #94a3b8;
|
||||
padding: 8px 6px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.field-table td {
|
||||
padding: 6px 6px;
|
||||
border-bottom: 1px solid #f8fafc;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.field-table tr.active > td {
|
||||
background: #eff6ff;
|
||||
}
|
||||
.field-table select,
|
||||
.field-table .cell-input {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
padding: 4px 6px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
outline: none;
|
||||
}
|
||||
.cell-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
|
||||
}
|
||||
.cell-input.code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
color: #64748b;
|
||||
}
|
||||
.cell-group {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
.move-btns {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.move-btns button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.move-btns button:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.group-row > td {
|
||||
background: #f8fafc;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
.group-name {
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
}
|
||||
.group-edit {
|
||||
margin-left: 6px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.group-edit:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.group-count {
|
||||
margin-left: 8px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.group-input {
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
width: 220px;
|
||||
outline: none;
|
||||
}
|
||||
.add-row {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: 1px dashed #e2e8f0;
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.add-row:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.detail-row > td {
|
||||
background: #fafbff;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.detail-grid label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.detail-grid input,
|
||||
.detail-grid select {
|
||||
width: 100%;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
color: #334155;
|
||||
outline: none;
|
||||
}
|
||||
.detail-grid input:focus,
|
||||
.detail-grid select:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.ds-btn {
|
||||
width: 100%;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ds-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.icon-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #cbd5e1;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
color: #ef4444;
|
||||
}
|
||||
.link-danger {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #ef4444;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.link-muted {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #94a3b8;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
Reference in new issue
Block a user