فهرست منبع

feat(sixHatPage): 新增任务说明卡片展示讨论主题

1. 为六顶思考帽页面添加任务说明组件,当存在讨论场景时展示
2. 分别在中文、繁体中文、英文语言包中新增对应的标签文案
3. 编写组件样式,优化卡片展示效果
lsc 10 ساعت پیش
والد
کامیت
1f7d57f79d
4فایلهای تغییر یافته به همراه58 افزوده شده و 0 حذف شده
  1. 55 0
      src/components/pages/workPage/components/sixHatPage.vue
  2. 1 0
      src/lang/cn.json
  3. 1 0
      src/lang/en.json
  4. 1 0
      src/lang/hk.json

+ 55 - 0
src/components/pages/workPage/components/sixHatPage.vue

@@ -279,6 +279,19 @@
         </div>
       </div>
 
+      <!-- 任务说明:有讨论主题时显示 -->
+      <div class="shTaskDescCard" v-if="work.stage === 'activity' && work.scenario && work.scenario.trim()">
+        <div class="shTaskDescIcon">
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#F5A623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
+          </svg>
+        </div>
+        <div class="shTaskDescBody">
+          <div class="shTaskDescLabel">{{ lang.ssSHTaskDescLabel }}</div>
+          <div class="shTaskDescText">{{ work.scenario }}</div>
+        </div>
+      </div>
+
       <!-- 帽子圆点导航 -->
       <div class="shHatDots">
         <div class="shHatDots" v-for="(hatKey, idx) in selectedHats" :key="hatKey">
@@ -1792,6 +1805,48 @@ export default {
   transform: rotate(180deg);
 }
 
+.shTaskDescCard {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  background: #fff;
+  border-left: 3px solid #F5A623;
+  border-radius: 0.5rem;
+  padding: 0.875rem 1rem;
+  margin-bottom: 1rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.shTaskDescIcon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: #fff6e5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.shTaskDescBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.shTaskDescLabel {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: #F5A623;
+  margin-bottom: 0.25rem;
+}
+
+.shTaskDescText {
+  font-size: 0.9375rem;
+  color: #333;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
 .shHowToContent {
   background: #fff;
   border-radius: 0.5rem;

+ 1 - 0
src/lang/cn.json

@@ -2123,6 +2123,7 @@
   "ssSHScenarioSubtitle":"先确定一个问题或议题,后面的所有步骤都会围绕它展开。",
   "ssSHScenarioInputTitle":"请输入本轮讨论的主题",
   "ssSHScenarioInputPH":"写下这一轮要讨论的议题或情境...",
+  "ssSHTaskDescLabel":"任务说明",
   "ssSHScenarioExamples":"示例:",
   "ssSHScenarioEx1":"是否应该延长午休时间",
   "ssSHScenarioEx2":"怎样减少校园塑料使用",

+ 1 - 0
src/lang/en.json

@@ -2122,6 +2122,7 @@
   "ssSHScenarioSubtitle":"Start with a clear question or topic — everything else will revolve around it.",
   "ssSHScenarioInputTitle":"Enter the discussion topic for this round",
   "ssSHScenarioInputPH":"Write down the topic or scenario for this round...",
+  "ssSHTaskDescLabel":"Task",
   "ssSHScenarioExamples":"Examples:",
   "ssSHScenarioEx1":"Should recess be longer?",
   "ssSHScenarioEx2":"How can we reduce plastic in the school?",

+ 1 - 0
src/lang/hk.json

@@ -2123,6 +2123,7 @@
   "ssSHScenarioSubtitle":"先確定一個問題或議題,後面的所有步驟都會圍繞它展開。",
   "ssSHScenarioInputTitle":"請輸入本輪討論的主題",
   "ssSHScenarioInputPH":"寫下這一輪要討論的議題或情境...",
+  "ssSHTaskDescLabel":"任務說明",
   "ssSHScenarioExamples":"示例:",
   "ssSHScenarioEx1":"是否應該延長午休時間",
   "ssSHScenarioEx2":"怎樣減少校園塑料使用",