From 9d130286539ea6eb4b572b216fe81393a7b3afb4 Mon Sep 17 00:00:00 2001
From: haimu0427 <haimu0427@outlook.com>
Date: Thu, 12 Mar 2026 15:15:04 +0800
Subject: [PATCH] feat(ui): add Clash settings to subscription panels

- Add Clash enable switch in general subscription settings
- Add Clash path/URI configuration in formats panel
- Display Clash QR code on subscription page
- Rename JSON tab to "Formats" for clarity

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/html/settings.html                        |  4 +--
 .../settings/panel/subscription/general.html  |  7 +++++
 .../settings/panel/subscription/json.html     | 26 ++++++++++++++++---
 .../settings/panel/subscription/subpage.html  | 17 ++++++++++--
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/web/html/settings.html b/web/html/settings.html
index 21294da7..a34ff6d0 100644
--- a/web/html/settings.html
+++ b/web/html/settings.html
@@ -82,10 +82,10 @@
                     </template>
                     {{ template "settings/panel/subscription/general" . }}
                   </a-tab-pane>
-                  <a-tab-pane key="5" v-if="allSetting.subJsonEnable" :style="{ paddingTop: '20px' }">
+                  <a-tab-pane key="5" v-if="allSetting.subJsonEnable || allSetting.subClashEnable" :style="{ paddingTop: '20px' }">
                     <template #tab>
                       <a-icon type="code"></a-icon>
-                      <span>{{ i18n "pages.settings.subSettings" }} (JSON)</span>
+                      <span>{{ i18n "pages.settings.subSettings" }} (Formats)</span>
                     </template>
                     {{ template "settings/panel/subscription/json" . }}
                   </a-tab-pane>
diff --git a/web/html/settings/panel/subscription/general.html b/web/html/settings/panel/subscription/general.html
index 5d83aa37..4f10a716 100644
--- a/web/html/settings/panel/subscription/general.html
+++ b/web/html/settings/panel/subscription/general.html
@@ -15,6 +15,13 @@
                 <a-switch v-model="allSetting.subJsonEnable"></a-switch>
             </template>
         </a-setting-list-item>
+        <a-setting-list-item paddings="small">
+            <template #title>Clash / Mihomo Subscription</template>
+            <template #description>Enable direct Clash Party and Mihomo YAML subscriptions.</template>
+            <template #control>
+                <a-switch v-model="allSetting.subClashEnable"></a-switch>
+            </template>
+        </a-setting-list-item>
         <a-setting-list-item paddings="small">
             <template #title>{{ i18n "pages.settings.subListen"}}</template>
             <template #description>{{ i18n "pages.settings.subListenDesc"}}</template>
diff --git a/web/html/settings/panel/subscription/json.html b/web/html/settings/panel/subscription/json.html
index e8642305..9b83571a 100644
--- a/web/html/settings/panel/subscription/json.html
+++ b/web/html/settings/panel/subscription/json.html
@@ -1,8 +1,8 @@
 {{define "settings/panel/subscription/json"}}
 <a-collapse default-active-key="1">
     <a-collapse-panel key="1" header='{{ i18n "pages.xray.generalConfigs"}}'>
-        <a-setting-list-item paddings="small">
-            <template #title>{{ i18n "pages.settings.subPath"}}</template>
+        <a-setting-list-item paddings="small" v-if="allSetting.subJsonEnable">
+            <template #title>{{ i18n "pages.settings.subPath"}} (JSON)</template>
             <template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
             <template #control>
                 <a-input type="text" v-model="allSetting.subJsonPath"
@@ -11,14 +11,32 @@
                     placeholder="/json/"></a-input>
             </template>
         </a-setting-list-item>
-        <a-setting-list-item paddings="small">
-            <template #title>{{ i18n "pages.settings.subURI"}}</template>
+        <a-setting-list-item paddings="small" v-if="allSetting.subJsonEnable">
+            <template #title>{{ i18n "pages.settings.subURI"}} (JSON)</template>
             <template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
             <template #control>
                 <a-input type="text" placeholder="(http|https)://domain[:port]/path/"
                     v-model="allSetting.subJsonURI"></a-input>
             </template>
         </a-setting-list-item>
+        <a-setting-list-item paddings="small" v-if="allSetting.subClashEnable">
+            <template #title>{{ i18n "pages.settings.subPath"}} (Clash)</template>
+            <template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
+            <template #control>
+                <a-input type="text" v-model="allSetting.subClashPath"
+                    @input="allSetting.subClashPath = ((typeof $event === 'string' ? $event : ($event && $event.target ? $event.target.value : '')) || '').replace(/[:*]/g, '')"
+                    @blur="allSetting.subClashPath = (p => { p = p || '/'; if (!p.startsWith('/')) p='/' + p; if (!p.endsWith('/')) p += '/'; return p.replace(/\/+/g,'/'); })(allSetting.subClashPath)"
+                    placeholder="/clash/"></a-input>
+            </template>
+        </a-setting-list-item>
+        <a-setting-list-item paddings="small" v-if="allSetting.subClashEnable">
+            <template #title>{{ i18n "pages.settings.subURI"}} (Clash)</template>
+            <template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
+            <template #control>
+                <a-input type="text" placeholder="(http|https)://domain[:port]/path/"
+                    v-model="allSetting.subClashURI"></a-input>
+            </template>
+        </a-setting-list-item>
     </a-collapse-panel>
     <a-collapse-panel key="2" header='{{ i18n "pages.settings.fragment"}}'>
         <a-setting-list-item paddings="small">
diff --git a/web/html/settings/panel/subscription/subpage.html b/web/html/settings/panel/subscription/subpage.html
index 794c67c3..64c1224d 100644
--- a/web/html/settings/panel/subscription/subpage.html
+++ b/web/html/settings/panel/subscription/subpage.html
@@ -83,7 +83,7 @@
                         <a-form-item>
                             <a-space direction="vertical" align="center">
                                 <a-row type="flex" :gutter="[8,8]" justify="center" style="width:100%">
-                                    <a-col :xs="24" :sm="app.subJsonUrl ? 12 : 24" style="text-align:center;">
+                                    <a-col :xs="24" :sm="app.subJsonUrl || app.subClashUrl ? 12 : 24" style="text-align:center;">
                                         <tr-qr-box class="qr-box">
                                             <a-tag color="purple" class="qr-tag">
                                                 <span>{{ i18n
@@ -112,6 +112,19 @@
                                             </tr-qr-bg>
                                         </tr-qr-box>
                                     </a-col>
+                                    <a-col v-if="app.subClashUrl" :xs="24" :sm="12" style="text-align:center;">
+                                        <tr-qr-box class="qr-box">
+                                            <a-tag color="purple" class="qr-tag">
+                                                <span>Clash / Mihomo</span>
+                                            </a-tag>
+                                            <tr-qr-bg class="qr-bg-sub">
+                                                <tr-qr-bg-inner class="qr-bg-sub-inner">
+                                                    <canvas id="qrcode-subclash" class="qr-cv" title='{{ i18n "copy" }}'
+                                                        @click="copy(app.subClashUrl)"></canvas>
+                                                </tr-qr-bg-inner>
+                                            </tr-qr-bg>
+                                        </tr-qr-box>
+                                    </a-col>
                                 </a-row>
                             </a-space>
                         </a-form-item>
@@ -242,7 +255,7 @@
 </a-layout>
 
 <!-- Bootstrap data for external JS -->
-<template id="subscription-data" data-sid="{{ .sId }}" data-sub-url="{{ .subUrl }}" data-subjson-url="{{ .subJsonUrl }}"
+<template id="subscription-data" data-sid="{{ .sId }}" data-sub-url="{{ .subUrl }}" data-subjson-url="{{ .subJsonUrl }}" data-subclash-url="{{ .subClashUrl }}"
     data-download="{{ .download }}" data-upload="{{ .upload }}" data-used="{{ .used }}" data-total="{{ .total }}"
     data-remained="{{ .remained }}" data-expire="{{ .expire }}" data-lastonline="{{ .lastOnline }}"
     data-downloadbyte="{{ .downloadByte }}" data-uploadbyte="{{ .uploadByte }}" data-totalbyte="{{ .totalByte }}"