feat(tls): manage ACME domain and add desktop client settings

frontend/src/locales/en-US.json

@@ -728,6 +728,14 @@
   "protocolIcon": {
     "custom": "Custom Protocol"
   },
+  "tls": {
+    "title": "Domain & certificate",
+    "description": "OpsX VPN can serve ports 80/443 with automatic ACME HTTP-01 issuance and renewal; Nginx and Certbot are optional.",
+    "domain": "Configured domain", "activeDomain": "Active domain", "saveDomain": "Save domain", "restartRequired": "Domain saved; restart OpsX VPN to enable ports 80/443 and automatic issuance", "saveFailed": "Could not save domain", "dns": "DNS", "certificate": "Certificate", "valid": "Valid", "pending": "Pending first HTTPS handshake",
+    "notConfigured": "Disabled", "saved": "Domain configuration saved", "issuer": "Issuer", "expires": "Expires", "renewal": "Renewal", "automatic": "Automatic (autocert)",
+    "ports": "Listening ports (HTTP / HTTPS)", "setupHint": "Save the domain and restart the server, then allow public TCP 80/443. The first HTTPS request issues a certificate and caches it in data/acme. VPN_TLS_DOMAIN may also be used and overrides the saved setting. Preserve the data directory.",
+    "refresh": "Refresh status", "openHttps": "Open HTTPS health check", "loadFailed": "Could not load certificate status"
+  },
   "protocols": {
     "wireguard": {
       "name": "WireGuard",

frontend/src/locales/zh-CN.json

@@ -728,6 +728,14 @@
   "protocolIcon": {
     "custom": "自定义协议"
   },
+  "tls": {
+    "title": "域名与证书",
+    "description": "opsx-vpn 可直接监听 80/443，通过 ACME HTTP-01 自动签发和续签；无需 Nginx 或 Certbot。",
+    "domain": "配置域名", "activeDomain": "当前监听域名", "saveDomain": "保存域名", "restartRequired": "域名已保存，重启 opsx-vpn 后才会监听 80/443 并启用自动签发", "saveFailed": "保存域名失败", "dns": "DNS 解析", "certificate": "证书", "valid": "有效", "pending": "等待首次 HTTPS 请求签发",
+    "notConfigured": "未启用", "saved": "域名配置已保存", "issuer": "颁发者", "expires": "到期时间", "renewal": "续签", "automatic": "自动（autocert）",
+    "ports": "监听端口（HTTP / HTTPS）", "setupHint": "保存域名并重启服务，放行公网 TCP 80/443；证书将在该域名首次 HTTPS 访问时签发，缓存于 data/acme。也可用 VPN_TLS_DOMAIN 环境变量设置（优先于页面配置）。请保留数据目录。",
+    "refresh": "刷新状态", "openHttps": "打开 HTTPS 健康检查", "loadFailed": "读取证书状态失败"
+  },
   "protocols": {
     "wireguard": {
       "name": "WireGuard",

frontend/src/views/Settings.vue

@@ -43,6 +43,32 @@
       </el-card>
     </el-col>
     <el-col :xs="24" :lg="14" v-if="auth.isAdmin()">
+      <el-card class="page-card" shadow="never" style="margin-bottom:16px">
+        <template #header><b>{{ $t('tls.title') }}</b></template>
+        <el-alert type="info" :closable="false" :title="$t('tls.description')" style="margin-bottom:16px" />
+        <el-form @submit.prevent="saveTLSDomain" label-position="top">
+          <el-form-item :label="$t('tls.domain')">
+            <el-input v-model.trim="tlsDomain" placeholder="test-link.appx365.com" maxlength="253" />
+          </el-form-item>
+          <el-button type="primary" :loading="tlsSaving" @click="saveTLSDomain">{{ $t('tls.saveDomain') }}</el-button>
+        </el-form>
+        <el-alert v-if="tlsStatus?.restart_required" type="warning" :closable="false" :title="$t('tls.restartRequired')" style="margin:12px 0" />
+        <el-descriptions :column="1" size="small" border v-if="tlsStatus">
+          <el-descriptions-item :label="$t('tls.domain')">{{ tlsStatus.configured_domain || $t('tls.notConfigured') }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('tls.activeDomain')">{{ tlsStatus.domain || $t('tls.notConfigured') }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('tls.dns')">{{ tlsStatus.dns?.join(', ') || '—' }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('tls.certificate')">
+            <el-tag :type="tlsStatus.certificate_valid ? 'success' : 'warning'">{{ tlsStatus.certificate_valid ? $t('tls.valid') : tlsStatus.enabled ? $t('tls.pending') : $t('tls.notConfigured') }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item v-if="tlsStatus.certificate_cached" :label="$t('tls.issuer')">{{ tlsStatus.issuer || '—' }}</el-descriptions-item>
+          <el-descriptions-item v-if="tlsStatus.certificate_cached" :label="$t('tls.expires')">{{ new Date(tlsStatus.not_after).toLocaleString() }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('tls.renewal')">{{ tlsStatus.enabled ? $t('tls.automatic') : '—' }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('tls.ports')">{{ tlsStatus.http_address || ':80' }} / {{ tlsStatus.https_address || ':443' }}</el-descriptions-item>
+        </el-descriptions>
+        <p class="tls-hint">{{ $t('tls.setupHint') }}</p>
+        <el-button :loading="tlsLoading" @click="loadTLS">{{ $t('tls.refresh') }}</el-button>
+        <el-button v-if="tlsStatus?.enabled" type="primary" tag="a" :href="`https://${tlsStatus.domain}/api/health`" target="_blank" rel="noopener noreferrer">{{ $t('tls.openHttps') }}</el-button>
+      </el-card>
       <el-card class="page-card" shadow="never">
         <template #header><b>{{ $t('settings.auditTitle') }}</b></template>
         <el-empty :description="$t('settings.auditMigrated')">
@@ -82,6 +108,30 @@ const mfaCanvas = ref(null)
 const mfaLoading = ref(false)
 const backupVisible = ref(false)
 const backupCodes = ref([])
+const tlsStatus = ref(null)
+const tlsLoading = ref(false)
+const tlsSaving = ref(false)
+const tlsDomain = ref('')
+
+async function loadTLS() {
+  tlsLoading.value = true
+  try {
+    const { data } = await api.get('/system/tls')
+    tlsStatus.value = data
+    tlsDomain.value = data.configured_domain || data.domain || ''
+  } catch (e) { ElMessage.error(e.response?.data?.error || t('tls.loadFailed')) }
+  finally { tlsLoading.value = false }
+}
+
+async function saveTLSDomain() {
+  tlsSaving.value = true
+  try {
+    const { data } = await api.put('/system/tls/domain', { domain: tlsDomain.value })
+    tlsStatus.value = data.status
+    ElMessage.success(data.restart_required ? t('tls.restartRequired') : t('tls.saved'))
+  } catch (e) { ElMessage.error(e.response?.data?.error || t('tls.saveFailed')) }
+  finally { tlsSaving.value = false }
+}
 
 async function changePwd() {
   if (pwd.value.new_password !== pwd.value.confirm) return ElMessage.warning(t('settings.passwordMismatch'))
@@ -98,6 +148,7 @@ async function changePwd() {
 }
 
 onMounted(async () => {
+  if (auth.isAdmin() && !auth.mustChange) loadTLS()
   try {
     const status = await api.get('/mfa/status')
     mfa.value.enabled = status.data.enabled
@@ -148,4 +199,5 @@ function copyBackup() {
   color: var(--text-primary); text-align: center; padding: 6px;
   background: var(--bg-card); border-radius: 4px;
 }
+.tls-hint { color: var(--text-secondary); line-height: 1.6; font-size: 13px; }
 </style>