mirror of
https://github.com/fawney19/Aether.git
synced 2026-10-12 04:09:48 +08:00
refactor(guide): 重构指南页面为 Markdown 内容驱动架构
- 将各指南页面的内联硬编码内容抽取为独立 Markdown 文件 - 新增 MarkdownViewer 组件统一渲染 Markdown 内容 - 新增 ArchitectureDiagram 组件和架构演示组件 - 新增模块指南页面 (ModulesGuide) - GuideLayout 支持子导航、页面过渡动画和图片 Lightbox - guide-config 重构为支持 subItems 的导航结构 - 添加指南相关截图资源
This commit is contained in:
fawney19
@@ -0,0 +1,151 @@
|
||||
<script setup lang="ts">
|
||||
import { Blocks } from 'lucide-vue-next'
|
||||
import { panelClasses } from './guide-config'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-12 pb-12">
|
||||
<!-- Hero 区域 -->
|
||||
<div class="space-y-4">
|
||||
<div class="inline-flex items-center gap-1.5 rounded-full bg-[#cc785c]/10 dark:bg-[#cc785c]/20 border border-[#cc785c]/20 dark:border-[#cc785c]/40 px-3 py-1 text-xs font-medium text-[#cc785c] dark:text-[#d4a27f]">
|
||||
<Blocks class="h-3 w-3" />
|
||||
系统扩展
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-[#262624] dark:text-[#f1ead8]">
|
||||
模块管理
|
||||
</h1>
|
||||
<p class="text-base text-[#666663] dark:text-[#a3a094] max-w-2xl">
|
||||
Aether 提供高可插入的模块化管理机制，帮助连接外部服务和授权系统。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
|
||||
<!-- 1. 访问令牌 -->
|
||||
<section
|
||||
id="management-tokens"
|
||||
:class="[panelClasses.card]"
|
||||
class="p-6 scroll-mt-24 lg:scroll-mt-20 flex flex-col"
|
||||
>
|
||||
<div class="w-12 h-12 rounded-xl bg-purple-500/10 text-purple-600 dark:text-purple-400 flex items-center justify-center mb-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-key-round"
|
||||
><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /><circle
|
||||
cx="16.5"
|
||||
cy="7.5"
|
||||
r=".5"
|
||||
fill="currentColor"
|
||||
/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[#262624] dark:text-[#f1ead8] mb-2 m-0 mt-0 pt-0 border-0">
|
||||
1. 访问令牌
|
||||
</h3>
|
||||
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
|
||||
允许通过 Management Token 授权使用全部或部分后端敏感接口（如自动化运维脚本接入）。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 2. 邮件配置 -->
|
||||
<section
|
||||
id="email-config"
|
||||
:class="[panelClasses.card]"
|
||||
class="p-6 scroll-mt-24 lg:scroll-mt-20 flex flex-col"
|
||||
>
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-500/10 text-blue-600 dark:text-blue-400 flex items-center justify-center mb-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-mail"
|
||||
><rect
|
||||
width="20"
|
||||
height="16"
|
||||
x="2"
|
||||
y="4"
|
||||
rx="2"
|
||||
/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[#262624] dark:text-[#f1ead8] mb-2 m-0 mt-0 pt-0 border-0">
|
||||
2. 邮件配置
|
||||
</h3>
|
||||
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
|
||||
用于注册验证及账户通知服务。管理员可以自定义 SMTP 服务器并高度定制系统发送的各种 HTML 邮件模板。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 3. OAuth 登录 -->
|
||||
<section
|
||||
id="oauth-login"
|
||||
:class="[panelClasses.card]"
|
||||
class="p-6 scroll-mt-24 lg:scroll-mt-20 flex flex-col"
|
||||
>
|
||||
<div class="w-12 h-12 rounded-xl bg-orange-500/10 text-orange-600 dark:text-orange-400 flex items-center justify-center mb-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-user-check"
|
||||
><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle
|
||||
cx="9"
|
||||
cy="7"
|
||||
r="4"
|
||||
/><polyline points="16 11 18 13 22 9" /></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[#262624] dark:text-[#f1ead8] mb-2 m-0 mt-0 pt-0 border-0">
|
||||
3. OAuth 登录
|
||||
</h3>
|
||||
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
|
||||
支持包括 Linux Do OAuth 等多种第三方授权验证登录，方便统一认证渠道并提升用户体验。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 4. LDAP 认证 -->
|
||||
<section
|
||||
id="ldap-auth"
|
||||
:class="[panelClasses.card]"
|
||||
class="p-6 scroll-mt-24 lg:scroll-mt-20 flex flex-col"
|
||||
>
|
||||
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center mb-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-building-2"
|
||||
><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" /><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" /><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" /><path d="M10 6h4" /><path d="M10 10h4" /><path d="M10 14h4" /><path d="M10 18h4" /></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[#262624] dark:text-[#f1ead8] mb-2 m-0 mt-0 pt-0 border-0">
|
||||
4. LDAP 认证
|
||||
</h3>
|
||||
<p class="text-sm text-[#666663] dark:text-[#a3a094] leading-relaxed">
|
||||
为企业管理构建。直接对接企业现有的 LDAP 或 Active Directory 目录以映射内网员工账户和组织架构。
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user