|
|
@@ -887,10 +887,10 @@
|
|
|
<div class="c_t72" v-if="props.showData && props.showData.toolType === 832">
|
|
|
<div class="c_t72_title">
|
|
|
<div class="c_title">
|
|
|
- <span>{{ lang.ssKwlTitle }}</span>
|
|
|
+ <span>{{ lang.ssSixHatTitle }}</span>
|
|
|
</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>{{ lang.ssAnswerCount }} {{ props.workArray.length }}<span
|
|
|
v-if="props.unsubmittedStudents.length > 0">/{{
|
|
|
@@ -919,9 +919,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+<!-- processedWorkArray.length > 0 && lookWorkData === null && props.showData.toolType == '832' && props.roleType == 1 -->
|
|
|
<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)">
|
|
|
<div class="ai_header">
|
|
|
<div class="ai_title">
|
|
|
@@ -964,68 +964,40 @@
|
|
|
</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>
|
|
|
-
|
|
|
- <!-- 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>
|
|
|
|
|
|
- <!-- 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 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>
|
|
|
</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>
|
|
|
|
|
|
|
|
|
@@ -1361,6 +1333,26 @@ const lookWorkData = computed(() => {
|
|
|
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' => {
|
|
|
if (!url) return 'other'
|
|
|
@@ -4312,6 +4304,133 @@ onUnmounted(() => {
|
|
|
.kwl-grid {
|
|
|
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; }
|
|
|
}
|
|
|
|
|
|
/* 文件预览卡片 */
|