feat: enhanced proxies menu

feat: support icons for proxy-groups
feat: full-view grouping style in proxies menu

Author: legiz-ru

src/api/proxies/index.ts

@@ -60,14 +60,19 @@ const getDelay = (proxy: any) => {
     return history[history.length - 1]['delay']
 }
 
+export interface ProxyGroupInfo {
+    name: string;
+    icon?: string;
+}
+
 export default function createProxiesApi(proxy: any) {
     return {
         // 获取分组延迟
         async getDelay(group: any, url: any, timeout: any) {
             await proxy.$http.get('/group/' + group + '/delay?timeout=' + timeout + "&url=" + url);
         },
         // 获取分组列表
-        async getGroups() {
+        async getGroups(): Promise<ProxyGroupInfo[]> {
             // 获取所有节点分组列表
             const data = await proxy.$http.get('/proxies');
             const proxies = data['proxies']
@@ -78,7 +83,7 @@ export default function createProxiesApi(proxy: any) {
             }
 
             // 获取分组
-            const proxyGroup: any[] = []
+            const proxyGroup: ProxyGroupInfo[] = []
             for (const name of proxies['GLOBAL']['all']) {
                 if (excludeGroupName[name]) {
                     continue
@@ -90,7 +95,10 @@ export default function createProxiesApi(proxy: any) {
                 if (!!group['hidden']) {
                     continue
                 }
-                proxyGroup.push(name)
+                proxyGroup.push({
+                    name,
+                    icon: typeof group['icon'] === 'string' ? group['icon'] : undefined,
+                })
             }
 
             return proxyGroup

src/locales/en.yaml

@@ -162,8 +162,10 @@ proxies:
   sort-off: Sort by latency
   vertical-on: Switch grouping to left-right style
   vertical-off: Switch grouping to drop-down style
+  full-view: Switch grouping to full-view style
   direct: Currently in direct mode
   loading: Testing...
+  selected-label: Selected
 
 profiles:
   title: Profiles

src/locales/ru.yaml

@@ -162,8 +162,10 @@ proxies:
   sort-off: Сортировать по задержке
   vertical-on: Переключить группировку на горизонтальную
   vertical-off: Переключить группировку на выпадающую
+  full-view: Переключить группировку на полный просмотр
   direct: В настоящее время прямой режим
   loading: Тестирование...
+  selected-label: Выбрано
 
 profiles:
   title: Профили

src/locales/zh.yaml

@@ -162,8 +162,10 @@ proxies:
   sort-off: 按延迟排序
   vertical-on: 切换分组为左右样式
   vertical-off: 切换分组为下拉样式
+  full-view: 切换分组为全视图样式
   direct: 当前处于直连模式
   loading: 测试中。。。
+  selected-label: 当前节点
 
 profiles:
   title: 订阅

src/store/proxiesStore.ts

@@ -1,13 +1,16 @@
 import {defineStore} from 'pinia';
 import {defaultPersist} from "@/types/persist";
 
+export type ProxyViewMode = 'horizontal' | 'dropdown' | 'full';
+
 export const useProxiesStore = defineStore('proxies', {
     state: () => ({
         isHide: false,
         isSort: false,
-        isVertical: false,
+        viewMode: 'full' as ProxyViewMode,
         active: '',
         now: "",
+        groupExpansion: {} as Record<string, boolean>,
     }),
     actions: {
         setHide(isHide: boolean) {
@@ -16,15 +19,24 @@ export const useProxiesStore = defineStore('proxies', {
         setSort(isSort: boolean) {
             this.isSort = isSort;
         },
-        setVertical(isVertical: boolean) {
-            this.isVertical = isVertical;
+        setViewMode(viewMode: ProxyViewMode) {
+            this.viewMode = viewMode;
         },
         setActive(active: string) {
             this.active = active;
         },
         setNow(now: string) {
             this.now = now;
         },
+        setGroupExpansionState(group: string, expanded: boolean) {
+            this.groupExpansion = {
+                ...this.groupExpansion,
+                [group]: expanded,
+            };
+        },
+        replaceGroupExpansions(expansions: Record<string, boolean>) {
+            this.groupExpansion = expansions;
+        },
     },
     persist: defaultPersist,
 });