feat: 本次提交更新内容如下

存了
2025-07-21 14:07:06 +08:00
parent 3447646fc5
commit 27c401c518
4 changed files with 209 additions and 18 deletions
--- a/nkebao/src/pages/scenarios/plan/list/index.module.scss
+++ b/nkebao/src/pages/scenarios/plan/list/index.module.scss
@@ -304,6 +304,7 @@
  background: white;
  border-radius: 16px;
  padding: 20px;
+  width: 100%;
 }

 .qr-loading {
@@ -329,4 +330,72 @@
  color: #ff4d4f;
  font-size: 14px;
  padding: 40px 20px;
+}
+
+.qr-link-section {
+  margin-top: 20px;
+  width: 100%;
+  padding: 0 10px;
+}
+
+.link-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+.link-input-wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  
+  @media (max-width: 480px) {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+.link-input {
+  flex: 1;
+  
+  .ant-input {
+    border-radius: 8px;
+    font-size: 12px;
+    color: #666;
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    
+    &:focus {
+      border-color: #1890ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+  }
+  
+  @media (max-width: 480px) {
+    width: 100%;
+  }
+}
+
+.copy-button {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  
+  .anticon {
+    font-size: 12px;
+  }
+  
+  @media (max-width: 480px) {
+    width: 100%;
+    justify-content: center;
+  }
 } 
--- a/nkebao/src/pages/scenarios/plan/list/index.tsx
+++ b/nkebao/src/pages/scenarios/plan/list/index.tsx
@@ -37,6 +37,7 @@ import {
 import style from "./index.module.scss";
 import { Task, ApiSettings, PlanDetail } from "./data";
 import PlanApi from "./planApi";
+import { buildApiUrl } from "@/utils/apiUrl";

 const ScenarioList: React.FC = () => {
  const { scenarioId, scenarioName } = useParams<{
@@ -57,6 +58,7 @@ const ScenarioList: React.FC = () => {
  const [showQrDialog, setShowQrDialog] = useState(false);
  const [qrLoading, setQrLoading] = useState(false);
  const [qrImg, setQrImg] = useState<any>("");
+  const [currentTaskId, setCurrentTaskId] = useState<string>("");
  const [showActionMenu, setShowActionMenu] = useState<string | null>(null);

  // 分页相关状态
@@ -208,11 +210,14 @@ const ScenarioList: React.FC = () => {
    try {
      const response: PlanDetail = await getPlanDetail(taskId);
      if (response) {
+        // 处理webhook URL，使用工具函数构建完整地址
+        const webhookUrl = buildApiUrl(
+          response.textUrl?.fullUrl || `webhook/${taskId}`
+        );
+
        setCurrentApiSettings({
          apiKey: response.apiKey || "demo-api-key-123456",
-          webhookUrl:
-            response.textUrl?.fullUrl ||
-            `https://api.example.com/webhook/${taskId}`,
+          webhookUrl: webhookUrl,
          taskId: taskId,
        });
        setShowApiDialog(true);
@@ -233,6 +238,7 @@ const ScenarioList: React.FC = () => {
    setQrLoading(true);
    setShowQrDialog(true);
    setQrImg("");
+    setCurrentTaskId(taskId); // 设置当前任务ID

    try {
      const response = await getWxMinAppCode(taskId);
@@ -566,11 +572,40 @@ const ScenarioList: React.FC = () => {
                  <div>生成二维码中...</div>
                </div>
              ) : qrImg ? (
-                <img
-                  src={qrImg}
-                  alt="小程序二维码"
-                  className={style["qr-image"]}
-                />
+                <>
+                  <img
+                    src={qrImg}
+                    alt="小程序二维码"
+                    className={style["qr-image"]}
+                  />
+                  {/* 链接复制区域 */}
+                  <div className={style["qr-link-section"]}>
+                    <div className={style["link-label"]}>小程序链接</div>
+                    <div className={style["link-input-wrapper"]}>
+                      <Input
+                        value={`https://h5.ckb.quwanzhi.com/#/pages/form/input?id=${currentTaskId}`}
+                        readOnly
+                        className={style["link-input"]}
+                        placeholder="小程序链接"
+                      />
+                      <Button
+                        size="small"
+                        onClick={() => {
+                          const link = `https://h5.ckb.quwanzhi.com/#/pages/form/input?id=${currentTaskId}`;
+                          navigator.clipboard.writeText(link);
+                          Toast.show({
+                            content: "链接已复制到剪贴板",
+                            position: "top",
+                          });
+                        }}
+                        className={style["copy-button"]}
+                      >
+                        <CopyOutlined />
+                        复制
+                      </Button>
+                    </div>
+                  </div>
+                </>
              ) : (
                <div className={style["qr-error"]}>二维码生成失败</div>
              )}
--- a/nkebao/src/pages/scenarios/plan/list/planApi.tsx
+++ b/nkebao/src/pages/scenarios/plan/list/planApi.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { Popup, Button, Toast, SpinLoading } from "antd-mobile";
 import { Modal, Input, Tabs, Card, Tag, Space } from "antd";
 import {
@@ -12,6 +12,7 @@ import {
  CheckCircleOutlined,
 } from "@ant-design/icons";
 import style from "./planApi.module.scss";
+import { buildApiUrl } from "@/utils/apiUrl";

 /**
 * 计划接口配置弹窗组件
@@ -40,6 +41,7 @@ import style from "./planApi.module.scss";
 * - 支持多种编程语言的代码示例
 * - 响应式设计，自适应不同屏幕尺寸
 * - 支持暗色主题
+ * - 自动拼接API地址前缀
 */

 interface PlanApiProps {
@@ -65,9 +67,17 @@ const PlanApi: React.FC<PlanApiProps> = ({
 }) => {
  const [activeTab, setActiveTab] = useState("config");
  const [activeLanguage, setActiveLanguage] = useState("javascript");
-  const [testUrl, setTestUrl] = useState(
-    `${webhookUrl}?name=测试客户&phone=13800138000&source=API测试`
-  );
+
+  // 处理webhook URL，确保包含完整的API地址
+  const fullWebhookUrl = useMemo(() => {
+    return buildApiUrl(webhookUrl);
+  }, [webhookUrl]);
+
+  // 生成测试URL
+  const testUrl = useMemo(() => {
+    if (!fullWebhookUrl) return "";
+    return `${fullWebhookUrl}?name=测试客户&phone=13800138000&source=API测试`;
+  }, [fullWebhookUrl]);

  // 检测是否为移动端
  const isMobile = window.innerWidth <= 768;
@@ -122,10 +132,14 @@ const PlanApi: React.FC<PlanApiProps> = ({
          <Tag color="blue">POST请求</Tag>
        </div>
        <div className={style["input-group"]}>
-          <Input value={webhookUrl} disabled className={style["api-input"]} />
+          <Input
+            value={fullWebhookUrl}
+            disabled
+            className={style["api-input"]}
+          />
          <Button
            size="small"
-            onClick={() => handleCopy(webhookUrl, "接口地址")}
+            onClick={() => handleCopy(fullWebhookUrl, "接口地址")}
            className={style["copy-btn"]}
          >
            <CopyOutlined />
@@ -215,7 +229,7 @@ const PlanApi: React.FC<PlanApiProps> = ({

  const renderCodeTab = () => {
    const codeExamples = {
-      javascript: `fetch('${webhookUrl}', {
+      javascript: `fetch('${fullWebhookUrl}', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
@@ -229,7 +243,7 @@ const PlanApi: React.FC<PlanApiProps> = ({
 })`,
      python: `import requests

-url = '${webhookUrl}'
+url = '${fullWebhookUrl}'
 headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ${apiKey}'
@@ -242,7 +256,7 @@ data = {

 response = requests.post(url, json=data, headers=headers)`,
      php: `<?php
-$url = '${webhookUrl}';
+$url = '${fullWebhookUrl}';
 $data = array(
    'name' => '张三',
    'phone' => '13800138000',
@@ -268,7 +282,7 @@ HttpClient client = HttpClient.newHttpClient();
 String json = "{\\"name\\":\\"张三\\",\\"phone\\":\\"13800138000\\",\\"source\\":\\"官网表单\\"}";

 HttpRequest request = HttpRequest.newBuilder()
-    .uri(URI.create("${webhookUrl}"))
+    .uri(URI.create("${fullWebhookUrl}"))
    .header("Content-Type", "application/json")
    .header("Authorization", "Bearer ${apiKey}")
    .POST(HttpRequest.BodyPublishers.ofString(json))
--- a/nkebao/src/utils/apiUrl.ts
+++ b/nkebao/src/utils/apiUrl.ts
@@ -0,0 +1,73 @@
+/**
+ * API URL工具函数
+ * 用于统一处理API地址的拼接逻辑
+ *
+ * URL结构: {VITE_API_BASE_URL}/v1/api/scenarios/{path}
+ *
+ * 示例:
+ * - 开发环境: http://localhost:3000/api/v1/api/scenarios/webhook/123
+ * - 生产环境: https://api.example.com/v1/api/scenarios/webhook/123
+ */
+
+/**
+ * 获取完整的API基础路径
+ * @returns 完整的API基础路径，包含 /v1/api/scenarios
+ *
+ * 示例:
+ * - 开发环境: http://localhost:3000/api/v1/api/scenarios
+ * - 生产环境: https://api.example.com/v1/api/scenarios
+ */
+export const getFullApiPath = (): string => {
+  const apiBaseUrl = (import.meta as any).env?.VITE_API_BASE_URL || "/api";
+  return `${apiBaseUrl}/v1/api/scenarios`;
+};
+
+/**
+ * 构建完整的API URL
+ * @param path 相对路径或完整URL
+ * @returns 完整的API URL
+ *
+ * 示例:
+ * - buildApiUrl('/webhook/123') → 'http://localhost:3000/api/v1/api/scenarios/webhook/123'
+ * - buildApiUrl('webhook/123') → 'http://localhost:3000/api/v1/api/scenarios/webhook/123'
+ * - buildApiUrl('https://api.example.com/webhook/123') → 'https://api.example.com/webhook/123'
+ */
+export const buildApiUrl = (path: string): string => {
+  if (!path) return "";
+
+  // 如果已经是完整的URL（包含http或https），直接返回
+  if (path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
+
+  const fullApiPath = getFullApiPath();
+
+  // 如果是相对路径，拼接完整API路径
+  if (path.startsWith("/")) {
+    return `${fullApiPath}${path}`;
+  }
+
+  // 其他情况，拼接完整API路径和路径
+  return `${fullApiPath}?${path}`;
+};
+
+/**
+ * 构建webhook URL
+ * @param taskId 任务ID
+ * @param path 可选的相对路径
+ * @returns 完整的webhook URL
+ *
+ * 示例:
+ * - buildWebhookUrl('123') → 'http://localhost:3000/api/v1/api/scenarios/webhook/123'
+ * - buildWebhookUrl('123', '/custom/path') → 'http://localhost:3000/api/v1/api/scenarios/custom/path'
+ */
+export const buildWebhookUrl = (taskId: string, path?: string): string => {
+  const fullApiPath = getFullApiPath();
+  const webhookPath = path || `/webhook/${taskId}`;
+
+  if (webhookPath.startsWith("/")) {
+    return `${fullApiPath}${webhookPath}`;
+  }
+
+  return `${fullApiPath}/${webhookPath}`;
+};