Stev_Wang
073d210a92
React 19 + Vite 6 + Router 7 + TanStack Query + Zustand；Semi 二次封装与 Remix 图标统一出口；顶部模块 + 左侧功能菜单布局、Cloud Blue 主题、登录页与 401/403/404/500 页面；请求层含 token 注入、单飞刷新与统一错误提示。
476 lines
8.9 KiB
CSS
476 lines
8.9 KiB
CSS
/* 方向 A · 云白蓝：白顶栏 + 左栏 + 浅灰工作区 */
|
|
|
|
.lx-shell {
|
|
display: flex;
|
|
height: 100%;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
background: var(--lx-color-bg-app);
|
|
}
|
|
|
|
/* ---------- 顶栏 ---------- */
|
|
|
|
.lx-topbar {
|
|
z-index: 20;
|
|
display: flex;
|
|
flex: 0 0 var(--lx-topbar-height);
|
|
align-items: center;
|
|
gap: var(--lx-space-6);
|
|
height: var(--lx-topbar-height);
|
|
padding: 0 var(--lx-space-6) 0 var(--lx-space-5);
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
background: var(--lx-color-bg-panel);
|
|
}
|
|
|
|
.lx-topbar__brand {
|
|
display: flex;
|
|
min-width: 184px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.lx-topbar__mark {
|
|
display: inline-flex;
|
|
width: 34px;
|
|
height: 34px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #1677ff, #4096ff);
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.lx-topbar__name {
|
|
font-size: var(--lx-font-size-lg);
|
|
font-weight: 600;
|
|
line-height: 1.15;
|
|
color: var(--lx-color-text-primary);
|
|
}
|
|
|
|
.lx-topbar__tag {
|
|
margin-top: 1px;
|
|
font-size: 10px;
|
|
line-height: 1.2;
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-topbar__brand-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.lx-topbar__modules {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: stretch;
|
|
gap: var(--lx-space-1);
|
|
}
|
|
|
|
.lx-topbar__module {
|
|
position: relative;
|
|
padding: 0 14px;
|
|
font-size: var(--lx-font-size-md);
|
|
color: var(--lx-color-text-secondary);
|
|
transition: color var(--lx-motion-fast) var(--lx-ease-out);
|
|
}
|
|
|
|
.lx-topbar__module:hover {
|
|
color: var(--lx-color-text-primary);
|
|
}
|
|
|
|
.lx-topbar__module.is-active {
|
|
color: var(--lx-color-brand);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lx-topbar__module.is-active::after {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 0;
|
|
left: 12px;
|
|
height: 2px;
|
|
border-radius: 2px 2px 0 0;
|
|
background: var(--lx-color-brand);
|
|
content: '';
|
|
}
|
|
|
|
.lx-topbar__actions {
|
|
display: flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
gap: var(--lx-space-2);
|
|
}
|
|
|
|
.lx-icon-button {
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: 32px;
|
|
height: 32px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--lx-radius-md);
|
|
color: var(--lx-color-text-secondary);
|
|
transition:
|
|
color var(--lx-motion-fast) var(--lx-ease-out),
|
|
background var(--lx-motion-fast) var(--lx-ease-out);
|
|
}
|
|
|
|
.lx-icon-button:hover {
|
|
color: var(--lx-color-text-primary);
|
|
background: var(--lx-color-bg-hover);
|
|
}
|
|
|
|
.lx-icon-button__dot {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 7px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border: 1.5px solid var(--lx-color-bg-panel);
|
|
border-radius: 50%;
|
|
background: var(--lx-color-danger);
|
|
}
|
|
|
|
/* ---------- 用户菜单 ---------- */
|
|
|
|
.lx-user {
|
|
position: relative;
|
|
}
|
|
|
|
.lx-user__trigger {
|
|
display: flex;
|
|
height: 40px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 6px 0 4px;
|
|
border-radius: var(--lx-radius-md);
|
|
transition: background var(--lx-motion-fast) var(--lx-ease-out);
|
|
}
|
|
|
|
.lx-user__trigger:hover {
|
|
background: var(--lx-color-bg-hover);
|
|
}
|
|
|
|
.lx-user__avatar {
|
|
display: inline-flex;
|
|
width: 30px;
|
|
height: 30px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: var(--lx-color-brand-soft);
|
|
color: var(--lx-color-brand);
|
|
font-size: var(--lx-font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lx-user__meta {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.lx-user__name {
|
|
font-size: var(--lx-font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--lx-color-text-primary);
|
|
}
|
|
|
|
.lx-user__role {
|
|
font-size: 11px;
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-user__chevron {
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-user__menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
width: 208px;
|
|
padding: 6px;
|
|
border: 1px solid var(--lx-color-border);
|
|
border-radius: var(--lx-radius-md);
|
|
background: var(--lx-color-bg-elevated);
|
|
box-shadow: var(--lx-shadow-overlay);
|
|
}
|
|
|
|
.lx-user__menu-header {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
margin-bottom: 4px;
|
|
font-size: var(--lx-font-size-xs);
|
|
color: var(--lx-color-text-tertiary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-user__menu-item {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 34px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 10px;
|
|
border-radius: var(--lx-radius-sm);
|
|
font-size: var(--lx-font-size-sm);
|
|
color: var(--lx-color-text-primary);
|
|
text-align: left;
|
|
}
|
|
|
|
.lx-user__menu-item:hover {
|
|
background: var(--lx-color-bg-hover);
|
|
}
|
|
|
|
/* ---------- 主体 ---------- */
|
|
|
|
.lx-shell__body {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.lx-sidebar {
|
|
display: flex;
|
|
flex: 0 0 var(--lx-sidebar-width);
|
|
width: var(--lx-sidebar-width);
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--lx-color-border);
|
|
background: var(--lx-color-bg-panel);
|
|
transition: width var(--lx-motion-base) var(--lx-ease-out);
|
|
}
|
|
|
|
.lx-shell--collapsed .lx-sidebar {
|
|
flex-basis: var(--lx-sidebar-collapsed-width);
|
|
width: var(--lx-sidebar-collapsed-width);
|
|
}
|
|
|
|
.lx-sidebar__heading {
|
|
display: flex;
|
|
height: 48px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 var(--lx-space-4) 0 var(--lx-space-5);
|
|
}
|
|
|
|
.lx-sidebar__title {
|
|
font-size: var(--lx-font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--lx-color-text-primary);
|
|
}
|
|
|
|
.lx-sidebar__toggle {
|
|
display: inline-flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--lx-radius-sm);
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-sidebar__toggle:hover {
|
|
color: var(--lx-color-text-primary);
|
|
background: var(--lx-color-bg-hover);
|
|
}
|
|
|
|
.lx-sidebar__nav {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 0 10px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.lx-sidebar__item {
|
|
display: flex;
|
|
min-height: 38px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0 12px;
|
|
border-radius: var(--lx-radius-md);
|
|
color: var(--lx-color-text-secondary);
|
|
font-size: var(--lx-font-size-sm);
|
|
transition:
|
|
color var(--lx-motion-fast) var(--lx-ease-out),
|
|
background var(--lx-motion-fast) var(--lx-ease-out);
|
|
}
|
|
|
|
.lx-sidebar__item:hover {
|
|
color: var(--lx-color-text-primary);
|
|
background: var(--lx-color-bg-hover);
|
|
}
|
|
|
|
.lx-sidebar__item.is-active {
|
|
color: var(--lx-color-brand);
|
|
background: var(--lx-color-brand-soft);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lx-sidebar__item-icon {
|
|
display: inline-flex;
|
|
flex: 0 0 18px;
|
|
}
|
|
|
|
.lx-sidebar__item-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.lx-sidebar__footer {
|
|
padding: var(--lx-space-4) var(--lx-space-5);
|
|
border-top: 1px solid var(--lx-color-border);
|
|
}
|
|
|
|
.lx-sidebar__env {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: var(--lx-font-size-xs);
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-sidebar__env-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--lx-color-success);
|
|
}
|
|
|
|
.lx-shell--collapsed .lx-sidebar__title,
|
|
.lx-shell--collapsed .lx-sidebar__item-label,
|
|
.lx-shell--collapsed .lx-sidebar__env-text {
|
|
display: none;
|
|
}
|
|
|
|
.lx-shell--collapsed .lx-sidebar__heading {
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.lx-shell--collapsed .lx-sidebar__item {
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.lx-shell--collapsed .lx-sidebar__footer {
|
|
padding: var(--lx-space-4) 0;
|
|
}
|
|
|
|
/* ---------- 工作区 ---------- */
|
|
|
|
.lx-workspace {
|
|
display: flex;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lx-breadcrumbs {
|
|
display: flex;
|
|
flex: 0 0 44px;
|
|
height: 44px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 var(--lx-content-padding);
|
|
border-bottom: 1px solid var(--lx-color-border);
|
|
background: var(--lx-color-bg-panel);
|
|
font-size: var(--lx-font-size-xs);
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-breadcrumbs__entry {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.lx-breadcrumbs__link {
|
|
color: var(--lx-color-text-tertiary);
|
|
}
|
|
|
|
.lx-breadcrumbs__link:hover {
|
|
color: var(--lx-color-brand);
|
|
}
|
|
|
|
.lx-breadcrumbs__current {
|
|
color: var(--lx-color-text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lx-breadcrumbs__sep {
|
|
color: #c9cdd4;
|
|
}
|
|
|
|
.lx-page {
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: var(--lx-content-padding);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (width <= 1080px) {
|
|
.lx-topbar__tag {
|
|
display: none;
|
|
}
|
|
|
|
.lx-sidebar {
|
|
flex-basis: var(--lx-sidebar-collapsed-width);
|
|
width: var(--lx-sidebar-collapsed-width);
|
|
}
|
|
|
|
.lx-sidebar__title,
|
|
.lx-sidebar__item-label,
|
|
.lx-sidebar__env-text {
|
|
display: none;
|
|
}
|
|
|
|
.lx-sidebar__heading {
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.lx-sidebar__item {
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@media (width <= 900px) {
|
|
.lx-topbar {
|
|
gap: var(--lx-space-3);
|
|
padding: 0 var(--lx-space-4);
|
|
}
|
|
|
|
.lx-topbar__brand {
|
|
min-width: auto;
|
|
}
|
|
|
|
.lx-topbar__tag {
|
|
display: none;
|
|
}
|
|
|
|
.lx-user__meta {
|
|
display: none;
|
|
}
|
|
|
|
.lx-content-padding,
|
|
.lx-page {
|
|
padding: var(--lx-space-4);
|
|
}
|
|
}
|