@mathwiz/ui-components 0.1.6 → 0.1.7

package/dist/components/UserProfile/UserProfile.css

@@ -0,0 +1,141 @@
+/* UserProfile 组件样式 */
+.user-profile-container {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+
+/* 触发区域样式 */
+.user-profile-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 8px);
+  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
+  border-radius: var(--border-radius-md, 6px);
+  transition: background-color var(--transition-duration-fast, 0.2s) ease;
+}
+
+.user-profile-trigger:hover {
+  background-color: var(--color-background-hover, #f5f5f5);
+}
+
+/* 用户名样式 */
+.user-name {
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-primary, #333);
+  font-size: var(--font-size-md, 14px);
+  line-height: 1.4;
+}
+
+/* 状态样式 */
+.user-profile-container.is-loading .user-profile-trigger {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.user-profile-container.has-error .user-profile-trigger {
+  border: 1px solid var(--color-error, #dc3545);
+}
+
+/* 加载和错误状态文本 */
+.user-profile-loading,
+.user-profile-error {
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
+  border-radius: var(--border-radius-md, 6px);
+  font-size: var(--font-size-sm, 12px);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.user-profile-loading {
+  background-color: var(--color-background-muted, #f8f9fa);
+  color: var(--color-text-muted, #6c757d);
+  min-width: 80px;
+}
+
+.user-profile-error {
+  background-color: var(--color-error-bg, #f8d7da);
+  color: var(--color-error, #721c24);
+  border: 1px solid var(--color-error-border, #f5c6cb);
+  min-width: 120px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .user-profile-trigger {
+    padding: var(--spacing-xs, 4px);
+    gap: var(--spacing-xs, 4px);
+  }
+
+  .user-name {
+    font-size: var(--font-size-sm, 12px);
+    display: none;
+    /* 在小屏幕上隐藏用户名 */
+  }
+
+  .user-profile-loading,
+  .user-profile-error {
+    font-size: var(--font-size-xs, 10px);
+    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
+  }
+}
+
+@media (min-width: 769px) {
+  .user-name {
+    display: inline;
+    /* 在较大屏幕上显示用户名 */
+  }
+}
+
+/* 暗色主题支持 */
+[data-theme="dark"] .user-profile-trigger:hover {
+  background-color: var(--color-background-hover-dark, #2d2d2d);
+}
+
+[data-theme="dark"] .user-name {
+  color: var(--color-text-primary-dark, #ffffff);
+}
+
+[data-theme="dark"] .user-profile-loading {
+  background-color: var(--color-background-muted-dark, #2d2d2d);
+  color: var(--color-text-muted-dark, #a0a0a0);
+}
+
+/* 高对比度模式支持 */
+@media (prefers-contrast: high) {
+  .user-profile-trigger:hover {
+    background-color: var(--color-background-hover-high-contrast, #000000);
+    outline: 2px solid var(--color-border-high-contrast, #ffffff);
+  }
+
+  .user-name {
+    font-weight: var(--font-weight-bold, 700);
+  }
+}
+
+/* 减少动画支持 */
+@media (prefers-reduced-motion: reduce) {
+  .user-profile-trigger {
+    transition: none;
+  }
+
+  .submenu-panel {
+    transition: none;
+  }
+}
+
+/* 焦点样式 - 无障碍访问支持 */
+.user-profile-trigger:focus-visible {
+  outline: 2px solid var(--color-focus-ring, #007bff);
+  outline-offset: 2px;
+}
+
+/* 禁用状态样式 */
+.user-profile-container:has(.submenu-item.is-disabled) {
+  cursor: not-allowed;
+}
+
+.user-profile-container:has(.submenu-item.is-disabled) .user-profile-trigger:hover {
+  background-color: transparent;
+}

package/dist/components/components.css

@@ -0,0 +1,222 @@
+/* Game Interactive Components */
+/* @import './gameInteractive/gameInteractive.css'; */
+
+/* Grade Navigation Styles */
+.grade-navigation {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.grade-navigation__title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.grade-navigation__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+.grade-card {
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-left: 4px solid;
+  border-radius: 8px;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.grade-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.grade-card--selected {
+  border-left-width: 6px;
+  background: #f8f9fa;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.grade-card__level {
+  font-size: 12px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+}
+
+.grade-card__name {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.grade-card__description {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+
+/* Side Navigation Styles */
+.side-navigation {
+  width: 300px;
+  background: white;
+  border-right: 1px solid #e0e0e0;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.side-navigation__header {
+  padding: 20px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f8f9fa;
+}
+
+.side-navigation__header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.side-navigation__content {
+  padding: 0;
+}
+
+.unit-section {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.unit-header {
+  padding: 16px 20px;
+  background: #f8f9fa;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color 0.2s ease;
+}
+
+.unit-header:hover {
+  background: #e9ecef;
+}
+
+.unit-title {
+  font-weight: 600;
+  color: #333;
+  font-size: 16px;
+}
+
+.unit-toggle {
+  transition: transform 0.3s ease;
+  color: #666;
+}
+
+.unit-toggle.expanded {
+  transform: rotate(180deg);
+}
+
+.lesson-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.lesson-item {
+  padding: 12px 20px 12px 40px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-left: 3px solid transparent;
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+
+.lesson-item:hover {
+  background: #f8f9fa;
+}
+
+.lesson-item--active {
+  background: #e3f2fd;
+  border-left-color: #2196f3;
+  font-weight: 500;
+}
+
+.lesson-item--completed {
+  color: #4caf50;
+}
+
+.lesson-item--completed .lesson-title::before {
+  content: '✓ ';
+  margin-right: 8px;
+  color: #4caf50;
+}
+
+.lesson-item--locked {
+  color: #999;
+  cursor: not-allowed;
+}
+
+.lesson-item--locked .lesson-title::before {
+  content: '🔒 ';
+  margin-right: 8px;
+}
+
+.lesson-title {
+  flex: 1;
+  color: inherit;
+}
+
+.lesson-duration {
+  font-size: 12px;
+  color: #666;
+  margin-left: 8px;
+}
+
+.lesson-status {
+  color: #4caf50;
+  font-weight: bold;
+  margin-left: 8px;
+}
+
+/* Grade Information Styles */
+.grade-info {
+  padding: 12px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.grade-level {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+.course-title {
+  font-size: 16px;
+  color: #333;
+  font-weight: 600;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .grade-navigation__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .side-navigation {
+    width: 100%;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+  }
+}

package/dist/components/radarAbility/AbilityAssessmentDashboard/AbilityAssessmentDashboard.module.css

@@ -0,0 +1,60 @@
+/* 复合组件 AbilityAssessmentDashboard 的内部布局 */
+/* 上下布局 3:2 */
+.dashboardLayout {
+  display: flex;
+  flex-direction: column;
+  gap: 24px; /* gap-6 */
+  height: 100%; /* Or a defined height for visualization */
+}
+
+.upperSection {
+  flex: 3; /* Represents 3/5 height */
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* 左右两份 */
+  gap: 24px; /* gap-6 */
+}
+
+.lowerSection {
+  flex: 2; /* Represents 2/5 height */
+  display: flex;
+  flex-direction: column;
+  gap: 16px; /* space-y-4 */
+  padding-top: 24px;
+  border-top: 1px solid #e2e8f0; /* border-gray-200 */
+}
+
+.radarChartArea {
+  position: relative;
+  height: 320px; /* h-80 from original, but using aspect-square for SVG */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .upperSection {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .dashboardLayout {
+    gap: 16px;
+  }
+}
+
+/* Animation for smooth appearance */
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/index.css

@@ -0,0 +1,63 @@
+@import "tailwindcss";
+@plugin '../hero.ts';
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  width: 100vw;
+  overflow-x: hidden;
+}
+
+#root {
+  width: 100vw;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+/* 全局 button 样式已移除，避免与 HeroUI Button 组件冲突 */
+/* HeroUI Button 组件会提供自己的样式 */
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+}

package/dist/pages/GradeUnitBrowserPage/GradeUnitBrowserPage.css

@@ -0,0 +1,250 @@
+/* GradeUnitBrowserPage 样式 */
+
+.grade-unit-browser-page {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "sidebar content";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 300px 1fr;
+  min-height: 100vh;
+  background-color: var(--page-background, #f8fafc);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+.grade-unit-browser-page--sidebar-collapsed {
+  grid-template-columns: 60px 1fr;
+}
+
+/* Header 区域 */
+.header-area {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  width: 100%;
+}
+
+/* Sidebar 区域 */
+.sidebar-area {
+  grid-area: sidebar;
+  background: white;
+  border-right: 1px solid var(--border-color, #e2e8f0);
+  overflow-y: auto;
+  height: 100vh;
+  position: sticky;
+  top: 0;
+}
+
+/* 内容区域 */
+.content-area {
+  grid-area: content;
+  padding: 24px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: white;
+  min-height: calc(100vh - 80px);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* 防止内容撑开容器 - 类似 App.css 中 main-view 的处理 */
+.content-area h1,
+.content-area h2,
+.content-area h3,
+.content-area h4,
+.content-area h5,
+.content-area h6,
+.content-area p,
+.content-area div,
+.content-area span {
+  max-width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: normal;
+  box-sizing: border-box;
+}
+
+/* 加载状态 */
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  color: var(--text-secondary, #64748b);
+  font-size: 16px;
+}
+
+.loading-spinner::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--border-color, #e2e8f0);
+  border-top: 2px solid var(--primary-color, #3b82f6);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-right: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 错误状态 */
+.error-message {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--error-color, #dc2626);
+  background: var(--error-bg, #fef2f2);
+  border: 1px solid var(--error-border, #fecaca);
+  border-radius: 8px;
+  margin: 20px;
+}
+
+.retry-button {
+  display: block;
+  margin: 20px auto;
+  padding: 10px 20px;
+  background: var(--primary-color, #3b82f6);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.retry-button:hover {
+  background: var(--primary-hover, #2563eb);
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-secondary, #64748b);
+}
+
+.empty-state h3 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .grade-unit-browser-page {
+    grid-template-areas:
+      "header"
+      "content";
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar-area {
+    display: none;
+  }
+
+  .content-area {
+    padding: 16px;
+    min-height: calc(100vh - 60px);
+  }
+
+  /* 移动端侧边栏展开状态 */
+  .grade-unit-browser-page.sidebar-open {
+    grid-template-areas:
+      "header"
+      "sidebar"
+      "content";
+  }
+
+  .grade-unit-browser-page.sidebar-open .sidebar-area {
+    display: block;
+    height: auto;
+    position: relative;
+    border-right: none;
+    border-bottom: 1px solid var(--border-color, #e2e8f0);
+  }
+}
+
+@media (max-width: 480px) {
+  .content-area {
+    padding: 12px;
+  }
+
+  .error-message {
+    margin: 10px;
+    padding: 20px 16px;
+  }
+
+  .retry-button {
+    margin: 10px auto;
+    padding: 8px 16px;
+    font-size: 13px;
+  }
+}
+
+/* 暗色主题支持 */
+@media (prefers-color-scheme: dark) {
+  .grade-unit-browser-page {
+    background-color: var(--page-background-dark, #0f172a);
+    color: var(--text-primary-dark, #f1f5f9);
+  }
+
+  .header-area,
+  .sidebar-area,
+  .content-area {
+    background: var(--surface-dark, #1e293b);
+  }
+
+  .sidebar-area {
+    border-right-color: var(--border-color-dark, #334155);
+  }
+
+  .error-message {
+    color: var(--error-color-dark, #f87171);
+    background: var(--error-bg-dark, #7f1d1d);
+    border-color: var(--error-border-dark, #b91c1c);
+  }
+}
+
+/* 无障碍性支持 */
+.grade-unit-browser-page:focus {
+  outline: 2px solid var(--focus-ring, #3b82f6);
+  outline-offset: 2px;
+}
+
+.retry-button:focus {
+  outline: 2px solid var(--focus-ring, #3b82f6);
+  outline-offset: 2px;
+}
+
+/* 高对比度模式支持 */
+@media (prefers-contrast: high) {
+  .grade-unit-browser-page {
+    border: 1px solid black;
+  }
+
+  .sidebar-area {
+    border-right: 2px solid black;
+  }
+
+  .retry-button {
+    border: 2px solid black;
+  }
+}