算法按钮改为下拉框；添加算法英文名称；样式调整

src/assets/css/index.css

@@ -47,16 +47,20 @@ body {
   --color-dark: #141414;
   --color-dark-alpha: rgba(0, 0, 0, 0.1);
   --color-dark-filter: brightness(0.5);
+  --color-dark-console: #323232;
 
-  --color-light: #efefef;
+  /* --color-light: #efefef; */
+  --color-light: #b4b4b4;
   --color-light-alpha: rgba(255, 255, 255, 0.9);
   --color-light-filter: none;
+  --color-light-console: #cccccc;
 
   --background: #efefef;
   --text-color: #141414;
   --button-background: var(--color-dark);
   --button-color: var(--color-light);
   --border-color: var(--color-dark-alpha);
+  --console-background: var(--color-light-console);
   --filter: var(--color-light-filter);
 }
 
@@ -71,6 +75,7 @@ body {
     --button-background: var(--color-light);
     --button-color: var(--color-dark);
     --border-color: var(--color-light-alpha);
+    --console-background: var(--color-dark-console);
     --filter: var(--color-dark-filter);
   }
 }
@@ -81,6 +86,7 @@ body {
   --button-background: var(--color-light-alpha);
   --button-color: var(--color-dark);
   --border-color: var(--color-light-alpha);
+  --console-background: var(--color-dark-console);
   --filter: var(--color-dark-filter);
 }
 
@@ -139,7 +145,7 @@ body {
   padding: 0 15px;
   height: 100px;
   width: 300px;
-  background-color: #cccccc;
+  background-color: var(--console-background);
   overflow-y: overlay;
   border-radius: 10px;
 }

src/assets/js/algorithm/sort.js

@@ -98,6 +98,7 @@ class QuickSort extends Sort {
     info() {
         return {
             name: "快速排序算法",
+            enName: "Quick Sort",
             available: true
         }
     }
@@ -173,6 +174,7 @@ class BubbleSort extends Sort {
     info() {
         return {
             name: "冒泡排序算法",
+            enName: "Bubble Sort",
             available: true
         }
     }
@@ -235,6 +237,7 @@ class SelectionSort extends Sort {
     info() {
         return {
             name: "选择排序算法",
+            enName: "Selection Sort",
             available: true
         }
     }
@@ -289,6 +292,7 @@ class InsertionSort extends Sort {
     info() {
         return {
             name: "插入排序算法",
+            enName: "Insertion Sort",
             available: true
         }
     }
@@ -347,7 +351,8 @@ class MergeSort extends Sort {
 
     info() {
         return {
-            name: "归并排序算法"
+            name: "归并排序算法",
+            enName: "Merge Sort",
         }
     }
 
@@ -388,7 +393,8 @@ class RandomQuickSort extends Sort {
 
     info() {
         return {
-            name: "随机快速排序算法"
+            name: "随机快速排序算法",
+            enName: "Random Quick Sort",
         }
     }
 
@@ -429,7 +435,8 @@ class CountingSort extends Sort {
 
     info() {
         return {
-            name: "计数排序算法"
+            name: "计数排序算法",
+            enName: "Counting Sort",
         }
     }
 
@@ -470,7 +477,8 @@ class RadixSort extends Sort {
 
     info() {
         return {
-            name: "基数排序算法"
+            name: "基数排序算法",
+            enName: "Radix Sort",
         }
     }
 

src/assets/js/class.js

@@ -48,9 +48,13 @@ class ArrayVi extends ViBase {
     // 网页加载完毕初始化事件
     initialize({ elementId }) {
         let controlDiv = document.getElementById("control-div")
+        controlDiv.style.textAlign = "center"
+
         var sortClassList = getSortClassList();
         console.log(sortClassList);
         var DOMFragment = document.createDocumentFragment()
+
+        var selector = document.createElement("select")
         for (let i = 0; i < sortClassList.length; i++) {
             const sortClass = new sortClassList[i](animation)
             const sortClassInfo = sortClass.info()
@@ -59,9 +63,16 @@ class ArrayVi extends ViBase {
             if (!sortClassInfo['available'])
                 continue
 
-            let that = this
+            let option = document.createElement("option")
+            option.value = sortClassInfo['name']
+            option.innerText = sortClassInfo['name']
+            selector.appendChild(option)
+        }
+        DOMFragment.appendChild(selector)
+
         let ctrlBtn = document.createElement("button")
-            ctrlBtn.innerHTML = sortClassInfo['name']
+        ctrlBtn.innerHTML = "开始排序"
+        let that = this
         ctrlBtn.onclick = function () {
             // 点击排序算法按钮
             // if (!that.updateListDataArray(elementId, { doNotAlert: false }))
@@ -77,12 +88,21 @@ class ArrayVi extends ViBase {
                 .style("display", "")
             d3.select("#console-current-algorithm")
                 .style("text-align", "center")
-                    .html(sortClassInfo['name'])
+                .html(selector.value/*sortClassInfo['name']*/)
 
+            // 找到对应的算法，然后开始排序
+            for (let i = 0; i < sortClassList.length; i++) {
+                const sortClass = new sortClassList[i](animation)
+                const sortClassInfo = sortClass.info()
+
+                if (sortClassInfo['name'] === selector.value) {
                     sortClass.doSortWithAnimation(elementId)
+                    break
+                }
+            }
         }
         DOMFragment.appendChild(ctrlBtn)
-        }
+
         controlDiv.appendChild(DOMFragment)
 
         // 生成一个随机数组