feat: prepare sellable source delivery edition

frontend/src/components/AboutLicenseModal.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useToast } from 'vue-toast-notification'
+import { BadgeInfo, Copy, FileCode2, 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}`,
+    `Delivery Mode: ${productStatusStore.licenseStatusText}`,
+    `Environment Fingerprint: ${productStatusStore.machineFingerprint}`,
+    `Connections: ${connectionsStore.connections.length}`,
+    `Transfer Runs: ${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-4"
+    role="dialog"
+    aria-modal="true"
+    aria-label="关于与交付信息"
+  >
+    <div class="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="grid gap-4 p-4 lg:grid-cols-[1.1fr_0.9fr]">
+        <section class="space-y-4">
+          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
+            <p class="text-xs uppercase tracking-[0.18em] text-cyan-300/80">Product</p>
+            <h3 class="mt-2 text-xl font-semibold text-slate-50">SSH Manager</h3>
+            <p class="mt-2 text-sm text-slate-400">
+              当前是源码交付版，适合按源码、部署脚本和文档一起打包出售，重点保留工作区、备份恢复、批量命令、日志和诊断能力。
+            </p>
+            <div class="mt-4 grid gap-3 sm:grid-cols-2">
+              <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+                <p class="text-xs text-slate-500">版本</p>
+                <p class="mt-1 text-sm font-medium text-slate-100">{{ appVersion }}</p>
+              </div>
+              <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+                <p class="text-xs text-slate-500">版本定位</p>
+                <p class="mt-1 text-sm font-medium text-slate-100">Source Delivery Edition</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
+            <div class="flex items-center gap-2">
+              <ShieldCheck class="h-4 w-4 text-emerald-300" />
+              <h3 class="text-sm font-semibold text-slate-100">交付状态</h3>
+            </div>
+            <div class="mt-4 grid gap-3 sm:grid-cols-2">
+              <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+                <p class="text-xs text-slate-500">当前状态</p>
+                <p class="mt-1 text-sm font-medium text-slate-100">{{ productStatusStore.licenseStatusText }}</p>
+              </div>
+              <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+                <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-lg border border-slate-800 bg-slate-900/60 p-3 sm:col-span-2">
+                <p class="text-xs text-slate-500">环境指纹</p>
+                <p class="mt-1 break-all font-mono text-sm text-slate-100">{{ productStatusStore.machineFingerprint }}</p>
+              </div>
+            </div>
+            <p class="mt-3 text-xs text-slate-500">
+              当前交付模式不依赖授权码。你可以把源码、Docker 文件、部署文档和售后说明一起交付给客户，自行二开或部署。
+            </p>
+          </div>
+        </section>
+
+        <section class="space-y-4">
+          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
+            <div class="flex items-center gap-2">
+              <FileCode2 class="h-4 w-4 text-cyan-300" />
+              <h3 class="text-sm font-semibold text-slate-100">源码交付建议</h3>
+            </div>
+            <p class="mt-2 text-sm text-slate-400">
+              对外售卖源码版时，建议把仓库代码、初始化账号说明、环境变量模板、部署脚本和备份示例一起交付，减少来回答疑。
+            </p>
+            <ul class="mt-4 space-y-2 text-sm text-slate-400">
+              <li>交付仓库源码与 README/部署文档</li>
+              <li>附带默认账号、环境变量和数据目录说明</li>
+              <li>说明哪些功能可直接用，哪些是二开骨架</li>
+              <li>保留诊断信息入口，方便客户反馈问题时定位环境</li>
+            </ul>
+          </div>
+
+          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
+            <h3 class="text-sm font-semibold text-slate-100">运行摘要</h3>
+            <div class="mt-4 space-y-3">
+              <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+                <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-lg border border-slate-800 bg-slate-900/60 p-3">
+                <p class="text-xs text-slate-500">传输历史数</p>
+                <p class="mt-1 text-sm font-medium text-slate-100">{{ transfersStore.runs.length }}</p>
+              </div>
+              <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+                <p class="text-xs text-slate-500">操作日志数</p>
+                <p class="mt-1 text-sm font-medium text-slate-100">{{ activityLogStore.entries.length }}</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="rounded-xl border border-slate-800 bg-slate-950/60 p-4">
+            <h3 class="text-sm font-semibold text-slate-100">售后诊断</h3>
+            <p class="mt-2 text-sm text-slate-400">
+              客户反馈问题时，可以先复制这份诊断摘要给你，用来快速判断版本、交付模式和本地数据规模。
+            </p>
+            <button
+              type="button"
+              class="mt-4 inline-flex items-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"
+              @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 text-slate-300"><code>{{ diagnostics }}</code></pre>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>