77530c49f8
- 为agent.json添加apiUrl、apiKey、apiModel字段支持 - 更新API接口类型定义，支持传递自定义API配置 - 优化AgentRepoList组件UI样式和交互效果 - 增强JSON文件上传校验逻辑，支持API配置验证 - 改进任务结果页面布局和视觉呈现 - 添加任务过程查看抽屉功能 - 实现执行按钮动态样式和悬停效果 - 优化节点连接线渲染逻辑和性能
85 lines
2.2 KiB
Vue
85 lines
2.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'
|
|
|
|
const isDarkMode = ref(false)
|
|
|
|
// 初始化主题
|
|
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 />
|
|
</div>
|
|
</template>
|