n20-common-lib 3.1.4 → 3.1.5

package/src/assets/css/pivot.scss

@@ -0,0 +1,1330 @@
+.n20-pivot-dialog {
+  .el-dialog {
+    box-sizing: border-box;
+    margin-top: 3vh !important;
+    max-height: 95vh;
+    height: 95vh;
+    display: flex;
+    margin: 0 auto;
+    flex-direction: column;
+    .el-dialog__body {
+      padding: 0;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+.n20-pivot-container {
+  display: flex;
+  background: #fff;
+  height: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+/* 左侧边栏 */
+.pivot-sidebar-left {
+  width: 280px;
+  background: #f2f3f5;
+  border-right: 1px solid #e5e6eb;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: width 0.3s ease;
+
+  &.collapsed {
+    width: 8px;
+
+    .sidebar-header,
+    .report-list {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  .sidebar-header {
+    height: 48px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e5e6eb;
+    background: #f2f3f5;
+  }
+
+  .sidebar-title {
+    color: var(--text-2, #4e5969);
+    font-family: 'PingFang SC';
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}
+
+.add-report-btn {
+  padding: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  border: 1px solid var(--border-2, #e5e6eb);
+  background: var(--bg-white, #fff);
+  cursor: pointer;
+  color: var(--text-primary, #4e5969);
+  transition: all 0.2s;
+
+  i {
+    font-size: 14px;
+    line-height: 14px;
+  }
+
+  &:hover {
+    background: #fff;
+    color: #007aff;
+  }
+}
+
+.report-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.report-item {
+  display: flex;
+  align-items: center;
+  padding: 7px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  &.active {
+    border-radius: 4px;
+    background: var(--bg-white, #fff);
+
+    &:hover {
+      background: var(--bg-white, #fff);
+    }
+
+    .report-icon {
+      color: #007aff;
+    }
+
+    .report-name {
+      color: #007aff;
+      font-weight: 500;
+    }
+  }
+
+  &.editing {
+    background: var(--bg-white, #fff);
+  }
+}
+
+.report-name-input {
+  flex: 1;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid #007aff;
+  border-radius: 2px;
+  font-size: 14px;
+  color: #1d2129;
+  outline: none;
+}
+
+.report-more {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #86909c;
+  position: relative;
+
+  &.visible {
+    display: flex;
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: #4e5969;
+  }
+}
+
+.report-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  min-width: 100px;
+  padding: 4px 0;
+}
+
+.report-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #1d2129;
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+
+  &:hover {
+    background: #f7f8fa;
+  }
+
+  &.delete {
+    color: #f53f3f;
+
+    &:hover {
+      background: #fff2f0;
+    }
+  }
+}
+
+.report-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  color: #4e5969;
+}
+
+.report-name {
+  font-size: 14px;
+  color: #1d2129;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scroll-bar-indicator {
+  position: absolute;
+  right: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  border: 1px solid var(--border-2, #e5e6eb);
+  background: var(--bg-white, #fff);
+  color: #4e5969;
+  cursor: pointer;
+
+  &:hover {
+    color: #007aff;
+  }
+
+  &.right-indicator {
+    right: auto;
+    left: -8px;
+
+    &.collapsed {
+      left: -8px;
+    }
+  }
+}
+
+/* 主内容区域 */
+.pivot-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 16px;
+  gap: 16px;
+  transition: margin-left 0.3s ease, margin-right 0.3s ease;
+
+  &.left-collapsed {
+    margin-left: 8px;
+  }
+
+  &.right-collapsed {
+    margin-right: 8px;
+  }
+}
+
+.main-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0;
+  height: 56px;
+  box-sizing: border-box;
+}
+
+.toolbar-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.toolbar-left-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.report-title {
+  color: var(--text-1, #1d2129);
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 26px;
+  margin: 0;
+}
+
+.add-to-home-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 2px;
+  cursor: pointer;
+  color: var(--primary-6, #007aff);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+
+  svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background: rgba(0, 122, 255, 0.08);
+  }
+}
+
+.report-stats {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stat-item {
+  font-size: 12px;
+  color: var(--text-2, #4e5969);
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  line-height: 20px;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 12px;
+  background: var(--border-2, #e5e6eb);
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+  padding-right: 0;
+}
+
+.toolbar-divider {
+  width: 0;
+  height: 12px;
+  border-left: 1px solid #e5e6eb;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  height: 100%;
+  align-items: center;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-white, #fff);
+  border: 1px solid var(--border-2, #e5e6eb);
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-2, #4e5969);
+  transition: all 0.2s;
+  padding: 9px;
+  box-sizing: border-box;
+
+  &:hover {
+    color: var(--primary-6, #007aff);
+    border-color: var(--primary-6, #007aff);
+  }
+
+  i {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+/* 更多按钮下拉菜单 */
+.more-btn {
+  position: relative;
+
+  &.active {
+    background: var(--fill-1, #f7f8fa);
+    border-color: var(--primary-6, #007aff);
+  }
+}
+
+.more-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--bg-white, #fff);
+  border: 1px solid var(--border-2, #e5e6eb);
+  border-radius: 4px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 160px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 0.2s;
+  font-size: 14px;
+  color: var(--text-1, #1d2129);
+  line-height: 22px;
+
+  &:hover {
+    background: var(--fill-1, #f7f8fa);
+  }
+
+  i {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-2, #4e5969);
+  }
+
+  &:hover i {
+    color: var(--text-1, #1d2129);
+  }
+
+  &.danger {
+    color: var(--danger-6, #ff3b30);
+
+    i {
+      color: var(--danger-6, #ff3b30);
+    }
+  }
+}
+
+.dropdown-divider {
+  height: 1px;
+  background: var(--border-2, #e5e6eb);
+  margin: 4px 0;
+}
+
+/* 主内容 */
+.main-content {
+  flex: 1;
+  overflow: hidden;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.chart-view,
+.table-view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.chart-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.chart-header {
+  margin-bottom: 16px;
+}
+
+.chart-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1d2129;
+  font-family: 'PingFang SC', sans-serif;
+  margin-bottom: 4px;
+}
+
+.chart-desc {
+  font-size: 12px;
+  color: #86909c;
+  font-family: 'PingFang SC', sans-serif;
+}
+
+.chart-unit-label {
+  font-size: 12px;
+  color: #86909c;
+  font-family: 'PingFang SC', sans-serif;
+  line-height: 20px;
+  padding-bottom: 8px;
+  flex-shrink: 0;
+}
+
+.chart-container {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.table-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.pivot-table {
+  width: 100%;
+  min-width: 769px;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 14px;
+
+  th,
+  td {
+    padding: 10px 16px;
+    border-right: 1px solid #e5e6eb;
+    border-bottom: 1px solid #e5e6eb;
+    height: 57px;
+    box-sizing: border-box;
+  }
+
+  th {
+    background: #f2f3f5;
+    font-weight: 500;
+    color: #1d2129;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    text-align: left;
+    height: 40px;
+  }
+
+  th.metric-header {
+    text-align: right;
+  }
+
+  td.dimension-cell {
+    text-align: left;
+    color: #1d2129;
+    vertical-align: middle;
+  }
+
+  td.metric-cell {
+    text-align: right;
+    vertical-align: middle;
+
+    .cell-content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: center;
+      height: 100%;
+    }
+
+    .cell-value {
+      font-family: 'Open Sans', sans-serif;
+      font-size: 14px;
+      line-height: 22px;
+      color: #1d2129;
+    }
+
+    .cell-count {
+      font-family: 'PingFang SC', sans-serif;
+      font-size: 12px;
+      line-height: 20px;
+      color: #86909c;
+    }
+  }
+
+  tbody tr:hover {
+    background: #f7f8fa;
+  }
+}
+
+.empty-state {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 右侧边栏 */
+.pivot-sidebar-right {
+  width: 280px;
+  background: #fff;
+  border-left: 1px solid #e5e6eb;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.3s ease;
+
+  &.collapsed {
+    width: 8px;
+
+    .sidebar-header,
+    .config-form {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .scroll-bar-indicator {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .sidebar-header {
+    height: 48px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-bottom: 1px solid #e5e6eb;
+    white-space: nowrap;
+  }
+
+  .sidebar-title {
+    color: var(--text-1, #1d2129);
+    font-family: 'PingFang SC';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 22px;
+  }
+
+  .sidebar-header-collapse {
+    font-size: 14px;
+    color: #86909c;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #1d2129;
+    }
+  }
+}
+
+.config-form {
+  flex: 1;
+  padding: 0 16px;
+  overflow-y: auto;
+
+  .form-item:first-child {
+    margin-top: 16px;
+  }
+}
+
+.form-item {
+  margin-bottom: 16px;
+  position: relative;
+}
+
+.form-divider {
+  height: 1px;
+  background-color: #e5e6eb;
+  margin: 16px 0;
+}
+
+.form-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: #4e5969;
+  margin-bottom: 8px;
+  line-height: 22px;
+
+  .v3-icon-help {
+    font-size: 14px;
+    color: #86909c;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #4e5969;
+    }
+  }
+}
+
+.label-tip {
+  color: #86909c;
+}
+
+.form-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+
+  .form-label {
+    margin-bottom: 0;
+  }
+}
+
+.form-label-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .v3-icon-question-circle {
+    width: 14px;
+    height: 14px;
+    color: #86909c;
+    cursor: pointer;
+
+    &:hover {
+      color: #4e5969;
+    }
+  }
+}
+
+/* 单选组 */
+.radio-group {
+  display: flex;
+  background: #f2f3f5;
+  border-radius: 4px;
+  padding: 3px;
+  gap: 0;
+}
+
+/* 选择框 */
+.select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+
+  &:hover,
+  &.active {
+    border-color: #007aff;
+  }
+}
+
+.select-value {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #1d2129;
+
+  .report-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    line-height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0;
+    color: #007aff;
+  }
+
+  .placeholder {
+    color: #86909c;
+  }
+}
+
+.select-arrow {
+  color: #4e5969;
+  transition: transform 0.2s;
+
+  .select-wrapper.active & {
+    transform: rotate(180deg);
+  }
+}
+
+/* 指标行列表 */
+.metric-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.metric-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+
+  &.active .metric-select-box {
+    border-color: #007aff;
+  }
+}
+
+.metric-select-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  cursor: default;
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: #007aff;
+  }
+}
+
+.metric-select-value {
+  flex: 1;
+  font-size: 14px;
+  color: #1d2129;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-select-tag {
+  padding: 2px 8px;
+  background: rgba(78, 89, 105, 0.08);
+  border-radius: 2px;
+  font-size: 12px;
+  color: #4e5969;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(78, 89, 105, 0.15);
+  }
+}
+
+.metric-delete-btn {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #86909c;
+  cursor: pointer;
+  transition: color 0.2s;
+  flex-shrink: 0;
+
+  &:hover {
+    color: #f53f3f;
+  }
+}
+
+/* 下拉菜单 */
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.dropdown-item {
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #1d2129;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: #f7f8fa;
+  }
+
+  &.active {
+    color: #007aff;
+  }
+
+  &.disabled {
+    color: #86909c;
+    cursor: not-allowed;
+  }
+}
+
+.chart-type-dropdown {
+  left: auto;
+  right: 0;
+  min-width: 248px;
+  padding: 8px;
+}
+
+.chart-type-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 2px;
+
+  .report-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    line-height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0;
+    color: #4e5969;
+  }
+
+  &.active .report-icon {
+    color: #007aff;
+  }
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkbox {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #e5e6eb;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+
+  &.checked {
+    background: #007aff;
+    border-color: #007aff;
+    color: #fff;
+  }
+}
+
+/* 聚合类型下拉 */
+.aggregate-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 2px;
+  cursor: pointer;
+  color: #007aff;
+  font-size: 12px;
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(0, 122, 255, 0.08);
+  }
+}
+
+.aggregate-dropdown-menu {
+  right: 0;
+  left: auto;
+  min-width: 80px;
+}
+
+/* 单个指标聚合类型下拉 */
+.metric-aggregate-dropdown {
+  right: 34px;
+  left: auto;
+  top: 100%;
+  width: 96px;
+  padding: 8px;
+}
+
+/* 添加字段按钮 */
+.add-field-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 8px;
+  padding: 4px 8px;
+  font-size: 14px;
+  color: #5db6ff;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background 0.2s;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  &:hover {
+    background: rgba(0, 122, 255, 0.08);
+  }
+}
+
+/* 添加字段下拉 - 相对于按钮定位 */
+.metric-add-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  z-index: 101;
+  min-width: 120px;
+}
+
+/* 滚动条样式 */
+.n20-pivot-container,
+.pivot-sidebar-left,
+.pivot-sidebar-right,
+.config-form,
+.dropdown-menu {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #c9cdd4;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a1a7b3;
+  }
+}
+
+/* 表格容器 */
+.table-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.table-header {
+  padding: 16px;
+  border-bottom: 1px solid #e5e6eb;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1d2129;
+  font-family: 'PingFang SC', sans-serif;
+  margin-bottom: 4px;
+}
+
+.table-desc {
+  font-size: 12px;
+  color: #86909c;
+  font-family: 'PingFang SC', sans-serif;
+}
+
+/* 交叉统计表格样式 */
+.cross-table-container {
+  flex: 1;
+  overflow: auto;
+}
+
+.cross-pivot-table {
+  width: 100%;
+  min-width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.cross-header-row th {
+  background: #f2f3f5;
+  border-right: 1px solid #e5e6eb;
+  border-bottom: 1px solid #e5e6eb;
+  padding: 9px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1d2129;
+  text-align: center;
+  height: 40px;
+  box-sizing: border-box;
+}
+
+.cross-dimension-header {
+  width: 177px;
+  min-width: 177px;
+  text-align: left !important;
+}
+
+.cross-metric-header {
+  width: 148px;
+  min-width: 148px;
+  text-align: right !important;
+}
+
+.cross-data-row td {
+  padding: 10px 16px;
+  border-right: 1px solid #e5e6eb;
+  border-bottom: 1px solid #e5e6eb;
+  font-size: 14px;
+  color: #1d2129;
+  vertical-align: middle;
+  height: 57px;
+  box-sizing: border-box;
+}
+
+.cross-dimension-cell {
+  background: #fff;
+  text-align: left !important;
+  width: 177px;
+  min-width: 177px;
+}
+
+.cross-metric-cell {
+  background: #fff;
+  text-align: right !important;
+  width: 148px;
+  min-width: 148px;
+}
+
+.cross-metric-value {
+  display: block;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #1d2129;
+  line-height: 22px;
+}
+
+.cross-metric-count {
+  display: block;
+  font-family: 'PingFang SC', sans-serif;
+  font-size: 12px;
+  color: #86909c;
+  line-height: 20px;
+}
+
+.cross-data-row:hover td {
+  background: #f7f8fa;
+}
+
+/* 分页组件 */
+.cross-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 8px 16px;
+  border: 1px solid #e5e6eb;
+  background: #fff;
+  height: 46px;
+  flex-shrink: 0;
+}
+
+.pagination-info {
+  font-size: 14px;
+  color: #1d2129;
+  margin-right: 8px;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.pagination-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  cursor: pointer;
+  color: #4e5969;
+  transition: all 0.2s;
+
+  i {
+    font-size: 12px;
+  }
+
+  &:hover:not(.disabled) {
+    background: #f7f8fa;
+    color: #007aff;
+  }
+
+  &.disabled {
+    color: #86909c;
+    cursor: not-allowed;
+  }
+}
+
+.pagination-current {
+  min-width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e8f7ff;
+  border-radius: 2px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #007aff;
+}
+
+.pagination-separator,
+.pagination-total {
+  font-size: 14px;
+  color: #1d2129;
+}
+
+.pagination-size-select {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #1d2129;
+  cursor: pointer;
+  transition: border-color 0.2s;
+
+  i {
+    font-size: 12px;
+    color: #4e5969;
+  }
+
+  &:hover {
+    border-color: #007aff;
+  }
+}
+
+.pagination-size-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  min-width: 100%;
+}
+
+.pagination-size-option {
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #1d2129;
+  white-space: nowrap;
+  transition: background 0.2s;
+
+  &:hover {
+    background: #f7f8fa;
+  }
+
+  &.active {
+    color: #007aff;
+  }
+}
+
+.pagination-jump {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pagination-jump-label {
+  font-size: 14px;
+  color: #86909c;
+}
+
+.pagination-jump-input {
+  width: 40px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #1d2129;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.2s;
+
+  &:focus {
+    border-color: #007aff;
+  }
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}