update

packages/artplayer/src/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 24 24" width="100%"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" fill="#fff" /></svg>

packages/artplayer/src/icons/index.js

@@ -1,6 +1,7 @@
 import { append, def, addClass } from '../utils';
 import loading from './loading.svg';
 import state from './state.svg';
+import check from './check.svg';
 import play from './play.svg';
 import pause from './pause.svg';
 import volume from './volume.svg';
@@ -21,6 +22,7 @@ export default class Icons {
             state,
             play,
             pause,
+            check,
             volume,
             volumeClose,
             subtitle,

packages/artplayer/src/setting/index.js

@@ -1,5 +1,5 @@
 import Component from '../utils/component';
-import { append, addClass, setStyle } from '../utils/dom';
+import { append, addClass, setStyle, inverseClass } from '../utils/dom';
 import playbackRate from './playbackRate';
 
 export default class Setting extends Component {
@@ -30,15 +30,32 @@ export default class Setting extends Component {
         }
     }
 
-    creatItem(item) {
-        const $item = document.createElement('div');
-        addClass($item, 'art-setting-item');
-        append($item, `<div class="art-setting-item-left">${item.html}</div>`);
-        const $right = append($item, `<div class="art-setting-item-right"></div>`);
+    creatItem(item, option) {
+        const { icons } = this.art;
         const hasItems = item.items && item.items.length;
 
-        if (hasItems) {
-            append($right, this.art.icons.arrowRight);
+        const $item = document.createElement('div');
+        addClass($item, 'art-setting-item');
+
+        if (item.current && !hasItems) {
+            addClass($item, 'art-current');
+        }
+
+        const $left = append($item, `<div class="art-setting-item-left"></div>`);
+
+        if (item.goBack) {
+            append($left, icons.arrowLeft);
+            addClass($item, 'art-setting-item-back');
+        } else {
+            append($left, icons.check);
+        }
+
+        append($left, item.html);
+
+        const $right = append($item, `<div class="art-setting-item-right"></div>`);
+
+        if (hasItems && !item.goBack) {
+            append($right, icons.arrowRight);
         }
 
         const callback = (event) => {
@@ -51,6 +68,12 @@ export default class Setting extends Component {
                 if (item.width) {
                     setStyle(this.$parent, 'width', `${item.width}px`);
                 }
+            } else {
+                for (let index = 0; index < option.length; index++) {
+                    option[index].current = false;
+                }
+                item.current = true;
+                inverseClass($item, 'art-current');
             }
         };
 
@@ -61,6 +84,22 @@ export default class Setting extends Component {
     }
 
     makeRecursion(option) {
+        if (!option) return option;
+
+        for (let index = 0; index < option.length; index++) {
+            const item = option[index];
+            if (!item.goBack) {
+                if (item.items) {
+                    item.items.unshift({
+                        html: item.html,
+                        items: option,
+                        goBack: true,
+                    });
+                }
+                this.makeRecursion(item.items);
+            }
+        }
+
         return option;
     }
 
@@ -81,7 +120,7 @@ export default class Setting extends Component {
 
         for (let index = 0; index < option.length; index++) {
             const item = option[index];
-            const $item = this.creatItem(item);
+            const $item = this.creatItem(item, option);
             append(this.$parent, $item);
         }
     }

packages/artplayer/src/setting/playbackRate.js

@@ -22,6 +22,22 @@ export default function playbackRate(art) {
                         html: '444',
                         click: () => console.log(4),
                     },
+                    {
+                        html: '333',
+                        click: () => console.log(3),
+                    },
+                    {
+                        html: '444',
+                        click: () => console.log(4),
+                    },
+                    {
+                        html: '333',
+                        click: () => console.log(3),
+                    },
+                    {
+                        html: '444',
+                        click: () => console.log(4),
+                    },
                 ],
             },
         ],

packages/artplayer/src/style/setting.scss

@@ -10,30 +10,15 @@
         max-height: 300px;
         overflow: auto;
         font-size: 13px;
-        padding: 5px 0;
         background-color: rgba(0, 0, 0, 0.9);
         transition: all 0.1s ease;
 
-        .art-setting-item-header {
-            display: flex;
-            align-items: center;
-            height: 35px;
-            line-height: 1;
-            padding-left: 5px;
-            cursor: pointer;
-
-            .art-icon {
-                width: 30px;
-                height: 30px;
-            }
-        }
-
         .art-setting-item {
             display: flex;
             justify-content: space-between;
             align-items: center;
             height: 35px;
-            padding: 0 5px 0 15px;
+            padding: 0 5px 0 0;
             line-height: 1;
             cursor: pointer;
 
@@ -41,6 +26,29 @@
                 background-color: rgba(255, 255, 255, 0.1);
             }
 
+            .art-icon {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 30px;
+                height: 30px;
+            }
+
+            .art-icon-arrowLeft {
+                width: 35px;
+                height: 30px;
+            }
+
+            .art-icon-check {
+                visibility: hidden;
+                width: 35px;
+                height: 15px;
+            }
+
+            &.art-current .art-icon-check {
+                visibility: visible;
+            }
+
             .art-setting-item-left {
                 display: flex;
                 align-items: center;
@@ -51,13 +59,12 @@
                 display: flex;
                 align-items: center;
                 color: rgba(255, 255, 255, 0.95);
-
-                .art-icon {
-                    width: 30px;
-                    height: 30px;
-                }
             }
         }
+
+        .art-setting-item-back {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
     }
 
     &.art-setting-show {