xto-fronted 0.4.93 → 0.4.95

package/src/assets/styles/index.scss

@@ -1,461 +1,461 @@
-// ==============================================
-// 全局样式入口
-// ==============================================
-
-// CSS 变量（根选择器）
-@use 'root';
-
-// Reset
-@use 'reset';
-
-// Transitions
-@use 'transition';
-
-// Dark Theme Override
-@use 'dark';
-
-// ==============================================
-// 全局通用样式（企业级增强）
-// ==============================================
-
-// 文字截断
-.text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// 多行截断
-.text-ellipsis-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.text-ellipsis-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-// Flex 布局
-.flex {
-  display: flex;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.flex-start {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.flex-end {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
-// 方向
-.flex-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-col-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-// Gap 间距（8px 网格系统）
-.gap-4 { gap: 4px; }
-.gap-8 { gap: 8px; }
-.gap-12 { gap: 12px; }
-.gap-16 { gap: 16px; }
-.gap-20 { gap: 20px; }
-.gap-24 { gap: 24px; }
-.gap-32 { gap: 32px; }
-
-// 文字对齐
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-// 颜色
-.text-primary {
-  color: var(--color-primary);
-}
-
-.text-success {
-  color: var(--color-success);
-}
-
-.text-warning {
-  color: var(--color-warning);
-}
-
-.text-danger {
-  color: var(--color-danger);
-}
-
-.text-info {
-  color: var(--color-info);
-}
-
-.text-secondary {
-  color: var(--color-text-secondary);
-}
-
-.text-placeholder {
-  color: var(--color-text-placeholder);
-}
-
-// 背景
-.bg-primary {
-  background-color: var(--color-primary);
-}
-
-.bg-success {
-  background-color: var(--color-success);
-}
-
-.bg-warning {
-  background-color: var(--color-warning);
-}
-
-.bg-danger {
-  background-color: var(--color-danger);
-}
-
-.bg-page {
-  background-color: var(--bg-color-page);
-}
-
-.bg-card {
-  background-color: var(--bg-color);
-}
-
-// 间距（8px 网格系统）
-.mt-4 { margin-top: 4px; }
-.mt-8 { margin-top: 8px; }
-.mt-12 { margin-top: 12px; }
-.mt-16 { margin-top: 16px; }
-.mt-20 { margin-top: 20px; }
-.mt-24 { margin-top: 24px; }
-.mt-32 { margin-top: 32px; }
-
-.mb-4 { margin-bottom: 4px; }
-.mb-8 { margin-bottom: 8px; }
-.mb-12 { margin-bottom: 12px; }
-.mb-16 { margin-bottom: 16px; }
-.mb-20 { margin-bottom: 20px; }
-.mb-24 { margin-bottom: 24px; }
-.mb-32 { margin-bottom: 32px; }
-
-.ml-4 { margin-left: 4px; }
-.ml-8 { margin-left: 8px; }
-.ml-12 { margin-left: 12px; }
-.ml-16 { margin-left: 16px; }
-
-.mr-4 { margin-right: 4px; }
-.mr-8 { margin-right: 8px; }
-.mr-12 { margin-right: 12px; }
-.mr-16 { margin-right: 16px; }
-
-.p-4 { padding: 4px; }
-.p-8 { padding: 8px; }
-.p-12 { padding: 12px; }
-.p-16 { padding: 16px; }
-.p-20 { padding: 20px; }
-.p-24 { padding: 24px; }
-.p-32 { padding: 32px; }
-
-.px-4 { padding-left: 4px; padding-right: 4px; }
-.px-8 { padding-left: 8px; padding-right: 8px; }
-.px-12 { padding-left: 12px; padding-right: 12px; }
-.px-16 { padding-left: 16px; padding-right: 16px; }
-.px-24 { padding-left: 24px; padding-right: 24px; }
-
-.py-4 { padding-top: 4px; padding-bottom: 4px; }
-.py-8 { padding-top: 8px; padding-bottom: 8px; }
-.py-12 { padding-top: 12px; padding-bottom: 12px; }
-.py-16 { padding-top: 16px; padding-bottom: 16px; }
-.py-24 { padding-top: 24px; padding-bottom: 24px; }
-
-// 卡片容器（企业级）
-.card {
-  background-color: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-card);
-  padding: var(--spacing-lg);
-  transition: box-shadow 0.3s ease;
-
-  &:hover {
-    box-shadow: var(--box-shadow-card-hover);
-  }
-}
-
-.card-flat {
-  background-color: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  padding: var(--spacing-lg);
-  border: 1px solid var(--color-border-lighter);
-}
-
-// 页面容器
-.page-container {
-  padding: 12px;
-  min-height: 100%;
-  background: var(--bg-color-page);
-}
-
-// 搜索栏（企业级）
-.search-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-md);
-  margin-bottom: 12px;
-  padding: 12px;
-  background: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-card);
-}
-
-// 工具栏（企业级）
-.toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  border-bottom: 1px solid var(--color-border-lighter);
-}
-
-.toolbar-left {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-// 表格容器（企业级）
-.table-container {
-  background-color: var(--bg-color);
-  border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-card);
-  overflow: hidden;
-}
-
-// 分页容器
-.pagination-container {
-  display: flex;
-  justify-content: flex-end;
-  padding: 12px;
-  border-top: 1px solid var(--color-border-lighter);
-}
-
-// 标签徽章
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  font-size: 12px;
-  font-weight: 500;
-  border-radius: 10px;
-  background: var(--color-fill);
-  color: var(--color-text-secondary);
-}
-
-.badge-primary {
-  background: var(--color-primary-light-6);
-  color: var(--color-primary);
-}
-
-.badge-success {
-  background: var(--color-success-lighter);
-  color: var(--color-success);
-}
-
-.badge-warning {
-  background: var(--color-warning-lighter);
-  color: var(--color-warning);
-}
-
-.badge-danger {
-  background: var(--color-danger-lighter);
-  color: var(--color-danger);
-}
-
-// 分隔线
-.divider {
-  height: 1px;
-  background: var(--color-border-lighter);
-  margin: var(--spacing-md) 0;
-}
-
-.divider-vertical {
-  width: 1px;
-  height: 100%;
-  background: var(--color-border-lighter);
-  margin: 0 var(--spacing-md);
-}
-
-// 空状态
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  color: var(--color-text-placeholder);
-
-  .empty-icon {
-    width: 64px;
-    height: 64px;
-    margin-bottom: 16px;
-    opacity: 0.5;
-  }
-
-  .empty-text {
-    font-size: 14px;
-  }
-}
-
-// 加载状态
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-
-  .loading-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid var(--color-border-lighter);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-  }
-
-  .loading-text {
-    margin-top: 16px;
-    font-size: 14px;
-    color: var(--color-text-secondary);
-  }
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-// 链接样式
-.link {
-  color: var(--color-primary);
-  text-decoration: none;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: var(--color-primary-dark-1);
-  }
-}
-
-.link-underline {
-  color: var(--color-primary);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-
-  &:hover {
-    color: var(--color-primary-dark-1);
-  }
-}
-
-// ==============================================
-// 菜单高亮样式（全局样式，不能在 scoped 中）
-// ==============================================
-.x-menu-item {
-  &.is-active {
-    color: var(--color-primary) !important;
-    background-color: var(--color-primary-light-9) !important;
-    position: relative;
-
-    // 左侧高亮条
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 4px;
-      background-color: var(--color-primary);
-      border-radius: 0 2px 2px 0;
-    }
-  }
-}
-
-// SubMenu 的子菜单项高亮（只有 MenuItem 高亮，SubMenu 本身不高亮）
-.x-sub-menu__menu .x-menu-item.is-active {
-  color: var(--color-primary) !important;
-  background-color: var(--color-primary-light-9) !important;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background-color: var(--color-primary);
-    border-radius: 0 2px 2px 0;
-  }
-}
-
-// ==============================================
-// 灰色模式（全局样式，不能在 scoped 中）
-// ==============================================
-html.grey-mode {
-  filter: grayscale(100%);
-  -webkit-filter: grayscale(100%);
+// ==============================================
+// 全局样式入口
+// ==============================================
+
+// CSS 变量（根选择器）
+@use 'root';
+
+// Reset
+@use 'reset';
+
+// Transitions
+@use 'transition';
+
+// Dark Theme Override
+@use 'dark';
+
+// ==============================================
+// 全局通用样式（企业级增强）
+// ==============================================
+
+// 文字截断
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 多行截断
+.text-ellipsis-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.text-ellipsis-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// Flex 布局
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.flex-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+// 方向
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-col-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+// Gap 间距（8px 网格系统）
+.gap-4 { gap: 4px; }
+.gap-8 { gap: 8px; }
+.gap-12 { gap: 12px; }
+.gap-16 { gap: 16px; }
+.gap-20 { gap: 20px; }
+.gap-24 { gap: 24px; }
+.gap-32 { gap: 32px; }
+
+// 文字对齐
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+// 颜色
+.text-primary {
+  color: var(--color-primary);
+}
+
+.text-success {
+  color: var(--color-success);
+}
+
+.text-warning {
+  color: var(--color-warning);
+}
+
+.text-danger {
+  color: var(--color-danger);
+}
+
+.text-info {
+  color: var(--color-info);
+}
+
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.text-placeholder {
+  color: var(--color-text-placeholder);
+}
+
+// 背景
+.bg-primary {
+  background-color: var(--color-primary);
+}
+
+.bg-success {
+  background-color: var(--color-success);
+}
+
+.bg-warning {
+  background-color: var(--color-warning);
+}
+
+.bg-danger {
+  background-color: var(--color-danger);
+}
+
+.bg-page {
+  background-color: var(--bg-color-page);
+}
+
+.bg-card {
+  background-color: var(--bg-color);
+}
+
+// 间距（8px 网格系统）
+.mt-4 { margin-top: 4px; }
+.mt-8 { margin-top: 8px; }
+.mt-12 { margin-top: 12px; }
+.mt-16 { margin-top: 16px; }
+.mt-20 { margin-top: 20px; }
+.mt-24 { margin-top: 24px; }
+.mt-32 { margin-top: 32px; }
+
+.mb-4 { margin-bottom: 4px; }
+.mb-8 { margin-bottom: 8px; }
+.mb-12 { margin-bottom: 12px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-20 { margin-bottom: 20px; }
+.mb-24 { margin-bottom: 24px; }
+.mb-32 { margin-bottom: 32px; }
+
+.ml-4 { margin-left: 4px; }
+.ml-8 { margin-left: 8px; }
+.ml-12 { margin-left: 12px; }
+.ml-16 { margin-left: 16px; }
+
+.mr-4 { margin-right: 4px; }
+.mr-8 { margin-right: 8px; }
+.mr-12 { margin-right: 12px; }
+.mr-16 { margin-right: 16px; }
+
+.p-4 { padding: 4px; }
+.p-8 { padding: 8px; }
+.p-12 { padding: 12px; }
+.p-16 { padding: 16px; }
+.p-20 { padding: 20px; }
+.p-24 { padding: 24px; }
+.p-32 { padding: 32px; }
+
+.px-4 { padding-left: 4px; padding-right: 4px; }
+.px-8 { padding-left: 8px; padding-right: 8px; }
+.px-12 { padding-left: 12px; padding-right: 12px; }
+.px-16 { padding-left: 16px; padding-right: 16px; }
+.px-24 { padding-left: 24px; padding-right: 24px; }
+
+.py-4 { padding-top: 4px; padding-bottom: 4px; }
+.py-8 { padding-top: 8px; padding-bottom: 8px; }
+.py-12 { padding-top: 12px; padding-bottom: 12px; }
+.py-16 { padding-top: 16px; padding-bottom: 16px; }
+.py-24 { padding-top: 24px; padding-bottom: 24px; }
+
+// 卡片容器（企业级）
+.card {
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+  padding: var(--spacing-lg);
+  transition: box-shadow 0.3s ease;
+
+  &:hover {
+    box-shadow: var(--box-shadow-card-hover);
+  }
+}
+
+.card-flat {
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border-lighter);
+}
+
+// 页面容器
+.page-container {
+  padding: 12px;
+  min-height: 100%;
+  background: var(--bg-color-page);
+}
+
+// 搜索栏（企业级）
+.search-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  margin-bottom: 12px;
+  padding: 12px;
+  background: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+}
+
+// 工具栏（企业级）
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-bottom: 1px solid var(--color-border-lighter);
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+// 表格容器（企业级）
+.table-container {
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-card);
+  overflow: hidden;
+}
+
+// 分页容器
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px;
+  border-top: 1px solid var(--color-border-lighter);
+}
+
+// 标签徽章
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 10px;
+  background: var(--color-fill);
+  color: var(--color-text-secondary);
+}
+
+.badge-primary {
+  background: var(--color-primary-light-6);
+  color: var(--color-primary);
+}
+
+.badge-success {
+  background: var(--color-success-lighter);
+  color: var(--color-success);
+}
+
+.badge-warning {
+  background: var(--color-warning-lighter);
+  color: var(--color-warning);
+}
+
+.badge-danger {
+  background: var(--color-danger-lighter);
+  color: var(--color-danger);
+}
+
+// 分隔线
+.divider {
+  height: 1px;
+  background: var(--color-border-lighter);
+  margin: var(--spacing-md) 0;
+}
+
+.divider-vertical {
+  width: 1px;
+  height: 100%;
+  background: var(--color-border-lighter);
+  margin: 0 var(--spacing-md);
+}
+
+// 空状态
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: var(--color-text-placeholder);
+
+  .empty-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    font-size: 14px;
+  }
+}
+
+// 加载状态
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+
+  .loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--color-border-lighter);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  .loading-text {
+    margin-top: 16px;
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+// 链接样式
+.link {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-primary-dark-1);
+  }
+}
+
+.link-underline {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: var(--color-primary-dark-1);
+  }
+}
+
+// ==============================================
+// 菜单高亮样式（全局样式，不能在 scoped 中）
+// ==============================================
+.x-menu-item {
+  &.is-active {
+    color: var(--color-primary) !important;
+    background-color: var(--color-primary-light-9) !important;
+    position: relative;
+
+    // 左侧高亮条
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: var(--color-primary);
+      border-radius: 0 2px 2px 0;
+    }
+  }
+}
+
+// SubMenu 的子菜单项高亮（只有 MenuItem 高亮，SubMenu 本身不高亮）
+.x-sub-menu__menu .x-menu-item.is-active {
+  color: var(--color-primary) !important;
+  background-color: var(--color-primary-light-9) !important;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background-color: var(--color-primary);
+    border-radius: 0 2px 2px 0;
+  }
+}
+
+// ==============================================
+// 灰色模式（全局样式，不能在 scoped 中）
+// ==============================================
+html.grey-mode {
+  filter: grayscale(100%);
+  -webkit-filter: grayscale(100%);
 }