@axewo/fin-micro 0.0.0-stage → 2.0.0

package/scaffold/host/src/styles/shell.css

@@ -0,0 +1,761 @@
+/* 宿主浅色工作区：布局选择器均限于 shell，避免覆盖登录页及子应用样式。 */
+.host-shell {
+  --shell-accent: #3267e3;
+  --shell-border: #e8ebf1;
+  --shell-muted: #8791a3;
+  color: #263248;
+  font:
+    14px/1.5 'Inter',
+    'PingFang SC',
+    'Microsoft YaHei',
+    sans-serif;
+  background: #f5f7fa;
+  /* 外壳占满视口但不承担滚动；动态视口适配移动浏览器地址栏变化。 */
+  height: 100vh;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+.host-shell *,
+.host-shell *::before,
+.host-shell *::after {
+  box-sizing: border-box;
+}
+.host-shell button,
+.host-shell input {
+  font: inherit;
+}
+.host-shell button {
+  cursor: pointer;
+  color: inherit;
+}
+.host-shell button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.host-shell button:focus-visible,
+.host-shell a:focus-visible,
+.host-shell input:focus-visible {
+  outline: 2px solid #3267e3;
+  outline-offset: 2px;
+}
+.host-shell .shell-topbar {
+  height: 56px;
+  flex: 0 0 56px;
+  display: flex;
+  align-items: center;
+  padding: 0 24px 0 20px;
+  gap: 18px;
+  border-bottom: 1px solid var(--shell-border);
+  background: #fff;
+  position: relative;
+  z-index: 30;
+  flex: 0 0 56px;
+}
+.host-shell .brand {
+  width: 184px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: #1b2a45;
+  letter-spacing: 1px;
+}
+.host-shell .brand-icon {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: #3267e3;
+  color: white;
+  font-size: 21px;
+  font-weight: 800;
+}
+.host-shell .brand strong {
+  font-size: 16px;
+  white-space: nowrap;
+}
+.host-shell .brand strong span {
+  margin-left: 7px;
+  font-weight: 500;
+  font-size: 13px;
+  letter-spacing: 0;
+}
+.host-shell .icon-button {
+  border: 0;
+  background: transparent;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  font-size: 20px;
+  color: #647087;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.host-shell .icon-button .el-icon {
+  font-size: 18px;
+}
+.host-shell .icon-button:hover,
+.host-shell .user-trigger:hover {
+  background: #f1f5fc;
+}
+.host-shell .menu-search {
+  width: 300px;
+  flex: 0 1 300px;
+  min-width: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #f5f7fa;
+  border: 1px solid #edf0f5;
+  border-radius: 6px;
+  padding: 5px 10px;
+  color: #8791a3;
+}
+.host-shell .menu-search > .el-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+.host-shell .menu-search input {
+  min-width: 0;
+  flex: 1;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  outline: 0;
+  font-size: 12px;
+  color: #263248;
+}
+.host-shell .menu-search input::placeholder {
+  color: #929bab;
+}
+.host-shell .menu-search kbd {
+  border: 1px solid #dde3ee;
+  background: #fff;
+  border-radius: 3px;
+  width: 18px;
+  text-align: center;
+  font-size: 11px;
+}
+.host-shell .topbar-spacer {
+  flex: 1;
+}
+.host-shell .topbar-action {
+  position: relative;
+}
+.host-shell .demo-badge {
+  font-size: 11px;
+  padding: 2px 7px;
+  background: #fff7e8;
+  color: #9b681d;
+  border: 1px solid #f5e5c6;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+.host-shell .user-trigger {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  background: transparent;
+  border: 0;
+  padding: 3px;
+  border-radius: 6px;
+  font-size: 13px !important;
+  flex-shrink: 0;
+}
+.host-shell .user-trigger .el-icon {
+  font-size: 15px;
+}
+.host-shell .avatar {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: #eaf0ff;
+  color: #3267e3;
+  font-weight: 600;
+}
+.host-shell .shell-sidebar {
+  position: absolute;
+  top: 56px;
+  bottom: 0;
+  left: 0;
+  width: 224px;
+  min-height: 0;
+  padding: 20px 12px;
+  border-right: 1px solid var(--shell-border);
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+.host-shell .shell-sidebar button {
+  border: 0;
+  background: transparent;
+  text-align: left;
+  width: 100%;
+  padding: 9px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+}
+.host-shell .shell-sidebar button:hover {
+  background: #f5f7fc;
+}
+.host-shell .shell-sidebar .selected {
+  background: #edf3ff;
+  color: #3267e3;
+  font-weight: 600;
+}
+.host-shell .sidebar-home {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.host-shell .sidebar-home > span:first-child {
+  font-size: 18px;
+}
+.host-shell .sidebar-caption {
+  color: #9ca4b2;
+  font-size: 11px;
+  padding: 24px 12px 3px;
+}
+.host-shell .sidebar-app h2 {
+  font-size: 12px;
+  font-weight: 600;
+  color: #79849a;
+  margin: 17px 12px 6px;
+}
+.host-shell .sidebar-menu {
+  --el-menu-bg-color: #fff;
+  --el-menu-text-color: #263248;
+  --el-menu-active-color: var(--shell-accent);
+  --el-menu-hover-bg-color: #f5f7fc;
+  --el-menu-item-height: 38px;
+  --el-menu-sub-item-height: 36px;
+  --el-menu-base-level-padding: 10px;
+  --el-menu-level-padding: 12px;
+  --el-menu-item-font-size: 12px;
+  border-right: 0;
+}
+.host-shell .sidebar-menu .el-menu-item,
+.host-shell .sidebar-menu .el-sub-menu__title {
+  border-radius: 6px;
+  margin: 2px 0;
+}
+.host-shell .sidebar-footer {
+  margin-top: auto;
+  padding: 32px 12px 0;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: #8d97a8;
+  font-size: 11px;
+}
+.host-shell .status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #5ab695;
+  flex-shrink: 0;
+}
+.host-shell .shell-main {
+  margin-left: 224px;
+  min-width: 0;
+  min-height: 0;
+  height: calc(100vh - 56px);
+  height: calc(100dvh - 56px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.host-shell.is-collapsed .shell-sidebar {
+  width: 64px;
+  padding: 20px 8px;
+}
+.host-shell.is-collapsed .shell-main {
+  margin-left: 64px;
+}
+.host-shell.is-collapsed .sidebar-label,
+.host-shell.is-collapsed .sidebar-caption {
+  display: none;
+}
+.host-shell.is-collapsed .sidebar-home {
+  justify-content: center;
+  padding: 9px 0;
+}
+.host-shell.is-collapsed .sidebar-app {
+  margin-top: 14px;
+}
+.host-shell.is-collapsed .collapsed-entry {
+  text-align: center;
+  padding: 10px 0;
+}
+.host-shell.is-collapsed .sidebar-footer {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+.host-shell .shell-tabbar {
+  display: flex;
+  flex: 0 0 40px;
+  height: 40px;
+  position: relative;
+  background: white;
+  border-bottom: 1px solid var(--shell-border);
+  padding-left: 16px;
+}
+.host-shell .tab-strip {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  flex: 1;
+  min-width: 0;
+  gap: 4px;
+  align-items: stretch;
+}
+.host-shell .shell-tab {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  align-items: center;
+  border-right: 1px solid #f0f2f6;
+}
+.host-shell .shell-tab > button {
+  height: 100%;
+  border: 0;
+  background: transparent;
+  padding: 0 13px;
+  font-size: 12px;
+  max-width: 210px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.host-shell .shell-tab.active {
+  background: #f2f6ff;
+  color: #3267e3;
+}
+.host-shell .shell-tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 8px;
+  right: 8px;
+  height: 2px;
+  background: #3267e3;
+}
+.host-shell .shell-tab .tab-close {
+  padding: 0 8px;
+  max-width: none;
+  color: #9aa4b6;
+}
+.host-shell .shell-tab .tab-close:hover {
+  color: #cf4b4b;
+}
+.host-shell .tab-more {
+  border: 0;
+  border-left: 1px solid var(--shell-border);
+  width: 44px;
+  background: white;
+  font-size: 20px !important;
+  flex-shrink: 0;
+}
+.host-shell .shell-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: #939cab;
+  font-size: 12px;
+}
+.host-shell .shell-breadcrumb strong {
+  color: #536079;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 工作区建立确定的高度链：本地长页面由此滚动，远端挂载点继承内容盒高度。 */
+.host-shell .shell-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  /* 工作区是宿主唯一业务滚动容器；头部、页签和面包屑不随内容滚动。 */
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 20px 28px 32px;
+}
+.host-shell .shell-app-container {
+  min-height: 0 !important;
+  height: auto !important;
+}
+.host-shell .shell-app-container > div {
+  min-height: 0 !important;
+  height: auto !important;
+}
+.host-shell .shell-feedback {
+  margin: 14px 28px 0;
+  flex: 0 0 auto;
+  padding: 9px 13px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  color: #3267e3;
+  background: #eaf1ff;
+  border: 1px solid #d7e5ff;
+  border-radius: 6px;
+  font-size: 12px;
+}
+.host-shell .shell-feedback.warning {
+  color: #91681e;
+  background: #fff9ec;
+  border-color: #f3e6c3;
+}
+.host-shell .shell-feedback button {
+  border: 0;
+  background: transparent;
+  font-size: 18px;
+}
+/* 弹层背板只覆盖页面，顶栏和弹出菜单位于其上；点击空白或 Esc 均可关闭。 */
+.host-shell .popover-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  border: 0;
+  background: transparent;
+  cursor: default !important;
+}
+.host-shell .shell-popover {
+  position: absolute;
+  z-index: 40;
+  background: white;
+  border: 1px solid #e5eaf2;
+  box-shadow: 0 10px 34px #20395e1a;
+  border-radius: 8px;
+  padding: 8px;
+  text-align: left;
+}
+.host-shell .shell-popover button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  padding: 8px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.host-shell .shell-popover button:hover:not(:disabled) {
+  background: #eff4ff;
+  color: #3267e3;
+}
+.host-shell .shell-popover small {
+  display: block;
+  font-size: 11px;
+  color: #909aad;
+}
+.host-shell .shell-popover hr {
+  border: 0;
+  border-top: 1px solid #eef0f5;
+  margin: 6px 0;
+}
+.host-shell .popover-label {
+  color: #939cab;
+  font-size: 11px;
+  margin: 2px 10px 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.host-shell .popover-empty {
+  text-align: center;
+  color: #9aa4b4;
+  padding: 16px;
+  font-size: 12px;
+}
+.host-shell .search-results {
+  top: 40px;
+  left: 0;
+  width: 360px;
+  max-height: 360px;
+  overflow: auto;
+}
+.host-shell .search-results button strong {
+  font-weight: 500;
+}
+.host-shell .search-results button small {
+  margin-top: 3px;
+}
+.host-shell .message-popover {
+  right: 0;
+  top: 42px;
+  width: 300px;
+}
+.host-shell .message-popover h3 {
+  font-size: 14px;
+  margin: 8px 10px;
+}
+.host-shell .user-popover {
+  right: 0;
+  top: 43px;
+  width: 180px;
+  padding: 14px 8px 8px;
+}
+.host-shell .user-popover > strong,
+.host-shell .user-popover > small {
+  padding: 0 10px;
+}
+.host-shell .tab-actions {
+  right: 8px;
+  top: 44px;
+  width: 176px;
+}
+.host-shell .tab-actions.context-actions {
+  position: fixed;
+  right: auto;
+}
+.host-shell .home-view {
+  max-width: 1440px;
+  margin: 0 auto;
+}
+.host-shell .welcome-panel {
+  background: #f4f7fc;
+  border: 1px solid #e5ebf5;
+  border-radius: 10px;
+  padding: 28px 32px;
+  min-height: 152px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 22px;
+  overflow: hidden;
+}
+.host-shell .eyebrow {
+  color: #7f94b4 !important;
+  font-size: 10px !important;
+  letter-spacing: 1.8px;
+  margin: 0 0 10px !important;
+}
+.host-shell .welcome-panel h1 {
+  font-size: 23px;
+  letter-spacing: 0.3px;
+  margin: 0 0 9px;
+  font-weight: 600;
+  color: #25344e;
+}
+.host-shell .welcome-panel p {
+  font-size: 12px;
+  color: #8b97aa;
+  margin: 0;
+}
+.host-shell .home-panel {
+  background: #fff;
+  border: 1px solid var(--shell-border);
+  border-radius: 9px;
+  padding: 22px 24px;
+  margin-bottom: 22px;
+}
+.host-shell .panel-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.host-shell .panel-heading h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+.host-shell .panel-heading > span {
+  color: #9ba4b4;
+  font-size: 11px;
+}
+.host-shell .shortcut-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+.host-shell .shortcut-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 18px;
+  background: white;
+  border: 1px solid #e9edf5;
+  border-radius: 7px;
+  text-align: left;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+.host-shell .shortcut-card:hover {
+  border-color: #acc2f5;
+  background: #fafcff;
+}
+.host-shell .entry-icon {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: 9px;
+  background: #edf3ff;
+  color: #4c79dc;
+  font-size: 17px;
+}
+.host-shell .shortcut-card:nth-child(2) .entry-icon {
+  background: #edf8f5;
+  color: #4a9a88;
+}
+.host-shell .shortcut-card strong {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+}
+.host-shell .shortcut-card small {
+  display: block;
+  color: #99a3b4;
+  font-size: 11px;
+  margin-top: 4px;
+}
+.host-shell .entry-arrow {
+  margin-left: auto;
+  color: #a0acbe;
+}
+.host-shell .home-columns {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 22px;
+}
+.host-shell .home-columns .home-panel {
+  min-height: 266px;
+}
+.host-shell .empty-state {
+  text-align: center;
+  color: #9ba5b4;
+  padding: 25px 12px;
+  font-size: 12px;
+}
+.host-shell .empty-state strong {
+  display: block;
+  font-weight: 400;
+  color: #8491a6;
+  margin-bottom: 6px;
+}
+.host-shell .empty-state p {
+  margin: 0;
+  font-size: 11px;
+}
+.host-shell .empty-symbol {
+  display: block;
+  color: #ced7e5;
+  font-size: 32px;
+  line-height: 1.2;
+  margin-bottom: 13px;
+}
+.host-shell .recent-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.host-shell .recent-list li + li {
+  border-top: 1px solid #f1f3f7;
+}
+.host-shell .recent-list button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  border: 0;
+  background: white;
+  text-align: left;
+  padding: 12px 0;
+  font-size: 12px;
+}
+.host-shell .recent-list button:hover {
+  color: #3267e3;
+}
+.host-shell .recent-list small {
+  color: #99a5b5;
+  font-size: 11px;
+  white-space: nowrap;
+}
+@media (max-width: 1100px) {
+  .host-shell .shortcut-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .host-shell .home-columns {
+    grid-template-columns: 1fr;
+  }
+  .host-shell .menu-search {
+    width: 230px;
+  }
+  .host-shell .shell-content {
+    padding: 18px;
+  }
+}
+@media (max-width: 760px) {
+  .host-shell .shell-sidebar {
+    width: 180px;
+  }
+  .host-shell .shell-main {
+    margin-left: 180px;
+  }
+  .host-shell .brand {
+    width: auto;
+  }
+  .host-shell .brand strong span {
+    display: none;
+  }
+  .host-shell .shell-topbar {
+    padding: 0 12px;
+    gap: 8px;
+  }
+  .host-shell .menu-search {
+    width: 180px;
+    min-width: 0;
+    flex: 0 1 180px;
+    margin-left: auto;
+  }
+  .host-shell .shell-breadcrumb {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .host-shell .menu-search kbd,
+  .host-shell .demo-badge {
+    display: none;
+  }
+  .host-shell .topbar-spacer {
+    display: none;
+  }
+  .host-shell .search-results {
+    width: 280px;
+  }
+  .host-shell .shell-content {
+    padding: 14px;
+  }
+  .host-shell .welcome-panel {
+    padding: 22px;
+  }
+  .host-shell .welcome-panel h1 {
+    font-size: 19px;
+  }
+  .host-shell .shortcut-grid {
+    grid-template-columns: 1fr;
+  }
+  .host-shell .home-panel {
+    padding: 18px;
+  }
+  .host-shell .shell-feedback {
+    margin-left: 14px;
+    margin-right: 14px;
+  }
+}