feat(frontend): 实现 AUTO_MAA 前端基础结构

- 创建 Vue 3 + TypeScript 项目
- 添加 Electron 支持
- 实现基本页面布局和路由- 添加主题切换功能
- 创建设置页面
- 添加开发者工具支持

frontend/src/App.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { ConfigProvider } from 'ant-design-vue'
+import { useTheme } from './composables/useTheme'
+import AppLayout from './components/AppLayout.vue'
+
+const { antdTheme, initTheme } = useTheme()
+
+onMounted(() => {
+  initTheme()
+})
+</script>
+
+<template>
+  <ConfigProvider :theme="antdTheme">
+    <AppLayout />
+  </ConfigProvider>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+</style>

frontend/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

frontend/src/components/AppLayout.vue

@@ -0,0 +1,192 @@
+<template>
+  <a-layout style="min-height: 100vh">
+    <a-layout-sider v-model:collapsed="collapsed" collapsible :theme="isDark ? 'dark' : 'light'">
+      <div class="sider-content">
+        <!-- Logo区域 -->
+        <div class="logo">
+          <img src="/AUTO_MAA.ico" alt="AUTO MAA" class="logo-image" />
+          <div v-if="!collapsed" class="logo-text">AUTO MAA</div>
+        </div>
+
+        <!-- 主菜单 -->
+        <div class="main-menu">
+          <a-menu
+            v-model:selectedKeys="selectedKeys"
+            :theme="isDark ? 'dark' : 'light'"
+            mode="inline"
+            :inline-collapsed="collapsed"
+          >
+            <a-menu-item key="/home" @click="handleMenuClick('/home')">
+              <home-outlined />
+              <span>主页</span>
+            </a-menu-item>
+            <a-menu-item key="/scripts" @click="handleMenuClick('/scripts')">
+              <file-text-outlined />
+              <span>脚本管理</span>
+            </a-menu-item>
+            <a-menu-item key="/plans" @click="handleMenuClick('/plans')">
+              <calendar-outlined />
+              <span>计划管理</span>
+            </a-menu-item>
+            <a-menu-item key="/queue" @click="handleMenuClick('/queue')">
+              <unordered-list-outlined />
+              <span>调度队列</span>
+            </a-menu-item>
+            <a-menu-item key="/scheduler" @click="handleMenuClick('/scheduler')">
+              <control-outlined />
+              <span>调度中心</span>
+            </a-menu-item>
+            <a-menu-item key="/history" @click="handleMenuClick('/history')">
+              <history-outlined />
+              <span>历史记录</span>
+            </a-menu-item>
+          </a-menu>
+        </div>
+
+        <!-- 底部设置菜单 -->
+        <div class="bottom-menu">
+          <a-menu
+            v-model:selectedKeys="selectedKeys"
+            :theme="isDark ? 'dark' : 'light'"
+            mode="inline"
+            :inline-collapsed="collapsed"
+          >
+            <a-menu-item key="/settings" @click="handleMenuClick('/settings')">
+              <setting-outlined />
+              <span>设置</span>
+            </a-menu-item>
+          </a-menu>
+        </div>
+      </div>
+    </a-layout-sider>
+
+    <a-layout>
+      <a-layout-content style="padding: 24px; background: var(--ant-color-bg-container)">
+        <router-view />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script lang="ts" setup>
+import {
+  HomeOutlined,
+  FileTextOutlined,
+  CalendarOutlined,
+  UnorderedListOutlined,
+  ControlOutlined,
+  HistoryOutlined,
+  SettingOutlined,
+} from '@ant-design/icons-vue'
+import { ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useTheme } from '../composables/useTheme'
+
+const router = useRouter()
+const route = useRoute()
+const { isDark } = useTheme()
+
+const collapsed = ref<boolean>(false)
+const selectedKeys = ref<string[]>([route.path])
+
+// 监听路由变化更新选中状态
+const currentRoute = computed(() => route.path)
+selectedKeys.value = [currentRoute.value]
+
+const handleMenuClick = (path: string) => {
+  router.push(path)
+  selectedKeys.value = [path]
+}
+</script>
+
+<style scoped>
+.sider-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.logo {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px;
+  margin: 16px;
+  border-radius: 6px;
+}
+
+.logo-image {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.logo-text {
+  font-size: 16px;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+.main-menu {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 60px;
+  /* 为底部设置菜单留出空间 */
+}
+
+.bottom-menu {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: inherit;
+}
+
+/* 深色模式样式 */
+:deep(.ant-layout-sider-dark) .logo {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+:deep(.ant-layout-sider-dark) .logo-text {
+  color: white;
+}
+
+:deep(.ant-layout-sider-dark) .bottom-menu {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* 浅色模式样式 */
+:deep(.ant-layout-sider-light) .logo {
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--ant-color-border);
+}
+
+:deep(.ant-layout-sider-light) .logo-text {
+  color: var(--ant-color-text);
+}
+
+:deep(.ant-layout-sider-light) .bottom-menu {
+  border-top: 1px solid var(--ant-color-border);
+}
+
+:deep(.ant-layout-sider) {
+  position: relative;
+}
+
+:deep(.ant-menu) {
+  border-right: none;
+}
+
+/* 确保折叠时图标显示 */
+:deep(.ant-menu-inline-collapsed .ant-menu-item) {
+  padding: 0 calc(50% - 14px);
+}
+
+:deep(.ant-menu-inline-collapsed .ant-menu-item .anticon) {
+  font-size: 16px;
+  line-height: 40px;
+}
+</style>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

frontend/src/composables/useTheme.ts

@@ -0,0 +1,121 @@
+import { ref, computed, watch } from 'vue'
+import { theme } from 'ant-design-vue'
+
+export type ThemeMode = 'system' | 'light' | 'dark'
+export type ThemeColor =
+  | 'blue'
+  | 'purple'
+  | 'cyan'
+  | 'green'
+  | 'magenta'
+  | 'pink'
+  | 'red'
+  | 'orange'
+  | 'yellow'
+  | 'volcano'
+  | 'geekblue'
+  | 'lime'
+  | 'gold'
+
+const themeMode = ref<ThemeMode>('system')
+const themeColor = ref<ThemeColor>('blue')
+const isDark = ref(false)
+
+// 预设主题色
+const themeColors: Record<ThemeColor, string> = {
+  blue: '#1677ff',
+  purple: '#722ed1',
+  cyan: '#13c2c2',
+  green: '#52c41a',
+  magenta: '#eb2f96',
+  pink: '#eb2f96',
+  red: '#ff4d4f',
+  orange: '#fa8c16',
+  yellow: '#fadb14',
+  volcano: '#fa541c',
+  geekblue: '#2f54eb',
+  lime: '#a0d911',
+  gold: '#faad14',
+}
+
+// 检测系统主题
+const getSystemTheme = () => {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+// 更新主题
+const updateTheme = () => {
+  let shouldBeDark: boolean
+
+  if (themeMode.value === 'system') {
+    shouldBeDark = getSystemTheme()
+  } else {
+    shouldBeDark = themeMode.value === 'dark'
+  }
+
+  isDark.value = shouldBeDark
+
+  // 更新HTML类名
+  if (shouldBeDark) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+// 监听系统主题变化
+const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+mediaQuery.addEventListener('change', () => {
+  if (themeMode.value === 'system') {
+    updateTheme()
+  }
+})
+
+// 监听主题模式变化
+watch(themeMode, updateTheme, { immediate: true })
+
+// Ant Design 主题配置
+const antdTheme = computed(() => ({
+  algorithm: isDark.value ? theme.darkAlgorithm : theme.defaultAlgorithm,
+  token: {
+    colorPrimary: themeColors[themeColor.value],
+  },
+}))
+
+export function useTheme() {
+  const setThemeMode = (mode: ThemeMode) => {
+    themeMode.value = mode
+    localStorage.setItem('theme-mode', mode)
+  }
+
+  const setThemeColor = (color: ThemeColor) => {
+    themeColor.value = color
+    localStorage.setItem('theme-color', color)
+  }
+
+  // 初始化时从localStorage读取设置
+  const initTheme = () => {
+    const savedMode = localStorage.getItem('theme-mode') as ThemeMode
+    const savedColor = localStorage.getItem('theme-color') as ThemeColor
+
+    if (savedMode) {
+      themeMode.value = savedMode
+    }
+    if (savedColor) {
+      themeColor.value = savedColor
+    }
+
+    updateTheme()
+  }
+
+  return {
+    themeMode: computed(() => themeMode.value),
+    themeColor: computed(() => themeColor.value),
+    isDark: computed(() => isDark.value),
+    antdTheme,
+    themeColors,
+    setThemeMode,
+    setThemeColor,
+    initTheme,
+  }
+}

frontend/src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+import Antd from 'ant-design-vue'
+import 'ant-design-vue/dist/reset.css'
+
+createApp(App).use(Antd).use(router).mount('#app')

frontend/src/router/index.ts

@@ -0,0 +1,58 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    redirect: '/home',
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: () => import('../views/Home.vue'),
+    meta: { title: '主页' },
+  },
+  {
+    path: '/scripts',
+    name: 'Scripts',
+    component: () => import('../views/Scripts.vue'),
+    meta: { title: '脚本管理' },
+  },
+  {
+    path: '/plans',
+    name: 'Plans',
+    component: () => import('../views/Plans.vue'),
+    meta: { title: '计划管理' },
+  },
+  {
+    path: '/queue',
+    name: 'Queue',
+    component: () => import('../views/Queue.vue'),
+    meta: { title: '调度队列' },
+  },
+  {
+    path: '/scheduler',
+    name: 'Scheduler',
+    component: () => import('../views/Scheduler.vue'),
+    meta: { title: '调度中心' },
+  },
+  {
+    path: '/history',
+    name: 'History',
+    component: () => import('../views/History.vue'),
+    meta: { title: '历史记录' },
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: () => import('../views/Settings.vue'),
+    meta: { title: '设置' },
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

frontend/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

frontend/src/views/History.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="page-container">
+    <h1>历史记录</h1>
+    <p>这里是历史记录内容的占位符</p>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+}
+</style>

frontend/src/views/Home.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="page-container">
+    <h1>主页</h1>
+    <p>这里是主页内容的占位符</p>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+}
+</style>

frontend/src/views/Plans.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="page-container">
+    <h1>计划管理</h1>
+    <p>这里是计划管理内容的占位符</p>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+}
+</style>

frontend/src/views/Queue.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="page-container">
+    <h1>调度队列</h1>
+    <p>这里是调度队列内容的占位符</p>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+}
+</style>

frontend/src/views/Scheduler.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="page-container">
+    <h1>调度中心</h1>
+    <p>这里是调度中心内容的占位符</p>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+}
+</style>

frontend/src/views/Scripts.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="page-container">
+    <h1>脚本管理</h1>
+    <p>这里是脚本管理内容的占位符</p>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  padding: 20px;
+}
+</style>

frontend/src/views/Settings.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { Card, Row, Col, Radio, Button, Select, Space, Divider } from 'ant-design-vue'
+import { useTheme } from '../composables/useTheme'
+import type { ThemeMode, ThemeColor } from '../composables/useTheme'
+
+const { themeMode, themeColor, themeColors, setThemeMode, setThemeColor } = useTheme()
+
+// 主题模式选项
+const themeModeOptions = [
+  { label: '跟随系统', value: 'system' },
+  { label: '浅色模式', value: 'light' },
+  { label: '深色模式', value: 'dark' },
+]
+
+// 主题色选项
+const themeColorOptions = Object.entries(themeColors).map(([key, color]) => ({
+  label: key.charAt(0).toUpperCase() + key.slice(1),
+  value: key,
+  color,
+}))
+
+const handleThemeModeChange = (e: any) => {
+  setThemeMode(e.target.value as ThemeMode)
+}
+
+const handleThemeColorChange = (value: ThemeColor) => {
+  setThemeColor(value)
+}
+
+const openDevTools = () => {
+  // 通过 Electron 的 preload 脚本调用开发者工具
+  if (window.electronAPI) {
+    window.electronAPI.openDevTools()
+  }
+}
+</script>
+
+<template>
+  <div class="settings-container">
+    <h1>设置</h1>
+
+    <Row :gutter="[24, 24]">
+      <Col :span="24">
+        <Card title="外观设置" size="small">
+          <Space direction="vertical" size="large" style="width: 100%">
+            <!-- 深色模式切换 -->
+            <div>
+              <h4>主题模式</h4>
+              <Radio.Group
+                :value="themeMode"
+                @change="handleThemeModeChange"
+                :options="themeModeOptions"
+              />
+            </div>
+
+            <Divider />
+
+            <!-- 主题色切换 -->
+            <div>
+              <h4>主题色</h4>
+              <Select :value="themeColor" @change="handleThemeColorChange" style="width: 200px">
+                <Select.Option
+                  v-for="option in themeColorOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  <div style="display: flex; align-items: center; gap: 8px">
+                    <div
+                      :style="{
+                        width: '16px',
+                        height: '16px',
+                        borderRadius: '50%',
+                        backgroundColor: option.color,
+                      }"
+                    />
+                    {{ option.label }}
+                  </div>
+                </Select.Option>
+              </Select>
+            </div>
+          </Space>
+        </Card>
+      </Col>
+
+      <Col :span="24">
+        <Card title="开发者工具" size="small">
+          <Space direction="vertical" size="middle">
+            <div>
+              <h4>调试工具</h4>
+              <p style="color: var(--ant-color-text-secondary); margin-bottom: 12px">
+                打开浏览器开发者工具进行调试
+              </p>
+              <Button type="primary" @click="openDevTools"> 打开 F12 开发者工具 </Button>
+            </div>
+          </Space>
+        </Card>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style scoped>
+.settings-container {
+  max-width: 800px;
+}
+
+h4 {
+  margin: 0 0 8px 0;
+  font-weight: 600;
+}
+
+:deep(.ant-card-head-title) {
+  font-weight: 600;
+}
+</style>

frontend/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+declare global {
+  interface Window {
+    electronAPI?: {
+      openDevTools: () => void
+    }
+  }
+}