diff --git a/Admin/View/Document/view.sc.php b/Admin/View/Document/view.sc.php
index 62f10c1..8327eb5 100644
--- a/Admin/View/Document/view.sc.php
+++ b/Admin/View/Document/view.sc.php
@@ -12,6 +12,12 @@ use Sc\Util\HtmlStructure\Html\Js\JsVar;
 
 Html::create("Api文档");
 Html::loadThemeResource('ElementUI');
+Html::css()->load('https://unpkg.com/codemirror@5.65.8/lib/codemirror.css');
+Html::css()->load('https://unpkg.com/codemirror@5.65.8/theme/material.css');
+Html::css()->load('https://cdn.jsdelivr.net/npm/jsoneditor@9.10.4/dist/jsoneditor.min.css');
+Html::js()->load('https://unpkg.com/codemirror@5.65.8/lib/codemirror.js');
+Html::js()->load('https://unpkg.com/codemirror@5.65.8/mode/javascript/javascript.js');
+Html::js()->load('https://cdn.jsdelivr.net/npm/jsoneditor@9.10.4/dist/jsoneditor.min.js');
 Html::css()->addCss(<<<CSS
 .menu{
     width: 200px;
@@ -102,8 +108,9 @@ $apiInfo = El::double('el-card')->setAttr('v-if', 'currentApiInfo')->append(
         El::fromCode("{{ ApiInfo.host }}{{ currentApiInfo.url }}"),
         El::fromCode("<el-icon class='cur send' title='发送测试请求'><Promotion /></el-icon>"),
     ),
-    El::double('el-tabs')->setAttr('v-model', 'showApiInfo')->append(
-        El::double('el-tab-pane')->setAttr('label', '请求参数')->append(
+    El::double('el-tabs')->setAttr('v-model', 'showApiInfo')
+        ->setAttr(':tab-change', 'apiShowType')->append(
+        El::double('el-tab-pane')->setAttr('label', '请求参数')->setAttr('name', 'Form')->append(
             El::double('el-form')->setAttrs([
                 'ref' => 'form',
                 'label-position' => 'top',
@@ -120,7 +127,10 @@ $apiInfo = El::double('el-card')->setAttr('v-if', 'currentApiInfo')->append(
                             ->setAttr(':placeholder', "(param.type === 'Array' || param.type === 'Object') ? '请使用json组件模拟数据' : ''")
                     )
             )
-        )
+        ),
+        El::double('el-tab-pane')->setAttr('label', 'Json')->setAttr('name', 'Json')->append(
+            El::fromCode('<div id="paramShowJson" style="width: 100%; height: calc(100% -  173px);"></div>'),
+        ),
     )
 );
 
@@ -215,6 +225,17 @@ $vue->addMethod('paramsResolve', JsFunc::anonymous(['params'])->code(
     JsCode::raw('return form')
 ));
 
+$vue->addMethod('apiShowType', JsFunc::anonymous(['name'])->code(
+    JsCode::raw()
+));
+$vue->addMethod('jsonEditorInitOptions', JsFunc::anonymous(['type', 'onChange'])->code(
+    JsCode::raw("return {
+                    mode: type,
+                    modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
+                    onChangeText: onChange,
+                }")
+));
+
 return El::double('div')->setAttr('style', 'display: flex;')->append(
     $menu,
     El::double('e-row')->setAttr('style', 'flex: 1;')->append(