更新option

src/option/index.js

@@ -8,16 +8,31 @@ import { nextTick, css, html, Component, bind } from 'wkit'
 import '../icon/index.js'
 
 const MACOS_KEYS = {
-  Command: '⌘',
   Cmd: '⌘',
   Option: '⌥',
-  Alt: '⌥',
   Shift: '⇧',
-  Ctrl: '⌃',
-  Control: '⌃'
+  Ctrl: '⌃'
+}
+const WIN_KEYS = {
+  Win: 'Win'
+}
+const LINUX_KEYS = {
+  Super: 'Super'
 }
 const UA = navigator.userAgent.toLowerCase()
 const IS_MACOS = UA.includes('mac os x') || UA.includes('iphone')
+const IS_WIN = UA.includes('windows nt')
+
+MACOS_KEYS['Super'] = MACOS_KEYS.Cmd
+MACOS_KEYS['Command'] = MACOS_KEYS.Cmd
+MACOS_KEYS['Alt'] = MACOS_KEYS.Option
+MACOS_KEYS['Control'] = MACOS_KEYS.Ctrl
+WIN_KEYS['Super'] = WIN_KEYS.Win
+WIN_KEYS['Cmd'] = WIN_KEYS.Win
+WIN_KEYS['Command'] = WIN_KEYS.Win
+LINUX_KEYS['Win'] = LINUX_KEYS.Super
+LINUX_KEYS['Cmd'] = LINUX_KEYS.Super
+LINUX_KEYS['Command'] = LINUX_KEYS.Super
 
 class OptionGroup extends Component {
   //
@@ -31,6 +46,11 @@ class OptionGroup extends Component {
       :host {
         display: block;
         width: 100%;
+      }
+      .option-group {
+        position: relative;
+        width: 100%;
+        height: 100%;
         line-height: 1.5;
       }
 
@@ -62,14 +82,16 @@ class OptionGroup extends Component {
 
   render() {
     return html`
-      <label
-        >${this.label}
-        ${this.fold
-          ? html`<wc-icon class="ico" name="right"></wc-icon>`
-          : ''}</label
-      >
-      <div class="sub-list">
-        <slot></slot>
+      <div class="option-group">
+        <label
+          >${this.label}
+          ${this.fold
+            ? html`<wc-icon class="ico" name="right"></wc-icon>`
+            : ''}</label
+        >
+        <div class="sub-list">
+          <slot></slot>
+        </div>
       </div>
     `
   }
@@ -119,8 +141,7 @@ class Option extends Component {
           margin: 0 8px;
         }
         .action {
-          font-size: 12px;
-          // font-family: Menlo;
+          font-size: 10px;
           white-space: nowrap;
           color: var(--color-grey-2);
         }
@@ -141,17 +162,22 @@ class Option extends Component {
 
   render() {
     let action = (this.action || '').trim()
-    if (IS_MACOS && action) {
+    if (action) {
       action = action
         .split('+')
-        .map(s => MACOS_KEYS[s.trim()] || s.trim())
+        .map(
+          s =>
+            (IS_MACOS ? MACOS_KEYS : IS_WIN ? WIN_KEYS : LINUX_KEYS)[
+              s.trim()
+            ] || s.trim()
+        )
         .join('+')
     }
     return html`
       <section class="item">
         <wc-icon class="ico" name=${this.icon}></wc-icon>
         <span class="name"><slot></slot></span>
-        <span class="action">${action}</span>
+        <kbd class="action">${action}</kbd>
       </section>
     `
   }