feat: stabilize document type and upload flows
This commit is contained in:
wren
@@ -10,6 +10,46 @@
|
||||
@apply text-xl font-medium;
|
||||
}
|
||||
|
||||
.document-types-page .empty-state {
|
||||
@apply flex flex-col items-center justify-center py-12 text-gray-500;
|
||||
}
|
||||
|
||||
.document-types-page .empty-state i {
|
||||
@apply text-3xl mb-3 text-gray-300;
|
||||
}
|
||||
|
||||
.document-types-page .data-table {
|
||||
@apply w-full border-collapse;
|
||||
}
|
||||
|
||||
.document-types-page .data-table thead th {
|
||||
@apply text-left text-sm font-medium text-gray-600 px-4 py-3 border-b border-gray-200 bg-gray-50;
|
||||
}
|
||||
|
||||
.document-types-page .data-table tbody td {
|
||||
@apply px-4 py-3 border-b border-gray-100 align-middle text-sm text-gray-800;
|
||||
}
|
||||
|
||||
.document-types-page .data-table tbody tr:hover {
|
||||
@apply bg-gray-50;
|
||||
}
|
||||
|
||||
.document-types-page .tag {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-amber-50 text-amber-700 border border-amber-200;
|
||||
}
|
||||
|
||||
.document-types-page .status-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs border;
|
||||
}
|
||||
|
||||
.document-types-page .status-badge.enabled {
|
||||
@apply bg-emerald-50 text-emerald-700 border-emerald-200;
|
||||
}
|
||||
|
||||
.document-types-page .status-badge.disabled {
|
||||
@apply bg-gray-100 text-gray-600 border-gray-200;
|
||||
}
|
||||
|
||||
.document-types-page .type-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-primary-50 text-primary-600 mr-1 mb-1;
|
||||
}
|
||||
@@ -30,6 +70,14 @@
|
||||
@apply mr-1;
|
||||
}
|
||||
|
||||
.document-types-page .row-actions {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
|
||||
.document-types-page .btn-icon {
|
||||
@apply inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors;
|
||||
}
|
||||
|
||||
.document-types-page .text-primary {
|
||||
@apply text-primary-600;
|
||||
}
|
||||
|
||||
@@ -1,143 +1,538 @@
|
||||
.document-type-new-page {
|
||||
@apply w-full;
|
||||
@apply w-full p-6;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-header {
|
||||
@apply flex justify-between items-center mb-4;
|
||||
@apply mb-6 rounded-xl border border-gray-200 bg-white p-6 shadow-sm;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-heading {
|
||||
@apply max-w-3xl;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-kicker {
|
||||
@apply inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-semibold tracking-[0.14em];
|
||||
border-color: rgba(0, 104, 74, 0.18);
|
||||
background: rgba(0, 104, 74, 0.06);
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-title {
|
||||
@apply text-xl font-medium;
|
||||
@apply mt-4 flex items-center gap-3 text-[28px] font-semibold text-gray-900;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-title i {
|
||||
@apply inline-flex h-11 w-11 items-center justify-center rounded-lg text-xl text-white;
|
||||
background: #00684a;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-subtitle {
|
||||
@apply mt-2 max-w-2xl text-sm leading-6 text-gray-600;
|
||||
}
|
||||
|
||||
.document-type-new-page .header-overview {
|
||||
@apply mt-5 flex flex-col gap-4;
|
||||
}
|
||||
|
||||
.document-type-new-page .header-badges {
|
||||
@apply flex flex-wrap gap-3;
|
||||
}
|
||||
|
||||
.document-type-new-page .status-pill {
|
||||
@apply inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium;
|
||||
}
|
||||
|
||||
.document-type-new-page .status-pill.create {
|
||||
border-color: rgba(0, 104, 74, 0.18);
|
||||
background: rgba(0, 104, 74, 0.06);
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
.document-type-new-page .status-pill.edit {
|
||||
@apply border-blue-200 bg-blue-50 text-blue-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .status-pill.linked {
|
||||
@apply border-gray-200 bg-gray-50 text-gray-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .status-pill.muted {
|
||||
@apply border-amber-200 bg-amber-50 text-amber-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .hero-metrics {
|
||||
@apply grid gap-3 md:grid-cols-2;
|
||||
}
|
||||
|
||||
.document-type-new-page .hero-metric-card {
|
||||
@apply rounded-lg border border-gray-200 bg-gray-50 p-4;
|
||||
}
|
||||
|
||||
.document-type-new-page .hero-metric-label {
|
||||
@apply block text-xs font-semibold tracking-[0.12em] text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .hero-metric-card strong {
|
||||
@apply mt-2 block text-2xl font-semibold text-gray-900;
|
||||
}
|
||||
|
||||
.document-type-new-page .hero-metric-card small {
|
||||
@apply mt-1 block text-xs leading-5 text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .editor-shell {
|
||||
@apply grid gap-6 xl:grid-cols-[minmax(0,1.65fr)_minmax(280px,0.75fr)];
|
||||
}
|
||||
|
||||
.document-type-new-page .editor-main-card,
|
||||
.document-type-new-page .summary-card,
|
||||
.document-type-new-page .selection-card,
|
||||
.document-type-new-page .guide-card {
|
||||
@apply overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm;
|
||||
}
|
||||
|
||||
.document-type-new-page .editor-main-card {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
.document-type-new-page .doc-type-form {
|
||||
@apply flex flex-col gap-0;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-section {
|
||||
@apply border-b border-gray-100 px-6 py-6;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-section:last-of-type {
|
||||
@apply border-b-0;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-heading {
|
||||
@apply flex flex-col gap-3 md:flex-row md:items-end md:justify-between;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-kicker,
|
||||
.document-type-new-page .summary-kicker {
|
||||
@apply inline-flex rounded-full bg-gray-100 px-3 py-1 text-[11px] font-semibold tracking-[0.12em] text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-heading h3 {
|
||||
@apply mt-3 text-xl font-semibold text-gray-900;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-heading p {
|
||||
@apply max-w-xl text-sm leading-6 text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-intro-card {
|
||||
@apply mt-5 grid gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 md:grid-cols-2;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-intro-item {
|
||||
@apply flex gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-intro-item i {
|
||||
@apply mt-0.5 text-lg;
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-intro-item strong {
|
||||
@apply block text-sm font-semibold text-gray-900;
|
||||
}
|
||||
|
||||
.document-type-new-page .section-intro-item span {
|
||||
@apply mt-1 block text-xs leading-5 text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-row.two-column {
|
||||
@apply mt-5 grid gap-4 lg:grid-cols-2;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-group {
|
||||
@apply mb-4;
|
||||
@apply mb-0 mt-5;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-label {
|
||||
@apply block text-sm font-medium text-gray-700 mb-1;
|
||||
.document-type-new-page .form-group label {
|
||||
@apply mb-2 block text-sm font-medium text-gray-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-group label.required::after {
|
||||
content: " *";
|
||||
@apply text-red-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-input,
|
||||
.document-type-new-page .form-textarea,
|
||||
.document-type-new-page .form-select {
|
||||
@apply w-full rounded-md border border-gray-300 shadow-sm px-3 py-2 transition-all duration-300;
|
||||
@apply focus:outline-none focus:border-[var(--primary-color)] focus:shadow-[0_0_0_2px_rgba(0,104,74,0.2)];
|
||||
@apply w-full rounded-md border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-700 transition-all duration-200 placeholder:text-gray-400;
|
||||
@apply focus:outline-none focus:ring-1;
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-input:focus,
|
||||
.document-type-new-page .form-textarea:focus,
|
||||
.document-type-new-page .form-select:focus,
|
||||
.document-type-new-page .rule-set-search:focus-within {
|
||||
border-color: #00684a;
|
||||
box-shadow: 0 0 0 1px rgba(0, 104, 74, 0.35);
|
||||
}
|
||||
|
||||
.document-type-new-page .form-input:hover,
|
||||
.document-type-new-page .form-textarea:hover,
|
||||
.document-type-new-page .form-select:hover {
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-input:disabled {
|
||||
@apply cursor-not-allowed bg-gray-100 text-gray-400;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-input.error,
|
||||
.document-type-new-page .form-textarea.error,
|
||||
.document-type-new-page .form-select.error {
|
||||
@apply border-red-300 bg-red-50/70;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-textarea {
|
||||
@apply resize-none;
|
||||
@apply min-h-[120px] resize-y;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-tip {
|
||||
@apply text-xs text-gray-500 mt-1;
|
||||
.document-type-new-page .form-hint {
|
||||
@apply mt-2 block text-xs leading-5 text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .input-error {
|
||||
@apply border-red-500;
|
||||
.document-type-new-page .form-error {
|
||||
@apply mt-2 block text-xs font-medium text-red-600;
|
||||
}
|
||||
|
||||
.document-type-new-page .error-message {
|
||||
@apply text-sm text-red-600 mt-1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.document-type-new-page .binding-preview {
|
||||
@apply mt-5 rounded-lg border border-dashed p-4;
|
||||
border-color: rgba(0, 104, 74, 0.25);
|
||||
background: rgba(0, 104, 74, 0.04);
|
||||
}
|
||||
|
||||
/* .document-type-new-page .error-message::before {
|
||||
content: "⚠️";
|
||||
margin-right: 0.25rem;
|
||||
} */
|
||||
|
||||
|
||||
.document-type-new-page .general-error {
|
||||
@apply flex items-center p-3 mb-4 bg-red-50 rounded-md text-red-600 text-sm;
|
||||
.document-type-new-page .binding-preview-label {
|
||||
@apply text-xs font-semibold tracking-[0.12em];
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
.document-type-new-page .general-error i {
|
||||
@apply mr-2;
|
||||
.document-type-new-page .binding-preview-value {
|
||||
@apply mt-3 flex items-start gap-3 text-sm leading-6 text-gray-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .group-error {
|
||||
@apply border border-red-500 rounded-md;
|
||||
.document-type-new-page .binding-preview-value i {
|
||||
@apply mt-1 text-base;
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
/* 复选框样式 */
|
||||
.document-type-new-page .checkbox-group {
|
||||
@apply flex flex-col gap-2 mt-2;
|
||||
.document-type-new-page .rule-set-toolbar {
|
||||
@apply mt-5 flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3;
|
||||
}
|
||||
|
||||
.document-type-new-page .checkbox-item {
|
||||
@apply flex items-center p-2 border border-gray-200 rounded cursor-pointer transition-all;
|
||||
.document-type-new-page .rule-set-toolbar-main {
|
||||
@apply flex flex-col gap-1;
|
||||
}
|
||||
|
||||
.document-type-new-page .checkbox-item:hover {
|
||||
@apply border-[var(--primary-color)] bg-[rgba(0,104,74,0.15)];
|
||||
.document-type-new-page .rule-set-counter {
|
||||
@apply inline-flex items-center gap-2 text-sm font-semibold text-gray-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .checkbox-item.checked {
|
||||
@apply border-[var(--primary-color)] bg-[rgba(0,104,74,0.25)];
|
||||
.document-type-new-page .rule-set-counter i {
|
||||
color: #00684a;
|
||||
}
|
||||
|
||||
/* 父子级分组样式 */
|
||||
.document-type-new-page .parent-checkbox-item {
|
||||
@apply bg-gray-50 font-medium;
|
||||
.document-type-new-page .rule-set-search {
|
||||
@apply flex items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2;
|
||||
}
|
||||
|
||||
.document-type-new-page .child-checkbox-item {
|
||||
@apply ml-8 border-l-2 border-l-[var(--primary-color)];
|
||||
.document-type-new-page .rule-set-search i {
|
||||
@apply text-sm text-gray-400;
|
||||
}
|
||||
|
||||
.document-type-new-page .expand-icon {
|
||||
@apply w-6 h-6 flex items-center justify-center rounded hover:bg-[rgba(0,104,74,0.15)] mr-2 cursor-pointer;
|
||||
.document-type-new-page .rule-set-search input {
|
||||
@apply w-full border-0 bg-transparent p-0 text-sm text-gray-700 placeholder:text-gray-400 focus:outline-none focus:ring-0;
|
||||
}
|
||||
|
||||
.document-type-new-page .group-badge {
|
||||
@apply inline-flex items-center px-2 py-0.5 rounded-full text-xs ml-2;
|
||||
.document-type-new-page .rule-set-warning {
|
||||
@apply mt-4 flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800;
|
||||
}
|
||||
|
||||
.document-type-new-page .parent-badge {
|
||||
@apply bg-[rgba(0,104,74,1)] text-white;
|
||||
.document-type-new-page .rule-set-warning i {
|
||||
@apply mt-0.5 text-base;
|
||||
}
|
||||
|
||||
.document-type-new-page .child-badge {
|
||||
@apply bg-[rgba(0,104,1,0.71)] text-white;
|
||||
.document-type-new-page .rule-set-warning strong {
|
||||
@apply block font-semibold;
|
||||
}
|
||||
|
||||
/* 添加checkbox-input样式，使用视觉上更美观的自定义复选框样式 */
|
||||
.document-type-new-page .checkbox-input {
|
||||
@apply mr-2 h-4 w-4 text-primary-600 border-gray-300 rounded;
|
||||
@apply focus:ring-primary-500 cursor-pointer;
|
||||
.document-type-new-page .rule-set-warning span {
|
||||
@apply mt-1 block text-xs leading-5 text-amber-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-checklist {
|
||||
@apply mt-5 grid max-h-[520px] gap-3 overflow-y-auto pr-1;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-checklist::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-checklist::-webkit-scrollbar-thumb {
|
||||
background: #d1d5db;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-item {
|
||||
@apply flex items-start gap-4 rounded-lg border border-gray-200 bg-white px-4 py-4 transition-all duration-200;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-item:hover {
|
||||
border-color: rgba(0, 104, 74, 0.3);
|
||||
background: rgba(0, 104, 74, 0.02);
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-item.checked {
|
||||
border-color: rgba(0, 104, 74, 0.35);
|
||||
background: rgba(0, 104, 74, 0.05);
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-item.unavailable {
|
||||
@apply border-amber-200 bg-amber-50/40;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-checkbox-wrap {
|
||||
@apply pt-0.5;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-checkbox-wrap input {
|
||||
@apply h-4 w-4 cursor-pointer rounded border-gray-300;
|
||||
accent-color: #00684a;
|
||||
}
|
||||
|
||||
/* 复选框选中状态 */
|
||||
.document-type-new-page .checkbox-input:checked {
|
||||
background-color: #00684a;
|
||||
border-color: #00684a;
|
||||
.document-type-new-page .rule-set-content {
|
||||
@apply min-w-0 flex-1;
|
||||
}
|
||||
|
||||
.document-type-new-page .checkbox-label {
|
||||
@apply text-gray-700 font-normal cursor-pointer flex-1 flex items-center;
|
||||
@apply bg-transparent border-none p-0 text-left appearance-none;
|
||||
outline: none;
|
||||
.document-type-new-page .rule-set-topline {
|
||||
@apply flex flex-col gap-2 md:flex-row md:items-center md:justify-between;
|
||||
}
|
||||
|
||||
.document-type-new-page .checkbox-label:focus {
|
||||
@apply outline-none ring-2 ring-primary-300 rounded;
|
||||
.document-type-new-page .rule-set-name {
|
||||
@apply text-sm font-semibold text-gray-900;
|
||||
}
|
||||
|
||||
.document-type-new-page .checkbox-item.checked .checkbox-label {
|
||||
@apply text-[var(--primary-color)] font-medium;
|
||||
.document-type-new-page .rule-set-status {
|
||||
@apply inline-flex w-fit rounded-full px-2.5 py-1 text-xs font-medium;
|
||||
}
|
||||
|
||||
.document-type-new-page .radio-input {
|
||||
@apply mr-1 h-4 w-4 text-primary-600 border-gray-300 rounded;
|
||||
@apply focus:ring-primary-500 cursor-pointer;
|
||||
accent-color: #00684a;
|
||||
.document-type-new-page .rule-set-status.enabled,
|
||||
.document-type-new-page .rule-set-status.active,
|
||||
.document-type-new-page .rule-set-status.published {
|
||||
@apply bg-emerald-100 text-emerald-700;
|
||||
}
|
||||
|
||||
/* 更完整的自定义单选按钮样式（可选） */
|
||||
.document-type-new-page .radio-input:checked {
|
||||
background-color: #00684a;
|
||||
border-color: #00684a;
|
||||
.document-type-new-page .rule-set-status.disabled,
|
||||
.document-type-new-page .rule-set-status.inactive {
|
||||
@apply bg-gray-100 text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-meta {
|
||||
@apply mt-2 flex flex-wrap gap-2 text-xs text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-type,
|
||||
.document-type-new-page .rule-set-id,
|
||||
.document-type-new-page .rule-set-version-badge {
|
||||
@apply rounded-full bg-gray-100 px-2.5 py-1;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-version-badge.ok {
|
||||
color: #00684a;
|
||||
background: rgba(0, 104, 74, 0.1);
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-version-badge.missing {
|
||||
@apply bg-amber-100 text-amber-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-inline-warning {
|
||||
@apply mt-3 flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-inline-warning.soft {
|
||||
@apply border-sky-200 bg-sky-50 text-sky-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-inline-warning i {
|
||||
@apply mt-[2px];
|
||||
}
|
||||
|
||||
.document-type-new-page .empty-rule-set {
|
||||
@apply flex flex-col items-center rounded-lg border border-dashed border-gray-200 bg-gray-50 px-4 py-10 text-center;
|
||||
}
|
||||
|
||||
.document-type-new-page .empty-rule-set.compact {
|
||||
@apply py-8;
|
||||
}
|
||||
|
||||
.document-type-new-page .empty-rule-set i {
|
||||
@apply text-3xl text-gray-300;
|
||||
}
|
||||
|
||||
.document-type-new-page .empty-rule-set p {
|
||||
@apply mt-3 text-sm font-semibold text-gray-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .empty-rule-set span {
|
||||
@apply mt-2 max-w-sm text-xs leading-5 text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .form-actions {
|
||||
@apply flex flex-col-reverse gap-3 px-6 py-5 sm:flex-row sm:justify-end;
|
||||
}
|
||||
|
||||
.document-type-new-page .editor-sidebar {
|
||||
@apply flex flex-col gap-6;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-card,
|
||||
.document-type-new-page .selection-card,
|
||||
.document-type-new-page .guide-card {
|
||||
@apply p-5;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-card {
|
||||
@apply xl:sticky xl:top-6;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-card-header {
|
||||
@apply flex items-center justify-between gap-4;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-card-header h3 {
|
||||
@apply text-lg font-semibold text-gray-900;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-grid {
|
||||
@apply mt-5 grid gap-3 sm:grid-cols-2;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-item {
|
||||
@apply rounded-lg border border-gray-200 bg-gray-50 px-4 py-3;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-item.full {
|
||||
@apply sm:col-span-2;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-label,
|
||||
.document-type-new-page .selection-label {
|
||||
@apply block text-xs font-medium tracking-[0.08em] text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-item strong,
|
||||
.document-type-new-page .selection-item strong {
|
||||
@apply mt-2 block break-words text-sm font-semibold leading-6 text-gray-900;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-progress {
|
||||
@apply mt-5 rounded-lg border border-gray-200 bg-white p-4;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-progress-topline {
|
||||
@apply flex items-center justify-between text-sm font-medium text-gray-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-progress-bar {
|
||||
@apply mt-3 h-2 overflow-hidden rounded-full bg-gray-100;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-progress-bar span {
|
||||
@apply block h-full rounded-full transition-all duration-300;
|
||||
background: #00684a;
|
||||
}
|
||||
|
||||
.document-type-new-page .selection-stack {
|
||||
@apply mt-5 flex flex-col gap-4;
|
||||
}
|
||||
|
||||
.document-type-new-page .selection-item {
|
||||
@apply rounded-lg border border-gray-200 bg-gray-50 px-4 py-3;
|
||||
}
|
||||
|
||||
.document-type-new-page .selection-item.danger {
|
||||
@apply border-amber-200 bg-amber-50;
|
||||
}
|
||||
|
||||
.document-type-new-page .selection-tags {
|
||||
@apply mt-3 flex flex-wrap gap-2;
|
||||
}
|
||||
|
||||
.document-type-new-page .selection-tag {
|
||||
@apply inline-flex rounded-full px-3 py-1 text-xs font-medium;
|
||||
color: #00684a;
|
||||
background: rgba(0, 104, 74, 0.1);
|
||||
}
|
||||
|
||||
.document-type-new-page .selection-tag.warning {
|
||||
@apply bg-amber-100 text-amber-700;
|
||||
}
|
||||
|
||||
.document-type-new-page .selection-tag.muted {
|
||||
@apply bg-gray-100 text-gray-500;
|
||||
}
|
||||
|
||||
.document-type-new-page .guide-list {
|
||||
@apply mt-5 flex list-none flex-col gap-3;
|
||||
}
|
||||
|
||||
.document-type-new-page .guide-list li {
|
||||
@apply relative rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 pl-10 text-sm leading-7 text-gray-600;
|
||||
}
|
||||
|
||||
.document-type-new-page .guide-list li::before {
|
||||
content: "";
|
||||
@apply absolute left-4 top-5 h-2.5 w-2.5 rounded-full;
|
||||
background: #00684a;
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.document-type-new-page .summary-card {
|
||||
@apply static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.document-type-new-page {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-header,
|
||||
.document-type-new-page .form-section,
|
||||
.document-type-new-page .form-actions {
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-title {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
.document-type-new-page .page-title i {
|
||||
@apply h-10 w-10 text-lg;
|
||||
}
|
||||
|
||||
.document-type-new-page .summary-card,
|
||||
.document-type-new-page .selection-card,
|
||||
.document-type-new-page .guide-card {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-item {
|
||||
@apply gap-3 px-3 py-3;
|
||||
}
|
||||
|
||||
.document-type-new-page .rule-set-checklist {
|
||||
@apply max-h-[420px];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,6 +100,54 @@
|
||||
@apply border-[#00684a] shadow-[0_0_0_2px_rgba(0,104,74,0.2)] outline-none;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-card {
|
||||
@apply border border-amber-200;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner {
|
||||
@apply rounded-lg border border-amber-200 bg-amber-50 px-4 py-4;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__header {
|
||||
@apply flex items-start justify-between gap-3;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__title-wrap {
|
||||
@apply flex items-start gap-3;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__icon {
|
||||
@apply text-2xl text-amber-600;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__title {
|
||||
@apply text-base font-semibold text-amber-900;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__summary {
|
||||
@apply mt-1 text-sm leading-6 text-amber-900;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__dismiss {
|
||||
@apply inline-flex h-8 w-8 items-center justify-center rounded-full text-amber-700 transition-colors duration-200 hover:bg-amber-100 hover:text-amber-900;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__content {
|
||||
@apply mt-4 grid gap-4 md:grid-cols-2;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__label {
|
||||
@apply mb-2 text-sm font-medium text-amber-900;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__list {
|
||||
@apply m-0 list-disc space-y-2 pl-5 text-sm leading-6 text-amber-800;
|
||||
}
|
||||
|
||||
.file-upload-page .upload-error-banner__list--ordered {
|
||||
@apply list-decimal;
|
||||
}
|
||||
|
||||
/* 上传区域样式 */
|
||||
.file-upload-page .upload-area {
|
||||
@apply border-2 border-dashed border-gray-300 rounded-lg p-10 text-center bg-gray-50 cursor-pointer transition-all duration-300;
|
||||
|
||||
Reference in New Issue
Block a user