acme-auto/frontend/src/views/Domains.vue

<template>
  <div>
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl font-bold">域名管理</h2>
      <router-link to="/domains/new" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm">
        + 新增域名
      </router-link>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
      <table class="w-full text-sm">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-gray-500 font-medium">域名</th>
            <th class="px-6 py-3 text-left text-gray-500 font-medium">服务器</th>
            <th class="px-6 py-3 text-left text-gray-500 font-medium">证书路径</th>
            <th class="px-6 py-3 text-left text-gray-500 font-medium">版本</th>
            <th class="px-6 py-3 text-left text-gray-500 font-medium">证书到期</th>
            <th class="px-6 py-3 text-right text-gray-500 font-medium">操作</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
          <tr v-for="d in domains" :key="d.id">
            <td class="px-6 py-3 font-medium">{{ d.domain }}</td>
            <td class="px-6 py-3 text-gray-500">{{ d.server_name }}</td>
            <td class="px-6 py-3">
              <code class="text-xs bg-gray-100 px-2 py-0.5 rounded">{{ d.cert_dir }}</code>
            </td>
            <td class="px-6 py-3">
              <code class="text-xs bg-gray-100 px-2 py-0.5 rounded">{{ d.version }}</code>
            </td>
            <td class="px-6 py-3">
              <span v-if="d.cert_not_after" :class="expiryClass(d.cert_not_after)" class="text-xs">
                {{ formatDate(d.cert_not_after) }}
              </span>
              <span v-else class="text-gray-400 text-xs">-</span>
            </td>
            <td class="px-6 py-3 text-right space-x-2">
              <button @click="handleIssue(d)" :disabled="d._issuing" class="text-orange-600 hover:underline text-xs disabled:opacity-50">
                {{ d._issuing ? '申请中...' : '申请证书' }}
              </button>
              <button @click="downloadCert(d, 'fullchain')" class="text-teal-600 hover:underline text-xs">下载证书</button>
              <button @click="downloadCert(d, 'private')" class="text-teal-600 hover:underline text-xs">下载密钥</button>
              <router-link :to="`/domains/${d.id}/edit`" class="text-blue-600 hover:underline text-xs">编辑</router-link>
              <button @click="copyDeployCmd(d)" class="text-green-600 hover:underline text-xs">复制部署命令</button>
              <router-link :to="`/script/${d.domain}?server=${d.server_name}`" class="text-purple-600 hover:underline text-xs">查看脚本</router-link>
              <button @click="handleDelete(d)" class="text-red-600 hover:underline text-xs">删除</button>
            </td>
          </tr>
          <tr v-if="!domains.length">
            <td colspan="5" class="px-6 py-8 text-center text-gray-400">暂无域名</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 复制成功提示 -->
    <div v-if="showCopied" class="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg text-sm transition-opacity">
      已复制到剪贴板
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDomains, deleteDomain } from '../api'
import api from '../api'
import { useToast } from '../composables/useToast'

const toast = useToast()

const domains = ref([])
const showCopied = ref(false)

const load = async () => {
  const { data } = await getDomains()
  domains.value = data.map(d => ({ ...d, _issuing: false }))
}

const formatDate = (iso) => {
  if (!iso) return '-'
  return new Date(iso).toLocaleDateString('zh-CN')
}

const expiryClass = (iso) => {
  if (!iso) return ''
  const days = Math.ceil((new Date(iso) - new Date()) / 86400000)
  if (days <= 7) return 'text-red-600 font-medium'
  if (days <= 30) return 'text-orange-600'
  return 'text-green-600'
}

const handleIssue = async (d) => {
  if (!confirm(`确认为 "${d.domain}" 申请/续签证书？`)) return
  d._issuing = true
  try {
    const { data } = await api.post(`/acme/issue/${d.id}`)
    data.success ? toast.success(`申请成功: ${data.message}`) : toast.error(`申请失败: ${data.message}`)
    await load()
  } catch (e) {
    toast.error('操作失败: ' + (e.response?.data?.detail || e.message))
  } finally {
    d._issuing = false
  }
}

const handleDelete = async (d) => {
  if (!confirm(`确认删除域名 "${d.domain}"？`)) return
  await deleteDomain(d.id)
  await load()
}

const copyDeployCmd = async (d) => {
  // 根据服务器平台生成不同的部署命令
  const baseUrl = window.location.origin
  const safeName = d.domain.replace(/^\*\./, '')  // 泛域名去掉 *.
  const encodedDomain = encodeURIComponent(d.domain)
  let cmd
  if (d.platform === 'windows') {
    cmd = `Invoke-WebRequest "${baseUrl}/api/script?domain=${encodedDomain}&server=${encodeURIComponent(d.server_name)}" -OutFile C:\\scripts\\deploy-cert-${safeName}.ps1`
  } else {
    cmd = `curl -fsSL "${baseUrl}/api/script?domain=${encodedDomain}&server=${encodeURIComponent(d.server_name)}" -o /usr/local/bin/deploy-cert-${safeName}.sh && chmod +x /usr/local/bin/deploy-cert-${safeName}.sh`
  }
  await navigator.clipboard.writeText(cmd)
  showCopied.value = true
  setTimeout(() => { showCopied.value = false }, 2000)
}

const downloadCert = (d, fileType) => {
  const token = localStorage.getItem('admin_token')
  const url = `/admin/api/cert-download/${d.id}/${fileType}`
  // 用 fetch 下载，带上 token
  fetch(url, { headers: { Authorization: `Bearer ${token}` } })
    .then(res => {
      if (!res.ok) return res.json().then(e => { throw new Error(e.detail || '下载失败') })
      return res.blob()
    })
    .then(blob => {
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      a.download = fileType === 'fullchain' ? 'fullchain.pem' : 'private.key'
      a.click()
      URL.revokeObjectURL(a.href)
    })
    .catch(e => toast.error(e.message))
}

onMounted(load)
</script>