feat(xray/outbounds): TCP probe mode + Test All + timing breakdown

- service.TestOutbound now dispatches on `mode`:
  - "tcp": parallel net.DialTimeout to every server/peer endpoint
    (vmess/vless/trojan/ss/socks/http/wireguard). No xray spin-up,
    no semaphore — safe to run concurrently across outbounds.
  - "http" (default): existing temp-xray + SOCKS path, now with an
    httptrace.ClientTrace breakdown (DNS / Connect / TLS / TTFB)
    alongside the total delay and status code.
- testSemaphore renamed to httpTestSemaphore — only HTTP probes
  serialise, TCP runs free.
- TestOutboundResult carries the per-mode extras: timing fields for
  HTTP, per-endpoint dial list for TCP, plus a `mode` echo.
- Controller reads `mode` from the form and passes it through.
- useXraySetting: testOutbound accepts mode (default "tcp"); new
  testAllOutbounds(mode) runs a worker pool (concurrency 8 for TCP,
  1 for HTTP) and skips blackhole / loopback / blocked outbounds —
  also skips freedom / dns under TCP since they have no endpoint.
- OutboundsTab: TCP/HTTP radio toggle and a Test All button land in
  the toolbar; the per-row ⚡ now uses the selected mode. Results
  surface in a popover with the full timing breakdown plus the
  endpoint list for TCP probes. Latency header replaces the duplicate
  "check" column title.

Practical effect: testing ten outbounds in TCP mode drops from ~50–100s
(serial HTTP) to ~1–2s (parallel dial × 8). HTTP mode stays as the
authoritative probe and now shows where the latency actually lives.

frontend/src/pages/xray/OutboundsTab.vue

@@ -16,6 +16,7 @@ import {
   LoadingOutlined,
   ArrowUpOutlined,
   ArrowDownOutlined,
+  PlayCircleOutlined,
 } from '@ant-design/icons-vue';
 import { Modal } from 'ant-design-vue';
 
@@ -25,16 +26,11 @@ import OutboundFormModal from './OutboundFormModal.vue';
 
 const { t } = useI18n();
 
-// Outbounds tab — list + actions over templateSettings.outbounds.
-// Mirrors the legacy outbound table layout (identity / address /
-// traffic / test result / test button) plus the row action menu
-// (set first / edit / reset traffic / delete). Mobile collapses to
-// a card list.
-
 const props = defineProps({
   templateSettings: { type: Object, default: null },
   outboundsTraffic: { type: Array, default: () => [] },
   outboundTestStates: { type: Object, default: () => ({}) },
+  testingAll: { type: Boolean, default: false },
   inboundTags: { type: Array, default: () => [] },
   isMobile: { type: Boolean, default: false },
 });
@@ -48,7 +44,9 @@ const inboundTagOptions = computed(() => {
   return [...out];
 });
 
-const emit = defineEmits(['reset-traffic', 'test', 'show-warp', 'show-nord', 'delete']);
+const emit = defineEmits(['reset-traffic', 'test', 'test-all', 'show-warp', 'show-nord', 'delete']);
+
+const testMode = ref('tcp');
 
 // === Modal state ====================================================
 const modalOpen = ref(false);
@@ -141,10 +139,13 @@ function outboundAddresses(o) {
   return serverObj ? serverObj.map((s) => `${s.address}:${s.port}`) : [];
 }
 
-function isUntestable(o) {
-  return o.protocol === Protocols.Blackhole
+function isUntestable(o, mode = testMode.value) {
+  if (!o) return true;
+  if (o.protocol === Protocols.Blackhole
     || o.protocol === Protocols.Loopback
-    || o.tag === 'blocked';
+    || o.tag === 'blocked') return true;
+  if (mode === 'tcp' && (o.protocol === Protocols.Freedom || o.protocol === Protocols.DNS)) return true;
+  return false;
 }
 function isTesting(idx) {
   return !!props.outboundTestStates?.[idx]?.testing;
@@ -156,6 +157,12 @@ function showSecurity(security) {
   return security === 'tls' || security === 'reality';
 }
 
+function hasBreakdown(r) {
+  if (!r) return false;
+  if (r.endpoints?.length) return true;
+  return !!(r.ttfbMs || r.tlsMs || r.connectMs || r.dnsMs || r.statusCode || r.error);
+}
+
 // === Columns ========================================================
 // Computed so titles re-render after a locale swap.
 const columns = computed(() => [
@@ -163,7 +170,7 @@ const columns = computed(() => [
   { title: 'Tag', key: 'identity', align: 'left', width: 220 },
   { title: t('pages.inbounds.address'), key: 'address', align: 'left', width: 230 },
   { title: t('pages.inbounds.traffic'), key: 'traffic', align: 'left', width: 200 },
-  { title: t('check'), key: 'testResult', align: 'left', width: 140 },
+  { title: t('pages.xray.latency') !== 'pages.xray.latency' ? t('pages.xray.latency') : 'Latency', key: 'testResult', align: 'left', width: 140 },
   { title: t('check'), key: 'test', align: 'center', width: 80 },
 ]);
 
@@ -177,8 +184,8 @@ const rows = computed(() => {
   <a-space direction="vertical" size="middle" :style="{ width: '100%' }">
     <!-- Toolbar -->
     <a-row :gutter="[12, 12]" align="middle" justify="space-between">
-      <a-col :xs="24" :sm="14">
-        <a-space size="small">
+      <a-col :xs="24" :sm="12">
+        <a-space size="small" wrap>
           <a-button type="primary" @click="openAdd">
             <template #icon>
               <PlusOutlined />
@@ -199,15 +206,29 @@ const rows = computed(() => {
           </a-button>
         </a-space>
       </a-col>
-      <a-col :xs="24" :sm="10" class="toolbar-right">
-        <a-popconfirm placement="topRight" :ok-text="t('reset')" :cancel-text="t('cancel')"
-          :title="t('pages.inbounds.resetAllTrafficContent')" @confirm="emit('reset-traffic', '-alltags-')">
-          <a-button>
+      <a-col :xs="24" :sm="12" class="toolbar-right">
+        <a-space size="small" wrap>
+          <a-tooltip :title="t('pages.xray.testModeHint') !== 'pages.xray.testModeHint' ? t('pages.xray.testModeHint') : 'TCP: fast dial-only probe. HTTP: full request through xray.'">
+            <a-radio-group v-model:value="testMode" size="small" button-style="solid">
+              <a-radio-button value="tcp">TCP</a-radio-button>
+              <a-radio-button value="http">HTTP</a-radio-button>
+            </a-radio-group>
+          </a-tooltip>
+          <a-button type="primary" :loading="testingAll" @click="emit('test-all', testMode)">
             <template #icon>
-              <RetweetOutlined />
+              <PlayCircleOutlined />
             </template>
+            <span v-if="!isMobile">{{ t('pages.xray.testAll') !== 'pages.xray.testAll' ? t('pages.xray.testAll') : 'Test all' }}</span>
           </a-button>
-        </a-popconfirm>
+          <a-popconfirm placement="topRight" :ok-text="t('reset')" :cancel-text="t('cancel')"
+            :title="t('pages.inbounds.resetAllTrafficContent')" @confirm="emit('reset-traffic', '-alltags-')">
+            <a-button>
+              <template #icon>
+                <RetweetOutlined />
+              </template>
+            </a-button>
+          </a-popconfirm>
+        </a-space>
       </a-col>
     </a-row>
 
@@ -262,15 +283,39 @@ const rows = computed(() => {
           <span class="traffic-sep" />
           <span class="traffic-down">↓ {{ SizeFormatter.sizeFormat(trafficFor(record).down) }}</span>
           <span class="card-test">
-            <span v-if="testResult(index)" :class="testResult(index).success ? 'pill-ok' : 'pill-fail'">
-              <CheckCircleFilled v-if="testResult(index).success" />
-              <CloseCircleFilled v-else />
-              <span v-if="testResult(index).success">{{ testResult(index).delay }}&nbsp;ms</span>
-              <span v-else>failed</span>
-            </span>
+            <a-popover v-if="testResult(index)" placement="topRight"
+              :overlay-class-name="'outbound-test-popover'">
+              <template #content>
+                <div class="timing-breakdown">
+                  <div class="td-head" :class="testResult(index).success ? 'ok' : 'fail'">
+                    <span v-if="testResult(index).success">{{ testResult(index).delay }} ms</span>
+                    <span v-else>{{ testResult(index).error || 'failed' }}</span>
+                    <span v-if="testResult(index).mode" class="mode-badge">{{ testResult(index).mode.toUpperCase() }}</span>
+                  </div>
+                  <template v-if="hasBreakdown(testResult(index))">
+                    <div v-if="testResult(index).ttfbMs">TTFB: {{ testResult(index).ttfbMs }} ms</div>
+                    <div v-if="testResult(index).tlsMs">TLS: {{ testResult(index).tlsMs }} ms</div>
+                    <div v-if="testResult(index).connectMs">Connect: {{ testResult(index).connectMs }} ms</div>
+                    <div v-if="testResult(index).dnsMs">DNS: {{ testResult(index).dnsMs }} ms</div>
+                    <div v-if="testResult(index).statusCode">HTTP {{ testResult(index).statusCode }}</div>
+                    <div v-for="ep in testResult(index).endpoints || []" :key="ep.address" class="endpoint-row">
+                      <span :class="ep.success ? 'dot-ok' : 'dot-fail'">●</span>
+                      <span class="ep-addr">{{ ep.address }}</span>
+                      <span class="ep-meta">{{ ep.success ? `${ep.delay} ms` : (ep.error || 'failed') }}</span>
+                    </div>
+                  </template>
+                </div>
+              </template>
+              <span :class="testResult(index).success ? 'pill-ok' : 'pill-fail'">
+                <CheckCircleFilled v-if="testResult(index).success" />
+                <CloseCircleFilled v-else />
+                <span v-if="testResult(index).success">{{ testResult(index).delay }}&nbsp;ms</span>
+                <span v-else>failed</span>
+              </span>
+            </a-popover>
             <LoadingOutlined v-else-if="isTesting(index)" />
             <a-button type="primary" shape="circle" size="small" :loading="isTesting(index)"
-              :disabled="isUntestable(record) || isTesting(index)" @click="emit('test', index)">
+              :disabled="isUntestable(record, testMode) || isTesting(index)" @click="emit('test', index, testMode)">
               <template #icon>
                 <ThunderboltOutlined />
               </template>
@@ -350,22 +395,44 @@ const rows = computed(() => {
         </template>
 
         <template v-else-if="column.key === 'testResult'">
-          <span v-if="testResult(index)" :class="testResult(index).success ? 'pill-ok' : 'pill-fail'">
-            <CheckCircleFilled v-if="testResult(index).success" />
-            <CloseCircleFilled v-else />
-            <span v-if="testResult(index).success">{{ testResult(index).delay }}&nbsp;ms</span>
-            <a-tooltip v-else :title="testResult(index).error">
-              <span>failed</span>
-            </a-tooltip>
-          </span>
+          <a-popover v-if="testResult(index)" placement="topLeft"
+            :overlay-class-name="'outbound-test-popover'">
+            <template #content>
+              <div class="timing-breakdown">
+                <div class="td-head" :class="testResult(index).success ? 'ok' : 'fail'">
+                  <span v-if="testResult(index).success">{{ testResult(index).delay }} ms</span>
+                  <span v-else>{{ testResult(index).error || 'failed' }}</span>
+                  <span v-if="testResult(index).mode" class="mode-badge">{{ testResult(index).mode.toUpperCase() }}</span>
+                </div>
+                <template v-if="hasBreakdown(testResult(index))">
+                  <div v-if="testResult(index).ttfbMs">TTFB: {{ testResult(index).ttfbMs }} ms</div>
+                  <div v-if="testResult(index).tlsMs">TLS: {{ testResult(index).tlsMs }} ms</div>
+                  <div v-if="testResult(index).connectMs">Connect: {{ testResult(index).connectMs }} ms</div>
+                  <div v-if="testResult(index).dnsMs">DNS: {{ testResult(index).dnsMs }} ms</div>
+                  <div v-if="testResult(index).statusCode">HTTP {{ testResult(index).statusCode }}</div>
+                  <div v-for="ep in testResult(index).endpoints || []" :key="ep.address" class="endpoint-row">
+                    <span :class="ep.success ? 'dot-ok' : 'dot-fail'">●</span>
+                    <span class="ep-addr">{{ ep.address }}</span>
+                    <span class="ep-meta">{{ ep.success ? `${ep.delay} ms` : (ep.error || 'failed') }}</span>
+                  </div>
+                </template>
+              </div>
+            </template>
+            <span :class="testResult(index).success ? 'pill-ok' : 'pill-fail'">
+              <CheckCircleFilled v-if="testResult(index).success" />
+              <CloseCircleFilled v-else />
+              <span v-if="testResult(index).success">{{ testResult(index).delay }}&nbsp;ms</span>
+              <span v-else>failed</span>
+            </span>
+          </a-popover>
           <LoadingOutlined v-else-if="isTesting(index)" />
           <span v-else class="empty">—</span>
         </template>
 
         <template v-else-if="column.key === 'test'">
-          <a-tooltip :title="t('check')">
+          <a-tooltip :title="`${t('check')} (${testMode.toUpperCase()})`">
             <a-button type="primary" shape="circle" :loading="isTesting(index)"
-              :disabled="isUntestable(record) || isTesting(index)" @click="emit('test', index)">
+              :disabled="isUntestable(record, testMode) || isTesting(index)" @click="emit('test', index, testMode)">
               <template #icon>
                 <ThunderboltOutlined />
               </template>
@@ -532,3 +599,66 @@ const rows = computed(() => {
   color: #ff4d4f;
 }
 </style>
+
+<style>
+.outbound-test-popover .timing-breakdown {
+  font-size: 12px;
+  line-height: 1.6;
+  min-width: 180px;
+  max-width: 320px;
+}
+
+.outbound-test-popover .td-head {
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.outbound-test-popover .td-head.ok {
+  color: #008771;
+}
+
+.outbound-test-popover .td-head.fail {
+  color: #e04141;
+}
+
+.outbound-test-popover .mode-badge {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 0 6px;
+  border-radius: 8px;
+  background: rgba(22, 119, 255, 0.12);
+  color: #1677ff;
+  margin-left: auto;
+}
+
+.outbound-test-popover .endpoint-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.outbound-test-popover .endpoint-row .ep-addr {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.outbound-test-popover .endpoint-row .ep-meta {
+  opacity: 0.75;
+}
+
+.outbound-test-popover .dot-ok {
+  color: #008771;
+}
+
+.outbound-test-popover .dot-fail {
+  color: #e04141;
+}
+</style>

frontend/src/pages/xray/XrayPage.vue

@@ -40,21 +40,26 @@ const {
   restartResult,
   outboundsTraffic,
   outboundTestStates,
+  testingAll,
   fetchAll,
   resetOutboundsTraffic,
   testOutbound,
+  testAllOutbounds,
   saveAll,
   resetToDefault,
   restartXray,
   applyOutboundsEvent,
 } = useXraySetting();
 
-// Live outbounds traffic — pushed by xray_traffic_job every ~10s.
 useWebSocket({ outbounds: applyOutboundsEvent });
 
-async function onTestOutbound(idx) {
+async function onTestOutbound(idx, mode = 'tcp') {
   const outbound = templateSettings.value?.outbounds?.[idx];
-  if (outbound) await testOutbound(idx, outbound);
+  if (outbound) await testOutbound(idx, outbound, mode);
+}
+
+async function onTestAllOutbounds(mode = 'tcp') {
+  await testAllOutbounds(mode);
 }
 
 function onDeleteOutbound(idx) {
@@ -278,8 +283,10 @@ function confirmRestart() {
                         <UploadOutlined /> <span>{{ t('pages.xray.Outbounds') }}</span>
                       </template>
                       <OutboundsTab :template-settings="templateSettings" :outbounds-traffic="outboundsTraffic"
-                        :outbound-test-states="outboundTestStates" :inbound-tags="inboundTags" :is-mobile="isMobile"
-                        @reset-traffic="resetOutboundsTraffic" @test="onTestOutbound" @delete="onDeleteOutbound"
+                        :outbound-test-states="outboundTestStates" :testing-all="testingAll"
+                        :inbound-tags="inboundTags" :is-mobile="isMobile"
+                        @reset-traffic="resetOutboundsTraffic" @test="onTestOutbound"
+                        @test-all="onTestAllOutbounds" @delete="onDeleteOutbound"
                         @show-warp="showWarp" @show-nord="showNord" />
                     </a-tab-pane>
 

frontend/src/pages/xray/useXraySetting.js

@@ -1,50 +1,24 @@
-// Drives the xray page's fetch / dirty / save lifecycle. The Go side
-// returns the live xraySetting (the full JSON config), the inboundTags
-// list, and a few sidecar values (clientReverseTags, outboundTestUrl)
-// the structured tabs need. We keep the JSON as a string here — pretty-
-// printed for the textarea; tabs that want a parsed view can JSON.parse
-// it themselves.
 
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { HttpUtil, PromiseUtil } from '@/utils';
 
 const DIRTY_POLL_MS = 1000;
 
-// Hoists the parsed `templateSettings` alongside the JSON string so
-// structured tabs (Basics/Routing/Outbounds/etc.) can mutate fields
-// directly while the Advanced (JSON) tab edits the same data as text.
-// We keep both in sync with two cooperating watches:
-//   • mutating templateSettings re-stringifies into xraySetting;
-//   • editing the JSON text re-parses into templateSettings (only on
-//     valid JSON — invalid edits leave templateSettings untouched
-//     so the structured tabs don't blow up while the user types).
 let syncing = false;
 
 export function useXraySetting() {
   const fetched = ref(false);
   const spinning = ref(false);
   const saveDisabled = ref(true);
-  // Holds a user-facing message when fetchAll fails; lets the page
-  // render an error UI instead of an endless spinner.
   const fetchError = ref('');
-
   const xraySetting = ref('');
   const oldXraySetting = ref('');
-
-  // Parsed mirror — null until first successful fetch / parse.
   const templateSettings = ref(null);
-
   const outboundTestUrl = ref('https://www.google.com/generate_204');
   const oldOutboundTestUrl = ref('');
-
   const inboundTags = ref([]);
   const clientReverseTags = ref([]);
   const restartResult = ref('');
-
-  // Outbounds tab data — traffic stats + per-row test state. Test
-  // states are keyed by outbound index (sparse object), each entry
-  // is `{ testing, result }` where result is the wire response from
-  // /panel/xray/testOutbound or null while the test is in flight.
   const outboundsTraffic = ref([]);
   const outboundTestStates = ref({});
 
@@ -53,7 +27,6 @@ export function useXraySetting() {
     const msg = await HttpUtil.post('/panel/xray/');
     if (!msg?.success) {
       fetchError.value = msg?.msg || 'Failed to load xray config';
-      // Mark as fetched so the spinner clears and the error UI renders.
       fetched.value = true;
       return;
     }
@@ -79,8 +52,7 @@ export function useXraySetting() {
     saveDisabled.value = true;
   }
 
-  // Structured tabs mutate templateSettings deeply. Re-stringify on
-  // change so the Advanced JSON view + the dirty-poll see the edits.
+
   watch(
     templateSettings,
     (next) => {
@@ -95,8 +67,6 @@ export function useXraySetting() {
     { deep: true },
   );
 
-  // Advanced JSON edits — only refresh templateSettings when the text
-  // parses, so structured tabs stay readable mid-edit.
   watch(xraySetting, (next) => {
     if (syncing) return;
     try {
@@ -133,21 +103,19 @@ export function useXraySetting() {
     if (msg?.success) await fetchOutboundsTraffic();
   }
 
-  // Merges a WebSocket `outbounds` event into outboundsTraffic in place.
-  // The xray traffic job pushes the full snapshot every ~10s so the user
-  // doesn't have to click the (now-removed) refresh button.
   function applyOutboundsEvent(payload) {
     if (Array.isArray(payload)) outboundsTraffic.value = payload;
   }
 
-  async function testOutbound(index, outbound) {
+  async function testOutbound(index, outbound, mode = 'tcp') {
     if (!outbound) return null;
     if (!outboundTestStates.value[index]) outboundTestStates.value[index] = {};
-    outboundTestStates.value[index] = { testing: true, result: null };
+    outboundTestStates.value[index] = { testing: true, result: null, mode };
     try {
       const msg = await HttpUtil.post('/panel/xray/testOutbound', {
         outbound: JSON.stringify(outbound),
         allOutbounds: JSON.stringify(templateSettings.value?.outbounds || []),
+        mode,
       });
       if (msg?.success) {
         outboundTestStates.value[index] = { testing: false, result: msg.obj };
@@ -155,24 +123,53 @@ export function useXraySetting() {
       }
       outboundTestStates.value[index] = {
         testing: false,
-        result: { success: false, error: msg?.msg || 'Unknown error' },
+        result: { success: false, error: msg?.msg || 'Unknown error', mode },
       };
     } catch (e) {
       outboundTestStates.value[index] = {
         testing: false,
-        result: { success: false, error: String(e) },
+        result: { success: false, error: String(e), mode },
       };
     }
     return null;
   }
 
+  const testingAll = ref(false);
+  async function testAllOutbounds(mode = 'tcp') {
+    const list = templateSettings.value?.outbounds || [];
+    if (list.length === 0 || testingAll.value) return;
+    testingAll.value = true;
+    try {
+      const concurrency = mode === 'tcp' ? 8 : 1;
+      const queue = list
+        .map((ob, i) => ({ index: i, outbound: ob }))
+        .filter(({ outbound }) => {
+          const tag = outbound?.tag;
+          const proto = outbound?.protocol;
+          if (proto === 'blackhole' || proto === 'loopback' || tag === 'blocked') return false;
+          if (mode === 'tcp' && (proto === 'freedom' || proto === 'dns')) return false;
+          return true;
+        });
+      async function worker() {
+        while (queue.length > 0) {
+          const item = queue.shift();
+          if (!item) break;
+          await testOutbound(item.index, item.outbound, mode);
+        }
+      }
+      const workers = Array.from({ length: Math.min(concurrency, queue.length) }, () => worker());
+      await Promise.all(workers);
+    } finally {
+      testingAll.value = false;
+    }
+  }
+
   async function resetToDefault() {
     spinning.value = true;
     try {
       const msg = await HttpUtil.get('/panel/setting/getDefaultJsonConfig');
       if (msg?.success) {
-        // Mutate templateSettings — the watch above re-stringifies into
-        // xraySetting so the Advanced JSON tab and dirty-poll see it.
+
         templateSettings.value = JSON.parse(JSON.stringify(msg.obj));
       }
     } finally {
@@ -234,11 +231,13 @@ export function useXraySetting() {
     restartResult,
     outboundsTraffic,
     outboundTestStates,
+    testingAll,
     fetchAll,
     fetchOutboundsTraffic,
     resetOutboundsTraffic,
     applyOutboundsEvent,
     testOutbound,
+    testAllOutbounds,
     saveAll,
     resetToDefault,
     restartXray,