ssh-manager/frontend/src/components/AboutLicenseModal.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useToast } from 'vue-toast-notification'
import { BadgeInfo, Copy, ShieldCheck, X } from 'lucide-vue-next'
import { useProductStatusStore } from '../stores/productStatus'
import { useConnectionsStore } from '../stores/connections'
import { useActivityLogStore } from '../stores/activityLog'
import { useTransfersStore } from '../stores/transfers'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  close: []
}>()

const toast = useToast()
const productStatusStore = useProductStatusStore()
const connectionsStore = useConnectionsStore()
const activityLogStore = useActivityLogStore()
const transfersStore = useTransfersStore()

const appVersion = computed(() => import.meta.env.VITE_APP_VERSION || '2026.04 Source Delivery')

const diagnostics = computed(() => {
  return [
    `Version: ${appVersion.value}`,
    `First Launch: ${formatTime(productStatusStore.firstLaunchedAt)}`,
    `Connections: ${connectionsStore.connections.length}`,
    `文件分发记录: ${transfersStore.runs.length}`,
    `Activity Logs: ${activityLogStore.entries.length}`,
    `User Agent: ${navigator.userAgent}`,
  ].join('\n')
})

async function copyDiagnostics() {
  try {
    await navigator.clipboard.writeText(diagnostics.value)
    toast.success('诊断信息已复制')
  } catch (error) {
    console.error('Failed to copy diagnostics:', error)
    toast.error('复制诊断信息失败')
  }
}

function closeModal() {
  emit('close')
}

function formatTime(ts: number) {
  return new Date(ts).toLocaleString()
}
</script>

<template>
  <div
    v-if="show"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-3 sm:p-4"
    role="dialog"
    aria-modal="true"
    aria-label="关于与诊断"
  >
    <div class="max-h-[90vh] w-full max-w-3xl overflow-hidden rounded-xl border border-slate-700 bg-slate-900 shadow-2xl">
      <header class="flex items-center justify-between border-b border-slate-700 px-4 py-3">
        <div class="inline-flex items-center gap-2">
          <BadgeInfo class="h-4 w-4 text-cyan-300" />
          <h2 class="text-sm font-semibold text-slate-100">关于与诊断</h2>
        </div>
        <button
          type="button"
          class="rounded-md p-2 text-slate-400 transition-colors hover:bg-slate-800 hover:text-slate-100"
          aria-label="关闭关于弹窗"
          @click="closeModal"
        >
          <X class="h-4 w-4" />
        </button>
      </header>

      <div class="space-y-4 overflow-y-auto p-4">
        <section class="rounded-xl border border-slate-800 bg-slate-950/60 p-4 sm:p-5">
          <div class="flex items-center gap-2">
            <ShieldCheck class="h-4 w-4 text-cyan-300" />
            <h3 class="text-base font-semibold text-slate-50">SSH Manager</h3>
          </div>
          <p class="mt-3 text-sm leading-6 text-slate-400">
            当前版本按“源码交付 + Docker 部署”方式使用。出问题时，把下面的诊断信息复制出来，发给卖家或自己排查即可。
          </p>
        </section>

        <section class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
            <p class="text-xs text-slate-500">版本</p>
            <p class="mt-1 break-all text-sm font-medium text-slate-100">{{ appVersion }}</p>
          </div>
          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
            <p class="text-xs text-slate-500">首次启动</p>
            <p class="mt-1 text-sm font-medium text-slate-100">{{ formatTime(productStatusStore.firstLaunchedAt) }}</p>
          </div>
          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
            <p class="text-xs text-slate-500">连接数</p>
            <p class="mt-1 text-sm font-medium text-slate-100">{{ connectionsStore.connections.length }}</p>
          </div>
          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
            <p class="text-xs text-slate-500">传输记录</p>
            <p class="mt-1 text-sm font-medium text-slate-100">{{ transfersStore.runs.length }}</p>
          </div>
        </section>

        <section class="rounded-xl border border-slate-800 bg-slate-950/60 p-4 sm:p-5">
          <h3 class="text-sm font-semibold text-slate-100">诊断信息</h3>
          <p class="mt-2 text-sm leading-6 text-slate-400">
            如果页面异常、连接失败或者功能表现不对，先复制这段信息，再配合截图或报错内容一起发出去。
          </p>
          <button
            type="button"
            class="mt-4 inline-flex min-h-[44px] w-full items-center justify-center gap-1.5 rounded-md border border-slate-700 px-3 py-2 text-sm text-slate-200 transition-colors hover:bg-slate-800 sm:w-auto"
            @click="copyDiagnostics"
          >
            <Copy class="h-4 w-4" />
            <span>复制诊断信息</span>
          </button>

          <pre class="mt-4 overflow-x-auto rounded-lg border border-slate-800 bg-slate-950 px-3 py-3 text-xs leading-6 text-slate-300"><code>{{ diagnostics }}</code></pre>
        </section>
      </div>
    </div>
  </div>
</template>