feat(REQ-5965) - 增加授权码获取逻辑

workflow-engine-server/src/main/java/cn/axzo/workflow/server/controller/web/DangerOperationController.java

@@ -13,6 +13,7 @@ import cn.axzo.workflow.server.controller.web.bpmn.BpmnProcessJobController;
 import cn.axzo.workflow.server.controller.web.bpmn.BpmnProcessTaskController;
 import cn.axzo.workflow.server.service.AuthCodeService;
 import cn.axzo.workflow.server.xxljob.DangerSuperOperationJobHandler;
+import cn.azxo.framework.common.model.CommonResponse;
 import lombok.extern.slf4j.Slf4j;
 import org.flowable.engine.RuntimeService;
 import org.springframework.http.MediaType;
@@ -25,6 +26,7 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
 
 import javax.annotation.Resource;
 import javax.servlet.http.HttpSession;
@@ -68,6 +70,22 @@ public class DangerOperationController {
         return "form"; // 对应templates目录下的form.html
     }
 
+    /**
+     * 获取授权码
+     *
+     * @param password
+     * @return
+     */
+    @PostMapping("/web/process/get-auth-code")
+    @ResponseBody
+    public CommonResponse<String> getAuthCode(@RequestParam String password) {
+        if (Objects.equals("WANG+lI648438", password)) {
+            String authCode = authCodeService.generateAuthCode();
+            return CommonResponse.success(authCode);
+        }
+        return CommonResponse.error("密码错误");
+    }
+
     /**
      * 验证用户输入的授权码
      */

workflow-engine-server/src/main/resources/templates/form.html

@@ -36,15 +36,19 @@
             .form-input-focus {
                 @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
             }
+
             .form-transition {
                 @apply transition-all duration-300 ease-in-out;
             }
+
             .card-shadow {
                 @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
             }
+
             .form-hidden {
                 @apply hidden opacity-0 h-0;
             }
+
             .form-visible {
                 @apply opacity-100 h-auto;
             }
@@ -52,6 +56,10 @@
             .mask-fade {
                 @apply transition-opacity duration-300 ease-in-out;
             }
+
+            .tab-active {
+                @apply text-primary border-primary;
+            }
         }
     </style>
 </head>
@@ -77,40 +85,108 @@
                 <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2"
                     th:text="${isAuthenticated} ? '流程操作' : '授权验证'"></h2>
                 <p class="text-secondary"
-                   th:text="${isAuthenticated} ? '请根据需要选择相应操作并填写表单信息' : '请输入授权码以继续操作'"></p>
+                   th:text="${isAuthenticated} ? '请根据需要选择相应操作并填写表单信息' : '请输入或获取授权码以继续操作'"></p>
             </div>
 
-            <!-- 授权码表单 - 默认显示 -->
-            <form id="authForm" th:action="@{/web/process/validate-auth}" method="post" class="space-y-6"
-                  th:unless="${isAuthenticated}">
-                <!-- 授权码输入 -->
-                <div class="form-group">
-                    <label for="authCode" class="block text-sm font-medium text-gray-700 mb-1">
-                        授权码 <span class="text-danger">*</span>
-                    </label>
-                    <div class="relative">
-                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
-                                <i class="fa fa-key"></i>
-                            </span>
-                        <input type="text" id="authCode" name="authCode"
-                               class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 form-input-focus form-transition"
-                               placeholder="请输入授权码" required/>
+            <!-- 授权验证区域 - 未认证时显示 -->
+            <div th:unless="${isAuthenticated}">
+                <!-- Tab导航 -->
+                <div class="border-b border-gray-200 mb-6">
+                    <div class="flex -mb-px">
+                        <button id="inputTab"
+                                class="tab-active py-3 px-5 border-b-2 font-medium text-sm form-transition"
+                                onclick="switchTab('input')">
+                            <i class="fa fa-key mr-1"></i>输入授权码
+                        </button>
+                        <button id="getTab"
+                                class="text-gray-500 hover:text-gray-700 py-3 px-5 border-b-2 border-transparent font-medium text-sm form-transition"
+                                onclick="switchTab('get')">
+                            <i class="fa fa-refresh mr-1"></i>获取授权码
+                        </button>
                     </div>
-                    <!-- 授权错误提示 -->
-                    <p class="mt-1 text-xs text-danger hidden" id="authError" th:if="${authError}"
-                       th:text="${authError}">
-                        <i class="fa fa-exclamation-circle mr-1"></i>授权码无效或已过期，请重新输入
-                    </p>
                 </div>
 
-                <!-- 提交按钮 -->
-                <div class="pt-4 flex justify-end">
-                    <button type="submit"
-                            class="px-6 py-2.5 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] flex items-center">
-                        <i class="fa fa-unlock-alt mr-2"></i>验证授权
-                    </button>
-                </div>
-            </form>
+                <!-- 输入授权码表单 -->
+                <form id="authForm" th:action="@{/web/process/validate-auth}" method="post" class="space-y-6">
+                    <!-- 授权码输入 -->
+                    <div class="form-group">
+                        <label for="authCode" class="block text-sm font-medium text-gray-700 mb-1">
+                            授权码 <span class="text-danger">*</span>
+                        </label>
+                        <div class="relative">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
+                                    <i class="fa fa-key"></i>
+                                </span>
+                            <input type="text" id="authCode" name="authCode"
+                                   class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 form-input-focus form-transition"
+                                   placeholder="请输入授权码" required/>
+                        </div>
+                        <!-- 授权错误提示 -->
+                        <p class="mt-1 text-xs text-danger hidden" id="authError" th:if="${authError}"
+                           th:text="${authError}">
+                            <i class="fa fa-exclamation-circle mr-1"></i>授权码无效或已过期，请重新输入
+                        </p>
+                    </div>
+
+                    <!-- 提交按钮 -->
+                    <div class="pt-4 flex justify-end">
+                        <button type="submit"
+                                class="px-6 py-2.5 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] flex items-center">
+                            <i class="fa fa-unlock-alt mr-2"></i>验证授权
+                        </button>
+                    </div>
+                </form>
+
+                <!-- 获取授权码表单 -->
+                <form id="getAuthForm" class="space-y-6 form-hidden">
+                    <!-- 密码输入 -->
+                    <div class="form-group">
+                        <label for="authPassword" class="block text-sm font-medium text-gray-700 mb-1">
+                            管理员密码 <span class="text-danger">*</span>
+                        </label>
+                        <div class="relative">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
+                                    <i class="fa fa-lock"></i>
+                                </span>
+                            <input type="password" id="authPassword"
+                                   class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 form-input-focus form-transition"
+                                   placeholder="请输入管理员密码获取授权码" required/>
+                        </div>
+                        <!-- 获取授权码错误提示 -->
+                        <p class="mt-1 text-xs text-danger hidden" id="getAuthError">
+                            <i class="fa fa-exclamation-circle mr-1"></i>密码错误，无法获取授权码
+                        </p>
+                    </div>
+
+                    <!-- 授权码展示区域 -->
+                    <div id="authCodeDisplay"
+                         class="form-group form-hidden bg-gray-50 p-4 rounded-lg border border-gray-200">
+                        <p class="text-sm font-medium text-gray-700 mb-2">
+                            <i class="fa fa-info-circle mr-1 text-primary"></i>获取到的授权码
+                        </p>
+                        <div class="flex items-center">
+                            <input type="text" id="displayedAuthCode" readonly
+                                   class="flex-grow pl-4 pr-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-800 cursor-default"
+                                   placeholder="授权码将显示在这里"/>
+                            <button type="button" onclick="copyAuthCode()"
+                                    class="ml-2 px-3 py-2 text-sm bg-primary/10 text-primary rounded-lg hover:bg-primary/20 form-transition">
+                                <i class="fa fa-copy mr-1"></i>复制
+                            </button>
+                        </div>
+                        <p class="mt-2 text-xs text-gray-500">
+                            <i class="fa fa-clock-o mr-1"></i>授权码有效期为1分钟，请及时使用
+                        </p>
+                    </div>
+
+                    <!-- 提交按钮 -->
+                    <div class="pt-4 flex justify-end">
+                        <button type="button" id="getAuthCodeBtn"
+                                class="px-6 py-2.5 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] flex items-center">
+                            <i class="fa fa-get-pocket mr-2"></i>获取授权码
+                        </button>
+                    </div>
+                </form>
+            </div>
 
             <!-- 流程操作表单 - 验证通过后显示 -->
             <form id="processForm" th:action="@{/web/process/handle}" method="post" class="space-y-6"
@@ -232,14 +308,20 @@
     <span>操作提交成功！</span>
 </div>
 
+<!-- 复制成功提示框 -->
+<div id="copyToast"
+     class="fixed top-4 right-4 bg-success text-white px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-500 flex items-center z-50">
+    <i class="fa fa-check-circle mr-2"></i>
+    <span>授权码已复制！</span>
+</div>
+
 <!-- 提交遮罩层 -->
 <div id="submitMask"
      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 mask-fade opacity-0 pointer-events-none">
     <div class="bg-white rounded-lg p-8 max-w-md w-full flex flex-col items-center">
         <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
         <h3 class="text-lg font-medium text-dark mb-2">处理中</h3>
-        <p class="text-gray-500 text-center"
-           th:text="${isAuthenticated} ? '请稍候，正在提交您的操作...' : '请稍候，正在验证授权码...'"></p>
+        <p class="text-gray-500 text-center" id="maskMessage">请稍候，正在处理您的请求...</p>
     </div>
 </div>
 
@@ -254,18 +336,62 @@
     const comment = document.getElementById('comment');
     const processForm = document.getElementById('processForm');
     const authForm = document.getElementById('authForm');
+    const getAuthForm = document.getElementById('getAuthForm');
+    const getAuthCodeBtn = document.getElementById('getAuthCodeBtn');
+    const authPassword = document.getElementById('authPassword');
+    const authCodeDisplay = document.getElementById('authCodeDisplay');
+    const displayedAuthCode = document.getElementById('displayedAuthCode');
     const successToast = document.getElementById('successToast');
+    const copyToast = document.getElementById('copyToast');
     const submitMask = document.getElementById('submitMask');
+    const maskMessage = document.getElementById('maskMessage');
 
     // 错误提示元素
     const processInstanceIdError = document.getElementById('processInstanceIdError');
     const personIdError = document.getElementById('personIdError');
     const commentError = document.getElementById('commentError');
     const authError = document.getElementById('authError');
+    const getAuthError = document.getElementById('getAuthError');
 
     // 清除所有元素的计时器，防止冲突
     const elementTimeouts = new Map();
 
+    // Tab切换功能
+    function switchTab(tabType) {
+        const inputTab = document.getElementById('inputTab');
+        const getTab = document.getElementById('getTab');
+
+        // 重置所有错误提示
+        if (authError) authError.classList.add('hidden');
+        if (getAuthError) getAuthError.classList.add('hidden');
+
+        if (tabType === 'input') {
+            // 切换到输入授权码
+            inputTab.classList.add('tab-active');
+            inputTab.classList.remove('text-gray-500', 'hover:text-gray-700', 'border-transparent');
+            getTab.classList.remove('tab-active');
+            getTab.classList.add('text-gray-500', 'hover:text-gray-700', 'border-transparent');
+
+            hideElement(getAuthForm);
+            setTimeout(() => {
+                showElement(authForm);
+            }, 300);
+        } else {
+            // 切换到获取授权码
+            getTab.classList.add('tab-active');
+            getTab.classList.remove('text-gray-500', 'hover:text-gray-700', 'border-transparent');
+            inputTab.classList.remove('tab-active');
+            inputTab.classList.add('text-gray-500', 'hover:text-gray-700', 'border-transparent');
+
+            hideElement(authForm);
+            setTimeout(() => {
+                showElement(getAuthForm);
+                // 隐藏授权码显示区域
+                hideElement(authCodeDisplay);
+            }, 300);
+        }
+    }
+
     // 显示元素的动画
     function showElement(element) {
         if (elementTimeouts.has(element)) {
@@ -289,7 +415,8 @@
     }
 
     // 显示遮罩层
-    function showMask() {
+    function showMask(message) {
+        maskMessage.textContent = message || '请稍候，正在处理您的请求...';
         submitMask.classList.remove('opacity-0', 'pointer-events-none');
     }
 
@@ -298,6 +425,19 @@
         submitMask.classList.add('opacity-0', 'pointer-events-none');
     }
 
+    // 复制授权码
+    function copyAuthCode() {
+        const code = displayedAuthCode.value;
+        if (code) {
+            navigator.clipboard.writeText(code).then(() => {
+                copyToast.classList.remove('translate-x-full');
+                setTimeout(() => {
+                    copyToast.classList.add('translate-x-full');
+                }, 2000);
+            });
+        }
+    }
+
     // 根据选择的操作类型显示对应的表单字段
     function updateFormFields() {
         const selectedValue = operationType.value;
@@ -380,6 +520,58 @@
         }, 3000);
     }
 
+    // 获取授权码
+    async function getAuthCode() {
+        const password = authPassword.value.trim();
+        if (!password) {
+            getAuthError.textContent = '<i class="fa fa-exclamation-circle mr-1"></i>请输入管理员密码';
+            getAuthError.classList.remove('hidden');
+            return;
+        }
+
+        // 显示遮罩层
+        showMask('请稍候，正在获取授权码...');
+        getAuthError.classList.add('hidden');
+
+        try {
+            // 构造带查询参数的URL（POST方式但参数通过URL传递）
+            const url = `/web/process/get-auth-code?password=${encodeURIComponent(password)}`;
+
+            // 保持POST请求方式，参数通过URL查询参数传递
+            const response = await fetch(url, {
+                method: 'POST',  // 保持POST请求方式
+                headers: {
+                    'Accept': 'application/json'  // 只保留接收JSON的头
+                }
+                // 移除body，参数通过URL传递
+            });
+
+            const result = await response.json();
+
+            if (response.ok && result.code === 200 && result.data) {
+                // 成功获取授权码
+                displayedAuthCode.value = result.data;
+                showElement(authCodeDisplay);
+                // 自动切换到输入标签页并填充授权码
+                // setTimeout(() => {
+                //     switchTab('input');
+                //     document.getElementById('authCode').value = result.data;
+                // }, 1000);
+            } else {
+                // 显示错误信息
+                getAuthError.innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>' + (result.message || '密码错误，无法获取授权码');
+                getAuthError.classList.remove('hidden');
+            }
+        } catch (error) {
+            console.error('获取授权码错误:', error);
+            getAuthError.innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>网络错误，请稍后重试';
+            getAuthError.classList.remove('hidden');
+        } finally {
+            // 隐藏遮罩层
+            hideMask();
+        }
+    }
+
     // 事件监听 - 操作类型变化
     if (operationType) {
         operationType.addEventListener('change', updateFormFields);
@@ -399,7 +591,7 @@
             if (!validateForm()) return;
 
             // 显示遮罩层
-            showMask();
+            showMask('请稍候，正在提交您的操作...');
 
             // 收集表单数据为 JSON 对象
             const formData = {
@@ -440,7 +632,7 @@
     if (authForm) {
         authForm.addEventListener('submit', function (e) {
             // 显示遮罩层
-            showMask();
+            showMask('请稍候，正在验证授权码...');
             // 清除之前的错误提示
             if (authError) {
                 authError.classList.add('hidden');
@@ -449,6 +641,11 @@
         });
     }
 
+    // 获取授权码按钮点击事件
+    if (getAuthCodeBtn) {
+        getAuthCodeBtn.addEventListener('click', getAuthCode);
+    }
+
     // 初始化
     if (operationType) {
         updateFormFields();