refactor: update size values, enhance ruleset types, and improve UI components for better functionality

Author: Ayideyia

frontend/src/assets/styles/utilities/size.less

@@ -1,4 +1,4 @@
-@size-values: 0, 8, 10, 12, 16, 18, 24, 32, 64, 128, 256;
+@size-values: 0, 8, 10, 12, 16, 18, 24, 32, 42, 64, 128, 256;
 @percent-values: 25, 50, 60, 75, 90, 100;
 
 .generate-size(@i: 1) when (@i <= length(@size-values)) {

frontend/src/constant/app.ts

@@ -21,6 +21,8 @@ export const ScheduledTasksFilePath = 'data/scheduledtasks.yaml'
 
 export const PluginHubFilePath = 'data/.cache/plugin-list.json'
 
+export const RulesetHubFilePath = 'data/.cache/ruleset-list.json'
+
 export const DefaultFontFamily =
   'system-ui, "Microsoft YaHei UI", "Source Han Sans CN", "Twemoji Mozilla", sans-serif'
 

frontend/src/stores/rulesets.ts

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { parse } from 'yaml'
 
 import { Copyfile, Readfile, Writefile, HttpGet, Download, FileExists } from '@/bridge'
-import { RulesetsFilePath, EmptyRuleSet } from '@/constant'
+import { RulesetsFilePath, EmptyRuleSet, RulesetHubFilePath } from '@/constant'
 import { RulesetBehavior, RulesetFormat } from '@/enums/kernel'
 import {
   debounce,
@@ -14,7 +14,7 @@ import {
   asyncPool,
 } from '@/utils'
 
-export type RuleSetType = {
+export interface RuleSet {
   id: string
   name: string
   updateTime: number
@@ -29,20 +29,30 @@ export type RuleSetType = {
   updating?: boolean
 }
 
+export interface RulesetHub {
+  geosite: string
+  geoip: string
+  list: { name: string; type: 'geosite' | 'geoip'; description: string; count: number }[]
+}
+
 export const useRulesetsStore = defineStore('rulesets', () => {
-  const rulesets = ref<RuleSetType[]>([])
+  const rulesets = ref<RuleSet[]>([])
+  const rulesetHub = ref<RulesetHub>({ geosite: '', geoip: '', list: [] })
 
   const setupRulesets = async () => {
     const data = await ignoredError(Readfile, RulesetsFilePath)
     data && (rulesets.value = parse(data))
+
+    const list = await ignoredError(Readfile, RulesetHubFilePath)
+    list && (rulesetHub.value = JSON.parse(list))
   }
 
   const saveRulesets = debounce(async () => {
     const r = omitArray(rulesets.value, ['updating'])
     await Writefile(RulesetsFilePath, stringifyNoFolding(r))
   }, 500)
 
-  const addRuleset = async (r: RuleSetType) => {
+  const addRuleset = async (r: RuleSet) => {
     rulesets.value.push(r)
     try {
       await saveRulesets()
@@ -64,7 +74,7 @@ export const useRulesetsStore = defineStore('rulesets', () => {
     }
   }
 
-  const editRuleset = async (id: string, r: RuleSetType) => {
+  const editRuleset = async (id: string, r: RuleSet) => {
     const idx = rulesets.value.findIndex((v) => v.id === id)
     if (idx === -1) return
     const backup = rulesets.value.splice(idx, 1, r)[0]
@@ -76,7 +86,7 @@ export const useRulesetsStore = defineStore('rulesets', () => {
     }
   }
 
-  const _doUpdateRuleset = async (r: RuleSetType) => {
+  const _doUpdateRuleset = async (r: RuleSet) => {
     if (r.format === RulesetFormat.Yaml) {
       let body = ''
       let isExist = true
@@ -140,7 +150,7 @@ export const useRulesetsStore = defineStore('rulesets', () => {
   const updateRulesets = async () => {
     let needSave = false
 
-    const update = async (r: RuleSetType) => {
+    const update = async (r: RuleSet) => {
       try {
         r.updating = true
         await _doUpdateRuleset(r)
@@ -159,6 +169,20 @@ export const useRulesetsStore = defineStore('rulesets', () => {
     if (needSave) saveRulesets()
   }
 
+  const rulesetHubLoading = ref(false)
+  const updateRulesetHub = async () => {
+    rulesetHubLoading.value = true
+    try {
+      const { body } = await HttpGet<string>(
+        'https://github.com/GUI-for-Cores/Ruleset-Hub/releases/download/latest/meta-full.json',
+      )
+      rulesetHub.value = JSON.parse(body)
+      await Writefile(RulesetHubFilePath, body)
+    } finally {
+      rulesetHubLoading.value = false
+    }
+  }
+
   const getRulesetById = (id: string) => rulesets.value.find((v) => v.id === id)
 
   const getRulesetByName = (name: string) => rulesets.value.find((v) => v.name === name)
@@ -174,5 +198,9 @@ export const useRulesetsStore = defineStore('rulesets', () => {
     updateRulesets,
     getRulesetById,
     getRulesetByName,
+
+    rulesetHub,
+    rulesetHubLoading,
+    updateRulesetHub,
   }
 })

frontend/src/views/ProfilesView/components/RulesConfig.vue

@@ -10,7 +10,7 @@ import {
   BuiltInOutbound,
 } from '@/constant'
 import { RulesetBehavior, RulesetFormat } from '@/enums/kernel'
-import { type ProfileType, useRulesetsStore, type RuleSetType } from '@/stores'
+import { type ProfileType, useRulesetsStore, type RuleSet } from '@/stores'
 import { deepClone, sampleID, generateRule, message } from '@/utils'
 
 interface Props {
@@ -99,7 +99,7 @@ const handleAddEnd = () => {
   }
 }
 
-const handleUseRuleset = (ruleset: RuleSetType) => {
+const handleUseRuleset = (ruleset: RuleSet) => {
   fields.value.payload = ruleset.id
   fields.value['no-resolve'] = ruleset.behavior === RulesetBehavior.Ipcidr
 }

frontend/src/views/RulesetsView/components/RulesetForm.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import { RulesetFormatOptions, RulesetBehaviorOptions } from '@/constant'
 import { RulesetBehavior, RulesetFormat } from '@/enums/kernel'
-import { type RuleSetType, useRulesetsStore } from '@/stores'
+import { type RuleSet, useRulesetsStore } from '@/stores'
 import { deepClone, sampleID, message } from '@/utils'
 
 import Button from '@/components/Button/index.vue'
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const loading = ref(false)
 
-const ruleset = ref<RuleSetType>({
+const ruleset = ref<RuleSet>({
   id: sampleID(),
   name: '',
   updateTime: 0,