cn-rdms-web/src/views/workbench/index.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import { useWorkbenchStore } from '@/store/modules/workbench';
import { buildWorkbenchBannerSummary } from './homepage';
import { workbenchBannerSummaryMock } from './mock';
import {
  type WorkbenchColumnId,
  type WorkbenchModuleKey,
  useWorkbenchModules
} from './composables/use-workbench-modules';
import WorkbenchBanner from './modules/workbench-banner.vue';
import WorkbenchColumn from './modules/workbench-column.vue';
import WorkbenchEditOverlay from './modules/workbench-edit-overlay.vue';
import WorkbenchModuleLibrary from './modules/workbench-module-library.vue';
// 保留 6 个 + 重构 2 个（key 沿用）
import WorkbenchTodoPanel from './modules/workbench-todo-panel.vue';
import WorkbenchMyTask from './modules/workbench-my-task.vue';
import WorkbenchMyRequirement from './modules/workbench-my-requirement.vue';
import WorkbenchProjectGrid from './modules/workbench-project-grid.vue';
import WorkbenchShortcut from './modules/workbench-shortcut.vue';
import WorkbenchProjectHealth from './modules/workbench-project-health.vue';
import WorkbenchTeamTodo from './modules/workbench-team-todo.vue';
import WorkbenchFavorite from './modules/workbench-favorite.vue';
// 新增 16 个（蓝图 2026-05-22）
import WorkbenchMyTicket from './modules/workbench-my-ticket.vue';
import WorkbenchMentions from './modules/workbench-mentions.vue';
import WorkbenchApproval from './modules/workbench-approval.vue';
import WorkbenchWorklogReminder from './modules/workbench-worklog-reminder.vue';
import WorkbenchMyExecution from './modules/workbench-my-execution.vue';
import WorkbenchPersonalItem from './modules/workbench-personal-item.vue';
import WorkbenchProjectSnapshot from './modules/workbench-project-snapshot.vue';
import WorkbenchProductSnapshot from './modules/workbench-product-snapshot.vue';
import WorkbenchTeamWorklog from './modules/workbench-team-worklog.vue';
import WorkbenchTeamLoad from './modules/workbench-team-load.vue';
import WorkbenchRiskAlert from './modules/workbench-risk-alert.vue';
import WorkbenchMyWeekWorklog from './modules/workbench-my-week-worklog.vue';
import WorkbenchMyCompletionRate from './modules/workbench-my-completion-rate.vue';
import WorkbenchTicketSla from './modules/workbench-ticket-sla.vue';
import WorkbenchRecentVisit from './modules/workbench-recent-visit.vue';
import WorkbenchNoticeNotification from './modules/workbench-notice-notification.vue';

defineOptions({ name: 'Workbench' });

const { registerModuleComponent } = useWorkbenchModules();
// 保留 6 个 + 重构 2 个
registerModuleComponent('myTodo', WorkbenchTodoPanel);
registerModuleComponent('myTask', WorkbenchMyTask);
registerModuleComponent('myRequirement', WorkbenchMyRequirement);
registerModuleComponent('myProject', WorkbenchProjectGrid);
registerModuleComponent('shortcut', WorkbenchShortcut);
registerModuleComponent('projectHealth', WorkbenchProjectHealth);
registerModuleComponent('teamTodo', WorkbenchTeamTodo);
registerModuleComponent('favorite', WorkbenchFavorite);
// 新增 16 个
registerModuleComponent('myTicket', WorkbenchMyTicket);
registerModuleComponent('mentions', WorkbenchMentions);
registerModuleComponent('approval', WorkbenchApproval);
registerModuleComponent('worklogReminder', WorkbenchWorklogReminder);
registerModuleComponent('myExecution', WorkbenchMyExecution);
registerModuleComponent('personalItem', WorkbenchPersonalItem);
registerModuleComponent('projectSnapshot', WorkbenchProjectSnapshot);
registerModuleComponent('productSnapshot', WorkbenchProductSnapshot);
registerModuleComponent('teamWorklog', WorkbenchTeamWorklog);
registerModuleComponent('teamLoad', WorkbenchTeamLoad);
registerModuleComponent('riskAlert', WorkbenchRiskAlert);
registerModuleComponent('myWeekWorklog', WorkbenchMyWeekWorklog);
registerModuleComponent('myCompletionRate', WorkbenchMyCompletionRate);
registerModuleComponent('ticketSla', WorkbenchTicketSla);
registerModuleComponent('recentVisit', WorkbenchRecentVisit);
registerModuleComponent('noticeNotification', WorkbenchNoticeNotification);

const workbench = useWorkbenchStore();
const libraryOpen = ref(false);

onMounted(() => {
  workbench.load();
});

function onBeforeUnload(e: BeforeUnloadEvent) {
  if (workbench.mode === 'editing' && workbench.dirty) {
    e.preventDefault();
    e.returnValue = '';
  }
}
onMounted(() => window.addEventListener('beforeunload', onBeforeUnload));
onBeforeUnmount(() => window.removeEventListener('beforeunload', onBeforeUnload));

watch(
  () => workbench.error,
  err => {
    if (err) window.$message?.error(`布局保存失败：${err.message}`);
  }
);

const bannerSummary = computed(() => buildWorkbenchBannerSummary(workbenchBannerSummaryMock));

function onColumnUpdate(columnId: WorkbenchColumnId, modules: WorkbenchModuleKey[]) {
  workbench.setColumnModules(columnId, modules);
}

async function handleReset() {
  try {
    await ElMessageBox.confirm('重置后将恢复默认布局，确认继续？', '重置默认布局', { type: 'warning' });
    await workbench.resetToDefault();
  } catch {
    /* cancelled */
  }
}

onBeforeRouteLeave(async (_to, _from, next) => {
  if (workbench.mode === 'editing' && workbench.dirty) {
    try {
      await ElMessageBox.confirm('编辑布局未保存，确认离开？', '确认离开', { type: 'warning' });
      workbench.cancelEditing();
      next();
    } catch {
      next(false);
    }
  } else {
    next();
  }
});
</script>

<template>
  <div class="workbench">
    <WorkbenchBanner :summary="bannerSummary" />

    <div class="workbench__toolbar">
      <ElButton v-if="workbench.mode === 'normal'" type="primary" link @click="workbench.enterEditing">
        <SvgIcon icon="mdi:pencil-outline" />
        自定义布局
      </ElButton>
      <ElButton v-else type="primary" link @click="libraryOpen = true">
        <SvgIcon icon="mdi:view-grid-plus-outline" />
        模块库
      </ElButton>
    </div>

    <WorkbenchEditOverlay
      v-if="workbench.mode === 'editing'"
      :dirty="workbench.dirty"
      :saving="workbench.saving"
      @save="workbench.saveEditing"
      @cancel="workbench.cancelEditing"
      @reset="handleReset"
    />

    <ElEmpty v-if="workbench.layout.columns.every(c => c.modules.length === 0)" description="还没有可见模块">
      <ElButton type="primary" @click="workbench.enterEditing">添加模块</ElButton>
    </ElEmpty>

    <section v-else class="workbench__main">
      <WorkbenchColumn
        v-for="col in workbench.layout.columns"
        :key="col.id"
        :column-id="col.id"
        :modules="col.modules"
        :editing="workbench.mode === 'editing'"
        :collapsed="workbench.layout.collapsed"
        @update:modules="onColumnUpdate(col.id, $event)"
        @hide="workbench.hideModule"
        @toggle-collapse="workbench.toggleCollapse"
      />
    </section>

    <WorkbenchModuleLibrary
      v-model="libraryOpen"
      :hidden-metas="workbench.hiddenMetas"
      @add-module="
        (key, col) => {
          workbench.showModule(key, col);
          libraryOpen = false;
        }
      "
    />
  </div>
</template>

<style scoped>
.workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.workbench__toolbar {
  display: flex;
  justify-content: flex-end;
}
.workbench__main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
}
@media (width <= 1280px) {
  .workbench__main {
    grid-template-columns: 1fr;
  }
}
</style>