feat(scripts): 添加脚本配置功能

frontend/src/views/Scripts.vue

@@ -22,12 +22,14 @@
 
     <ScriptTable
       :scripts="scripts"
+      :active-connections="activeConnections"
       @edit="handleEditScript"
       @delete="handleDeleteScript"
       @add-user="handleAddUser"
       @edit-user="handleEditUser"
       @delete-user="handleDeleteUser"
       @maa-config="handleMAAConfig"
+      @disconnect-maa="handleDisconnectMAA"
       @toggle-user-status="handleToggleUserStatus"
     />
 
@@ -74,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
 import { PlusOutlined, ReloadOutlined } from '@ant-design/icons-vue'
@@ -82,20 +84,30 @@ import ScriptTable from '@/components/ScriptTable.vue'
 import type { Script, ScriptType, User } from '@/types/script'
 import { useScriptApi } from '@/composables/useScriptApi'
 import { useUserApi } from '@/composables/useUserApi'
+import { useWebSocket } from '@/composables/useWebSocket'
 
 const router = useRouter()
 const { addScript, deleteScript, getScriptsWithUsers, loading } = useScriptApi()
 const { addUser, updateUser, deleteUser, loading: userLoading } = useUserApi()
+const { connect, disconnect, disconnectAll } = useWebSocket()
 
 const scripts = ref<Script[]>([])
 const typeSelectVisible = ref(false)
 const selectedType = ref<ScriptType>('MAA')
 const addLoading = ref(false)
 
+// WebSocket连接管理
+const activeConnections = ref<Map<string, string>>(new Map()) // scriptId -> websocketId
+
 onMounted(() => {
   loadScripts()
 })
 
+onUnmounted(() => {
+  // 清理所有WebSocket连接
+  disconnectAll()
+})
+
 const loadScripts = async () => {
   try {
     const scriptDetails = await getScriptsWithUsers()
@@ -199,10 +211,62 @@ const handleRefresh = () => {
   message.success('刷新成功')
 }
 
-const handleMAAConfig = (script: Script) => {
-  // TODO: 实现MAA全局配置功能
-  console.log('设置MAA全局配置:', script)
-  message.info('MAA全局配置功能待实现')
+const handleMAAConfig = async (script: Script) => {
+  try {
+    // 检查是否已有连接
+    const existingWebsocketId = activeConnections.value.get(script.id)
+    if (existingWebsocketId) {
+      message.warning('该脚本已在配置中，请先断开连接')
+      return
+    }
+
+    // 建立WebSocket连接进行MAA配置
+    const websocketId = await connect({
+      taskId: script.id,
+      mode: '设置脚本',
+      showNotifications: true,
+      onStatusChange: (status) => {
+        console.log(`脚本 ${script.name} 连接状态: ${status}`)
+      },
+      onMessage: (data) => {
+        console.log(`脚本 ${script.name} 收到消息:`, data)
+        // 这里可以根据需要处理特定的消息
+      },
+      onError: (error) => {
+        console.error(`脚本 ${script.name} 连接错误:`, error)
+        message.error(`MAA配置连接失败: ${error}`)
+        // 清理连接记录
+        activeConnections.value.delete(script.id)
+      }
+    })
+
+    if (websocketId) {
+      // 记录连接
+      activeConnections.value.set(script.id, websocketId)
+      message.success(`已开始配置 ${script.name}`)
+      
+      // 可选：设置自动断开连接的定时器（比如30分钟后）
+      setTimeout(() => {
+        if (activeConnections.value.has(script.id)) {
+          disconnect(websocketId)
+          activeConnections.value.delete(script.id)
+          message.info(`${script.name} 配置会话已超时断开`)
+        }
+      }, 30 * 60 * 1000) // 30分钟
+    }
+  } catch (error) {
+    console.error('MAA配置失败:', error)
+    message.error('MAA配置失败')
+  }
+}
+
+const handleDisconnectMAA = (script: Script) => {
+  const websocketId = activeConnections.value.get(script.id)
+  if (websocketId) {
+    disconnect(websocketId)
+    activeConnections.value.delete(script.id)
+    message.success(`已断开 ${script.name} 的配置连接`)
+  }
 }
 
 const handleToggleUserStatus = async (user: User) => {

frontend/src/views/UserEdit.vue

@@ -17,6 +17,32 @@
     </div>
 
     <a-space size="middle">
+      <a-button 
+        v-if="scriptType === 'MAA'" 
+        type="primary" 
+        ghost 
+        size="large" 
+        @click="handleMAAConfig"
+        :loading="maaConfigLoading"
+      >
+        <template #icon>
+          <SettingOutlined />
+        </template>
+        MAA配置
+      </a-button>
+      <a-button 
+        v-if="scriptType === 'General'" 
+        type="primary" 
+        ghost 
+        size="large" 
+        @click="handleGeneralConfig"
+        :loading="generalConfigLoading"
+      >
+        <template #icon>
+          <SettingOutlined />
+        </template>
+        通用配置
+      </a-button>
       <a-button size="large" @click="handleCancel" class="cancel-button">
         <template #icon>
           <ArrowLeftOutlined />
@@ -926,15 +952,17 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
-import { ArrowLeftOutlined, QuestionCircleOutlined, SaveOutlined } from '@ant-design/icons-vue'
+import { ArrowLeftOutlined, QuestionCircleOutlined, SaveOutlined, SettingOutlined } from '@ant-design/icons-vue'
 import type { FormInstance, Rule } from 'ant-design-vue/es/form'
 import { useUserApi } from '@/composables/useUserApi'
 import { useScriptApi } from '@/composables/useScriptApi'
+import { useWebSocket } from '@/composables/useWebSocket'
 
 const router = useRouter()
 const route = useRoute()
 const { addUser, updateUser, getUsers, loading: userLoading } = useUserApi()
 const { getScript } = useScriptApi()
+const { connect, disconnect } = useWebSocket()
 
 const formRef = ref<FormInstance>()
 const loading = computed(() => userLoading.value)
@@ -948,6 +976,14 @@ const isEdit = computed(() => !!userId)
 const scriptName = ref('')
 const scriptType = ref<'MAA' | 'General'>('MAA')
 
+// MAA配置相关
+const maaConfigLoading = ref(false)
+const maaWebsocketId = ref<string | null>(null)
+
+// 通用配置相关
+const generalConfigLoading = ref(false)
+const generalWebsocketId = ref<string | null>(null)
+
 // 服务器选项
 const serverOptions = [
   { label: '官服', value: 'Official' },
@@ -1212,7 +1248,108 @@ const handleSubmit = async () => {
   }
 }
 
+const handleMAAConfig = async () => {
+  if (!isEdit.value) {
+    message.warning('请先保存用户后再进行MAA配置')
+    return
+  }
+
+  try {
+    maaConfigLoading.value = true
+
+    // 如果已有连接，先断开
+    if (maaWebsocketId.value) {
+      disconnect(maaWebsocketId.value)
+      maaWebsocketId.value = null
+    }
+
+    // 建立WebSocket连接进行MAA配置
+    const websocketId = await connect({
+      taskId: userId, // 使用用户ID进行配置
+      mode: '设置脚本',
+      showNotifications: true,
+      onStatusChange: (status) => {
+        console.log(`用户 ${formData.userName} MAA配置状态: ${status}`)
+      },
+      onMessage: (data) => {
+        console.log(`用户 ${formData.userName} MAA配置消息:`, data)
+        // 这里可以根据需要处理特定的消息
+      },
+      onError: (error) => {
+        console.error(`用户 ${formData.userName} MAA配置错误:`, error)
+        message.error(`MAA配置连接失败: ${error}`)
+        maaWebsocketId.value = null
+      }
+    })
+
+    if (websocketId) {
+      maaWebsocketId.value = websocketId
+      message.success(`已开始配置用户 ${formData.userName} 的MAA设置`)
+    }
+  } catch (error) {
+    console.error('MAA配置失败:', error)
+    message.error('MAA配置失败')
+  } finally {
+    maaConfigLoading.value = false
+  }
+}
+
+const handleGeneralConfig = async () => {
+  if (!isEdit.value) {
+    message.warning('请先保存用户后再进行通用配置')
+    return
+  }
+
+  try {
+    generalConfigLoading.value = true
+
+    // 如果已有连接，先断开
+    if (generalWebsocketId.value) {
+      disconnect(generalWebsocketId.value)
+      generalWebsocketId.value = null
+    }
+
+    // 建立WebSocket连接进行通用配置
+    const websocketId = await connect({
+      taskId: userId, // 使用用户ID进行配置
+      mode: '设置脚本',
+      showNotifications: true,
+      onStatusChange: (status) => {
+        console.log(`用户 ${formData.userName} 通用配置状态: ${status}`)
+      },
+      onMessage: (data) => {
+        console.log(`用户 ${formData.userName} 通用配置消息:`, data)
+        // 这里可以根据需要处理特定的消息
+      },
+      onError: (error) => {
+        console.error(`用户 ${formData.userName} 通用配置错误:`, error)
+        message.error(`通用配置连接失败: ${error}`)
+        generalWebsocketId.value = null
+      }
+    })
+
+    if (websocketId) {
+      generalWebsocketId.value = websocketId
+      message.success(`已开始配置用户 ${formData.userName} 的通用设置`)
+    }
+  } catch (error) {
+    console.error('通用配置失败:', error)
+    message.error('通用配置失败')
+  } finally {
+    generalConfigLoading.value = false
+  }
+}
+
 const handleCancel = () => {
+  // 清理WebSocket连接
+  if (maaWebsocketId.value) {
+    disconnect(maaWebsocketId.value)
+    maaWebsocketId.value = null
+  }
+  if (generalWebsocketId.value) {
+    disconnect(generalWebsocketId.value)
+    generalWebsocketId.value = null
+  }
   router.push('/scripts')
 }