aegon-lv82 1.0.0

package/src/views/gen-ai/management-center/index.vue

@@ -0,0 +1,1815 @@
+<template>
+  <div class="management-center-page">
+    <main class="management-center-page__body">
+      <section class="management-center-hero">
+        <h2 class="management-center-hero__title">管理中心</h2>
+        <p class="management-center-hero__desc gen-ai-page-hero-desc">
+          角色1可以在此處對行業及視角進行管理
+        </p>
+      </section>
+
+      <div class="management-center-top">
+        <el-badge
+          :value="pendingList.length"
+          :max="99"
+          :hidden="pendingList.length === 0"
+          type="danger"
+          :badge-style="{ marginRight: '10px', marginTop: '-5px' }"
+          class="management-center-pending-badge"
+        >
+          <button
+            type="button"
+            class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--outline"
+            @click="openPendingDialog"
+          >
+            待處理選項
+          </button>
+        </el-badge>
+      </div>
+
+      <section class="management-center-panel">
+        <el-tabs
+          v-model="activeTab"
+          type="card"
+          class="management-center-tabs"
+          @tab-change="handleTabChange"
+        >
+          <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id" />
+        </el-tabs>
+
+        <div class="management-center-panel__card">
+          <template v-if="activeTab !== 'transfer'">
+            <div class="management-center-card__head">
+              <div class="management-center-card__head-left">
+                <button
+                  type="button"
+                  class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--primary"
+                  @click="openAddDialog"
+                >
+                  新增
+                </button>
+              </div>
+              <h3 class="management-center-card__title gen-ai-page-hero-desc">{{ cardTitle }}</h3>
+
+              <div class="management-center-card__actions">
+                <label class="management-center-field">
+                  <span class="gen-ai-filter-field-label">Search</span>
+                  <el-input v-model="keyword" clearable class="management-center-field__input" />
+                </label>
+                <button
+                  type="button"
+                  class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--primary"
+                  @click="handleRefresh"
+                >
+                  Refresh
+                </button>
+              </div>
+            </div>
+
+            <el-table
+              :data="paginatedRows"
+              :fit="true"
+              table-layout="fixed"
+              class="management-center-table"
+            >
+              <el-table-column
+                label="名稱"
+                min-width="320"
+                header-align="left"
+                class-name="mgmt-col-name"
+              >
+                <template #default="{ row }">
+                  <span class="management-center-table__name management-center-table__name--pill">{{
+                    row.name
+                  }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="刪除" width="88" align="center" class-name="mgmt-col-delete">
+                <template #default="{ row }">
+                  <button
+                    type="button"
+                    class="management-center-delete-btn"
+                    aria-label="刪除"
+                    @click="handleDelete(row)"
+                  >
+                    <el-icon>
+                      <Delete />
+                    </el-icon>
+                  </button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <GenAiPagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :page-sizes="[5, 10, 20]"
+              :total="filteredRows.length"
+            />
+          </template>
+
+          <template v-else>
+            <div class="management-center-transfer-head">
+              <h3 class="management-center-transfer__title gen-ai-page-hero-desc">報告權限轉移</h3>
+              <div class="management-center-transfer-filters">
+                <label class="management-center-field">
+                  <span class="gen-ai-filter-field-label">報告名稱</span>
+                  <el-input
+                    v-model="transferFilters.reportName"
+                    clearable
+                    :maxlength="TRANSFER_REPORT_NAME_MAX_LENGTH"
+                    class="management-center-transfer-field__input management-center-transfer-field__input--report-name"
+                    placeholder="香港房地產風控年報 2024"
+                  />
+                </label>
+                <label class="management-center-field">
+                  <span class="gen-ai-filter-field-label">所屬行業</span>
+                  <el-select
+                    v-model="transferFilters.industries"
+                    multiple
+                    clearable
+                    collapse-tags
+                    collapse-tags-tooltip
+                    placeholder=""
+                    class="management-center-transfer-field__select"
+                  >
+                    <el-option
+                      v-for="item in industries"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.name"
+                    />
+                  </el-select>
+                </label>
+                <label class="management-center-field management-center-field--year">
+                  <span class="gen-ai-filter-field-label">年份</span>
+                  <el-date-picker
+                    v-model="transferFilters.yearRange"
+                    type="yearrange"
+                    range-separator="-"
+                    format="YYYY"
+                    value-format="YYYY"
+                    start-placeholder="2024"
+                    end-placeholder="2026"
+                    clearable
+                    class="management-center-transfer-field__date"
+                  />
+                </label>
+                <label class="management-center-field">
+                  <span class="gen-ai-filter-field-label">發起人</span>
+                  <el-select
+                    v-model="transferFilters.initiators"
+                    multiple
+                    filterable
+                    clearable
+                    collapse-tags
+                    collapse-tags-tooltip
+                    placeholder=""
+                    class="management-center-transfer-field__select"
+                  >
+                    <el-option
+                      v-for="name in initiatorOptions"
+                      :key="name"
+                      :label="name"
+                      :value="name"
+                    />
+                  </el-select>
+                </label>
+                <button
+                  type="button"
+                  class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--primary"
+                  @click="handleTransferSearch"
+                >
+                  查詢
+                </button>
+              </div>
+            </div>
+
+            <el-table
+              :data="paginatedTransferReports"
+              :fit="true"
+              table-layout="fixed"
+              class="management-center-table management-center-transfer-table"
+            >
+              <el-table-column label="報告名稱" min-width="220" prop="name" />
+              <el-table-column label="行業" min-width="120" prop="industry" />
+              <el-table-column label="年份" width="88" align="center" prop="year" />
+              <el-table-column label="狀態" width="100" align="center" prop="status" />
+              <el-table-column label="發起人" min-width="140" prop="initiator" />
+              <el-table-column
+                label="編輯人"
+                min-width="220"
+                prop="editors"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                width="140"
+                align="center"
+                header-align="center"
+                class-name="mgmt-col-transfer-action"
+                fixed="right"
+              >
+                <template #header>
+                  <span style="margin-right: 0 !important" class="mgmt-transfer-action-label"
+                    >操作</span
+                  >
+                </template>
+                <template #default="{ row }">
+                  <button
+                    type="button"
+                    class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--outline mgmt-transfer-btn"
+                    @click="handleTransfer(row)"
+                  >
+                    轉移
+                  </button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <GenAiPagination
+              v-model:current-page="transferReportPage"
+              v-model:page-size="transferReportPageSize"
+              :page-sizes="[5, 10, 20]"
+              :total="filteredTransferReports.length"
+            />
+
+            <div class="management-center-transfer__divider" />
+
+            <h3 class="management-center-transfer__title gen-ai-page-hero-desc">轉移記錄</h3>
+
+            <el-table
+              :data="paginatedTransferRecords"
+              :fit="true"
+              table-layout="fixed"
+              class="management-center-table management-center-transfer-table"
+            >
+              <el-table-column label="報告名稱" min-width="220" prop="reportName" />
+              <el-table-column label="原發起人" min-width="140" prop="originalInitiator" />
+              <el-table-column label="現發起人" min-width="140" prop="currentInitiator" />
+              <el-table-column label="權限操作人員" min-width="140" prop="operator" />
+              <el-table-column label="操作時間" min-width="180" prop="operatedAt" />
+            </el-table>
+
+            <GenAiPagination
+              v-model:current-page="transferHistoryPage"
+              v-model:page-size="transferHistoryPageSize"
+              :page-sizes="[5, 10, 20]"
+              :total="transferRecords.length"
+            />
+          </template>
+        </div>
+      </section>
+    </main>
+
+    <!-- 新增彈窗 -->
+    <el-dialog
+      v-model="addDialogVisible"
+      width="840px"
+      append-to-body
+      :show-close="false"
+      class="mgmt-dialog mgmt-dialog--add"
+      header-class="mgmt-dialog__header"
+    >
+      <template #header="{ close }">
+        <span class="mgmt-dialog__title">{{ addDialogTitle }}</span>
+        <button type="button" class="mgmt-dialog__close" aria-label="關閉" @click="close">×</button>
+      </template>
+      <div class="mgmt-add-form">
+        <el-input
+          v-model="addInput"
+          type="textarea"
+          :rows="10"
+          :maxlength="NAME_MAX_LENGTH"
+          show-word-limit
+          resize="none"
+          placeholder=""
+          class="mgmt-add-form__input"
+        />
+      </div>
+      <template #footer>
+        <div class="mgmt-dialog__footer">
+          <button
+            type="button"
+            class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--ghost"
+            @click="addDialogVisible = false"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--primary"
+            @click="confirmAdd"
+          >
+            確認
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 轉移報告發起人權限彈窗 -->
+    <el-dialog
+      v-model="transferDialogVisible"
+      width="840px"
+      append-to-body
+      :show-close="false"
+      class="mgmt-dialog mgmt-dialog--add mgmt-dialog--transfer"
+      header-class="mgmt-dialog__header"
+    >
+      <template #header="{ close }">
+        <span class="mgmt-dialog__title">轉移報告發起人權限</span>
+        <button type="button" class="mgmt-dialog__close" aria-label="關閉" @click="close">×</button>
+      </template>
+      <div class="mgmt-transfer-form">
+        <label class="mgmt-transfer-form__field">
+          <span class="mgmt-transfer-form__label">用戶</span>
+          <el-select
+            v-model="transferSelectedUser"
+            filterable
+            clearable
+            placeholder=""
+            class="mgmt-transfer-form__select"
+          >
+            <el-option
+              v-for="name in transferUserOptions"
+              :key="name"
+              :label="name"
+              :value="name"
+            />
+          </el-select>
+        </label>
+      </div>
+      <template #footer>
+        <div class="mgmt-dialog__footer">
+          <button
+            type="button"
+            class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--ghost"
+            @click="transferDialogVisible = false"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--primary"
+            @click="confirmTransfer"
+          >
+            提交
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 待處理選項彈窗 -->
+    <el-dialog
+      v-model="pendingDialogVisible"
+      width="60%"
+      append-to-body
+      :z-index="10000"
+      :show-close="false"
+      modal-class="mgmt-pending-overlay"
+      class="mgmt-dialog mgmt-dialog--pending"
+      header-class="mgmt-dialog__header"
+    >
+      <template #header="{ close }">
+        <span class="mgmt-dialog__title">待處理選項</span>
+        <button type="button" class="mgmt-dialog__close" aria-label="關閉" @click="close">×</button>
+      </template>
+
+      <el-table
+        :data="pendingList"
+        :fit="true"
+        table-layout="fixed"
+        class="management-center-table management-center-pending-table"
+      >
+        <el-table-column label="變更" width="88" header-align="left" align="left">
+          <template #default="{ row }">
+            {{ row.changeType }}
+          </template>
+        </el-table-column>
+        <el-table-column label="行業" min-width="160" header-align="left" align="left">
+          <template #default="{ row }">
+            <span
+              v-if="row.category === 'industry'"
+              class="management-center-table__name management-center-table__name--pill"
+              >{{ row.name }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column label="調研主要出發點" min-width="160" header-align="left" align="left">
+          <template #default="{ row }">
+            <span
+              v-if="row.category === 'research'"
+              class="management-center-table__name management-center-table__name--pill"
+              >{{ row.name }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column label="申請人" width="112" header-align="left" align="left">
+          <template #default="{ row }">
+            {{ row.applicant }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          width="120"
+          align="center"
+          header-align="center"
+          class-name="mgmt-col-action"
+        >
+          <template #default="{ row }">
+            <div class="mgmt-pending-actions">
+              <button
+                type="button"
+                class="mgmt-pending-action"
+                :class="{ 'is-active': pendingDecisions[row.id] === 'approve' }"
+                aria-label="批准"
+                @click="togglePendingDecision(row.id, 'approve')"
+              >
+                ✓
+              </button>
+              <button
+                type="button"
+                class="mgmt-pending-action mgmt-pending-action--reject"
+                :class="{ 'is-active': pendingDecisions[row.id] === 'reject' }"
+                aria-label="拒絕"
+                @click="togglePendingDecision(row.id, 'reject')"
+              >
+                ✕
+              </button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <template #footer>
+        <div class="mgmt-dialog__footer">
+          <button
+            type="button"
+            class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--ghost"
+            @click="pendingDialogVisible = false"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            class="mgmt-toolbar-btn gen-ai-action-btn mgmt-toolbar-btn--primary"
+            @click="confirmPending"
+          >
+            確認
+          </button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '../common/assets/fonts.css'
+import { Delete } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { computed, ref, watch } from 'vue'
+import { GenAiPagination } from '../common'
+import {
+  INDUSTRY_OPTIONS,
+  PENDING_OPTIONS,
+  RESEARCH_FOCUS_OPTIONS,
+  TRANSFER_RECORDS,
+  TRANSFER_REPORTS,
+} from './mockData'
+import type {
+  ManagementOption,
+  ManagementTab,
+  PendingDecision,
+  PendingOption,
+  TransferRecord,
+  TransferReport,
+} from './types'
+
+const NAME_MAX_LENGTH = 50
+const TRANSFER_REPORT_NAME_MAX_LENGTH = 100
+
+const tabs = [
+  { id: 'industry' as ManagementTab, label: '行業' },
+  { id: 'research' as ManagementTab, label: '調研主要出發點' },
+  { id: 'transfer' as ManagementTab, label: '報告權限轉移' },
+]
+
+const activeTab = ref('industry' as ManagementTab)
+const industries = ref([...INDUSTRY_OPTIONS])
+const researchPoints = ref([...RESEARCH_FOCUS_OPTIONS])
+const pendingList = ref([...PENDING_OPTIONS])
+
+const keyword = ref('')
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+const addDialogVisible = ref(false)
+const addInput = ref('')
+
+const pendingDialogVisible = ref(false)
+const pendingDecisions = ref({} as Record<string, PendingDecision>)
+
+const transferReports = ref<TransferReport[]>([...TRANSFER_REPORTS])
+const transferRecords = ref<TransferRecord[]>([...TRANSFER_RECORDS])
+const transferFilters = ref({
+  reportName: '',
+  industries: [] as string[],
+  yearRange: null as [string, string] | null,
+  initiators: [] as string[],
+})
+const appliedTransferFilters = ref({
+  reportName: '',
+  industries: [] as string[],
+  yearRange: null as [string, string] | null,
+  initiators: [] as string[],
+})
+const transferReportPage = ref(1)
+const transferReportPageSize = ref(10)
+const transferHistoryPage = ref(1)
+const transferHistoryPageSize = ref(10)
+
+const transferDialogVisible = ref(false)
+const transferTargetReport = ref<TransferReport | null>(null)
+const transferSelectedUser = ref('')
+
+const initiatorOptions = computed(() => {
+  const names = new Set<string>()
+  transferReports.value.forEach((row) => names.add(row.initiator))
+  transferRecords.value.forEach((row) => {
+    names.add(row.originalInitiator)
+    names.add(row.currentInitiator)
+    names.add(row.operator)
+  })
+  return Array.from(names).sort((a, b) => a.localeCompare(b, 'zh-Hant'))
+})
+
+const transferUserOptions = computed(() => {
+  const currentInitiator = transferTargetReport.value?.initiator
+  return initiatorOptions.value.filter((name) => name !== currentInitiator)
+})
+
+const cardTitle = computed(() =>
+  activeTab.value === 'industry' ? '管理行業選項' : '管理調研主要出發點'
+)
+
+const addDialogTitle = computed(() =>
+  activeTab.value === 'industry' ? '新增行業選項' : '新增調研主要出發點'
+)
+
+const currentList = computed(() =>
+  activeTab.value === 'industry' ? industries.value : researchPoints.value
+)
+
+const filteredRows = computed(() => {
+  const kw = keyword.value.trim().toLowerCase()
+  if (!kw) return currentList.value
+  return currentList.value.filter((item) => item.name.toLowerCase().includes(kw))
+})
+
+const paginatedRows = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return filteredRows.value.slice(start, start + pageSize.value)
+})
+
+function matchesTransferFilter(value: string, filter: string) {
+  const kw = filter.trim().toLowerCase()
+  if (!kw) return true
+  return value.toLowerCase().includes(kw)
+}
+
+function matchesIndustriesFilter(rowIndustry: string, selected: string[]) {
+  if (selected.length === 0) return true
+  return selected.includes(rowIndustry)
+}
+
+function matchesYearRangeFilter(rowYear: string, range: [string, string] | null) {
+  if (!range?.[0] || !range[1]) return true
+  const year = Number(rowYear)
+  const start = Number(range[0])
+  const end = Number(range[1])
+  if (Number.isNaN(year) || Number.isNaN(start) || Number.isNaN(end)) return true
+  return year >= start && year <= end
+}
+
+function matchesInitiatorsFilter(rowInitiator: string, selected: string[]) {
+  if (selected.length === 0) return true
+  return selected.includes(rowInitiator)
+}
+
+const filteredTransferReports = computed(() => {
+  const filters = appliedTransferFilters.value
+  return transferReports.value.filter(
+    (row) =>
+      matchesTransferFilter(row.name, filters.reportName) &&
+      matchesIndustriesFilter(row.industry, filters.industries) &&
+      matchesYearRangeFilter(row.year, filters.yearRange) &&
+      matchesInitiatorsFilter(row.initiator, filters.initiators)
+  )
+})
+
+const paginatedTransferReports = computed(() => {
+  const start = (transferReportPage.value - 1) * transferReportPageSize.value
+  return filteredTransferReports.value.slice(start, start + transferReportPageSize.value)
+})
+
+const paginatedTransferRecords = computed(() => {
+  const start = (transferHistoryPage.value - 1) * transferHistoryPageSize.value
+  return transferRecords.value.slice(start, start + transferHistoryPageSize.value)
+})
+
+function resetTransferFilters() {
+  const empty = {
+    reportName: '',
+    industries: [] as string[],
+    yearRange: null as [string, string] | null,
+    initiators: [] as string[],
+  }
+  transferFilters.value = { ...empty, industries: [], initiators: [] }
+  appliedTransferFilters.value = { ...empty, industries: [], initiators: [] }
+  transferReportPage.value = 1
+  transferHistoryPage.value = 1
+}
+
+function handleTabChange() {
+  currentPage.value = 1
+  keyword.value = ''
+  if (activeTab.value === 'transfer') {
+    resetTransferFilters()
+  }
+}
+
+function handleTransferSearch() {
+  appliedTransferFilters.value = {
+    ...transferFilters.value,
+    industries: [...transferFilters.value.industries],
+    initiators: [...transferFilters.value.initiators],
+    yearRange: transferFilters.value.yearRange
+      ? ([...transferFilters.value.yearRange] as [string, string])
+      : null,
+  }
+  transferReportPage.value = 1
+}
+
+function formatOperateTime(date: Date) {
+  const pad = (value: number) => String(value).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+}
+
+function handleTransfer(row: TransferReport) {
+  transferTargetReport.value = row
+  transferSelectedUser.value = ''
+  transferDialogVisible.value = true
+}
+
+function confirmTransfer() {
+  const report = transferTargetReport.value
+  const user = transferSelectedUser.value.trim()
+  if (!report) return
+  if (!user) {
+    ElMessage.warning('請選擇用戶')
+    return
+  }
+
+  const originalInitiator = report.initiator
+  transferReports.value = transferReports.value.map((item) =>
+    item.id === report.id ? { ...item, initiator: user } : item
+  )
+
+  transferRecords.value = [
+    {
+      id: `rec-${Date.now()}`,
+      reportName: report.name,
+      originalInitiator,
+      currentInitiator: user,
+      operator: '陳小文（單位）',
+      operatedAt: formatOperateTime(new Date()),
+    },
+    ...transferRecords.value,
+  ]
+
+  transferDialogVisible.value = false
+  transferTargetReport.value = null
+  transferSelectedUser.value = ''
+  ElMessage.success('權限轉移成功')
+}
+
+function handleRefresh() {
+  keyword.value = ''
+  currentPage.value = 1
+  ElMessage.success('已重新整理')
+}
+
+function openAddDialog() {
+  addInput.value = ''
+  addDialogVisible.value = true
+}
+
+function isDuplicateName(name: string) {
+  const normalized = name.trim()
+  return currentList.value.some((item) => item.name === normalized)
+}
+
+function confirmAdd() {
+  const name = addInput.value.trim()
+  if (!name) {
+    ElMessage.warning('請輸入名稱')
+    return
+  }
+  if (name.length > NAME_MAX_LENGTH) {
+    ElMessage.warning(`名稱不可超過 ${NAME_MAX_LENGTH} 字`)
+    return
+  }
+  if (isDuplicateName(name)) {
+    ElMessage.warning('名稱已存在，請勿重複新增')
+    return
+  }
+
+  const item: ManagementOption = {
+    id: `${activeTab.value}-${Date.now()}`,
+    name,
+  }
+
+  if (activeTab.value === 'industry') {
+    industries.value = [...industries.value, item]
+  } else {
+    researchPoints.value = [...researchPoints.value, item]
+  }
+
+  addDialogVisible.value = false
+  ElMessage.success('新增成功')
+}
+
+async function handleDelete(row: ManagementOption) {
+  try {
+    await ElMessageBox.confirm(`確定刪除「${row.name}」？`, '確認刪除', {
+      confirmButtonText: '確認',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+
+  if (activeTab.value === 'industry') {
+    industries.value = industries.value.filter((item) => item.id !== row.id)
+  } else {
+    researchPoints.value = researchPoints.value.filter((item) => item.id !== row.id)
+  }
+  ElMessage.success('已刪除')
+}
+
+function openPendingDialog() {
+  pendingDecisions.value = {}
+  pendingList.value.forEach((item) => {
+    pendingDecisions.value[item.id] = null
+  })
+  pendingDialogVisible.value = true
+}
+
+function togglePendingDecision(id: string, decision: Exclude<PendingDecision, null>) {
+  const current = pendingDecisions.value[id]
+  pendingDecisions.value[id] = current === decision ? null : decision
+}
+
+function addOptionFromPending(item: PendingOption) {
+  const target = item.category === 'industry' ? industries.value : researchPoints.value
+  if (target.some((row) => row.name === item.name)) return
+
+  const entry: ManagementOption = {
+    id: `${item.category}-approved-${Date.now()}-${item.id}`,
+    name: item.name,
+  }
+
+  if (item.category === 'industry') {
+    industries.value = [...industries.value, entry]
+  } else {
+    researchPoints.value = [...researchPoints.value, entry]
+  }
+}
+
+function confirmPending() {
+  const remaining: PendingOption[] = []
+
+  pendingList.value.forEach((item) => {
+    const decision = pendingDecisions.value[item.id]
+    if (decision === 'approve') {
+      addOptionFromPending(item)
+      return
+    }
+    if (decision === 'reject') {
+      return
+    }
+    remaining.push(item)
+  })
+
+  pendingList.value = remaining
+  pendingDialogVisible.value = false
+  ElMessage.success('已更新待處理選項')
+}
+
+watch([keyword, activeTab], () => {
+  currentPage.value = 1
+})
+
+watch(filteredRows, (list) => {
+  const maxPage = Math.max(1, Math.ceil(list.length / pageSize.value))
+  if (currentPage.value > maxPage) currentPage.value = maxPage
+})
+
+watch(filteredTransferReports, (list) => {
+  const maxPage = Math.max(1, Math.ceil(list.length / transferReportPageSize.value))
+  if (transferReportPage.value > maxPage) transferReportPage.value = maxPage
+})
+
+watch(transferRecords, (list) => {
+  const maxPage = Math.max(1, Math.ceil(list.length / transferHistoryPageSize.value))
+  if (transferHistoryPage.value > maxPage) transferHistoryPage.value = maxPage
+})
+</script>
+
+<style scoped>
+.management-center-page {
+  --gen-ai-design-w: 1920;
+  --gen-ai-fs-xs: clamp(11px, calc(12 * 100vw / 1920), 12px);
+  --gen-ai-fs-sm: clamp(12px, calc(13 * 100vw / 1920), 13px);
+  --gen-ai-fs-base: clamp(13px, calc(14 * 100vw / 1920), 14px);
+  --gen-ai-fs-md: clamp(14px, calc(16 * 100vw / 1920), 16px);
+  --gen-ai-fs-lg: clamp(16px, calc(18 * 100vw / 1920), 18px);
+  --gen-ai-fs-2xl: clamp(20px, calc(24 * 100vw / 1920), 24px);
+  --gen-ai-fs-hero: clamp(26px, calc(32 * 100vw / 1920), 32px);
+  --gen-ai-lh-tight: 1.4;
+  --gen-ai-lh-normal: 1.6;
+  --gen-ai-fw-regular: 400;
+  --gen-ai-fw-semibold: 600;
+  --gen-ai-fw-bold: 700;
+  --gen-ai-page-body-h: 100vh;
+  --gen-ai-table-row-h: clamp(48px, calc(55.2 * 100vw / 1920), 55.2px);
+  --gen-ai-table-header-bg: rgb(249, 250, 251);
+  --gen-ai-management-tab-font-size: 15px;
+  --gen-ai-management-tab-font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  --gen-ai-management-tab-font-weight: 500;
+  --mgmt-accent: #c53355;
+  --mgmt-accent-soft: #fdf0f2;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: var(--gen-ai-fs-base);
+  line-height: var(--gen-ai-lh-normal);
+  color: #2d3139;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  height: auto;
+  background: #fff;
+}
+
+.management-center-page :deep(.el-table),
+.management-center-page :deep(.el-input),
+.management-center-page :deep(.el-select),
+.management-center-page :deep(.el-pagination) {
+  font-size: inherit;
+}
+
+.management-center-page :deep(.el-button) {
+  font-size: 18px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.gen-ai-page-hero-desc {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.7;
+  color: #666;
+}
+
+.gen-ai-filter-field-label {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  white-space: nowrap;
+}
+
+.gen-ai-action-btn,
+.mgmt-toolbar-btn {
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-weight: 400;
+}
+
+.management-center-page__body {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: var(--gen-ai-page-body-h);
+  width: 100%;
+  padding: 32px 24px 40px;
+  box-sizing: border-box;
+}
+
+.management-center-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+}
+
+.management-center-hero {
+  text-align: center;
+  margin-bottom: 12px;
+}
+
+.management-center-hero__title {
+  margin: 0 0 2px;
+  font-size: var(--gen-ai-fs-hero);
+  font-weight: var(--gen-ai-fw-bold);
+  color: #1a1a1a;
+}
+
+.management-center-hero__desc {
+  margin: 0;
+}
+
+.management-center-top {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.management-center-pending-badge :deep(.mgmt-toolbar-btn--outline:hover),
+.management-center-pending-badge:hover :deep(.mgmt-toolbar-btn--outline) {
+  border-color: var(--mgmt-accent, #c53355);
+  color: var(--mgmt-accent, #c53355);
+  background: var(--mgmt-accent-soft, #fdf0f2);
+}
+
+.management-center-card {
+  border: none;
+  padding: 0;
+  background: transparent;
+}
+
+.management-center-tabs {
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
+}
+
+.management-center-tabs :deep(.el-tabs__header) {
+  margin: 0;
+}
+
+.management-center-tabs :deep(.el-tabs__content) {
+  display: none;
+}
+
+.management-center-tabs.el-tabs--card :deep(.el-tabs__header .el-tabs__item) {
+  width: 180px;
+  min-width: 180px;
+  padding: 0 16px;
+  font-size: var(--gen-ai-management-tab-font-size);
+  font-family: var(--gen-ai-management-tab-font-family);
+  font-weight: var(--gen-ai-management-tab-font-weight);
+  text-align: center;
+  box-sizing: border-box;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.management-center-tabs.el-tabs--card :deep(.el-tabs__header .el-tabs__item:hover:not(.is-active)) {
+  color: var(--mgmt-accent, #c53355);
+  background-color: transparent;
+  background-image: linear-gradient(
+    var(--mgmt-accent-soft, #fdf0f2),
+    var(--mgmt-accent-soft, #fdf0f2)
+  );
+  background-size: 100% calc(100% - 1px);
+  background-position: 0 1px;
+  background-repeat: no-repeat;
+  border-radius: 4px;
+  border-color: var(--el-border-color-light, #e4e7ed);
+}
+
+.management-center-tabs.el-tabs--card :deep(.el-tabs__header .el-tabs__item.is-active) {
+  color: var(--mgmt-accent, #c53355);
+}
+
+.management-center-panel__card {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  margin-top: -1px;
+  border: 1px solid #dcdfe6;
+  border-radius: 0 4px 4px 4px;
+  background: #fff;
+  padding: 16px 20px 20px;
+  box-sizing: border-box;
+}
+
+.management-center-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  min-height: 36px;
+  margin-bottom: 16px;
+}
+
+.management-center-card__head-left {
+  flex-shrink: 0;
+  margin-right: 5px;
+  z-index: 1;
+}
+
+.management-center-card__head-left .mgmt-toolbar-btn {
+  width: 100px !important;
+  min-width: 100px !important;
+}
+
+.management-center-card__title {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.management-center-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  margin-left: auto;
+  z-index: 1;
+}
+
+.mgmt-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 32px;
+  min-width: 120px;
+  padding: 0 14px;
+  border-radius: 4px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mgmt-toolbar-btn--primary {
+  border: 1px solid var(--app-btn-border, var(--mgmt-accent, #c53355));
+  background: var(--app-btn-bg, var(--mgmt-accent, #c53355));
+  color: var(--app-btn-color, #fff);
+}
+
+.mgmt-toolbar-btn--primary:hover {
+  background: var(--app-btn-bg-hover, #fff);
+  border-color: var(--app-btn-border-hover, var(--mgmt-accent, #c53355));
+  color: var(--app-btn-color-hover, var(--mgmt-accent, #c53355));
+}
+
+.mgmt-toolbar-btn--outline {
+  border: 1px solid var(--mgmt-accent, #c53355);
+  color: var(--mgmt-accent, #c53355);
+  background: #fff;
+}
+
+.mgmt-toolbar-btn--outline:hover {
+  border-color: var(--mgmt-accent, #c53355);
+  color: var(--mgmt-accent, #c53355);
+  background: var(--mgmt-accent-soft, #fdf0f2);
+}
+
+.mgmt-toolbar-btn--ghost {
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+}
+
+.mgmt-toolbar-btn--ghost:hover {
+  border-color: var(--app-btn-border, #c53355);
+  color: var(--app-btn-border, #c53355);
+  background: #fdf0f2;
+}
+
+.management-center-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+.management-center-field__input {
+  width: 270px;
+}
+
+.management-center-transfer__title {
+  margin: 0 0 16px;
+  text-align: center;
+}
+
+.management-center-transfer-head {
+  margin-bottom: 16px;
+}
+
+.management-center-transfer-head .management-center-transfer-filters {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.management-center-transfer-filters .gen-ai-filter-field-label {
+  text-align: right;
+}
+
+.management-center-transfer-filters .mgmt-toolbar-btn {
+  width: 100px !important;
+  min-width: 100px !important;
+}
+
+.management-center-transfer-field__input {
+  width: 160px;
+}
+
+.management-center-transfer-field__input--report-name {
+  width: 280px;
+}
+
+.management-center-transfer-field__select {
+  width: 200px;
+}
+
+.management-center-transfer-field__select :deep(.el-select__wrapper) {
+  min-height: 32px;
+}
+
+.management-center-transfer-filters .management-center-field--year {
+  flex-shrink: 0;
+}
+
+.management-center-transfer-field__date {
+  width: 360px !important;
+  min-width: 360px;
+  max-width: none;
+  flex: 0 0 360px;
+  --el-date-editor-width: 360px;
+}
+
+.management-center-transfer-field__date :deep(.el-input__wrapper),
+.management-center-transfer-field__date :deep(.el-range-editor.el-input__wrapper) {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.management-center-transfer-field__date :deep(.el-range-input) {
+  font-size: var(--gen-ai-fs-base);
+  flex: 1;
+  width: auto;
+  min-width: 0;
+}
+
+.management-center-transfer-field__date :deep(.el-range-separator) {
+  flex: 0 0 auto;
+  padding: 0 6px;
+}
+
+.management-center-transfer__divider {
+  margin: 24px 0;
+  border: none;
+  border-top: 1px dashed #dcdfe6;
+}
+
+.mgmt-transfer-btn {
+  width: 90px !important;
+  min-width: 90px !important;
+  height: 28px !important;
+  padding: 0 !important;
+  font-size: var(--gen-ai-fs-sm) !important;
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.mgmt-transfer-action-label {
+  display: inline-block;
+  width: 90px;
+  text-align: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.mgmt-add-form__input :deep(.el-textarea__inner) {
+  font-size: var(--gen-ai-fs-base);
+  line-height: var(--gen-ai-lh-normal);
+}
+
+.mgmt-transfer-form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 120px;
+}
+
+.mgmt-transfer-form__field {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+}
+
+.mgmt-transfer-form__label {
+  flex-shrink: 0;
+  font-size: var(--gen-ai-fs-base);
+  color: #303133;
+  white-space: nowrap;
+}
+
+.mgmt-transfer-form__select {
+  width: 360px;
+}
+
+.mgmt-transfer-form__select :deep(.el-select__wrapper) {
+  min-height: 32px;
+}
+</style>
+
+<style>
+/* append-to-body 彈窗內表格：非 scoped；樣式對齊報告中心 RecentReportsTable */
+.management-center-table {
+  --mgmt-table-row-h: 40px;
+  --mgmt-table-header-bg: #f9fafb;
+  --mgmt-table-header-fs: 14px;
+  --mgmt-table-header-color: #666;
+  --mgmt-table-header-fw: 500;
+  --mgmt-table-row-fs: 14px;
+  --mgmt-table-row-color: #111827;
+  --mgmt-table-border: 1px solid rgb(235, 238, 245);
+  --mgmt-font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  --el-table-border: none;
+  --el-table-border-color: transparent;
+  font-family: var(--mgmt-font-family);
+}
+
+.management-center-table.el-table,
+.management-center-table .el-table {
+  --el-table-header-text-color: var(--mgmt-table-header-color);
+  --el-table-text-color: var(--mgmt-table-row-color);
+  --el-table-row-hover-bg-color: #f5f7fa;
+  width: 100% !important;
+  font-family: var(--mgmt-font-family);
+}
+
+.management-center-table .el-table__header th.el-table__cell,
+.management-center-table .el-table__header th.el-table__cell .cell {
+  font-size: var(--mgmt-table-header-fs);
+  font-family: var(--mgmt-font-family);
+  font-weight: var(--mgmt-table-header-fw);
+  color: var(--mgmt-table-header-color);
+  height: var(--mgmt-table-row-h);
+}
+
+.management-center-table .el-table__body tr.el-table__row,
+.management-center-table .el-table__body td.el-table__cell,
+.management-center-table .el-table__body td.el-table__cell .cell {
+  font-size: var(--mgmt-table-row-fs);
+  font-family: var(--mgmt-font-family);
+  font-weight: 400;
+  color: var(--mgmt-table-row-color);
+}
+
+.management-center-table .management-center-table__name {
+  color: var(--mgmt-table-row-color);
+}
+
+.management-center-table .management-center-table__action-head {
+  color: var(--mgmt-table-header-color);
+}
+
+.management-center-table .el-table__inner-wrapper,
+.management-center-table .el-table__header-wrapper,
+.management-center-table .el-table__body-wrapper {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.management-center-table .el-table__header table,
+.management-center-table .el-table__body table {
+  width: 100% !important;
+  table-layout: fixed;
+}
+
+.management-center-table .el-table__header .cell,
+.management-center-table .el-table__body .cell {
+  padding: 0;
+  text-align: left;
+  font-family: var(--mgmt-font-family);
+}
+
+.management-center-table .el-table__body-wrapper .cell {
+  padding: 0;
+}
+
+.management-center-table .el-table__header th.el-table__cell .cell {
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.management-center-table .el-table__inner-wrapper::before,
+.management-center-table .el-table__inner-wrapper::after {
+  display: none;
+}
+
+.management-center-table .el-table__body-wrapper .el-table__body {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.management-center-table .el-table__body tr.el-table__row {
+  height: var(--mgmt-table-row-h);
+  background: #fff;
+  cursor: pointer;
+}
+
+.management-center-table .el-table__body tr {
+  background: #fff;
+}
+
+.management-center-table.el-table .el-table__body tr.el-table__row:hover > td.el-table__cell {
+  background-color: #f5f7fa !important;
+  box-shadow: none !important;
+}
+
+.management-center-table .el-table__body tr.el-table__row:hover > td.el-table__cell:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.management-center-table .el-table__body tr.el-table__row:hover > td.el-table__cell:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+.management-center-table .el-table__header-wrapper {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.management-center-table .el-table__header th.el-table__cell {
+  font-weight: var(--mgmt-table-header-fw);
+  border-bottom: var(--mgmt-table-border);
+  background: var(--mgmt-table-header-bg);
+  height: var(--mgmt-table-row-h);
+  padding: 0 16px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.management-center-table .el-table__header th.el-table__cell:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.management-center-table .el-table__header th.el-table__cell:first-child .cell {
+  padding-left: 10px;
+}
+
+.management-center-table .el-table__header th.el-table__cell .cell {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 待處理選項：表頭與內容左對齊一致（操作列居中） */
+.management-center-pending-table .el-table__header th.el-table__cell .cell,
+.management-center-pending-table .el-table__body td.el-table__cell .cell {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.management-center-pending-table .el-table__header th.mgmt-col-action .cell,
+.management-center-pending-table .el-table__body td.mgmt-col-action .cell {
+  justify-content: center;
+  text-align: center;
+}
+
+.management-center-table .el-table__header th.mgmt-col-name.el-table__cell,
+.management-center-table .el-table__body td.mgmt-col-name.el-table__cell {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.management-center-table .el-table__header th.mgmt-col-name .cell,
+.management-center-table .el-table__body td.mgmt-col-name .cell {
+  padding-left: 10px;
+  padding-right: 0;
+}
+
+.management-center-table .el-table__header th.mgmt-col-name .cell {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.management-center-table .mgmt-col-name .cell {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.management-center-table .mgmt-col-name .management-center-table__name--pill {
+  padding-left: 0;
+  padding-right: 10px;
+}
+
+.management-center-table .el-table__header th.el-table__cell:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+.management-center-table .el-table__body td.el-table__cell {
+  height: var(--mgmt-table-row-h);
+  border-bottom: var(--mgmt-table-border);
+  padding: 0 16px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.management-center-table .el-table__body td.el-table__cell .cell {
+  display: flex;
+  align-items: center;
+  min-height: var(--mgmt-table-row-h);
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.management-center-table .el-table__body td.el-table__cell:first-child:not(.mgmt-col-name) .cell {
+  padding-left: 10px;
+}
+
+.management-center-table .mgmt-col-action .cell,
+.management-center-table .mgmt-col-delete .cell {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.management-center-table .el-table__header th.mgmt-col-delete .cell,
+.management-center-table .el-table__header th.mgmt-col-action .cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.management-center-delete-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: var(--mgmt-table-row-h);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #909399;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.management-center-delete-btn .el-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+
+.management-center-delete-btn:hover {
+  color: #c53355;
+}
+
+.management-center-table__name--pill {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 6px 10px;
+  border-radius: 4px;
+  background: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  line-height: 1.4;
+}
+
+.management-center-table__name {
+  color: inherit;
+}
+
+/* 可點擊名稱：對齊報告中心鏈接 hover（原色 + 下劃線） */
+.management-center-table__name--link {
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.management-center-table__name--link:hover {
+  color: #409eff;
+  text-decoration: underline;
+}
+
+.mgmt-pending-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.mgmt-pending-action {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  color: #606266;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mgmt-pending-action.is-active,
+.mgmt-pending-action--reject.is-active {
+  background: #c53355;
+  border-color: #c53355;
+  color: #fff;
+}
+
+.management-center-table
+  .el-table__body
+  tr.el-table__row:hover
+  .mgmt-pending-action:not(.is-active) {
+  background: #fff;
+  border-color: #dcdfe6;
+  color: #606266;
+}
+
+.management-center-table .el-table__body tr.el-table__row:hover .mgmt-pending-action.is-active,
+.management-center-table
+  .el-table__body
+  tr.el-table__row:hover
+  .mgmt-pending-action--reject.is-active {
+  background: #c53355;
+  border-color: #c53355;
+  color: #fff;
+}
+
+.management-center-panel__card .management-center-table {
+  overflow: visible;
+}
+
+.management-center-panel__card .management-center-table .el-table__inner-wrapper,
+.management-center-panel__card .management-center-table .el-table__body-wrapper,
+.management-center-panel__card .management-center-table .el-table__header-wrapper,
+.management-center-panel__card .management-center-table .el-scrollbar__wrap,
+.management-center-panel__card .management-center-table .el-scrollbar__view {
+  overflow: visible !important;
+  max-height: none !important;
+  height: auto !important;
+}
+
+.management-center-transfer-table .el-table__fixed-right,
+.management-center-transfer-table .el-table__fixed-right .el-table__fixed-header-wrapper,
+.management-center-transfer-table .el-table__fixed-right .el-table__fixed-body-wrapper {
+  overflow: visible !important;
+}
+
+.management-center-transfer-table .el-table__header th.mgmt-col-transfer-action.el-table__cell,
+.management-center-transfer-table .el-table__body td.mgmt-col-transfer-action.el-table__cell {
+  width: 140px;
+  min-width: 140px;
+  padding-left: 25px;
+  padding-right: 25px;
+  overflow: visible;
+}
+
+.management-center-transfer-table .el-table__header th.mgmt-col-transfer-action.el-table__cell {
+  background: var(--gen-ai-table-header-bg, rgb(249, 250, 251)) !important;
+}
+
+.management-center-transfer-table .mgmt-col-transfer-action .cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  text-align: center;
+  padding: 0 !important;
+  width: 90px;
+  margin: 0 auto;
+}
+
+/* 固定列右側邊框偏移補償，使「操作」與「轉移」中心對齊 */
+.management-center-transfer-table .mgmt-transfer-action-label,
+.management-center-transfer-table .mgmt-transfer-btn {
+  margin-right: -2px;
+}
+
+.management-center-pending-badge .el-badge__content.el-badge__content--danger.is-fixed {
+  margin-right: 10px !important;
+  margin-top: -5px !important;
+}
+
+.management-center-pending-badge .mgmt-toolbar-btn--outline {
+  border: 1px solid var(--mgmt-accent, #c53355);
+  color: var(--mgmt-accent, #c53355);
+  background: #fff;
+}
+
+.management-center-pending-badge .mgmt-toolbar-btn--outline:hover {
+  border-color: var(--mgmt-accent, #c53355);
+  color: var(--mgmt-accent, #c53355);
+  background: var(--mgmt-accent-soft, #fdf0f2);
+}
+
+.mgmt-dialog.el-dialog {
+  --el-dialog-padding-primary: 0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.mgmt-dialog .el-dialog__header,
+.mgmt-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+  padding: 14px 16px;
+  background: transparent;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.mgmt-dialog__title {
+  flex: 1;
+  min-width: 0;
+  color: #303133;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  line-height: 1.4;
+}
+
+.mgmt-dialog__close {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #303133;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.mgmt-dialog__close:hover {
+  color: #606266;
+}
+
+.mgmt-dialog .el-dialog__body {
+  padding: 20px 16px;
+  background: #fff;
+}
+
+.mgmt-dialog .el-dialog__footer {
+  padding: 12px 16px 16px;
+  background: #fff;
+}
+
+.mgmt-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+/* 待處理選項彈窗：與章節結構彈窗尺寸一致 */
+.mgmt-pending-overlay {
+  overflow: auto;
+}
+
+.mgmt-dialog--pending.el-dialog {
+  width: 60%;
+  max-width: 80%;
+  height: 70vh;
+  max-height: 70vh;
+  margin-top: 5%;
+  margin-left: 21%;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mgmt-dialog--pending .el-dialog__header,
+.mgmt-dialog--pending .mgmt-dialog__header {
+  flex-shrink: 0;
+  padding: 14px 16px 14px 20px;
+}
+
+.mgmt-dialog--pending .el-dialog__body {
+  flex: 1;
+  min-height: 0;
+  padding: 24px 20px;
+  overflow-y: auto;
+}
+
+.mgmt-dialog--pending .el-dialog__footer {
+  flex-shrink: 0;
+  padding: 12px 16px 16px;
+  background: #fff;
+}
+
+.mgmt-dialog .mgmt-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 32px;
+  min-width: 120px;
+  padding: 0 14px;
+  border-radius: 4px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mgmt-dialog .mgmt-toolbar-btn--outline {
+  border: 1px solid #c53355;
+  color: #c53355;
+  background: #fff;
+}
+
+.mgmt-dialog .mgmt-toolbar-btn--outline:hover {
+  border-color: #c53355;
+  color: #c53355;
+  background: #fdf0f2;
+}
+
+.mgmt-dialog .mgmt-toolbar-btn--primary {
+  border: 1px solid #c53355;
+  background: #c53355;
+  color: #fff;
+}
+
+.mgmt-dialog .mgmt-toolbar-btn--primary:hover {
+  background: #fff;
+  border-color: #c53355;
+  color: #c53355;
+}
+
+.mgmt-dialog .mgmt-toolbar-btn--ghost {
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+}
+
+.mgmt-dialog .mgmt-toolbar-btn--ghost:hover {
+  border-color: #c53355;
+  color: #c53355;
+  background: #fdf0f2;
+}
+
+.mgmt-dialog--add.el-dialog {
+  width: 840px !important;
+  max-width: 90vw;
+}
+
+.mgmt-dialog--add .el-dialog__body {
+  padding: 40px 32px;
+}
+
+.mgmt-dialog--add .mgmt-add-form__input .el-textarea__inner {
+  min-height: 240px;
+}
+
+.mgmt-dialog--transfer .el-dialog__body {
+  padding: 40px 32px;
+}
+</style>