From 12e123462eb1cdfe82fc85318119e3e7a2278de5 Mon Sep 17 00:00:00 2001
From: harveyshao <harveyshao@tencent.com>
Date: Fri, 3 Sep 2021 14:22:09 +0800
Subject: [PATCH] opt index.css

---
 frame.js                    |    2 +-
 page/index.css              | 1005 +++++++++++++++++------------------
 panel/action.js             |    9 +-
 panel/cmd.css               |    6 +
 panel/cmd.js                |    2 +-
 panel/footer.css            |    6 +-
 panel/header.css            |   10 +-
 panel/header.js             |   17 +-
 panel/river.css             |   13 +-
 plugin/local/code/inner.css |    3 -
 plugin/local/wiki/draw.js   |    2 +-
 plugin/local/wiki/word.css  |  117 ++--
 plugin/local/wiki/word.js   |    2 +-
 plugin/state.js             |    8 +-
 14 files changed, 579 insertions(+), 623 deletions(-)

diff --git a/frame.js b/frame.js
index 12119fe9..18ad48de 100644
--- a/frame.js
+++ b/frame.js
@@ -660,7 +660,7 @@ Volcanos("onmotion", {help: "动态特效", list: [], _init: function(can, targe
         auto: function(can, target) { var that = this
             can.page.Select(can, target||can._output, ".story", function(item) { var meta = item.dataset
                 can.page.Modify(can, item, {style: can.base.Obj(meta.style)})
-                can.core.CallFunc(that._hash[meta.type], [can, meta, target])
+                can.core.CallFunc(that._hash[meta.type], [can, meta, target||can._output])
             })
         },
     },
diff --git a/page/index.css b/page/index.css
index 753c2227..20e87662 100644
--- a/page/index.css
+++ b/page/index.css
@@ -1,80 +1,167 @@
-body.mobile.landscape fieldset.Header.head {
-    position:unset;
-}
-body.mobile.landscape fieldset.Header.head div.state.time {
-    display:block;
-}
-body.mobile.landscape fieldset.Footer.foot {
-    position:unset;
-}
-body.mobile.landscape fieldset.Action.main {
-    margin-top:0; margin-bottom:0;
-}
-body.mobile fieldset.Header.head {
-    position:fixed; top:0;
-    width:-webkit-fill-available;
-    height:2em; font-size:24px;
-    background-color:#000000b8;
-    z-index:10;
-}
-body.mobile fieldset.Header.head div.output {
-    height:2em;
-}
-body.mobile fieldset.Header>div.output>div {
-    height:1.5em;
-}
-body.mobile fieldset.Header>div.output div.menu {
-    height:1.5em;
-}
-body.mobile fieldset.Header.head div.state.time {
-    display:none;
-}
-body.mobile fieldset.Footer.foot {
-    position:fixed; bottom:0;
-    width:-webkit-fill-available;
-    height:64px; font-size:24px;
-    background-color:#000000b8;
-    display:none;
-    z-index:10;
-}
-body.mobile fieldset.River.left {
-    position:fixed; top:48px;
-    background-color:#243950bf;
-    min-width:240px; font-size:24px;
-    /* width:-webkit-fill-available; */
-    z-index:10;
-}
-body.mobile fieldset.River>div.output div.list div.item {
-    font-size:24px;
-}
-body.mobile fieldset.Action.main.cmd {
-    margin-top:0; margin-bottom:0;
-}
-body.mobile fieldset.Action.main {
-    margin-top:48px; margin-bottom:64px;
-}
-body.mobile input {
-    font-size:18px;
-}
-body.mobile select {
-    font-size:18px;
-}
-body.mobile div.carte {
-    font-size:24px;
-}
-body.mobile div.input.login input {
-    font-size:24px
-}
-
-a {
-
-    color:yellow;
-}
 body {
     margin:0; padding:0;
     background:black;
     color:cyan;
 }
+a {
+    color:yellow;
+}
+h1, h2, h3 {
+    clear:both;
+}
+h1:hover, h2:hover, h3:hover {
+    background:green;
+    cursor:pointer;
+}
+div.item {
+    cursor:pointer;
+}
+div.code {
+    background-color:#343a3445; color:white;
+    font-size:14px; font-family:monospace;
+    box-shadow: 4px 4px 20px 4px #626bd0;
+    padding:10px; border:solid 3px green;
+    text-align:left; white-space:pre;
+    overflow:auto; clear:both;
+}
+div.hidden {
+    display:none;
+}
+div.story {
+    text-align:left;
+}
+div.story[data-type=spark] {
+    background-color:#2169a9a6; color:white;
+    box-shadow: 4px 4px 10px 1px #626bd0;
+    padding:4px 10px; margin:10px 0px;
+    border-left:solid 4px blue;
+}
+div.story[data-type=spark] span:hover {
+    box-shadow: 4px 4px 10px 1px #29318e;
+    background-color:#c10c8a;
+    cursor:copy;
+}
+
+select {
+    height:25px; font-size:14px;
+    box-shadow: 4px 4px 10px 1px #626bd0;
+    background-color:black; color:cyan;
+    padding:0 10px;
+    cursor:pointer;
+}
+option {
+    font-family:monospace;
+}
+
+input[type=button] {
+    background-color:black; color:cyan;
+    letter-spacing:4px;
+    padding-left:10px;
+    cursor:pointer;
+}
+input[type=button]:hover {
+    background-color:gray; color:cyan;
+}
+input[type=password] {
+    width:82px; height:21px; font-size:16px;
+    box-shadow: 4px 4px 10px 1px #626bd0;
+    background-color:cyan; color:black;
+    padding: 0 4px;
+}
+input[type=text] {
+    width:82px; height:21px; font-size:16px;
+    box-shadow:4px 4px 10px 1px #626bd0;
+    background-color:cyan; color:black;
+    padding:0 4px;
+}
+input[type=text]:hover {
+    background-color:white;
+}
+input[name=date] {
+    width:150px;
+}
+input[name=path] {
+    width:160px;
+}
+input[name=line] {
+    width:40px;
+}
+input[name=text] {
+    width:160px;
+}
+input[name=url] {
+    width:320px;
+}
+input[name=cmd] {
+    background-color:black; color:white;
+    width:240px;
+}
+input[name=cmd]:hover {
+    background-color:white; color:black;
+}
+textarea {
+    width:400px; height:60px;
+    background-color:cyan;
+}
+
+table.layout {
+    margin:0; border:0; padding:0;
+    border-spacing:0;
+}
+table.layout tr {
+    margin:0; border:0; padding:0;
+}
+table.layout td {
+    margin:0; border:0; padding:0;
+    vertical-align:top;
+}
+table.layout th {
+    margin:0; border:0; padding:0;
+}
+
+table.content {
+    border:0; white-space:pre;
+    font-size:14px; font-family:monospace;
+    overflow: auto;
+}
+table.content tr {
+    background-color:#04272f45;
+}
+table.content tr.select {
+    background-color:green;
+}
+table.content tr:hover {
+    background-color:green;
+}
+table.content th {
+    background-color:#0fbd45;
+    padding:2px 6px;
+    cursor:pointer;
+}
+table.content th:hover {
+    background-color:red;
+}
+table.content td {
+    padding:2px 6px;
+    overflow:auto;
+}
+table.content td.done {
+    background-color:green;
+}
+table.content td.select {
+    background-color:red;
+}
+table.content td:hover {
+    background-color:red;
+}
+
+td>input[type=button][name=remove] {
+    background-color:red;
+}
+td>input[type=button][name=create] {
+    background-color:blue;
+}
+
 legend {
     box-shadow:4px 4px 20px 4px #626bd0;
     cursor:pointer;
@@ -82,6 +169,103 @@ legend {
 fieldset {
     margin:0; border:0; padding:0;
 }
+fieldset>form.option {
+    float:left;
+}
+fieldset>form.option>div.item {
+    float:left; margin-right:3px;
+    min-height:25px; vertical-align:middle;
+}
+fieldset>form.option>div.item>label {
+    display:none;
+}
+fieldset>form.option>div.item input.args.char {
+    width:20px;
+}
+fieldset>form.option>div.item input.args.tiny {
+    width:40px;
+}
+fieldset>form.option>div.item input.args.long {
+    width:240px;
+}
+fieldset>form.option>div.item input.args.full {
+    width:480px;
+}
+fieldset>form.option>div.item input.args[name=ID] {
+    width:48px;
+}
+fieldset>form.option>div.item input.args[name=id] {
+    width:48px;
+}
+fieldset>form.option>div.item input.args[name=limit] {
+    width:48px;
+}
+fieldset>form.option>div.item input.args[name=offset] {
+    width:48px;
+}
+fieldset>form.option>div.item input.args[name=offend] {
+    width:48px;
+}
+fieldset>form.option>div.item.textarea {
+    clear:both; margin-top:4px;
+}
+
+fieldset>div.action {
+    float:left;
+}
+fieldset>div.action>div.item {
+    float:left; margin-right:3px;
+    vertical-align:middle;
+}
+fieldset>div.action>div.item.space {
+    width:10px;
+}
+fieldset div.action>div.item>label {
+    display:none;
+}
+fieldset>div.status {
+    clear:both;
+}
+fieldset>div.status>div.item {
+    float:left; padding:4px;
+    height:18px;
+}
+fieldset>div.status>div.item>label {
+    font-size:10px; color:#504242e0;
+}
+
+fieldset>div.output {
+    clear:both; overflow:auto;
+    position:relative;
+}
+fieldset>div.output div.project {
+    min-width:88px; max-width:240px;
+    float:left; overflow:auto;
+}
+fieldset>div.output div.project div.item {
+    padding:2px 10px; text-align:left;
+    clear:both; cursor:pointer;
+    white-space:pre;
+}
+fieldset>div.output div.project div.item.select {
+    background-color:red;
+}
+fieldset>div.output div.project div.item:hover {
+    background-color:red;
+}
+fieldset>div.output div.project div.list {
+    margin-left:10px;
+}
+fieldset>div.output td.project {
+    background-color:#435f8c8c;
+}
+fieldset>div.output td.profile {
+    background-color:#71909c91;
+}
+fieldset>div.output td.profile div.profile {
+    overflow:auto;
+}
+
 fieldset.panel>legend {
     display:none;
 }
@@ -97,421 +281,15 @@ fieldset.story>div.status {
     border-top:1px solid darkcyan;
 }
 fieldset.float {
-    position:absolute;
     background-color:#023531cf;
+    position:absolute;
 }
 fieldset.float>legend {
     display:none;
 }
-
-input[name=cmd] {
-    width:160px;
-}
-input[name=date] {
-    width:150px;
-}
-input[name=text] {
-    width:160px;
-}
-input[type=text] {
-    height:21px; font-size:16px;
-    box-shadow: 4px 4px 10px 1px #626bd0;
-    background-color:cyan; color:black;
-    padding: 0 4px;
-}
-input[type=password] {
-    box-shadow: 4px 4px 10px 1px #626bd0;
-    background-color:cyan; color:black;
-    padding: 0 4px;
-}
-input[type=text]:hover {
-    background-color:white;
-}
-input[type=button] {
-    background-color:black; color:cyan;
-    letter-spacing:4px;
-    padding-left:10px;
-    cursor:pointer;
-}
-input[type=button]:hover {
-    background-color:gray; color:cyan;
-}
-td>input[type=button][name=remove] {
-    background-color:red;
-
-}
-td>input[type=button][name=create] {
-    background-color:blue;
-}
-select {
-    box-shadow: 4px 4px 10px 1px #626bd0;
-    background-color:black; color:cyan;
-    padding:0 10px;
-    cursor:pointer;
-}
-option {
-    font-family:monospace;
-}
-
-table.layout {
-    margin:0; border:0; padding:0;
-    border-spacing:0;
-}
-table.layout tr {
-    margin:0;border:0;padding:0;
-}
-table.layout td {
-    margin:0; border:0; padding:0;
-    vertical-align:top;
-}
-table.layout th {
-    margin:0;border:0;padding:0;
-}
-
-table.content {
-    /* width:-webkit-fill-available; */
-    border:0; white-space:pre;
-    font-size:14px; font-family:monospace;
-    overflow: auto;
-}
-table.content tr {
-    background-color:#04272f45;
-}
-table.content th {
-    background-color:#0fbd45;
-    padding:2px 6px;
-    cursor:pointer;
-}
-table.content td {
-    padding:2px 6px;
-    overflow:auto;
-}
-table.content td.select {
-    background-color:red;
-}
-table.content td.select {
-    background-color:red;
-}
-table.content td.done {
-    background-color:green;
-}
-
-table.content tr.select {
-    background-color:green;
-}
-table.content tr:hover {
-    background-color:green;
-}
-table.content th:hover {
-    background-color:red;
-}
-table.content td:hover {
-    background-color:red;
-}
-
-h1 {
-    margin:0;
-    clear:both;
-}
-h2 {
-    clear:both;
-}
-h3 {
-    clear:both;
-}
-h1:hover {
-    background:green;
-    cursor:pointer;
-}
-h2:hover {
-    background:green;
-    cursor:pointer;
-}
-h3:hover {
-    background:green;
-    cursor:pointer;
-}
-div.item {
-    cursor:pointer;
-}
-div.code {
-    background-color:#343a3445; color:white;
-    font-size:14px; font-family:monospace;
-    box-shadow: 4px 4px 20px 4px #626bd0;
-    padding:10px; border:solid 3px green;
-    text-align:left; white-space:pre;
-    overflow:auto;
-    clear:both;
-}
-div.story {
-    text-align:left;
-}
-div.hidden {
-    display:none;
-}
-
-div.toast {
-    background:#0e3369b3; color:yellow;
-    position:fixed; z-index:100;
-    padding:5px; overflow:auto;
-}
-div.toast a {
-    color:yellow;
-}
-div.toast div.title {
-    float:left; word-break:break-all;
-    color:#cae850; font-size:14px;
-    cursor:copy;
-}
-div.toast div.duration {
-    color:gray; font-size:14px;
-    float:right;
-    cursor:pointer;
-}
-div.toast div.content {
-    text-align:center;
-    white-space:pre;
-    clear:both;
-}
-div.toast div.action div.item {
-    float:left;
-}
-div.toast div.progress {
-    height:10px; border:solid 2px green;
-    margin-left:-2px;
-    clear:both;
-}
-div.toast div.progress div.current {
-    height:10px; background:red;
-}
-
-div.carte {
-    position:fixed;
-    background:#295b61;
-    color:white;
-    padding:4px;
-    z-index:30;
-    min-width:80px;
-}
-div.carte div.item {
-    padding:3px 12px;
-}
-div.carte div.item:hover {
-    background:red;
-}
-body>div.input {
-    position:fixed;
-    background-color:#0d4142a6;
-    z-index:50;
-}
-div.input textarea {
-    box-shadow: 4px 4px 10px 1px #626bd0;
-    border:2px inset #14a58e;
-    width:165px; height:60px;
-    background-color: cyan;
-    padding:4px;
-
-}
-div.input div.item {
-    float:left;
-}
-div.input.login {
-    padding:10px;
-}
-div.input.login input {
-    font-size:18px
-}
-
-div.upload {
-    background:black; color:yellow;
-    position:fixed;
-    padding:5px;
-    z-index:50;
-}
-div.upload div.item {
-    float:left;
-}
-div.upload div.output {
-    border:solid 1px red;
-    clear:both;
-}
-div.upload div.progress {
-    width:0; height:10px;
-    background:red;
-}
-div.upload div.status div.cost {
-    float:left;
-}
-div.upload div.status div.show {
-    float:right;
-}
-div.upload div.status div.size {
-    text-align:center;
-}
-div.upload input[type=file] {
-    width: 240px;
-}
-
-div.story[data-type=spark] {
-    background-color:#2169a9a6; color:white;
-    box-shadow: 4px 4px 10px 1px #626bd0;
-    padding:4px 10px; margin:10px 0px;
-    border-left:solid 4px blue;
-}
-div.story[data-type=spark] span:hover {
-    box-shadow: 4px 4px 10px 1px #29318e;
-    background-color:#c10c8a;
-    cursor:copy;
-}
-
-fieldset>form.option {
-    float:left;
-}
-fieldset>div.action {
-    float:left;
-}
-fieldset>form.option>div.item {
-    float:left; margin-right:3px;
-    min-height:25px; vertical-align:middle;
-}
-fieldset>form.option>div.item label {
-    display:none;
-}
-fieldset>form.option>div.item input.args.char {
-    width:20px;
-}
-fieldset>form.option>div.item input.args.tiny {
-    width:40px;
-}
-fieldset>form.option>div.item input.args {
-    width:82px; height:21px; font-size:16px;
-}
-fieldset>form.option>div.item input[name=path]:hover {
-    width:240px;
-}
-fieldset>form.option>div.item input[name=text] {
-    width:240px;
-}
-fieldset>form.option>div.item input[name=cmd] {
-    background-color:black; color:white;
-    width:160px;
-}
-fieldset>form.option>div.item input[name=id] {
-    width:48px;
-}
-fieldset>form.option>div.item input[name=ID] {
-    width:48px;
-}
-fieldset>form.option>div.item input[name=limit] {
-    width:48px;
-}
-fieldset>form.option>div.item input[name=offset] {
-    width:48px;
-}
-fieldset>form.option>div.item input[name=offend] {
-    width:48px;
-}
-fieldset>form.option>div.item input.args.cmd {
-    background-color:black; color:white;
-    width:160px;
-}
-fieldset>form.option>div.item input.args.long {
-    width:240px;
-}
-fieldset>form.option>div.item input.args.full {
-    width:480px;
-}
-fieldset>form.option>div.item input.args[name=url] {
-    width:320px;
-}
-fieldset>form.option>div.item input.opts {
-    width:80px;
-}
-fieldset>form.option>div.item select.args {
-    height:25px; font-size:14px;
-}
-fieldset>form.option>div.item textarea.args {
-    width:500px; height:50px;
-    background-color:cyan;
-}
-fieldset>form.option>div.item.textarea {
-    margin-top:4px;
-    clear:both;
-}
-
-fieldset div.action>div.item {
-    float:left; margin-right:3px;
-    /* height:28px; */
-    vertical-align:middle;
-}
-fieldset div.action>div.item.space {
-    width:10px;
-}
-fieldset div.action>div.item label {
-    display:none;
-}
-fieldset div.action>div.item select {
-    height:25px; font-size:14px;
-}
-
-fieldset>div.status>div.item {
-    float:left; padding:4px;
-    height:18px;
-}
-fieldset>div.status>div.item>label {
-    font-size:10px; color:#504242e0;
-}
-
-fieldset div.output {
-    clear:both;
-}
-fieldset>div.output td.project {
-    background-color:#435f8c8c;
-}
-fieldset>div.output td.profile {
-    background-color:#71909c91;
-}
-fieldset>div.output td.profile div.profile {
-    overflow:auto;
-}
-
-fieldset>div.output {
-    clear:both; overflow:auto;
-    position:relative;
-}
-fieldset>div.output div.code a {
-    color:yellow;
-}
-fieldset>div.output div.project {
-    min-width:88px; max-width:240px;
-    float:left; overflow:auto;
-}
-fieldset>div.output div.project div.item {
-    padding:2px 10px; text-align:left;
-    clear:both; cursor:pointer;
-    white-space:pre;
-}
-fieldset>div.output div.project div.item:hover {
-    background-color:red;
-}
-
-fieldset>div.output div.project div.item.select {
-    background-color:red;
-}
-fieldset>div.output div.project div.list {
-    margin-left:10px;
-}
-
-body>fieldset.float table {
+fieldset.float table {
     color:white;
 }
-body>fieldset.input table {
-    color:white;
-}
-body>fieldset.input td {
-    word-break:keep-all;
-}
-
 body>fieldset.input {
     position:fixed; top:32px;
     background-color:#0d4142a6;
@@ -521,6 +299,12 @@ body>fieldset.input {
 body>fieldset.input div.output {
     max-height:400px;
 }
+body>fieldset.input table {
+    color:white;
+}
+body>fieldset.input td {
+    word-break:keep-all;
+}
 body>fieldset.input.key {
     z-index:60;
 }
@@ -535,15 +319,129 @@ body>fieldset.input.date table td:hover {
     background-color:red;
 }
 
+body>div.toast {
+    background:#0e3369b3; color:yellow;
+    position:fixed; z-index:100;
+    padding:5px; overflow:auto;
+}
+body>div.toast a {
+    color:yellow;
+}
+body>div.toast div.title {
+    float:left; word-break:break-all;
+    color:#cae850; font-size:14px;
+    cursor:copy;
+}
+body>div.toast div.duration {
+    color:gray; font-size:14px;
+    float:right;
+    cursor:pointer;
+}
+body>div.toast div.content {
+    text-align:center;
+    white-space:pre;
+    clear:both;
+}
+body>div.toast div.action div.item {
+    float:left;
+}
+body>div.toast div.progress {
+    height:10px; border:solid 2px green;
+    margin-left:-2px;
+    clear:both;
+}
+body>div.toast div.progress div.current {
+    height:10px; background:red;
+}
+
+body>div.carte {
+    position:fixed;
+    background:#295b61;
+    color:white;
+    padding:4px;
+    z-index:30;
+    min-width:80px;
+}
+body>div.carte div.item {
+    padding:3px 12px;
+}
+body>div.carte div.item:hover {
+    background:red;
+}
+body>div.input {
+    position:fixed;
+    background-color:#0d4142a6;
+    z-index:50;
+}
+body>div.input input[type=text] {
+    width:171px;
+}
+body>div.input input[type=password] {
+    width:171px;
+}
+body>div.input textarea {
+    box-shadow: 4px 4px 10px 1px #626bd0;
+    border:2px inset #14a58e;
+    width:171px; height:60px;
+    background-color: cyan;
+    padding:4px;
+}
+body>div.input div.item {
+    float:left;
+}
+body>div.input.login {
+    padding:10px;
+}
+body>div.input.login input {
+    font-size:18px
+}
+
+body>div.upload {
+    background:black; color:yellow;
+    position:fixed;
+    padding:5px;
+    z-index:50;
+}
+body>div.upload div.item {
+    float:left;
+}
+body>div.upload div.output {
+    border:solid 1px red;
+    clear:both;
+}
+body>div.upload div.progress {
+    width:0; height:10px;
+    background:red;
+}
+body>div.upload div.status div.cost {
+    float:left;
+}
+body>div.upload div.status div.show {
+    float:right;
+}
+body>div.upload div.status div.size {
+    text-align:center;
+}
+body>div.upload input[type=file] {
+    width: 240px;
+}
+
 body.white {
     background-color:#052238bf;
     color:white;
 }
-body.white td>input[type=button][name=remove] {
-    background-color:red;
+body.white select {
+    background-color:#99CC66; color:white;
+    border-radius:10px 10px 10px 10px;
+    border:2px solid #99CC66;
 }
-body.white td>input[type=button][name=create] {
-    background-color:blue;
+body.white input[type=text] {
+    background-color:white; color:black;
+    border-radius:6px 6px 6px 6px;
+    border:2px solid #14a58e;
+}
+body.white input[type=text]:hover {
+    background-color:cyan;
 }
 body.white input[type=button] {
     background-color:#FF9900; color:white;
@@ -554,22 +452,11 @@ body.white input[type=button]:hover {
     background-color:#FFCC33;
     border:2px solid #FFCC33;
 }
-body.white input[type=text] {
-    background-color:white; color:black;
-    border-radius:6px 6px 6px 6px;
-    border:2px solid #14a58e;
+body.white td>input[type=button][name=remove] {
+    background-color:red;
 }
-body.white input[type=text]:hover {
-    background-color:cyan;
-}
-body.white div.input textarea {
-    border-radius:6px;
-    border:2px solid #14a58e;
-}
-body.white select {
-    background-color:#99CC66; color:white;
-    border-radius:10px 10px 10px 10px;
-    border:2px solid #99CC66;
+body.white td>input[type=button][name=create] {
+    background-color:blue;
 }
 
 body.white table {
@@ -613,6 +500,10 @@ body.white fieldset.Action fieldset.plugin legend {
 body.white fieldset.Action fieldset.plugin legend:hover {
     background-color:#6ee4e4;
 }
+body.white>div.input textarea {
+    border-radius:6px;
+    border:2px solid #14a58e;
+}
 
 body.print {
     background-color:white;
@@ -620,7 +511,18 @@ body.print {
 }
 body.print a {
     color:blue;
-
+}
+body.print select {
+    box-shadow:0px 0px 0px 0px #626bd0;
+}
+body.print input[type=text] {
+    box-shadow:0px 0px 0px 0px #626bd0;
+}
+body.print div.code {
+    background-color:white;
+}
+body.print legend {
+    box-shadow:0px 0px 0px 0px #626bd0;
 }
 body.print fieldset.Header {
     background-color:white;
@@ -630,28 +532,6 @@ body.print fieldset.River {
     background-color:white;
     color:black;
 }
-body.print fieldset.Footer {
-    background-color:white;
-    color:black;
-}
-body.print legend {
-    box-shadow:0px 0px 0px 0px #626bd0;
-}
-body.print input[type=text] {
-    box-shadow:0px 0px 0px 0px #626bd0;
-}
-body.print select {
-    box-shadow:0px 0px 0px 0px #626bd0;
-}
-body.print div.code {
-    background-color:white;
-}
-body.print fieldset.Action {
-    background-color:white;
-}
-body.print fieldset.Action fieldset.plugin {
-    padding-left:40px;
-}
 body.print fieldset.River>div.output div.list div.item {
     background-color:white;
 }
@@ -659,7 +539,82 @@ body.print fieldset.River>div.output div.item.select {
     background-color:white;
     border:solid 2px red;
 }
-
-div.output fieldset.span>fieldset {
-    float:left; overflow:auto;
+body.print fieldset.Action {
+    background-color:white;
 }
+body.print fieldset.Action fieldset.plugin {
+    padding-left:40px;
+}
+body.print fieldset.Footer {
+    background-color:white;
+    color:black;
+}
+
+body.mobile select {
+    font-size:18px;
+}
+body.mobile input {
+    font-size:18px;
+}
+body.mobile fieldset.Header.head {
+    position:fixed; top:0;
+    width:-webkit-fill-available;
+    height:2em; font-size:24px;
+    background-color:#000000b8;
+    z-index:10;
+}
+body.mobile fieldset.Header.head div.output {
+    height:2em;
+}
+body.mobile fieldset.Header>div.output>div {
+    height:1.5em;
+}
+body.mobile fieldset.Header>div.output div.menu {
+    height:1.5em;
+}
+body.mobile fieldset.Header.head div.state.time {
+    display:none;
+}
+body.mobile fieldset.River.left {
+    position:fixed; top:48px;
+    background-color:#243950bf;
+    min-width:240px; font-size:24px;
+    /* width:-webkit-fill-available; */
+    z-index:10;
+}
+body.mobile fieldset.River>div.output div.list div.item {
+    font-size:24px;
+}
+body.mobile fieldset.Action.main.cmd {
+    margin-top:0; margin-bottom:0;
+}
+body.mobile fieldset.Action.main {
+    margin-top:48px; margin-bottom:64px;
+}
+body.mobile fieldset.Footer.foot {
+    position:fixed; bottom:0;
+    width:-webkit-fill-available;
+    height:64px; font-size:24px;
+    background-color:#000000b8;
+    display:none;
+    z-index:10;
+}
+body.mobile.landscape fieldset.Header.head {
+    position:unset;
+}
+body.mobile.landscape fieldset.Header.head div.state.time {
+    display:block;
+}
+body.mobile.landscape fieldset.Action.main {
+    margin-top:0; margin-bottom:0;
+}
+body.mobile.landscape fieldset.Footer.foot {
+    position:unset;
+}
+body.mobile>div.carte {
+    font-size:24px;
+}
+body.mobile>div.input.login input {
+    font-size:24px
+}
+
diff --git a/panel/action.js b/panel/action.js
index d526ba95..51867907 100644
--- a/panel/action.js
+++ b/panel/action.js
@@ -42,7 +42,14 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg)
         can._menu && can.page.Remove(can, can._menu)
         can._menu = can.search({}, ["Header.onimport.menu", can._ACTION,
             ["布局", "默认布局", "流动布局", "网格布局", "标签布局", "自由布局"],
-        ], function(event, layout) { can.onaction.layout(can, layout) })
+            ["help", "tutor", "manual", "program", "refer"],
+        ], function(event, button, list) {
+            if (list[0] == "help") {
+                can.user.open("/chat/cmd/src/help/"+button+".shy")
+            } else {
+                can.onaction.layout(can, button)
+            }
+        })
     },
     _share: function(can, share) {
         share && can.run({}, ["_share", share], function(msg) {
diff --git a/panel/cmd.css b/panel/cmd.css
index e69de29b..bc3963fe 100644
--- a/panel/cmd.css
+++ b/panel/cmd.css
@@ -0,0 +1,6 @@
+fieldset.panel.cmd>div.output>fieldset.plugin>legend {
+    display:none;
+}
+fieldset.panel.cmd>div.output>fieldset.plugin {
+    margin:0; padding:0;
+}
diff --git a/panel/cmd.js b/panel/cmd.js
index f389dab8..a4892426 100644
--- a/panel/cmd.js
+++ b/panel/cmd.js
@@ -15,7 +15,7 @@ Volcanos("onaction", {help: "交互操作", list: [], _init: function(can, msg,
         can.page.ClassList.add(can, can._target, "Action")
     },
     _plugin: function(can, index, args, next) {
-        can.onappend.plugin(can, {type: "plugin", index: index, args: args, opts: can.user.Search(), width: window.innerWidth-40}, function(sub, meta) {
+        can.onappend.plugin(can, {type: "plugin", index: index, args: args, opts: can.user.Search(), width: window.innerWidth}, function(sub, meta) {
             sub.run = function(event, cmds, cb) {
                 can.run(event, can.misc.Concat([ctx.ACTION, "run", index], cmds), cb)
             }
diff --git a/panel/footer.css b/panel/footer.css
index bb946f84..d3bd4a0c 100644
--- a/panel/footer.css
+++ b/panel/footer.css
@@ -2,10 +2,6 @@ fieldset.Footer {
     height:32px; padding:0 5px;
     clear:both;
 }
-fieldset.Footer div.toast {
-    position:static;
-    float:left;
-}
 fieldset.Footer>div.output {
     height:32px; overflow:hidden;
 }
@@ -23,13 +19,13 @@ fieldset.Footer>div.output div.title {
 }
 fieldset.Footer>div.output div.toast {
     float:right;
+    background-color:darkcyan;
 }
 fieldset.Footer>div.output div.state {
     float:right;
 }
 
 fieldset.Footer>div.output input[name=cmd] {
-    background-color:black; color:white;
     width:120px; height:25px;
 }
 fieldset.Footer>div.output input[name=cmd]:focus {
diff --git a/panel/header.css b/panel/header.css
index cab3c120..c315c045 100644
--- a/panel/header.css
+++ b/panel/header.css
@@ -21,11 +21,8 @@ fieldset.Header>div.output>div.title {
 fieldset.Header>div.output>div.search {
     float:left; margin-left:20px;
 }
-fieldset.Header>div.output>div.search>input:hover {
-    /* width:240px; */
-}
-fieldset.Header>div.output>div.menus {
-    float:left; margin-left:5px;
+fieldset.Header>div.output>div.search>input {
+    height:25px; margin-top:-5px;
 }
 fieldset.Header>div.output>div.state {
     float:right;
@@ -43,9 +40,6 @@ fieldset.Header>div.output div.menu:hover {
     border-bottom:solid 2px red;
     background-color:#2e515f;
 }
-fieldset.Header>div.status {
-    display:none;
-}
 
 body.black fieldset.Header>div.output>div.search>input {
     width:120px; background-color:cyan;
diff --git a/panel/header.js b/panel/header.js
index 375bbc01..32fbaeae 100644
--- a/panel/header.js
+++ b/panel/header.js
@@ -125,12 +125,14 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
         return can.page.Append(can, can._output, [{type: cmds[0], list: can.core.List(cmds.slice(1), function(item) {
             if (typeof item == "string") {
                 return {view: ["menu", html.DIV, can.user.trans(can, item)], onclick: function(event) {
-                    can.base.isFunc(cb) && cb(event, item)
+                    can.base.isFunc(cb) && cb(event, item, cmds)
                 }}
 
             } else if (item.length > 0) {
                 return {view: ["menu", html.DIV, can.user.trans(can, item[0])], onmouseenter: function(event) {
-                    can.onaction.carte(event, can, item.slice(1), cb)
+                    can.onaction.carte(event, can, item.slice(1), function(event, button) {
+                        can.base.isFunc(cb) && cb(event, button, item)
+                    })
                 }}
 
             } else if (typeof item == "object") {
@@ -156,6 +158,12 @@ Volcanos("onaction", {help: "交互数据", list: [], _init: function(can, meta,
         "river": "菜单",
         "search": "搜索",
 
+        "help": "文档",
+        "tutor": "入门简介",
+        "manual": "使用手册",
+        "program": "编程手册",
+        "refer": "参考手册",
+
         "setting": "设置",
         "black": "黑色主题",
         "white": "白色主题",
@@ -190,6 +198,11 @@ Volcanos("onaction", {help: "交互数据", list: [], _init: function(can, meta,
     },
     carte: function(event, can, list, cb) { can.user.carte(event, can, can.onaction, list, cb) },
     river: function(event, can) { can.onaction.River(can) },
+    tutor: function(event, can) { can.user.open("/chat/cmd/src/help/tutor.shy") },
+    manual: function(event, can) { can.user.open("/chat/cmd/src/help/manual.shy") },
+    program: function(event, can) { can.user.open("/chat/cmd/src/help/program.shy") },
+    refer: function(event, can) { can.user.open("/chat/cmd/src/help/refer.shy") },
+
     black: function(event, can, button) {
         can.onlayout.topic(can, button)
         can.onlayout._init(can)
diff --git a/panel/river.css b/panel/river.css
index ac65b994..85baf83b 100644
--- a/panel/river.css
+++ b/panel/river.css
@@ -5,13 +5,12 @@ fieldset.River>div.output div.item {
     border-left:solid 3px #00ffae;
     padding:3px 16px;
 }
-fieldset.River>div.output div.item:hover {
-    background-color:#2e515f;
-}
 fieldset.River>div.output div.item.select {
     background-color:#2e515f;
 }
-
+fieldset.River>div.output div.item:hover {
+    background-color:#2e515f;
+}
 fieldset.River>div.output div.list {
     margin-left:8px; padding-left:5px;
 }
@@ -21,9 +20,9 @@ fieldset.River>div.output div.list div.item {
     font-family:monospace;
     font-size:14px;
 }
-fieldset.River>div.output div.list div.item:hover {
-    background-color:#2e515f;
-}
 fieldset.River>div.output div.list div.item.select {
     background-color:#2e515f;
 }
+fieldset.River>div.output div.list div.item:hover {
+    background-color:#2e515f;
+}
diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css
index 2743e87d..dbe082e0 100644
--- a/plugin/local/code/inner.css
+++ b/plugin/local/code/inner.css
@@ -1,6 +1,3 @@
-fieldset.editor>form.option div.item input.args[name=line] {
-    width:40px;
-}
 fieldset.editor>div.action div.file {
     border:solid 2px red; padding:2px;
     float:left; cursor:pointer;
diff --git a/plugin/local/wiki/draw.js b/plugin/local/wiki/draw.js
index c60f1f37..e5d25e1d 100644
--- a/plugin/local/wiki/draw.js
+++ b/plugin/local/wiki/draw.js
@@ -325,7 +325,7 @@ Volcanos("onaction", {help: "组件菜单", list: [
     "编辑": function(event, can, key) { can.Action("go", "auto") },
     "save": function(event, can, key) {
         var msg = can.request(event, {content: can.onexport.content(can, can.svg)})
-        can.run(event, [ctx.ACTION, "save", can.Option("path"), can.Option("file")], function(msg) {
+        can.run(event, [ctx.ACTION, "save", can.Option("path")], function(msg) {
             can.user.toast(can, "保存成功")
         }, true)
     },
diff --git a/plugin/local/wiki/word.css b/plugin/local/wiki/word.css
index 537846d9..e2f637cd 100644
--- a/plugin/local/wiki/word.css
+++ b/plugin/local/wiki/word.css
@@ -1,5 +1,38 @@
-fieldset.word>form.option>div.item.text input {
-    width:200px;
+fieldset.word>div.output {
+    clear:none;
+    float:left;
+}
+fieldset.word>div.output fieldset.span>fieldset {
+    float:left; overflow:auto;
+}
+
+fieldset.word>div.navmenu {
+    clear:both;
+    float:left;
+    min-width:120px;
+    background-color:inherit;
+    margin-right:10px;
+    overflow:auto;
+}
+fieldset.word>div.navmenu>div.item {
+    font-weight:bold;
+    font-size:24px;
+    padding:4px 10px;
+}
+fieldset.word>div.navmenu>div.list>div.item {
+    font-weight:bold;
+    font-size:18px;
+}
+fieldset.word>div.navmenu div.item {
+    font-family:cursive;
+    padding:4px 10px;
+}
+fieldset.word>div.navmenu div.item:hover {
+    cursor:pointer;
+    background-color:red;
+}
+fieldset.word>div.navmenu div.list {
+    margin-left:20px;
 }
 
 fieldset.word a {
@@ -12,7 +45,10 @@ fieldset.word ul.story[data-type=premenu] li:hover {
     background:cyan;
     color:blue;
 }
-fieldset.word li.H2 {
+fieldset.word ul.story[data-type=endmenu] {
+    clear:both;
+}
+fieldset.word ul.story li.H2 {
     font-weight:bold;
     font-size:20px;
 }
@@ -43,14 +79,17 @@ fieldset.word code.story {
     padding:10px; white-space:pre;
     clear:both;
 }
-fieldset.word fieldset.story:hover {
-    box-shadow: 12px 12px 12px 6px #5764efd1;
+fieldset.word video.story {
+    max-height:320px;
 }
 fieldset.word fieldset.story {
     margin:10px; border:0;
     clear:both; float:left;
     box-shadow: 4px 4px 10px 1px #626bd0;
 }
+fieldset.word fieldset.story:hover {
+    box-shadow: 12px 12px 12px 6px #5764efd1;
+}
 
 fieldset.word.float {
     width:-webkit-fill-available;
@@ -95,65 +134,13 @@ fieldset.word.float h3 {
     text-align:center;
 }
 
-fieldset.word video.story {
-    max-height:320px;
+fieldset.panel.cmd fieldset.word>form.option {
+    display:none;
+}
+fieldset.panel.cmd fieldset.word>div.action {
+    display:none;
+}
+fieldset.panel.cmd fieldset.word>div.status {
+    display:none;
 }
 
-fieldset.word div.navmenu {
-    clear:both;
-    float:left;
-    min-width:120px;
-    background-color:inherit;
-    margin-right:10px;
-}
-fieldset.word div.navmenu>div.item {
-    font-weight:bold;
-    font-size:24px;
-    padding:4px 10px;
-}
-fieldset.word div.navmenu>div.list>div.item {
-    font-weight:bold;
-    font-size:18px;
-}
-fieldset.word div.navmenu div.item {
-    font-family:cursive;
-    padding:4px 10px;
-}
-fieldset.word div.navmenu div.list {
-    margin-left:20px;
-}
-fieldset.word div.navmenu div.item:hover {
-    cursor:pointer;
-    background-color:red;
-}
-fieldset.word>div.output {
-    clear:none;
-    float:left;
-}
-fieldset.word>div.status {
-    clear:both;
-}
-
-fieldset.word.cmd {
-    padding:0;
-    margin:0;
-}
-fieldset.word.cmd>legend {
-    display:none;
-}
-fieldset.word.cmd>form.option {
-    display:none;
-}
-fieldset.word.cmd>div.action {
-    display:none;
-}
-fieldset.word.cmd>div.status {
-    display:none;
-}
-fieldset.word.cmd>div.navmenu {
-    overflow:auto;
-}
-
-fieldset.word ul[data-type=endmenu] {
-    clear:both;
-}
diff --git a/plugin/local/wiki/word.js b/plugin/local/wiki/word.js
index 979dc63c..7d7b1628 100644
--- a/plugin/local/wiki/word.js
+++ b/plugin/local/wiki/word.js
@@ -13,7 +13,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
             can.page.ClassList.add(can, can._fields, "cmd")
             can.page.Modify(can, can.sup._navmenu, {style: {height: window.innerHeight}})
             if (can.sup._navmenu) {
-                can.Conf("width", can.Conf("width")-can.sup._navmenu.offsetWidth+30)
+                can.Conf("width", can.Conf("width")-can.sup._navmenu.offsetWidth-10)
                 can.page.Modify(can, can._output, {style: {"max-width": can.Conf("width")}})
                 can.page.Modify(can, can._output, {style: {height: window.innerHeight}})
             }
diff --git a/plugin/state.js b/plugin/state.js
index c6326892..77e0c972 100644
--- a/plugin/state.js
+++ b/plugin/state.js
@@ -44,7 +44,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, conf,
     },
     _inner: function(can, msg) {
         can.onappend.table(can, msg)
-        can.onappend.board(can, msg.Result())
+        can.onappend.board(can, msg)
         can.onmotion.story.auto(can)
         can.page.Modify(can, can._output, {style: {display: "block"}})
         return true
@@ -80,8 +80,10 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, conf,
     },
 })
 Volcanos("onaction", {help: "交互操作", list: [
-        "共享工具", "保存参数", "清空参数", "刷新数据", ["其它 ->", "全屏", "生成链接", "复制数据", "下载数据", "清空数据", "删除工具", "摄像头"],
-        ], _init: function(can, msg, list, cb, target) {
+        "共享工具", "生成链接", "保存参数", "清空参数", "刷新数据", [
+            "其它 ->", "复制数据", "下载数据", "清空数据", "删除工具", "摄像头",
+        ],
+    ], _init: function(can, msg, list, cb, target) {
     },
     _engine: function(event, can, button) {
         can.Update(event, [ctx.ACTION, button].concat(can.Input([], true)))