docs(fluent-editor): optimize mobile-first demo (#1836)

Author: kagol

examples/sites/demos/mobile-first/app/fluent-editor/options.vue

@@ -17,7 +17,33 @@ export default {
     return {
       content: '',
       options: {
-        placeholder: '请输入内容'
+        placeholder: '请输入内容',
+        modules: {
+          // 工具栏
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'],
+            [{ list: 'bullet' }, { list: 'ordered' }],
+            [{ align: '' }, { align: 'center' }, { align: 'right' }],
+            ['better-table'],
+            ['fullscreen'],
+          ],
+          // 字数统计
+          counter: true,
+          // 表格
+          'better-table': {
+            operationMenu: {
+              color: {
+                text: '主题色',
+                colors: [
+                  '#ffffff', '#f2f2f2', '#dddddd', '#a6a6a6', '#666666', '#000000',
+                  '#c00000', '#ff0000', '#ffc8d3', '#ffc000', '#ffff00', '#fff4cb',
+                  '#92d050', '#00b050', '#dff3d2', '#00b0f0', '#0070c0', '#d4f1f5',
+                  '#002060', '#7030a0', '#7b69ee', '#1476ff', '#ec66ab', '#42b883',
+                ]
+              }
+            }
+          }
+        }
       }
     }
   }

examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.js

@@ -14,23 +14,10 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-    {
-      demoId: 'data-switch',
-      name: {
-        'zh-CN': '数据格式转换',
-        'en-US': 'Vertical divider line'
-      },
-      desc: {
-        'zh-CN':
-          '<p>通过 <code>data-type</code> 指定富文本数据保存的格式。数据默认保存格式为 Delta 形式，若需要将数据保存格式设置为 HTML 形式，并关闭 HTML 格式自动转 Delta 格式，设置 <code>:data-type="false"</code>，<code>:data-upgrade="false"</code>。</p>',
-        'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
-      },
-      codeFiles: ['data-switch.vue']
-    },
     {
       demoId: 'disabled',
       name: {
-        'zh-CN': '禁用态',
+        'zh-CN': '禁用状态',
         'en-US': 'The position of the separator copy'
       },
       desc: {
@@ -64,5 +51,18 @@ export default {
       },
       codeFiles: ['options.vue']
     },
+    {
+      demoId: 'data-switch',
+      name: {
+        'zh-CN': '数据格式转换',
+        'en-US': 'Vertical divider line'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>data-type</code> 指定富文本数据保存的格式。数据默认保存格式为 Delta 形式，若需要将数据保存格式设置为 HTML 形式，并关闭 HTML 格式自动转 Delta 格式，设置 <code>:data-type="false"</code>，<code>:data-upgrade="false"</code>。</p>',
+        'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
+      },
+      codeFiles: ['data-switch.vue']
+    },
   ]
 }

packages/fluent-editor/src/assets/toolbar.scss

@@ -289,7 +289,7 @@ $arrowWidth: 5px; // 下拉框箭头宽度
       }
 
       .ql-picker-options {
-        width: 180px;
+        width: 210px;
         padding: 15px 20px;
       }
 

packages/theme-saas/src/fluent-editor/index.less

@@ -62,6 +62,8 @@
       }
 
       span.ql-lineheight {
+        @apply w-16;
+
         > span {
           @apply w-16;
         }
@@ -132,6 +134,13 @@
         }
       }
 
+      span.ql-picker.ql-color-picker.ql-expanded {
+        .ql-picker-options {
+          @apply w-45;
+          @apply py-1 px-1;
+        }
+      }
+
       .ql-align.ql-picker {
         .ql-picker-label {
           @apply pt-1 ~'pr-1.5' pb-0 ~'pl-1.5';

packages/theme-saas/theme/defaultTheme.js

@@ -62,6 +62,7 @@ module.exports = {
     56: '14rem',
     52: '13rem',
     48: '12rem',
+    45: '11.25rem',
     44: '11rem',
     40: '10rem',
     36: '9rem',

packages/theme/src/fluent-editor/index.less

@@ -17,6 +17,10 @@
       margin-bottom: 4px;
 
       .ql-color-picker {
+        .ql-picker-options {
+          width: 180px;
+        }
+
         .ql-picker-label {
           > div {
             display: flex;