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

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

.gitignore

@@ -1,5 +1,4 @@
 __pycache__/
-config/
 data/
 debug/
 history/

frontend/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+}

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+.kiro
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+dist-electron

frontend/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

frontend/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

frontend/dist-electron/main.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const electron_1 = require("electron");
+const path = __importStar(require("path"));
+let mainWindow = null;
+function createWindow() {
+    mainWindow = new electron_1.BrowserWindow({
+        width: 1200,
+        height: 800,
+        minWidth: 800,
+        minHeight: 600,
+        icon: path.join(__dirname, '../public/AUTO_MAA.ico'), // 设置应用图标
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.js'),
+            nodeIntegration: false,
+            contextIsolation: true
+        },
+        // 隐藏菜单栏
+        autoHideMenuBar: true,
+        // 或者完全移除菜单栏（推荐）
+        // menuBarVisible: false
+    });
+    // 完全移除菜单栏
+    mainWindow.setMenuBarVisibility(false);
+    const devServer = process.env.VITE_DEV_SERVER_URL;
+    if (devServer) {
+        mainWindow.loadURL(devServer);
+    }
+    else {
+        mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
+    }
+    mainWindow.on('closed', () => {
+        mainWindow = null;
+    });
+}
+// 处理开发者工具请求
+electron_1.ipcMain.handle('open-dev-tools', () => {
+    if (mainWindow) {
+        mainWindow.webContents.openDevTools();
+    }
+});
+electron_1.app.whenReady().then(createWindow);
+electron_1.app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin')
+        electron_1.app.quit();
+});
+electron_1.app.on('activate', () => {
+    if (mainWindow === null)
+        createWindow();
+});

frontend/dist-electron/preload.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const electron_1 = require("electron");
+window.addEventListener('DOMContentLoaded', () => {
+    console.log('Preload loaded');
+});
+// 暴露安全的 API 给渲染进程
+electron_1.contextBridge.exposeInMainWorld('electronAPI', {
+    openDevTools: () => electron_1.ipcRenderer.invoke('open-dev-tools')
+});

frontend/electron/main.ts

@@ -0,0 +1,54 @@
+import { app, BrowserWindow, ipcMain } from 'electron'
+import * as path from 'path'
+
+let mainWindow: BrowserWindow | null = null
+
+function createWindow() {
+    mainWindow = new BrowserWindow({
+        width: 1200,
+        height: 800,
+        minWidth: 800,
+        minHeight: 600,
+        icon: path.join(__dirname, '../public/AUTO_MAA.ico'), // 设置应用图标
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.js'),
+            nodeIntegration: false,
+            contextIsolation: true
+        },
+        // 隐藏菜单栏
+        autoHideMenuBar: true,
+        // 或者完全移除菜单栏（推荐）
+        // menuBarVisible: false
+    })
+
+    // 完全移除菜单栏
+    mainWindow.setMenuBarVisibility(false)
+
+    const devServer = process.env.VITE_DEV_SERVER_URL
+    if (devServer) {
+        mainWindow.loadURL(devServer)
+    } else {
+        mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
+    }
+
+    mainWindow.on('closed', () => {
+        mainWindow = null
+    })
+}
+
+// 处理开发者工具请求
+ipcMain.handle('open-dev-tools', () => {
+    if (mainWindow) {
+        mainWindow.webContents.openDevTools()
+    }
+})
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') app.quit()
+})
+
+app.on('activate', () => {
+    if (mainWindow === null) createWindow()
+})

frontend/electron/preload.ts

@@ -0,0 +1,10 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+window.addEventListener('DOMContentLoaded', () => {
+    console.log('Preload loaded')
+})
+
+// 暴露安全的 API 给渲染进程
+contextBridge.exposeInMainWorld('electronAPI', {
+    openDevTools: () => ipcRenderer.invoke('open-dev-tools')
+})

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "main": "dist-electron/main.js",
+  "scripts": {
+    "dev": "concurrently \"vite\" \"yarn watch:main\" \"yarn electron-dev\"",
+    "watch:main": "tsc --watch",
+    "electron-dev": "wait-on http://localhost:5173 && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 electron .",
+    "build:main": "tsc",
+    "build": "vite build && yarn build:main && electron-builder",
+    "web": "vite"
+  },
+  "build": {
+    "appId": "xyz.automaa.frontend",
+    "productName": "AUTO MAA",
+    "files": [
+      "dist",
+      "dist-electron",
+      "public"
+    ],
+    "directories": {
+      "buildResources": "assets"
+    },
+    "win": {
+      "icon": "public/AUTO_MAA.ico"
+    },
+    "mac": {
+      "icon": "public/AUTO_MAA.ico"
+    },
+    "linux": {
+      "icon": "public/AUTO_MAA.ico"
+    }
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "ant-design-vue": "4.x",
+    "vue": "^3.5.17",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.7.0",
+    "concurrently": "^9.2.0",
+    "cross-env": "^10.0.0",
+    "electron": "^37.2.5",
+    "electron-builder": "^26.0.12",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-vue": "^10.4.0",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2",
+    "vite": "^7.0.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^2.2.12",
+    "wait-on": "^8.0.4"
+  }
+}

frontend/public/vite.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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

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
+    }
+  }
+}

frontend/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

frontend/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "strict": true,
+    "outDir": "dist-electron",
+    "rootDir": "electron",
+    "esModuleInterop": true,
+    "types": ["node", "electron"]
+  },
+  "include": ["electron"]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue/dist'
+import eslint from 'vite-plugin-eslint'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), eslint()],
+})