瀏覽代碼

fix(student): 修复六顶思考帽题型展示逻辑并补充cid参数

1.  在URL参数中新增cid传递逻辑
2.  将原KWL题型组件替换为六顶思考帽专属展示界面
3.  修正标题语言变量和AI分析面板显示条件
4.  新增六顶思考帽样式和数据处理逻辑
lsc 4 天之前
父節點
當前提交
f1a9951008
共有 2 個文件被更改,包括 179 次插入60 次删除
  1. 177 58
      src/views/Student/components/choiceQuestionDetailDialog.vue
  2. 2 2
      src/views/Student/index.vue

+ 177 - 58
src/views/Student/components/choiceQuestionDetailDialog.vue

@@ -887,10 +887,10 @@
       <div class="c_t72" v-if="props.showData && props.showData.toolType === 832">
       <div class="c_t72" v-if="props.showData && props.showData.toolType === 832">
         <div class="c_t72_title">
         <div class="c_t72_title">
           <div class="c_title">
           <div class="c_title">
-            <span>{{ lang.ssKwlTitle }}</span>
+            <span>{{ lang.ssSixHatTitle }}</span>
           </div>
           </div>
         </div>
         </div>
-        <span class="c_t72_type">{{ lang.ssKwlTitle }}</span>
+        <span class="c_t72_type">{{ lang.ssSixHatTitle }}</span>
         <div class="c_t72_msg" v-if="props.roleType == 1">
         <div class="c_t72_msg" v-if="props.roleType == 1">
           <div>{{ lang.ssAnswerCount }} {{ props.workArray.length }}<span
           <div>{{ lang.ssAnswerCount }} {{ props.workArray.length }}<span
               v-if="props.unsubmittedStudents.length > 0">/{{
               v-if="props.unsubmittedStudents.length > 0">/{{
@@ -919,9 +919,9 @@
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
-
+<!-- processedWorkArray.length > 0 && lookWorkData === null && props.showData.toolType == '832' && props.roleType == 1 -->
         <div class="aiAnalysis" style="margin-top:1rem ;"
         <div class="aiAnalysis" style="margin-top:1rem ;"
-            v-if="processedWorkArray.length > 0 && lookWorkData === null && props.showData.toolType == '831' && props.roleType == 1"
+            v-if="false"
             @click.stop="clickContent(false)">
             @click.stop="clickContent(false)">
             <div class="ai_header">
             <div class="ai_header">
               <div class="ai_title">
               <div class="ai_title">
@@ -964,68 +964,40 @@
           </div>
           </div>
 
 
 
 
-          <div class="c_t831_wd_content">
-            <!-- KWL 三栏 -->
-            <div class="kwl-grid" v-if="lookWorkData.content">
-              <!-- K - 已知 -->
-              <div class="kwl-col kwl-col--k">
-                <div class="kwl-col__header">
-                  <span class="kwl-col__badge">K</span>
-                  <span class="kwl-col__label">{{ lang.ssKwlKnown }}</span>
-                </div>
-                <div class="kwl-col__body">
-                  <template v-if="lookWorkData.content.know.length">
-                    <div v-for="(item, idx) in lookWorkData.content.know" :key="'k-' + idx" class="kwl-item">{{ item }}
-                    </div>
-                  </template>
-                  <div v-else class="kwl-empty">{{ lang.ssNone }}</div>
-                </div>
+          <div class="c_t832_wd_content" v-if="lookWorkData.content">
+            <!-- 成员列表 -->
+            <div class="sixhat-members" v-if="lookWorkData.content.members && lookWorkData.content.members.length">
+              <div class="sixhat-members__header">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+                  <circle cx="9" cy="7" r="4" />
+                  <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" />
+                </svg>
+                <span>{{ lang.ssSixHatGroupWork }}</span>
               </div>
               </div>
-
-              <!-- W - 想知 -->
-              <div class="kwl-col kwl-col--w">
-                <div class="kwl-col__header">
-                  <span class="kwl-col__badge">W</span>
-                  <span class="kwl-col__label">{{ lang.ssKwlWant }}</span>
-                </div>
-                <div class="kwl-col__body">
-                  <template v-if="lookWorkData.content.want.length">
-                    <div v-for="(item, idx) in lookWorkData.content.want" :key="'w-' + idx" class="kwl-item">{{ item }}
-                    </div>
-                  </template>
-                  <div v-else class="kwl-empty">{{ lang.ssNone }}</div>
-                </div>
+              <div class="sixhat-members__list">
+                <span v-for="(m, idx) in lookWorkData.content.members" :key="'m-' + idx" class="sixhat-member-chip">{{ m }}</span>
               </div>
               </div>
+            </div>
 
 
-              <!-- L - 已学 -->
-              <div class="kwl-col kwl-col--l">
-                <div class="kwl-col__header">
-                  <span class="kwl-col__badge">L</span>
-                  <span class="kwl-col__label">{{ lang.ssKwlLearned }}</span>
+            <!-- 场景描述 -->
+            <div class="sixhat-scenario" v-if="lookWorkData.content.scenario">
+              <div class="sixhat-scenario__text">{{ lookWorkData.content.scenario }}</div>
+            </div>
+
+            <!-- 六顶思考帽内容 -->
+            <div class="sixhat-grid">
+              <div v-for="hat in sixHatList" :key="hat.key" class="sixhat-col" :class="'sixhat-col--' + hat.key">
+                <div class="sixhat-col__header">
+                  <span class="sixhat-col__dot"></span>
+                  <span class="sixhat-col__label">{{ hat.label }}</span>
                 </div>
                 </div>
-                <div class="kwl-col__body">
-                  <template v-if="lookWorkData.content.learned.length">
-                    <div v-for="(item, idx) in lookWorkData.content.learned" :key="'l-' + idx" class="kwl-item">{{ item
-                      }}
-                    </div>
-                  </template>
+                <div class="sixhat-col__body">
+                  <div v-if="hat.content" class="sixhat-item">{{ hat.content }}</div>
                   <div v-else class="kwl-empty">{{ lang.ssNone }}</div>
                   <div v-else class="kwl-empty">{{ lang.ssNone }}</div>
                 </div>
                 </div>
               </div>
               </div>
             </div>
             </div>
-
-            <!-- 学习反思 -->
-            <div class="kwl-reflection">
-              <div class="kwl-reflection__header">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
-                </svg>
-                <span>{{ lang.ssKwlReflection }}</span>
-              </div>
-              <div class="kwl-reflection__body">
-                {{ lookWorkData.content.reflection ? lookWorkData.content.reflection : lang.ssNone }}
-              </div>
-            </div>
           </div>
           </div>
 
 
 
 
@@ -1361,6 +1333,26 @@ const lookWorkData = computed(() => {
   return _result
   return _result
 })
 })
 
 
+// 六顶思考帽配置
+const hatConfig = [
+  { key: 'white', label: lang.ssSixHatWhite, color: '#9ca3af', bg: '#f3f4f6' },
+  { key: 'red', label: lang.ssSixHatRed, color: '#ef4444', bg: '#fef2f2' },
+  { key: 'black', label: lang.ssSixHatBlack, color: '#1f2937', bg: '#374151' },
+  { key: 'yellow', label: lang.ssSixHatYellow, color: '#f59e0b', bg: '#fffbeb' },
+  { key: 'green', label: lang.ssSixHatGreen, color: '#22c55e', bg: '#f0fdf4' },
+  { key: 'blue', label: lang.ssSixHatBlue, color: '#3b82f6', bg: '#eff6ff' },
+]
+
+// 六顶思考帽内容列表(根据学生选择 hats 过滤)
+const sixHatList = computed(() => {
+  if (!lookWorkData.value?.content) return []
+  const hats = lookWorkData.value.content.hats || []
+  const c = lookWorkData.value.content.c || {}
+  return hatConfig
+    .filter(h => hats.includes(h.key))
+    .map(h => ({ ...h, content: c[h.key] || '' }))
+})
+
 // 判断文件类型
 // 判断文件类型
 const getFileType = (url: string): 'image' | 'video' | 'pdf' | 'office' | 'other' => {
 const getFileType = (url: string): 'image' | 'video' | 'pdf' | 'office' | 'other' => {
   if (!url) return 'other'
   if (!url) return 'other'
@@ -4312,6 +4304,133 @@ onUnmounted(() => {
   .kwl-grid {
   .kwl-grid {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr;
   }
   }
+
+  .sixhat-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 六顶思考帽内容 */
+.c_t832_wd_content {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sixhat-members {
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 8px;
+
+    svg {
+      color: #6b7280;
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}
+
+.sixhat-member-chip {
+  padding: 4px 12px;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  border-radius: 999px;
+  font-size: 12px;
+  color: #4b5563;
+}
+
+.sixhat-scenario {
+  padding: 12px 16px;
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: 10px;
+
+  &__text {
+    font-size: 13px;
+    color: #78350f;
+    line-height: 1.6;
+  }
+}
+
+.sixhat-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.sixhat-col {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+  }
+
+  &__dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &__body {
+    padding: 12px 14px;
+    flex: 1;
+    min-height: 60px;
+  }
+}
+
+.sixhat-item {
+  font-size: 13px;
+  color: #374151;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+/* 各帽子主题色 */
+.sixhat-col--white {
+  .sixhat-col__header { background: linear-gradient(135deg, #d1d5db, #9ca3af); }
+  .sixhat-col__dot { background: #fff; border: 1px solid #d1d5db; }
+}
+.sixhat-col--red {
+  .sixhat-col__header { background: linear-gradient(135deg, #ef4444, #dc2626); }
+  .sixhat-col__dot { background: #fca5a5; }
+}
+.sixhat-col--black {
+  .sixhat-col__header { background: linear-gradient(135deg, #374151, #1f2937); }
+  .sixhat-col__dot { background: #9ca3af; }
+}
+.sixhat-col--yellow {
+  .sixhat-col__header { background: linear-gradient(135deg, #f59e0b, #d97706); }
+  .sixhat-col__dot { background: #fde68a; }
+}
+.sixhat-col--green {
+  .sixhat-col__header { background: linear-gradient(135deg, #22c55e, #16a34a); }
+  .sixhat-col__dot { background: #bbf7d0; }
+}
+.sixhat-col--blue {
+  .sixhat-col__header { background: linear-gradient(135deg, #3b82f6, #2563eb); }
+  .sixhat-col__dot { background: #bfdbfe; }
 }
 }
 
 
 /* 文件预览卡片 */
 /* 文件预览卡片 */

+ 2 - 2
src/views/Student/index.vue

@@ -1684,11 +1684,11 @@ const elementDone = async (element: any, slideIndex: number) => {
       let newHash = hashPart
       let newHash = hashPart
       if (newHash.includes('?')) {
       if (newHash.includes('?')) {
         // 如果hash中已经有查询参数,添加&
         // 如果hash中已经有查询参数,添加&
-        newHash += `&courseid=${props.courseid || ''}&userid=${props.userid || ''}&stage=0&task=${slideIndex}&tool=0`
+        newHash += `&courseid=${props.courseid || ''}&userid=${props.userid || ''}&stage=0&task=${slideIndex}&tool=0&cid=${props.cid || ''}`
       } 
       } 
       else {
       else {
         // 如果hash中没有查询参数,添加?
         // 如果hash中没有查询参数,添加?
-        newHash += `?courseid=${props.courseid || ''}&userid=${props.userid || ''}&stage=0&task=${slideIndex}&tool=0`
+        newHash += `?courseid=${props.courseid || ''}&userid=${props.userid || ''}&stage=0&task=${slideIndex}&tool=0&cid=${props.cid || ''}`
       }
       }
 
 
       // 构建新的URL
       // 构建新的URL