fix(style): icon

发布测试版
dext7r · Jul 5, 2022 · c4163ad · c4163ad
1 parent fa165cb
commit c4163ad
Show file tree

Hide file tree

Showing 8 changed files with 535 additions and 29 deletions.
diff --git a/examples/App.vue b/examples/App.vue
@@ -1,13 +1,16 @@
 <template>
   <div id='app'>
+    <div class="header"><i class="pc-preview" title="PC模式"></i></div>
     <vue-amis-sdk
+      class="editor-widget"
       id='editorName'
       theme='cxd'
       className='is-fixed'
       :preview='isPreview'
       :isMobile='isMobile'
       @onChange='onChange'
       :value='schema'
+      :showCustomRenderersPanel='showCustomRenderersPanel'
     />
   </div>
 </template>
@@ -20,9 +23,62 @@ export default {
   name: 'App',
   data() {
     return {
-      isPreview: false,
+      isPreview: true,
       isMobile: false,
-      schema: {}
+      showCustomRenderersPanel: true,
+      schema: {
+        "type": "page",
+        "body": [
+          {
+            "type": "input-text",
+            "label": "文本",
+            "name": "text",
+            "id": "u:41304a249687"
+          },
+          {
+            "type": "nested-select",
+            "label": "嵌套下拉框",
+            "name": "nestedSelect",
+            "options": [
+              {
+                "label": "选项A",
+                "value": "A"
+              },
+              {
+                "label": "选项B",
+                "value": "B",
+                "children": [
+                  {
+                    "label": "选项C",
+                    "value": "C"
+                  },
+                  {
+                    "label": "选项D",
+                    "value": "D"
+                  }
+                ]
+              }
+            ],
+            "id": "u:b25bd22690e7"
+          },
+          {
+            "type": "select",
+            "label": "选项",
+            "name": "select",
+            "options": [
+              {
+                "label": "选项A",
+                "value": "A"
+              },
+              {
+                "label": "选项B",
+                "value": "B"
+              }
+            ],
+            "id": "u:b5bc1c1228bb"
+          }
+        ]
+      }
     }
   },
   methods: {
@@ -32,3 +88,24 @@ export default {
   }
 }
 </script>
+<style scoped>
+#app {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5f5f5;
+}
+.editor-widget{
+  height: calc(100% - 50px);
+}
+</style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-amis-sdk",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "private": false,
   "main": "sdk/vue-amis-sdk.umd.min.js",
   "browser": "sdk/vue-amis-sdk.umd.min.js",
@@ -77,8 +77,8 @@
     "lint-staged": "^13.0.1",
     "postcss": "^8.4",
     "prettier": "^2.7.0",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
+    "sass": "~1.32.13",
+    "sass-loader": "^10.2.0",
     "vue-eslint-parser": "8.0.1",
     "vue-template-compiler": "^2.6.11",
     "webpack": "4.46.0"

diff --git a/packages/VueAmisSdk/src/VueAmisSdk.vue b/packages/VueAmisSdk/src/VueAmisSdk.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <amis-shortcut-key />
     <amis-editor
       id="editorName"
       :theme="theme"
@@ -17,15 +18,16 @@
 </template>
 <script>
 // fortawesome
+import './style.scss';
 import '@fortawesome/fontawesome-free/css/all.css';
 import '@fortawesome/fontawesome-free/js/all'
-
-import { Editor } from "amis-editor";
-import { ReactInVue } from "vuera";
+import {Editor, ShortcutKey} from "amis-editor";
+import {ReactInVue} from "vuera";
 export default {
   name: "VueAmisSdk",
   components: {
     AmisEditor: ReactInVue(Editor),
+    AmisShortcutKey: ReactInVue(ShortcutKey),
     // Editor
   },
   props: {
@@ -51,11 +53,12 @@ export default {
     },
     value: {
       type: Object,
-      default: () => {},
+      default: () => {
+      },
     },
     plugins: {
-      type: Object,
-      default: () => {},
+      type: Array,
+      default: () => [],
     },
   },
   data() {
@@ -88,3 +91,12 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+.editor-right-panel .editorPanel-tabs .editorPanel-tabs-header > li > a .editor-tab-icon > svg {
+  font-size: 16px !important;
+  width: 16px;
+  height: auto;
+  margin-bottom: 0 !important;
+  color: #151b26;
+}
+</style>