Add categories to extension styles

Former-commit-id: d36b27de4062d083b055bede3c85297757e8e6bb

i18n.json.REMOVED.git-id

@@ -1 +1 @@
-a0918752ff3f4c7d3acc54d59b145a30beacc75b
+b8ade96e9784398847050194bc266c56cef0eb68

javascript/main.entry.js.REMOVED.git-id

@@ -1 +1 @@
-f4a9a373b9d941a4f46b8f50c890dbe637bc9afe
+7586333151914088f7eb740dbedda22e6ed9aac3

javascript/main.entry.js.map.REMOVED.git-id

@@ -1 +1 @@
-9aa6f92e1d185e959f8591b0372989a7c6ec0300
+0a93919c189c6b4a996542fb802b7c9198c00514

src/src/components/extensionCss.vue

@@ -5,13 +5,27 @@
                 <icon-svg name="close"/>
             </div>
             <div class="extension-list" @click.stop>
-                <div v-for="(item, index) in list" :key="item.dir" class="extension-item" ref="items">
+                <table class="extension-table">
-                    <input class="extension-checkbox" type="checkbox" name="extension-item" :checked="item.selected"
+                    <tr v-for="(item, index) in list" :key="item.dir" class="extension-item" ref="items">
-                           @change="onChangeSelect(item.id)">
+                        <td>
-                    <div class="extension-dir">[{{ item.dir }}]</div>
+                            <input class="extension-checkbox" type="checkbox" name="extension-item"
-                    <div class="extension-name">{{ getName(item) }}</div>
+                                   :checked="item.selected"
-                    <div class="extension-author" v-if="item.manifest.author">By: {{ item.manifest.author }}</div>
+                                   @change="onChangeSelect(item.id)">
-                </div>
+                        </td>
+                        <td class="extension-name">
+                            {{ getName(item) }}
+                        </td>
+                        <td class="extension-type">
+                            {{ getLang(item.manifest.type) }}
+                        </td>
+                        <td class="extension-dir">
+                            {{ item.dir }}
+                        </td>
+                        <td class="extension-author">
+                            <template v-if="item.manifest.author">By: {{ item.manifest.author }}</template>
+                        </td>
+                    </tr>
+                </table>
             </div>
         </div>
     </div>
@@ -51,6 +65,14 @@ export default {
                     res[i].id = 'physton-prompt-extension-' + res[i].dir
                     list.push(res[i])
                 }
+
+                list.forEach(item => {
+                    item.sort = item.manifest.type + '.' + item.dir
+                })
+                list.sort((a, b) => {
+                    return a.sort > b.sort ? 1 : -1
+                })
+
                 this.list = list
                 if (init) {
                     this.list.forEach(item => {

styles/extensions/README.MD

@@ -18,13 +18,15 @@
     "zh_HK": "移動關鍵字輸入框到左側",
     "zh_TW": "移動關鍵字輸入框到左側"
   },
-  "author": "Physton"
+  "author": "Physton",
+  "type": "enhance"
 }
 ```
 
 - `name` The English name of the extension style, which must be included.
 - `i18n` The multilingual name(s) of the extension style, which can be absent or multiple. The language codes are available in the `i18n.json` file in the root directory of the extension.
 - `author` The author of the extension style, which can be absent.
+- `type` The type of the extension style. The value can be `enhance` or `theme`.
 
 ---
 
@@ -47,9 +49,11 @@
     "zh_HK": "移動關鍵字輸入框到左側",
     "zh_TW": "移動關鍵字輸入框到左側"
   },
-  "author": "Physton"
+  "author": "Physton",
+  "type": "enhance"
 }
 ```
 - `name` 扩展样式的英文名称，必须包含。
 - `i18n` 扩展样式的多语言名称，可以没有，可以为多个。国家语言代码见扩展根目录的 `i18n.json` 文件。
-- `author` 扩展样式的作者，可以没有。
+- `author` 扩展样式的作者，可以没有。
+- `type` 扩展样式的类型。值可以为 `enhance`：增强 或 `theme`：主题。

styles/extensions/Webui/manifest.json

@@ -5,5 +5,6 @@
     "zh_HK": "\u6839\u64daWebUI\u81ea\u5e36\u6a23\u5f0f\u4fee\u6539",
     "zh_TW": "\u6839\u64daWebUI\u81ea\u5e36\u6a23\u5f0f\u4fee\u6539"
   },
-  "author": "laohe"
+  "author": "laohe",
+  "type": "theme"
 }

styles/extensions/full-input/manifest.json

@@ -5,5 +5,6 @@
     "zh_HK": "\u95dc\u9375\u8a5e\u8f38\u5165\u6846\u64c1\u6709100%\u5bec\u5ea6",
     "zh_TW": "\u95dc\u9375\u5b57\u8f38\u5165\u6846\u4f54\u64da100%\u5bec\u5ea6"
   },
-  "author": "Physton"
+  "author": "Physton",
+  "type": "enhance"
 }

styles/extensions/hide-input-dropdown/manifest.json

@@ -5,5 +5,6 @@
     "zh_HK": "\u96b1\u85cf\u95dc\u9375\u8a5e\u8f38\u5165\u6846\u4e0b\u62c9\u9078\u55ae",
     "zh_TW": "\u96b1\u85cf\u95dc\u9375\u5b57\u8f38\u5165\u6846\u4e0b\u62c9\u5f0f\u9078\u55ae"
   },
-  "author": "Physton"
+  "author": "Physton",
+  "type": "enhance"
 }

styles/extensions/hide-tag-local/manifest.json

@@ -5,5 +5,6 @@
     "zh_HK": "\u96b1\u85cf\u6a19\u7c64\u4e0b\u65b9\u672c\u5730\u8a9e\u8a00",
     "zh_TW": "\u96b1\u85cf\u6a19\u7c64\u4e0b\u65b9\u672c\u5730\u8a9e\u8a00"
   },
-  "author": "Physton"
+  "author": "Physton",
+  "type": "enhance"
 }

styles/extensions/left-input/manifest.json

@@ -5,5 +5,6 @@
     "zh_HK": "\u79fb\u52d5\u95dc\u9375\u5b57\u8f38\u5165\u6846\u5230\u5de6\u5074",
     "zh_TW": "\u79fb\u52d5\u95dc\u9375\u5b57\u8f38\u5165\u6846\u5230\u5de6\u5074"
   },
-  "author": "Physton"
+  "author": "Physton",
+  "type": "enhance"
 }

styles/extensions/lite-shuai/manifest.json

@@ -3,5 +3,6 @@
   "i18n": {
     "zh_CN": "简单一点【暗色主题】"
   },
-  "author": "帅强"
+  "author": "帅强",
+  "type": "theme"
 }

styles/main.less

@@ -1389,14 +1389,24 @@
             background-color: #1e1e1ee6;
             transition: height .1s ease-in-out, width .1s ease-in-out;
 
-            .extension-item {
+            .extension-table {
-                font-size: 14px;
+                border: 0;
-                color: #fff;
-                padding: 10px 20px;
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
 
+                tr, td {
+                    border: 0 !important;
+                    margin: 0 !important;
+                    font-size: 14px;
+                    color: #fff;
+                    padding: 5px !important;
+                    background: transparent !important;
+
+                    &:hover {
+                        background: transparent !important;
+                    }
+                }
+            }
+
+            .extension-item {
                 .extension-checkbox {
                     --ring-color: transparent;
                     position: relative;
@@ -1415,22 +1425,23 @@
                     }
                 }
 
-                .extension-dir {
+                .extension-name, .extension-type, .extension-dir, .extension-author {
-                    margin-left: 10px;
+                    white-space: nowrap;
-                    font-size: 14px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
 
                 .extension-name {
-                    margin-left: 5px;
+                }
-                    white-space: nowrap;
+
-                    font-size: 14px;
+                .extension-type {
+                }
+
+                .extension-dir {
                 }
 
                 .extension-author {
-                    margin-left: 30px;
-                    flex: 1;
                     text-align: right;
-                    font-size: 14px;
                 }
             }
         }