PMFlow/frontend/src/components/command/commandItems.ts

/**
 * 命令面板项目
 *
 * 定义命令面板的可用命令
 * 使用图标名称而非表情符号
 */

export interface CommandItem {
  id: string
  label: string
  description?: string
  icon?: string  // Icon 组件的图标名称
  shortcut?: string[]
  category: 'navigation' | 'actions' | 'settings' | 'help'
  action: () => void | Promise<void>
}

export interface CommandCategory {
  id: string
  label: string
  items: CommandItem[]
}

// ============================================================================
// Helper Functions
// ============================================================================

/**
 * Navigate to a tab using query parameter
 */
function navigateToTab(tab: string) {
  const url = new URL(window.location.href)
  url.searchParams.set('tab', tab)
  window.history.replaceState({}, '', url.toString())
  window.dispatchEvent(new CustomEvent('tab-change', { detail: { tab } }))
}

// ============================================================================
// 命令分类
// ============================================================================

export const commandCategories: CommandCategory[] = [
  {
    id: 'navigation',
    label: '导航',
    items: [
      {
        id: 'nav-signals',
        label: '信号',
        description: '查看信号和战略分析',
        icon: 'activity',
        shortcut: ['g', 's'],
        category: 'navigation',
        action: () => {
          navigateToTab('signals')
        },
      },
      {
        id: 'nav-projects',
        label: '项目',
        description: '管理项目',
        icon: 'layout',
        shortcut: ['g', 'p'],
        category: 'navigation',
        action: () => {
          navigateToTab('projects')
        },
      },
      {
        id: 'nav-context',
        label: '知识',
        description: '查看和管理知识节点',
        icon: 'database',
        shortcut: ['g', 'c'],
        category: 'navigation',
        action: () => {
          navigateToTab('context')
        },
      },
      {
        id: 'nav-settings',
        label: '设置',
        description: '配置 AI 模型和偏好设置',
        icon: 'settings',
        shortcut: ['g', 't'],
        category: 'navigation',
        action: () => {
          navigateToTab('settings')
        },
      },
    ],
  },
  {
    id: 'actions',
    label: '操作',
    items: [
      {
        id: 'action-new-signal',
        label: '新建信号',
        description: '手动添加外部信号',
        icon: 'plus',
        shortcut: ['c', 's'],
        category: 'actions',
        action: () => {
          window.dispatchEvent(new CustomEvent('command:new-signal'))
        },
      },
      {
        id: 'action-new-experiment',
        label: '新建实验',
        description: '创建新的 AI 实验',
        icon: 'plus',
        shortcut: ['c', 'e'],
        category: 'actions',
        action: () => {
          window.dispatchEvent(new CustomEvent('command:new-experiment'))
        },
      },
      {
        id: 'action-new-context',
        label: '新建知识节点',
        description: '添加新的知识节点',
        icon: 'plus',
        shortcut: ['c', 'c'],
        category: 'actions',
        action: () => {
          window.dispatchEvent(new CustomEvent('command:new-context'))
        },
      },
      {
        id: 'action-refresh',
        label: '刷新',
        description: '重新加载当前页面数据',
        icon: 'refresh',
        shortcut: ['r'],
        category: 'actions',
        action: () => {
          window.location.reload()
        },
      },
      {
        id: 'action-export',
        label: '导出数据',
        description: '导出当前页面数据',
        icon: 'external-link',
        category: 'actions',
        action: () => {
          window.dispatchEvent(new CustomEvent('command:export'))
        },
      },
    ],
  },
  {
    id: 'settings',
    label: '设置',
    items: [
      {
        id: 'theme-toggle',
        label: '切换主题',
        description: '在亮色和暗色模式之间切换',
        icon: 'sun',
        shortcut: ['t', 't'],
        category: 'settings',
        action: () => {
          window.dispatchEvent(new CustomEvent('command:toggle-theme'))
        },
      },
      {
        id: 'theme-light',
        label: '亮色模式',
        description: '切换到亮色主题',
        icon: 'sun',
        category: 'settings',
        action: () => {
          window.dispatchEvent(new CustomEvent('command:set-theme', { detail: 'light' }))
        },
      },
      {
        id: 'theme-dark',
        label: '暗色模式',
        description: '切换到暗色主题',
        icon: 'moon',
        category: 'settings',
        action: () => {
          window.dispatchEvent(new CustomEvent('command:set-theme', { detail: 'dark' }))
        },
      },
      {
        id: 'theme-system',
        label: '跟随系统',
        description: '自动跟随系统主题偏好',
        icon: 'cpu',
        category: 'settings',
        action: () => {
          window.dispatchEvent(new CustomEvent('command:set-theme', { detail: 'system' }))
        },
      },
    ],
  },
  {
    id: 'help',
    label: '帮助',
    items: [
      {
        id: 'help-shortcuts',
        label: '键盘快捷键',
        description: '显示所有可用的键盘快捷键',
        icon: 'more-horizontal',
        shortcut: ['?'],
        category: 'help',
        action: () => {
          window.dispatchEvent(new CustomEvent('shortcuts:show'))
        },
      },
      {
        id: 'help-docs',
        label: '文档',
        description: '查看文档',
        icon: 'file',
        category: 'help',
        action: () => {
          window.open('https://github.com/neural-sync/docs', '_blank')
        },
      },
      {
        id: 'help-feedback',
        label: '发送反馈',
        description: '报告问题或建议功能',
        icon: 'edit',
        category: 'help',
        action: () => {
          window.open('https://github.com/neural-sync/issues', '_blank')
        },
      },
    ],
  },
]

// ============================================================================
// 展平命令列表
// ============================================================================

export const allCommands = commandCategories.flatMap((category) => category.items)

// ============================================================================
// 命令搜索
// ============================================================================

export function searchCommands(query: string): CommandItem[] {
  if (!query.trim()) {
    return allCommands
  }

  const lowerQuery = query.toLowerCase()

  return allCommands.filter((command) => {
    const labelMatch = command.label.toLowerCase().includes(lowerQuery)
    const descMatch = command.description?.toLowerCase().includes(lowerQuery) ?? false
    const idMatch = command.id.toLowerCase().includes(lowerQuery)
    const shortcutMatch = command.shortcut?.join("").toLowerCase().includes(lowerQuery) ?? false

    return labelMatch || descMatch || idMatch || shortcutMatch
  })
}