feat(frontend): Phase 6-i — xray page scaffold + Advanced JSON tab

The fifth and last legacy page comes online. Tabs are scaffolded with
a-empty placeholders for the structured editors (Basics / Routing /
Outbounds / Balancers / DNS) so navigation is stable; the
Advanced (JSON) tab is fully functional and lets power users edit
the raw xraySetting tree exactly like the legacy CodeMirror pane.

- xray.html + src/xray.js: fifth Vite multi-page entry, mounted as
  XrayPage; vite.config.js routes /panel/xray and /panel/xray/ to it
  through the dev proxy bypass alongside the other pages.
- XrayPage.vue: page chrome with the Save / Restart-xray bar, restart-
  output popover (surfaces /panel/xray/getXrayResult content when
  startup fails), 6 a-tabs, and a textarea-backed Advanced JSON editor.
  CodeMirror is intentionally not pulled in — the textarea works for
  every modern browser and keeps the bundle slim while structured
  editors land in 6-ii through 6-v.
- useXraySetting.js composable: POST /panel/xray/ on mount, mirrors
  the settings-page 1s busy-loop dirty check for both xraySetting
  and outboundTestUrl, and exposes saveAll + restartXray. The dirty
  flag relies on string equality of the pretty-printed JSON, so
  reformat-only edits don't enable Save.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/pages/xray/XrayPage.vue

@@ -0,0 +1,233 @@
+<script setup>
+import { computed } from 'vue';
+import { theme as antdTheme, Modal } from 'ant-design-vue';
+import {
+  SettingOutlined,
+  SwapOutlined,
+  UploadOutlined,
+  ClusterOutlined,
+  DatabaseOutlined,
+  CodeOutlined,
+  QuestionCircleOutlined,
+} from '@ant-design/icons-vue';
+
+import { theme as themeState } from '@/composables/useTheme.js';
+import { useMediaQuery } from '@/composables/useMediaQuery.js';
+import AppSidebar from '@/components/AppSidebar.vue';
+import { useXraySetting } from './useXraySetting.js';
+
+// Phase 6-i: scaffold + advanced JSON tab. Other tabs (Basics, Routing,
+// Outbounds, Balancers, DNS) land in subsequent 6-ii…vi commits — they
+// each need their own tree of structured forms or a dedicated modal.
+// For now they show an a-empty placeholder so the navigation is
+// stable and users can still edit the full config via the Advanced
+// (JSON) tab.
+
+const antdThemeConfig = computed(() => ({
+  algorithm: themeState.isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+}));
+
+const {
+  fetched,
+  spinning,
+  saveDisabled,
+  xraySetting,
+  outboundTestUrl,
+  restartResult,
+  saveAll,
+  restartXray,
+} = useXraySetting();
+const { isMobile } = useMediaQuery();
+
+const basePath = window.__X_UI_BASE_PATH__ || '';
+const requestUri = window.location.pathname;
+
+function confirmRestart() {
+  Modal.confirm({
+    title: 'Restart xray?',
+    content: 'Reloads the xray service with the saved configuration.',
+    okText: 'Restart',
+    cancelText: 'Cancel',
+    onOk: () => restartXray(),
+  });
+}
+</script>
+
+<template>
+  <a-config-provider :theme="antdThemeConfig">
+    <a-layout
+      class="xray-page"
+      :class="{ 'is-dark': themeState.isDark, 'is-ultra': themeState.isUltra }"
+    >
+      <AppSidebar :base-path="basePath" :request-uri="requestUri" />
+
+      <a-layout class="content-shell">
+        <a-layout-content id="content-layout" class="content-area">
+          <a-spin :spinning="spinning || !fetched" :delay="200" tip="Loading…" size="large">
+            <div v-if="!fetched" class="loading-spacer" />
+
+            <template v-else>
+              <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]">
+                <!-- Save / Restart bar -->
+                <a-col :span="24">
+                  <a-card hoverable>
+                    <a-row class="header-row">
+                      <a-col :xs="24" :sm="14" class="header-actions">
+                        <a-space direction="horizontal">
+                          <a-button type="primary" :disabled="saveDisabled" @click="saveAll">
+                            Save
+                          </a-button>
+                          <a-button type="primary" danger :disabled="!saveDisabled" @click="confirmRestart">
+                            Restart xray
+                          </a-button>
+                          <a-popover v-if="restartResult" placement="rightTop">
+                            <template #title>Xray restart output</template>
+                            <template #content>
+                              <pre class="restart-result">{{ restartResult }}</pre>
+                            </template>
+                            <QuestionCircleOutlined class="restart-icon" />
+                          </a-popover>
+                        </a-space>
+                      </a-col>
+                      <a-col :xs="24" :sm="10" class="header-info">
+                        <a-back-top :target="() => document.getElementById('content-layout')" :visibility-height="200" />
+                        <a-alert
+                          type="warning"
+                          show-icon
+                          message="Save before restarting — unsaved changes are dropped on restart."
+                        />
+                      </a-col>
+                    </a-row>
+                  </a-card>
+                </a-col>
+
+                <!-- Tabs -->
+                <a-col :span="24">
+                  <a-tabs default-active-key="tpl-advanced">
+                    <a-tab-pane key="tpl-basic" class="tab-pane">
+                      <template #tab>
+                        <SettingOutlined /> <span>Basic template</span>
+                      </template>
+                      <a-empty description="Basic template — coming in 6-ii. Use the Advanced (JSON) tab to edit log/dns/api/policy directly for now." />
+                    </a-tab-pane>
+
+                    <a-tab-pane key="tpl-routing" class="tab-pane">
+                      <template #tab>
+                        <SwapOutlined /> <span>Routing</span>
+                      </template>
+                      <a-empty description="Routing rules — coming in 6-iii." />
+                    </a-tab-pane>
+
+                    <a-tab-pane key="tpl-outbound" class="tab-pane">
+                      <template #tab>
+                        <UploadOutlined /> <span>Outbounds</span>
+                      </template>
+                      <a-empty description="Outbounds — coming in 6-iv." />
+                    </a-tab-pane>
+
+                    <a-tab-pane key="tpl-balancer" class="tab-pane">
+                      <template #tab>
+                        <ClusterOutlined /> <span>Balancers</span>
+                      </template>
+                      <a-empty description="Balancers — coming in 6-v." />
+                    </a-tab-pane>
+
+                    <a-tab-pane key="tpl-dns" class="tab-pane">
+                      <template #tab>
+                        <DatabaseOutlined /> <span>DNS</span>
+                      </template>
+                      <a-empty description="DNS — coming in 6-v." />
+                    </a-tab-pane>
+
+                    <a-tab-pane key="tpl-advanced" class="tab-pane">
+                      <template #tab>
+                        <CodeOutlined /> <span>Advanced (JSON)</span>
+                      </template>
+                      <a-form layout="vertical">
+                        <a-form-item label="Outbound test URL">
+                          <a-input
+                            v-model:value="outboundTestUrl"
+                            placeholder="https://www.google.com/generate_204"
+                          />
+                        </a-form-item>
+                        <a-form-item label="xraySetting (full JSON)">
+                          <a-textarea
+                            v-model:value="xraySetting"
+                            :auto-size="{ minRows: 18, maxRows: 40 }"
+                            spellcheck="false"
+                            class="json-editor"
+                          />
+                        </a-form-item>
+                      </a-form>
+                    </a-tab-pane>
+                  </a-tabs>
+                </a-col>
+              </a-row>
+            </template>
+          </a-spin>
+        </a-layout-content>
+      </a-layout>
+    </a-layout>
+  </a-config-provider>
+</template>
+
+<style scoped>
+.xray-page {
+  --bg-page: #f0f2f5;
+  --bg-card: #ffffff;
+
+  min-height: 100vh;
+  background: var(--bg-page);
+}
+
+.xray-page.is-dark {
+  --bg-page: #0a1222;
+  --bg-card: #151f31;
+}
+
+.xray-page.is-dark.is-ultra {
+  --bg-page: #21242a;
+  --bg-card: #0c0e12;
+}
+
+.xray-page :deep(.ant-layout),
+.xray-page :deep(.ant-layout-content) {
+  background: transparent;
+}
+
+.content-shell { background: transparent; }
+.content-area { padding: 24px; }
+
+.loading-spacer { min-height: calc(100vh - 120px); }
+
+.header-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.header-actions { padding: 4px; }
+.header-info {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.tab-pane { padding-top: 20px; }
+
+.restart-icon {
+  font-size: 16px;
+  cursor: pointer;
+  color: var(--ant-primary-color, #1890ff);
+}
+
+.restart-result {
+  max-width: 480px;
+  white-space: pre-wrap;
+  font-size: 12px;
+  margin: 0;
+}
+
+.json-editor {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+}
+</style>

frontend/src/pages/xray/useXraySetting.js

@@ -0,0 +1,109 @@
+// 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 } from 'vue';
+import { HttpUtil, PromiseUtil } from '@/utils';
+
+const DIRTY_POLL_MS = 1000;
+
+export function useXraySetting() {
+  const fetched = ref(false);
+  const spinning = ref(false);
+  const saveDisabled = ref(true);
+
+  const xraySetting = ref('');
+  const oldXraySetting = ref('');
+
+  const outboundTestUrl = ref('https://www.google.com/generate_204');
+  const oldOutboundTestUrl = ref('');
+
+  const inboundTags = ref([]);
+  const clientReverseTags = ref([]);
+  const restartResult = ref('');
+
+  async function fetchAll() {
+    const msg = await HttpUtil.post('/panel/xray/');
+    if (!msg?.success) return;
+    const obj = JSON.parse(msg.obj);
+    const pretty = JSON.stringify(obj.xraySetting, null, 2);
+    xraySetting.value = pretty;
+    oldXraySetting.value = pretty;
+    inboundTags.value = obj.inboundTags || [];
+    clientReverseTags.value = obj.clientReverseTags || [];
+    outboundTestUrl.value = obj.outboundTestUrl || 'https://www.google.com/generate_204';
+    oldOutboundTestUrl.value = outboundTestUrl.value;
+    fetched.value = true;
+    saveDisabled.value = true;
+  }
+
+  async function saveAll() {
+    spinning.value = true;
+    try {
+      const msg = await HttpUtil.post('/panel/xray/update', {
+        xraySetting: xraySetting.value,
+        outboundTestUrl: outboundTestUrl.value || 'https://www.google.com/generate_204',
+      });
+      if (msg?.success) await fetchAll();
+    } finally {
+      spinning.value = false;
+    }
+  }
+
+  async function restartXray() {
+    spinning.value = true;
+    try {
+      const msg = await HttpUtil.post('/panel/api/server/restartXrayService');
+      if (msg?.success) {
+        // Match legacy: short pause, then poll for the result blob so
+        // the popover surfaces any startup error from the new process.
+        await PromiseUtil.sleep(500);
+        const r = await HttpUtil.get('/panel/xray/getXrayResult');
+        if (r?.success) restartResult.value = r.obj || '';
+      }
+    } finally {
+      spinning.value = false;
+    }
+  }
+
+  // Same 1s busy-loop pattern the settings page uses — keep it cheap
+  // and consistent. Real work (the JSON diff) is just a string compare.
+  let timer = null;
+  function startDirtyPoll() {
+    if (timer != null) return;
+    timer = setInterval(() => {
+      saveDisabled.value =
+        oldXraySetting.value === xraySetting.value
+        && oldOutboundTestUrl.value === outboundTestUrl.value;
+    }, DIRTY_POLL_MS);
+  }
+  function stopDirtyPoll() {
+    if (timer != null) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  onMounted(() => {
+    fetchAll();
+    startDirtyPoll();
+  });
+  onUnmounted(stopDirtyPoll);
+
+  return {
+    fetched,
+    spinning,
+    saveDisabled,
+    xraySetting,
+    outboundTestUrl,
+    inboundTags,
+    clientReverseTags,
+    restartResult,
+    fetchAll,
+    saveAll,
+    restartXray,
+  };
+}

frontend/src/xray.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+import Antd, { message } from 'ant-design-vue';
+import 'ant-design-vue/dist/reset.css';
+
+import { setupAxios } from '@/api/axios-init.js';
+import '@/composables/useTheme.js';
+import XrayPage from '@/pages/xray/XrayPage.vue';
+
+setupAxios();
+
+const messageContainer = document.getElementById('message');
+if (messageContainer) {
+  message.config({ getContainer: () => messageContainer });
+}
+
+createApp(XrayPage).use(Antd).mount('#app');

frontend/vite.config.js

@@ -19,6 +19,8 @@ const MIGRATED_ROUTES = {
   '/panel/settings/': '/settings.html',
   '/panel/inbounds': '/inbounds.html',
   '/panel/inbounds/': '/inbounds.html',
+  '/panel/xray': '/xray.html',
+  '/panel/xray/': '/xray.html',
 };
 
 // Build a proxy config that suppresses ECONNREFUSED noise when the Go
@@ -72,6 +74,7 @@ export default defineConfig({
         login: path.resolve(__dirname, 'login.html'),
         settings: path.resolve(__dirname, 'settings.html'),
         inbounds: path.resolve(__dirname, 'inbounds.html'),
+        xray: path.resolve(__dirname, 'xray.html'),
       },
     },
   },

frontend/xray.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>3x-ui · Xray</title>
+  </head>
+  <body>
+    <div id="message"></div>
+    <div id="app"></div>
+    <script type="module" src="/src/xray.js"></script>
+  </body>
+</html>