From be8b9ba19cee023829d2adc5d390e5bf0f56cbb8 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期一, 08 四月 2024 17:33:33 +0800
Subject: [PATCH] 版本更新

---
 package-lock.json                       |  203 ++++++++++
 public/index.html                       |   30 +
 public/DeveloperGuide/css/index.css     |   20 +
 public/DeveloperGuide/Doc/HomeDoc2.html |  142 +++++++
 public/DeveloperGuide/Doc/HomeDoc.html  |  258 ++++++++++++++
 public/css/index copy.css               |   62 +++
 src/views/Index.vue                     |   23 +
 src/main.ts                             |    1 
 src/store/index.ts                      |    4 
 src/utils/request.js                    |    2 
 /dev/null                               |    0 
 src/api/api.js                          |    7 
 src/views/HomeDoc.vue                   |  199 +++++++++++
 package.json                            |    1 
 public/js/config.js                     |   19 +
 src/views/Home.vue                      |   46 +-
 src/router/index.ts                     |   11 
 src/App.vue                             |    5 
 18 files changed, 999 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a6bb35..110b5fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -321,6 +321,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw=="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
@@ -390,6 +395,14 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
+    "@szmarczak/http-timer": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
+      "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+      "requires": {
+        "defer-to-connect": "^2.0.0"
+      }
+    },
     "@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -398,6 +411,17 @@
       "requires": {
         "@types/connect": "*",
         "@types/node": "*"
+      }
+    },
+    "@types/cacheable-request": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
+      "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
+      "requires": {
+        "@types/http-cache-semantics": "*",
+        "@types/keyv": "^3.1.4",
+        "@types/node": "*",
+        "@types/responselike": "^1.0.0"
       }
     },
     "@types/connect": {
@@ -453,6 +477,11 @@
         "@types/node": "*"
       }
     },
+    "@types/http-cache-semantics": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
+      "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA=="
+    },
     "@types/http-errors": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@@ -473,6 +502,14 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
+    },
+    "@types/keyv": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
+      "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+      "requires": {
+        "@types/node": "*"
+      }
     },
     "@types/lodash": {
       "version": "4.17.0",
@@ -509,7 +546,6 @@
       "version": "20.12.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz",
       "integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==",
-      "dev": true,
       "requires": {
         "undici-types": "~5.26.4"
       }
@@ -544,6 +580,14 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "dev": true
+    },
+    "@types/responselike": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
+      "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
+      "requires": {
+        "@types/node": "*"
+      }
     },
     "@types/send": {
       "version": "0.17.4",
@@ -3143,6 +3187,40 @@
         }
       }
     },
+    "cacheable-lookup": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+      "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA=="
+    },
+    "cacheable-request": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
+      "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
+      "requires": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^4.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^6.0.1",
+        "responselike": "^2.0.0"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "normalize-url": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+          "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
+        }
+      }
+    },
     "call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -3508,6 +3586,14 @@
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
       "dev": true
+    },
+    "clone-response": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
     },
     "coa": {
       "version": "2.0.2",
@@ -4450,6 +4536,21 @@
       "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
       "dev": true
     },
+    "decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "requires": {
+        "mimic-response": "^3.1.0"
+      },
+      "dependencies": {
+        "mimic-response": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+          "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="
+        }
+      }
+    },
     "deep-equal": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
@@ -4600,6 +4701,11 @@
       "requires": {
         "clone": "^1.0.2"
       }
+    },
+    "defer-to-connect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg=="
     },
     "define-data-property": {
       "version": "1.1.4",
@@ -5012,7 +5118,6 @@
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
       "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dev": true,
       "requires": {
         "once": "^1.4.0"
       }
@@ -6332,6 +6437,24 @@
         "get-intrinsic": "^1.1.3"
       }
     },
+    "got": {
+      "version": "11.8.6",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
+      "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
+      "requires": {
+        "@sindresorhus/is": "^4.0.0",
+        "@szmarczak/http-timer": "^4.0.5",
+        "@types/cacheable-request": "^6.0.1",
+        "@types/responselike": "^1.0.0",
+        "cacheable-lookup": "^5.0.3",
+        "cacheable-request": "^7.0.2",
+        "decompress-response": "^6.0.0",
+        "http2-wrapper": "^1.0.0-beta.5.2",
+        "lowercase-keys": "^2.0.0",
+        "p-cancelable": "^2.0.0",
+        "responselike": "^2.0.0"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -6735,6 +6858,11 @@
         }
       }
     },
+    "http-cache-semantics": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -6793,6 +6921,15 @@
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
         "sshpk": "^1.7.0"
+      }
+    },
+    "http2-wrapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+      "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+      "requires": {
+        "quick-lru": "^5.1.1",
+        "resolve-alpn": "^1.0.0"
       }
     },
     "https-browserify": {
@@ -7541,6 +7678,11 @@
       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
       "dev": true
     },
+    "json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
+    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -7607,6 +7749,14 @@
         "extsprintf": "1.3.0",
         "json-schema": "0.4.0",
         "verror": "1.10.0"
+      }
+    },
+    "keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "requires": {
+        "json-buffer": "3.0.1"
       }
     },
     "killable": {
@@ -7824,6 +7974,11 @@
       "integrity": "sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==",
       "dev": true
     },
+    "lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA=="
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -8021,6 +8176,11 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
+    },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
     },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
@@ -8525,7 +8685,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -8613,6 +8772,11 @@
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
       "dev": true
+    },
+    "p-cancelable": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+      "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg=="
     },
     "p-finally": {
       "version": "1.0.0",
@@ -10459,7 +10623,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
       "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "dev": true,
       "requires": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
@@ -10641,6 +10804,11 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
+    },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
     },
     "randombytes": {
       "version": "2.1.0",
@@ -10937,6 +11105,11 @@
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
     },
+    "resolve-alpn": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="
+    },
     "resolve-cwd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
@@ -10965,6 +11138,14 @@
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
       "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
       "dev": true
+    },
+    "responselike": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
+      "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
+      "requires": {
+        "lowercase-keys": "^2.0.0"
+      }
     },
     "restore-cursor": {
       "version": "2.0.0",
@@ -12559,8 +12740,7 @@
     "undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
     "union-value": {
       "version": "1.0.1",
@@ -12941,6 +13121,14 @@
           "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
           "dev": true
         }
+      }
+    },
+    "vue-resource": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.5.3.tgz",
+      "integrity": "sha512-REhTuEuYSpwmEH/VN4fgDQVC/VXxDK/xsguuiDPnINxOwy1s0CSu//p++osTUkiAXi6d/vptwBpb0AcBIDsXzw==",
+      "requires": {
+        "got": ">=8.0 <12.0"
       }
     },
     "vue-router": {
@@ -14026,8 +14214,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "write": {
       "version": "1.0.3",
diff --git a/package.json b/package.json
index 1960568..f0b4b58 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "lib-flexible": "^0.3.2",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",
+    "vue-resource": "^1.5.3",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },
diff --git a/public/DeveloperGuide/Doc/HomeDoc copy.html b/public/DeveloperGuide/Doc/HomeDoc copy.html
deleted file mode 100644
index 68adf01..0000000
--- a/public/DeveloperGuide/Doc/HomeDoc copy.html
+++ /dev/null
@@ -1,418 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Bootstrap Documentation</title>
-
-  <link rel="stylesheet" href="../css/bootstrap.min.css">
-  <link rel="stylesheet" href="../css/prism.min.css" />
-  <!-- <link rel="stylesheet" href="/./css/" /> -->
-
-
-
-  
-  <script src="../js/prism.js"></script>
-  <script src="../js/jquery.min.js"></script>
-  <script src="../assets/js/vendor/popper.min.js"></script>
-  <script src="../dist/js/bootstrap.min.js"></script>
-  <style>
-    /* 瀵艰埅鏍� */
-    #thisnavbar {
-      background-color: #24262b;
-    }
-    .active {
-      background-color: transparent !important;
-    }
-    .dropdown-menu {
-      background-color: transparent !important;
-    }
-    .dropdown-item {
-      background-color: #24262b !important;
-      color: #ffffff !important;
-      
-    } 
-    .dropdown-toggle {
-      background-color: transparent !important;
-      color: #ffffff !important;
-    } 
-    .nav-link {
-      color: #ffffff !important;
-    }
-    .logoimg {
-      margin-bottom: 0.4rem;
-      margin-right: 0.4rem;
-    }
-    .nav-item {
-      margin-right: 4rem;
-
-    }
-    /* 瀵艰埅鏍� */
-
-
-
-      .sticky-sidebar {
-        border: none;
-      }
-
-      .list-group-item {
-        border: none;
-      }
-      .Copyright {
-        background-color:#1A2236;
-      }
-      .code-wrapper {
-        position: relative;
-      }
-      .copy-button {
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        padding: 5px;
-        background-color: #f4f4f4;
-        border: none;
-        border-radius: 3px;
-        cursor: pointer;
-      }
-
-      #maincontent {
-        margin-left: 20px;
-      }
-
-      #contentlist {
-        margin-left: 55px;
-        list-style-type: none;
-        text-align: left;
-        border:none;
-      }
-
-      .btn-group-vertical {
-        background-color:lightslategrey;
-        list-style-type: none;
-        border:none;
-        width: 100%;
-      }
-
-      .dropdown-menu {
-        background-color:lightslategrey;
-        left: 32px;
-      }
-
-      .dropdown-item1 {
-        display: block;
-        width: 100%;
-        padding: 0.25rem 1.5rem;
-        clear: both;
-        font-weight: 400;
-        color: #ffffff;
-        text-align: inherit;
-        white-space: nowrap;
-        background-color:lightslategrey;
-        border: 0;
-        /* list-style-type: none; */
-      }
-
-  </style>
-</head>
-<body>
-
-  <header>
-    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" id="thisnavbar">
-      <ul class="nav nav-pills">
-
-        <li class="nav-item onhoverblue">
-          <img src="..\assets\img\logo.png" fit="cover" class="logoimg"/>
-          <a class="navbar-brand" href="Home.html">SmartEarth Web骞冲彴</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link active" href="Home.html">棣栭〉</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">浜у搧</a>
-          <div class="dropdown-menu">
-            <a class="dropdown-item" href="WebGIS.html" target="_blank">Web GIS</a>
-            <a class="dropdown-item" href="https://cim.smartearth.cn/#/index" target="_blank">CIM寮曟搸骞冲彴</a>
-            <a class="dropdown-item" href="PW.html" target="_blank">Parallel World</a>
-          </div>
-        </li>
-
-        <!-- <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">寮�鍙戣��</a>
-          <div class="dropdown-menu">
-            <a class="dropdown-item" href="https://websdk.smartearth.cn/api.html" target="_blank">API鎺ュ彛</a>
-            <a class="dropdown-item" href="http://183.162.245.49:82/sdkdemo_2022/#/" target="_blank">Web GIS鍦ㄧ嚎绀轰緥</a>
-          </div>
-        </li> -->
-        <li class="nav-item">
-          <a class="nav-link" href="https://www.terra-it.cn/contact.php" target="_blank">鑱旂郴鎴戜滑</a>
-        </li>
-      </ul>
-    </nav>
-  </header>
-
-
-
-  <!-- Page content -->
-  <div class="container-fluid" style="margin-top: 5rem;">
-
-    
-    <div class="row">
-      <div class="col-sm-2" id="contentlist" style="text-align: left;">
-        <!-- Sidebar -->
-        <div class="list-group sticky-sidebar" style="height: 1000px; overflow-y: auto;">
-        <!-- 鎼滅储妗� -->
-          <input type="text" id="searchInput" onkeyup="searchSidebar()" placeholder="Search...">
-          <div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
-          
-            <div class="btn-group" role="group">
-              <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </button>
-              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-              </div>
-            </div>
-
-            <div class="btn-group" role="group">
-              <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </button>
-              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-              </div>
-            </div>
-
-            <div class="btn-group" role="group">
-              <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </button>
-              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-              </div>
-            </div>
-
-            <div class="btn-group" role="group">
-              <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </button>
-              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-              </div>
-            </div>
-
-            <div class="btn-group" role="group">
-              <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </button>
-              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-              </div>
-            </div>
-
-            <div class="btn-group" role="group">
-              <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </button>
-              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-              </div>
-            </div>
-
-            <div class="btn-group" role="group">
-              <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </button>
-              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-              </div>
-            </div>
-
-            <div class="btn-group" role="group">
-              <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </button>
-              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-                <a class="dropdown-item1" href="#">Dropdown link</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-
-      <div class="col-lg-9" id="maincontent">
-                  <h1 class="bd-title" id="content">Introduction</h1>
-                  <p class="bd-lead">Get started with Bootstrap, the world鈥檚 most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.</p>
-                  <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
-
-                  <h2 id="quick-start">Quick start</h2>
-
-                  <p>Looking to quickly add Bootstrap to your project? Use jsDelivr, provided for free by the folks at jsDelivr. Using a package manager or need to download the source files? <a href="/getting-started/download/">Head to the downloads page.</a></p>
-
-                  <h3 id="css">CSS</h3>
-
-                  <p>Copy-paste the stylesheet <code class="highlighter-rouge">&lt;link&gt;</code> into your <code class="highlighter-rouge">&lt;head&gt;</code> before all other stylesheets to load our CSS.</p>
-
-                  <div class="code-wrapper">
-                    <button class="copy-button">Copy</button>
-                      <pre><code class="language-javascript">
-                        function greet() {
-                          console.log("Hello, world!");
-                        }
-                        </code></pre>
-                  </div>
-
-                  <h3 id="js">JS</h3>
-
-                  <p>Many of our components require the use of JavaScript to function. Specifically, they require <a href="https://jquery.com">jQuery</a>, <a href="https://popper.js.org/">Popper.js</a>, and our own JavaScript plugins. Place the following <code class="highlighter-rouge">&lt;script&gt;</code>s near the end of your pages, right before the closing <code class="highlighter-rouge">&lt;/body&gt;</code> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.</p>
-
-                  <p>We use <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">jQuery鈥檚 slim build</a>, but the full version is also supported.</p>
-
-                  <div class="code-wrapper">
-                    <button class="copy-button">Copy</button>
-                      <pre><code class="language-javascript">
-                        function greet() {
-                          console.log("Hello, world!");
-                        }
-                        </code></pre>
-                  </div>
-
-                  <p>Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you鈥檙e at all unsure about the general page structure, keep reading for an example page template.</p>
-                  <img src="../background/1111.png" class="img-fluid rounded mx-auto d-block" alt="Responsive image" style="text-align: center !important;">
-                  <details>
-                  <summary class="text-primary mb-3">Show components requiring JavaScript</summary>
-
-                  <ul>
-                    <li>Alerts for dismissing</li>
-                    <li>Buttons for toggling states and checkbox/radio functionality</li>
-                    <li>Carousel for all slide behaviors, controls, and indicators</li>
-                    <li>Collapse for toggling visibility of content</li>
-                    <li>Dropdowns for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
-                    <li>Modals for displaying, positioning, and scroll behavior</li>
-                    <li>Navbar for extending our Collapse plugin to implement responsive behavior</li>
-                    <li>Tooltips and popovers for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
-                    <li>Scrollspy for scroll behavior and navigation updates</li>
-                  </ul>
-
-                  </details>
-
-                  <h2 id="starter-template">Starter template</h2>
-
-                  <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:</p>
-
-                  <div class="code-wrapper">
-                    <button class="copy-button">Copy</button>
-                      <pre><code class="language-javascript">
-                        function greet() {
-                          console.log("Hello, world!");
-                        }
-                        </code></pre>
-                  </div>
-
-
-
-                  <p>That鈥檚 all you need for overall page requirements. Visit the <a href="/layout/overview/">Layout docs</a> or <a href="/examples/">our official examples</a> to start laying out your site鈥檚 content and components.</p>
-
-                  <h2 id="important-globals">Important globals</h2>
-
-                  <p>Bootstrap employs a handful of important global styles and settings that you鈥檒l need to be aware of when using it, all of which are almost exclusively geared towards the <em>normalization</em> of cross browser styles. Let鈥檚 dive in.</p>
-
-                  <h3 id="html5-doctype">HTML5 doctype</h3>
-
-                  <p>Bootstrap requires the use of the HTML5 doctype. Without it, you鈥檒l see some funky incomplete styling, but including it shouldn鈥檛 cause any considerable hiccups.</p>
-
-                  <div class="code-wrapper">
-                    <button class="copy-button">Copy</button>
-                      <pre><code class="language-javascript">
-                        function greet() {
-                          console.log("Hello, world!");
-                        }
-                        </code></pre>
-                  </div>
-
-                  <h3 id="responsive-meta-tag">Responsive meta tag</h3>
-
-                  <p>Bootstrap is developed <em>mobile first</em>, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, <strong>add the responsive viewport meta tag</strong> to your <code class="highlighter-rouge">&lt;head&gt;</code>.</p>
-                  <div class="code-wrapper">
-                    <button class="copy-button">Copy</button>
-                      <pre><code class="language-javascript">
-                        function greet() {
-                          console.log("Hello, world!");
-                        }
-                        </code></pre>
-                  </div>
-
-
-                  <p>With the above snippet, nested elements鈥攊ncluding generated content via <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>鈥攚ill all inherit the specified <code class="highlighter-rouge">box-sizing</code> for that <code class="highlighter-rouge">.selector-for-some-widget</code>.</p>
-
-                  <p>Learn more about <a href="https://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
-
-                  <h3 id="reboot">Reboot</h3>
-
-                  <p>For improved cross-browser rendering, we use <a href="/content/reboot/">Reboot</a> to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.</p>
-
-                  <h2 id="community">Community</h2>
-
-                  <p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
-
-                  <ul>
-                    <li>Follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a>.</li>
-                    <li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
-                    <li>Chat with fellow Bootstrappers in IRC. On the <code class="highlighter-rouge">irc.freenode.net</code> server, in the <code class="highlighter-rouge">##bootstrap</code> channel.</li>
-                    <li>Implementation help may be found at Stack Overflow (tagged <a href="https://stackoverflow.com/questions/tagged/bootstrap-4"><code class="highlighter-rouge">bootstrap-4</code></a>).</li>
-                    <li>Developers should use the keyword <code class="highlighter-rouge">bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
-                  </ul>
-
-                  <p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    // 鎼滅储妗�
-    function searchSidebar() {
-      var input = document.getElementById("searchInput");
-      var filter = input.value.toUpperCase();
-      var listGroup = document.querySelector(".sticky-sidebar");
-      var listItems = listGroup.querySelectorAll(".list-group-item");
-
-      listItems.forEach(function(item) {
-        var text = item.innerText.toUpperCase();
-        if (text.includes(filter)) {
-          item.style.display = "block"; // 鏄剧ず鍖归厤鐨勯」鐩�
-        } else {
-          item.style.display = "none"; // 闅愯棌涓嶅尮閰嶇殑椤圭洰
-        }
-      });
-    }
-
-
-    //鍦ㄦ爣绛句腑闀跺祵鍏跺畠html椤甸潰
-    function loadContent(url) {
-      $.ajax({
-        url: url,
-        success: function(data) {
-          $('#maincontent').html(data);
-        },
-        error: function() {
-          alert('Error loading content');
-        }
-      });
-    }
-  </script>
-    <div class="Copyright" style="width: 100%; text-align: center; margin-top:0rem; position: absolute; background-color: #000000 !important;">
-      <p style="color: aliceblue !important; padding: 10px 0; margin: 0;">
-      Copyright 漏 2004锛�2022娉扮憺鏁板垱绉戞妧(鍖椾含)鑲′唤鏈夐檺鍏徃鐗堟潈鎵�鏈�&nbsp;&nbsp;|&nbsp;&nbsp;浜叕缃戝畨澶�11010802036351鍙�&nbsp;&nbsp;|&nbsp;&nbsp;浜琁CP澶�09046777鍙�
-      </p>
-    </div>
-</body>
-  
-  
diff --git a/public/DeveloperGuide/Doc/HomeDoc.html b/public/DeveloperGuide/Doc/HomeDoc.html
new file mode 100644
index 0000000..871d41e
--- /dev/null
+++ b/public/DeveloperGuide/Doc/HomeDoc.html
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Bootstrap Documentation</title>
+  <link rel="stylesheet" href="./css/index.css" />
+  <script src="./js/jquery.min.js"></script>
+  <style>
+    .HtmlBox {
+      padding: 30px;
+    }
+
+    .HtmlBox h1 {
+      font-size: 26px;
+      color: #666;
+      font-weight: 400;
+      font-family: Graphik, sans-serif;
+      font-feature-settings: normal;
+      margin-bottom: 20px;
+    }
+
+    .HtmlBox h2 {
+      font-size: 24px;
+      color: #333;
+      font-weight: 400;
+      font-family: Graphik, sans-serif;
+      font-feature-settings: normal;
+      margin-bottom: 20px;
+    }
+
+    .HtmlBox h3 {
+      font-size: 22px;
+      color: #333;
+      font-weight: 400;
+      font-family: Graphik, sans-serif;
+      font-feature-settings: normal;
+      margin-bottom: 20px;
+    }
+
+    .HtmlBox p {
+      font-size: 14px;
+      font-weight: 400;
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+      margin-bottom: 20px;
+      line-height: 35px;
+    }
+
+    .HtmlBox a {
+      color: #4b96e6;
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+      font-size: 14px;
+      word-wrap: break-word;
+      letter-spacing: 1px;
+    }
+
+    .HtmlBox .code-wrapper {
+      position: relative;
+      margin-bottom: 20px;
+      background: #f5f2f0;
+    }
+
+    .HtmlBox .copy-button {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      border-color: #666;
+    }
+
+    .img {
+      margin-bottom: 20px;
+    }
+
+    .summary {
+      font-size: 16px !important;
+      font-weight: 400;
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+      margin-bottom: 20px;
+      line-height: 25px;
+    }
+
+    .HtmlBox_Ul {
+      padding-left: 20px;
+      padding-bottom: 20px;
+      font-size: 14px !important;
+      font-weight: 400;
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+      margin-bottom: 20px;
+      line-height: 25px;
+      list-style: circle;
+
+      a {
+        color: #4b96e6;
+        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+        font-size: 14px;
+        word-wrap: break-word;
+        letter-spacing: 1px;
+      }
+    }
+    button{
+      border: transparent;
+    }
+    button:hover{
+      color: #4b96e6;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="HtmlBox" class="HtmlBox">
+
+    <h1>Introduction</h1>
+    <p>
+      Get started with Bootstrap, the world鈥檚 most popular framework for building responsive, mobile-first sites, with
+      jsDelivr and a template starter page.
+    </p>
+    <h2>Quick start</h2>
+    <p>Looking to quickly add Bootstrap to your project? Use jsDelivr, provided for free by the folks at jsDelivr. Using
+      a package manager or need to download the source files? <a href="/getting-started/download/">Head to the downloads
+        page.</a></p>
+    <h3>CSS</h3>
+    <p>Copy-paste the stylesheet <code>&lt;link&gt;</code> into your <code>&lt;head&gt;</code> before all other
+      stylesheets to load our CSS.</p>
+    <div class="code-wrapper ">
+      <button class="copy-button" id="copy">Copy</button>
+      <pre class="language-javascript"><code >
+            function greet() {
+              console.log("Hello, world!");
+            }
+      </code></pre>
+    </div>
+    <h3>JS</h3>
+    <p>Many of our components require the use of JavaScript to function. Specifically, they require <a
+        href="https://jquery.com">jQuery</a>, <a href="https://popper.js.org/">Popper.js</a>, and our own JavaScript
+      plugins. Place the following <code class="highlighter-rouge">&lt;script&gt;</code>s near the end of your pages,
+      right before the closing <code class="highlighter-rouge">&lt;/body&gt;</code> tag, to enable them. jQuery must
+      come first, then Popper.js, and then our JavaScript plugins.</p>
+    <p>We use <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">jQuery鈥檚 slim build</a>, but the
+      full version is also supported.</p>
+    <div class="code-wrapper">
+      <button class="copy-button" id="copy">Copy</button>
+      <pre><code class="language-javascript">
+          function greet() {
+            console.log("Hello, world!");
+          }
+          </code></pre>
+    </div>
+    <p>Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below.
+      If you鈥檙e at all unsure about the general page structure, keep reading for an example page template.</p>
+
+    <img src="http://192.168.11.87:8080/DeveloperGuide/background/1111.png" class="img" alt="Responsive image">
+    <details>
+      <summary class="summary">Show components requiring JavaScript</summary>
+      <ul class="HtmlBox_Ul">
+        <li>Alerts for dismissing</li>
+        <li>Buttons for toggling states and checkbox/radio functionality</li>
+        <li>Carousel for all slide behaviors, controls, and indicators</li>
+        <li>Collapse for toggling visibility of content</li>
+        <li>Dropdowns for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
+        <li>Modals for displaying, positioning, and scroll behavior</li>
+        <li>Navbar for extending our Collapse plugin to implement responsive behavior</li>
+        <li>Tooltips and popovers for displaying and positioning (also requires <a
+            href="https://popper.js.org/">Popper.js</a>)</li>
+        <li>Scrollspy for scroll behavior and navigation updates</li>
+      </ul>
+
+
+    </details>
+    <h2>Starter template</h2>
+
+    <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5
+      doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages
+      should look like this:</p>
+
+    <div class="code-wrapper">
+      <button class="copy-button" id="copy">Copy</button>
+      <pre><code class="language-javascript">
+        function greet() {
+          console.log("Hello, world!");
+        }
+        </code></pre>
+    </div>
+
+    <p>That鈥檚 all you need for overall page requirements. Visit the <a href="/layout/overview/">Layout docs</a> or <a
+        href="/examples/">our official examples</a> to start laying out your site鈥檚 content and components.</p>
+
+    <h2>Important globals</h2>
+
+    <p>Bootstrap employs a handful of important global styles and settings that you鈥檒l need to be aware of when using
+      it, all of which are almost exclusively geared towards the <em>normalization</em> of cross browser styles. Let鈥檚
+      dive in.</p>
+
+    <h3 id="html5-doctype">HTML5 doctype</h3>
+
+    <p>Bootstrap requires the use of the HTML5 doctype. Without it, you鈥檒l see some funky incomplete styling, but
+      including it shouldn鈥檛 cause any considerable hiccups.</p>
+    <p>That鈥檚 all you need for overall page requirements. Visit the <a href="/layout/overview/">Layout docs</a> or <a
+        href="/examples/">our official examples</a> to start laying out your site鈥檚 content and components.</p>
+
+    <h2>Important globals</h2>
+
+    <p>Bootstrap employs a handful of important global styles and settings that you鈥檒l need to be aware of when using
+      it, all of which are almost exclusively geared towards the <em>normalization</em> of cross browser styles. Let鈥檚
+      dive in.</p>
+
+    <h3 >HTML5 doctype</h3>
+
+    <p>Bootstrap requires the use of the HTML5 doctype. Without it, you鈥檒l see some funky incomplete styling, but
+      including it shouldn鈥檛 cause any considerable hiccups.</p>
+
+      <div class="code-wrapper">
+        <button class="copy-button" id="copy">Copy</button>
+          <pre><code class="language-javascript">
+            function greet() {
+              console.log("Hello, world!");
+            }
+            </code></pre>
+      </div>
+
+      <h3  >Responsive meta tag</h3>
+      <p>Bootstrap is developed <em>mobile first</em>, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, <strong>add the responsive viewport meta tag</strong> to your <code class="highlighter-rouge">&lt;head&gt;</code>.</p>
+      <div class="code-wrapper">
+        <button class="copy-button" id="copy">Copy</button>
+          <pre><code class="language-javascript">
+            function greet() {
+              console.log("Hello, world!");
+            }
+            </code></pre>
+      </div>
+      <p>With the above snippet, nested elements鈥攊ncluding generated content via <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>鈥攚ill all inherit the specified <code class="highlighter-rouge">box-sizing</code> for that <code class="highlighter-rouge">.selector-for-some-widget</code>.</p>
+
+      <p>Learn more about <a href="https://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
+
+      <h3 id="reboot">Reboot</h3>
+
+      <p>For improved cross-browser rendering, we use <a href="/content/reboot/">Reboot</a> to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.</p>
+
+      <h2 id="community">Community</h2>
+
+      <p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
+
+      <ul  class="HtmlBox_Ul">
+        <li>Follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a>.</li>
+        <li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
+        <li>Chat with fellow Bootstrappers in IRC. On the <code class="highlighter-rouge">irc.freenode.net</code> server, in the <code class="highlighter-rouge">##bootstrap</code> channel.</li>
+        <li>Implementation help may be found at Stack Overflow (tagged <a href="https://stackoverflow.com/questions/tagged/bootstrap-4"><code class="highlighter-rouge">bootstrap-4</code></a>).</li>
+        <li>Developers should use the keyword <code class="highlighter-rouge">bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
+      </ul>
+
+      <p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
+  </div>
+  <script>
+    
+  
+  </script>
+</body>
\ No newline at end of file
diff --git a/public/DeveloperGuide/Doc/HomeDoc2.html b/public/DeveloperGuide/Doc/HomeDoc2.html
new file mode 100644
index 0000000..82ea9a9
--- /dev/null
+++ b/public/DeveloperGuide/Doc/HomeDoc2.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Bootstrap Documentation</title>
+
+</head>
+<body>
+ 
+      <div class="col-lg-9" id="maincontent">
+                  <h1 class="bd-title" id="content">Introduction</h1>
+                  <p class="bd-lead">Get started with Bootstrap, the world鈥檚 most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.</p>
+                  <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
+
+                  <h2 id="quick-start">Quick start</h2>
+
+                  <p>Looking to quickly add Bootstrap to your project? Use jsDelivr, provided for free by the folks at jsDelivr. Using a package manager or need to download the source files? <a href="/getting-started/download/">Head to the downloads page.</a></p>
+
+                  <h3 id="css">CSS</h3>
+
+                  <p>Copy-paste the stylesheet <code class="highlighter-rouge">&lt;link&gt;</code> into your <code class="highlighter-rouge">&lt;head&gt;</code> before all other stylesheets to load our CSS.</p>
+
+                  <div class="code-wrapper">
+                    <button class="copy-button">Copy</button>
+                      <pre><code class="language-javascript">
+                        function greet() {
+                          console.log("Hello, world!");
+                        }
+                        </code></pre>
+                  </div>
+
+                  <h3 id="js">JS</h3>
+
+                  <p>Many of our components require the use of JavaScript to function. Specifically, they require <a href="https://jquery.com">jQuery</a>, <a href="https://popper.js.org/">Popper.js</a>, and our own JavaScript plugins. Place the following <code class="highlighter-rouge">&lt;script&gt;</code>s near the end of your pages, right before the closing <code class="highlighter-rouge">&lt;/body&gt;</code> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.</p>
+
+                  <p>We use <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">jQuery鈥檚 slim build</a>, but the full version is also supported.</p>
+
+                  <div class="code-wrapper">
+                    <button class="copy-button">Copy</button>
+                      <pre><code class="language-javascript">
+                        function greet() {
+                          console.log("Hello, world!");
+                        }
+                        </code></pre>
+                  </div>
+
+                  <p>Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you鈥檙e at all unsure about the general page structure, keep reading for an example page template.</p>
+                  <img src="../background/1111.png" class="img-fluid rounded mx-auto d-block" alt="Responsive image" style="text-align: center !important;">
+                  <details>
+                  <summary class="text-primary mb-3">Show components requiring JavaScript</summary>
+
+                  <ul>
+                    <li>Alerts for dismissing</li>
+                    <li>Buttons for toggling states and checkbox/radio functionality</li>
+                    <li>Carousel for all slide behaviors, controls, and indicators</li>
+                    <li>Collapse for toggling visibility of content</li>
+                    <li>Dropdowns for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
+                    <li>Modals for displaying, positioning, and scroll behavior</li>
+                    <li>Navbar for extending our Collapse plugin to implement responsive behavior</li>
+                    <li>Tooltips and popovers for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
+                    <li>Scrollspy for scroll behavior and navigation updates</li>
+                  </ul>
+
+                  </details>
+
+                  <h2 id="starter-template">Starter template</h2>
+
+                  <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:</p>
+
+                  <div class="code-wrapper">
+                    <button class="copy-button">Copy</button>
+                      <pre><code class="language-javascript">
+                        function greet() {
+                          console.log("Hello, world!");
+                        }
+                        </code></pre>
+                  </div>
+
+
+
+                  <p>That鈥檚 all you need for overall page requirements. Visit the <a href="/layout/overview/">Layout docs</a> or <a href="/examples/">our official examples</a> to start laying out your site鈥檚 content and components.</p>
+
+                  <h2 id="important-globals">Important globals</h2>
+
+                  <p>Bootstrap employs a handful of important global styles and settings that you鈥檒l need to be aware of when using it, all of which are almost exclusively geared towards the <em>normalization</em> of cross browser styles. Let鈥檚 dive in.</p>
+
+                  <h3 id="html5-doctype">HTML5 doctype</h3>
+
+                  <p>Bootstrap requires the use of the HTML5 doctype. Without it, you鈥檒l see some funky incomplete styling, but including it shouldn鈥檛 cause any considerable hiccups.</p>
+
+                  <div class="code-wrapper">
+                    <button class="copy-button">Copy</button>
+                      <pre><code class="language-javascript">
+                        function greet() {
+                          console.log("Hello, world!");
+                        }
+                        </code></pre>
+                  </div>
+
+                  <h3 id="responsive-meta-tag">Responsive meta tag</h3>
+
+                  <p>Bootstrap is developed <em>mobile first</em>, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, <strong>add the responsive viewport meta tag</strong> to your <code class="highlighter-rouge">&lt;head&gt;</code>.</p>
+                  <div class="code-wrapper">
+                    <button class="copy-button">Copy</button>
+                      <pre><code class="language-javascript">
+                        function greet() {
+                          console.log("Hello, world!");
+                        }
+                        </code></pre>
+                  </div>
+
+
+                  <p>With the above snippet, nested elements鈥攊ncluding generated content via <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>鈥攚ill all inherit the specified <code class="highlighter-rouge">box-sizing</code> for that <code class="highlighter-rouge">.selector-for-some-widget</code>.</p>
+
+                  <p>Learn more about <a href="https://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
+
+                  <h3 id="reboot">Reboot</h3>
+
+                  <p>For improved cross-browser rendering, we use <a href="/content/reboot/">Reboot</a> to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.</p>
+
+                  <h2 id="community">Community</h2>
+
+                  <p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
+
+                  <ul>
+                    <li>Follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a>.</li>
+                    <li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
+                    <li>Chat with fellow Bootstrappers in IRC. On the <code class="highlighter-rouge">irc.freenode.net</code> server, in the <code class="highlighter-rouge">##bootstrap</code> channel.</li>
+                    <li>Implementation help may be found at Stack Overflow (tagged <a href="https://stackoverflow.com/questions/tagged/bootstrap-4"><code class="highlighter-rouge">bootstrap-4</code></a>).</li>
+                    <li>Developers should use the keyword <code class="highlighter-rouge">bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
+                  </ul>
+
+                  <p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
+      </div>
+ 
+
+   
+   
+</body>
+  
+  
diff --git a/public/DeveloperGuide/css/index.css b/public/DeveloperGuide/css/index.css
new file mode 100644
index 0000000..4f48e98
--- /dev/null
+++ b/public/DeveloperGuide/css/index.css
@@ -0,0 +1,20 @@
+ 
+.HtmlBox_h1 {
+  font-size: 26px;
+  color: #666;
+  font-weight: 400;
+  font-family: Graphik, sans-serif;
+  font-feature-settings: normal;
+}
+.HtmlBox_h2{
+  font-size: 26px;
+  color: #333;
+  font-weight: 400;
+  font-family: Graphik, sans-serif;
+  font-feature-settings: normal;
+}
+.HtmlBox_p{
+  font-size: 14px;
+  font-weight: 400;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
+}
\ No newline at end of file
diff --git a/public/css/index copy.css b/public/css/index copy.css
new file mode 100644
index 0000000..c139bc1
--- /dev/null
+++ b/public/css/index copy.css
@@ -0,0 +1,62 @@
+ 
+      .sticky-sidebar {
+        border: none;
+      }
+
+      .list-group-item {
+        border: none;
+      }
+       
+      .code-wrapper {
+        position: relative;
+      }
+      .copy-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        padding: 5px;
+        background-color: #f4f4f4;
+        border: none;
+        border-radius: 3px;
+        cursor: pointer;
+      }
+
+      #maincontent {
+        margin-left: 20px;
+      }
+
+      #contentlist {
+        margin-left: 55px;
+        list-style-type: none;
+        text-align: left;
+        border:none;
+      }
+
+      .btn-group-vertical {
+        background-color:lightslategrey;
+        list-style-type: none;
+        border:none;
+        width: 100%;
+      }
+
+      .dropdown-menu {
+        background-color:lightslategrey;
+        left: 32px;
+      }
+
+      .dropdown-item1 {
+        display: block;
+        width: 100%;
+        padding: 0.25rem 1.5rem;
+        clear: both;
+        font-weight: 400;
+        color: #ffffff;
+        text-align: inherit;
+        white-space: nowrap;
+        background-color:lightslategrey;
+        border: 0;
+        
+      }
+      .container-fluid p{
+        line-height: 50px;
+      }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 32be090..dff9710 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,33 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <script src="./js/index.js"></script>
+    <script src="./js/config.js"></script>
+ 
+  <link rel="stylesheet" href="./DeveloperGuide/css/prism.min.css" />
+
+  <script src="./DeveloperGuide/js/prism.js"></script>
+  <script src="./DeveloperGuide/js/jquery.min.js"></script>
+<style>
+  /* 婊氬姩鏉℃牱寮� */
+ ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: #fff;
+ }
+ /* 婊氬姩鏉℃粦鍧楋紙閲岄潰灏忔柟鍧楋級 */
+ ::-webkit-scrollbar-thumb {
+     border-radius: 4px;
+     height: 6px;
+     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+     background: #d5d5d5
+ }
+ /* 婊氬姩鏉¤建閬� */
+ ::-webkit-scrollbar-track {
+     border-radius: 4px;
+     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+     background: #fff;
+ }
+</style>
     <title>SmartEarth</title>
   </head>
   <body>
@@ -20,6 +46,6 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+ 
   </body>
 </html>
diff --git a/public/js/config.js b/public/js/config.js
new file mode 100644
index 0000000..2dcef79
--- /dev/null
+++ b/public/js/config.js
@@ -0,0 +1,19 @@
+
+// 鍒ゆ柇鏄惁涓哄唴缃戠綉璁块棶
+var isWeb =  location.hostname.indexOf("192.168")>-1;
+//鏄惁涓虹敓浜х幆澧�
+const webUrl = location.href.indexOf("/web") > -1 ? "/web" : "";
+var host = isWeb?location.hostname:"";
+
+var port = isWeb? location.port:"";
+ var url = "http://"+host+":"+port+webUrl;
+ console.log(host);
+const config = {
+    //鏈湴html鏂囦欢璺緞 
+    htmUlr:url,
+    // FileJS
+    jsUrl:url+'data/fileTree.js'
+
+
+}
+console.log(config.htmUlr);
\ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
deleted file mode 100644
index e69de29..0000000
--- a/public/js/index.js
+++ /dev/null
diff --git a/src/App.vue b/src/App.vue
index 09a088f..2841141 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,4 +2,7 @@
   <router-view />
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+
+
+</style>
diff --git a/src/api/api.js b/src/api/api.js
index e584780..6fde77f 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -13,3 +13,10 @@
 //   //璇锋眰鍦板潃
 //   return request.get("weatherController/query", { params: params });
 // }
+
+
+// 鑾峰彇html鍐呭
+// export function queryHtmlDat(url) {
+//   //璇锋眰鍦板潃
+//   return request.get( config.htmUlr +url);
+// }
diff --git a/src/main.ts b/src/main.ts
index 9c8e937..9e35397 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,4 +15,5 @@
 import "./assets/css/global.css";
 import "amfe-flexible/index";
 // import "lib-flexible/flexible";
+ 
 createApp(App).use(ElementPlus).use(store).use(router).mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
index c178c5e..7104350 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,6 +10,7 @@
 import CIM from "../views/CIM.vue";
 import ParallelWorld from "../views/ParallelWorld.vue";
 import WebGIS from "../views/WebGIS.vue";
+import HomeDoc from "../views/HomeDoc.vue";
 import index from "../views/Index.vue";
 import solution from "../views/Solution.vue";
 import serviceSupport from "../views/ServiceSupport.vue";
@@ -66,6 +67,16 @@
         },
       },
 
+      {
+        path: "/HomeDoc",
+        component: HomeDoc,
+        name: "HomeDoc",
+        meta: {
+          title: "HomeDoc",
+          // requireAuth: true, // 鏍囪瘑璇ヨ矾鐢辨槸鍚﹂渶瑕佺櫥褰�
+        },
+      },
+
 
 
       
diff --git a/src/store/index.ts b/src/store/index.ts
index 9e1c7d3..7a09b67 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,7 +1,9 @@
 import { createStore } from "vuex";
 
 export default createStore({
-  state: {},
+  state: {
+    showFlag:false,
+  },
   mutations: {},
   actions: {},
   modules: {},
diff --git a/src/utils/request.js b/src/utils/request.js
index 2761010..6457b16 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -27,7 +27,7 @@
     //   config.headers["X-Token"] = getToken();
     // }
     //鍔犺浇loading
-    store.commit("UPDATE_API_COUNT", "add");
+    // store.commit("UPDATE_API_COUNT", "add");
     return config;
   },
   (error) => {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index db7059d..e88ecf0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -30,7 +30,7 @@
     <div class="flex-grow" />
   </el-menu>
   <router-view />
-  <div class="footer">
+  <div class="footer" v-if="showFooterFlag">
     <div class="footer_bg">
       <div class="footer_content">
         <ul>
@@ -115,13 +115,19 @@
 const FW = () => {
   router.push({ path: "/serviceSupport" });
 };
-const stMenuClick=(res)=>{
-  router.push({ path: res});
+const stMenuClick = (res) => {
+  router.push({ path: res });
 }
+const showFooterFlag = ref(true);
 watch(
   () => router.currentRoute.value.path,
   (toPath) => {
     activeIndex.value = toPath;
+    if (toPath.indexOf("HomeDoc") > -1) {
+      showFooterFlag.value = false;
+    }else{
+      showFooterFlag.value = true;
+    }
   },
   { immediate: true, deep: true }
 );
@@ -131,26 +137,26 @@
     var elementsLeft = document.querySelectorAll('.contentRight_l_left');
     var elementsRight = document.querySelectorAll('.contentRight_l_rgiht');
 
-    
+
     for (var i = 0; i < elementsLeft.length; i++) {
-          var elementLeft = elementsLeft[i];
-          var elementRight = elementsRight[i];
-          var positionLeft = elementLeft.getBoundingClientRect().top;
-          var positionRight = elementRight.getBoundingClientRect().top;
-          var screenHeight = window.innerHeight;
+      var elementLeft = elementsLeft[i];
+      var elementRight = elementsRight[i];
+      var positionLeft = elementLeft.getBoundingClientRect().top;
+      var positionRight = elementRight.getBoundingClientRect().top;
+      var screenHeight = window.innerHeight;
 
-          if (positionLeft - screenHeight <= 0) {
-            elementLeft.style.opacity = 1;
-            elementLeft.style.transform = 'translateX(0)';
-          }
+      if (positionLeft - screenHeight <= 0) {
+        elementLeft.style.opacity = 1;
+        elementLeft.style.transform = 'translateX(0)';
+      }
 
-          if (positionRight - screenHeight <= 0) {
-            elementRight.style.opacity = 1;
-            elementRight.style.transform = 'translateX(0)';
-          }
-        }
+      if (positionRight - screenHeight <= 0) {
+        elementRight.style.opacity = 1;
+        elementRight.style.transform = 'translateX(0)';
+      }
+    }
   });
- });
+});
 </script>
 <style lang="less" scoped>
 .logo_box {
@@ -173,7 +179,7 @@
 
 .el-menu_body {
   width: 100%;
-  height: 80px;
+  height: 60px;
   padding-left: 180px !important;
   padding-right: 180px;
   border-bottom: 0 !important;
diff --git a/src/views/HomeDoc.vue b/src/views/HomeDoc.vue
new file mode 100644
index 0000000..5a831fa
--- /dev/null
+++ b/src/views/HomeDoc.vue
@@ -0,0 +1,199 @@
+<template>
+    <div class="contentBox">
+
+        <div class="leftTree">
+            <el-input v-model="filterText" placeholder="鐩綍鎼滅储..."></el-input>
+            <div class="treeTitle">
+                <div class="title1">鐩綍</div>
+                <div class="title2" @click="setunfoldflagChange">
+                    <span> {{ treeTitle }}</span>
+
+                    <el-icon v-show="unfoldflag" style="color:gray">
+                        <ArrowUpBold />
+                    </el-icon>
+                    <el-icon v-show="!unfoldflag" style="color:gray">
+                        <ArrowDownBold />
+                    </el-icon>
+                </div>
+            </div>
+
+        </div>
+        <div class="rightContent">
+            <div class="htmlContent" v-html="docHtml"></div>
+            <div class="treeMenu">
+                <div class="menuBox">
+                    <ul>
+                        <li class="meuLi" :class="{ 'menuLiChange': menuFlag == item.name }"
+                            v-for="(item, index) in menOption" :key="index">{{ item.name }}</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {
+    ref,
+    onMounted,
+    onBeforeUnmount,
+    reactive,
+    defineProps,
+    defineEmits,
+    nextTick,
+} from "vue";
+import {
+    ArrowUpBold,
+    ArrowDownBold
+
+} from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus'
+import axios from 'axios'
+const filterText = ref("");
+const treeTitle = ref("鍏ㄩ儴灞曞紑");
+const unfoldflag = ref(true);
+const docHtml = ref(null);
+const menOption = ref([]);
+const menuFlag= ref(null)
+const setunfoldflagChange = () => {
+    unfoldflag.value = !unfoldflag.value;
+    treeTitle.value = unfoldflag.value ? "鍏ㄩ儴鏀惰捣" : "鍏ㄩ儴灞曞紑"
+}
+const getDocHtml = async () => {
+    const url = config.htmUlr + "/DeveloperGuide/Doc/HomeDoc.html";
+    var data = await axios.get(url);
+
+    docHtml.value = data.data;
+    nextTick(() => {
+        var obj = document.querySelectorAll("h1")
+        var std = [];
+        for (var i in obj) {
+            std.push({
+                name: obj[i].innerHTML
+            })
+        }
+        menOption.value = std;
+        menuFlag.value= std[0].name
+    })
+
+    // window.addEventListener("click", (e) => {
+    //     if (e.target.id == "copy") {
+    //         var children = e.target.parentNode.children;
+    //         if (children.length <= 0) return;
+    //         for (var i in children) {
+
+    //             if (children[i].localName == "pre") {
+
+    //                 setCopyHandle( children[i].children[0].innerHTML)
+    //                 return
+    //             }
+    //         }
+    //     }
+
+    // })
+}
+
+const setCopyHandle = (content) => {
+
+}
+
+
+const setTreeDataStart = () => {
+    setunfoldflagChange();
+    getDocHtml();
+};
+
+onMounted(() => {
+
+    setTreeDataStart();
+})
+
+</script>
+
+<style lang="less" scoped>
+.contentBox {
+    width: 100%;
+    height: calc(100% - 60px);
+    padding-top: 60px;
+    cursor: pointer;
+    display: flex;
+    overflow: auto;
+
+    .leftTree {
+        height: calc(100% - 40px);
+        width: 200px;
+        border-right: 1px solid rgba(0, 0, 0, .06);
+        padding: 20px 28px;
+
+        .treeTitle {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+            align-items: center;
+
+            .title1 {
+                font-size: 18px;
+                font-weight: 600;
+                color: #333;
+
+            }
+
+            .title2 {
+                font-size: 10px;
+
+                span {
+                    margin-right: 5px;
+                }
+
+            }
+        }
+    }
+
+    .rightContent {
+        flex: 1;
+        display: flex;
+
+        .treeMenu {
+            width: 10%;
+            height: 100%;
+
+            // position: relative;
+            .menuBox {
+                width: calc(10% - 100px);
+                // right: 20px;
+                margin-top: 20px;
+                padding: 20px;
+                position: absolute;
+                border-left: 1px solid rgba(0, 0, 0, .06);
+
+                .meuLi {
+                    line-height: 40px;
+                    padding-left: 5px;
+                    ;
+                    border-left: 2px solid white;
+                }
+
+                .meuLi:hover {
+                    color: #4b96e6;
+                }
+
+                .menuLiChange {
+                    color: #4b96e6;
+                    border-color: #4b96e6;
+                }
+            }
+        }
+
+        .htmlContent {
+            flex: 1;
+            height: 100%;
+            // overflow: auto;
+        }
+    }
+
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 5d9cf74..940fc59 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -617,7 +617,8 @@
   background: rgba(25, 34, 54, 1);
   position: relative;
   padding-bottom: 100px;
-   cursor: pointer;
+  cursor: pointer;
+
   .content_bottom_bg {
     width: 100%;
     position: absolute;
@@ -647,15 +648,20 @@
     align-items: center;
     justify-content: space-around;
     flex-wrap: wrap;
+    z-index: 30;
+    position: relative;
   }
 
   .content_bottom_b_c {
     width: 536px;
+
   }
 
   .content_bottom_b_c:hover {
     transform: scale(1.1);
   }
+
+
 
   .content_bottom_b_c_b {
     width: 536px;
@@ -673,6 +679,7 @@
       background-size: 100% 100%;
     }
 
+
     .content_bottom_b_c_b2 {
       width: 512px;
       height: 288px;
@@ -688,6 +695,12 @@
     }
   }
 
+  .content_bottom_b_c_b:hover {
+    .content_bottom_b_c {
+      transform: scale(1.1);
+    }
+  }
+
   .content_bottom_b_c_n {
     padding-top: 16px
       /* 16/192 */
@@ -699,5 +712,13 @@
     color: #ffffff;
     text-align: center;
   }
+  
+  .content_bottom_b_c_b1:hover {
+      .content_bottom_b_c_b {
+        transform: scale(1.1);
+      }
+
+
+    }
 }
 </style>

--
Gitblit v1.9.3