refactor: 菜单按PDCA五组重组 — 规划与目标/执行与控制/监控与评价/复盘与改进/系统与支持

frontend/src/components/charts/RiskCell.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="risk-cell" @click.stop="$emit('click')" style="cursor:pointer;">
+    <template v-if="quadrant">
+      <div v-for="risk in quadrant.risks" :key="risk.id" class="risk-item" :style="{ backgroundColor: riskTypeBg(risk.type) }">
+        <span class="risk-dot" :style="{ backgroundColor: riskTypeColor(risk.type) }"></span>
+        <span class="risk-name">{{ risk.name }}</span>
+        <span class="risk-value">{{ risk.detail?.split('，')[0] || '' }}</span>
+      </div>
+    </template>
+    <div v-else class="risk-empty">—</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ quadrant: any }>()
+defineEmits<{ click: [] }>()
+function riskTypeColor(type: string): string {
+  return { red: '#f56c6c', orange: '#e6a23c', yellow: '#409eff', green: '#67c23a' }[type] || '#999'
+}
+function riskTypeBg(type: string): string {
+  return { red: '#fef0f0', orange: '#fdf6ec', yellow: '#ecf5ff', green: '#f0f9eb' }[type] || '#f5f7fa'
+}
+</script>
+
+<style scoped>
+.risk-cell { min-height:80px; border-radius:6px; padding:6px; background:#fafafa; border:1px solid #e8e8e8; }
+.risk-item { padding:4px 6px; margin-bottom:3px; border-radius:4px; font-size:12px; line-height:1.4; }
+.risk-item:last-child { margin-bottom:0; }
+.risk-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
+.risk-name { font-weight:500; }
+.risk-value { display:block; font-size:11px; color:#666; margin-top:1px; padding-left:12px; }
+.risk-empty { color:#ddd; text-align:center; line-height:80px; font-size:13px; }
+</style>