X-Financial/web/src/composables/useNavigation.js

import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { icons } from '../data/icons.js'

export const appViews = [
  'workbench',
  'documents',
  'receiptFolder',
  'budget',
  'audit',
  'overview',
  'digitalEmployees',
  'employees',
  'policies',
  'settings'
]

export const navItems = [
  {
    id: 'workbench',
    label: '个人工作台',
    navHint: '集中处理个人待办',
    icon: icons.briefcase,
    title: '个人工作台',
    desc: '聚焦当前待办、快捷操作与助手入口。'
  },
  {
    id: 'documents',
    label: '单据中心',
    navHint: '统一查看申请、报销、审批与归档',
    icon: icons.documentCenter,
    title: '单据中心',
    desc: '统一查看申请、报销、审批与归档。'
  },
  {
    id: 'receiptFolder',
    label: '票据夹',
    navHint: '存放已上传并识别的原始票据',
    icon: icons.receiptFolder,
    title: '票据夹',
    desc: '集中查看未关联和已关联票据，避免 OCR 后票据丢失。'
  },
  {
    id: 'budget',
    label: '预算编制',
    navHint: '管理预算额度、预算占用与超预算预警',
    icon: icons.budget,
    title: '预算编制',
    desc: '配置部门、项目及费用类型预算，跟踪申请占用、报销核销与超预算预警。'
  },
  {
    id: 'audit',
    label: '规则管理',
    navHint: '查看和管理规则配置',
    icon: icons.skill,
    title: '规则管理',
    desc: '集中管理财务规则、风险规则与外部 MCP 服务。'
  },
  {
    id: 'overview',
    label: '分析看板',
    navHint: '查看系统总览与关键指标',
    icon: icons.dashboard,
    title: '分析看板',
    desc: '聚合差旅申请、审批效率、风险信号与 SLA 表现。'
  },
  {
    id: 'digitalEmployees',
    label: '数字员工',
    navHint: '查看和管理后台自动执行的技能',
    icon: icons.digitalEmployee,
    title: '数字员工',
    desc: '集中查看后台自动执行的技能、执行计划和运行状态。'
  },
  {
    id: 'employees',
    label: '员工管理',
    navHint: '维护员工与组织信息',
    icon: icons.users,
    title: '员工与组织管理',
    desc: '维护员工账号、组织结构与角色权限。'
  },
  {
    id: 'policies',
    label: '财务政策',
    navHint: '查看财务政策与制度文档',
    icon: icons.library,
    title: '财务政策',
    desc: '统一管理财务政策文档、检索入口与知识资产。'
  },
  {
    id: 'settings',
    label: '系统设置',
    navHint: '维护企业品牌、管理员安全与系统配置',
    icon: icons.settings,
    title: '系统设置中心',
    desc: '集中配置公司名称、管理员账号安全、模型接入、日志策略与邮箱通知。'
  }
]

const viewRouteNames = {
  overview: 'app-overview',
  workbench: 'app-workbench',
  documents: 'app-documents',
  receiptFolder: 'app-receiptFolder',
  budget: 'app-budget',
  policies: 'app-policies',
  audit: 'app-audit',
  digitalEmployees: 'app-digitalEmployees',
  employees: 'app-employees',
  settings: 'app-settings'
}

const legacyViewRouteNames = {
  logs: 'app-settings'
}

const routeNameViews = Object.fromEntries(
  Object.entries(viewRouteNames).map(([view, routeName]) => [routeName, view])
)

routeNameViews['app-request-detail'] = 'documents'
routeNameViews['app-document-detail'] = 'documents'
routeNameViews['app-log-detail'] = 'settings'

export function resolveAppViewFromRoute(route) {
  const routeName = String(route?.name || '').trim()
  if (routeNameViews[routeName]) {
    return routeNameViews[routeName]
  }

  const metaView = String(route?.meta?.appView || '').trim()
  return appViews.includes(metaView) ? metaView : 'overview'
}

export function resolveTargetRouteName(view) {
  return viewRouteNames[view] || legacyViewRouteNames[view] || viewRouteNames.overview
}

export function useNavigation() {
  const route = useRoute()
  const router = useRouter()

  const activeView = computed({
    get() {
      return resolveAppViewFromRoute(route)
    },
    set(view) {
      void setView(view)
    }
  })

  const currentView = computed(
    () => navItems.find((item) => item.id === activeView.value) ?? navItems[0]
  )

  function setView(view) {
    const targetName = resolveTargetRouteName(view)

    if (route.name === targetName) {
      return Promise.resolve()
    }

    return router.push({ name: targetName, params: {}, query: {}, hash: '' })
  }

  return { activeView, currentView, setView, navItems }
}