From 26db15e6d361394e9a6745d96c57898e91a89591 Mon Sep 17 00:00:00 2001
From: wecom-fullstack <fullstack@sxbh.ltd>
Date: Tue, 13 Oct 2026 17:53:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E7=B3=BB=E7=BB=9F=E7=BA=A7=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=BD=92=E4=BD=8D=EF=BC=88KPI=E5=AF=B9=E9=BD=90/?=
 =?UTF-8?q?=E9=A2=84=E7=AE=97=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3=E6=94=B6=E5=BD=92=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=EF=BC=89+=20=E4=B8=9A=E5=8A=A1=E9=A1=B5=E5=8F=B3=E4=B8=8B?=
 =?UTF-8?q?=E6=B5=AE=E7=AA=97=E6=8F=90=E9=86=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- KPIAlignment.vue: 移除页头切换按钮与模式选择器，去 saveAlignConfig；新增右下浮窗
- BudgetManagement.vue: 预算模式 el-switch -> 只读标签，去 onBudgetModeChange；新增右下浮窗
- RolePermissions.vue: 保留目标对齐正本，新增「预算模式」Tab（系统级切换入口）
- 仅 frontend/ 三件；build 通过
---
 frontend/src/views/BudgetManagement.vue | 50 +++++++++------
 frontend/src/views/KPIAlignment.vue     | 85 ++++++++-----------------
 frontend/src/views/RolePermissions.vue  | 53 ++++++++++++++-
 3 files changed, 107 insertions(+), 81 deletions(-)

diff --git a/frontend/src/views/BudgetManagement.vue b/frontend/src/views/BudgetManagement.vue
index ae9c6579..64082313 100644
--- a/frontend/src/views/BudgetManagement.vue
+++ b/frontend/src/views/BudgetManagement.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
     <h3>预算管理</h3>
+
+    <!-- 系统级设置提醒：右下角浮窗（仅提示，切换入口在【系统设置】） -->
+    <div v-if="sysHintVisible" class="sys-setting-hint">
+      <div class="hint-title">预算模式：{{ budgetMode === 'rolling' ? '滚动预算' : '固定预算' }}</div>
+      <div class="hint-text">系统级设置，影响全部账套 · 如需更改请到【系统设置 → 预算模式】</div>
+      <el-button text size="small" class="hint-close" @click="dismissSysHint">关闭</el-button>
+    </div>
     <div v-if="noMap" style="padding:60px 0;text-align:center;color:#999;">
       <p style="font-size:16px;margin-bottom:12px;">暂无已发布的战略地图</p>
       <p style="font-size:13px;">预算编制需要基于已发布的战略地图，请先在【战略地图】中创建并发布</p>
@@ -35,16 +42,10 @@
           <el-divider direction="vertical" />
           <div style="display:flex;align-items:center;gap:6px;font-size:12px;">
             <span style="color:#909399;">预算模式：</span>
-            <el-switch 
-              v-model="budgetMode" 
-              active-value="rolling" 
-              inactive-value="fixed"
-              active-text="滚动预算" 
-              inactive-text="固定预算"
-              @change="onBudgetModeChange"
-            />
-            <el-tag v-if="budgetMode === 'rolling'" size="small" type="warning" effect="plain">滚动12月</el-tag>
-            <el-tag v-else size="small" type="info" effect="plain">固定年度</el-tag>
+            <el-tag size="small" :type="budgetMode === 'rolling' ? 'warning' : 'info'" effect="plain">
+              {{ budgetMode === 'rolling' ? '滚动预算（滚动12月）' : '固定预算（固定年度）' }}
+            </el-tag>
+            <span style="color:#c0c4cc;">系统级设置，影响全部账套 · 更改请到【系统设置】</span>
           </div>
           <el-button v-if="budgetMode === 'rolling'" size="small" type="warning" @click="doRollForward" :loading="rollingForward">延展</el-button>
         </div>
@@ -1148,6 +1149,13 @@ async function confirmMethod() {
 
 // ── 滚动/固定预算切换 ──
 const budgetMode = ref('fixed')
+// 系统级设置提醒（右下角浮窗；仅提示，不提供切换；同会话不重复骚扰）
+const SYS_HINT_KEY = 'cma-sys-hint-dismissed:budget'
+const sysHintVisible = ref((() => { try { return sessionStorage.getItem(SYS_HINT_KEY) !== '1' } catch { return true } })())
+function dismissSysHint() {
+  sysHintVisible.value = false
+  try { sessionStorage.setItem(SYS_HINT_KEY, '1') } catch {}
+}
 const rollingForward = ref(false)
 
 async function loadBudgetConfig() {
@@ -1157,17 +1165,6 @@ async function loadBudgetConfig() {
   } catch { budgetMode.value = 'fixed' }
 }
 
-async function onBudgetModeChange(mode: string) {
-  try {
-    await budgetApi.setConfig({ mode, rolling_months: 12 })
-    ElMessage.success(`预算模式已切换为${mode === 'rolling' ? '滚动预算' : '固定预算'}`)
-    loadBudget()
-  } catch (e: any) {
-    budgetMode.value = mode === 'rolling' ? 'fixed' : 'rolling'
-    ElMessage.error(e?.response?.data?.detail || '切换失败')
-  }
-}
-
 async function doRollForward() {
   rollingForward.value = true
   try {
@@ -1733,4 +1730,15 @@ onMounted(async () => {
 .strategy-obj-block:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
 .strategy-obj-header { padding: 6px 0 8px; font-size: 13px; color: #555; font-weight: 500; }
 .strategy-obj-name::before { content: '◆ '; color: #999; font-size: 10px; }
+
+/* 右下角系统级设置提醒浮窗（只读提示） */
+.sys-setting-hint {
+  position: fixed; right: 20px; bottom: 20px; z-index: 2000;
+  background: #fff; border: 1px solid #e4e7ed; border-left: 4px solid #409eff;
+  border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+  padding: 10px 14px; max-width: 340px;
+}
+.sys-setting-hint .hint-title { font-size: 13px; font-weight: 600; color: #303133; }
+.sys-setting-hint .hint-text { font-size: 12px; color: #909399; line-height: 1.6; margin-top: 2px; }
+.sys-setting-hint .hint-close { margin-top: 4px; padding: 0; height: auto; }
 </style>
diff --git a/frontend/src/views/KPIAlignment.vue b/frontend/src/views/KPIAlignment.vue
index d4f9691b..5734d85e 100644
--- a/frontend/src/views/KPIAlignment.vue
+++ b/frontend/src/views/KPIAlignment.vue
@@ -3,46 +3,21 @@
     <div class="page-header">
       <h3>战略执行看板</h3>
       <div>
-        <el-button v-if="alignConfigured" @click="loadTree" :loading="loading" :disabled="loading" style="margin-right:8px;">
+        <el-button v-if="alignConfigured" @click="loadTree" :loading="loading" :disabled="loading">
           刷新数据
         </el-button>
-        <el-button type="primary" @click="showSelector = true">
-          {{ alignConfigured ? '切换模式' : '配置对齐模式' }}
-        </el-button>
       </div>
     </div>
 
-    <!-- 模式选择器 -->
-    <div v-if="showSelector" class="align-setup">
-      <el-alert v-if="!alignConfigured" title="系统尚未配置KPI对齐模式" type="warning" :closable="false" show-icon class="section-gap" />
-      <el-alert type="info" :closable="false" show-icon title="系统级设置，影响全部账套"
-        description="对齐模式保存在系统级配置中，切换后将同时作用于全部账套。" style="margin-bottom:12px;" />
-      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
-        <el-card v-for="mode in alignModes" :key="mode.key"
-          :class="{ 'mode-card': true, 'selected-mode': selectedMode === mode.key }"
-          shadow="hover" @click="selectedMode = mode.key"
-        >
-          <template #header>
-            <div style="display:flex;justify-content:space-between;align-items:center;">
-              <span style="font-weight:600;">{{ mode.name }}</span>
-              <el-radio :model-value="selectedMode === mode.key" :label="mode.key">&nbsp;</el-radio>
-            </div>
-          </template>
-          <p style="font-size:13px;color:#666;line-height:1.6;">{{ mode.description }}</p>
-          <el-tag type="info" size="small">示例</el-tag>
-          <p style="font-size:12px;color:#999;margin-top:4px;background:#f5f7fa;padding:6px 8px;border-radius:4px;">{{ mode.example }}</p>
-        </el-card>
-      </div>
-      <div style="margin-top:16px;display:flex;gap:12px;">
-        <el-button type="primary" size="large" @click="saveAlignConfig" :loading="saving" :disabled="!selectedMode">
-          {{ alignConfigured ? '切换为「' + selectedModeName + '」' : '确定并启用「' + selectedModeName + '」' }}
-        </el-button>
-        <el-button v-if="alignConfigured" @click="showSelector = false; selectedMode = currentMode?.key || ''">取消</el-button>
-      </div>
+    <!-- 系统级设置提醒：右下角浮窗（仅提示，切换入口在【系统设置→目标对齐】） -->
+    <div v-if="sysHintVisible" class="sys-setting-hint">
+      <div class="hint-title">对齐模式：{{ currentMode?.name || '未配置' }}</div>
+      <div class="hint-text">系统级设置，影响全部账套 · 如需更改请到【系统设置 → 目标对齐】</div>
+      <el-button text size="small" class="hint-close" @click="dismissSysHint">关闭</el-button>
     </div>
 
     <!-- 看板主体 -->
-    <div v-else>
+    <div>
       <!-- 地图选择器 -->
       <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;">
         <span style="font-size:13px;color:#666;white-space:nowrap;">筛选地图：</span>
@@ -138,7 +113,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 // 统一走 api/index.ts 的 axios 实例（拦截器自动带 Bearer / 401 跳登录）
 import { alignmentApi, mapApi } from '../api/index'
 
@@ -149,10 +124,15 @@ const alignModes = ref<any[]>([])
 const alignConfigured = ref(false)
 const currentMode = ref<any>(null)
 const selectedMode = ref('')
-const saving = ref(false)
+// 系统级设置提醒（右下角浮窗；仅提示，不提供切换；同会话不重复骚扰）
+const SYS_HINT_KEY = 'cma-sys-hint-dismissed:alignment'
+const sysHintVisible = ref((() => { try { return sessionStorage.getItem(SYS_HINT_KEY) !== '1' } catch { return true } })())
+function dismissSysHint() {
+  sysHintVisible.value = false
+  try { sessionStorage.setItem(SYS_HINT_KEY, '1') } catch {}
+}
 const loading = ref(false)
 const treeData = ref<any>(null)
-const showSelector = ref(false)
 
 // 地图选择
 const mapList = ref<any[]>([])
@@ -281,34 +261,10 @@ async function loadConfig() {
       currentMode.value = alignModes.value.find(m => m.key === r.mode.mode) || null
       selectedMode.value = r.mode.mode
     }
-    showSelector.value = !r.configured
     if (r.configured) loadTree()
   } catch {}
 }
 
-async function saveAlignConfig() {
-  if (!selectedMode.value) return
-  // 系统级设置二次确认：对齐模式存于全局配置（role_permissions 无 entity_id），切换影响全部账套
-  try {
-    await ElMessageBox.confirm(
-      `对齐模式为系统级设置，切换后将立即作用于全部账套。确认切换为「${selectedModeName.value}」？`,
-      '系统级设置二次确认',
-      { type: 'warning', confirmButtonText: '确认切换', cancelButtonText: '取消' }
-    )
-  } catch { return }
-  saving.value = true
-  try {
-    // 修复：原 `'Bearer ' + token` 模板字面量 bug（header 值被写死成字面量 → 必 401）
-    await alignmentApi.saveConfig({ mode: selectedMode.value })
-    ElMessage.success('对齐模式已设置')
-    currentMode.value = alignModes.value.find(m => m.key === selectedMode.value) || null
-    alignConfigured.value = true
-    showSelector.value = false
-    loadTree()
-  } catch { ElMessage.error('设置失败') }
-  saving.value = false
-}
-
 async function loadTree() {
   loading.value = true
   try {
@@ -365,4 +321,15 @@ onMounted(() => {
 .dev-red { background: #fef0f0; color: #f56c6c; }
 .dev-yellow { background: #fdf6ec; color: #e6a23c; }
 .dev-green { background: #f0f9eb; color: #67c23a; }
+
+/* 右下角系统级设置提醒浮窗（只读提示） */
+.sys-setting-hint {
+  position: fixed; right: 20px; bottom: 20px; z-index: 2000;
+  background: #fff; border: 1px solid #e4e7ed; border-left: 4px solid #409eff;
+  border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+  padding: 10px 14px; max-width: 340px;
+}
+.sys-setting-hint .hint-title { font-size: 13px; font-weight: 600; color: #303133; }
+.sys-setting-hint .hint-text { font-size: 12px; color: #909399; line-height: 1.6; margin-top: 2px; }
+.sys-setting-hint .hint-close { margin-top: 4px; padding: 0; height: auto; }
 </style>
diff --git a/frontend/src/views/RolePermissions.vue b/frontend/src/views/RolePermissions.vue
index ee592c5f..09d5f50b 100644
--- a/frontend/src/views/RolePermissions.vue
+++ b/frontend/src/views/RolePermissions.vue
@@ -134,6 +134,24 @@
           </div>
         </div>
       </el-tab-pane>
+
+      <!-- Tab 3: 预算模式（系统级） -->
+      <el-tab-pane label="预算模式" name="budget">
+        <p style="color:#999;font-size:13px;margin-top:4px;">
+          系统级设置，影响全部账套。业务页「预算管理」仅只读展示当前模式，切换入口统一在此。
+        </p>
+        <div style="margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
+          <el-radio-group v-model="budgetModeSel">
+            <el-radio-button value="fixed">固定预算</el-radio-button>
+            <el-radio-button value="rolling">滚动预算</el-radio-button>
+          </el-radio-group>
+          <el-button type="primary" :loading="savingBudget"
+            :disabled="!budgetModeSel || budgetModeSel === budgetModeCur" @click="saveBudgetMode">保存</el-button>
+          <span style="color:#909399;font-size:13px;">
+            当前：{{ budgetModeCur === 'rolling' ? '滚动预算（滚动12月）' : '固定预算（固定年度）' }}
+          </span>
+        </div>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -142,7 +160,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 // 统一走 api/index.ts 的 axios 实例（拦截器自动带 Bearer / 401 跳登录）
-import { permissionApi, alignmentApi } from '../api/index'
+import { permissionApi, alignmentApi, budgetApi } from '../api/index'
 
 // ── Tab 控制 ──
 const activeTab = ref('permissions')
@@ -290,6 +308,38 @@ async function saveAlignmentConfig() {
   savingAlign.value = false
 }
 
+// ── 预算模式（系统级；业务页仅只读，切换入口统一在此） ──
+const budgetModeCur = ref('fixed')
+const budgetModeSel = ref('fixed')
+const savingBudget = ref(false)
+
+async function loadBudgetMode() {
+  try {
+    const r: any = await budgetApi.getConfig()
+    budgetModeCur.value = r.budget_mode || r.mode || 'fixed'
+    budgetModeSel.value = budgetModeCur.value
+  } catch { budgetModeCur.value = 'fixed'; budgetModeSel.value = 'fixed' }
+}
+
+async function saveBudgetMode() {
+  if (!budgetModeSel.value || budgetModeSel.value === budgetModeCur.value) return
+  const label = budgetModeSel.value === 'rolling' ? '滚动预算' : '固定预算'
+  try {
+    await ElMessageBox.confirm(
+      `预算模式为系统级设置，切换后将立即作用于全部账套。确认切换为「${label}」？`,
+      '系统级设置二次确认',
+      { type: 'warning', confirmButtonText: '确认切换', cancelButtonText: '取消' }
+    )
+  } catch { return }
+  savingBudget.value = true
+  try {
+    await budgetApi.setConfig({ mode: budgetModeSel.value, rolling_months: 12 })
+    ElMessage.success('预算模式已设置')
+    await loadBudgetMode()
+  } catch { ElMessage.error('设置失败') }
+  savingBudget.value = false
+}
+
 async function previewTree() {
   loadingTree.value = true
   try {
@@ -304,6 +354,7 @@ async function previewTree() {
 onMounted(() => {
   loadPermData()
   loadAlignmentConfig()
+  loadBudgetMode()
 })
 </script>