2017 lines
38 KiB
CSS
2017 lines
38 KiB
CSS
/* ==================== TDesign style variables from the legacy UI ==================== */
|
|
:root {
|
|
--td-brand-color: #0052d9;
|
|
--td-brand-color-hover: #0034b5;
|
|
--td-brand-color-active: #002a9c;
|
|
--td-brand-color-light: #ecf2fe;
|
|
--td-brand-color-focus: rgba(0, 82, 217, 0.2);
|
|
--td-success-color: #00a870;
|
|
--td-success-color-light: #e8f8f2;
|
|
--td-warning-color: #ed7b2f;
|
|
--td-warning-color-light: #fef3e6;
|
|
--td-error-color: #e34d59;
|
|
--td-error-color-light: #fdecee;
|
|
--td-text-color-primary: rgba(0, 0, 0, 0.9);
|
|
--td-text-color-secondary: rgba(0, 0, 0, 0.6);
|
|
--td-text-color-placeholder: rgba(0, 0, 0, 0.4);
|
|
--td-text-color-disabled: rgba(0, 0, 0, 0.26);
|
|
--td-text-color-anti: #ffffff;
|
|
--td-bg-color-page: #f3f3f3;
|
|
--td-bg-color-container: #ffffff;
|
|
--td-bg-color-container-hover: #f3f3f3;
|
|
--td-bg-color-container-active: #e7e7e7;
|
|
--td-bg-color-secondarycontainer: #f3f3f3;
|
|
--td-bg-color-component: #f3f3f3;
|
|
--td-bg-color-component-hover: #e7e7e7;
|
|
--td-bg-color-component-disabled: #eeeeee;
|
|
--td-border-color: #dcdcdc;
|
|
--td-border-color-light: #e7e7e7;
|
|
--td-scrollbar-color: rgba(0, 0, 0, 0.2);
|
|
--td-mask-color: rgba(0, 0, 0, 0.6);
|
|
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
|
|
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
|
|
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
|
|
--td-radius-small: 3px;
|
|
--td-radius-default: 6px;
|
|
--td-radius-large: 12px;
|
|
--td-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
|
--td-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
--td-transition: 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--td-brand-color: #4787f0;
|
|
--td-brand-color-hover: #618dff;
|
|
--td-brand-color-active: #366ef4;
|
|
--td-brand-color-light: #1b2f51;
|
|
--td-brand-color-focus: rgba(71, 135, 240, 0.35);
|
|
--td-success-color-light: #0d3926;
|
|
--td-warning-color-light: #4f2a1d;
|
|
--td-error-color-light: #4b191d;
|
|
--td-text-color-primary: rgba(255, 255, 255, 0.9);
|
|
--td-text-color-secondary: rgba(255, 255, 255, 0.55);
|
|
--td-text-color-placeholder: rgba(255, 255, 255, 0.35);
|
|
--td-text-color-disabled: rgba(255, 255, 255, 0.22);
|
|
--td-bg-color-page: #181818;
|
|
--td-bg-color-container: #242424;
|
|
--td-bg-color-container-hover: #383838;
|
|
--td-bg-color-container-active: #4c4c4c;
|
|
--td-bg-color-secondarycontainer: #2c2c2c;
|
|
--td-bg-color-component: #383838;
|
|
--td-bg-color-component-hover: #4c4c4c;
|
|
--td-bg-color-component-disabled: #383838;
|
|
--td-border-color: #5e5e5e;
|
|
--td-border-color-light: #4c4c4c;
|
|
--td-scrollbar-color: rgba(255, 255, 255, 0.28);
|
|
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.15), 0 4px 5px rgba(0, 0, 0, 0.22), 0 2px 4px -1px rgba(0, 0, 0, 0.32);
|
|
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.15), 0 8px 10px 1px rgba(0, 0, 0, 0.18), 0 5px 5px -3px rgba(0, 0, 0, 0.28);
|
|
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.15), 0 16px 24px 2px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
/* ==================== Base ==================== */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
color: var(--td-text-color-primary);
|
|
background: var(--td-bg-color-page);
|
|
font-family: var(--td-font-family);
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
transition: background-color var(--td-transition), color var(--td-transition);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--td-border-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--td-text-color-placeholder);
|
|
}
|
|
|
|
.hidden-input {
|
|
display: none;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.page-subtitle {
|
|
overflow: hidden;
|
|
color: var(--td-text-color-placeholder);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.section-label {
|
|
margin-bottom: 8px;
|
|
color: var(--td-text-color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ==================== App shell ==================== */
|
|
.app-layout {
|
|
height: 100vh;
|
|
background: var(--td-bg-color-page);
|
|
}
|
|
|
|
.app-sider {
|
|
background: var(--td-bg-color-container);
|
|
border-right: 1px solid var(--td-border-color-light);
|
|
transition: background-color var(--td-transition), border-color var(--td-transition);
|
|
}
|
|
|
|
.app-sider .n-layout-sider-scroll-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
gap: 12px;
|
|
height: 64px;
|
|
padding: 0 24px;
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.n-layout-sider--collapsed .brand {
|
|
justify-content: center;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.brand-mark {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
width: 32px;
|
|
height: 32px;
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
background: linear-gradient(135deg, var(--td-brand-color), #618dff);
|
|
border-radius: var(--td-radius-default);
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
|
|
.brand-text {
|
|
overflow: hidden;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.n-layout-sider--collapsed .brand-text {
|
|
display: none;
|
|
}
|
|
|
|
.app-menu {
|
|
flex: 1;
|
|
padding: 16px 8px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.app-menu .n-menu-item-content {
|
|
position: relative;
|
|
height: 40px;
|
|
margin-bottom: 4px;
|
|
padding: 0 16px !important;
|
|
color: var(--td-text-color-secondary);
|
|
border-radius: var(--td-radius-default);
|
|
transition: all var(--td-transition);
|
|
}
|
|
|
|
.app-menu .n-menu-item-content-header,
|
|
.app-menu .n-menu-item-content__icon {
|
|
color: inherit;
|
|
}
|
|
|
|
.app-menu .n-menu-item-content:hover {
|
|
color: var(--td-brand-color);
|
|
background: var(--td-bg-color-container-hover);
|
|
}
|
|
|
|
.app-menu .n-menu-item-content--selected {
|
|
color: var(--td-brand-color);
|
|
font-weight: 600;
|
|
background: var(--td-brand-color-light);
|
|
box-shadow: inset 0 0 0 1px var(--td-brand-color-focus);
|
|
}
|
|
|
|
.app-menu .n-menu-item-content--selected::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
left: 6px;
|
|
width: 3px;
|
|
background: var(--td-brand-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.app-menu .n-menu-item-content--selected .n-menu-item-content__icon {
|
|
color: var(--td-brand-color);
|
|
}
|
|
|
|
.n-layout-sider--collapsed .app-menu {
|
|
padding: 16px 8px;
|
|
}
|
|
|
|
.n-layout-sider--collapsed .app-menu .n-menu-item-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0 auto 4px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.n-layout-sider--collapsed .app-menu .n-menu-item-content-header,
|
|
.n-layout-sider--collapsed .app-menu .n-menu-item-content__arrow {
|
|
display: none;
|
|
}
|
|
|
|
.n-layout-sider--collapsed .app-menu .n-menu-item-content--selected::before {
|
|
display: none;
|
|
}
|
|
|
|
.n-layout-sider--collapsed .app-menu .n-menu-item-content__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.sider-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
gap: 4px;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
color: var(--td-text-color-secondary);
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
border-top: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.n-layout-sider--collapsed .sider-footer {
|
|
padding: 10px 6px;
|
|
}
|
|
|
|
.n-layout-sider--collapsed .sider-version-label,
|
|
.n-layout-sider--collapsed .sider-powered {
|
|
display: none;
|
|
}
|
|
|
|
.topbar,
|
|
.page-header {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: 16px;
|
|
height: 64px;
|
|
padding: 0 32px;
|
|
background: var(--td-bg-color-container);
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.page-header-content {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 16px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin: 0;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.page-header-actions {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-info-text {
|
|
color: var(--td-text-color-secondary);
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.header-dropdown-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.header-dropdown-caret {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.theme-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
background: transparent;
|
|
border: 1px solid var(--td-border-color);
|
|
border-radius: var(--td-radius-default);
|
|
cursor: pointer;
|
|
transition: all var(--td-transition);
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background: var(--td-bg-color-container-hover);
|
|
border-color: var(--td-text-color-secondary);
|
|
}
|
|
|
|
.theme-toggle svg {
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.logout-button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.content {
|
|
height: calc(100vh - 64px);
|
|
min-width: 0;
|
|
overflow: auto;
|
|
background: var(--td-bg-color-page);
|
|
}
|
|
|
|
/* ==================== Naive UI surface normalization ==================== */
|
|
.n-card.work-card,
|
|
.work-card {
|
|
background: var(--td-bg-color-container);
|
|
border-color: var(--td-border-color-light);
|
|
border-radius: var(--td-radius-large);
|
|
transition: all var(--td-transition);
|
|
}
|
|
|
|
.work-card > .n-card-header {
|
|
min-height: 54px;
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.work-card > .n-card-header .n-card-header__main,
|
|
.work-card > .n-card-header .n-card-header__extra {
|
|
color: var(--td-text-color-primary);
|
|
}
|
|
|
|
.work-card > .n-card__content,
|
|
.work-card > .n-card-content {
|
|
padding: 16px 20px;
|
|
color: var(--td-text-color-primary);
|
|
}
|
|
|
|
.work-card > .n-card__footer {
|
|
padding: 12px 20px;
|
|
background: var(--td-bg-color-container);
|
|
border-top: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.work-card .n-form-item-label,
|
|
.work-card .n-form-item-label__text {
|
|
color: var(--td-text-color-secondary);
|
|
}
|
|
|
|
.login-page {
|
|
display: grid;
|
|
min-height: 100vh;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background: var(--td-bg-color-page);
|
|
}
|
|
|
|
.login-card {
|
|
width: min(420px, 100%);
|
|
border-radius: var(--td-radius-large);
|
|
box-shadow: var(--td-shadow-2);
|
|
}
|
|
|
|
.login-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.login-brand h1 {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.login-brand p {
|
|
margin: 3px 0 0;
|
|
color: var(--td-text-color-secondary);
|
|
}
|
|
|
|
.brand-mark.large {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
/* ==================== Upload ==================== */
|
|
.upload-page-body,
|
|
.history-page-body {
|
|
min-height: 100%;
|
|
padding: 24px 32px;
|
|
}
|
|
|
|
.upload-page-body {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.upload-zone {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 180px;
|
|
padding: 32px 24px;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
background: var(--td-bg-color-container);
|
|
border: 1px dashed var(--td-border-color);
|
|
border-radius: var(--td-radius-large);
|
|
cursor: pointer;
|
|
transition: all var(--td-transition);
|
|
}
|
|
|
|
.upload-zone:hover,
|
|
.upload-zone.dragover {
|
|
background: var(--td-brand-color-light);
|
|
border-color: var(--td-brand-color);
|
|
}
|
|
|
|
.upload-zone.dragover {
|
|
border-style: solid;
|
|
}
|
|
|
|
.upload-zone.disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.upload-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 12px;
|
|
color: var(--td-brand-color);
|
|
font-size: 24px;
|
|
background: var(--td-brand-color-light);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.upload-zone h3 {
|
|
margin: 0 0 8px;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.upload-zone p {
|
|
margin: 0 0 4px;
|
|
color: var(--td-text-color-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.upload-hint {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-top: 0 !important;
|
|
color: var(--td-brand-color) !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.upload-zone-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.remote-run-trigger {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.license-dialog-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.license-dialog-text {
|
|
margin: 0;
|
|
color: var(--td-text-color-secondary);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.license-key-label {
|
|
padding: 8px 10px;
|
|
color: var(--td-brand-color);
|
|
font-family: Consolas, "Courier New", monospace;
|
|
font-size: 13px;
|
|
background: var(--td-brand-color-light);
|
|
border: 1px solid var(--td-brand-color-focus);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
|
|
.license-dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.file-list {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.file-list-header,
|
|
.file-list-footer,
|
|
.upload-stats,
|
|
.upload-stats-item,
|
|
.file-item,
|
|
.file-item-status,
|
|
.card-header,
|
|
.card-header-left,
|
|
.card-header-right,
|
|
.total-progress-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.file-list-header,
|
|
.file-list-footer,
|
|
.card-header,
|
|
.total-progress-header {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.file-list-header {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.file-list-header h4 {
|
|
margin: 0;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-list-footer {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
#fileCount {
|
|
color: var(--td-text-color-secondary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.file-items {
|
|
max-height: 240px;
|
|
margin-top: 20px;
|
|
overflow-y: auto;
|
|
background: var(--td-bg-color-container);
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
|
|
.file-item {
|
|
position: relative;
|
|
min-height: 44px;
|
|
padding: 10px 16px;
|
|
flex-wrap: wrap;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 13px;
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
transition: background var(--td-transition);
|
|
}
|
|
|
|
.file-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.file-item:hover {
|
|
background: var(--td-bg-color-container-hover);
|
|
}
|
|
|
|
.file-item.uploading {
|
|
background: var(--td-brand-color-light);
|
|
}
|
|
|
|
.file-item.uploaded {
|
|
background: var(--td-success-color-light);
|
|
}
|
|
|
|
.file-item.error {
|
|
background: var(--td-error-color-light);
|
|
}
|
|
|
|
.file-item-icon {
|
|
flex: 0 0 auto;
|
|
margin-right: 10px;
|
|
color: var(--td-brand-color);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.file-item-name {
|
|
min-width: 0;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.file-item-size {
|
|
flex: 0 0 auto;
|
|
margin-left: 8px;
|
|
color: var(--td-text-color-placeholder);
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.file-item-status {
|
|
flex: 0 0 auto;
|
|
gap: 6px;
|
|
margin-left: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.file-item-status.pending {
|
|
color: var(--td-text-color-placeholder);
|
|
}
|
|
|
|
.file-item-status.uploading {
|
|
color: var(--td-brand-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-item-status.uploaded {
|
|
color: var(--td-success-color);
|
|
}
|
|
|
|
.file-item-status.error {
|
|
color: var(--td-error-color);
|
|
}
|
|
|
|
.file-progress {
|
|
width: 100%;
|
|
height: 3px;
|
|
margin-top: 8px;
|
|
overflow: hidden;
|
|
background: var(--td-bg-color-component);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.file-progress-bar {
|
|
height: 100%;
|
|
background: var(--td-brand-color);
|
|
border-radius: 2px;
|
|
transition: width 0.2s ease;
|
|
}
|
|
|
|
.file-item.uploaded .file-progress-bar {
|
|
background: var(--td-success-color);
|
|
}
|
|
|
|
.file-item.error .file-progress-bar {
|
|
background: var(--td-error-color);
|
|
}
|
|
|
|
.total-progress {
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.total-progress-header {
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.total-progress-header .label {
|
|
color: var(--td-text-color-secondary);
|
|
}
|
|
|
|
.total-progress-header .percent {
|
|
color: var(--td-brand-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.total-progress-bar {
|
|
height: 6px;
|
|
overflow: hidden;
|
|
background: var(--td-bg-color-component);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.total-progress-bar-inner {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--td-brand-color), #618dff);
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.upload-stats {
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
padding: 12px 16px;
|
|
font-size: 13px;
|
|
background: var(--td-bg-color-secondarycontainer);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
|
|
.upload-stats-item {
|
|
gap: 6px;
|
|
}
|
|
|
|
.upload-stats-item .count {
|
|
color: var(--td-text-color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.upload-stats-item.success .count {
|
|
color: var(--td-success-color);
|
|
}
|
|
|
|
.upload-stats-item.error .count {
|
|
color: var(--td-error-color);
|
|
}
|
|
|
|
.process-section {
|
|
min-height: 0;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.upload-page-body > .process-section {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.upload-process-card {
|
|
background: var(--td-bg-color-container);
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-large);
|
|
transition: all var(--td-transition);
|
|
}
|
|
|
|
.card-header {
|
|
min-height: 58px;
|
|
padding: 16px 20px;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.card-header-left,
|
|
.card-header-right {
|
|
gap: 12px;
|
|
}
|
|
|
|
.card-title {
|
|
color: var(--td-text-color-primary);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 20px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.process-status {
|
|
padding: 4px 12px;
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
background: var(--td-brand-color);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.process-status.processing {
|
|
animation: status-pulse 1.5s infinite;
|
|
}
|
|
|
|
.process-status.completed {
|
|
background: var(--td-success-color);
|
|
}
|
|
|
|
.process-status.failed {
|
|
background: var(--td-error-color);
|
|
}
|
|
|
|
.task-alert {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.log-container {
|
|
height: clamp(200px, calc(100vh - 400px), 520px);
|
|
min-height: 180px;
|
|
margin-top: 16px;
|
|
padding: 16px;
|
|
overflow: auto;
|
|
background: var(--td-bg-color-page);
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-default);
|
|
scrollbar-color: var(--td-scrollbar-color) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.process-section.finished .log-container {
|
|
height: clamp(180px, calc(100vh - 460px), 380px);
|
|
min-height: 160px;
|
|
}
|
|
|
|
.upload-page-body > .process-section .upload-process-card {
|
|
display: flex;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.upload-page-body > .process-section .card-body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.upload-page-body > .process-section .log-container {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.log-content {
|
|
margin: 0;
|
|
color: var(--td-text-color-secondary);
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
@keyframes status-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
/* ==================== History ==================== */
|
|
.page-loading {
|
|
display: grid;
|
|
min-height: 220px;
|
|
place-items: center;
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 220px;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
color: var(--td-text-color-placeholder);
|
|
}
|
|
|
|
.empty-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 42px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.empty-state p {
|
|
margin: 0;
|
|
}
|
|
|
|
.history-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.history-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 20px;
|
|
background: var(--td-bg-color-container);
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-default);
|
|
transition: all var(--td-transition);
|
|
}
|
|
|
|
.history-item:hover {
|
|
border-color: var(--td-brand-color);
|
|
box-shadow: var(--td-shadow-1);
|
|
}
|
|
|
|
.history-status {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex: 0 0 auto;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.history-status.completed {
|
|
background: var(--td-success-color);
|
|
}
|
|
|
|
.history-status.failed {
|
|
background: var(--td-error-color);
|
|
}
|
|
|
|
.history-status.processing {
|
|
background: var(--td-brand-color);
|
|
animation: status-pulse 1s infinite;
|
|
}
|
|
|
|
.history-status.pending {
|
|
background: var(--td-text-color-placeholder);
|
|
}
|
|
|
|
.history-info {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.history-id {
|
|
overflow: hidden;
|
|
margin-bottom: 4px;
|
|
color: var(--td-text-color-primary);
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.history-meta {
|
|
color: var(--td-text-color-placeholder);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.record-size {
|
|
color: var(--td-text-color-secondary);
|
|
font-family: var(--td-font-family-mono);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.history-actions {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.history-detail-modal {
|
|
width: min(900px, calc(100vw - 48px));
|
|
}
|
|
|
|
.detail-info-list {
|
|
overflow: hidden;
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
|
|
.detail-info-row {
|
|
display: grid;
|
|
grid-template-columns: 132px minmax(0, 1fr);
|
|
min-height: 44px;
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.detail-info-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.detail-info-label,
|
|
.detail-info-value {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
padding: 10px 14px;
|
|
}
|
|
|
|
.detail-info-label {
|
|
color: var(--td-text-color-secondary);
|
|
font-weight: 500;
|
|
background: var(--td-bg-color-secondarycontainer);
|
|
border-right: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.detail-info-value {
|
|
color: var(--td-text-color-primary);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.detail-info-value.monospace,
|
|
.detail-info-value.path-value {
|
|
font-family: var(--td-font-family-mono);
|
|
}
|
|
|
|
.detail-info-value.muted {
|
|
color: var(--td-text-color-placeholder);
|
|
}
|
|
|
|
.detail-info-row.error-row .detail-info-value {
|
|
color: var(--td-error-color);
|
|
}
|
|
|
|
.history-file-browser {
|
|
min-height: 280px;
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-default);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.history-file-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
min-height: 46px;
|
|
padding: 8px 12px;
|
|
background: var(--td-bg-color-secondarycontainer);
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.history-file-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.breadcrumb-link {
|
|
max-width: 180px;
|
|
padding: 2px 4px;
|
|
overflow: hidden;
|
|
color: var(--td-brand-color);
|
|
font: inherit;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.breadcrumb-link:hover {
|
|
color: var(--td-brand-color-hover);
|
|
}
|
|
|
|
.breadcrumb-separator {
|
|
flex: 0 0 auto;
|
|
color: var(--td-text-color-placeholder);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.history-file-toolbar-actions {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.history-file-list {
|
|
max-height: 360px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.history-file-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
min-height: 58px;
|
|
padding: 9px 12px;
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.history-file-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.history-file-main {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 10px;
|
|
}
|
|
|
|
.history-file-icon {
|
|
flex: 0 0 auto;
|
|
font-size: 20px;
|
|
color: var(--td-text-color-secondary);
|
|
}
|
|
|
|
.history-file-icon.dir {
|
|
color: var(--td-warning-color);
|
|
}
|
|
|
|
.history-file-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
gap: 2px;
|
|
}
|
|
|
|
.history-file-name {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
color: var(--td-text-color-primary);
|
|
font: inherit;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.history-file-name:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.history-file-name:not(:disabled):hover {
|
|
color: var(--td-brand-color);
|
|
}
|
|
|
|
.history-file-name:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.history-file-meta {
|
|
overflow: hidden;
|
|
color: var(--td-text-color-placeholder);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.history-file-actions {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.log-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.colored-log-panel {
|
|
height: 300px;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
color: var(--td-text-color-primary);
|
|
background: var(--td-bg-color-page);
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-default);
|
|
scrollbar-color: var(--td-scrollbar-color) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.colored-log-panel::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.colored-log-panel::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.colored-log-panel::-webkit-scrollbar-thumb {
|
|
background: var(--td-scrollbar-color);
|
|
border: 2px solid var(--td-bg-color-page);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.colored-log-panel::-webkit-scrollbar-thumb:hover {
|
|
background: var(--td-text-color-placeholder);
|
|
}
|
|
|
|
.colored-log-panel::-webkit-scrollbar-corner {
|
|
background: var(--td-bg-color-page);
|
|
}
|
|
|
|
.colored-log-content {
|
|
display: block;
|
|
min-width: max-content;
|
|
margin: 0;
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
white-space: pre;
|
|
}
|
|
|
|
.colored-log-line {
|
|
display: block;
|
|
color: var(--td-text-color-primary);
|
|
white-space: pre;
|
|
}
|
|
|
|
.colored-log-line.log-level-info {
|
|
color: var(--td-text-color-primary);
|
|
}
|
|
|
|
.colored-log-line.log-level-success {
|
|
color: var(--td-success-color);
|
|
}
|
|
|
|
.colored-log-line.log-level-warning {
|
|
color: var(--td-warning-color);
|
|
}
|
|
|
|
.colored-log-line.log-level-error {
|
|
color: var(--td-error-color);
|
|
}
|
|
|
|
.script-log {
|
|
height: 100%;
|
|
}
|
|
|
|
.download-complete-content {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.download-complete-content p {
|
|
margin: 0;
|
|
}
|
|
|
|
.download-path-link {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
color: var(--td-brand-color);
|
|
font: inherit;
|
|
font-family: var(--td-font-family-mono);
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.download-path-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ==================== Settings ==================== */
|
|
.settings-workspace {
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px 18px 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-tabs-card {
|
|
display: flex;
|
|
height: 100%;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.settings-tabs-card > .n-card__content,
|
|
.settings-tabs-card > .n-card-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: 6px 18px 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-tabs-card > .n-card__content > .n-tabs,
|
|
.settings-tabs-card > .n-card-content > .n-tabs {
|
|
height: 100%;
|
|
}
|
|
|
|
.settings-tabs {
|
|
display: flex;
|
|
height: 100%;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.settings-tabs .n-tab-pane {
|
|
height: 100%;
|
|
padding-top: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-tabs .n-tabs-pane-wrapper {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.settings-section-grid,
|
|
.settings-rules-grid {
|
|
display: grid;
|
|
align-items: start;
|
|
gap: 18px;
|
|
}
|
|
|
|
.settings-section-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
height: 100%;
|
|
min-height: 0;
|
|
padding-right: 6px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
scrollbar-color: var(--td-scrollbar-color) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.settings-connection-stack {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.settings-section-grid::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.settings-section-grid::-webkit-scrollbar-thumb {
|
|
background: var(--td-scrollbar-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.settings-section-grid::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.settings-rules-grid {
|
|
grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.4fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
align-items: stretch;
|
|
height: 100%;
|
|
min-height: 0;
|
|
padding-right: 6px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
scrollbar-color: var(--td-scrollbar-color) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.settings-rules-grid::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.settings-rules-grid::-webkit-scrollbar-thumb {
|
|
background: var(--td-scrollbar-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.settings-rules-grid::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.settings-rules-grid > .work-card {
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-security-panel {
|
|
max-width: 560px;
|
|
}
|
|
|
|
.settings-token-panel {
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.filter-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
min-height: 28px;
|
|
}
|
|
|
|
.form-hint {
|
|
margin: 0;
|
|
color: var(--td-text-color-placeholder);
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.settings-compact-divider {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.scheduler-dir-editor {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.scheduler-dir-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
min-height: 28px;
|
|
}
|
|
|
|
.scheduler-status-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
background: var(--td-bg-color-secondarycontainer);
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
|
|
.scheduler-status-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.scheduler-status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.scheduler-status-grid > div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.scheduler-status-grid span {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
color: var(--td-text-color-placeholder);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.scheduler-status-grid strong {
|
|
display: block;
|
|
overflow: hidden;
|
|
color: var(--td-text-color-primary);
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.scheduler-directory-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 6px;
|
|
max-height: 96px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.scheduler-directory-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-width: 0;
|
|
gap: 8px;
|
|
padding: 5px 8px;
|
|
background: var(--td-bg-color-container);
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-small);
|
|
}
|
|
|
|
.scheduler-directory-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--td-text-color-primary);
|
|
font-family: var(--td-font-family-mono);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.field-mapping-card {
|
|
display: flex !important;
|
|
height: 100%;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.field-mapping-card > .n-card-header {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: flex-start;
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.field-mapping-card > .n-card-header .n-card-header__main {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.field-mapping-card > .n-card__content,
|
|
.field-mapping-card > .n-card-content {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-direction: column;
|
|
height: 0;
|
|
min-height: 0;
|
|
max-height: none;
|
|
padding: 12px 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.field-mapping-card > .n-card__footer {
|
|
flex: 0 0 auto;
|
|
padding: 12px 20px;
|
|
background: var(--td-bg-color-container);
|
|
border-top: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.field-card-header {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.field-card-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-width: 0;
|
|
gap: 16px;
|
|
}
|
|
|
|
.field-card-title {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
color: var(--td-text-color-primary);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.field-card-title > span,
|
|
.field-card-title .n-tag {
|
|
flex: 0 0 auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.field-search {
|
|
flex: 1 1 240px;
|
|
width: auto;
|
|
min-width: 180px;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.field-mapping-scroll {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
height: auto;
|
|
max-height: none;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 0 4px 4px 0;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
scrollbar-color: var(--td-scrollbar-color) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.field-mapping-scroll::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.field-mapping-scroll::-webkit-scrollbar-thumb {
|
|
background: var(--td-scrollbar-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.field-mapping-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.field-mapping-item {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
padding: 32px 14px 12px;
|
|
background: var(--td-bg-color-container);
|
|
border: 1px solid var(--td-border-color);
|
|
border-radius: var(--td-radius-default);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
transition: box-shadow var(--td-transition);
|
|
}
|
|
|
|
.field-mapping-item:hover {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.field-mapping-number {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
z-index: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: #ffffff;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
background: var(--td-brand-color);
|
|
border-radius: var(--td-radius-small);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.field-remove-button {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.field-mapping-header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
}
|
|
|
|
.field-name-control {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-bottom: 0;
|
|
padding-left: 28px;
|
|
}
|
|
|
|
.field-type-control {
|
|
flex: 0 0 160px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.field-name-control .n-form-item-label,
|
|
.field-type-control .n-form-item-label {
|
|
min-height: 20px;
|
|
color: var(--td-text-color-secondary);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.extract-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.extract-list-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.extract-list-header > span {
|
|
flex: 0 0 auto;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.extract-add-group {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.extract-tree {
|
|
max-height: 120px;
|
|
margin-bottom: 8px;
|
|
overflow-y: auto;
|
|
background: var(--td-bg-color-secondarycontainer);
|
|
border: 1px solid var(--td-border-color-light);
|
|
border-radius: var(--td-radius-small);
|
|
}
|
|
|
|
.extract-tree-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
min-height: 32px;
|
|
padding: 6px 10px;
|
|
color: var(--td-text-color-primary);
|
|
font-size: 13px;
|
|
border-bottom: 1px solid var(--td-border-color-light);
|
|
transition: background var(--td-transition);
|
|
}
|
|
|
|
.extract-tree-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.extract-tree-item:hover {
|
|
background: var(--td-bg-color-container-hover);
|
|
}
|
|
|
|
.tree-text {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tree-text::before {
|
|
content: "└";
|
|
flex: 0 0 auto;
|
|
color: var(--td-text-color-placeholder);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.extract-empty {
|
|
margin-bottom: 8px;
|
|
padding: 12px;
|
|
color: var(--td-text-color-placeholder);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
border: 1px dashed var(--td-border-color);
|
|
border-radius: var(--td-radius-small);
|
|
}
|
|
|
|
/* ==================== Script editor ==================== */
|
|
.script-page-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 0 !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.script-editor-container {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
margin: 16px 16px 0;
|
|
overflow: hidden;
|
|
background: var(--td-bg-color-container);
|
|
border: 1px solid var(--td-border-color);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
|
|
.script-editor {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.script-status-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-shrink: 0;
|
|
gap: 16px;
|
|
margin: 8px 16px 16px;
|
|
padding: 6px 16px;
|
|
color: var(--td-text-color-secondary);
|
|
font-size: 12px;
|
|
background: var(--td-bg-color-secondarycontainer);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
|
|
.script-status-bar span:first-child,
|
|
.script-status-bar span:last-child {
|
|
font-family: var(--td-font-family-mono);
|
|
}
|
|
|
|
.script-status-bar span:nth-child(2) {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.script-process-section {
|
|
flex: 0 1 clamp(168px, 26vh, 280px);
|
|
min-height: 148px;
|
|
margin: 8px 16px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.script-process-card {
|
|
display: flex;
|
|
height: 100%;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.script-process-section .card-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: 12px 16px 16px;
|
|
}
|
|
|
|
.script-log {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ==================== Responsive ==================== */
|
|
@media (max-width: 1200px) {
|
|
.settings-section-grid,
|
|
.settings-rules-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.settings-rules-grid {
|
|
grid-template-rows: auto minmax(520px, 1fr);
|
|
align-items: start;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.settings-tabs .n-tab-pane {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.field-mapping-card {
|
|
height: min(760px, calc(100vh - 260px));
|
|
min-height: 520px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.topbar,
|
|
.page-header {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.page-header-content {
|
|
gap: 8px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.page-subtitle,
|
|
.header-info-text {
|
|
display: none;
|
|
}
|
|
|
|
.upload-page-body,
|
|
.history-page-body,
|
|
.settings-workspace {
|
|
padding: 16px;
|
|
}
|
|
|
|
.history-item {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.history-actions {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.history-file-toolbar,
|
|
.history-file-row {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.history-file-toolbar-actions,
|
|
.history-file-actions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.card-actions,
|
|
.field-card-title-row,
|
|
.extract-list-header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.field-mapping-header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.field-name-control {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.field-type-control,
|
|
.field-search,
|
|
.extract-add-group {
|
|
width: 100%;
|
|
flex: none;
|
|
}
|
|
|
|
.scheduler-status-grid,
|
|
.scheduler-directory-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|