Sfoglia il codice sorgente

refactor(sixHatPage): 优化六顶思考帽步骤展示样式与文案

1. 剥离多语言文案中自带的序号前缀,统一由页面渲染序号
2. 为步骤添加圆形编号徽章,调整间距与文字样式提升可读性
lsc 4 giorni fa
parent
commit
204ea352c3

+ 28 - 5
src/components/pages/workPage/components/sixHatPage.vue

@@ -272,7 +272,10 @@
       </div>
       <div class="shHowToContent" v-show="showHowTo">
         <div class="shHowToList">
-          <div class="shHowToItem" v-for="(step, idx) in effectiveHowToSteps" :key="idx">{{ step }}</div>
+          <div class="shHowToItem" v-for="(step, idx) in effectiveHowToSteps" :key="idx">
+            <span class="shHowToNum">{{ idx + 1 }}</span>
+            <span class="shHowToText">{{ step }}</span>
+          </div>
         </div>
       </div>
 
@@ -622,13 +625,13 @@ export default {
       const ids = this.work.members || [];
       return this.allStudents.filter(s => ids.indexOf(s.id) > -1).map(s => s.name);
     },
-    // 最终渲染的"怎么做"步骤 —— 固定显示 6 个帽子思考方法(i18n 定义)
+    // 最终渲染的"怎么做"步骤 —— 固定显示 6 个帽子思考方法(i18n 定义),剥离文案自带的序号前缀
     effectiveHowToSteps() {
       const l = this.lang;
       return [
         l.ssSHHowToStep1, l.ssSHHowToStep2, l.ssSHHowToStep3,
         l.ssSHHowToStep4, l.ssSHHowToStep5, l.ssSHHowToStep6,
-      ].filter(Boolean);
+      ].filter(Boolean).map(s => s.replace(/^\d+\.\s*/, ''));
     },
   },
   watch: {
@@ -1770,16 +1773,36 @@ export default {
 .shHowToList {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.375rem;
 }
 
 .shHowToItem {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
   font-size: 0.9375rem;
-  color: #555;
   line-height: 1.6;
   padding: 0.375rem 0;
 }
 
+.shHowToNum {
+  flex-shrink: 0;
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 50%;
+  background: #F5A623;
+  color: #fff;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.shHowToText {
+  color: #444;
+}
+
 .shScenarioBadge {
   display: inline-block;
   background: #fff6e5;

+ 6 - 6
src/lang/cn.json

@@ -2185,12 +2185,12 @@
   "ssSHHatPromptGreen":"有什么新的创意、替代方案或更好的解决办法?大胆想象,不必受限于常规。",
   "ssSHHatPromptBlue":"整体来看,这个议题最重要的是什么?我们的结论或下一步行动是什么?",
   "ssSHAddedToClipboard":"已添加到剪贴板",
-  "ssSHHowToStep1":"1. 白帽思考:收集客观事实和数据",
-  "ssSHHowToStep2":"2. 红帽思考:表达直觉和情感反应",
-  "ssSHHowToStep3":"3. 黑帽思考:识别风险和潜在问题",
-  "ssSHHowToStep4":"4. 黄帽思考:寻找优点和积极面",
-  "ssSHHowToStep5":"5. 绿帽思考:提出创新想法和方案",
-  "ssSHHowToStep6":"6. 蓝帽思考:总结思考过程和结论",
+  "ssSHHowToStep1":"白帽思考:收集客观事实和数据",
+  "ssSHHowToStep2":"红帽思考:表达直觉和情感反应",
+  "ssSHHowToStep3":"黑帽思考:识别风险和潜在问题",
+  "ssSHHowToStep4":"黄帽思考:寻找优点和积极面",
+  "ssSHHowToStep5":"绿帽思考:提出创新想法和方案",
+  "ssSHHowToStep6":"蓝帽思考:总结思考过程和结论",
   "ssFileTip": "文件上传指引",
   "ssFile": "文件上传",
   "ssUpload": "上传",

+ 6 - 6
src/lang/en.json

@@ -2184,12 +2184,12 @@
   "ssSHHatPromptGreen":"What new ideas, alternatives or better solutions can you think of? Be bold and creative.",
   "ssSHHatPromptBlue":"Overall, what matters most here? What is our conclusion or next step?",
   "ssSHAddedToClipboard":"Added to clipboard",
-  "ssSHHowToStep1":"1. White hat: collect objective facts and data",
-  "ssSHHowToStep2":"2. Red hat: express intuition and emotional reactions",
-  "ssSHHowToStep3":"3. Black hat: identify risks and potential problems",
-  "ssSHHowToStep4":"4. Yellow hat: look for positives and benefits",
-  "ssSHHowToStep5":"5. Green hat: propose new ideas and creative solutions",
-  "ssSHHowToStep6":"6. Blue hat: summarize the process and conclusions",
+  "ssSHHowToStep1":"White hat: collect objective facts and data",
+  "ssSHHowToStep2":"Red hat: express intuition and emotional reactions",
+  "ssSHHowToStep3":"Black hat: identify risks and potential problems",
+  "ssSHHowToStep4":"Yellow hat: look for positives and benefits",
+  "ssSHHowToStep5":"Green hat: propose new ideas and creative solutions",
+  "ssSHHowToStep6":"Blue hat: summarize the process and conclusions",
   "ssFileTip": "File upload guidance",
   "ssFile": "File upload",
   "ssUpload": "Upload",

+ 6 - 6
src/lang/hk.json

@@ -2185,12 +2185,12 @@
   "ssSHHatPromptGreen":"有什麼新的創意、替代方案或更好的解決辦法?大膽想象,不必受限於常規。",
   "ssSHHatPromptBlue":"整體來看,這個議題最重要的是什麼?我們的結論或下一步行動是什麼?",
   "ssSHAddedToClipboard":"已添加到剪貼板",
-  "ssSHHowToStep1":"1. 白帽思考:收集客觀事實和數據",
-  "ssSHHowToStep2":"2. 紅帽思考:表達直覺和情感反應",
-  "ssSHHowToStep3":"3. 黑帽思考:識別風險和潛在問題",
-  "ssSHHowToStep4":"4. 黃帽思考:尋找優點和積極面",
-  "ssSHHowToStep5":"5. 綠帽思考:提出創新想法和方案",
-  "ssSHHowToStep6":"6. 藍帽思考:總結思考過程和結論",
+  "ssSHHowToStep1":"白帽思考:收集客觀事實和數據",
+  "ssSHHowToStep2":"紅帽思考:表達直覺和情感反應",
+  "ssSHHowToStep3":"黑帽思考:識別風險和潛在問題",
+  "ssSHHowToStep4":"黃帽思考:尋找優點和積極面",
+  "ssSHHowToStep5":"綠帽思考:提出創新想法和方案",
+  "ssSHHowToStep6":"藍帽思考:總結思考過程和結論",
   "ssFileTip": "文件上傳指引",
   "ssFile": "文件上傳",
   "ssUpload": "上傳",