feat: add new option generatedGroupNameEmoji & generatedGroupNameLang

Author: magicdawn

packages/ui/src/common/index.ts

@@ -27,3 +27,6 @@ export const getAssetsDir = reusePromise(
   },
   { memorize: true },
 )
+
+export const __DEV__ = import.meta.env.DEV
+export const __PROD__ = import.meta.env.PROD

packages/ui/src/define/ClashConfig.ts

@@ -50,9 +50,38 @@ export interface ProxyGroup {
 }
 
 export enum ProxyGroupType {
+  UrlTest = 'url-test',
   Fallback = 'fallback',
   Select = 'select',
-  URLTest = 'url-test',
+}
+
+/**
+  // 最快 / 可用 / 手选
+  // Fastest / Available / Select
+  generatedGroupNameLocale: 'zh-CN', // possible: zh-CN | en-US
+
+  // 🚀 ✅ ✋🏻
+  generatedGroupNameEmoji: true,
+ */
+export const ProxyGroupTypeConfig: Record<
+  ProxyGroupType,
+  { emoji: string; nameZh: string; nameEn: string }
+> = {
+  [ProxyGroupType.UrlTest]: {
+    emoji: '🚀',
+    nameZh: '最快',
+    nameEn: 'Fastest',
+  },
+  [ProxyGroupType.Fallback]: {
+    emoji: '✅',
+    nameZh: '可用',
+    nameEn: 'Available',
+  },
+  [ProxyGroupType.Select]: {
+    emoji: '✋',
+    nameZh: '手选',
+    nameEn: 'Select',
+  },
 }
 
 export interface ProxyProviders {

packages/ui/src/modules/current-config/index.tsx

@@ -1,3 +1,4 @@
+import { ProxyGroupTypeConfig } from '$ui/define/ClashConfig'
 import { runGenerate } from '$ui/modules/commands/run'
 import { message } from '$ui/store'
 import { DEFAULT_NAME, getConfigFile, getConfigFileDisplay } from '$ui/utility/gen'
@@ -11,7 +12,14 @@ import styles from './index.module.less'
 import { state } from './model'
 
 export default function ConfigList() {
-  const { name, clashMeta, generateAllProxyGroup, generateSubNameProxyGroup } = useSnapshot(state)
+  const {
+    name,
+    clashMeta,
+    generateAllProxyGroup,
+    generateSubNameProxyGroup,
+    generatedGroupNameEmoji,
+    generatedGroupNameLang,
+  } = useSnapshot(state)
 
   const onGenConfigClick = useMemoizedFn(async () => {
     return runGenerate()
@@ -128,6 +136,39 @@ export default function ConfigList() {
           >
             生成 <Tag style={{ marginRight: 0 }}>订阅名同名</Tag> 组
           </Checkbox>
+
+          <Checkbox
+            checked={generatedGroupNameEmoji}
+            onChange={(e) => {
+              state.generatedGroupNameEmoji = e.target.checked
+            }}
+          >
+            <Tag style={{ marginRight: 0 }}>订阅组</Tag> emoji
+          </Checkbox>
+
+          <Checkbox
+            checked={generatedGroupNameLang === 'zh'}
+            onChange={(e) => {
+              const lang = e.target.checked ? 'zh' : 'en'
+              state.generatedGroupNameLang = lang
+            }}
+          >
+            <Tooltip
+              overlayInnerStyle={{ width: 'max-content' }}
+              title={
+                <>
+                  ✅ 使用中文: {ProxyGroupTypeConfig['url-test'].nameZh} /{' '}
+                  {ProxyGroupTypeConfig['fallback'].nameZh} /{' '}
+                  {ProxyGroupTypeConfig['select'].nameZh}
+                  <br />❎ 使用英文: {ProxyGroupTypeConfig['url-test'].nameEn} /{' '}
+                  {ProxyGroupTypeConfig['fallback'].nameEn} /{' '}
+                  {ProxyGroupTypeConfig['select'].nameEn}
+                </>
+              }
+            >
+              <Tag style={{ marginRight: 0 }}>订阅组</Tag> 中文
+            </Tooltip>
+          </Checkbox>
         </Space>
       </Row>
 

packages/ui/src/modules/current-config/model.ts

@@ -1,3 +1,4 @@
+import { __DEV__ } from '$ui/common'
 import { ConfigItem, RuleItem, Subscribe } from '$ui/define'
 import { onInit, onReload } from '$ui/modules/global-model'
 import storage from '$ui/storage'
@@ -12,6 +13,8 @@ interface IState {
   clashMeta: boolean
   generateAllProxyGroup: boolean
   generateSubNameProxyGroup: boolean
+  generatedGroupNameLang: string
+  generatedGroupNameEmoji: boolean
 }
 
 const defaultState: IState = {
@@ -20,6 +23,8 @@ const defaultState: IState = {
   generateAllProxyGroup: false,
   generateSubNameProxyGroup: false,
   clashMeta: false,
+  generatedGroupNameLang: 'zh',
+  generatedGroupNameEmoji: true,
 }
 
 const allowedKeys = Object.keys(defaultState)
@@ -34,6 +39,13 @@ const { state, load, init } = valtioState<IState>(
       }
     },
     persist(val) {
+      if (__DEV__) {
+        // hot-reload 之后都消失了
+        if (!val.list.length) {
+          return
+        }
+      }
+
       storage.set(CURRENT_CONFIG_STORAGE_KEY, _.pick(val, allowedKeys))
     },
   },

packages/ui/src/storage/index.ts

@@ -24,6 +24,13 @@ const storage = new Store({
       name: 'clash-config-manager',
       generateAllProxyGroup: false,
       generateSubNameProxyGroup: false,
+
+      // 最快 / 可用 / ✋🏻手选
+      // Fastest / Available / Select
+      generatedGroupNameLang: 'zh', // possible: zh | en
+
+      // 🚀 ✅ ✋🏻
+      generatedGroupNameEmoji: true,
     },
 
     preference: {

packages/ui/src/utility/gen.ts

@@ -1,5 +1,5 @@
 import { ClashConfig, RuleItem, Subscribe } from '$ui/define'
-import { ProxyGroupType } from '$ui/define/ClashConfig'
+import { ProxyGroupType, ProxyGroupTypeConfig } from '$ui/define/ClashConfig'
 import { YAML, pmap } from '$ui/libs'
 import { rootActions, rootState } from '$ui/store'
 import fse from 'fs-extra'
@@ -51,8 +51,14 @@ export function getUsingItems() {
 }
 
 export async function genConfig({ forceUpdate = false }: { forceUpdate?: boolean } = {}) {
-  const { name, clashMeta, generateAllProxyGroup, generateSubNameProxyGroup } =
-    rootState.currentConfig
+  const {
+    name,
+    clashMeta,
+    generateAllProxyGroup,
+    generateSubNameProxyGroup,
+    generatedGroupNameEmoji,
+    generatedGroupNameLang,
+  } = rootState.currentConfig
   const { subscribeItems, ruleItems } = getUsingItems()
 
   // the config
@@ -144,23 +150,41 @@ export async function genConfig({ forceUpdate = false }: { forceUpdate?: boolean
   const subscribeTragets = subscribeItems.map((sub) => sub.name)
 
   const genGroupsForSubscribe = (label: string, proxies: string[]) => {
+    const getName = (label: string, type: ProxyGroupType) => {
+      const emoji = generatedGroupNameEmoji ? ProxyGroupTypeConfig[type].emoji + ' ' : ''
+
+      type AllowedLang = 'zh' | 'en'
+      const lang: AllowedLang = (() => {
+        const _default = 'zh'
+        const allowed: AllowedLang[] = ['zh', 'en']
+        if (!generatedGroupNameLang) return _default
+        if (!allowed.includes(generatedGroupNameLang)) return _default
+        return generatedGroupNameLang as AllowedLang
+      })()
+
+      const typeText =
+        lang === 'zh' ? ProxyGroupTypeConfig[type].nameZh : ProxyGroupTypeConfig[type].nameEn
+
+      return `${emoji}${label} ${typeText}`
+    }
+
     const withSuffix = [
       {
-        name: `${label}-最快`,
-        type: ProxyGroupType.URLTest,
+        name: getName(label, ProxyGroupType.UrlTest),
+        type: ProxyGroupType.UrlTest,
         proxies,
         url: 'http://www.gstatic.com/generate_204',
         interval: 150,
       },
       {
-        name: `${label}-可用`,
+        name: getName(label, ProxyGroupType.Fallback),
         type: ProxyGroupType.Fallback,
         proxies,
         url: 'http://www.gstatic.com/generate_204',
         interval: 150,
       },
       {
-        name: `${label}-手选`,
+        name: getName(label, ProxyGroupType.Select),
         type: ProxyGroupType.Select,
         proxies,
       },