diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
index 5feca1506..8f7ae09bb 100644
--- a/docs/assets/css/style.css
+++ b/docs/assets/css/style.css
@@ -86,7 +86,7 @@ input[type="file"] {
     justify-content: space-between;
     height: 100%;
     line-height: 1;
-    gap: 30px;
+    gap: 20px;
 }
 
 .header .checkbox {
diff --git a/docs/assets/js/common.js b/docs/assets/js/common.js
index f6e71c2f6..64b94352e 100644
--- a/docs/assets/js/common.js
+++ b/docs/assets/js/common.js
@@ -10,16 +10,30 @@
     var $run = document.querySelector('.run');
     var $popups = document.querySelector('.popups');
     var $console = document.querySelector('.console');
-    var $prod = document.querySelector('#pro');
-    var $typeScript = document.querySelector('#typeScript');
+    var $prod = document.querySelector('#prod');
+    var $ts = document.querySelector('#ts');
+    var $code = document.querySelector('#code');
+    var $log = document.querySelector('#log');
     var $file = document.querySelector('#file');
+    var $editor = document.querySelector('#editor');
 
-    var loadedLibs = [];
     window['consoleLog']($console);
+
     $prod.checked = localStorage.getItem('prod') === 'true';
-    $typeScript.checked = localStorage.getItem('typeScript') === 'true';
+    $ts.checked = localStorage.getItem('ts') === 'true';
+    $code.checked = localStorage.getItem('code') === 'true';
+    $log.checked = localStorage.getItem('log') === 'true';
+
+    if ($code.checked) {
+        $editor.style.display = 'none';
+    }
+
+    if ($log.checked) {
+        $console.style.display = 'none';
+    }
 
     var editor = null;
+    var loadedLibs = [];
     require.config({ paths: { vs: './assets/js/vs' } });
     require(['vs/editor/editor.main'], async function () {
         monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
@@ -73,7 +87,7 @@
                     "\turl: '/assets/sample/video.mp4',",
                     '});',
                 ].join('\n'),
-                $typeScript.checked ? 'typescript' : 'javascript',
+                $ts.checked ? 'typescript' : 'javascript',
             ),
         });
     });
@@ -230,8 +244,18 @@
         window.location.reload();
     });
 
-    $typeScript.addEventListener('change', function () {
-        localStorage.setItem('typeScript', $typeScript.checked ? 'true' : 'false');
+    $ts.addEventListener('change', function () {
+        localStorage.setItem('ts', $ts.checked ? 'true' : 'false');
+        window.location.reload();
+    });
+
+    $code.addEventListener('change', function () {
+        localStorage.setItem('code', $code.checked ? 'true' : 'false');
+        window.location.reload();
+    });
+
+    $log.addEventListener('change', function () {
+        localStorage.setItem('log', $log.checked ? 'true' : 'false');
         window.location.reload();
     });
 
diff --git a/docs/index.html b/docs/index.html
index 5af9942cf..b8878e870 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -96,16 +96,30 @@
         <div class="tool">
             <div class="qq">QQ群•320881312</div>
             <div class="checkbox">
-                <input type="checkbox" id="typeScript"><label for="typeScript">TS</label>
+                <input type="checkbox" id="ts">
+                <label for="ts">TS</label>
             </div>
             <div class="checkbox">
-                <input type="checkbox" id="pro"><label for="pro">PROD</label>
+                <input type="checkbox" id="prod">
+                <label for="prod">Prod</label>
+            </div>
+            <div class="checkbox">
+                <input type="checkbox" id="code">
+                <label for="code">
+                    <del>Code</del>
+                </label>
+            </div>
+            <div class="checkbox">
+                <input type="checkbox" id="log">
+                <label for="log">
+                    <del>Log</del>
+                </label>
             </div>
             <div class="run">▶ Run Code</div>
         </div>
     </header>
     <div class="main">
-        <div class="part-left">
+        <div id="editor" class="part-left">
             <div class="libs">
                 <div class="upload">
                     Upload Files
diff --git a/docs/uncompiled/artplayer/index.js b/docs/uncompiled/artplayer/index.js
index 76258a033..f95beb78b 100644
--- a/docs/uncompiled/artplayer/index.js
+++ b/docs/uncompiled/artplayer/index.js
@@ -242,7 +242,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2024-05-27 11:26:39";
+        return "2024-05-28 10:51:43";
     }
     static get config() {
         return 0, _configDefault.default;