From 07eafe2cff11f5795c60e05ff12d59db42781361 Mon Sep 17 00:00:00 2001
From: zhang <zc857179121@qq.com>
Date: 星期二, 03 二月 2026 15:58:32 +0800
Subject: [PATCH] 1

---
 open-rcs/components/content/content-interface-word.html           | 2532 ++++++++++++++++++++++++++++++++++++++
 open-rcs/components/rightsidebar/rightsidebar-platform-intro.html |   76 +
 open-rcs/components/content/content-platform-intro.html           |  136 ++
 open-rcs/components/rightsidebar/rightsidebar-platform-spec.html  |   57 
 open-rcs/components/rightsidebar/rightsidebar-interface-word.html |  134 ++
 open-rcs/components/sidebar/sidebar-platform-intro.html           |   76 +
 open-rcs/pages/index-main.html                                    |  382 +++++
 open-rcs/components/sidebar/sidebar-interface-word.html           |  223 +++
 open-rcs/components/sidebar/sidebar-platform-spec.html            |   57 
 open-rcs/components/header/header.html                            |  135 ++
 open-rcs/components/content/content-platform-spec.html            |  152 ++
 11 files changed, 3,960 insertions(+), 0 deletions(-)

diff --git a/open-rcs/components/content/content-interface-word.html b/open-rcs/components/content/content-interface-word.html
new file mode 100644
index 0000000..1ea61fb
--- /dev/null
+++ b/open-rcs/components/content/content-interface-word.html
@@ -0,0 +1,2532 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            padding: 30px;
+            line-height: 1.8;
+        }
+
+        .breadcrumb {
+            font-size: 14px;
+            color: #999;
+            margin-bottom: 25px;
+            padding: 12px 20px;
+            background: linear-gradient(145deg, #ffffff, #f5f5f5);
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+
+        .breadcrumb a {
+            color: #999;
+            text-decoration: none;
+        }
+
+        .update-time {
+            float: right;
+            color: #ccc;
+            font-size: 12px;
+        }
+
+        .intro {
+            line-height: 2;
+            margin-bottom: 40px;
+            color: #555;
+            font-size: 16px;
+            padding: 25px;
+            background: linear-gradient(145deg, #ffffff, #f8f9fa);
+            border-radius: 12px;
+            border-left: 4px solid #0066cc;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+
+        h1 {
+            font-size: 32px;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 3px solid transparent;
+            border-image: linear-gradient(90deg, #0066cc, #00c6ff);
+            border-image-slice: 1;
+            color: #1a1a2e;
+            font-weight: 700;
+        }
+
+        h2 {
+            font-size: 22px;
+            margin: 40px 0 25px;
+            color: #1a1a2e;
+            font-weight: 700;
+        }
+
+        .content-text {
+            line-height: 1.8;
+            color: #666;
+            margin-bottom: 20px;
+        }
+
+        ul.feature-list {
+            list-style: none;
+            padding-left: 20px;
+        }
+
+        ul.feature-list li {
+            position: relative;
+            padding-left: 20px;
+            margin-bottom: 10px;
+            line-height: 1.8;
+            color: #666;
+        }
+
+        ul.feature-list li:before {
+            content: "鈻�";
+            position: absolute;
+            left: 0;
+            color: #333;
+        }
+
+        .feedback-section {
+            margin: 40px 0;
+            text-align: center;
+        }
+
+        .stars {
+            margin: 20px 0;
+        }
+
+        .stars span {
+            font-size: 30px;
+            margin: 0 10px;
+            color: #ddd;
+            cursor: pointer;
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 60px;
+            padding-top: 30px;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        .pagination > div {
+            cursor: pointer;
+            max-width: 45%;
+        }
+
+        .pagination > div:hover {
+            color: #0066cc;
+        }
+
+        .api-section {
+            margin: 40px 0;
+            padding: 30px;
+            background: linear-gradient(145deg, #ffffff, #f0f0f0);
+            border-radius: 16px;
+            box-shadow: 0 8px 32px rgba(0, 102, 204, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .api-section:hover {
+            box-shadow: 0 12px 48px rgba(0, 102, 204, 0.15);
+            transform: translateY(-2px);
+        }
+
+        .api-section h2 {
+            margin-top: 0;
+            background: linear-gradient(135deg, #0066cc, #00c6ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-size: 24px;
+            font-weight: 700;
+            position: relative;
+            padding-left: 20px;
+        }
+
+        .api-section h2::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 6px;
+            height: 24px;
+            background: linear-gradient(135deg, #0066cc, #00c6ff);
+            border-radius: 3px;
+        }
+
+        .api-info {
+            background-color: #fff;
+            padding: 25px;
+            margin: 20px 0;
+            border-radius: 12px;
+            border-left: 5px solid #0066cc;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+            transition: all 0.3s ease;
+        }
+
+        .api-info:hover {
+            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
+        }
+
+        .api-method {
+            display: inline-block;
+            padding: 6px 16px;
+            border-radius: 20px;
+            font-weight: 700;
+            margin-right: 12px;
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            transition: all 0.3s ease;
+        }
+
+        .api-method:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        }
+
+        .method-post {
+            background: linear-gradient(135deg, #49cc90, #38b57d);
+            color: #fff;
+        }
+
+        .method-get {
+            background: linear-gradient(135deg, #61affe, #4e98eb);
+            color: #fff;
+        }
+
+        .method-put {
+            background: linear-gradient(135deg, #fca130, #e89020);
+            color: #fff;
+        }
+
+        .method-delete {
+            background: linear-gradient(135deg, #f93e3e, #e62e2e);
+            color: #fff;
+        }
+
+        .api-url {
+            font-family: 'Courier New', 'Consolas', monospace;
+            background: linear-gradient(135deg, #2d3748, #1a202c);
+            color: #48bb78;
+            padding: 14px 18px;
+            margin: 15px 0;
+            border-radius: 8px;
+            font-size: 14px;
+            word-break: break-all;
+            border: 1px solid #4a5568;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .api-url::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 100%;
+            background: linear-gradient(180deg, #48bb78, #38a169);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 15px 0;
+            background-color: #fff;
+        }
+
+        table th,
+        table td {
+            padding: 12px;
+            text-align: left;
+            border: 1px solid #e0e0e0;
+            font-size: 14px;
+        }
+
+        table th {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            font-weight: 700;
+            color: #fff;
+            text-transform: uppercase;
+            font-size: 12px;
+            letter-spacing: 0.5px;
+        }
+
+        table tr:hover {
+            background-color: #f8f9fa;
+            transition: background-color 0.2s ease;
+        }
+
+        pre {
+            background: linear-gradient(135deg, #1e1e1e, #2d2d30);
+            color: #d4d4d4;
+            padding: 24px;
+            border-radius: 12px;
+            overflow-x: auto;
+            margin: 20px 0;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+            border: 1px solid #3e3e42;
+            position: relative;
+        }
+
+        pre::before {
+            content: '{ }';
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            color: #858585;
+            font-size: 12px;
+            font-weight: bold;
+        }
+
+        code {
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            line-height: 1.6;
+        }
+
+        .mock-container {
+            background: linear-gradient(145deg, #ffffff, #f8f9fa);
+            padding: 25px;
+            margin: 25px 0;
+            border-radius: 16px;
+            box-shadow: 0 8px 24px rgba(0, 102, 204, 0.12);
+            border: 2px solid #e3e8ef;
+            transition: all 0.3s ease;
+        }
+
+        .mock-container:hover {
+            box-shadow: 0 12px 32px rgba(0, 102, 204, 0.18);
+            border-color: #0066cc;
+        }
+
+        .mock-btn {
+            background: linear-gradient(135deg, #0066cc, #0052a3);
+            color: #fff;
+            border: none;
+            padding: 12px 28px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            margin: 5px;
+            height: 44px;
+            line-height: 20px;
+            box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+
+        .mock-btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        .mock-btn:hover {
+            background: linear-gradient(135deg, #0052a3, #003d7a);
+            box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
+            transform: translateY(-2px);
+        }
+
+        .mock-btn:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+
+        .mock-btn:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 10px rgba(0, 102, 204, 0.3);
+        }
+
+        .reset-btn {
+            background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
+            color: #666;
+            border: 1px solid #d0d0d0;
+            padding: 12px 28px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            margin: 5px;
+            height: 44px;
+            line-height: 20px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+        }
+
+        .reset-btn:hover {
+            background: linear-gradient(135deg, #e0e0e0, #d0d0d0);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+            transform: translateY(-2px);
+            color: #444;
+        }
+
+        .reset-btn:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .mode-switch {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            padding: 5px;
+            background: #f0f2f5;
+            border-radius: 25px;
+            width: fit-content;
+        }
+
+        .mode-switch button {
+            padding: 8px 20px;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            background: transparent;
+            color: #666;
+        }
+
+        .mode-switch button.active {
+            background: linear-gradient(135deg, #0066cc, #0052a3);
+            color: #fff;
+            box-shadow: 0 2px 10px rgba(0, 102, 204, 0.3);
+        }
+
+        .mode-switch button:hover:not(.active) {
+            background: #e0e0e0;
+        }
+
+        .json-input-container {
+            display: none;
+        }
+
+        .json-input-container.active {
+            display: block;
+        }
+
+        .form-input-container {
+            display: block;
+        }
+
+        .form-input-container.hidden {
+            display: none;
+        }
+
+        .json-textarea {
+            width: 100%;
+            min-height: 200px;
+            padding: 15px;
+            border: 2px solid #e3e8ef;
+            border-radius: 12px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            line-height: 1.6;
+            resize: vertical;
+            transition: all 0.3s ease;
+            background: #fafbfc;
+        }
+
+        .json-textarea:focus {
+            outline: none;
+            border-color: #0066cc;
+            box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+            background: #fff;
+        }
+
+        .json-textarea.error {
+            border-color: #f93e3e;
+            background: #fff5f5;
+        }
+
+        .mock-result {
+            background: linear-gradient(145deg, #f8f9fa, #e9ecef);
+            padding: 20px;
+            margin-top: 20px;
+            border-radius: 12px;
+            max-height: 500px;
+            overflow-y: auto;
+            display: none;
+            border: 2px solid #dee2e6;
+            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
+            animation: slideDown 0.3s ease;
+        }
+
+        .mock-result.show {
+            display: block;
+        }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .mock-form {
+            background: linear-gradient(145deg, #ffffff, #f8f9fa);
+            padding: 20px;
+            margin-top: 15px;
+            border-radius: 12px;
+            border: 1px solid #e3e8ef;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+
+        .mock-form h5 {
+            color: #333;
+            margin-bottom: 15px;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 6px;
+            color: #555;
+            font-size: 13px;
+            font-weight: 500;
+        }
+
+        .form-group label .required {
+            color: #f93e3e;
+            margin-left: 3px;
+        }
+
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid #d1d5db;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #333;
+            background: #fff;
+            transition: all 0.2s ease;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus {
+            outline: none;
+            border-color: #0066cc;
+            box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
+        }
+
+        .form-group input.error,
+        .form-group select.error {
+            border-color: #f93e3e;
+            background: #fff5f5;
+        }
+
+        .form-group .error-msg {
+            color: #f93e3e;
+            font-size: 12px;
+            margin-top: 5px;
+            display: none;
+        }
+
+        .form-group .error-msg.show {
+            display: block;
+        }
+
+        .error-msg {
+            color: #f93e3e;
+            font-size: 12px;
+            margin-top: 5px;
+            display: none;
+        }
+
+        .error-msg.show {
+            display: block;
+        }
+
+        .error-message {
+            color: #f93e3e;
+            font-size: 12px;
+            margin-top: 5px;
+            display: none;
+        }
+
+        .error-message.show {
+            display: block;
+        }
+
+        .form-group .hint {
+            color: #999;
+            font-size: 12px;
+            margin-top: 4px;
+        }
+
+        .mock-form-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        .mock-btn-secondary {
+            background: linear-gradient(135deg, #6c757d, #5a6268);
+            color: #fff;
+            border: none;
+            padding: 12px 28px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
+            transition: all 0.3s ease;
+        }
+
+        .mock-btn-secondary:hover {
+            background: linear-gradient(135deg, #5a6268, #495057);
+            transform: translateY(-2px);
+        }
+
+        .mock-btn-secondary:active {
+            transform: translateY(0);
+        }
+
+        .tag {
+            display: inline-block;
+            padding: 5px 14px;
+            color: #0b0b0b;
+            border-radius: 12px;
+            font-size: 14px;
+            font-weight: 700;
+            margin-left: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+        }
+
+        .note {
+            background: linear-gradient(135deg, #fff9e6, #fff3cd);
+            border-left: 5px solid #ffc107;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.15);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .note::before {
+            content: '鈿�';
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            font-size: 24px;
+            opacity: 0.2;
+        }
+
+        .note-title {
+            font-weight: 700;
+            color: #856404;
+            margin-bottom: 10px;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+        }
+
+        .note-title::before {
+            content: '馃挕';
+            margin-right: 8px;
+        }
+
+        h3 {
+            font-size: 18px;
+            color: #2c3e50;
+            margin: 20px 0 15px;
+            font-weight: 600;
+        }
+
+        h4 {
+            font-size: 16px;
+            color: #34495e;
+            margin: 18px 0 12px;
+            font-weight: 600;
+            padding-left: 12px;
+            border-left: 3px solid #0066cc;
+        }
+
+        /* 婊氬姩鏉$編鍖� */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #764ba2, #667eea);
+        }
+
+        /* Mock娴嬭瘯鎶樺彔鍔熻兘 */
+        .mock-container {
+            position: relative;
+        }
+
+        .mock-container .mock-toggle-btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
+            border: 1px solid #d0d0d0;
+            border-radius: 6px;
+            padding: 6px 12px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 600;
+            color: #666;
+            transition: all 0.3s ease;
+            z-index: 10;
+        }
+
+        .mock-container .mock-toggle-btn:hover {
+            background: linear-gradient(135deg, #e0e0e0, #d0d0d0);
+            color: #444;
+        }
+
+        .mock-container .mock-content {
+            transition: all 0.3s ease;
+            overflow: hidden;
+        }
+
+        .mock-container .mock-content.collapsed {
+            max-height: 0;
+            opacity: 0;
+            margin-top: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        .mock-container .mock-content.expanded {
+            max-height: 2000px;
+            opacity: 1;
+        }
+
+        /* 鍔犺浇鍔ㄧ敾 */
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.5;
+            }
+        }
+
+        .loading {
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+
+        /* 娓愬叆鍔ㄧ敾 */
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .api-section {
+            animation: fadeIn 0.6s ease-out;
+        }
+
+        /* 浠g爜澶嶅埗鎸夐挳 */
+        .code-wrapper {
+            position: relative;
+        }
+
+        .copy-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(255, 255, 255, 0.1);
+            color: #d4d4d4;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 6px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+            transition: all 0.3s ease;
+            opacity: 0;
+        }
+
+        .code-wrapper:hover .copy-btn {
+            opacity: 1;
+        }
+
+        .copy-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+            border-color: rgba(255, 255, 255, 0.4);
+        }
+
+        /* 鎴愬姛鎻愮ず */
+        .success-icon {
+            color: #49cc90;
+            font-weight: bold;
+            animation: scaleIn 0.3s ease;
+        }
+
+        @keyframes scaleIn {
+            from {
+                transform: scale(0);
+            }
+            to {
+                transform: scale(1);
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="breadcrumb">
+    <a href="#">RCS鎺ュ彛鏂囨。</a> > 鎺ュ彛璇︽儏
+    <span class="update-time">鏇存柊鏃堕棿锛�2025-12-29 14:20:00</span>
+</div>
+
+<h1>RCS鎺ュ彛鏂囨。</h1>
+
+<div class="intro">
+    <p style="font-size: 16px; margin-bottom: 20px;">娆㈣繋浣跨敤涓壃RCS寮�鏀惧钩鍙�
+        API銆傛湰鏂囨。鎻愪緵浜嗗畬鏁寸殑鎺ュ彛璇存槑锛屽寘鍚姹傚弬鏁般�佽繑鍥炵粨鏋滀互鍙婄ず渚嬩唬鐮併�傛瘡涓帴鍙i兘鎻愪緵浜� Mock
+        鍔熻兘锛屾柟渚挎偍蹇�熸祴璇曞拰闆嗘垚銆�</p>
+</div>
+
+<div class="note" style="margin-bottom: 30px;">
+    <div class="note-title">馃搶 蹇�熷鎺ユ寚鍗�</div>
+    <p style="margin-bottom: 12px;"><strong>鎺ュ彛涓爣 * 鐨勪负甯哥敤鎺ュ彛</strong>锛屽垵姝ュ鎺ユ椂锛屽彧闇�瑕佽皟閫氫互涓嬫帴鍙o細</p>
+    <ul style="list-style: none; padding-left: 0; margin-bottom: 15px;">
+        <li style="padding: 6px 0; padding-left: 25px; position: relative;">
+            <span style="position: absolute; left: 0; color: #0066cc; font-weight: bold;">1.</span>鐢熸垚浠诲姟鍗�
+        </li>
+        <li style="padding: 6px 0; padding-left: 25px; position: relative;">
+            <span style="position: absolute; left: 0; color: #0066cc; font-weight: bold;">2.</span>鍙栨秷浠诲姟鍗�
+        </li>
+    </ul>
+    <p style="margin-bottom: 12px;"><strong>濡傛灉涓婂眰绯荤粺闇�瑕佹帴鏀朵换鍔$殑鎵ц鐘舵��</strong>锛岄渶瑕佹彁渚涗互涓嬫帴鍙o紝渚涜皟搴︾郴缁熷洖璋冿細
+    </p>
+    <ul style="list-style: none; padding-left: 0; margin-bottom: 15px;">
+        <li style="padding: 6px 0; padding-left: 25px; position: relative;">
+            <span style="position: absolute; left: 0; color: #0066cc; font-weight: bold;">鈥�</span>浠诲姟鎵ц閫氱煡鎺ュ彛
+        </li>
+    </ul>
+    <p style="background: #fff3cd; padding: 10px 15px; border-radius: 6px; margin-top: 15px; border-left: 4px solid #ffc107;">
+        鈿狅笍 <strong>瓒呮椂璁剧疆锛�</strong>涓壃璋冨害绯荤粺璋冪敤涓婂眰绯荤粺鐨勬帴鍙o紝鑾峰彇杩炴帴瓒呮椂鏃堕棿榛樿涓� <strong>30绉�</strong>锛屾暟鎹繑鍥炶秴鏃舵椂闂撮粯璁や负
+        <strong>60绉�</strong>锛岃秴鏃舵儏鍐典笅锛岃皟搴︾郴缁熶細杩斿洖杩炴帴澶辫触銆�
+    </p>
+</div>
+
+<div class="api-info" style="margin-bottom: 30px;">
+    <h3 style="color: #2c3e50; font-size: 18px; margin-bottom: 15px; padding-left: 0; border-left: none;">馃搵
+        瀵规帴绾﹀畾</h3>
+    <ul style="list-style: none; padding-left: 0;">
+        <li style="padding: 10px 15px; margin-bottom: 8px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #667eea;">
+            <strong style="color: #667eea;">缁熶竴鏍煎紡锛�</strong>涓烘帴鍙g粺涓�骞跺吋瀹癸紝鎵�鏈夌殑鍙傛暟閮戒负瀛楃涓叉牸寮忋��
+        </li>
+        <li style="padding: 10px 15px; margin-bottom: 8px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #667eea;">
+            <strong style="color: #667eea;">鏈绾﹀畾锛�</strong>鏂囨湰娑夊強鍒扮殑 AGV銆乺obot銆佹満鍣ㄤ汉鏈銆丆TU涓哄悓涓�鏈锛屼笉瑕佹贩娣嗐��
+        </li>
+        <li style="padding: 10px 15px; margin-bottom: 8px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #667eea;">
+            <strong style="color: #667eea;">鐗堟湰鍏煎锛�</strong>涓哄吋瀹逛互鍓嶇増鏈紝娑堟伅涓婃姤瀛楁浼氭瘮鍒楀嚭鐨勫瓧娈佃澶氾紝涓婂眰骞冲彴鏍规嵁涓氬姟鎴彇闇�瑕佺殑瀛楁銆�
+        </li>
+        <li style="padding: 10px 15px; margin-bottom: 8px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #667eea;">
+            <strong style="color: #667eea;">瀹瑰櫒瀹氫箟锛�</strong>搴旂敤浜庡弶杞︺�丆TU绛夐」鐩腑锛屾枡绠便�佹墭鐩樸�佽浇鍏烽兘鍙О涓哄鍣ㄣ��
+        </li>
+    </ul>
+</div>
+
+<!-- 鎺ュ彛姒傝 -->
+<section id="api-overview" class="api-section">
+    <h2>鎺ュ彛姒傝</h2>
+    <div class="api-info">
+        <h3>馃敆 鍩虹淇℃伅</h3>
+        <table style="margin-top: 15px;">
+            <tbody>
+            <tr>
+                <td style="width: 30%; font-weight: bold; background: #f8f9fa;">鍩虹 URL</td>
+                <td><code style="background: #282c34; color: #48bb78; padding: 4px 8px; border-radius: 4px;">http://IP:PORT</code>
+                </td>
+            </tr>
+            <tr>
+                <td style="font-weight: bold; background: #f8f9fa;">璇锋眰鏍煎紡</td>
+                <td><code>application/json</code></td>
+            </tr>
+            <tr>
+                <td style="font-weight: bold; background: #f8f9fa;">杩斿洖鏍煎紡</td>
+                <td><code>application/json</code></td>
+            </tr>
+            <tr>
+                <td style="font-weight: bold; background: #f8f9fa;">瀛楃缂栫爜</td>
+                <td><code>UTF-8</code></td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="api-info">
+        <h3>馃搵 閫氱敤璇锋眰鍙傛暟</h3>
+        <p style="margin-bottom: 15px; color: #666;">浠ヤ笅鍙傛暟涓烘墍鏈夋帴鍙g殑閫氱敤鍙傛暟锛屾瘡娆¤皟鐢ㄦ椂闇�瑕佹惡甯︼細</p>
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 20%;">鍙傛暟鍚�</th>
+                <th style="width: 15%;">鏄惁蹇呭~</th>
+                <th>鎻忚堪</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td><code>reqTime</code></td>
+                <td><span style="color: #999;">閫夊~</span></td>
+                <td>璇锋眰鏃堕棿鎴筹紝鏍煎紡: <code>yyyy-MM-dd HH:mm:ss</code>銆傜敱涓婂眰绯荤粺璁惧畾銆�</td>
+            </tr>
+            <!--                    <tr>-->
+            <!--                        <td><code>clientCode</code></td>-->
+            <!--                        <td><span style="color: #999;">閫夊~</span></td>-->
+            <!--                        <td>瀹㈡埛绔紪鍙凤紝濡� PDA銆丠CWMS 绛夈�傚鏋滃~鍐欙紝闇�鍏堝湪 RCS-2000 绯荤粺閰嶇疆锛屼笂灞傜郴缁熻皟鐢ㄦ椂杩涜濉啓锛屽綋澶氱郴缁熻皟鐢ㄦ椂锛岃皟搴︾郴缁熷彲浠ヨ繘琛岃皟鐢ㄦ柟鍖哄垎銆�</td>-->
+            <!--                    </tr>-->
+            <tr>
+                <td><code>tokenCode</code></td>
+                <td><span style="color: #999;">閫夊~</span></td>
+                <td>浠ょ墝鍙凤紝鐢辫皟搴︾郴缁熼鍙戙�傚鏋滃~鍐欙紝闇�鍏堝湪 RCS-2000 绯荤粺閰嶇疆锛屼笂灞傜郴缁熻皟鐢ㄦ椂杩涜濉啓銆�</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="api-info">
+        <h3>馃摛 閫氱敤杩斿洖鍊煎畾涔�</h3>
+        <p style="margin-bottom: 15px; color: #666;">鎵�鏈夋帴鍙g殑鍝嶅簲閮介伒寰互涓嬬粺涓�鏍煎紡锛�</p>
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 20%;">鍙傛暟鍚�</th>
+                <th style="width: 15%;">鏄惁蹇呭~</th>
+                <th>鎻忚堪</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td><code>code</code></td>
+                <td><span style="color: #f93e3e; font-weight: bold;">蹇呭~</span></td>
+                <td>杩斿洖缂栧彿锛�<code>200</code> 琛ㄧず鎴愬姛锛�<code>1~N</code> 琛ㄧず澶辫触</td>
+            </tr>
+            <tr>
+                <td><code>message</code></td>
+                <td><span style="color: #f93e3e; font-weight: bold;">蹇呭~</span></td>
+                <td>杩斿洖娑堟伅锛�<code>璇锋眰鎴愬姛</code> 琛ㄧず鎴愬姛锛屽唴瀹逛负璇︾粏鐨勯敊璇弿杩�</td>
+            </tr>
+            <tr>
+                <td><code>data</code></td>
+                <td><span style="color: #999;">閫夊~</span></td>
+                <td>杩斿洖鐨勬暟鎹粨鏋勶紝鍏蜂綋鍐呭鏍规嵁鎺ュ彛鑰屽畾</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+
+</section>
+
+<!-- 鐢熸垚浠诲姟鍗� -->
+<section id="api-task-create" class="api-section">
+    <h2>鐢熸垚浠诲姟鍗�* <span class="tag">甯哥敤</span></h2>
+    <div class="api-info">
+        <h3>
+            <span class="api-method method-post">POST</span>
+            <span>鍒涘缓鎼繍浠诲姟</span>
+        </h3>
+        <div class="api-url">/api/open/bus/submit</div>
+
+        <h4>璇锋眰鍙傛暟</h4>
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 20%;">鍙傛暟鍚�</th>
+                <th style="width: 15%;">绫诲瀷</th>
+                <th style="width: 15%;">蹇呭~</th>
+                <th>璇存槑</th>
+            </tr>
+            </thead>
+            <tbody>
+           
+            <tr>
+                <td><code>batchNo</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>鎵规缂栧彿锛堜笂灞傜郴缁熺敓鎴愶紝鍞竴鏍囪瘑锛�</td>
+            </tr>
+            <tr>
+                <td><code>tasks</code></td>
+                <td>array</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>浠诲姟鏁扮粍锛屽寘鍚叿浣撶殑浠诲姟璇︽儏</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <h4>浠诲姟鏁扮粍鍏冪礌鍙傛暟</h4>
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 20%;">鍙傛暟鍚�</th>
+                <th style="width: 15%;">绫诲瀷</th>
+                <th style="width: 15%;">蹇呭~</th>
+                <th>璇存槑</th>
+            </tr>
+            </thead>
+            <tbody>
+                 <tr>
+                <td><code>taskNo</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>浠诲姟缂栧彿锛堜笂灞傜郴缁熺敓鎴愶紝鍞竴鏍囪瘑锛�</td>
+            </tr>
+            <tr>
+                <td><code>oriSta</code></td>
+                <td>string</td>
+                <td><span style="color: #999;">鍚�</span></td>
+                <td>璧风偣绔欑偣缂栧彿</td>
+            </tr>
+            <tr>
+                <td><code>destSta</code></td>
+                <td>string</td>
+                <td><span style="color: #999;">鍚�</span></td>
+                <td>缁堢偣绔欑偣缂栧彿</td>
+            </tr>
+            <tr>
+                <td><code>oriLoc</code></td>
+                <td>string</td>
+                <td><span style="color: #999;">鍚�</span></td>
+                <td>璧风偣搴撲綅缂栧彿</td>
+            </tr>
+            <tr>
+                <td><code>destLoc</code></td>
+                <td>string</td>
+                <td><span style="color: #999;">鍚�</span></td>
+                <td>缁堢偣搴撲綅缂栧彿</td>
+            </tr>
+            <tr>
+                <td><code>priority</code></td>
+                <td>int</td>
+                <td><span style="color: #999;">鍚�</span></td>
+                <td>浼樺厛绾э細1-300锛岄粯璁や负1</td>
+            </tr>
+           
+            </tbody>
+        </table>
+
+        <h4>璇锋眰绀轰緥</h4>
+        <pre><code>{
+  
+  "batchNo": "122334",
+  "tasks": [
+    {
+        "taskNo": "TASK20231220001",
+      "oriLoc": "A100100101",
+      "destSta": "STA001",
+      "priority": 1
+    },
+    {
+        "taskNo": "TASK20231220001",
+      "oriSta": "STA002",
+      "destLoc": "B02-03-05",
+      "priority": 2
+    }
+  ]
+}</code></pre>
+
+        <h4>杩斿洖绀轰緥</h4>
+        <pre><code>{
+  "code": 200,
+  "message": "浠诲姟鍒涘缓鎴愬姛",
+  "data": {
+    "taskNo": "TASK20231220001",
+    "taskId": "T1234567890",
+    "status": "ASSIGN"
+  },
+  "timestamp": 1671526800000
+}</code></pre>
+    </div>
+
+    <div class="mock-container">
+        <h4>Mock 娴嬭瘯</h4>
+        <button class="mock-toggle-btn" onclick="toggleMockContent(this)">灞曞紑</button>
+        <div class="mock-content collapsed">
+            <div class="mode-switch">
+                <button class="active" onclick="switchInputMode('task-create', 'form')" id="task-create-form-btn">
+                    琛ㄥ崟杈撳叆
+                </button>
+                <button onclick="switchInputMode('task-create', 'json')" id="task-create-json-btn">JSON杈撳叆</button>
+            </div>
+            <div class="mock-form">
+                <div class="form-input-container" id="task-create-form-container">
+                    <h5>璇锋眰鍙傛暟</h5>
+                    <div class="form-group">
+                        <label>taskNo <span class="required">*</span></label>
+                        <input type="text" id="task-create-taskNo" placeholder="TASK20231220001"
+                               value="TASK20231220001">
+                        <div class="error-msg" id="task-create-taskNo-error">璇疯緭鍏ヤ换鍔$紪鍙�</div>
+                    </div>
+                    <div class="form-group">
+                        <label>batchNo <span class="required">*</span></label>
+                        <input type="text" id="task-create-batchNo" placeholder="122334"
+                               value="122334">
+                        <div class="error-msg" id="task-create-batchNo-error">璇疯緭鍏ユ壒娆$紪鍙�</div>
+                    </div>
+                    <div class="form-group">
+                        <label>taskType <span class="required">*</span></label>
+                        <select id="task-create-taskType">
+                            <option value="1" selected>1 - 鍑哄簱(oriLoc鍜宒estSta蹇呭~)</option>
+                            <option value="2">2 - 鍏ュ簱(oriSta鍜宒estLoc蹇呭~)</option>
+                            <option value="3">3 - 搴撲綅闂寸Щ搴�(oriLoc鍜宒estLoc蹇呭~)</option>
+                            <option value="4">4 - 绔欑偣闂存惉杩�(oriSta鍜宒estSta蹇呭~)</option>
+                        </select>
+                        <div class="error-msg" id="task-create-taskType-error">璇烽�夋嫨浠诲姟绫诲瀷</div>
+                    </div>
+                    <div class="form-group">
+                        <label>oriSta</label>
+                        <input type="text" id="task-create-oriSta" placeholder="STA001" value="">
+                        <div class="hint">璧风偣绔欑偣缂栧彿</div>
+                    </div>
+                    <div class="form-group">
+                        <label>destSta</label>
+                        <input type="text" id="task-create-destSta" placeholder="STA002" value="STA001">
+                        <div class="hint">缁堢偣绔欑偣缂栧彿</div>
+                    </div>
+                    <div class="form-group">
+                        <label>oriLoc</label>
+                        <input type="text" id="task-create-oriLoc" placeholder="A100100101" value="A100100101">
+                        <div class="hint">璧风偣搴撲綅缂栧彿</div>
+                    </div>
+                    <div class="form-group">
+                        <label>destLoc</label>
+                        <input type="text" id="task-create-destLoc" placeholder="B02-03-05" value="">
+                        <div class="hint">缁堢偣搴撲綅缂栧彿</div>
+                    </div>
+                    <div class="form-group">
+                        <label>priority</label>
+                        <input type="text" id="task-create-priority" placeholder="1" value="1">
+                        <div class="hint">浼樺厛绾э細1-300锛岄粯璁や负1</div>
+                    </div>
+                  
+                </div>
+                <div class="json-input-container" id="task-create-json-container">
+                    <h5>JSON杈撳叆</h5>
+                    <textarea class="json-textarea" id="task-create-json">{
+  "taskNo": "TASK20231220001",
+  "batchNo": "122334",
+  "tasks": [
+    {
+      "oriLoc": "A100100101",
+      "destSta": "STA001",
+      "priority": 1
+      
+    }
+  ]
+}</textarea>
+                    <div class="error-msg" id="task-create-json-error">璇疯緭鍏ユ湁鏁堢殑JSON鏍煎紡</div>
+                </div>
+                <div class="mock-form-actions">
+                    <button class="mock-btn" onclick="mockTaskCreate()">鎵ц Mock 璇锋眰</button>
+                    <button class="reset-btn" onclick="resetTaskCreateForm()">閲嶇疆</button>
+                </div>
+            </div>
+            <div id="mock-task-create-result" class="mock-result"></div>
+        </div>
+    </div>
+</section>
+
+<!-- 鍙栨秷浠诲姟 -->
+<section id="api-task-cancel" class="api-section">
+    <h2>鍙栨秷浠诲姟鍗�* <span class="tag">甯哥敤</span></h2>
+    <div class="api-info">
+        <h3>
+            <span class="api-method method-post">POST</span>
+            <span>鍙栨秷宸插垱寤虹殑浠诲姟</span>
+        </h3>
+        <div class="api-url">/api/open/task/cancel</div>
+
+        <h4>璇锋眰鍙傛暟</h4>
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 20%;">鍙傛暟鍚�</th>
+                <th style="width: 15%;">绫诲瀷</th>
+                <th style="width: 15%;">蹇呭~</th>
+                <th>璇存槑</th>
+            </tr>
+            </thead>
+            <tbody>
+
+            <tr>
+                <td><code>tasks</code></td>
+                <td>array</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>瑕佸彇娑堢殑浠诲姟缂栧彿鏁扮粍</td>
+            </tr>
+            <tr>
+                <td><code>batchNo</code></td>
+                <td>string</td>
+                <td><span style="color: RED;">鏄�</span></td>
+                <td>浠诲姟鎵规缂栧彿</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <h4>璇锋眰绀轰緥</h4>
+        <pre><code>{
+	鈥渂atchNo鈥�: 鈥�12345鈥�,
+	鈥渢asks鈥�: [鈥�123鈥�, 鈥�456鈥漖
+}</code></pre>
+
+        <h4>杩斿洖绀轰緥</h4>
+        <pre><code>{
+	code: 200,
+	msg: 鈥樷�︹��,
+	data: [
+		{
+			鈥渢askNo鈥�: 鈥�123鈥�,
+			鈥渟uccess鈥�: true,
+			鈥渕sg鈥�: null
+		},
+		{
+			鈥渢askNo鈥�: 鈥�456鈥�,
+			鈥渟uccess鈥�: false,
+			鈥渕sg鈥�: 鈥�456 is not exist鈥�
+		}
+	]
+}</code></pre>
+
+        <div class="note">
+            <div class="note-title">娉ㄦ剰浜嬮」</div>
+            <p>鈥� 宸茬粡鍦ㄦ墽琛屼腑鐨勪换鍔℃棤娉曞彇娑堬紝浼氳繑鍥炵浉搴旈敊璇爜</p>
+            <p>鈥� 鍙栨秷浠诲姟鍚庯紝AGV浼氬仠姝㈡墽琛屽苟杩斿洖寰呭懡鐘舵��</p>
+        </div>
+    </div>
+
+    <div class="mock-container">
+        <h4>Mock 娴嬭瘯</h4>
+        <button class="mock-toggle-btn" onclick="toggleMockContent(this)">灞曞紑</button>
+        <div class="mock-content collapsed">
+            <div class="mode-switch">
+                <button class="active" onclick="switchInputMode('task-cancel', 'form')" id="task-cancel-form-btn">
+                    琛ㄥ崟杈撳叆
+                </button>
+                <button onclick="switchInputMode('task-cancel', 'json')" id="task-cancel-json-btn">JSON杈撳叆</button>
+            </div>
+            <div class="mock-form">
+                <div class="form-input-container" id="task-cancel-form-container">
+                    <h5>璇锋眰鍙傛暟</h5>
+                    <div class="form-group">
+                        <label>tasks <span class="required">*</span></label>
+                        <input type="text" id="task-cancel-tasks" placeholder="TASK20231220001,TASK20231220002"
+                               value="TASK20231220001,TASK20231220002">
+                        <div class="error-msg" id="task-cancel-tasks-error">璇疯緭鍏ヨ鍙栨秷鐨勪换鍔$紪鍙�</div>
+                        <div class="hint">澶氫釜浠诲姟缂栧彿璇风敤閫楀彿鍒嗛殧</div>
+                    </div>
+                    <div class="form-group">
+                        <label>batchNo</label>
+                        <input type="text" id="task-cancel-batchNo" placeholder="12345"
+                               value="12345">
+                        <div class="hint">浠诲姟鎵规缂栧彿锛堥�夊~锛�</div>
+                    </div>
+                </div>
+                <div class="json-input-container" id="task-cancel-json-container">
+                    <h5>JSON杈撳叆</h5>
+                    <textarea class="json-textarea" id="task-cancel-json">{
+  "batchNo": "12345",
+  "tasks": ["TASK20231220001", "TASK20231220002"]
+}</textarea>
+                    <div class="error-msg" id="task-cancel-json-error">璇疯緭鍏ユ湁鏁堢殑JSON鏍煎紡</div>
+                </div>
+                <div class="mock-form-actions">
+                    <button class="mock-btn" onclick="mockTaskCancel()">鎵ц Mock 璇锋眰</button>
+                    <button class="reset-btn" onclick="resetTaskCancelForm()">閲嶇疆</button>
+                </div>
+            </div>
+            <div id="mock-task-cancel-result" class="mock-result"></div>
+        </div>
+    </div>
+</section>
+
+<!-- 浠诲姟鎵ц閫氱煡 -->
+<section id="api-task-notice" class="api-section">
+    <h2>浠诲姟鎵ц閫氱煡* <span class="tag">鍥炶皟鎺ュ彛</span></h2>
+    <div class="api-info">
+        <h3>
+            <span class="api-method method-post">POST</span>
+            <span>RCS鍥炶皟涓婂眰绯荤粺鎺ュ彛</span>
+        </h3>
+        <div class="api-url">/api/open/task/report</div>
+
+        <div class="note" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-left-color: #2196f3;">
+            <div class="note-title" style="color: #1565c0;">馃摙 鎺ュ彛璇存槑</div>
+            <p style="color: #1976d2;">姝ゆ帴鍙g敱<strong>涓婂眰绯荤粺鎻愪緵</strong>锛孯CS绯荤粺鍦ㄤ换鍔$姸鎬佸彂鐢熷彉鍖栨椂涓诲姩鍥炶皟銆備笂灞傜郴缁熼渶瑕佸疄鐜版鎺ュ彛骞堕厤缃洖璋冨湴鍧�鍒癛CS绯荤粺涓��
+            </p>
+        </div>
+
+        <h4>璇锋眰鍙傛暟锛圧CS鎺ㄩ�侊級</h4>
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 20%;">鍙傛暟鍚�</th>
+                <th style="width: 15%;">绫诲瀷</th>
+                <th style="width: 15%;">蹇呭~</th>
+                <th>璇存槑</th>
+            </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td><code>batchNo</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>浠诲姟鎵规</td>
+            </tr>
+            <tr>
+                <td><code>taskNo</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>浠诲姟缂栧彿</td>
+            </tr>
+            <tr>
+                <td><code>timestamp</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>鏃堕棿鎴�</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <h4>鎺ㄩ�佺ず渚嬶紙RCS 鈫� 涓婂眰绯荤粺锛�</h4>
+        <pre><code>{
+  "taskNo": "TASK20231220001",
+  "batchNo": "2345",
+  "timestamp": "2023-12-20 14:30:25"
+}</code></pre>
+
+        <h4>杩斿洖绀轰緥锛堜笂灞傜郴缁熼渶杩斿洖锛�</h4>
+        <pre><code>{
+  "code": 200,
+  "message": "鎺ユ敹鎴愬姛"
+}</code></pre>
+
+        
+    </div>
+
+    <div class="mock-container">
+        <h4>Mock 娴嬭瘯锛堟ā鎷烺CS鎺ㄩ�侊級</h4>
+        <button class="mock-toggle-btn" onclick="toggleMockContent(this)">灞曞紑</button>
+        <div class="mock-content collapsed">
+            <div class="form-group">
+                <label>鍥炶皟鍦板潃 <span class="required">*</span></label>
+                <input type="text" id="task-notice-callback-url" placeholder="http://localhost:8080/api/callback" value="http://localhost:8080/api/callback">
+                <span class="error-message" id="task-notice-callback-url-error">璇疯緭鍏ュ洖璋冨湴鍧�</span>
+            </div>
+            <div class="form-actions">
+                <button class="mock-btn" onclick="mockTaskNotice()">鍙戦�佽姹�</button>
+                <button class="reset-btn" onclick="resetTaskNoticeForm()">閲嶇疆</button>
+            </div>
+            <div id="mock-task-notice-result" class="mock-result"></div>
+        </div>
+    </div>
+</section>
+
+<!-- 鐢宠鍏ュ簱浠诲姟 -->
+<section id="api-task-priority" class="api-section">
+    <h2>鐢宠鍏ュ簱浠诲姟* <span class="tag">甯哥敤</span></h2>
+    <div class="api-info">
+        <h3>
+            <span class="api-method method-post">POST</span>
+            <span>鐢宠鍏ュ簱浠诲姟</span>
+        </h3>
+        <div class="api-url">/api/open/location/allocate</div>
+<div class="note" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-left-color: #2196f3;">
+            <div class="note-title" style="color: #1565c0;">馃摙 鎺ュ彛璇存槑</div>
+            <p style="color: #1976d2;">姝ゆ帴鍙g敱<strong>涓婂眰绯荤粺鎻愪緵</strong>锛孯CS绯荤粺鍦ㄤ换鍔$姸鎬佸彂鐢熷彉鍖栨椂涓诲姩鍥炶皟銆備笂灞傜郴缁熼渶瑕佸疄鐜版鎺ュ彛骞堕厤缃洖璋冨湴鍧�鍒癛CS绯荤粺涓��
+            </p>
+        </div>
+        <h4>璇锋眰鍙傛暟</h4>
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 20%;">鍙傛暟鍚�</th>
+                <th style="width: 15%;">绫诲瀷</th>
+                <th style="width: 15%;">蹇呭~</th>
+                <th>璇存槑</th>
+            </tr>
+            </thead>
+            <tbody>
+
+            <tr>
+                <td><code>barcode</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>鏂欑鐮�</td>
+            </tr>
+            <tr>
+                <td><code>staNo</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>鍏ュ簱绔欑偣</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <h4>璇锋眰绀轰緥</h4>
+        <pre><code>{
+  "barcode": "8000001",
+  "staNo": "1005"
+}</code></pre>
+
+        <h4>杩斿洖绀轰緥</h4>
+        <pre><code>{
+  "code": 200,
+  "message": "success",
+  "data": {
+    "locNo": "A100100101"
+  }
+}</code></pre>
+    </div>
+
+    <div class="mock-container">
+        <h4>Mock 娴嬭瘯</h4>
+        <button class="mock-toggle-btn" onclick="toggleMockContent(this)">灞曞紑</button>
+        <div class="mock-content collapsed">
+            <div class="mode-switch">
+                <button class="active" onclick="switchInputMode('task-priority', 'form')" id="task-priority-form-btn">
+                    琛ㄥ崟杈撳叆
+                </button>
+                <button onclick="switchInputMode('task-priority', 'json')" id="task-priority-json-btn">JSON杈撳叆</button>
+            </div>
+            <div class="mock-form">
+                <div class="form-input-container" id="task-priority-form-container">
+                    <h5>璇锋眰鍙傛暟</h5>
+                    <div class="form-group">
+                        <label>taskNo <span class="required">*</span></label>
+                        <input type="text" id="task-priority-taskNo" placeholder="TASK20231220001"
+                               value="TASK20231220001">
+                        <div class="error-msg" id="task-priority-taskNo-error">璇疯緭鍏ヤ换鍔$紪鍙�</div>
+                    </div>
+                    <div class="form-group">
+                        <label>priority <span class="required">*</span></label>
+                        <input type="text" id="task-priority-priority" placeholder="1-300" value="3">
+                        <div class="hint">浼樺厛绾ц寖鍥达細1-300</div>
+                        <div class="error-msg" id="task-priority-priority-error">璇疯緭鍏ヤ紭鍏堢骇锛�1-300锛�</div>
+                    </div>
+                </div>
+                <div class="json-input-container" id="task-priority-json-container">
+                    <h5>JSON杈撳叆</h5>
+                    <textarea class="json-textarea" id="task-priority-json">{
+  "taskNo": "TASK20231220001",
+  "priority": "3"
+}</textarea>
+                    <div class="error-msg" id="task-priority-json-error">璇疯緭鍏ユ湁鏁堢殑JSON鏍煎紡</div>
+                </div>
+                <div class="mock-form-actions">
+                    <button class="mock-btn" onclick="mockTaskPriority()">鎵ц Mock 璇锋眰</button>
+                    <button class="reset-btn" onclick="resetTaskPriorityForm()">閲嶇疆</button>
+                </div>
+            </div>
+            <div id="mock-task-priority-result" class="mock-result"></div>
+        </div>
+    </div>
+</section>
+
+<!-- 搴撲綅鐘舵�佷慨鏀� -->
+<!-- <section id="api-loc-status" class="api-section">
+    <h2>搴撲綅鐘舵�佷慨鏀�</h2>
+    <div class="api-info">
+        <h3>
+            <span class="api-method method-post">POST</span>
+            <span>淇敼搴撲綅鐘舵��</span>
+        </h3>
+        <div class="api-url">/api/open/loc/status/update</div>
+
+        <h4>璇锋眰鍙傛暟</h4>
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 20%;">鍙傛暟鍚�</th>
+                <th style="width: 15%;">绫诲瀷</th>
+                <th style="width: 15%;">蹇呭~</th>
+                <th>璇存槑</th>
+            </tr>
+            </thead>
+            <tbody>
+
+            <tr>
+                <td><code>locCode</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>搴撲綅缂栧彿</td>
+            </tr>
+            <tr>
+                <td><code>status</code></td>
+                <td>string</td>
+                <td><span style="color: #f93e3e; font-weight: bold;">鏄�</span></td>
+                <td>搴撲綅鐘舵�侊細0-绂佺敤銆�1-鍚敤銆�2-鍦ㄥ簱銆�3-绌哄簱浣�</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <h4>璇锋眰绀轰緥</h4>
+        <pre><code>{
+  "locCode": "A100100101",
+  "status": "0"
+}</code></pre>
+
+        <h4>杩斿洖绀轰緥</h4>
+        <pre><code>{
+  "code": 200,
+  "message": "搴撲綅鐘舵�佷慨鏀规垚鍔�"
+}</code></pre>
+
+        <div class="note">
+            <div class="note-title">浣跨敤鍦烘櫙</div>
+            <p>鈥� 涓存椂灏侀棴鏌愪釜搴撲綅锛堢淮鎶ゃ�佹淇瓑锛�</p>
+            <p>鈥� 搴撲綅寮傚父鏃剁鐢�</p>
+            <p>鈥� 缁存姢瀹屾垚鍚庨噸鏂板惎鐢ㄥ簱浣�</p>
+        </div>
+    </div>
+
+    <div class="mock-container">
+        <h4>Mock 娴嬭瘯</h4>
+        <button class="mock-toggle-btn" onclick="toggleMockContent(this)">灞曞紑</button>
+        <div class="mock-content collapsed">
+            <div class="mode-switch">
+                <button id="loc-status-form-btn" class="mode-btn active"
+                        onclick="switchInputMode('loc-status', 'form')">琛ㄥ崟杈撳叆
+                </button>
+                <button id="loc-status-json-btn" class="mode-btn" onclick="switchInputMode('loc-status', 'json')">
+                    JSON杈撳叆
+                </button>
+            </div>
+            <div class="form-input-container" id="loc-status-form-container">
+                <h5>璇锋眰鍙傛暟</h5>
+                <div class="form-group">
+                    <label>搴撲綅缂栫爜 <span class="required">*</span></label>
+                    <input type="text" id="loc-status-locCode" placeholder="A100100101" value="A100100101">
+                    <span class="error-message" id="loc-status-locCode-error">璇疯緭鍏ュ簱浣嶇紪鐮�</span>
+                </div>
+                <div class="form-group">
+                    <label>鐘舵�� <span class="required">*</span></label>
+                    <select id="loc-status-status">
+                        <option value="">璇烽�夋嫨鐘舵��</option>
+                        <option value="0">0 - 绂佺敤</option>
+                        <option value="1" selected>1 - 鍚敤</option>
+                        <option value="2">2 - 鍦ㄥ簱</option>
+                        <option value="3">3 - 绌哄簱浣�</option>
+                    </select>
+                    <span class="error-message" id="loc-status-status-error">璇烽�夋嫨鐘舵��</span>
+                </div>
+                <div class="form-actions">
+                    <button class="mock-btn" onclick="mockLocStatus()">鎵ц Mock 璇锋眰</button>
+                    <button class="reset-btn" onclick="resetLocStatusForm()">閲嶇疆</button>
+                </div>
+            </div>
+            <div class="json-input-container" id="loc-status-json-container">
+                <h5>JSON杈撳叆</h5>
+                <textarea class="json-textarea" id="loc-status-json" rows="8">{
+  "locCode": "A100100101",
+  "status": "1"
+}</textarea>
+                <span class="error-message" id="loc-status-json-error">璇疯緭鍏ユ湁鏁堢殑JSON鍙傛暟</span>
+                <div class="form-actions">
+                    <button class="mock-btn" onclick="mockLocStatus()">鎵ц Mock 璇锋眰</button>
+                    <button class="reset-btn" onclick="resetLocStatusForm()">閲嶇疆</button>
+                </div>
+            </div>
+            <div id="mock-loc-status-result" class="mock-result"></div>
+        </div>
+    </div>
+</section> -->
+
+
+
+<!-- 閿欒鐮佽鏄� -->
+<section id="error-codes" class="api-section">
+    <h2>閿欒鐮佽鏄�</h2>
+    <div class="api-info">
+        <h3>閫氱敤閿欒鐮�</h3>
+        <table>
+            <thead>
+            <tr>
+                <th>閿欒鐮�</th>
+                <th>璇存槑</th>
+                <th>瑙e喅鏂规</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>200</td>
+                <td>鎴愬姛</td>
+                <td>-</td>
+            </tr>
+            <tr>
+                <td>500</td>
+                <td>鍙傛暟閿欒</td>
+                <td>妫�鏌ヨ姹傚弬鏁版槸鍚﹀畬鏁村拰姝g‘</td>
+            </tr>
+            
+            </tbody>
+        </table>
+    </div>
+</section>
+
+
+<div class="feedback-section">
+    <p style="color: #999;">浠ヤ笂鍐呭瀵规偍鏈夊府鍔╁悧?</p>
+    <div class="stars">
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+    </div>
+</div>
+
+<div class="pagination">
+    <div class="prev-page">
+        <div style="color: #999; font-size: 14px; margin-bottom: 10px;">涓婁竴绡�</div>
+        <div style="color: #333; font-size: 16px;">骞冲彴瑙勮寖</div>
+    </div>
+    <div class="next-page">
+        <div style="color: #999; font-size: 14px; margin-bottom: 10px; text-align: right;">涓嬩竴绡�</div>
+        <div style="color: #333; font-size: 16px; text-align: right;">搴旂敤鎺ュ叆寮曞</div>
+    </div>
+</div>
+
+<script>
+    // 楠岃瘉浠诲姟鍒涘缓鍙傛暟
+    function validateTaskCreate() {
+        let isValid = true;
+
+        const taskNo = document.getElementById('task-create-taskNo');
+        const taskType = document.getElementById('task-create-taskType');
+        const oriSta = document.getElementById('task-create-oriSta');
+        const destSta = document.getElementById('task-create-destSta');
+        const oriLoc = document.getElementById('task-create-oriLoc');
+        const destLoc = document.getElementById('task-create-destLoc');
+
+        const taskNoError = document.getElementById('task-create-taskNo-error');
+        const taskTypeError = document.getElementById('task-create-taskType-error');
+
+        taskNo.classList.remove('error');
+        taskType.classList.remove('error');
+        oriSta.classList.remove('error');
+        destSta.classList.remove('error');
+        oriLoc.classList.remove('error');
+        destLoc.classList.remove('error');
+
+        taskNoError.classList.remove('show');
+        taskTypeError.classList.remove('show');
+
+        if (!taskNo.value.trim()) {
+            taskNo.classList.add('error');
+            taskNoError.classList.add('show');
+            isValid = false;
+        }
+
+        if (!taskType.value) {
+            taskType.classList.add('error');
+            taskTypeError.classList.add('show');
+            isValid = false;
+        }
+
+        const taskTypeValue = parseInt(taskType.value);
+        if (taskTypeValue === 1 || taskTypeValue === 3) {
+            if (!oriLoc.value.trim()) {
+                oriLoc.classList.add('error');
+                isValid = false;
+            }
+        }
+        if (taskTypeValue === 2 || taskTypeValue === 4) {
+            if (!oriSta.value.trim()) {
+                oriSta.classList.add('error');
+                isValid = false;
+            }
+        }
+        if (taskTypeValue === 1 || taskTypeValue === 4) {
+            if (!destSta.value.trim()) {
+                destSta.classList.add('error');
+                isValid = false;
+            }
+        }
+        if (taskTypeValue === 2 || taskTypeValue === 3) {
+            if (!destLoc.value.trim()) {
+                destLoc.classList.add('error');
+                isValid = false;
+            }
+        }
+
+        if (oriLoc.value.trim() && destLoc.value.trim() && oriLoc.value.trim() === destLoc.value.trim()) {
+            oriLoc.classList.add('error');
+            destLoc.classList.add('error');
+            isValid = false;
+        }
+
+        return isValid;
+    }
+
+    // 閲嶇疆浠诲姟鍒涘缓琛ㄥ崟
+    function resetTaskCreateForm() {
+        document.getElementById('task-create-taskNo').value = 'TASK20231220001';
+        document.getElementById('task-create-batchNo').value = '122334';
+        document.getElementById('task-create-taskType').value = '1';
+        document.getElementById('task-create-oriSta').value = '';
+        document.getElementById('task-create-destSta').value = 'STA001';
+        document.getElementById('task-create-oriLoc').value = 'A100100101';
+        document.getElementById('task-create-destLoc').value = '';
+        document.getElementById('task-create-priority').value = '1';
+
+        syncFormToJson('task-create');
+
+        const inputs = document.querySelectorAll('#task-create-taskNo, #task-create-batchNo, #task-create-taskType, #task-create-oriSta, #task-create-destSta, #task-create-oriLoc, #task-create-destLoc');
+        inputs.forEach(input => input.classList.remove('error'));
+
+        const errors = document.querySelectorAll('[id^="task-create-"][id$="-error"]');
+        errors.forEach(error => {
+            error.classList.remove('show');
+            if (error.id === 'task-create-taskNo-error') error.textContent = '璇疯緭鍏ヤ换鍔$紪鍙�';
+            if (error.id === 'task-create-taskType-error') error.textContent = '璇烽�夋嫨浠诲姟绫诲瀷';
+        });
+
+        document.getElementById('mock-task-create-result').classList.remove('show');
+        document.getElementById('mock-task-create-result').innerHTML = '';
+
+        const jsonError = document.getElementById('task-create-json-error');
+        if (jsonError) jsonError.classList.remove('show');
+    
+
+        const resultDiv = document.getElementById('mock-task-create-result');
+        resultDiv.classList.remove('show');
+        resultDiv.innerHTML = '';
+    }
+
+    // 鍒囨崲杈撳叆妯″紡
+    function switchInputMode(formId, mode) {
+        const formBtn = document.getElementById(`${formId}-form-btn`);
+        const jsonBtn = document.getElementById(`${formId}-json-btn`);
+        const formContainer = document.getElementById(`${formId}-form-container`);
+        const jsonContainer = document.getElementById(`${formId}-json-container`);
+
+        if (mode === 'form') {
+            syncJsonToForm(formId);
+            formBtn.classList.add('active');
+            jsonBtn.classList.remove('active');
+            formContainer.classList.remove('hidden');
+            jsonContainer.classList.remove('active');
+        } else {
+            syncFormToJson(formId);
+            formBtn.classList.remove('active');
+            jsonBtn.classList.add('active');
+            formContainer.classList.add('hidden');
+            jsonContainer.classList.add('active');
+        }
+    }
+
+    function syncFormToJson(formId) {
+        let params;
+        if (formId === 'task-create') {
+            // 瀵逛簬浠诲姟鍒涘缓琛ㄥ崟锛屼娇鐢ㄦ柊鐨勬暟缁勬牸寮�
+            const formParams = getParamsFromForm(formId);
+            params = {
+                taskNo: formParams.taskNo,
+                batchNo: formParams.batchNo || '122334',
+                tasks: [{
+                    taskType: formParams.taskType,
+                    oriSta: formParams.oriSta,
+                    destSta: formParams.destSta,
+                    oriLoc: formParams.oriLoc,
+                    destLoc: formParams.destLoc,
+                    priority: formParams.priority ? parseInt(formParams.priority) : 1
+                }]
+            };
+        } else if (formId === 'task-cancel') {
+            // 瀵逛簬浠诲姟鍙栨秷琛ㄥ崟锛屼娇鐢╰asks鏁扮粍鏍煎紡
+            const formParams = getParamsFromForm(formId);
+            params = {
+                batchNo: formParams.batchNo || '12345',
+                tasks: formParams.tasks.split(',').map(task => task.trim())
+            };
+        } else {
+            // 瀵逛簬鍏朵粬琛ㄥ崟锛屼娇鐢ㄥ師鏈夌殑鏍煎紡
+            params = getParamsFromForm(formId);
+        }
+        const textarea = document.getElementById(`${formId}-json`);
+        if (textarea) {
+            textarea.value = JSON.stringify(params, null, 2);
+        }
+    }
+
+    function syncJsonToForm(formId) {
+        const textarea = document.getElementById(`${formId}-json`);
+        if (!textarea) return;
+
+        try {
+            const params = JSON.parse(textarea.value);
+            const inputs = document.querySelectorAll(`#${formId}-form-container input, #${formId}-form-container select`);
+            
+            if (formId === 'task-create' && params.tasks && Array.isArray(params.tasks) && params.tasks.length > 0) {
+                // 瀵逛簬浠诲姟鍒涘缓琛ㄥ崟锛屼粠tasks鏁扮粍涓幏鍙栫涓�涓换鍔$殑鏁版嵁
+                const task = params.tasks[0];
+                inputs.forEach(input => {
+                    const key = input.id.replace(`${formId}-`, '');
+                    if (params[key] !== undefined) {
+                        input.value = params[key];
+                    } else if (task[key] !== undefined) {
+                        input.value = task[key];
+                    }
+                });
+            } else if (formId === 'task-cancel' && params.tasks && Array.isArray(params.tasks)) {
+                // 瀵逛簬浠诲姟鍙栨秷琛ㄥ崟锛屽皢tasks鏁扮粍杞崲涓洪�楀彿鍒嗛殧鐨勫瓧绗︿覆
+                inputs.forEach(input => {
+                    const key = input.id.replace(`${formId}-`, '');
+                    if (key === 'tasks') {
+                        input.value = params.tasks.join(', ');
+                    } else if (params[key] !== undefined) {
+                        input.value = params[key];
+                    }
+                });
+            } else {
+                // 瀵逛簬鍏朵粬琛ㄥ崟锛屼娇鐢ㄥ師鏈夌殑閫昏緫
+                inputs.forEach(input => {
+                    const key = input.id.replace(`${formId}-`, '');
+                    if (params[key] !== undefined) {
+                        input.value = params[key];
+                    }
+                });
+            }
+        } catch (e) {
+            console.error('JSON瑙f瀽澶辫触锛屾棤娉曞悓姝ュ埌琛ㄥ崟', e);
+        }
+    }
+
+    // 浠庤〃鍗曡幏鍙栧弬鏁�
+    function getParamsFromForm(formId) {
+        const params = {};
+        const inputs = document.querySelectorAll(`#${formId}-form-container input, #${formId}-form-container select`);
+        inputs.forEach(input => {
+            const key = input.id.replace(`${formId}-`, '');
+            params[key] = input.value.trim();
+        });
+        return params;
+    }
+
+    // 浠嶫SON鑾峰彇鍙傛暟
+    function getParamsFromJson(jsonId) {
+        const textarea = document.getElementById(jsonId);
+        const errorDiv = document.getElementById(`${jsonId}-error`);
+
+        try {
+            const json = JSON.parse(textarea.value);
+            textarea.classList.remove('error');
+            errorDiv.classList.remove('show');
+            return json;
+        } catch (e) {
+            textarea.classList.add('error');
+            errorDiv.classList.add('show');
+            return null;
+        }
+    }
+
+    // 楠岃瘉浠诲姟鍒涘缓JSON鍙傛暟
+    function validateTaskCreateJson(params) {
+        const errorDiv = document.getElementById('task-create-json-error');
+        
+        if (!params || typeof params !== 'object') {
+            errorDiv.textContent = '璇疯緭鍏ユ湁鏁堢殑JSON鏍煎紡';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (!params.taskNo || !params.taskNo.trim()) {
+            errorDiv.textContent = 'taskNo涓嶈兘涓虹┖';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (!params.batchNo || !params.batchNo.trim()) {
+            errorDiv.textContent = 'batchNo涓嶈兘涓虹┖';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (!params.tasks || !Array.isArray(params.tasks)) {
+            errorDiv.textContent = 'tasks蹇呴』鏄暟缁勬牸寮�';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (params.tasks.length === 0) {
+            errorDiv.textContent = 'tasks鏁扮粍涓嶈兘涓虹┖';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        // 楠岃瘉tasks鏁扮粍涓殑姣忎釜浠诲姟
+        for (let i = 0; i < params.tasks.length; i++) {
+            const task = params.tasks[i];
+            if (!task || typeof task !== 'object') {
+                errorDiv.textContent = `tasks鏁扮粍绗�${i+1}涓厓绱犲繀椤绘槸瀵硅薄`;
+                errorDiv.classList.add('show');
+                return false;
+            }
+
+            // 楠岃瘉璧风偣鍜岀粓鐐�
+            if (task.oriLoc && task.destLoc && task.oriLoc.trim() === task.destLoc.trim()) {
+                errorDiv.textContent = `tasks鏁扮粍绗�${i+1}涓厓绱犵殑璧风偣搴撲綅鍜岀粓鐐瑰簱浣嶄笉鑳界浉鍚宍;
+                errorDiv.classList.add('show');
+                return false;
+            }
+        }
+
+        errorDiv.classList.remove('show');
+        return true;
+    }
+
+    // Mock 鐢熸垚浠诲姟鍗�
+    function mockTaskCreate() {
+        let params;
+        const isJsonMode = document.getElementById('task-create-json-container').classList.contains('active');
+
+        if (isJsonMode) {
+            params = getParamsFromJson('task-create-json');
+            if (!params) return;
+            if (!validateTaskCreateJson(params)) return;
+        } else {
+            // 浠庤〃鍗曡幏鍙栧弬鏁板苟杞崲涓烘柊鐨勬暟缁勬牸寮�
+            const formParams = getParamsFromForm('task-create');
+            params = {
+                taskNo: formParams.taskNo,
+                batchNo: formParams.batchNo || '122334',
+                tasks: [{
+                    taskType: formParams.taskType,
+                    oriSta: formParams.oriSta,
+                    destSta: formParams.destSta,
+                    oriLoc: formParams.oriLoc,
+                    destLoc: formParams.destLoc,
+                    priority: formParams.priority ? parseInt(formParams.priority) : 1
+                }]
+            };
+        }
+
+        const resultDiv = document.getElementById('mock-task-create-result');
+        resultDiv.classList.add('show');
+        resultDiv.innerHTML = '<p style="color: #999;" class="loading">鈴� 姝e湪鍙戦�佽姹�...</p>';
+
+        setTimeout(() => {
+            const response = {
+                code: 200,
+                message: "浠诲姟鍒涘缓鎴愬姛",
+                data: {
+                    taskNo: params.taskNo,
+                    batchNo: params.batchNo,
+                    taskId: "T" + Math.random().toString(36).substr(2, 10),
+                    status: "ASSIGN",
+                    taskCount: params.tasks.length
+                },
+                timestamp: new Date().getTime()
+            };
+            resultDiv.innerHTML = `
+                    <p style="color: #49cc90; font-weight: bold;" class="success-icon">鉁� 璇锋眰鎴愬姛</p>
+                    <div style="margin-bottom: 20px; padding: 15px; background: #e3f2fd; border-radius: 8px; border-left: 4px solid #2196f3;">
+                        <p style="font-weight: bold; color: #1976d2; margin-bottom: 10px;">馃摛 鍙戦�佹暟鎹�</p>
+                        <div class="code-wrapper">
+                            <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                            <pre><code>${JSON.stringify(params, null, 2)}</code></pre>
+                        </div>
+                    </div>
+                    <div style="padding: 15px; background: #e8f5e9; border-radius: 8px; border-left: 4px solid #49cc90;">
+                        <p style="font-weight: bold; color: #2e7d32; margin-bottom: 10px;">馃摜 杩斿洖鏁版嵁</p>
+                        <div class="code-wrapper">
+                            <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                            <pre><code>${JSON.stringify(response, null, 2)}</code></pre>
+                        </div>
+                    </div>
+                    <p style="margin-top: 15px; color: #666; padding: 10px; background: #fff; border-radius: 8px; border: 2px solid #49cc90;">馃幆 鎴愬姛鍒涘缓 ${params.tasks.length} 涓惉杩愪换鍔★紝绛夊緟鍒嗛厤鏈哄櫒浜烘墽琛�</p>
+                `;
+        }, 800);
+    }
+
+    // 楠岃瘉浠诲姟鍙栨秷鍙傛暟
+    function validateTaskCancel() {
+        let isValid = true;
+
+        const tasks = document.getElementById('task-cancel-tasks');
+
+        const tasksError = document.getElementById('task-cancel-tasks-error');
+
+        tasks.classList.remove('error');
+
+        tasksError.classList.remove('show');
+
+        if (!tasks.value.trim()) {
+            tasks.classList.add('error');
+            tasksError.classList.add('show');
+            isValid = false;
+        }
+
+        return isValid;
+    }
+
+    // 閲嶇疆浠诲姟鍙栨秷琛ㄥ崟
+    function resetTaskCancelForm() {
+        document.getElementById('task-cancel-tasks').value = 'TASK20231220001,TASK20231220002';
+        document.getElementById('task-cancel-batchNo').value = '12345';
+
+        syncFormToJson('task-cancel');
+
+        const inputs = document.querySelectorAll('#task-cancel-tasks');
+        inputs.forEach(input => input.classList.remove('error'));
+
+        const errors = document.querySelectorAll('[id^="task-cancel-"][id$="-error"]');
+        errors.forEach(error => {
+            error.classList.remove('show');
+            if (error.id === 'task-cancel-tasks-error') error.textContent = '璇疯緭鍏ヨ鍙栨秷鐨勪换鍔$紪鍙�';
+        });
+
+        const resultDiv = document.getElementById('mock-task-cancel-result');
+        resultDiv.classList.remove('show');
+        resultDiv.innerHTML = '';
+    }
+
+    // 楠岃瘉浠诲姟鍙栨秷JSON鍙傛暟
+    function validateTaskCancelJson(params) {
+        const errorDiv = document.getElementById('task-cancel-json-error');
+        
+        if (!params || typeof params !== 'object') {
+            errorDiv.textContent = '璇疯緭鍏ユ湁鏁堢殑JSON鏍煎紡';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (!params.tasks || !Array.isArray(params.tasks) || params.tasks.length === 0) {
+            errorDiv.textContent = 'tasks蹇呴』鏄潪绌烘暟缁�';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        errorDiv.classList.remove('show');
+        return true;
+    }
+
+    // Mock 鍙栨秷浠诲姟
+    function mockTaskCancel() {
+        let params;
+        const isJsonMode = document.getElementById('task-cancel-json-container').classList.contains('active');
+
+        if (isJsonMode) {
+            params = getParamsFromJson('task-cancel-json');
+            if (!params) return;
+            if (!validateTaskCancelJson(params)) return;
+        } else {
+            if (!validateTaskCancel()) return;
+            const formParams = getParamsFromForm('task-cancel');
+            // 灏嗛�楀彿鍒嗛殧鐨勪换鍔$紪鍙峰瓧绗︿覆杞崲涓烘暟缁�
+            params = {
+                tasks: formParams.tasks.split(',').map(task => task.trim()),
+                batchNo: formParams.batchNo
+            };
+        }
+
+        const resultDiv = document.getElementById('mock-task-cancel-result');
+        resultDiv.classList.add('show');
+        resultDiv.innerHTML = '<p style="color: #999;" class="loading">鈴� 姝e湪鍙戦�佽姹�...</p>';
+
+        setTimeout(() => {
+            // 鐢熸垚姣忎釜浠诲姟鐨勫彇娑堢粨鏋�
+            const data = params.tasks.map(taskNo => {
+                // 妯℃嫙闅忔満鐨勫彇娑堢粨鏋�
+                const success = Math.random() > 0.2; // 80%鐨勬鐜囨垚鍔�
+                return {
+                    taskNo: taskNo,
+                    success: success,
+                    msg: success ? null : `${taskNo} 涓嶅瓨鍦ㄦ垨鏃犳硶鍙栨秷`
+                };
+            });
+
+            const response = {
+                code: 200,
+                msg: "浠诲姟鍙栨秷鎴愬姛",
+                data: data,
+                timestamp: new Date().getTime()
+            };
+
+            resultDiv.innerHTML = `
+                    <p style="color: #49cc90; font-weight: bold;" class="success-icon">鉁� 璇锋眰鎴愬姛</p>
+                    <div style="margin-bottom: 20px; padding: 15px; background: #e3f2fd; border-radius: 8px; border-left: 4px solid #2196f3;">
+                        <p style="font-weight: bold; color: #1976d2; margin-bottom: 10px;">馃摛 鍙戦�佹暟鎹�</p>
+                        <div class="code-wrapper">
+                            <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                            <pre><code>${JSON.stringify(params, null, 2)}</code></pre>
+                        </div>
+                    </div>
+                    <div style="padding: 15px; background: #e8f5e9; border-radius: 8px; border-left: 4px solid #49cc90;">
+                        <p style="font-weight: bold; color: #2e7d32; margin-bottom: 10px;">馃摜 杩斿洖鏁版嵁</p>
+                        <div class="code-wrapper">
+                            <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                            <pre><code>${JSON.stringify(response, null, 2)}</code></pre>
+                        </div>
+                    </div>
+                    <p style="margin-top: 15px; color: #666; padding: 10px; background: #e8f5e9; border-radius: 8px; border-left: 4px solid #4caf50;">鉁� 浠诲姟鍙栨秷璇锋眰宸插鐞嗭紝鍏卞彇娑� ${params.tasks.length} 涓换鍔�</p>
+                `;
+        }, 1000);
+    }
+
+    // Mock 浠诲姟鎵ц閫氱煡
+    function mockTaskNotice() {
+        const callbackUrl = document.getElementById('task-notice-callback-url');
+
+        if (!callbackUrl.value.trim()) {
+            callbackUrl.classList.add('error');
+            document.getElementById('task-notice-callback-url-error').classList.add('show');
+            return;
+        } else {
+            callbackUrl.classList.remove('error');
+            document.getElementById('task-notice-callback-url-error').classList.remove('show');
+        }
+
+        const resultDiv = document.getElementById('mock-task-notice-result');
+        resultDiv.classList.add('show');
+        resultDiv.innerHTML = '<p style="color: #999;" class="loading">鈴� 姝e湪鍙戦�佽姹�...</p>';
+
+        const pushData = {
+            taskNo: "TASK20231220001",
+            robotCode: "AGV" + Math.floor(Math.random() * 10 + 1).toString().padStart(3, '0'),
+            finishTime: new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).replace(/\//g, '-')
+        };
+
+        fetch(callbackUrl.value.trim(), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(pushData)
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            resultDiv.innerHTML = `
+                    <p style="color: #49cc90; font-weight: bold;" class="success-icon">鉁� 璇锋眰鎴愬姛</p>
+                    <div style="margin-bottom: 20px; padding: 15px; background: #e3f2fd; border-radius: 8px; border-left: 4px solid #2196f3;">
+                        <p style="font-weight: bold; color: #1976d2; margin-bottom: 10px;">馃摛 鍙戦�佹暟鎹�</p>
+                        <div class="code-wrapper">
+                            <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                            <pre><code>${JSON.stringify(pushData, null, 2)}</code></pre>
+                        </div>
+                    </div>
+                    <div style="padding: 15px; background: #e8f5e9; border-radius: 8px; border-left: 4px solid #49cc90;">
+                        <p style="font-weight: bold; color: #2e7d32; margin-bottom: 10px;">馃摜 杩斿洖鏁版嵁</p>
+                        <div class="code-wrapper">
+                            <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                            <pre><code>${JSON.stringify(data, null, 2)}</code></pre>
+                        </div>
+                    </div>
+                    <p style="margin-top: 15px; color: #666; padding: 10px; background: #e8f5e9; border-radius: 8px; border-left: 4px solid #49cc90;">馃幆 浠诲姟鎵ц閫氱煡宸叉垚鍔熷彂閫�</p>
+                `;
+        })
+        .catch(error => {
+            resultDiv.innerHTML = `
+                    <p style="color: #f44336; font-weight: bold;" class="error-icon">鉁� 璇锋眰澶辫触</p>
+                    <div style="margin-bottom: 20px; padding: 15px; background: #e3f2fd; border-radius: 8px; border-left: 4px solid #2196f3;">
+                        <p style="font-weight: bold; color: #1976d2; margin-bottom: 10px;">馃摛 鍙戦�佹暟鎹�</p>
+                        <div class="code-wrapper">
+                            <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                            <pre><code>${JSON.stringify(pushData, null, 2)}</code></pre>
+                        </div>
+                    </div>
+                    <p style="margin-top: 15px; color: #f44336; padding: 10px; background: #ffebee; border-radius: 8px; border-left: 4px solid #f44336;">
+                        鉂� 閿欒淇℃伅锛�<strong>${error.message}</strong>
+                    </p>
+                    <p style="margin-top: 10px; color: #999; font-size: 12px;">鎻愮ず锛氳纭繚鍥炶皟鍦板潃鍙闂紝涓旀湇鍔″櫒宸插惎鍔ㄥ苟鏀寔CORS璺ㄥ煙璇锋眰</p>
+                `;
+        });
+    }
+
+    function resetTaskNoticeForm() {
+        document.getElementById('task-notice-callback-url').value = 'http://localhost:8080/api/callback';
+
+        document.getElementById('mock-task-notice-result').classList.remove('show');
+        document.getElementById('mock-task-notice-result').innerHTML = '';
+
+        const inputs = document.querySelectorAll('#api-task-notice input');
+        inputs.forEach(input => input.classList.remove('error'));
+        const errors = document.querySelectorAll('#api-task-notice .error-message');
+        errors.forEach(error => error.classList.remove('show'));
+    }
+
+    // 楠岃瘉搴撲綅鐘舵�佷慨鏀瑰弬鏁�
+    function validateLocStatus() {
+        let isValid = true;
+        const locCode = document.getElementById('loc-status-locCode');
+        const status = document.getElementById('loc-status-status');
+
+        if (!locCode.value.trim()) {
+            locCode.classList.add('error');
+            document.getElementById('loc-status-locCode-error').classList.add('show');
+            isValid = false;
+        } else {
+            locCode.classList.remove('error');
+            document.getElementById('loc-status-locCode-error').classList.remove('show');
+        }
+
+        if (!status.value) {
+            status.classList.add('error');
+            document.getElementById('loc-status-status-error').classList.add('show');
+            isValid = false;
+        } else {
+            status.classList.remove('error');
+            document.getElementById('loc-status-status-error').classList.remove('show');
+        }
+
+        return isValid;
+    }
+
+    function validateLocStatusJson(params) {
+        const errorDiv = document.getElementById('loc-status-json-error');
+        
+        if (!params || typeof params !== 'object') {
+            errorDiv.textContent = '璇疯緭鍏ユ湁鏁堢殑JSON鏍煎紡';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (!params.locCode || !params.locCode.trim()) {
+            errorDiv.textContent = 'locCode涓嶈兘涓虹┖';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (!params.status || !params.status.toString().trim()) {
+            errorDiv.textContent = 'status涓嶈兘涓虹┖';
+            errorDiv.classList.add('show');
+            return false;
+        } else {
+            const statusValue = params.status.toString().trim();
+            if (!['0', '1', '2', '3'].includes(statusValue)) {
+                errorDiv.textContent = 'status蹇呴』鏄�0-3涔嬮棿鐨勬暟瀛楋紙0-绂佺敤銆�1-鍚敤銆�2-鍦ㄥ簱銆�3-绌哄簱浣嶏級';
+                errorDiv.classList.add('show');
+                return false;
+            }
+        }
+
+        errorDiv.classList.remove('show');
+        return true;
+    }
+
+    // 閲嶇疆搴撲綅鐘舵�佷慨鏀硅〃鍗�
+    function resetLocStatusForm() {
+        document.getElementById('loc-status-locCode').value = 'A100100101';
+        document.getElementById('loc-status-status').value = '1';
+
+        syncFormToJson('loc-status');
+
+        document.getElementById('mock-loc-status-result').classList.remove('show');
+        document.getElementById('mock-loc-status-result').innerHTML = '';
+
+        const inputs = document.querySelectorAll('#loc-status-form-container input, #loc-status-form-container select');
+        inputs.forEach(input => input.classList.remove('error'));
+        const errors = document.querySelectorAll('#loc-status-form-container .error-message');
+        errors.forEach(error => error.classList.remove('show'));
+
+        const jsonError = document.getElementById('loc-status-json-error');
+        if (jsonError) jsonError.classList.remove('show');
+    }
+
+    // 楠岃瘉浠诲姟浼樺厛绾у弬鏁�
+    function validateTaskPriority() {
+        let isValid = true;
+
+        const taskNo = document.getElementById('task-priority-taskNo');
+        const priority = document.getElementById('task-priority-priority');
+
+        const taskNoError = document.getElementById('task-priority-taskNo-error');
+        const priorityError = document.getElementById('task-priority-priority-error');
+
+        taskNo.classList.remove('error');
+        priority.classList.remove('error');
+
+        taskNoError.classList.remove('show');
+        priorityError.classList.remove('show');
+
+        if (!taskNo.value.trim()) {
+            taskNo.classList.add('error');
+            taskNoError.classList.add('show');
+            isValid = false;
+        }
+
+        if (!priority.value.trim()) {
+            priority.classList.add('error');
+            priorityError.classList.add('show');
+            isValid = false;
+        } else {
+            const priorityNum = parseInt(priority.value.trim());
+            if (isNaN(priorityNum) || priorityNum < 1 || priorityNum > 300) {
+                priority.classList.add('error');
+                priorityError.textContent = '浼樺厛绾у繀椤绘槸1-300鐨勬暟瀛�';
+                priorityError.classList.add('show');
+                isValid = false;
+            }
+        }
+
+        return isValid;
+    }
+
+    // 閲嶇疆浠诲姟浼樺厛绾ц〃鍗�
+    function resetTaskPriorityForm() {
+        document.getElementById('task-priority-taskNo').value = 'TASK20231220001';
+        document.getElementById('task-priority-priority').value = '2';
+
+        syncFormToJson('task-priority');
+
+        const inputs = document.querySelectorAll('#task-priority-taskNo, #task-priority-priority');
+        inputs.forEach(input => input.classList.remove('error'));
+
+        const errors = document.querySelectorAll('[id^="task-priority-"][id$="-error"]');
+        errors.forEach(error => {
+            error.classList.remove('show');
+            if (error.id === 'task-priority-taskNo-error') error.textContent = '璇疯緭鍏ヤ换鍔$紪鍙�';
+            if (error.id === 'task-priority-priority-error') error.textContent = '璇疯緭鍏ヤ紭鍏堢骇锛�1-300锛�';
+        });
+
+        const resultDiv = document.getElementById('mock-task-priority-result');
+        resultDiv.classList.remove('show');
+        resultDiv.innerHTML = '';
+    }
+
+    // 楠岃瘉浠诲姟浼樺厛绾SON鍙傛暟
+    function validateTaskPriorityJson(params) {
+        const errorDiv = document.getElementById('task-priority-json-error');
+        
+        if (!params || typeof params !== 'object') {
+            errorDiv.textContent = '璇疯緭鍏ユ湁鏁堢殑JSON鏍煎紡';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (!params.taskNo || !params.taskNo.trim()) {
+            errorDiv.textContent = 'taskNo涓嶈兘涓虹┖';
+            errorDiv.classList.add('show');
+            return false;
+        }
+
+        if (!params.priority || !params.priority.toString().trim()) {
+            errorDiv.textContent = 'priority涓嶈兘涓虹┖';
+            errorDiv.classList.add('show');
+            return false;
+        } else {
+            const priorityNum = parseInt(params.priority.toString().trim());
+            if (isNaN(priorityNum) || priorityNum < 1 || priorityNum > 300) {
+                errorDiv.textContent = 'priority蹇呴』鏄�1-300鐨勬暟瀛�';
+                errorDiv.classList.add('show');
+                return false;
+            }
+        }
+
+        errorDiv.classList.remove('show');
+        return true;
+    }
+
+    // Mock 浠诲姟浼樺厛绾ц缃�
+    function mockTaskPriority() {
+        let params;
+        const isJsonMode = document.getElementById('task-priority-json-container').classList.contains('active');
+
+        if (isJsonMode) {
+            params = getParamsFromJson('task-priority-json');
+            if (!params) return;
+            if (!validateTaskPriorityJson(params)) return;
+        } else {
+            if (!validateTaskPriority()) return;
+            params = getParamsFromForm('task-priority');
+        }
+
+        const taskNo = params.taskNo;
+        const priority = params.priority;
+
+        const resultDiv = document.getElementById('mock-task-priority-result');
+        resultDiv.classList.add('show');
+        resultDiv.innerHTML = '<p style="color: #999;" class="loading">鈴� 姝e湪鍙戦�佽姹�...</p>';
+
+        setTimeout(() => {
+            const response = {
+                code: 200,
+                message: "璇锋眰鎴愬姛",
+                data: {
+                    taskNo: taskNo,
+                    priority: priority
+                },
+                timestamp: new Date().getTime()
+            };
+
+            const priorityNum = parseInt(priority);
+            let priorityInfo;
+            if (priorityNum <= 100) {
+                priorityInfo = {text: '浣�', color: '#9e9e9e', icon: '猬囷笍'};
+            } else if (priorityNum <= 200) {
+                priorityInfo = {text: '涓�', color: '#2196f3', icon: '鉃★笍'};
+            } else {
+                priorityInfo = {text: '楂�', color: '#f44336', icon: '猬嗭笍'};
+            }
+
+            resultDiv.innerHTML = `
+                    <p style="color: #49cc90; font-weight: bold;" class="success-icon">鉁� 璇锋眰鎴愬姛</p>
+                    <div class="code-wrapper">
+                        <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                        <pre><code>${JSON.stringify(response, null, 2)}</code></pre>
+                    </div>
+                    <p style="margin-top: 15px; color: #666; padding: 10px; background: #f5f5f5; border-radius: 8px; border-left: 4px solid ${priorityInfo.color};">
+                        ${priorityInfo.icon} 浠诲姟浼樺厛绾у凡璁剧疆涓猴細<strong style="color: ${priorityInfo.color};">${priorityInfo.text}</strong>
+                    </p>
+                `;
+        }, 600);
+    }
+
+    // Mock 搴撲綅鐘舵�佷慨鏀�
+    function mockLocStatus() {
+        let params;
+        const isJsonMode = document.getElementById('loc-status-json-container').classList.contains('active');
+
+        if (isJsonMode) {
+            params = getParamsFromJson('loc-status-json');
+            if (!params) return;
+            if (!validateLocStatusJson(params)) return;
+        } else {
+            if (!validateLocStatus()) return;
+            params = getParamsFromForm('loc-status');
+        }
+
+        const resultDiv = document.getElementById('mock-loc-status-result');
+        resultDiv.classList.add('show');
+        resultDiv.innerHTML = '<p style="color: #999;" class="loading">鈴� 姝e湪鍙戦�佽姹�...</p>';
+
+        setTimeout(() => {
+            const locCode = params.locCode;
+            const status = params.status;
+
+            const response = {
+                code: 200,
+                message: "搴撲綅鐘舵�佷慨鏀规垚鍔�",
+                timestamp: new Date().getTime()
+            };
+
+            const statusMap = {
+                '0': {text: '绂佺敤', color: '#f44336', icon: '馃毇'},
+                '1': {text: '鍚敤', color: '#4caf50', icon: '鉁�'},
+                '2': {text: '鍦ㄥ簱', color: '#ff9800', icon: '馃摝'},
+                '3': {text: '绌哄簱浣�', color: '#2196f3', icon: '猬�'}
+            };
+
+            const statusInfo = statusMap[status];
+
+            resultDiv.innerHTML = `
+                    <p style="color: #49cc90; font-weight: bold;" class="success-icon">鉁� 璇锋眰鎴愬姛</p>
+                    <div class="code-wrapper">
+                        <button class="copy-btn" onclick="copyCode(this)">馃搵 澶嶅埗</button>
+                        <pre><code>${JSON.stringify(response, null, 2)}</code></pre>
+                    </div>
+                    <p style="margin-top: 15px; color: #666; padding: 10px; background: #f5f5f5; border-radius: 8px; border-left: 4px solid ${statusInfo.color};">
+                        ${statusInfo.icon} 搴撲綅 <strong>${locCode}</strong> 鐘舵�侊細<strong style="color: ${statusInfo.color};">${statusInfo.text}</strong>
+                    </p>
+                `;
+        }, 700);
+    }
+
+    
+
+    // 澶嶅埗浠g爜鍔熻兘
+    function copyCode(button) {
+        const codeBlock = button.nextElementSibling.querySelector('code');
+        const text = codeBlock.textContent;
+
+        navigator.clipboard.writeText(text).then(() => {
+            const originalText = button.innerHTML;
+            button.innerHTML = '鉁� 宸插鍒�';
+            button.style.background = 'rgba(73, 204, 144, 0.2)';
+            button.style.borderColor = 'rgba(73, 204, 144, 0.4)';
+            button.style.color = '#49cc90';
+
+            setTimeout(() => {
+                button.innerHTML = originalText;
+                button.style.background = 'rgba(255, 255, 255, 0.1)';
+                button.style.borderColor = 'rgba(255, 255, 255, 0.2)';
+                button.style.color = '#d4d4d4';
+            }, 2000);
+        }).catch(err => {
+            console.error('澶嶅埗澶辫触:', err);
+        });
+    }
+
+    function toggleMockContent(button) {
+        const content = button.nextElementSibling;
+        if (content.classList.contains('expanded')) {
+            content.classList.remove('expanded');
+            content.classList.add('collapsed');
+            button.textContent = '灞曞紑';
+        } else {
+            content.classList.remove('collapsed');
+            content.classList.add('expanded');
+            button.textContent = '鎶樺彔';
+        }
+    }
+
+    // 鐩戝惉婊氬姩娑堟伅
+    window.addEventListener('message', function (event) {
+        if (event.data.type === 'scrollToSection') {
+            const targetElement = document.getElementById(event.data.sectionId);
+            if (targetElement) {
+                targetElement.scrollIntoView({behavior: 'smooth', block: 'start'});
+            }
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/open-rcs/components/content/content-platform-intro.html b/open-rcs/components/content/content-platform-intro.html
new file mode 100644
index 0000000..f92bc93
--- /dev/null
+++ b/open-rcs/components/content/content-platform-intro.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background-color: #fff;
+            padding: 30px;
+            line-height: 1.8;
+        }
+
+        .breadcrumb {
+            font-size: 14px;
+            color: #999;
+            margin-bottom: 20px;
+        }
+
+        .breadcrumb a {
+            color: #999;
+            text-decoration: none;
+        }
+
+        .update-time {
+            float: right;
+            color: #ccc;
+            font-size: 12px;
+        }
+
+        h1 {
+            font-size: 28px;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        h2 {
+            font-size: 20px;
+            margin: 30px 0 20px;
+            color: #333;
+        }
+
+        .content-text {
+            line-height: 1.8;
+            color: #666;
+            margin-bottom: 20px;
+        }
+
+        .feedback-section {
+            margin: 40px 0;
+            text-align: center;
+        }
+
+        .stars {
+            margin: 20px 0;
+        }
+
+        .stars span {
+            font-size: 30px;
+            margin: 0 10px;
+            color: #ddd;
+            cursor: pointer;
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 60px;
+            padding-top: 30px;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        .pagination > div {
+            cursor: pointer;
+            max-width: 45%;
+        }
+
+        .pagination > div:hover {
+            color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+<div class="breadcrumb">
+    <a href="#">骞冲彴浠嬬粛</a> > 鍚嶈瘝瑙i噴
+    <span class="update-time">鏇存柊鏃堕棿锛�2021-10-26 12:36:17</span>
+</div>
+
+<h1>鍚嶈瘝瑙i噴</h1>
+
+
+<div class="feedback-section">
+    <p style="color: #999;">浠ヤ笂鍐呭瀵规偍鏈夊府鍔╁悧?</p>
+    <div class="stars">
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+    </div>
+</div>
+
+<div class="pagination">
+    <div class="prev-page">
+        <div style="color: #999; font-size: 14px; margin-bottom: 10px;">涓婁竴绡�</div>
+        <div style="color: #333; font-size: 16px;">浜у搧鏀寔鍦烘櫙鑷姩鍖�</div>
+    </div>
+    <div class="next-page">
+        <div style="color: #999; font-size: 14px; margin-bottom: 10px; text-align: right;">涓嬩竴绡�</div>
+        <div style="color: #333; font-size: 16px; text-align: right;">寮�鍙戣�呭崗璁�</div>
+    </div>
+</div>
+
+<script>
+    // 鐩戝惉鏉ヨ嚜鐖堕〉闈㈢殑婊氬姩娑堟伅
+    window.addEventListener('message', function (event) {
+        if (event.data.type === 'scrollTo') {
+            const targetElement = document.getElementById(event.data.sectionId);
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/open-rcs/components/content/content-platform-spec.html b/open-rcs/components/content/content-platform-spec.html
new file mode 100644
index 0000000..e55ab81
--- /dev/null
+++ b/open-rcs/components/content/content-platform-spec.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background-color: #fff;
+            padding: 30px;
+            line-height: 1.8;
+        }
+
+        .breadcrumb {
+            font-size: 14px;
+            color: #999;
+            margin-bottom: 20px;
+        }
+
+        .breadcrumb a {
+            color: #999;
+            text-decoration: none;
+        }
+
+        .update-time {
+            float: right;
+            color: #ccc;
+            font-size: 12px;
+        }
+
+        h1 {
+            font-size: 28px;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        h2 {
+            font-size: 20px;
+            margin: 30px 0 20px;
+            color: #333;
+        }
+
+        .content-text {
+            line-height: 1.8;
+            color: #666;
+            margin-bottom: 20px;
+        }
+
+        ul.feature-list {
+            list-style: none;
+            padding-left: 20px;
+        }
+
+        ul.feature-list li {
+            position: relative;
+            padding-left: 20px;
+            margin-bottom: 10px;
+            line-height: 1.8;
+            color: #666;
+        }
+
+        ul.feature-list li:before {
+            content: "鈻�";
+            position: absolute;
+            left: 0;
+            color: #333;
+        }
+
+        .feedback-section {
+            margin: 40px 0;
+            text-align: center;
+        }
+
+        .stars {
+            margin: 20px 0;
+        }
+
+        .stars span {
+            font-size: 30px;
+            margin: 0 10px;
+            color: #ddd;
+            cursor: pointer;
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 60px;
+            padding-top: 30px;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        .pagination > div {
+            cursor: pointer;
+            max-width: 45%;
+        }
+
+        .pagination > div:hover {
+            color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+<div class="breadcrumb">
+    <a href="#">骞冲彴瑙勮寖</a> > 寮�鍙戣鑼�
+    <span class="update-time">鏇存柊鏃堕棿锛�2021-12-15 10:30:00</span>
+</div>
+
+<h1>骞冲彴瑙勮寖</h1>
+
+
+<div class="feedback-section">
+    <p style="color: #999;">浠ヤ笂鍐呭瀵规偍鏈夊府鍔╁悧?</p>
+    <div class="stars">
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+        <span>鈽�</span>
+    </div>
+</div>
+
+<div class="pagination">
+    <div class="prev-page">
+        <div style="color: #999; font-size: 14px; margin-bottom: 10px;">涓婁竴绡�</div>
+        <div style="color: #333; font-size: 16px;">鍚嶈瘝瑙i噴</div>
+    </div>
+    <div class="next-page">
+        <div style="color: #999; font-size: 14px; margin-bottom: 10px; text-align: right;">涓嬩竴绡�</div>
+        <div style="color: #333; font-size: 16px; text-align: right;">浜у搧鎺ュ叆寮曞</div>
+    </div>
+</div>
+
+<script>
+    window.addEventListener('message', function (event) {
+        if (event.data.type === 'scrollTo') {
+            const targetElement = document.getElementById(event.data.sectionId);
+            if (targetElement) {
+                targetElement.scrollIntoView({behavior: 'smooth', block: 'start'});
+            }
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/open-rcs/components/header/header.html b/open-rcs/components/header/header.html
new file mode 100644
index 0000000..e5ab761
--- /dev/null
+++ b/open-rcs/components/header/header.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background-color: #fff;
+        }
+
+        /* 澶撮儴 */
+        header {
+            background-color: #fff;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .top-bar {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 10px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            font-size: 20px;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .top-nav {
+            display: flex;
+            gap: 30px;
+            align-items: center;
+        }
+
+        .top-nav a {
+            text-decoration: none;
+            color: #666;
+            font-size: 14px;
+        }
+
+        .top-nav a:hover {
+            color: #0066cc;
+        }
+
+        .doc-link {
+            color: #0066cc !important;
+        }
+
+        /* 涓诲鑸� */
+        .main-nav {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 20px;
+            display: flex;
+            gap: 40px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        .main-nav a {
+            display: block;
+            padding: 15px 0;
+            text-decoration: none;
+            color: #333;
+            font-size: 15px;
+            border-bottom: 2px solid transparent;
+        }
+
+        .main-nav a:hover,
+        .main-nav a.active {
+            color: #0066cc;
+            border-bottom-color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+<header>
+    <div class="top-bar">
+        <div class="logo">涓壃RCS寮�鏀惧钩鍙�</div>
+        <!--            <div class="top-nav">-->
+        <!--                <a href="#">棣栭〉</a>-->
+        <!--                <a href="#" class="doc-link">鏂囨。涓績</a>-->
+        <!--                <a href="#">馃攳</a>-->
+        <!--                <a href="#">鎺у埗鍙�</a>-->
+        <!--                <a href="#">鍏嶈垂娉ㄥ唽</a>-->
+        <!--            </div>-->
+    </div>
+    <nav class="main-nav">
+        <!--            <a href="javascript:void(0);" class="tab-link active" data-tab="platform-intro" onclick="sendMessage('platform-intro'); return false;">骞冲彴浠嬬粛</a>-->
+        <!--            <a href="javascript:void(0);" class="tab-link" data-tab="platform-spec" onclick="sendMessage('platform-spec'); return false;">骞冲彴瑙勮寖</a>-->
+        <a href="javascript:void(0);" class="tab-link active" data-tab="interface-word"
+           onclick="sendMessage('interface-word'); return false;">鎺ュ彛鏂囨。</a>
+        <!--            <a href="javascript:void(0);" class="tab-link" data-tab="app-guide" onclick="sendMessage('app-guide'); return false;">搴旂敤鎺ュ叆寮曞</a>-->
+        <!--            <a href="javascript:void(0);" class="tab-link" data-tab="device-dev" onclick="sendMessage('device-dev'); return false;">璁惧寮�鍙�</a>-->
+        <!--            <a href="javascript:void(0);" class="tab-link" data-tab="app-dev" onclick="sendMessage('app-dev'); return false;">搴旂敤寮�鍙�</a>-->
+        <!--            <a href="javascript:void(0);" class="tab-link" data-tab="cloud-old" onclick="sendMessage('cloud-old'); return false;">浜戞湇鍔″紑鍙�(鏃�)</a>-->
+        <!--            <a href="javascript:void(0);" class="tab-link" data-tab="cloud-new" onclick="sendMessage('cloud-new'); return false;">浜戞湇鍔″紑鍙�(鏂�)</a>-->
+        <!--            <a href="javascript:void(0);" class="tab-link" data-tab="dev-tools" onclick="sendMessage('dev-tools'); return false;">寮�鍙戣�呭伐鍏�</a>-->
+        <!--            <a href="javascript:void(0);" class="tab-link" data-tab="data-center" onclick="sendMessage('data-center'); return false;">鏁版嵁涓績</a>-->
+    </nav>
+</header>
+
+<script>
+    // 鍙戦�佹秷鎭埌鐖堕〉闈�
+    function sendMessage(tabName) {
+        console.log('鍙戦�佹秷鎭�:', tabName);
+        window.parent.postMessage({
+            type: 'switchTab',
+            tab: tabName
+        }, '*');
+    }
+
+    // 鐩戝惉鐖堕〉闈㈠彂鏉ョ殑娑堟伅锛屾洿鏂癮ctive鐘舵��
+    window.addEventListener('message', function (e) {
+        if (e.data.type === 'updateTab') {
+            document.querySelectorAll('.tab-link').forEach(link => {
+                link.classList.remove('active');
+                if (link.getAttribute('data-tab') === e.data.tab) {
+                    link.classList.add('active');
+                }
+            });
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/open-rcs/components/rightsidebar/rightsidebar-interface-word.html b/open-rcs/components/rightsidebar/rightsidebar-interface-word.html
new file mode 100644
index 0000000..eaf0907
--- /dev/null
+++ b/open-rcs/components/rightsidebar/rightsidebar-interface-word.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background: linear-gradient(135deg, #ffffff, #f8f9fa);
+            padding: 20px;
+        }
+
+        h3 {
+            font-size: 16px;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #e0e0e0;
+            color: #333;
+            font-weight: 700;
+            position: relative;
+        }
+
+        h3::before {
+            content: '馃摑';
+            margin-right: 8px;
+        }
+
+        h3::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 30px;
+            height: 2px;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+        }
+
+        ul {
+            list-style: none;
+        }
+
+        ul li {
+            padding: 10px 12px;
+            cursor: pointer;
+            color: #555;
+            font-size: 14px;
+            border-radius: 6px;
+            margin-bottom: 4px;
+            transition: all 0.3s ease;
+            position: relative;
+            padding-left: 25px;
+        }
+
+        ul li::before {
+            content: '鈻�';
+            position: absolute;
+            left: 10px;
+            color: #0066cc;
+            font-size: 10px;
+            transition: all 0.3s ease;
+        }
+
+        ul li:hover {
+            background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
+            padding-left: 30px;
+            box-shadow: 0 2px 6px rgba(102, 126, 234, 0.1);
+        }
+
+        ul li:hover::before {
+            left: 12px;
+            color: #667eea;
+        }
+
+        ul li a {
+            color: #555;
+            text-decoration: none;
+            display: block;
+            font-weight: 500;
+            transition: color 0.3s ease;
+        }
+
+        ul li a:hover {
+            color: #667eea;
+            font-weight: 600;
+        }
+
+        /* 婊氬姩鏉$編鍖� */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #764ba2, #667eea);
+        }
+    </style>
+</head>
+<body>
+<h3>鏈〉鍐呭</h3>
+<ul>
+    <li><a href="javascript:void(0);" onclick="scrollToSection('api-overview'); return false;">鎺ュ彛姒傝</a></li>
+    <li><a href="javascript:void(0);" onclick="scrollToSection('api-task-create'); return false;">鐢熸垚浠诲姟鍗�*</a></li>
+    <li><a href="javascript:void(0);" onclick="scrollToSection('api-task-cancel'); return false;">鍙栨秷浠诲姟鍗�*</a></li>
+    <li><a href="javascript:void(0);" onclick="scrollToSection('api-task-notice'); return false;">浠诲姟鎵ц閫氱煡*</a></li>
+    <li><a href="javascript:void(0);" onclick="scrollToSection('api-task-priority'); return false;">鐢宠鍏ュ簱浠诲姟*</a></li>
+    <!-- <li><a href="javascript:void(0);" onclick="scrollToSection('api-loc-status'); return false;">搴撲綅鐘舵�佷慨鏀�</a></li> -->
+    <li><a href="javascript:void(0);" onclick="scrollToSection('error-codes'); return false;">閿欒鐮佽鏄�</a></li>
+</ul>
+
+<script>
+    function scrollToSection(sectionId) {
+        window.parent.postMessage({
+            type: 'scrollToSection',
+            sectionId: sectionId
+        }, '*');
+    }
+</script>
+</body>
+</html>
diff --git a/open-rcs/components/rightsidebar/rightsidebar-platform-intro.html b/open-rcs/components/rightsidebar/rightsidebar-platform-intro.html
new file mode 100644
index 0000000..d2a4178
--- /dev/null
+++ b/open-rcs/components/rightsidebar/rightsidebar-platform-intro.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background-color: #fff;
+            padding: 20px;
+        }
+
+        h3 {
+            font-size: 16px;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        ul {
+            list-style: none;
+        }
+
+        ul li {
+            padding: 8px 0;
+            cursor: pointer;
+            color: #666;
+            font-size: 14px;
+        }
+
+        ul li a {
+            color: #666;
+            text-decoration: none;
+            display: block;
+        }
+
+        ul li a:hover {
+            color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+<h3>鏈〉鍐呭</h3>
+<ul>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('enterprise-admin'); return false;">浼佷笟绠$悊鍛�</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('enterprise-member'); return false;">浼佷笟鎴愬憳</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('device'); return false;">璁惧</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('product'); return false;">浜у搧</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('user-id'); return false;">寮�鍙戣�呰幏鍙朥ser ID</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('iot-enable'); return false;">鐗╄仈浣胯兘</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('dev-board'); return false;">娴峰皵璁惧寮�鍙戞澘</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('dev-kit'); return false;">鑱斿寮�鍙戣�呭浠�</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('firmware'); return false;">鍥轰欢</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('hw-direct'); return false;">纭欢鐩磋繛鎺ュ叆</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('hw-cloud'); return false;">纭欢浜戝浜戞帴鍏�</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('app-access'); return false;">搴旂敤&搴旂敤鎺ュ叆</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('sw-modeling'); return false;">杞欢寤烘ā</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('typeid'); return false;">TYPEID</a></li>
+</ul>
+
+<script>
+    function sendScrollMessage(sectionId) {
+        window.parent.postMessage({
+            type: 'scrollToSection',
+            sectionId: sectionId
+        }, '*');
+    }
+</script>
+</body>
+</html>
diff --git a/open-rcs/components/rightsidebar/rightsidebar-platform-spec.html b/open-rcs/components/rightsidebar/rightsidebar-platform-spec.html
new file mode 100644
index 0000000..670aa3e
--- /dev/null
+++ b/open-rcs/components/rightsidebar/rightsidebar-platform-spec.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background-color: #fff;
+            padding: 20px;
+        }
+
+        h3 {
+            font-size: 16px;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        ul {
+            list-style: none;
+        }
+
+        ul li {
+            padding: 8px 0;
+            cursor: pointer;
+            color: #666;
+            font-size: 14px;
+        }
+
+        ul li a {
+            color: #666;
+            text-decoration: none;
+            display: block;
+        }
+
+        ul li a:hover {
+            color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+<h3>鏈〉鍐呭</h3>
+<ul>
+    <li><a href="javascript:void(0);" onclick="parent.scrollToSection('dev-spec'); return false;">寮�鍙戣鑼�</a></li>
+    <li><a href="javascript:void(0);" onclick="parent.scrollToSection('security-spec'); return false;">瀹夊叏瑙勮寖</a></li>
+    <li><a href="javascript:void(0);" onclick="parent.scrollToSection('data-spec'); return false;">鏁版嵁瑙勮寖</a></li>
+    <li><a href="javascript:void(0);" onclick="parent.scrollToSection('api-spec'); return false;">鎺ュ彛瑙勮寖</a></li>
+</ul>
+</body>
+</html>
diff --git a/open-rcs/components/sidebar/sidebar-interface-word.html b/open-rcs/components/sidebar/sidebar-interface-word.html
new file mode 100644
index 0000000..f989e47
--- /dev/null
+++ b/open-rcs/components/sidebar/sidebar-interface-word.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background: linear-gradient(135deg, #ffffff, #f8f9fa);
+            padding: 20px;
+        }
+
+        h3 {
+            font-size: 18px;
+            background: linear-gradient(135deg, #0066cc, #00c6ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+            cursor: pointer;
+            font-weight: 700;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #e0e0e0;
+            position: relative;
+        }
+
+        h3::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 40px;
+            height: 2px;
+            background: linear-gradient(90deg, #0066cc, #00c6ff);
+        }
+
+        .sidebar-menu {
+            list-style: none;
+        }
+
+        /* 涓�绾ц彍鍗曢」 */
+        .sidebar-menu > li {
+            padding: 12px 15px;
+            cursor: pointer;
+            color: #555;
+            font-size: 14px;
+            border-radius: 8px;
+            margin-bottom: 5px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            font-weight: 600;
+        }
+
+        .sidebar-menu > li::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 3px;
+            background: linear-gradient(180deg, #0066cc, #00c6ff);
+            transform: scaleY(0);
+            transition: transform 0.3s ease;
+        }
+
+        .sidebar-menu > li:hover {
+            background: linear-gradient(135deg, #e8f4ff, #d4e9ff);
+            box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
+        }
+
+        .sidebar-menu > li:hover::before {
+            transform: scaleY(1);
+        }
+
+        .sidebar-menu > li.active {
+            background: linear-gradient(135deg, #0066cc, #0052a3);
+            color: #fff;
+            box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
+        }
+
+        /* 浜岀骇鑿滃崟瀹瑰櫒 */
+        .submenu {
+            list-style: none;
+            margin-top: 5px;
+            margin-left: 10px;
+            margin-bottom: 10px;
+            display: none;
+        }
+
+        /* 灞曞紑鐨勪簩绾ц彍鍗� */
+        .submenu.expanded {
+            display: block;
+        }
+
+        /* 浜岀骇鑿滃崟椤� */
+        .submenu li {
+            padding: 8px 15px;
+            cursor: pointer;
+            color: #666;
+            font-size: 13px;
+            border-radius: 6px;
+            margin-bottom: 3px;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+
+        .submenu li:hover {
+            background: rgba(0, 102, 204, 0.08);
+            padding-left: 20px;
+        }
+
+        .submenu li.active {
+            background: rgba(0, 102, 204, 0.15);
+            color: #0066cc;
+            font-weight: 500;
+        }
+
+        /* 鑿滃崟閾炬帴 */
+        .sidebar-menu a {
+            color: inherit;
+            text-decoration: none;
+            display: block;
+            transition: color 0.3s ease;
+        }
+
+        /* 灞曞紑/鎶樺彔鍥炬爣 */
+        .menu-toggle {
+            float: right;
+            font-size: 12px;
+            transition: transform 0.3s ease;
+        }
+
+        .menu-toggle.expanded {
+            transform: rotate(90deg);
+        }
+
+        /* 婊氬姩鏉$編鍖� */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #764ba2, #667eea);
+        }
+    </style>
+</head>
+<body>
+<h3>RCS鎺ュ彛鏂囨。</h3>
+<ul class="sidebar-menu">
+    <!-- 姒傝绫� -->
+    <li onclick="toggleSubmenu(this)">
+        姒傝
+        <span class="menu-toggle expanded">鈻�</span>
+        <ul class="submenu expanded">
+            <li><a href="javascript:void(0);" onclick="scrollToSection('api-overview'); event.stopPropagation(); return false;">鎺ュ彛姒傝</a></li>
+            <li><a href="javascript:void(0);" onclick="scrollToSection('error-codes'); event.stopPropagation(); return false;">閿欒鐮佽鏄�</a></li>
+        </ul>
+    </li>
+    
+    <!-- 浠诲姟绠$悊绫� -->
+    <li onclick="toggleSubmenu(this)">
+        浠诲姟绠$悊
+        <span class="menu-toggle">鈻�</span>
+        <ul class="submenu expanded">
+            <li><a href="javascript:void(0);" onclick="scrollToSection('api-task-create'); event.stopPropagation(); return false;">鐢熸垚浠诲姟鍗�*</a></li>
+            <li><a href="javascript:void(0);" onclick="scrollToSection('api-task-cancel'); event.stopPropagation(); return false;">鍙栨秷浠诲姟*</a></li>
+            <li><a href="javascript:void(0);" onclick="scrollToSection('api-task-notice'); event.stopPropagation(); return false;">浠诲姟鎵ц閫氱煡*</a></li>
+            <li><a href="javascript:void(0);" onclick="scrollToSection('api-task-priority'); event.stopPropagation(); return false;">鐢宠鍏ュ簱浠诲姟*</a></li>
+        </ul>
+    </li>
+    
+    <!-- 璁惧绠$悊绫� -->
+    <!-- <li onclick="toggleSubmenu(this)">
+        璁惧绠$悊
+        <span class="menu-toggle">鈻�</span>
+        <ul class="submenu expanded">
+            <li><a href="javascript:void(0);" onclick="scrollToSection('api-loc-status'); event.stopPropagation(); return false;">搴撲綅鐘舵�佷慨鏀�</a></li>
+        </ul>
+    </li> -->
+</ul>
+
+<script>
+    // 鍒囨崲浜岀骇鑿滃崟灞曞紑/鎶樺彔
+    function toggleSubmenu(element) {
+        const submenu = element.querySelector('.submenu');
+        const menuToggle = element.querySelector('.menu-toggle');
+        
+        if (submenu) {
+            submenu.classList.toggle('expanded');
+        }
+        
+        if (menuToggle) {
+            menuToggle.classList.toggle('expanded');
+        }
+    }
+
+    // 婊氬姩鍒版寚瀹氱珷鑺�
+    function scrollToSection(sectionId) {
+        window.parent.postMessage({
+            type: 'scrollToSection',
+            sectionId: sectionId
+        }, '*');
+    }
+</script>
+</body>
+</html>
diff --git a/open-rcs/components/sidebar/sidebar-platform-intro.html b/open-rcs/components/sidebar/sidebar-platform-intro.html
new file mode 100644
index 0000000..b378975
--- /dev/null
+++ b/open-rcs/components/sidebar/sidebar-platform-intro.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background-color: #fff;
+            padding: 20px;
+        }
+
+        h3 {
+            font-size: 16px;
+            color: #0066cc;
+            margin-bottom: 20px;
+            cursor: pointer;
+        }
+
+        .sidebar-menu {
+            list-style: none;
+        }
+
+        .sidebar-menu li {
+            padding: 10px 0;
+            cursor: pointer;
+            color: #666;
+            font-size: 14px;
+        }
+
+        .sidebar-menu li a {
+            color: #666;
+            text-decoration: none;
+            display: block;
+        }
+
+        .sidebar-menu li a:hover {
+            color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+<h3>鍚嶈瘝瑙i噴</h3>
+<ul class="sidebar-menu">
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('enterprise-admin'); return false;">浼佷笟绠$悊鍛�</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('enterprise-member'); return false;">浼佷笟鎴愬憳</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('device'); return false;">璁惧</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('product'); return false;">浜у搧</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('user-id'); return false;">寮�鍙戣�呰幏鍙朥ser ID</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('iot-enable'); return false;">鐗╄仈浣胯兘</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('dev-board'); return false;">娴峰皵璁惧寮�鍙戞澘</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('dev-kit'); return false;">鑱斿寮�鍙戣�呭浠�</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('firmware'); return false;">鍥轰欢</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('hw-direct'); return false;">纭欢鐩磋繛鎺ュ叆</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('hw-cloud'); return false;">纭欢浜戝浜戞帴鍏�</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('app-access'); return false;">搴旂敤&搴旂敤鎺ュ叆</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('sw-modeling'); return false;">杞欢寤烘ā</a></li>
+    <li><a href="javascript:void(0);" onclick="sendScrollMessage('typeid'); return false;">TYPEID</a></li>
+</ul>
+
+<script>
+    function sendScrollMessage(sectionId) {
+        window.parent.postMessage({
+            type: 'scrollToSection',
+            sectionId: sectionId
+        }, '*');
+    }
+</script>
+</body>
+</html>
diff --git a/open-rcs/components/sidebar/sidebar-platform-spec.html b/open-rcs/components/sidebar/sidebar-platform-spec.html
new file mode 100644
index 0000000..981c871
--- /dev/null
+++ b/open-rcs/components/sidebar/sidebar-platform-spec.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background-color: #fff;
+            padding: 20px;
+        }
+
+        h3 {
+            font-size: 16px;
+            color: #0066cc;
+            margin-bottom: 20px;
+            cursor: pointer;
+        }
+
+        .sidebar-menu {
+            list-style: none;
+        }
+
+        .sidebar-menu li {
+            padding: 10px 0;
+            cursor: pointer;
+            color: #666;
+            font-size: 14px;
+        }
+
+        .sidebar-menu li a {
+            color: #666;
+            text-decoration: none;
+            display: block;
+        }
+
+        .sidebar-menu li a:hover {
+            color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+<h3>骞冲彴瑙勮寖</h3>
+<ul class="sidebar-menu">
+    <li><a href="javascript:void(0);" onclick="parent.scrollToSection('dev-spec'); return false;">寮�鍙戣鑼�</a></li>
+    <li><a href="javascript:void(0);" onclick="parent.scrollToSection('security-spec'); return false;">瀹夊叏瑙勮寖</a></li>
+    <li><a href="javascript:void(0);" onclick="parent.scrollToSection('data-spec'); return false;">鏁版嵁瑙勮寖</a></li>
+    <li><a href="javascript:void(0);" onclick="parent.scrollToSection('api-spec'); return false;">鎺ュ彛瑙勮寖</a></li>
+</ul>
+</body>
+</html>
diff --git a/open-rcs/pages/index-main.html b/open-rcs/pages/index-main.html
new file mode 100644
index 0000000..e04e595
--- /dev/null
+++ b/open-rcs/pages/index-main.html
@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>涓壃RCS寮�鏀惧钩鍙�</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background-color: #f5f5f5;
+            overflow-x: hidden;
+        }
+
+        /* Header鍖哄煙 */
+        #header-container {
+            width: 100%;
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            background-color: #fff;
+        }
+
+        #header-frame {
+            width: 100%;
+            height: 120px;
+            border: none;
+            display: block;
+        }
+
+        /* 涓讳綋鍐呭鍖哄煙 */
+        .main-container {
+            max-width: 1400px;
+            margin: 20px auto;
+            padding: 0 20px;
+            display: flex;
+            gap: 20px;
+        }
+
+        /* 宸︿晶杈规爮 */
+        .sidebar-left {
+            width: 220px;
+            background-color: #fff;
+            height: fit-content;
+            position: sticky;
+            top: 140px;
+        }
+
+        #sidebar-frame {
+            width: 100%;
+            height: 600px;
+            border: none;
+            display: block;
+        }
+
+        /* 涓诲唴瀹瑰尯 */
+        .content-area {
+            flex: 1;
+            background-color: #fff;
+            min-height: 800px;
+        }
+
+        #content-frame {
+            width: 100%;
+            height: 100%;
+            min-height: 800px;
+            border: none;
+            display: block;
+        }
+
+        /* 鍙充晶杈规爮 */
+        .sidebar-right {
+            width: 220px;
+            background-color: #fff;
+            height: fit-content;
+            position: sticky;
+            top: 140px;
+        }
+
+        #right-sidebar-frame {
+            width: 100%;
+            height: 600px;
+            border: none;
+            display: block;
+        }
+
+        /* 搴曢儴 */
+        footer {
+            background-color: #003366;
+            color: #fff;
+            margin-top: 60px;
+        }
+
+        .footer-content {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 60px 20px 40px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .footer-section {
+            flex: 1;
+        }
+
+        .footer-section h3 {
+            font-size: 16px;
+            margin-bottom: 20px;
+            font-weight: normal;
+        }
+
+        .footer-section ul {
+            list-style: none;
+        }
+
+        .footer-section ul li {
+            margin-bottom: 12px;
+        }
+
+        .footer-section a {
+            color: rgba(255, 255, 255, 0.7);
+            text-decoration: none;
+            font-size: 14px;
+        }
+
+        .footer-section a:hover {
+            color: #fff;
+        }
+
+        .qr-codes {
+            display: flex;
+            gap: 30px;
+        }
+
+        .qr-code-item {
+            text-align: center;
+        }
+
+        .qr-code-placeholder {
+            width: 100px;
+            height: 100px;
+            background-color: #fff;
+            margin-bottom: 10px;
+        }
+
+        .qr-code-item p {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        .footer-contact {
+            text-align: center;
+            margin-top: 30px;
+        }
+
+        .contact-button {
+            display: inline-block;
+            padding: 12px 40px;
+            background-color: #0099ff;
+            color: #fff;
+            text-decoration: none;
+            border-radius: 25px;
+            font-size: 14px;
+            margin-top: 20px;
+        }
+
+        .contact-button:hover {
+            background-color: #0088ee;
+        }
+
+        .footer-bottom {
+            text-align: center;
+            padding: 20px;
+            background-color: #002244;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.5);
+        }
+
+        /* 鍥哄畾瀵艰埅 */
+        .fixed-nav {
+            position: fixed;
+            right: 20px;
+            bottom: 50%;
+            transform: translateY(50%);
+            background-color: #fff;
+            padding: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+            z-index: 999;
+        }
+
+        .fixed-nav div {
+            padding: 10px;
+            cursor: pointer;
+            color: #666;
+            font-size: 14px;
+            text-align: center;
+        }
+
+        .fixed-nav div:hover {
+            color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+<!-- 澶撮儴鍖哄煙 -->
+<div id="header-container">
+    <iframe id="header-frame" src="../components/header/header.html"></iframe>
+</div>
+
+<!-- 涓讳綋鍐呭鍖哄煙 -->
+<div class="main-container">
+    <!-- 宸︿晶杈规爮 -->
+    <div class="sidebar-left">
+        <iframe id="sidebar-frame" src="../components/sidebar/sidebar-interface-word.html"></iframe>
+    </div>
+
+    <!-- 涓诲唴瀹瑰尯 -->
+    <div class="content-area">
+        <iframe id="content-frame" src="../components/content/content-interface-word.html"></iframe>
+    </div>
+
+    <!-- 鍙充晶杈规爮 -->
+    <div class="sidebar-right">
+        <iframe id="right-sidebar-frame" src="../components/rightsidebar/rightsidebar-interface-word.html"></iframe>
+    </div>
+</div>
+
+<!-- 搴曢儴 -->
+<footer>
+    <div class="footer-content">
+        <div class="footer-section">
+            <h3>寮�鍙戣�呮敮鎸�</h3>
+            <ul>
+                <li><a href="#">甯姪涓績</a></li>
+                <li><a href="#">鎶�鏈敮鎸�</a></li>
+                <li><a href="#">寮�鍙戣�呮枃妗�</a></li>
+                <li><a href="#">浠锋牸鏀跨瓥</a></li>
+            </ul>
+        </div>
+        <div class="footer-section">
+            <h3>鍏充簬鎴戜滑</h3>
+            <ul>
+                <li><a href="#">骞冲彴浠嬬粛</a></li>
+                <li><a href="#">鏈嶅姟澹版槑</a></li>
+                <li><a href="#">闅愮涓庝俊鎭寲鏀跨瓥</a></li>
+                <li><a href="#">鍚堜綔澶囨</a></li>
+            </ul>
+        </div>
+        <div class="footer-section">
+            <h3>鏇村鎺ㄨ崘</h3>
+            <ul>
+                <li><a href="#">涓壃</a></li>
+            </ul>
+        </div>
+        <div class="footer-section">
+            <h3>鎵爜鍏虫敞</h3>
+            <div class="qr-codes">
+                <div class="qr-code-item">
+                    <div class="qr-code-placeholder"></div>
+                    <p>涓壃RCS</p>
+                </div>
+                <div class="qr-code-item">
+                    <div class="qr-code-placeholder"></div>
+                    <p>寮�鍙戣�呭叕浼楀彿</p>
+                </div>
+            </div>
+            <div class="footer-contact">
+                <a href="#" class="contact-button">鍚堜綔鍜ㄨ</a>
+            </div>
+        </div>
+    </div>
+    <div class="footer-bottom">
+        CopyRight 漏 2024 All Right Reserved 娴欐睙涓壃绔嬪簱鎶�鏈湁闄愬叕鍙� 鐗堟潈鎵�鏈�
+    </div>
+</footer>
+
+<!-- 鍥哄畾瀵艰埅 -->
+<div class="fixed-nav">
+    <div>鈯�<br>鍚堜綔</div>
+    <div>馃摟<br>鍜ㄨ</div>
+    <div onclick="scrollToTop()">鈫�</div>
+</div>
+
+<script>
+    // 鏍囩椤甸厤缃槧灏�
+    const tabConfig = {
+        'platform-intro': {
+            sidebar: '../components/sidebar/sidebar-platform-intro.html',
+            content: '../components/content/content-platform-intro.html',
+            rightSidebar: '../components/rightsidebar/rightsidebar-platform-intro.html'
+        },
+        'platform-spec': {
+            sidebar: '../components/sidebar/sidebar-platform-spec.html',
+            content: '../components/content/content-platform-spec.html',
+            rightSidebar: '../components/rightsidebar/rightsidebar-platform-spec.html'
+        },
+        'interface-word': {
+            sidebar: '../components/sidebar/sidebar-interface-word.html',
+            content: '../components/content/content-interface-word.html',
+            rightSidebar: '../components/rightsidebar/rightsidebar-interface-word.html'
+        }
+    };
+
+    // 鐩戝惉鏉ヨ嚜iframe鐨勬秷鎭�
+    window.addEventListener('message', function (event) {
+        console.log('鏀跺埌娑堟伅:', event.data);
+
+        if (event.data.type === 'switchTab') {
+            switchTab(event.data.tab);
+        } else if (event.data.type === 'scrollToSection') {
+            scrollToSection(event.data.sectionId);
+        }
+    });
+
+    // 鍒囨崲鏍囩椤�
+    function switchTab(tabName) {
+        console.log('鍒囨崲鏍囩椤�:', tabName);
+        const config = tabConfig[tabName];
+        if (config) {
+            // 鏇存柊iframe鍐呭
+            document.getElementById('sidebar-frame').src = config.sidebar;
+            document.getElementById('content-frame').src = config.content;
+            document.getElementById('right-sidebar-frame').src = config.rightSidebar;
+
+            // 閫氱煡header鏇存柊active鐘舵��
+            const headerFrame = document.getElementById('header-frame');
+            if (headerFrame && headerFrame.contentWindow) {
+                headerFrame.contentWindow.postMessage({
+                    type: 'updateTab',
+                    tab: tabName
+                }, '*');
+            }
+        } else {
+            console.log('鏈壘鍒伴厤缃�:', tabName);
+        }
+    }
+
+    // 婊氬姩鍒版寚瀹氱珷鑺�
+    function scrollToSection(sectionId) {
+        console.log('婊氬姩鍒扮珷鑺�:', sectionId);
+        const contentFrame = document.getElementById('content-frame');
+        if (contentFrame && contentFrame.contentWindow) {
+            // 鍚慶ontent iframe鍙戦�佹粴鍔ㄦ秷鎭�
+            contentFrame.contentWindow.postMessage({
+                type: 'scrollToSection',
+                sectionId: sectionId
+            }, '*');
+        }
+    }
+
+    // 鍥炲埌椤堕儴
+    function scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+
+    // 鐩戝惉iframe鍔犺浇瀹屾垚
+    window.addEventListener('load', function () {
+        console.log('椤甸潰鍔犺浇瀹屾垚');
+        // 璋冩暣content-frame楂樺害浠ラ�傚簲鍐呭
+        const contentFrame = document.getElementById('content-frame');
+        contentFrame.addEventListener('load', function () {
+            try {
+                const contentHeight = contentFrame.contentDocument.body.scrollHeight;
+                contentFrame.style.height = contentHeight + 'px';
+                console.log('璋冩暣iframe楂樺害:', contentHeight);
+            } catch (e) {
+                console.log('鏃犳硶璋冩暣iframe楂樺害', e);
+            }
+        });
+    });
+</script>
+</body>
+</html>

--
Gitblit v1.9.1