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

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

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>