113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import Header from './components/Header.vue'
|
|
import Main from './components/Main/index.vue'
|
|
import { ref, onMounted } 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'
|
|
const isDarkMode = ref(false)
|
|
const agentsStore = useAgentsStore()
|
|
// 初始化主题
|
|
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 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 />
|
|
|
|
<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>
|