AgentCoord/frontend/src/layout/index.vue

<script setup lang="ts">
import Header from './components/Header.vue'
import Main from './components/Main/index.vue'
import { ref, onMounted, computed } from 'vue'
import FloatWindow from './components/Main/TaskTemplate/TaskSyllabus/components/FloatWindow.vue'
import PlanModification from './components/Main/TaskTemplate/TaskSyllabus/Branch/PlanModification.vue'
import { useAgentsStore } from '@/stores/modules/agents'
import PlanTask from './components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue'
import AgentAllocation from './components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation.vue'
import { Clock } from '@element-plus/icons-vue'

const isDarkMode = ref(false)
const agentsStore = useAgentsStore()
const mainRef = ref<{ currentTaskID: string; openHistoryDialog: () => void } | null>(null)

// 打开历史记录
const openHistory = () => {
  mainRef.value?.openHistoryDialog()
}

onMounted(() => {
  // 等待 Main 组件挂载后获取 taskId
  setTimeout(() => {
    const mainEl = document.querySelector('.main-container')
    if (mainEl) {
      // 通过 parent 获取
      const mainParent = mainEl.parentElement
      if (mainParent) {
        const mainComponent = mainParent.querySelector('[class*="main"]')
        if (mainComponent) {
          // 尝试从 Vue 组件实例获取
        }
      }
    }
  }, 100)
})
// 初始化主题
const initTheme = () => {
  const savedTheme = localStorage.getItem('theme')
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches

  if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
    enableDarkMode()
  } else {
    enableLightMode()
  }
}

// 启用深色模式
const enableDarkMode = () => {
  document.documentElement.classList.add('dark')
  isDarkMode.value = true
  localStorage.setItem('theme', 'dark')
}

// 启用浅色模式
const enableLightMode = () => {
  document.documentElement.classList.remove('dark')
  isDarkMode.value = false
  localStorage.setItem('theme', 'light')
}

// 切换主题
const toggleTheme = () => {
  if (isDarkMode.value) {
    enableLightMode()
  } else {
    enableDarkMode()
  }
}

// 组件挂载时初始化主题
onMounted(() => {
  initTheme()
})
</script>

<template>
  <div class="h-full relative">
    <!-- 左上角按钮组 -->
    <div class="absolute top-4 left-4 z-50 flex gap-3">
      <!-- 历史记录按钮 -->
      <button
        @click="openHistory"
        class="w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center"
        :class="{
          'bg-[#ebebeb] hover:bg-[var(--color-bg-hover)]': !isDarkMode,
          'bg-[#0e131c] hover:bg-[var(--color-bg-hover)]': isDarkMode
        }"
        title="历史记录"
      >
        <el-icon size="20px"><Clock /></el-icon>
      </button>
    </div>

    <!-- 右上角按钮 -->
    <div class="absolute top-4 right-4 z-50">
      <button
        @click="toggleTheme"
        class="w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center"
        :class="{
          'bg-[#ebebeb] hover:bg-[var(--color-bg-hover)]': !isDarkMode,
          'bg-[#0e131c] hover:bg-[var(--color-bg-hover)]': isDarkMode
        }"
        :title="isDarkMode ? '切换到浅色模式' : '切换到深色模式'"
      >
        <!-- 浅色模式图标 -->
        <svg-icon
          v-if="!isDarkMode"
          icon-class="sunny"
          size="20px"
          :color="isDarkMode ? 'var(--color-text-title)' : 'var(--color-text-title)'"
          class="transition-opacity duration-300"
        />
        <!-- 深色模式图标 -->
        <svg-icon
          v-else
          icon-class="moon"
          size="20px"
          :color="isDarkMode ? 'var(--color-text-title)' : 'var(--color-text-title)'"
          class="transition-opacity duration-300"
        />
      </button>
    </div>

    <Header />
    <Main ref="mainRef" />

    <FloatWindow
      v-if="agentsStore.planModificationWindow"
      title="任务大纲探索"
      @close="agentsStore.closePlanModification"
    >
      <PlanModification />
    </FloatWindow>

    <FloatWindow
      v-if="agentsStore.planTaskWindow"
      title="任务过程探索"
      @close="agentsStore.closePlanTask"
    >
      <PlanTask />
    </FloatWindow>

    <FloatWindow
      v-if="agentsStore.agentAllocationDialog"
      title="智能体探索"
      @close="agentsStore.closeAgentAllocationDialog"
    >
      <AgentAllocation />
    </FloatWindow>
  </div>
</template>