完善ui/完善执行步骤

frontend/src/api/index.js

@@ -47,6 +47,10 @@ export const deleteDomain = (id) => api.delete(`/domains/${id}`)
 // Logs
 export const getLogs = (status) => api.get('/logs', { params: { status } })
 
+// ACME
+export const issueCert = (domainId) => api.post(`/acme/issue/${domainId}`)
+export const renewCert = (domainId) => api.post(`/acme/renew/${domainId}`)
+
 // Script (通过管理接口获取脚本内容)
 export const getScript = (domain, serverName) =>
   axios.get('/api/script', { params: { domain, server_name: serverName } })

frontend/src/views/Domains.vue

@@ -41,10 +41,11 @@
         <el-table-column label="版本" width="70">
           <template #default="{ row }">{{ row.version }}</template>
         </el-table-column>
-        <el-table-column label="操作" width="240" align="right">
+        <el-table-column label="操作" width="300" align="right">
           <template #default="{ row }">
             <div style="display: flex; align-items: center; gap: 4px; justify-content: flex-end;">
               <el-button type="primary" link size="small" @click="openEdit(row)">编辑</el-button>
+              <el-button type="success" link size="small" @click="handleIssue(row)">申请证书</el-button>
               <el-button type="primary" link size="small" @click="openScript(row)">脚本</el-button>
               <el-dropdown trigger="click" @command="(cmd) => handleCertAction(cmd, row)">
                 <el-button type="primary" link size="small">
@@ -96,28 +97,92 @@
     <el-dialog
       v-model="scriptDialogVisible"
       title="部署脚本"
-      width="680px"
+      width="720px"
       destroy-on-close
     >
       <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
         <span style="font-weight: 600; font-size: 16px;">{{ scriptDomain?.domain }}</span>
         <el-tag v-if="scriptDomain?.server_name" type="info" size="small">{{ scriptDomain.server_name }}</el-tag>
       </div>
-      <p style="color: #909399; font-size: 13px; margin-bottom: 16px;">
-        将以下命令添加到服务器的定时任务中，实现证书自动拉取与部署。
-      </p>
-      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px;">
         <el-radio-group v-model="scriptOs" size="small" @change="loadScript">
           <el-radio-button value="linux">Linux</el-radio-button>
           <el-radio-button value="windows">Windows</el-radio-button>
         </el-radio-group>
-        <el-button type="primary" round size="small" :icon="DocumentCopy" @click="copyScript">复制命令</el-button>
-        <el-button round size="small" :icon="Download" @click="downloadScript">下载脚本</el-button>
+      </div>
+
+      <!-- Linux 部署步骤 -->
+      <template v-if="scriptOs === 'linux'">
+        <el-steps direction="vertical" :active="3" style="margin-bottom: 12px;">
+          <el-step title="下载脚本" status="process">
+            <template #description>
+              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                <code style="flex: 1; background: #1d1e1f; color: #e5eaf3; padding: 8px 12px; border-radius: 6px; font-size: 12px; word-break: break-all;">curl -fsSLk -H "Authorization: Bearer {{ adminToken }}" {{ scriptDownloadUrl }} -o /opt/deploy-{{ scriptDomain?.domain?.replace('*.', '') }}.sh</code>
+                <el-button type="primary" link size="small" :icon="DocumentCopy" @click="copyText(`curl -fsSLk -H 'Authorization: Bearer ${adminToken}' ${scriptDownloadUrl} -o /opt/deploy-${scriptDomain?.domain?.replace('*.', '')}.sh`)" />
+              </div>
+            </template>
+          </el-step>
+          <el-step title="赋予执行权限" status="process">
+            <template #description>
+              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                <code style="flex: 1; background: #1d1e1f; color: #e5eaf3; padding: 8px 12px; border-radius: 6px; font-size: 12px;">chmod +x /opt/deploy-{{ scriptDomain?.domain?.replace('*.', '') }}.sh</code>
+                <el-button type="primary" link size="small" :icon="DocumentCopy" @click="copyText(`chmod +x /opt/deploy-${scriptDomain?.domain?.replace('*.', '')}.sh`)" />
+              </div>
+            </template>
+          </el-step>
+          <el-step title="手动执行一次，然后添加定时任务" status="process">
+            <template #description>
+              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                <code style="flex: 1; background: #1d1e1f; color: #e5eaf3; padding: 8px 12px; border-radius: 6px; font-size: 12px;">/opt/deploy-{{ scriptDomain?.domain?.replace('*.', '') }}.sh && echo "0 * * * * /opt/deploy-{{ scriptDomain?.domain?.replace('*.', '') }}.sh >> /var/log/cert-deploy.log 2>&1" | crontab -</code>
+                <el-button type="primary" link size="small" :icon="DocumentCopy" @click="copyText(`/opt/deploy-${scriptDomain?.domain?.replace('*.', '')}.sh && echo '0 * * * * /opt/deploy-${scriptDomain?.domain?.replace('*.', '')}.sh >> /var/log/cert-deploy.log 2>&1' | crontab -`)" />
+              </div>
+            </template>
+          </el-step>
+        </el-steps>
+      </template>
+
+      <!-- Windows 部署步骤 -->
+      <template v-if="scriptOs === 'windows'">
+        <el-steps direction="vertical" :active="3" style="margin-bottom: 12px;">
+          <el-step title="下载脚本" status="process">
+            <template #description>
+              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                <code style="flex: 1; background: #1d1e1f; color: #e5eaf3; padding: 8px 12px; border-radius: 6px; font-size: 12px; word-break: break-all;">Invoke-WebRequest -Uri "{{ scriptDownloadUrl }}" -Headers @{Authorization="Bearer {{ adminToken }}"} -OutFile "C:\cert\deploy-{{ scriptDomain?.domain?.replace('*.', '') }}.ps1" -SkipCertificateCheck</code>
+                <el-button type="primary" link size="small" :icon="DocumentCopy" @click="copyText(`Invoke-WebRequest -Uri '${scriptDownloadUrl}' -Headers @{Authorization='Bearer ${adminToken}'} -OutFile 'C:\\cert\\deploy-${scriptDomain?.domain?.replace('*.', '')}.ps1' -SkipCertificateCheck`)" />
+              </div>
+            </template>
+          </el-step>
+          <el-step title="测试运行" status="process">
+            <template #description>
+              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                <code style="flex: 1; background: #1d1e1f; color: #e5eaf3; padding: 8px 12px; border-radius: 6px; font-size: 12px;">powershell -ExecutionPolicy Bypass -File "C:\cert\deploy-{{ scriptDomain?.domain?.replace('*.', '') }}.ps1"</code>
+                <el-button type="primary" link size="small" :icon="DocumentCopy" @click="copyText(`powershell -ExecutionPolicy Bypass -File 'C:\\cert\\deploy-${scriptDomain?.domain?.replace('*.', '')}.ps1'`)" />
+              </div>
+            </template>
+          </el-step>
+          <el-step title="手动执行一次，然后添加计划任务" status="process">
+            <template #description>
+              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                <code style="flex: 1; background: #1d1e1f; color: #e5eaf3; padding: 8px 12px; border-radius: 6px; font-size: 12px;">powershell -ExecutionPolicy Bypass -File "C:\cert\deploy-{{ scriptDomain?.domain?.replace('*.', '') }}.ps1"; schtasks /create /tn "CertDeploy-{{ scriptDomain?.domain?.replace('*.', '') }}" /tr "powershell -ExecutionPolicy Bypass -File C:\cert\deploy-{{ scriptDomain?.domain?.replace('*.', '') }}.ps1" /sc hourly /f</code>
+                <el-button type="primary" link size="small" :icon="DocumentCopy" @click="copyText(`powershell -ExecutionPolicy Bypass -File 'C:\\cert\\deploy-${scriptDomain?.domain?.replace('*.', '')}.ps1'; schtasks /create /tn 'CertDeploy-${scriptDomain?.domain?.replace('*.', '')}' /tr 'powershell -ExecutionPolicy Bypass -File C:\\cert\\deploy-${scriptDomain?.domain?.replace('*.', '')}.ps1' /sc hourly /f`)" />
+              </div>
+            </template>
+          </el-step>
+        </el-steps>
+      </template>
+
+      <!-- 脚本内容 -->
+      <div style="display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px;">
+        <span style="font-weight: 600; font-size: 14px;">脚本内容</span>
+        <div style="display: flex; gap: 8px;">
+          <el-button type="primary" round size="small" :icon="DocumentCopy" @click="copyScript">复制脚本</el-button>
+          <el-button round size="small" :icon="Download" @click="downloadScript">下载脚本</el-button>
+        </div>
       </div>
       <el-input
         v-model="scriptContent"
         type="textarea"
-        :rows="12"
+        :rows="14"
         readonly
         style="font-family: 'Courier New', monospace;"
       />
@@ -129,7 +194,7 @@
 import { ref, onMounted } from 'vue'
 import { Plus, ArrowDown, DocumentCopy, Download } from '@element-plus/icons-vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
-import { getDomains, createDomain, updateDomain, deleteDomain, getServers } from '../api'
+import { getDomains, createDomain, updateDomain, deleteDomain, getServers, issueCert } from '../api'
 import api from '../api'
 
 const domains = ref([])
@@ -148,6 +213,8 @@ const scriptDialogVisible = ref(false)
 const scriptDomain = ref(null)
 const scriptOs = ref('linux')
 const scriptContent = ref('')
+const scriptDownloadUrl = ref('')
+const adminToken = ref(localStorage.getItem('admin_token') || '')
 
 const load = async () => {
   const { data } = await getDomains()
@@ -212,6 +279,10 @@ const openScript = async (row) => {
   scriptDomain.value = row
   scriptOs.value = 'linux'
   scriptContent.value = ''
+  // 构建脚本下载 URL（供 curl 使用）
+  const base = window.location.origin
+  const params = new URLSearchParams({ domain: row.domain, server_name: row.server_name, os: 'linux' })
+  scriptDownloadUrl.value = `${base}/admin/api/script/download?${params}`
   scriptDialogVisible.value = true
   await loadScript()
 }
@@ -226,11 +297,21 @@ const loadScript = async () => {
       },
     })
     scriptContent.value = resp.data.script
+    // 更新下载 URL 的 os 参数
+    const base = window.location.origin
+    const params = new URLSearchParams({ domain: scriptDomain.value.domain, server_name: scriptDomain.value.server_name, os: scriptOs.value })
+    scriptDownloadUrl.value = `${base}/admin/api/script/download?${params}`
   } catch (e) {
     scriptContent.value = '# 加载失败: ' + (e.response?.data?.detail || e.message)
   }
 }
 
+const copyText = (text) => {
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage.success('已复制到剪贴板')
+  })
+}
+
 const copyScript = () => {
   navigator.clipboard.writeText(scriptContent.value).then(() => {
     ElMessage.success('已复制到剪贴板')
@@ -263,6 +344,24 @@ const handleCertAction = async (cmd, row) => {
 }
 
 // ---- 删除 ----
+// ---- 申请证书 ----
+const handleIssue = async (row) => {
+  try {
+    await ElMessageBox.confirm(
+      `确认为 "${row.domain}" 申请证书？`,
+      '申请证书',
+      { type: 'info', confirmButtonText: '立即申请', cancelButtonText: '取消' }
+    )
+    const { data } = await issueCert(row.id)
+    ElMessage.success(data.message || '证书申请成功')
+    await load()
+  } catch (e) {
+    if (e !== 'cancel') {
+      ElMessage.error(e.response?.data?.detail || '证书申请失败')
+    }
+  }
+}
+
 const handleDelete = async (row) => {
   try {
     await ElMessageBox.confirm(`确认删除域名 "${row.domain}"？`, '确认删除', { type: 'warning' })