diff --git a/src/assets/styles/neumorphism.scss b/src/assets/styles/neumorphism.scss index 9990be8..eef46d7 100644 --- a/src/assets/styles/neumorphism.scss +++ b/src/assets/styles/neumorphism.scss @@ -3,17 +3,17 @@ * Keep surfaces on one base color and express hierarchy through paired shadows. */ :root { - --neu-bg: #e0e5ec; - --neu-shadow-light: rgba(255, 255, 255, 0.82); - --neu-shadow-dark: rgba(163, 177, 198, 0.58); - --neu-text-primary: #344054; - --neu-text-secondary: #566273; - --neu-text-muted: #7a8797; - --neu-primary: #465a9b; - --neu-primary-strong: #38497f; - --neu-danger: #b84a52; - --neu-success: #397a68; - --neu-warning: #a66a2c; + --neu-bg: #e7ecef; + --neu-shadow-light: rgba(255, 255, 255, 0.88); + --neu-shadow-dark: rgba(164, 178, 187, 0.56); + --neu-text-primary: #263840; + --neu-text-secondary: #52636b; + --neu-text-muted: #839198; + --neu-primary: #167c80; + --neu-primary-strong: #0e5e63; + --neu-danger: #bd5e59; + --neu-success: #2d7d68; + --neu-warning: #a96d2b; --neu-radius-sm: 8px; --neu-radius-md: 12px; --neu-radius-lg: 16px; @@ -22,7 +22,7 @@ --neu-shadow-raised-hover: 9px 9px 18px var(--neu-shadow-dark), -9px -9px 18px var(--neu-shadow-light); --neu-shadow-inset: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light); --neu-shadow-pressed: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light); - --neu-focus-ring: 0 0 0 2px rgba(70, 90, 155, 0.32); + --neu-focus-ring: 0 0 0 2px rgba(22, 124, 128, 0.28); --el-bg-color: var(--neu-bg); --el-bg-color-page: var(--neu-bg); @@ -72,18 +72,18 @@ } html.dark { - --neu-bg: #292d34; - --neu-shadow-light: rgba(69, 75, 86, 0.72); - --neu-shadow-dark: rgba(12, 14, 18, 0.72); - --neu-text-primary: #edf0f5; - --neu-text-secondary: #c4cad4; - --neu-text-muted: #9aa3b1; - --neu-primary: #8999d5; - --neu-primary-strong: #9eabe0; - --neu-danger: #df858b; - --neu-success: #71b6a2; - --neu-warning: #d7a164; - --neu-focus-ring: 0 0 0 2px rgba(137, 153, 213, 0.36); + --neu-bg: #293337; + --neu-shadow-light: rgba(74, 87, 92, 0.68); + --neu-shadow-dark: rgba(11, 16, 18, 0.78); + --neu-text-primary: #edf4f3; + --neu-text-secondary: #c4d0d0; + --neu-text-muted: #98a7a8; + --neu-primary: #6fc3be; + --neu-primary-strong: #8bd3cd; + --neu-danger: #e28a83; + --neu-success: #73bea2; + --neu-warning: #d8a465; + --neu-focus-ring: 0 0 0 2px rgba(111, 195, 190, 0.34); --el-bg-color: var(--neu-bg); --el-bg-color-page: var(--neu-bg); --el-bg-color-overlay: var(--neu-bg); @@ -855,3 +855,520 @@ body { max-width: calc(100vw - 28px); } } + +@media (max-width: 480px) { + #app .page-container .row-cards { + grid-template-columns: 1fr; + } +} + +/* Cockpit keeps a separate full-screen shell, but uses the same tactile + * language as the rest of the application. */ +#app .cockpit-shell .header-container, +#app .cockpit-shell .page-container, +#app .cockpit-shell .page-container > .left-container, +#app .cockpit-shell .page-container > .center-container, +#app .cockpit-shell .page-container > .right-container, +#app .cockpit-shell .page-container .task-container, +#app .cockpit-shell .page-container .alarm-container, +#app .cockpit-shell .page-container .map-container, +#app .cockpit-shell .page-container .map-box, +#app .cockpit-shell .page-container .video-container, +#app .cockpit-shell .page-container .single-video-container { + border-color: transparent !important; + background: var(--neu-bg) !important; + color: var(--neu-text-primary) !important; +} + +#app .cockpit-shell .header-container { + margin: 0; + padding: 0 18px; +} + +#app .cockpit-shell .application-title, +#app .cockpit-shell .date, +#app .cockpit-shell .container-title, +#app .cockpit-shell .map-container .title, +#app .cockpit-shell .page-container .title, +#app .cockpit-shell .page-container .robot-state { + color: var(--neu-primary) !important; +} + +#app .cockpit-shell .binary-strip { + color: var(--neu-text-muted) !important; + opacity: 0.65; +} + +#app .cockpit-shell .nav-btn, +#app .cockpit-shell .page-container .robot-box .robot, +#app .cockpit-shell .page-container .task-box, +#app .cockpit-shell .page-container .alarm-box, +#app .cockpit-shell .page-container .btn-container { + border: 0 !important; + border-radius: var(--neu-radius-sm) !important; + background: var(--neu-bg) !important; + color: var(--neu-text-secondary) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .cockpit-shell .nav-btn:hover, +#app .cockpit-shell .nav-btn.active, +#app .cockpit-shell .page-container .robot-box .robot:hover, +#app .cockpit-shell .page-container .robot-box .robot.active, +#app .cockpit-shell .page-container .btn-container:hover { + border-color: transparent !important; + background: var(--neu-bg) !important; + color: var(--neu-primary) !important; + box-shadow: var(--neu-shadow-pressed) !important; +} + +#app .cockpit-shell .page-container .robot-box .bot-name, +#app .cockpit-shell .page-container .robot-box .robot .bot-name, +#app .cockpit-shell .page-container .item-title, +#app .cockpit-shell .page-container .item-detail, +#app .cockpit-shell .page-container .alarm-info { + color: var(--neu-text-secondary) !important; +} + +#app .cockpit-shell .page-container .right-container, +#app .cockpit-shell .page-container .left-container { + padding: 16px !important; +} + +/* The flow header and side panels are framed tools rather than flat white + * strips, which keeps the editor legible while matching the application shell. */ +#app .page__container > .el-header, +#app .page__container > .container > .el-aside, +#app .page__container > .container > .el-main { + border-color: transparent !important; + background: var(--neu-bg) !important; + color: var(--neu-text-primary); +} + +#app .page__container > .container > .el-aside { + border-radius: var(--neu-radius-md) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .page .flow-node-card, +#app .page .group__container, +#app .page .node__container { + border-color: transparent !important; + background: var(--neu-bg); + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .page .terminal-node__icon, +#app .page .condition-summary__item, +#app .page .loop-body-count, +#app .page .child__container { + border-color: transparent !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-inset) !important; +} + +#app .page .flow-node-card, +#app .page .node__container { + border-left-color: var(--node-accent, var(--neu-primary)) !important; +} + +#app .page .terminal-node__title, +#app .page .condition-summary__title, +#app .page .loop-body-title { + color: var(--neu-text-primary) !important; +} + +#app .page .terminal-node__description, +#app .page .condition-summary__text, +#app .page .flow-node-executor { + color: var(--neu-text-muted) !important; +} + +/* Authentication and lock views use the same neutral canvas on every entry + * point, including the native controls rendered outside Element Plus. */ +#app .login, +#app .register, +#app .lock-container { + padding: 24px; + background: var(--neu-bg) !important; + color: var(--neu-text-primary) !important; +} + +#app .login-form, +#app .register-form, +#app .lock-card { + overflow: hidden; + box-shadow: var(--neu-shadow-raised-hover), var(--neu-shadow-inset) !important; +} + +#app .login-form .el-form-item, +#app .register-form .el-form-item { + margin-bottom: 19px; +} + +#app .login-form .el-button--primary, +#app .register-form .el-button--primary, +#app .unlock-btn { + min-height: 44px; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-primary) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .login-form .el-button--primary:hover, +#app .register-form .el-button--primary:hover, +#app .unlock-btn:hover:not(:disabled) { + background: var(--neu-primary-strong) !important; +} + +#app .lock-icon { + background: var(--neu-bg) !important; + color: var(--neu-primary) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +@media (max-width: 900px) { + #app .cockpit-shell .application-title { + font-size: 17px; + letter-spacing: 1px; + } + + #app .cockpit-shell .binary-strip { + display: none; + } +} + +/* Shared business surfaces. These selectors intentionally target the page + * shells used across modules so local feature styles can keep their layout. */ +#app .app-main > .app-container, +#app .app-main > .page-container, +#app .app-main > .container, +#app .app-main > .page, +#app .app-main > .robot-device-page, +#app .app-main > .robot-page, +#app .app-main > .is-container, +#app .app-main > .im-container, +#app .app-main > .main-workspace, +#app .app-main > .box-container { + min-height: 100%; + border: 0 !important; + border-radius: var(--neu-radius-lg) !important; + background: var(--neu-bg) !important; + color: var(--neu-text-primary); +} + +#app .app-main > .app-container { + padding: 22px !important; + box-shadow: var(--neu-shadow-inset) !important; +} + +#app .app-main > .page-container, +#app .app-main > .container, +#app .app-main > .main-workspace, +#app .app-main > .box-container { + padding: 18px !important; +} + +#app .app-container > .el-row.mb8, +#app .app-container .top-right-btn, +#app .app-container .table-search, +#app .app-container .search-form, +#app .app-container .filter-container { + border: 0 !important; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .app-container > .el-row.mb8 { + align-items: center; + min-height: 54px; + margin: 0 0 16px !important; + padding: 8px 12px; +} + +#app .app-container .table-search, +#app .app-container .search-form, +#app .app-container .filter-container { + margin-bottom: 16px; + padding: 12px 16px; +} + +#app .app-container .el-table, +#app .app-container .el-table__inner-wrapper, +#app .app-container .el-pagination, +#app .app-container .pagination-container { + border-radius: var(--neu-radius-md) !important; +} + +#app .app-container .el-table { + overflow: hidden; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .page-container > .main-layout, +#app .page-container .left-panel, +#app .page-container .right-panel, +#app .page-container .left-container, +#app .page-container .center-container, +#app .page-container .right-container, +#app .page-container .context-container, +#app .page-container .taskList-container, +#app .page-container .run-log-container, +#app .page-container .report-container, +#app .page-container .test-container, +#app .page-container .indicator-container, +#app .page-container .score-table-container, +#app .page-container .card-container, +#app .page-container .tree-container { + border: 0 !important; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .page-container > .main-layout { + padding: 14px !important; +} + +#app .app-main > .container > .el-table, +#app .app-main > .container .schemaList, +#app .app-main > .container .context-container, +#app .app-main > .container .report-container, +#app .app-main > .container .metrics-container, +#app .app-main > .container .page-header { + border: 0 !important; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .app-main > .container > .el-table { + overflow: hidden; +} + +#app .app-main > .container .page-header { + margin-bottom: 18px; + padding: 12px 16px !important; +} + +/* Layout wrappers stay open so individual panels retain a clear hierarchy. */ +#app .page-container > .main-layout, +#app .app-main > .container .context-container, +#app .app-main > .container .metrics-container { + border: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +#app aside, +#app .sub-navbar, +#app .form-header, +#app .copyright, +#app .topmenu-container, +#app .topbar-menu { + border-color: transparent !important; + background: var(--neu-bg) !important; + color: var(--neu-text-secondary) !important; +} + +#app aside, +#app .sub-navbar, +#app .form-header { + border-radius: var(--neu-radius-sm) !important; + box-shadow: var(--neu-shadow-inset) !important; +} + +#app .copyright { + box-shadow: inset 0 4px 8px -10px var(--neu-shadow-dark); +} + +#app .page-container .row-cards { + gap: 18px; +} + +#app .page-container .row-cards .card, +#app .robot-device-page .status-strip { + border: 0 !important; + border-radius: var(--neu-radius-md) !important; + background: var(--neu-bg) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .page-container .row-cards .card { + min-height: 96px; + padding: 14px 20px !important; +} + +#app .page-container .row-cards .stat-label, +#app .page-container .row-cards .stat-number, +#app .robot-device-page .status-strip strong, +#app .robot-device-page .status-strip span { + color: var(--neu-text-primary) !important; +} + +#app .page-container .row-cards .stat-label, +#app .robot-device-page .status-strip span { + color: var(--neu-text-muted) !important; +} + +#app .page-container .row-cards .icon-container, +#app .robot-device-page .device-icon { + border-radius: var(--neu-radius-sm) !important; + background: var(--neu-bg) !important; + color: var(--neu-primary) !important; + box-shadow: var(--neu-shadow-inset) !important; +} + +#app .robot-device-page .status-strip { + margin-bottom: 18px; + padding: 16px 20px; +} + +#app .robot-device-page .status-strip strong.online { + color: var(--neu-success) !important; +} + +#app .robot-device-page .status-strip strong.fault { + color: var(--neu-danger) !important; +} + +#app .page-heading h2, +#app .flow-heading__name, +#app .container-title, +#app .section-title, +#app .panel-title { + color: var(--neu-text-primary) !important; +} + +#app .page-heading p, +#app .robot-selector, +#app .section-subtitle, +#app .muted, +#app .text-muted { + color: var(--neu-text-muted) !important; +} + +/* Operator screens and editors use denser nested panels. */ +#app .page__container, +#app .page__container > .container, +#app .page__container .flow__container, +#app .canvas-toolbar, +#app .flow-heading, +#app .btn__container, +#app .flow__container .vue-flow__controls, +#app .monitor-container, +#app .robot-container, +#app .video-container, +#app .voice-container, +#app .alarm-container, +#app .ocr-container, +#app .model-container, +#app .stream-container, +#app .jointControl-container, +#app .microphone-container, +#app .speech-container, +#app .chat-container { + border-color: transparent !important; + background: var(--neu-bg) !important; + color: var(--neu-text-primary); +} + +#app .page__container .canvas-toolbar, +#app .page__container .flow-heading, +#app .page__container .btn__container { + border-radius: var(--neu-radius-md) !important; + box-shadow: var(--neu-shadow-raised-sm) !important; +} + +#app .page__container .flow__container { + border-radius: var(--neu-radius-md) !important; + box-shadow: var(--neu-shadow-inset) !important; +} + +#app .el-empty, +#app .el-result, +#app .el-statistic, +#app .el-descriptions, +#app .el-collapse, +#app .el-timeline, +#app .el-upload, +#app .el-transfer { + color: var(--neu-text-secondary); +} + +#app .el-form-item__label, +#app .el-checkbox__label, +#app .el-radio__label { + color: var(--neu-text-secondary) !important; +} + +#app .el-table .el-table__cell { + color: var(--neu-text-secondary) !important; +} + +#app .el-table .el-table__body tr { + transition: transform 150ms ease, box-shadow 150ms ease; +} + +#app .el-table .el-table__body tr:hover { + transform: translateX(2px); +} + +#app .el-loading-mask { + background: color-mix(in srgb, var(--neu-bg) 82%, transparent) !important; + backdrop-filter: blur(2px); +} + +/* Consistent focus treatment for native controls in custom pages. */ +#app input:not(.el-input__inner), +#app textarea, +#app select { + border: 0; + border-radius: var(--neu-radius-sm); + background: var(--neu-bg); + color: var(--neu-text-primary); + box-shadow: var(--neu-shadow-inset); +} + +#app button:not(.el-button):not(.unlock-btn) { + color: var(--neu-text-secondary); +} + +#app button:not(.el-button):not(.unlock-btn):hover { + color: var(--neu-primary); +} + +@media (max-width: 768px) { + #app .app-main > .app-container, + #app .app-main > .page-container, + #app .app-main > .main-workspace, + #app .app-main > .box-container { + padding: 14px !important; + border-radius: var(--neu-radius-md) !important; + } + + #app .app-container > .el-row.mb8 { + gap: 8px; + height: auto; + } + + #app .page-container .row-cards { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + #app .robot-device-page .status-strip { + align-items: stretch; + flex-wrap: wrap; + gap: 14px; + } + + #app .robot-device-page .status-strip .filters { + width: 100%; + justify-content: stretch; + } + + #app .robot-device-page .status-strip .filters > * { + flex: 1 1 180px; + } +} diff --git a/src/views/device/register/index.vue b/src/views/device/register/index.vue index b3913fb..307936e 100644 --- a/src/views/device/register/index.vue +++ b/src/views/device/register/index.vue @@ -56,10 +56,10 @@ - - + +