feat: Mixin & Script

Author: Ayideyia

frontend/src/components/Icon/CodeIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 1024 1024">
+    <path
+      d="M153.770667 517.558857l200.387047-197.241905L302.86019 268.190476 48.761905 518.290286l254.439619 243.614476 50.590476-52.833524-200.021333-191.512381zM658.285714 320.316952L709.583238 268.190476l254.098286 250.09981L709.241905 761.904762l-50.590476-52.833524 200.021333-191.512381L658.285714 320.316952z m-112.981333-86.186666L393.99619 785.554286l70.534096 19.358476 151.30819-551.399619-70.534095-19.358476z"
+      v-bind="$attrs"
+    ></path>
+  </svg>
+</template>

frontend/src/components/Icon/FileIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg viewBox="0 0 1024 1024">
+    <path
+      d="M832.9 435.7H631.3c-69.1 0-125.3-56.2-125.3-125.4V128.8c0-24.7 20-44.8 44.8-44.8s44.8 20.1 44.8 44.8v181.5c0 19.7 16 35.8 35.8 35.8H833c24.7 0 44.8 20.1 44.8 44.8-0.1 24.7-20.1 44.8-44.9 44.8zM671.7 597.9H349.2c-24.7 0-44.8-20.1-44.8-44.8 0-24.7 20.1-44.8 44.8-44.8h322.5c24.7 0 44.8 20.1 44.8 44.8 0 24.7-20.1 44.8-44.8 44.8zM671.7 770.3H349.2c-24.7 0-44.8-20.1-44.8-44.8s20.1-44.8 44.8-44.8h322.5c24.7 0 44.8 20.1 44.8 44.8s-20.1 44.8-44.8 44.8z"
+      v-bind="$attrs"
+    ></path>
+    <path
+      d="M793.2 959.7H227.7c-68.9 0-124.9-56-124.9-124.9v-646c0-68.9 56-124.9 124.9-124.9h365.1c30.8 0 60.4 11.3 83.4 31.9l200.3 179.5c26.4 23.7 41.5 57.6 41.5 93v466.5c0 68.9-56 124.9-124.8 124.9zM227.7 153.5c-19.5 0-35.3 15.8-35.3 35.3v646.1c0 19.5 15.8 35.3 35.3 35.3h565.4c19.5 0 35.3-15.8 35.3-35.3V368.3c0-10-4.3-19.6-11.7-26.3L616.4 162.5c-6.5-5.8-14.9-9-23.6-9H227.7z"
+      v-bind="$attrs"
+    ></path>
+  </svg>
+</template>

frontend/src/components/Icon/icons.ts

@@ -40,7 +40,9 @@ const icons = [
   'add',
   'filter',
   'edit',
-  'delete'
+  'delete',
+  'file',
+  'code'
 ] as const
 
 export default icons

frontend/src/constant/profile.ts

@@ -349,3 +349,11 @@ export const DnsRulesConfigDefaults = (): ProfileType['dnsRulesConfig'] => [
     'client-subnet': ''
   }
 ]
+
+export const MixinConfigDefaults = (): ProfileType['mixinConfig'] => {
+  return { priority: 'mixin', config: '{}' }
+}
+
+export const ScriptConfigDefaults = (): ProfileType['scriptConfig'] => {
+  return { code: `const onGenerate = async (config) => {\n\treturn config\n}` }
+}

frontend/src/lang/locale/en.ts

@@ -378,14 +378,24 @@ export default {
       dns: 'DNS',
       groups: 'Proxy Groups',
       dnsRules: 'DNS Rules',
-      rules: 'Route Rules'
+      rules: 'Route Rules',
+      'mixin-script': 'Mixin & Script'
     },
     proxies: 'Reference proxies',
     use: 'Reference subscriptions',
     noSubs: 'There are no available subscriptions.',
     group: 'Group Details',
     rule: 'Rule Details',
-    auto: 'This configuration is managed by subscription and will be overwritten when the subscription is updated!\nIf you want to modify this profile, please use the plugin system.'
+    auto: 'This configuration is managed by subscription and will be overwritten when the subscription is updated!\nIf you want to modify this profile, please use the plugin system.',
+    mixinSettings: {
+      name: 'Mixin',
+      priority: 'Priority',
+      mixin: 'Mixin',
+      gui: 'GUI'
+    },
+    scriptSettings: {
+      name: 'Script'
+    }
   },
   profiles: {
     shouldStop: 'Unable to delete, this profile is in use.',

frontend/src/lang/locale/zh.ts

@@ -378,14 +378,24 @@ export default {
       dns: 'DNS 设置',
       groups: '策略组设置',
       dnsRules: 'DNS规则设置',
-      rules: '路由规则设置'
+      rules: '路由规则设置',
+      'mixin-script': '混入和脚本'
     },
     proxies: '引用节点',
     use: '引用订阅',
     noSubs: '没有可用的订阅',
     group: '策略组详情',
     rule: '规则详情',
-    auto: '此配置由订阅接管，更新订阅时会被覆盖！\n如果你想修改此配置，请使用插件系统。'
+    auto: '此配置由订阅接管，更新订阅时会被覆盖！\n如果你想修改此配置，请使用插件系统。',
+    mixinSettings: {
+      name: '混入配置',
+      priority: '优先级',
+      mixin: '混入优先',
+      gui: 'GUI优先'
+    },
+    scriptSettings: {
+      name: '脚本操作'
+    }
   },
   profiles: {
     shouldStop: '当前配置正在使用，无法删除',

frontend/src/stores/profiles.ts

@@ -9,7 +9,9 @@ import {
   ProxyGroup,
   FinalDnsType,
   TunConfigDefaults,
-  DnsConfigDefaults
+  DnsConfigDefaults,
+  MixinConfigDefaults,
+  ScriptConfigDefaults
 } from '@/constant'
 
 export type ProfileType = {
@@ -107,6 +109,13 @@ export type ProfileType = {
     'download-detour': string
     'client-subnet': string
   }[]
+  mixinConfig: {
+    priority: 'mixin' | 'gui'
+    config: string
+  }
+  scriptConfig: {
+    code: string
+  }
 }
 
 export const useProfilesStore = defineStore('profiles', () => {
@@ -116,14 +125,13 @@ export const useProfilesStore = defineStore('profiles', () => {
     const data = await ignoredError(Readfile, ProfilesFilePath)
     data && (profiles.value = parse(data))
 
-    for (let i = 0; i < profiles.value.length; ++i) {
-      const profile = profiles.value[i]
-      if (profile.tunConfig['inet4-address'] === undefined) {
-        profiles.value[i].tunConfig['inet4-address'] = TunConfigDefaults()['inet4-address']
-      }
-      if (profile.tunConfig['inet6-address'] === undefined) {
-        profiles.value[i].tunConfig['inet6-address'] = TunConfigDefaults()['inet6-address']
-      }
+    profiles.value.forEach((profile) => {
+      const tunCofnigDefaults = TunConfigDefaults()
+      profile.tunConfig['inet4-address'] =
+        profile.tunConfig['inet4-address'] ?? tunCofnigDefaults['inet4-address']
+      profile.tunConfig['inet6-address'] =
+        profile.tunConfig['inet6-address'] ?? tunCofnigDefaults['inet6-address']
+
       if (profile.tunConfig['interface-name'] === undefined) {
         const oldValue = (profile.tunConfig as any)['interface_name']
         if (oldValue !== undefined) {
@@ -132,19 +140,24 @@ export const useProfilesStore = defineStore('profiles', () => {
           profile.tunConfig['interface-name'] = ''
         }
       }
+
       if (profile.dnsConfig['disable-cache'] === undefined) {
-        profiles.value[i].dnsConfig['disable-cache'] = DnsConfigDefaults()['disable-cache']
-        profiles.value[i].dnsConfig['disable-expire'] = DnsConfigDefaults()['disable-expire']
-        profiles.value[i].dnsConfig['independent-cache'] = DnsConfigDefaults()['independent-cache']
-        profiles.value[i].dnsConfig['client-subnet'] = DnsConfigDefaults()['client-subnet']
-        const dnsRulesSize = profiles.value[i].dnsRulesConfig.length
+        const dnsConfigDefaults = DnsConfigDefaults()
+        profile.dnsConfig['disable-cache'] = dnsConfigDefaults['disable-cache']
+        profile.dnsConfig['disable-expire'] = dnsConfigDefaults['disable-expire']
+        profile.dnsConfig['independent-cache'] = dnsConfigDefaults['independent-cache']
+        profile.dnsConfig['client-subnet'] = dnsConfigDefaults['client-subnet']
+        const dnsRulesSize = profile.dnsRulesConfig.length
         for (let j = 0; j < dnsRulesSize; ++j) {
-          if (profiles.value[i].dnsRulesConfig[j]['client-subnet'] === undefined) {
-            profiles.value[i].dnsRulesConfig[j]['client-subnet'] = ''
+          if (profile.dnsRulesConfig[j]['client-subnet'] === undefined) {
+            profile.dnsRulesConfig[j]['client-subnet'] = ''
           }
         }
       }
-    }
+
+      profile.mixinConfig = profile.mixinConfig ?? MixinConfigDefaults()
+      profile.scriptConfig = profile.scriptConfig ?? ScriptConfigDefaults()
+    })
   }
 
   const saveProfiles = debounce(async () => {

frontend/src/utils/generator.ts

@@ -1,5 +1,5 @@
 import { Readfile, Writefile } from '@/bridge'
-import { deepClone, ignoredError } from '@/utils'
+import { deepAssign, deepClone, ignoredError } from '@/utils'
 import { KernelConfigFilePath, ProxyGroup } from '@/constant/kernel'
 import { type ProfileType, useSubscribesStore, useRulesetsStore, usePluginsStore } from '@/stores'
 import { TunConfigDefaults } from '@/constant'
@@ -552,8 +552,31 @@ export const generateConfig = async (originalProfile: ProfileType) => {
     }
   }
 
+  const { priority, config: mixin } = originalProfile.mixinConfig
+  if (priority === 'mixin') {
+    deepAssign(config, JSON.parse(mixin))
+  } else if (priority === 'gui') {
+    deepAssign(config, deepAssign(JSON.parse(mixin), config))
+  }
+
+  const fn = new AsyncFunction(
+    `${profile.scriptConfig.code};return await onGenerate(${JSON.stringify(config)})`
+  )
+  let _config
+  try {
+    _config = await fn()
+  } catch (error: any) {
+    throw error.message || error
+  }
+
+  if (typeof _config !== 'object') {
+    throw 'Wrong result'
+  }
+
   const pluginsStore = usePluginsStore()
-  return await pluginsStore.onGenerateTrigger(config, originalProfile)
+  const result = await pluginsStore.onGenerateTrigger(_config, originalProfile)
+
+  return result
 }
 
 export const generateConfigFile = async (profile: ProfileType) => {

frontend/src/views/HomeView/components/QuickStart.vue

@@ -39,7 +39,9 @@ const handleSubmit = async () => {
     dnsConfig: Defaults.DnsConfigDefaults(),
     proxyGroupsConfig: Defaults.ProxyGroupsConfigDefaults(),
     rulesConfig: Defaults.RulesConfigDefaults(),
-    dnsRulesConfig: Defaults.DnsRulesConfigDefaults()
+    dnsRulesConfig: Defaults.DnsRulesConfigDefaults(),
+    mixinConfig: Defaults.MixinConfigDefaults(),
+    scriptConfig: Defaults.ScriptConfigDefaults()
   }
 
   profile.proxyGroupsConfig[0].use = [subscribeID]

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { type ProfileType } from '@/stores'
+import { MixinConfigDefaults, ScriptConfigDefaults } from '@/constant'
+
+const model = defineModel<{
+  mixin: ProfileType['mixinConfig']
+  script: ProfileType['scriptConfig']
+}>({
+  default: {
+    mixin: MixinConfigDefaults(),
+    script: ScriptConfigDefaults()
+  }
+})
+
+const { t } = useI18n()
+
+const activeTab = ref('mixin')
+
+const tabItems = [
+  { key: 'mixin', tab: 'profile.mixinSettings.name' },
+  { key: 'script', tab: 'profile.scriptSettings.name' }
+]
+
+const MixinPriorityOptions = [
+  { label: 'profile.mixinSettings.mixin', value: 'mixin' },
+  { label: 'profile.mixinSettings.gui', value: 'gui' }
+]
+</script>
+
+<template>
+  <Tabs v-model:active-key="activeTab" :items="tabItems">
+    <template #mixin>
+      <div class="form-item">
+        {{ t('profile.mixinSettings.priority') }}
+        <Radio v-model="model.mixin.priority" :options="MixinPriorityOptions" />
+      </div>
+      <CodeViewer v-model="model.mixin.config" lang="json" editable />
+    </template>
+    <template #script>
+      <CodeViewer v-model="model.script.code" lang="javascript" editable />
+    </template>
+  </Tabs>
+</template>
+
+<style lang="less" scoped></style>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, inject, type Ref } from 'vue'
+import { ref, inject, type Ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useMessage, useBool } from '@/hooks'
-import { deepClone, sampleID } from '@/utils'
+import { useMessage, useAlert, useBool } from '@/hooks'
+import { deepClone, generateConfig, sampleID } from '@/utils'
 import * as Defaults from '@/constant/profile'
 import { WindowToggleMaximise } from '@/bridge'
 import { type ProfileType, useProfilesStore } from '@/stores'
@@ -15,6 +15,7 @@ import DnsConfig from './DnsConfig.vue'
 import ProxyGroupsConfig from './ProxyGroupsConfig.vue'
 import DnsRulesConfig from './DnsRulesConfig.vue'
 import RulesConfig from './RulesConfig.vue'
+import MixinAndScript from './MixinAndScriptConfig.vue'
 
 interface Props {
   id?: string
@@ -41,7 +42,8 @@ const stepItems = [
   { title: 'profile.step.groups' },
   { title: 'profile.step.rules' },
   { title: 'profile.step.dns' },
-  { title: 'profile.step.dnsRules' }
+  { title: 'profile.step.dnsRules' },
+  { title: 'profile.step.mixin-script' }
 ]
 
 const profile = ref<ProfileType>({
@@ -53,10 +55,23 @@ const profile = ref<ProfileType>({
   dnsConfig: Defaults.DnsConfigDefaults(),
   proxyGroupsConfig: Defaults.ProxyGroupsConfigDefaults(),
   rulesConfig: Defaults.RulesConfigDefaults(),
-  dnsRulesConfig: Defaults.DnsRulesConfigDefaults()
+  dnsRulesConfig: Defaults.DnsRulesConfigDefaults(),
+  mixinConfig: Defaults.MixinConfigDefaults(),
+  scriptConfig: Defaults.ScriptConfigDefaults()
+})
+
+const mixinAndScriptConfig = computed({
+  get() {
+    return { mixin: profile.value.mixinConfig, script: profile.value.scriptConfig }
+  },
+  set({ mixin, script }) {
+    profile.value.mixinConfig = mixin
+    profile.value.scriptConfig = script
+  }
 })
 
 const { t } = useI18n()
+const { alert } = useAlert()
 const { message } = useMessage()
 const profilesStore = useProfilesStore()
 const [showAdvancedSetting, toggleAdvancedSetting] = useBool(false)
@@ -92,6 +107,15 @@ const handleAdd = () => {
   map[currentStep.value].value.handleAdd()
 }
 
+const handlePreview = async () => {
+  try {
+    const config = await generateConfig(profile.value)
+    alert(profile.value.name, JSON.stringify(config, null, 2))
+  } catch (error: any) {
+    message.error(error.message || error)
+  }
+}
+
 if (props.isUpdate) {
   const p = profilesStore.getProfileById(props.id)
   if (p) {
@@ -103,12 +127,13 @@ if (props.isUpdate) {
 <template>
   <div @dblclick="WindowToggleMaximise" class="header" style="--wails-draggable: drag">
     <div class="header-title">{{ t(stepItems[currentStep].title) }}</div>
+    <Button @click="handlePreview" icon="file" type="text" class="ml-auto" />
     <Button
       v-show="[3, 4, 6].includes(currentStep)"
       @click="handleAdd"
       icon="add"
       type="text"
-      class="ml-auto mr-8"
+      class="mr-8"
     />
   </div>
 
@@ -161,6 +186,10 @@ if (props.isUpdate) {
         :proxy-groups="profile.proxyGroupsConfig"
       />
     </div>
+
+    <div v-show="currentStep === 7">
+      <MixinAndScript v-model="mixinAndScriptConfig" />
+    </div>
   </div>
 
   <div class="form-action">
@@ -169,7 +198,7 @@ if (props.isUpdate) {
     </Button>
     <Button
       @click="handleNextStep"
-      :disabled="!profile.name || currentStep == 6"
+      :disabled="!profile.name || currentStep == stepItems.length - 1"
       type="text"
       class="mr-auto"
     >

frontend/src/views/ProfilesView/index.vue

@@ -90,7 +90,8 @@ const menus: Menu[] = [
     'profile.step.groups',
     'profile.step.rules',
     'profile.step.dns',
-    'profile.step.dnsRules'
+    'profile.step.dnsRules',
+    'profile.step.mixin-script'
   ].map((v, i) => {
     return {
       label: v,