refactor(ScriptEdit): 更新 ScriptEdit 组件的按钮功能和图标

- 将取消按钮的图标从 CloseOutlined 改为 ArrowLeftOutlined
- 移除保存配置按钮
- 修改 Scripts 组件中添加脚本按钮的文案为"新建脚本"
This commit is contained in:
2025-08-05 23:29:07 +08:00
parent 8c88e4e6a2
commit 40ca642c07
3 changed files with 959 additions and 633 deletions

View File

@@ -23,22 +23,22 @@
<a-space size="middle">
<a-button size="large" @click="handleCancel" class="cancel-button">
<template #icon>
<CloseOutlined />
<ArrowLeftOutlined />
</template>
取消
</a-button>
<a-button
type="primary"
size="large"
:loading="loading"
@click="handleSave"
class="save-button"
>
<template #icon>
<SaveOutlined />
</template>
保存配置
返回
</a-button>
<!-- <a-button-->
<!-- type="primary"-->
<!-- size="large"-->
<!-- :loading="loading"-->
<!-- @click="handleSave"-->
<!-- class="save-button"-->
<!-- >-->
<!-- <template #icon>-->
<!-- <SaveOutlined />-->
<!-- </template>-->
<!-- 保存配置-->
<!-- </a-button>-->
</a-space>
</div>
@@ -829,7 +829,7 @@ import { message } from 'ant-design-vue'
import type { GeneralScriptConfig, MAAScriptConfig, ScriptType } from '../types/script'
import { useScriptApi } from '../composables/useScriptApi'
import {
CloseOutlined,
ArrowLeftOutlined,
FileOutlined,
FolderOpenOutlined,
QuestionCircleOutlined,

View File

@@ -8,7 +8,7 @@
<template #icon>
<PlusOutlined />
</template>
添加脚本
新建脚本
</a-button>
<a-button size="large" @click="handleRefresh" class="default">
<template #icon>

View File

@@ -1,9 +1,21 @@
<template>
<div class="user-edit-header">
<div class="header-title">
<h1>{{ isEdit ? '编辑用户' : '添加用户' }}</h1>
<p class="subtitle">{{ scriptName }}</p>
<div class="header-nav">
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item>
<router-link to="/scripts">脚本管理</router-link>
</a-breadcrumb-item>
<a-breadcrumb-item>
<router-link :to="`/scripts/${scriptId}/edit`" class="breadcrumb-link">
{{ scriptName }}
</router-link>
</a-breadcrumb-item>
<a-breadcrumb-item>
{{ isEdit ? '编辑用户' : '添加用户' }}
</a-breadcrumb-item>
</a-breadcrumb>
</div>
<a-space size="middle">
<a-button size="large" @click="handleCancel" class="cancel-button">
<template #icon>
@@ -11,23 +23,19 @@
</template>
返回
</a-button>
<a-button
type="primary"
size="large"
@click="handleSubmit"
:loading="loading"
class="save-button"
>
<template #icon>
<SaveOutlined />
</template>
{{ isEdit ? '保存修改' : '创建用户' }}
</a-button>
<!-- <a-button type="primary" size="large" @click="handleSubmit" :loading="loading" class="save-button">-->
<!-- <template #icon>-->
<!-- <SaveOutlined />-->
<!-- </template>-->
<!-- {{ isEdit ? '保存修改' : '创建用户' }}-->
<!-- </a-button>-->
</a-space>
</div>
<div class="user-edit-content">
<a-form ref="formRef" :model="formData" :rules="rules" layout="vertical" class="user-form">
<!-- MAA脚本用户配置 -->
<template v-if="scriptType === 'MAA'">
<a-card title="基本信息" class="form-card">
<a-row :gutter="24">
<a-col :span="12">
@@ -640,6 +648,263 @@
</a-col>
</a-row>
</a-card>
</template>
<!-- 通用脚本用户配置 -->
<template v-else>
<a-card title="基本信息" class="form-card">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item name="userName" required>
<template #label>
<a-tooltip title="用于识别用户的显示名称">
<span class="form-label">
用户名
<QuestionCircleOutlined class="help-icon" />
</span>
</a-tooltip>
</template>
<a-input
v-model:value="formData.userName"
placeholder="请输入用户名"
:disabled="loading"
size="large"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item name="status">
<template #label>
<a-tooltip title="是否启用该用户">
<span class="form-label">
启用状态
<QuestionCircleOutlined class="help-icon" />
</span>
</a-tooltip>
</template>
<a-switch
v-model:checked="formData.Info.Status"
:disabled="loading"
size="default"
/>
<span class="switch-description">启用后该用户将参与自动化任务</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item name="remainedDay">
<template #label>
<a-tooltip title="账号剩余的有效天数,-1表示无限">
<span class="form-label">
剩余天数
<QuestionCircleOutlined class="help-icon" />
</span>
</a-tooltip>
</template>
<a-input-number
v-model:value="formData.Info.RemainedDay"
:min="-1"
:max="9999"
placeholder="-1"
:disabled="loading"
size="large"
style="width: 100%"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<!-- 占位列 -->
</a-col>
</a-row>
<a-form-item name="notes">
<template #label>
<a-tooltip title="为用户添加备注信息,便于管理和识别">
<span class="form-label">
备注
<QuestionCircleOutlined class="help-icon" />
</span>
</a-tooltip>
</template>
<a-textarea
v-model:value="formData.Info.Notes"
placeholder="请输入备注信息"
:rows="4"
:disabled="loading"
/>
</a-form-item>
</a-card>
<a-card title="脚本配置" class="form-card">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item name="ifScriptBeforeTask">
<template #label>
<a-tooltip title="是否在任务执行前运行自定义脚本">
<span class="form-label">
任务前执行脚本
<QuestionCircleOutlined class="help-icon" />
</span>
</a-tooltip>
</template>
<a-switch
v-model:checked="formData.Info.IfScriptBeforeTask"
:disabled="loading"
size="default"
/>
<span class="switch-description">启用后将在任务执行前运行指定脚本</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item name="ifScriptAfterTask">
<template #label>
<a-tooltip title="是否在任务执行后运行自定义脚本">
<span class="form-label">
任务后执行脚本
<QuestionCircleOutlined class="help-icon" />
</span>
</a-tooltip>
</template>
<a-switch
v-model:checked="formData.Info.IfScriptAfterTask"
:disabled="loading"
size="default"
/>
<span class="switch-description">启用后将在任务执行后运行指定脚本</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item name="scriptBeforeTask">
<template #label>
<a-tooltip title="任务执行前要运行的脚本路径或命令">
<span class="form-label">
任务前脚本
<QuestionCircleOutlined class="help-icon" />
</span>
</a-tooltip>
</template>
<a-input
v-model:value="formData.Info.ScriptBeforeTask"
placeholder="请输入脚本路径或命令"
:disabled="loading || !formData.Info.IfScriptBeforeTask"
size="large"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item name="scriptAfterTask">
<template #label>
<a-tooltip title="任务执行后要运行的脚本路径或命令">
<span class="form-label">
任务后脚本
<QuestionCircleOutlined class="help-icon" />
</span>
</a-tooltip>
</template>
<a-input
v-model:value="formData.Info.ScriptAfterTask"
placeholder="请输入脚本路径或命令"
:disabled="loading || !formData.Info.IfScriptAfterTask"
size="large"
/>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-card title="通知配置" class="form-card">
<a-row :gutter="24" align="middle">
<a-col :span="6">
<span style="font-weight: 500">启用通知</span>
</a-col>
<a-col :span="18">
<a-switch v-model:checked="formData.Notify.Enabled" :disabled="loading" />
<span class="switch-description">启用后将发送任务通知</span>
</a-col>
</a-row>
<!-- 邮件通知 -->
<a-row :gutter="24" style="margin-top: 16px">
<a-col :span="6">
<a-checkbox
v-model:checked="formData.Notify.IfSendMail"
:disabled="loading || !formData.Notify.Enabled"
>邮件通知
</a-checkbox>
</a-col>
<a-col :span="18">
<a-input
v-model:value="formData.Notify.ToAddress"
placeholder="请输入收件人邮箱地址"
:disabled="loading || !formData.Notify.Enabled || !formData.Notify.IfSendMail"
size="large"
style="width: 100%"
/>
</a-col>
</a-row>
<!-- Server酱通知 -->
<a-row :gutter="24" style="margin-top: 16px">
<a-col :span="6">
<a-checkbox
v-model:checked="formData.Notify.IfServerChan"
:disabled="loading || !formData.Notify.Enabled"
>Server酱
</a-checkbox>
</a-col>
<a-col :span="18">
<a-input
v-model:value="formData.Notify.ServerChanKey"
placeholder="SENDKEY"
:disabled="loading || !formData.Notify.Enabled || !formData.Notify.IfServerChan"
size="large"
style="width: 100%"
/>
</a-col>
</a-row>
<!-- 企业微信群机器人通知 -->
<a-row :gutter="24" style="margin-top: 16px">
<a-col :span="6">
<a-checkbox
v-model:checked="formData.Notify.IfCompanyWebHookBot"
:disabled="loading || !formData.Notify.Enabled"
>企业微信群机器人
</a-checkbox>
</a-col>
<a-col :span="18">
<a-input
v-model:value="formData.Notify.CompanyWebHookBotUrl"
placeholder="请输入机器人Webhook地址"
:disabled="
loading || !formData.Notify.Enabled || !formData.Notify.IfCompanyWebHookBot
"
size="large"
style="width: 100%"
/>
</a-col>
</a-row>
<!-- 发送统计等可选通知 -->
<a-row :gutter="24" style="margin-top: 16px">
<a-col :span="6">
<span style="font-weight: 500">通知内容</span>
</a-col>
<a-col :span="18">
<a-checkbox
v-model:checked="formData.Notify.IfSendStatistic"
:disabled="loading || !formData.Notify.Enabled"
>发送统计
</a-checkbox>
</a-col>
</a-row>
</a-card>
</template>
</a-form>
</div>
@@ -658,12 +923,11 @@
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { ArrowLeftOutlined, SaveOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue'
import { ArrowLeftOutlined, QuestionCircleOutlined, SaveOutlined } from '@ant-design/icons-vue'
import type { FormInstance, Rule } from 'ant-design-vue/es/form'
import type { User } from '@/types/script'
import { useUserApi } from '@/composables/useUserApi'
import { useScriptApi } from '@/composables/useScriptApi'
@@ -682,6 +946,7 @@ const isEdit = computed(() => !!userId)
// 脚本信息
const scriptName = ref('')
const scriptType = ref<'MAA' | 'General'>('MAA')
// 服务器选项
const serverOptions = [
@@ -689,8 +954,8 @@ const serverOptions = [
{ label: 'B服', value: 'Bilibili' },
]
// 默认用户数据
const getDefaultUserData = () => ({
// MAA脚本默认用户数据
const getDefaultMAAUserData = () => ({
Info: {
Name: '',
Id: '',
@@ -747,6 +1012,41 @@ const getDefaultUserData = () => ({
},
})
// 通用脚本默认用户数据
const getDefaultGeneralUserData = () => ({
Info: {
Name: '',
Notes: '',
Status: true,
RemainedDay: -1,
IfScriptBeforeTask: false,
IfScriptAfterTask: false,
ScriptBeforeTask: '',
ScriptAfterTask: '',
},
Notify: {
Enabled: false,
ToAddress: '',
IfSendMail: false,
IfSendStatistic: false,
IfServerChan: false,
IfCompanyWebHookBot: false,
ServerChanKey: '',
ServerChanChannel: '',
ServerChanTag: '',
CompanyWebHookBotUrl: '',
},
Data: {
LastProxyDate: '2000-01-01',
ProxyTimes: 0,
},
})
// 根据脚本类型获取默认数据
const getDefaultUserData = () => {
return scriptType.value === 'MAA' ? getDefaultMAAUserData() : getDefaultGeneralUserData()
}
// 创建扁平化的表单数据,用于表单验证
const formData = reactive({
// 扁平化的验证字段
@@ -805,6 +1105,14 @@ const loadScriptInfo = async () => {
const script = await getScript(scriptId)
if (script) {
scriptName.value = script.name
scriptType.value = script.type // 设置脚本类型
// 重新初始化表单数据(根据脚本类型)
Object.assign(formData, {
userName: '',
userId: '',
...getDefaultUserData(),
})
// 如果是编辑模式,加载用户数据
if (isEdit.value && script.config) {
@@ -818,20 +1126,30 @@ const loadScriptInfo = async () => {
// 从用户数据中获取实际的用户信息
const userData = config.SubConfigsInfo.UserData[userInstance.uid]
if (userData) {
// 填充用户数据
// 根据脚本类型填充用户数据
if (scriptType.value === 'MAA') {
Object.assign(formData, {
Info: { ...getDefaultUserData().Info, ...userData.Info },
Task: { ...getDefaultUserData().Task, ...userData.Task },
Notify: { ...getDefaultUserData().Notify, ...userData.Notify },
Data: { ...getDefaultUserData().Data, ...userData.Data },
Info: { ...getDefaultMAAUserData().Info, ...userData.Info },
Task: { ...getDefaultMAAUserData().Task, ...userData.Task },
Notify: { ...getDefaultMAAUserData().Notify, ...userData.Notify },
Data: { ...getDefaultMAAUserData().Data, ...userData.Data },
QFluentWidgets: {
...getDefaultUserData().QFluentWidgets,
...getDefaultMAAUserData().QFluentWidgets,
...userData.QFluentWidgets,
},
})
} else {
// 通用脚本
Object.assign(formData, {
Info: { ...getDefaultGeneralUserData().Info, ...userData.Info },
Notify: { ...getDefaultGeneralUserData().Notify, ...userData.Notify },
Data: { ...getDefaultGeneralUserData().Data, ...userData.Data },
})
}
// 同步扁平化字段
formData.userName = formData.Info.Name
formData.userId = formData.Info.Id
formData.userId = formData.Info.Id || ''
}
}
}
@@ -910,6 +1228,14 @@ onMounted(() => {
padding: 0 8px;
}
.header-nav {
flex: 1;
}
.breadcrumb {
margin: 0;
}
.header-title h1 {
margin: 0;
font-size: 32px;