feat(web): enrich about page project story and layout

web/src/views/AboutView.vue

@@ -1,5 +1,5 @@
 <template>
-  <PageHeader title="关于项目" description="查看 Havline 版本、源开源项目和技术信息">
+  <PageHeader title="关于项目" description="了解 Havline 的项目定位、来源、能力与开源信息">
     <template #actions>
       <n-button :loading="refreshing" @click="refreshVersion">
         <template #icon><n-icon :component="RefreshOutline" /></template>
@@ -8,71 +8,144 @@
     </template>
   </PageHeader>
 
-  <div class="stats-row">
-    <StatCard label="当前版本" :value="`v${version}`" sub="来自 /api/version" tone="brand">
-      <template #icon><n-icon :component="CloudOutline" /></template>
-    </StatCard>
-    <StatCard label="源项目" :value="GITHUB_REPO" sub="上游开源项目地址" tone="blue" value-small>
-      <template #icon><n-icon :component="LogoGithub" /></template>
-    </StatCard>
-    <StatCard label="开源协议" value="GPL-3.0" sub="GNU General Public License" tone="green">
-      <template #icon><n-icon :component="DocumentTextOutline" /></template>
-    </StatCard>
-    <StatCard label="运行状态" value="正常" sub="Havline 服务运行中" tone="teal">
-      <template #icon><n-icon :component="CheckmarkCircleOutline" /></template>
-    </StatCard>
-  </div>
-
-  <HavlineCard title="项目信息" subtitle="当前版本、项目定位和最近检查时间">
-    <div class="about-grid">
-      <div class="about-item">
-        <label>项目名称</label>
-        <strong>Havline</strong>
-      </div>
-      <div class="about-item">
-        <label>项目定位</label>
-        <span>面向 NAS 的轻量公网访问管理工具</span>
-      </div>
-      <div class="about-item">
-        <label>当前版本</label>
-        <span class="mono">v{{ version }}</span>
-      </div>
-      <div class="about-item">
-        <label>最近检查</label>
-        <span>{{ checkedAt || '刚刚' }}</span>
+  <section class="about-hero">
+    <div class="about-hero__main">
+      <img class="about-hero__logo" :src="brandLogo" alt="Havline" />
+      <div class="about-hero__copy">
+        <p class="about-kicker">ABOUT HAVLINE</p>
+        <h2>让每一台 NAS，都能安全地连接世界。</h2>
+        <p>
+          Havline 是一款面向飞牛 fnOS 等 NAS 环境的轻量公网访问管理工具。
+          它把反向代理、DDNS、HTTPS 证书、内网穿透、公网 Agent 与 Cloudflare Tunnel
+          收进一个 Web 控制台，让家庭与小型办公环境中的服务访问更简单、更可控。
+        </p>
+        <div class="about-actions">
+          <a :href="GITHUB_REPO_URL" target="_blank" rel="noopener noreferrer">
+            <n-icon :component="LogoGithub" />
+            查看源项目
+          </a>
+          <a :href="GITHUB_RELEASES_URL" target="_blank" rel="noopener noreferrer">
+            <n-icon :component="CloudDownloadOutline" />
+            Release
+          </a>
+          <a :href="GPL_URL" target="_blank" rel="noopener noreferrer">
+            <n-icon :component="DocumentTextOutline" />
+            GPL-3.0
+          </a>
+        </div>
       </div>
     </div>
 
-    <div class="about-links">
-      <a :href="GITHUB_REPO_URL" target="_blank" rel="noopener noreferrer">
-        <n-icon :component="LogoGithub" />
-        源项目：{{ GITHUB_REPO }}
-      </a>
-      <a :href="GPL_URL" target="_blank" rel="noopener noreferrer">
-        <n-icon :component="DocumentTextOutline" />
-        查看 GPL-3.0 协议
-      </a>
+    <div class="about-hero__meta">
+      <div class="about-meta-item">
+        <span>当前版本</span>
+        <strong class="mono">v{{ version }}</strong>
+      </div>
+      <div class="about-meta-item">
+        <span>源项目</span>
+        <strong>{{ GITHUB_REPO }}</strong>
+      </div>
+      <div class="about-meta-item">
+        <span>开源协议</span>
+        <strong>GPL-3.0</strong>
+      </div>
+      <div class="about-meta-item">
+        <span>最近检查</span>
+        <strong>{{ checkedAt || '刚刚' }}</strong>
+      </div>
+    </div>
+  </section>
+
+  <HavlineCard title="项目定位" subtitle="Havline 解决什么问题">
+    <div class="about-lead">
+      <p>
+        NAS 的价值不只在存储，更在于把文件、媒体、自动化工具和家庭服务安全地带到需要它们的地方。
+        Havline 不试图替代专业网关或企业级运维平台，而是把 NAS 用户最常用、最容易出错的公网访问能力
+        做成一个可理解、可维护、可回滚的 Web 控制台。
+      </p>
+    </div>
+    <div class="about-points">
+      <article class="about-point">
+        <h3>减少手工配置</h3>
+        <p>自动生成 Nginx 配置、管理证书续期，并统一处理 DDNS 与访问入口。</p>
+      </article>
+      <article class="about-point">
+        <h3>覆盖多种出口</h3>
+        <p>支持本机反向代理、FRP 内网穿透、公网 VPS Agent 和 Cloudflare Tunnel。</p>
+      </article>
+      <article class="about-point">
+        <h3>保留可控性</h3>
+        <p>所有配置、凭据和运行数据都保存在自己的数据目录中，不依赖外部托管平台。</p>
+      </article>
     </div>
   </HavlineCard>
 
-  <HavlineCard title="源项目与开源说明" subtitle="Havline 的源项目地址保持不变">
-    <div class="about-copy">
+  <HavlineCard title="来源与致谢" subtitle="站在巨人的肩膀上继续前行">
+    <div class="about-origin">
+      <blockquote>开源不是重新发明轮子，而是站在巨人的肩膀上，把一件事继续做得更好。</blockquote>
       <p>
-        Havline 的源开源项目为
-        <a :href="GITHUB_REPO_URL" target="_blank" rel="noopener noreferrer">{{ GITHUB_REPO }}</a>。
-        该地址用于查阅上游代码、提交记录和 Release 信息。
+        Havline 是基于开源项目
+        <a :href="GITHUB_REPO_URL" target="_blank" rel="noopener noreferrer">{{ GITHUB_REPO }}</a>
+        <strong>1.0.2 版本</strong>进行二次开发的项目。原始项目已经完成了反向代理、DDNS、证书、
+        内网穿透等核心能力，为 Havline 提供了坚实的工程基础。
       </p>
       <p>
-        本项目继续采用
+        我们在原项目的基础上进行了品牌重塑、界面调整、功能迭代、部署流程整理和文档重构。
+        无论项目名称如何变化，Havline 都保留对源项目和其贡献者的明确致谢，并继续遵循
         <a :href="GPL_URL" target="_blank" rel="noopener noreferrer">GPL-3.0</a>
-        开源。品牌名称调整不会改变原项目及其衍生版本的许可证义务。
+        开源协议。
       </p>
     </div>
   </HavlineCard>
 
-  <HavlineCard title="技术栈" subtitle="Havline 当前使用的主要技术组件">
-    <div class="about-stack">
-      <span v-for="item in stack" :key="item">{{ item }}</span>
+  <HavlineCard title="核心能力" subtitle="从入口到证书，从内网到公网">
+    <div class="about-features">
+      <article v-for="feature in features" :key="feature.title" class="about-feature">
+        <span class="about-feature__icon">
+          <n-icon :component="feature.icon" />
+        </span>
+        <div>
+          <h3>{{ feature.title }}</h3>
+          <p>{{ feature.description }}</p>
+        </div>
+      </article>
+    </div>
+  </HavlineCard>
+
+  <HavlineCard title="技术栈" subtitle="保持简单、透明、易部署">
+    <div class="about-tech">
+      <section v-for="group in techGroups" :key="group.title" class="about-tech__group">
+        <h3>{{ group.title }}</h3>
+        <div class="about-tags">
+          <span v-for="item in group.items" :key="item">{{ item }}</span>
+        </div>
+      </section>
+    </div>
+  </HavlineCard>
+
+  <HavlineCard title="开源与许可" subtitle="尊重版权，也尊重每一位使用者">
+    <div class="about-license">
+      <div class="about-license__item">
+        <n-icon :component="DocumentTextOutline" />
+        <div>
+          <h3>GPL-3.0</h3>
+          <p>项目继续采用 GNU General Public License v3.0 开源。</p>
+        </div>
+      </div>
+      <div class="about-license__item">
+        <n-icon :component="LogoGithub" />
+        <div>
+          <h3>源项目保留</h3>
+          <p>源项目地址固定为 {{ GITHUB_REPO }}，用于追溯上游来源和许可证义务。</p>
+        </div>
+      </div>
+      <div class="about-license__item">
+        <n-icon :component="ShieldCheckmarkOutline" />
+        <div>
+          <h3>无担保声明</h3>
+          <p>软件按“原样”提供，请在部署前做好备份、权限和网络访问控制。</p>
+        </div>
+      </div>
     </div>
   </HavlineCard>
 </template>
@@ -81,17 +154,27 @@
 import { onMounted, ref } from 'vue'
 import { NButton, NIcon, useMessage } from 'naive-ui'
 import {
-  CheckmarkCircleOutline,
+  CloudDownloadOutline,
   CloudOutline,
   DocumentTextOutline,
+  GitNetworkOutline,
+  GridOutline,
+  HardwareChipOutline,
+  LockClosedOutline,
   LogoGithub,
   RefreshOutline,
+  ShieldCheckmarkOutline,
+  SwapHorizontalOutline,
 } from '@vicons/ionicons5'
 import { api } from '../api/client'
+import brandLogo from '../assets/brand/havline-logo.svg'
 import HavlineCard from '../components/HavlineCard.vue'
 import PageHeader from '../components/PageHeader.vue'
-import StatCard from '../components/StatCard.vue'
-import { GITHUB_REPO, GITHUB_REPO_URL } from '../constants/app'
+import {
+  GITHUB_RELEASES_URL,
+  GITHUB_REPO,
+  GITHUB_REPO_URL,
+} from '../constants/app'
 import { formatDate } from '../utils/format'
 
 const GPL_URL = 'https://www.gnu.org/licenses/gpl-3.0.html'
@@ -99,17 +182,63 @@ const message = useMessage()
 const version = ref(__APP_VERSION__)
 const checkedAt = ref('')
 const refreshing = ref(false)
-const stack = [
-  'Go 1.23',
-  'Vue 3',
-  'TypeScript',
-  'Vite',
-  'Naive UI',
-  'ECharts',
-  'SQLite',
-  'Nginx',
-  'FRP',
-  'Cloudflare Tunnel',
+
+const features = [
+  {
+    title: '反向代理',
+    description: '通过 Web 界面管理 Nginx 域名与端口规则，自动生成配置并热重载。',
+    icon: SwapHorizontalOutline,
+  },
+  {
+    title: 'DDNS',
+    description: '对接 Cloudflare、DNSPod、阿里云、腾讯云和火山引擎，自动同步公网 IP。',
+    icon: CloudOutline,
+  },
+  {
+    title: 'HTTPS 证书',
+    description: '使用 ACME DNS-01 自动申请与续期证书，支持通配符和手动导入。',
+    icon: LockClosedOutline,
+  },
+  {
+    title: '内网穿透',
+    description: '内置 FRP 多服务端管理，在没有公网 IP 时把服务安全暴露到 VPS。',
+    icon: GitNetworkOutline,
+  },
+  {
+    title: '公网 Agent',
+    description: '通过 SSH 安装和维护 VPS 上的 havline-agent，远程编排 frps 与 Nginx。',
+    icon: HardwareChipOutline,
+  },
+  {
+    title: 'Cloudflare Tunnel',
+    description: '管理 cloudflared 隧道、路由与 DNS，适合不愿意开放公网端口的场景。',
+    icon: CloudOutline,
+  },
+  {
+    title: '日志与监控',
+    description: '查看系统、访问和错误日志，观察流量趋势、服务状态与运行健康度。',
+    icon: GridOutline,
+  },
+  {
+    title: '安全与备份',
+    description: '提供访问控制、凭据加密、配置备份和恢复，降低误操作与数据丢失风险。',
+    icon: ShieldCheckmarkOutline,
+  },
+]
+
+const techGroups = [
+  {
+    title: '后端',
+    items: ['Go 1.23', 'SQLite', 'Nginx', 'FRP', 'ACME / lego'],
+  },
+  {
+    title: '前端',
+    items: ['Vue 3', 'TypeScript', 'Vite', 'Naive UI', 'ECharts'],
+  },
+  {
+    title: '部署',
+    items: ['Docker', 'Docker Compose', 'Linux systemd', 'amd64 / arm64'],
+  },
 ]
 
 async function refreshVersion() {
@@ -131,45 +260,72 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.about-grid {
+.about-hero {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--havline-space-4);
-}
-
-.about-item {
-  min-width: 0;
-  padding: var(--havline-space-4);
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: var(--havline-space-6);
+  align-items: center;
+  margin-bottom: var(--havline-space-5);
+  padding: var(--havline-space-6);
   border: 1px solid var(--havline-border);
-  border-radius: var(--havline-radius-sm);
-  background: var(--havline-bg);
+  border-radius: var(--havline-radius);
+  background:
+    linear-gradient(135deg, var(--havline-brand-soft), transparent 58%),
+    var(--havline-surface);
 }
 
-.about-item label {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--havline-text-muted);
-  font-size: 12px;
+.about-hero__main {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--havline-space-5);
+  min-width: 0;
 }
 
-.about-item strong,
-.about-item span {
+.about-hero__logo {
+  width: 76px;
+  height: 76px;
+  flex: 0 0 auto;
+}
+
+.about-hero__copy {
+  min-width: 0;
+}
+
+.about-kicker {
+  margin: 0 0 8px;
+  color: var(--havline-brand-text);
+  font-family: var(--havline-mono);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+}
+
+.about-hero h2 {
+  margin: 0 0 12px;
   color: var(--havline-text);
+  font-size: clamp(24px, 3vw, 34px);
+  line-height: 1.22;
 }
 
-.about-links,
-.about-stack {
+.about-hero__copy > p:not(.about-kicker) {
+  max-width: 720px;
+  margin: 0;
+  color: var(--havline-text-secondary);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.about-actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--havline-space-3);
-  margin-top: var(--havline-space-4);
+  margin-top: var(--havline-space-5);
 }
 
-.about-links a {
+.about-actions a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 10px;
+  padding: 8px 12px;
   color: var(--havline-brand-text);
   border: 1px solid var(--havline-border);
   border-radius: var(--havline-radius-sm);
@@ -177,27 +333,244 @@ onMounted(() => {
   text-decoration: none;
 }
 
-.about-copy {
+.about-hero__meta {
   display: grid;
-  gap: var(--havline-space-3);
-  color: var(--havline-text-secondary);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border: 1px solid var(--havline-border);
+  border-radius: var(--havline-radius-sm);
+  background: color-mix(in srgb, var(--havline-surface) 92%, transparent);
+  overflow: hidden;
 }
 
-.about-copy p {
+.about-meta-item {
+  min-width: 0;
+  padding: 16px;
+  border-right: 1px solid var(--havline-border);
+  border-bottom: 1px solid var(--havline-border);
+}
+
+.about-meta-item:nth-child(2n) {
+  border-right: 0;
+}
+
+.about-meta-item:nth-last-child(-n + 2) {
+  border-bottom: 0;
+}
+
+.about-meta-item span,
+.about-meta-item strong {
+  display: block;
+}
+
+.about-meta-item span {
+  margin-bottom: 6px;
+  color: var(--havline-text-muted);
+  font-size: 12px;
+}
+
+.about-meta-item strong {
+  overflow: hidden;
+  color: var(--havline-text);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.about-lead {
+  max-width: 860px;
+  color: var(--havline-text-secondary);
+  font-size: 14px;
+  line-height: 1.9;
+}
+
+.about-lead p {
   margin: 0;
 }
 
-.about-copy a {
+.about-points {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--havline-space-4);
+  margin-top: var(--havline-space-5);
+}
+
+.about-point {
+  padding-left: var(--havline-space-4);
+  border-left: 2px solid var(--havline-brand);
+}
+
+.about-point h3,
+.about-feature h3,
+.about-tech__group h3,
+.about-license__item h3 {
+  margin: 0 0 6px;
+  color: var(--havline-text);
+  font-size: 15px;
+}
+
+.about-point p,
+.about-feature p,
+.about-license__item p {
+  margin: 0;
+  color: var(--havline-text-secondary);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.about-origin {
+  display: grid;
+  gap: var(--havline-space-4);
+  color: var(--havline-text-secondary);
+  font-size: 14px;
+  line-height: 1.85;
+}
+
+.about-origin blockquote {
+  margin: 0;
+  padding: var(--havline-space-4) var(--havline-space-5);
+  color: var(--havline-brand-text);
+  border-left: 3px solid var(--havline-brand);
+  background: var(--havline-brand-soft);
+  border-radius: 0 var(--havline-radius-sm) var(--havline-radius-sm) 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.about-origin p {
+  margin: 0;
+}
+
+.about-origin a {
   color: var(--havline-brand-text);
   text-decoration: none;
 }
 
-.about-stack span {
-  padding: 6px 10px;
+.about-features {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--havline-space-4);
+}
+
+.about-feature {
+  display: grid;
+  grid-template-columns: 38px minmax(0, 1fr);
+  gap: var(--havline-space-3);
+  min-width: 0;
+  padding: var(--havline-space-4);
+  border: 1px solid var(--havline-border);
+  border-radius: var(--havline-radius-sm);
+  background: var(--havline-bg);
+}
+
+.about-feature__icon {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  color: var(--havline-brand-text);
+  border-radius: 10px;
+  background: var(--havline-brand-soft);
+  font-size: 19px;
+}
+
+.about-tech {
+  display: grid;
+  gap: var(--havline-space-5);
+}
+
+.about-tech__group {
+  display: grid;
+  grid-template-columns: 100px minmax(0, 1fr);
+  gap: var(--havline-space-4);
+  align-items: start;
+}
+
+.about-tech__group h3 {
+  margin: 0;
+  padding-top: 5px;
+}
+
+.about-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.about-tags span {
+  padding: 5px 10px;
   color: var(--havline-text-secondary);
   border: 1px solid var(--havline-border);
   border-radius: 999px;
   background: var(--havline-bg);
   font-size: 12px;
 }
+
+.about-license {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--havline-space-4);
+}
+
+.about-license__item {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  gap: var(--havline-space-3);
+  min-width: 0;
+}
+
+.about-license__item > .n-icon {
+  margin-top: 2px;
+  color: var(--havline-brand-text);
+  font-size: 19px;
+}
+
+@media (max-width: 1100px) {
+  .about-hero,
+  .about-features {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .about-hero__main {
+    grid-column: 1 / -1;
+  }
+
+  .about-hero__meta {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 760px) {
+  .about-hero {
+    grid-template-columns: 1fr;
+    padding: var(--havline-space-5);
+  }
+
+  .about-hero__main {
+    display: grid;
+  }
+
+  .about-hero__logo {
+    width: 64px;
+    height: 64px;
+  }
+
+  .about-points,
+  .about-features,
+  .about-license {
+    grid-template-columns: 1fr;
+  }
+
+  .about-tech__group {
+    grid-template-columns: 1fr;
+    gap: var(--havline-space-2);
+  }
+
+  .about-meta-item {
+    border-right: 0;
+  }
+
+  .about-meta-item:nth-child(odd) {
+    border-right: 1px solid var(--havline-border);
+  }
+}
 </style>