refactor(Scripts): 重构脚本管理页面

This commit is contained in:
2025-08-26 02:15:51 +08:00
parent dc27127322
commit 3e0a9f3a94
6 changed files with 769 additions and 637 deletions

View File

@@ -40,8 +40,6 @@ yarn install
### 开发模式
```bash
yarn web # 启动 Vite 开发服务器(浏览器查看)
yarn dev # 启动 Electron 开发环境
```

File diff suppressed because it is too large Load Diff

View File

@@ -97,7 +97,7 @@ async function startAutoProcess() {
if (aborted.value) return
if (hasUpdate) {
progressText.value = '发现更新,正在更新代码...'
progressText.value = '正在更新...'
progress.value = 40
// 使用配置中保存的Git镜像源

View File

@@ -1,121 +0,0 @@
<template>
<div class="step-panel">
<h3>Git 版本控制工具</h3>
<div v-if="!gitInstalled" class="install-section">
<p>需要安装 Git 工具来获取源代码</p>
<div class="git-info">
<a-alert
message="Git 工具信息"
description="将安装便携版 Git 工具,包含完整的版本控制功能,无需系统安装。"
type="info"
show-icon
/>
</div>
</div>
<div v-else class="already-installed">
<a-result status="success" title="Git已成功安装无需继续安装" />
<!-- <div class="reinstall-section">-->
<!-- <a-button type="primary" danger @click="handleForceReinstall" :loading="reinstalling">-->
<!-- {{ reinstalling ? '正在重新安装...' : '强制重新安装' }}-->
<!-- </a-button>-->
<!-- <p class="reinstall-note">点击此按钮将删除现有Git环境并重新安装</p>-->
<!-- </div>-->
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{
gitInstalled: boolean
}>()
const reinstalling = ref(false)
// 强制重新安装Git
async function handleForceReinstall() {
reinstalling.value = true
try {
console.log('开始强制重新安装Git')
// 先删除现有Git
const deleteResult = await window.electronAPI.deleteGit()
if (!deleteResult.success) {
throw new Error(`删除Git失败: ${deleteResult.error}`)
}
// 重新安装Git
const installResult = await window.electronAPI.downloadGit()
if (!installResult.success) {
throw new Error(`重新安装Git失败: ${installResult.error}`)
}
console.log('Git强制重新安装成功')
// 通知父组件更新状态
window.location.reload() // 简单的页面刷新来更新状态
} catch (error) {
console.error('Git强制重新安装失败:', error)
// 这里可以添加错误提示
} finally {
reinstalling.value = false
}
}
defineExpose({
handleForceReinstall,
})
</script>
<style scoped>
.step-panel {
padding: 20px;
background: var(--ant-color-bg-elevated);
border-radius: 8px;
border: 1px solid var(--ant-color-border);
}
.step-panel h3 {
font-size: 20px;
font-weight: 600;
color: var(--ant-color-text);
margin-bottom: 20px;
}
.install-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.install-section p {
color: var(--ant-color-text-secondary);
margin: 0;
}
.git-info {
margin-top: 16px;
}
.already-installed {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 200px;
gap: 20px;
}
.reinstall-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.reinstall-note {
font-size: 12px;
color: var(--ant-color-text-tertiary);
text-align: center;
margin: 0;
}
</style>

View File

@@ -4,25 +4,24 @@
<h1>AUTO_MAA 初始化向导</h1>
<p>欢迎使用 AUTO_MAA让我们来配置您的运行环境</p>
<div class="header-actions">
<a-button size="large" type="primary" @click="handleSkipToHome">
跳转至首页仅开发用
</a-button>
<a-button
size="large"
type="default"
@click="handleJumpToStep(6)"
style="margin-left: 16px"
>
跳到启动服务第七步
</a-button>
</div>
<!-- <div class="header-actions">-->
<!-- <a-button size="large" type="primary" @click="handleSkipToHome">-->
<!-- 跳转至首页仅开发用-->
<!-- </a-button>-->
<!-- <a-button-->
<!-- size="large"-->
<!-- type="default"-->
<!-- @click="handleJumpToStep(6)"-->
<!-- style="margin-left: 16px"-->
<!-- >-->
<!-- 跳到启动服务第七步-->
<!-- </a-button>-->
<!-- </div>-->
</div>
<a-steps :current="currentStep" :status="stepStatus" class="init-steps">
<a-step title="主题设置" description="选择您喜欢的主题" />
<a-step title="Python 环境" description="安装 Python 运行环境" />
<a-step title="pip 安装" description="安装 Python 包管理器" />
<a-step title="Git 工具" description="安装 Git 版本控制工具" />
<a-step title="源码获取" description="获取最新的后端代码" />
<a-step title="依赖安装" description="安装 Python 依赖包" />
@@ -53,16 +52,13 @@
<!-- 步骤 2: pip 安装 -->
<PipStep v-if="currentStep === 2" :pip-installed="pipInstalled" ref="pipStepRef" />
<!-- 步骤 3: Git 工具 -->
<GitStep v-if="currentStep === 3" :git-installed="gitInstalled" ref="gitStepRef" />
<!-- 步骤 4: 源码获取 -->
<!-- 步骤 3: 源码获取 -->
<BackendStep v-if="currentStep === 4" :backend-exists="backendExists" ref="backendStepRef" />
<!-- 步骤 5: 依赖安装 -->
<!-- 步骤 4: 依赖安装 -->
<DependenciesStep v-if="currentStep === 5" ref="dependenciesStepRef" />
<!-- 步骤 6: 启动服务 -->
<!-- 步骤 5: 启动服务 -->
<ServiceStep v-if="currentStep === 6" ref="serviceStepRef" />
</div>
@@ -77,7 +73,7 @@
</a-button>
<a-button
v-if="currentStep < 6"
v-if="currentStep < 5"
size="large"
type="primary"
@click="handleNextStep"
@@ -88,7 +84,7 @@
<!-- 第7步重新启动服务按钮 -->
<a-button
v-if="currentStep === 6"
v-if="currentStep === 5"
type="default"
size="large"
@click="handleNextStep"
@@ -111,14 +107,13 @@
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { createComponentLogger } from '@/utils/logger'
import { saveConfig } from '@/utils/config'
import ThemeStep from './ThemeStep.vue'
import PythonStep from './PythonStep.vue'
import PipStep from './PipStep.vue'
import GitStep from './GitStep.vue'
import BackendStep from './BackendStep.vue'
import DependenciesStep from './DependenciesStep.vue'
import ServiceStep from './ServiceStep.vue'
@@ -206,13 +201,7 @@ async function handleNextStep() {
await installPip()
}
break
case 3: // Git 工具
console.log('执行Git工具安装')
if (!props.gitInstalled) {
await installGit()
}
break
case 4: // 源码获取
case 3: // 源码获取
console.log('执行源码获取')
if (!props.backendExists) {
await cloneBackend()
@@ -220,19 +209,19 @@ async function handleNextStep() {
await updateBackend()
}
break
case 5: // 依赖安装
case 4: // 依赖安装
console.log('执行依赖安装')
if (!props.dependenciesInstalled) {
await installDependencies()
}
break
case 6: // 启动服务
case 5: // 启动服务
console.log('执行启动服务')
await startBackendService()
break
}
if (currentStep.value < 6) {
if (currentStep.value < 5) {
currentStep.value++
// 进入新步骤时自动开始测速
await autoStartSpeedTest()
@@ -255,12 +244,10 @@ function getNextButtonText() {
case 2:
return props.pipInstalled ? '下一步' : '安装 pip'
case 3:
return props.gitInstalled ? '下一步' : '安装 Git'
case 4:
return props.backendExists ? '更新代码' : '获取代码'
case 5:
case 4:
return '安装依赖'
case 6:
case 5:
return '启动服务'
default:
return '下一步'

View File

@@ -1,32 +1,36 @@
<template>
<div class="scripts-header">
<div class="header-title">
<h1>脚本管理</h1>
</div>
<a-space size="middle">
<a-button type="primary" size="large" @click="handleAddScript" class="link">
<template #icon>
<PlusOutlined />
</template>
新建脚本
</a-button>
<a-button size="large" @click="handleRefresh" class="default">
<template #icon>
<ReloadOutlined />
</template>
刷新
</a-button>
</a-space>
</div>
<ScriptTable
:scripts="scripts"
@edit="handleEditScript"
@delete="handleDeleteScript"
@add-user="handleAddUser"
@edit-user="handleEditUser"
@delete-user="handleDeleteUser"
/>
<div class="scripts-header">
<div class="header-title">
<h1>脚本管理</h1>
</div>
<a-space size="middle">
<a-button type="primary" size="large" @click="handleAddScript" class="link">
<template #icon>
<PlusOutlined />
</template>
新建脚本
</a-button>
<a-button size="large" @click="handleRefresh" class="default">
<template #icon>
<ReloadOutlined />
</template>
刷新
</a-button>
</a-space>
</div>
<ScriptTable
:scripts="scripts"
@edit="handleEditScript"
@delete="handleDeleteScript"
@add-user="handleAddUser"
@edit-user="handleEditUser"
@delete-user="handleDeleteUser"
@maa-config="handleMAAConfig"
@toggle-user-status="handleToggleUserStatus"
/>
<!-- 脚本类型选择弹窗 -->
<a-modal
@@ -194,6 +198,18 @@ const handleRefresh = () => {
loadScripts()
message.success('刷新成功')
}
const handleMAAConfig = (script: Script) => {
// TODO: 实现MAA全局配置功能
console.log('设置MAA全局配置:', script)
message.info('MAA全局配置功能待实现')
}
const handleToggleUserStatus = (user: User) => {
// TODO: 实现用户状态切换功能
console.log('切换用户状态:', user)
message.info(`切换用户 ${user.Info.Name} 的状态功能待实现`)
}
</script>
<style scoped>