chore: 初始化文档站仓库
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
lang: 'zh-CN',
|
||||
title: '收支管理系统',
|
||||
description: '个人收支管理系统使用与开发文档',
|
||||
head: [['link', { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }]],
|
||||
lastUpdated: true,
|
||||
cleanUrls: true,
|
||||
ignoreDeadLinks: true,
|
||||
// 维护类文档不参与站点构建
|
||||
srcExclude: ['AGENTS.md'],
|
||||
// 文档站默认端口从 5173 调整为 5175，把 5173 让给 finance-app 前端
|
||||
vite: {
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5175,
|
||||
},
|
||||
},
|
||||
themeConfig: {
|
||||
logo: '/logo.svg',
|
||||
nav: [
|
||||
{ text: '使用文档', link: '/guide/introduction', activeMatch: '/guide/' },
|
||||
{ text: '开发文档', link: '/dev/architecture', activeMatch: '/dev/' },
|
||||
],
|
||||
sidebar: {
|
||||
'/guide/': [
|
||||
{
|
||||
text: '开始使用',
|
||||
items: [
|
||||
{ text: '项目简介', link: '/guide/introduction' },
|
||||
{ text: '快速开始', link: '/guide/getting-started' },
|
||||
{ text: '统计面板', link: '/guide/dashboard' },
|
||||
{ text: '页面总览', link: '/guide/pages' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '记账与整理',
|
||||
items: [
|
||||
{ text: '收支记录', link: '/guide/transactions' },
|
||||
{ text: '分类与标签', link: '/guide/categories-tags' },
|
||||
{ text: '规则管理', link: '/guide/rules' },
|
||||
{ text: '邮箱账单', link: '/guide/email-bills' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '智能与自动化',
|
||||
items: [
|
||||
{ text: 'AI 能力', link: '/guide/ai' },
|
||||
{ text: '定时提醒与通知', link: '/guide/notifications' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '系统',
|
||||
items: [
|
||||
{ text: '系统设置', link: '/guide/settings' },
|
||||
{ text: '系统日志', link: '/guide/logs' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '账单获取',
|
||||
items: [
|
||||
{ text: '账单类型总览', link: '/guide/bills/overview' },
|
||||
{ text: '支付宝账单', link: '/guide/bills/alipay' },
|
||||
{ text: '微信支付账单', link: '/guide/bills/wechat' },
|
||||
{ text: '美团账单', link: '/guide/bills/meituan' },
|
||||
{ text: '淘宝账单', link: '/guide/bills/taobao' },
|
||||
{ text: '京东账单', link: '/guide/bills/jd' },
|
||||
{ text: '招商银行账单', link: '/guide/bills/cmb' },
|
||||
{ text: '交通银行账单', link: '/guide/bills/bocom' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
items: [{ text: '常见问题', link: '/guide/faq' }],
|
||||
},
|
||||
],
|
||||
'/dev/': [
|
||||
{
|
||||
text: '开发文档',
|
||||
items: [
|
||||
{ text: '总览', link: '/dev/' },
|
||||
{ text: '整体架构', link: '/dev/architecture' },
|
||||
{ text: '数据模型', link: '/dev/data-model' },
|
||||
{ text: '账单解析', link: '/dev/bill-parsing' },
|
||||
{ text: '规则引擎', link: '/dev/rule-engine' },
|
||||
{ text: 'AI 集成', link: '/dev/ai' },
|
||||
{ text: '定时通知', link: '/dev/notifications' },
|
||||
{ text: '动态数据源', link: '/dev/database' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '工程与规范',
|
||||
items: [
|
||||
{ text: '项目结构', link: '/dev/project-structure' },
|
||||
{ text: '构建与部署', link: '/dev/build-deploy' },
|
||||
{ text: '开发环境与规范', link: '/dev/development' },
|
||||
{ text: '账单字段说明', link: '/dev/bill-fields' },
|
||||
{ text: 'API 文档', link: '/dev/api' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
socialLinks: [],
|
||||
footer: {
|
||||
message: '基于 Spring Boot 3 + Vue 3 的个人收支管理系统',
|
||||
},
|
||||
docFooter: {
|
||||
prev: '上一页',
|
||||
next: '下一页',
|
||||
},
|
||||
outline: {
|
||||
label: '本页目录',
|
||||
level: [2, 3],
|
||||
},
|
||||
search: {
|
||||
provider: 'local',
|
||||
options: {
|
||||
translations: {
|
||||
button: {
|
||||
buttonText: '搜索文档',
|
||||
buttonAriaLabel: '搜索文档',
|
||||
},
|
||||
modal: {
|
||||
noResultsText: '无法找到相关结果',
|
||||
resetButtonTitle: '清除查询条件',
|
||||
footer: {
|
||||
selectText: '选择',
|
||||
navigateText: '切换',
|
||||
closeText: '关闭',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,47 @@
|
||||
/* 文档图片点击全屏查看 */
|
||||
|
||||
/* 正文图片：加边框、圆角与阴影，避免白色截图与正文融在一起 */
|
||||
.vp-doc img {
|
||||
display: block;
|
||||
margin: 16px auto;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 可点击的正文图片：鼠标样式与轻微过渡 */
|
||||
.vp-doc img.doc-zoomable {
|
||||
cursor: zoom-in;
|
||||
transition: opacity 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.vp-doc img.doc-zoomable:hover {
|
||||
opacity: 0.94;
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
/* 全屏查看遮罩：默认隐藏，激活时铺满视口 */
|
||||
.doc-image-viewer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000000;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.doc-image-viewer.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* 图片按比例铺满屏幕（contain，保持完整不裁剪） */
|
||||
.doc-image-viewer img {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: contain;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
// 自定义主题：为文档图片启用「点击全屏查看」
|
||||
//
|
||||
// 点击正文（.vp-doc）内的图片后，在全屏遮罩中铺满展示原图；
|
||||
// 再次点击或按 Esc 关闭。路由切换时重新绑定，避免遗漏动态渲染的图片。
|
||||
import { onMounted, watch, nextTick } from 'vue'
|
||||
import { useRoute } from 'vitepress'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import './custom.css'
|
||||
|
||||
// 全屏查看器遮罩元素（全站复用一个）
|
||||
let viewer: HTMLDivElement | null = null
|
||||
|
||||
/** 关闭全屏查看器 */
|
||||
function closeViewer() {
|
||||
viewer?.classList.remove('active')
|
||||
}
|
||||
|
||||
/** 打开全屏查看器并展示指定图片
|
||||
|
||||
* :param src: 图片地址
|
||||
* :param alt: 图片替代文本
|
||||
*/
|
||||
function openViewer(src: string, alt: string) {
|
||||
if (!viewer) return
|
||||
const img = viewer.querySelector('img')
|
||||
if (!img) return
|
||||
img.src = src
|
||||
img.alt = alt
|
||||
viewer.classList.add('active')
|
||||
}
|
||||
|
||||
/** 创建全屏查看器并注册关闭事件 */
|
||||
function ensureViewer() {
|
||||
if (viewer) return
|
||||
viewer = document.createElement('div')
|
||||
viewer.className = 'doc-image-viewer'
|
||||
viewer.innerHTML = '<img alt="" />'
|
||||
// 点击遮罩或图片本身关闭
|
||||
viewer.addEventListener('click', closeViewer)
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') closeViewer()
|
||||
})
|
||||
document.body.appendChild(viewer)
|
||||
}
|
||||
|
||||
/** 为正文图片绑定点击全屏事件（幂等） */
|
||||
function bindImages() {
|
||||
const images = document.querySelectorAll<HTMLImageElement>('.vp-doc img')
|
||||
images.forEach((img) => {
|
||||
if (img.dataset.zoomBound === '1') return
|
||||
img.dataset.zoomBound = '1'
|
||||
img.classList.add('doc-zoomable')
|
||||
img.addEventListener('click', () => {
|
||||
openViewer(img.currentSrc || img.src, img.alt)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(() => {
|
||||
ensureViewer()
|
||||
bindImages()
|
||||
})
|
||||
|
||||
// 路由切换后重新绑定（文章内容异步渲染）
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
closeViewer()
|
||||
nextTick(() => bindImages())
|
||||
},
|
||||
)
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user