@mathwiz/ui-components 0.1.28 → 0.1.30

package/dist/pages/AreaGeometrySessionPage/AreaGeometrySessionPageIXL.css

@@ -0,0 +1,385 @@
+/* ==================== AreaGeometrySessionPageIXL 样式 ==================== */
+/* 完全遵循沉浸式学习-ixl风格.html设计语言 */
+
+/* 采用系统默认的无衬线字体，摒弃了圆润可爱的特殊字体，回归学术的严谨感 */
+.ixl-immersive-container {
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  min-height: 100vh;
+  background: var(--ixl-bg-gradient);
+  color: #333333;
+  box-sizing: border-box;
+}
+
+/* ==================== 顶部导航与面包屑 ==================== */
+.ixl-top-nav {
+  background-color: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0.75rem 1.5rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.ixl-breadcrumb {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.ixl-breadcrumb-item {
+  color: #6b7280;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.ixl-breadcrumb-item:hover {
+  text-decoration: underline;
+}
+
+.ixl-breadcrumb-separator {
+  margin: 0 0.5rem;
+  color: #9ca3af;
+}
+
+.ixl-breadcrumb-tag {
+  margin-left: 0.5rem;
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+
+/* ==================== 主布局：经典的左主（70%）右辅（30%）非对称布局 ==================== */
+.ixl-main-layout {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1rem 1.5rem 3rem;
+}
+
+@media (min-width: 1024px) {
+  .ixl-main-layout {
+    flex-direction: row;
+    gap: 1.5rem;
+    padding: 2rem 2rem 4rem;
+  }
+}
+
+/* ==================== 左侧：核心沉浸答题区 ==================== */
+.ixl-content-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* 主答题卡：小圆角(rounded-md)，纯白底色，极其克制的轻阴影 */
+.ixl-main-card {
+  background-color: white;
+  border-radius: 0.375rem; /* rounded-md */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  border: 1px solid #f1f5f9;
+  padding: 1.5rem 2rem 2.5rem;
+  position: relative;
+}
+
+@media (min-width: 1024px) {
+  .ixl-main-card {
+    padding: 1.5rem 3rem 2.5rem;
+  }
+}
+
+/* 状态提示横幅 */
+.ixl-status-banner {
+  background-color: var(--ixl-color-warning-bg);
+  border: 1px solid var(--ixl-color-warning-border);
+  color: var(--ixl-color-warning-text);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+.ixl-status-link {
+  color: var(--ixl-color-link);
+  text-decoration: underline;
+  margin-left: 0.25rem;
+}
+
+.ixl-status-link:hover {
+  text-decoration: none;
+}
+
+/* 问题展示区 */
+.ixl-question-display {
+  /* QuestionScene组件将渲染在这里 */
+}
+
+/* 无数据提示 */
+.ixl-no-data-message {
+  text-align: center;
+  padding: 3rem 1rem;
+}
+
+.ixl-no-data-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.ixl-no-data-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 0.5rem;
+}
+
+.ixl-no-data-desc {
+  font-size: 1rem;
+  color: #6b7280;
+}
+
+/* ==================== 温故知新区 (Work it out) ==================== */
+.ixl-review-area {
+  margin-top: 0.5rem;
+  margin-bottom: 3rem;
+}
+
+.ixl-review-header {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.ixl-review-title {
+  color: var(--ixl-color-link);
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.ixl-review-subtitle {
+  color: #6b7280;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+/* ==================== 右侧：数据驱动与游戏化仪表盘 ==================== */
+.ixl-dashboard-area {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .ixl-dashboard-area {
+    width: 200px;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+/* 子元素区域 */
+.ixl-children-area {
+  max-width: 1200px;
+  margin: 2rem auto 0;
+  padding-top: 1.5rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+/* ==================== QuestionScene覆盖样式 ==================== */
+/* 精确控制输入框，还原"填空题"的经典样式 */
+:global(.answer-form-container) {
+  background-color: white !important;
+  border-top: none !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+:global(.answer-form) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start !important;
+  gap: 1.5rem !important;
+}
+
+:global(.answer-input) {
+  width: 7rem !important;
+  padding: 0.375rem 0.5rem !important;
+  font-size: 1.125rem !important;
+  font-weight: 700 !important;
+  color: #1f2937 !important;
+  border: 1px solid var(--ixl-color-time) !important; /* 浅蓝色边框 #4fc3f7 */
+  border-radius: var(--ixl-radius-subtle) !important;
+  transition: all 0.2s ease-in-out !important;
+  background-color: white !important;
+  box-shadow: none !important;
+}
+
+:global(.answer-input:focus) {
+  outline: none !important;
+  border-color: var(--ixl-color-link) !important; /* 深蓝色 #0288d1 */
+  box-shadow: 0 0 0 2px rgba(2, 136, 209, 0.2) !important;
+}
+
+:global(.answer-input.error) {
+  border-color: #ef4444 !important;
+  background-color: rgba(239, 68, 68, 0.05) !important;
+}
+
+:global(.answer-label) {
+  font-size: 1.125rem !important;
+  font-weight: 600 !important;
+  color: #374151 !important;
+}
+
+:global(.answer-unit) {
+  font-size: 1rem !important;
+  color: #374151 !important;
+}
+
+/* 极简行动按钮：鲜明的草绿色，没有大圆角，传达确定性 */
+:global(.submit-button) {
+  background-color: var(--ixl-color-action) !important; /* #7cb342 */
+  color: white !important;
+  font-weight: 700 !important;
+  padding: 0.5rem 2rem !important;
+  border-radius: 4px !important;
+  font-size: 1rem !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+  transition: background-color 0.2s ease-in-out !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+:global(.submit-button:hover) {
+  background-color: #689f38 !important; /* 深一点的绿色 */
+}
+
+:global(.submit-button:active) {
+  background-color: #558b2f !important; /* 更深的绿色 */
+}
+
+/* 验证错误提示 */
+:global(.validation-error) {
+  margin-top: 0.75rem !important;
+  color: #ef4444 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+}
+
+/* 问题显示区域优化 - 彻底移除MathCardV2的嵌套线框 */
+:global(.question-display-area) {
+  padding: 1.5rem 0 !important;
+}
+
+:global(.question-scene-container) {
+  padding: 0 !important;
+  max-width: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+:global(.question-scene-card) {
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+/* 移除MathCardV2所有嵌套容器的边框 */
+:global(.math-card-v2-container),
+:global(.math-card-v2-content),
+:global(.math-card-v2-card) {
+  border: none !important;
+  box-shadow: none !important;
+  background-color: transparent !important;
+}
+
+/* 移除可能存在的其他边框 */
+:global([class*="math-card"]),
+:global([class*="MathCard"]) {
+  border: none !important;
+}
+
+/* ==================== 响应式设计 ==================== */
+
+/* 平板端 (768px-1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .ixl-main-layout {
+    padding: 1.5rem 1.5rem 3rem;
+  }
+
+  .ixl-dashboard-area {
+    flex-direction: row;
+    order: -1; /* 在平板端将仪表盘移到顶部 */
+    margin-bottom: 1rem;
+  }
+
+  .ixl-main-card {
+    padding: 1.5rem 2rem 2rem;
+  }
+}
+
+/* 移动端 (<768px) */
+@media (max-width: 767px) {
+  .ixl-main-layout {
+    padding: 1rem 1rem 2rem;
+  }
+
+  .ixl-top-nav {
+    padding: 0.75rem 1rem;
+  }
+
+  .ixl-main-card {
+    padding: 1rem 1.25rem 1.5rem;
+  }
+
+  .ixl-status-banner {
+    font-size: 0.8125rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  :global(.answer-form) {
+    flex-direction: column !important;
+    align-items: stretch !important;
+  }
+
+  :global(.answer-input) {
+    width: 100% !important;
+  }
+
+  :global(.submit-button) {
+    width: 100% !important;
+  }
+}
+
+
+/* ==================== 标题颜色类 ==================== */
+.ixl-title-color-triangle { color: var(--ixl-color-link); }
+.ixl-title-color-parallelogram { color: var(--ixl-color-questions); }
+.ixl-title-color-trapezoid { color: var(--ixl-color-score); }
+.ixl-title-color-age { color: #8a2be2; }
+.ixl-title-color-default { color: #1f2937; }
+
+/* ==================== MathCardV2 文本样式覆盖（IXL风格适配） ==================== */
+/* 确保问题场景中的正文文本使用更新后的字体样式 */
+.ixl-immersive-container :global(.mathcard-v2-text) {
+  font-family: var(--mc-font-sans);
+  font-size: 0.9375rem !important; /* 15px */
+  font-weight: var(--mc-font-normal) !important; /* 400 */
+  line-height: 1.6 !important;
+  letter-spacing: 0.01em !important;
+  color: var(--mc-text-body) !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media (max-width: 768px) {
+  .ixl-immersive-container :global(.mathcard-v2-text) {
+    font-size: 0.875rem !important; /* 14px */
+    line-height: 1.5 !important;
+  }
+}

package/dist/pages/AreaGeometrySessionPage/AreaGeometrySessionPageIXL.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { AreaGeometrySessionPageProps } from './types';
+import './AreaGeometrySessionPageIXL.css';
+/**
+ * AreaGeometrySessionPageIXL - 几何与年龄问题统一会话页面（IXL风格改造版）
+ *
+ * 这是一个IXL风格改造版本，完全参考沉浸式学习-ixl风格.html设计语言：
+ * 1. 70%/30%非对称布局，左侧沉浸式答题区，右侧数据仪表盘
+ * 2. 简洁无嵌套设计，消除"套娃式线框"
+ * 3. 统一色彩系统，消除"色彩割裂"
+ * 4. 非对称灵活排版，消除"居中单调排版"
+ * 5. 教学支架、状态横幅、温故知新等完整教学支持
+ *
+ * 注意：这是一个独立版本，不影响原有的AreaGeometrySessionPage组件。
+ * 业务项目可以根据需要选择使用原版或IXL版本。
+ *
+ * @example
+ * ```tsx
+ * import { AreaGeometrySessionPageIXL } from './AreaGeometrySessionPageIXL';
+ * import { adaptGeometryDataSync } from '../data/GeometryProblemAdapterV4';
+ * import triangleJson from './triangle-data.json';
+ *
+ * const problemData = adaptGeometryDataSync(triangleJson).data;
+ * <AreaGeometrySessionPageIXL problemData={problemData} />
+ * ```
+ */
+export declare const AreaGeometrySessionPageIXL: React.FC<AreaGeometrySessionPageProps>;
+export default AreaGeometrySessionPageIXL;
+//# sourceMappingURL=AreaGeometrySessionPageIXL.d.ts.map

package/dist/pages/AreaGeometrySessionPage/AreaGeometrySessionPageIXL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaGeometrySessionPageIXL.d.ts","sourceRoot":"","sources":["../../../src/pages/AreaGeometrySessionPage/AreaGeometrySessionPageIXL.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAcnD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,kCAAkC,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAoI7E,CAAC;AAGF,eAAe,0BAA0B,CAAC"}

package/dist/pages/AreaGeometrySessionPage/components/LearningDashboardPlaceholder.css

@@ -0,0 +1,219 @@
+/* LearningDashboardPlaceholder样式 - IXL风格数据面板 */
+
+.ixl-dashboard-panels {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .ixl-dashboard-panels {
+    flex-direction: column;
+  }
+}
+
+/* 数据面板卡片基础样式 */
+.ixl-dashboard-card {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+  .ixl-dashboard-card {
+    flex: none;
+  }
+}
+
+/* 卡片头部 - 彩色背景 */
+.ixl-dashboard-card-header {
+  background-color: var(--ixl-color-questions); /* 默认绿色，会被具体卡片覆盖 */
+  color: white;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.5rem 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  line-height: 1.1;
+  position: relative;
+}
+
+/* 答题数卡片 - 绿色 */
+.ixl-questions-card .ixl-dashboard-card-header {
+  background-color: var(--ixl-color-questions); /* #9ccc65 */
+}
+
+/* 用时卡片 - 蓝色 */
+.ixl-time-card .ixl-dashboard-card-header {
+  background-color: var(--ixl-color-time); /* #4fc3f7 */
+}
+
+/* 得分卡片 - 橙色 */
+.ixl-score-card .ixl-dashboard-card-header {
+  background-color: var(--ixl-color-score); /* #ff8a65 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 50px;
+}
+
+/* 得分副标题 */
+.ixl-score-subtitle {
+  font-size: 0.625rem;
+  opacity: 0.9;
+  font-weight: 400;
+  text-transform: capitalize;
+  margin-top: 2px;
+}
+
+/* 帮助图标 */
+.ixl-help-icon {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.625rem;
+  cursor: help;
+}
+
+/* 卡片主体 - 白色背景显示数值 */
+.ixl-dashboard-card-body {
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 0;
+  flex: 1;
+}
+
+/* 大数值显示 */
+.ixl-dashboard-value {
+  font-size: 2.25rem; /* text-3xl */
+  font-weight: 700;
+  color: #374151;
+}
+
+/* 时间显示样式 */
+.ixl-time-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  color: #6b7280;
+}
+
+.ixl-time-unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ixl-time-value {
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 700;
+  color: var(--ixl-color-time);
+  background: white;
+  border: 1px solid #e2e8f0;
+  width: 2.375rem; /* 38px */
+  height: 2.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Arial, sans-serif;
+}
+
+.ixl-time-label {
+  font-size: 0.6875rem; /* 11px */
+  font-family: Arial, sans-serif;
+  color: #9ca3af;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 2px;
+}
+
+.ixl-time-separator {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #6b7280;
+  padding-bottom: 0.75rem; /* 与数字对齐 */
+}
+
+/* 说明文本 */
+.ixl-dashboard-note {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  text-align: center;
+  font-style: italic;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px dashed #e2e8f0;
+  width: 100%;
+  grid-column: 1 / -1;
+}
+
+/* 响应式设计 */
+@media (max-width: 1023px) {
+  .ixl-dashboard-panels {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .ixl-dashboard-card {
+    min-width: calc(33.333% - 0.667rem);
+  }
+
+  .ixl-dashboard-card-header {
+    font-size: 0.6875rem;
+    padding: 0.375rem 0.375rem;
+  }
+
+  .ixl-dashboard-value {
+    font-size: 1.875rem; /* text-2xl */
+  }
+
+  .ixl-time-value {
+    font-size: 1.125rem; /* text-lg */
+    width: 2rem;
+    height: 2rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .ixl-dashboard-panels {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .ixl-dashboard-card {
+    min-width: 100%;
+  }
+
+  .ixl-dashboard-card-header {
+    font-size: 0.75rem;
+    padding: 0.5rem 0.5rem;
+  }
+
+  .ixl-dashboard-value {
+    font-size: 2rem;
+  }
+
+  .ixl-time-display {
+    gap: 0.5rem;
+  }
+}

package/dist/pages/AreaGeometrySessionPage/components/LearningDashboardPlaceholder.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './LearningDashboardPlaceholder.css';
+/**
+ * LearningDashboardPlaceholder - 学习仪表盘占位符组件
+ *
+ * 完全按照IXL风格HTML设计的数据面板：
+ * 1. 答题数面板（绿色标题）
+ * 2. 用时面板（蓝色标题）
+ * 3. 智能得分面板（橙色标题）
+ *
+ * 每个面板都是独立卡片，有彩色标题区和白色数字区。
+ */
+export declare const LearningDashboardPlaceholder: React.FC;
+export default LearningDashboardPlaceholder;
+//# sourceMappingURL=LearningDashboardPlaceholder.d.ts.map

package/dist/pages/AreaGeometrySessionPage/components/LearningDashboardPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearningDashboardPlaceholder.d.ts","sourceRoot":"","sources":["../../../../src/pages/AreaGeometrySessionPage/components/LearningDashboardPlaceholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oCAAoC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,4BAA4B,EAAE,KAAK,CAAC,EAuDhD,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/pages/AreaGeometrySessionPage/components/ReviewSectionPlaceholder.css

@@ -0,0 +1,64 @@
+/* IXL风格温故知新卡片样式 - 完全按照HTML设计 */
+
+/* 容器 - 外层容器样式在AreaGeometrySessionPageIXL.css中定义 */
+
+/* 网格布局 */
+.ixl-work-it-out-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 0.75rem; /* gap-3 */
+}
+
+@media (min-width: 768px) {
+  .ixl-work-it-out-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 卡片 - 默认天蓝色样式 */
+.ixl-work-it-out-card {
+  background-color: #f0f9ff; /* bg-[#f0f9ff] */
+  border: 1px solid #bae6fd; /* border-[#bae6fd] */
+  border-radius: 0.375rem; /* rounded-md */
+  padding: 0.75rem 1rem; /* px-4 py-3 */
+  display: flex;
+  align-items: center;
+  gap: 0.75rem; /* gap-3 */
+  transition: background-color 0.2s ease-in-out;
+  text-decoration: none;
+  color: var(--ixl-color-link); /* #0288d1 */
+  font-size: 0.875rem; /* text-sm */
+  min-height: 3.5rem;
+}
+
+.ixl-work-it-out-card:hover {
+  background-color: #e0f2fe; /* hover:bg-[#e0f2fe] */
+}
+
+/* 紫色卡片样式 */
+.ixl-work-it-out-card-purple {
+  background-color: #faf5ff; /* bg-purple-50 */
+  border-color: #e9d5ff; /* border-purple-200 */
+  color: #7c3aed; /* text-purple-700 */
+}
+
+.ixl-work-it-out-card-purple:hover {
+  background-color: #f3e8ff; /* hover:bg-purple-100 */
+}
+
+/* 图标 */
+.ixl-work-it-out-icon {
+  font-size: 1.125rem; /* text-lg */
+  color: #38bdf8; /* text-[#38bdf8] */
+  flex-shrink: 0;
+}
+
+.ixl-work-it-out-icon-purple {
+  color: #a78bfa; /* text-purple-400 */
+}
+
+/* 文本 */
+.ixl-work-it-out-text {
+  flex: 1;
+  line-height: 1.4;
+}