SpringBoot+Vue+SpringCloud微服务实战:社区帮扶平台从单体重构到分布式
前阵子帮老家社区做了一个邻里互帮互助的小平台一开始就打算用单体应用糊弄过去结果需求一多彻底压不住——又要搞门户展示、又要做帮扶工单流转、还要上可视化大屏给街道看数据再加上志愿者积分、公告通知、用户认证这些模块所有功能全塞在一个进程里改一处就崩一片。折腾到第三周我果断推倒重来换成了SpringBoot Vue SpringCloud微服务分布式的架构。这篇就把整个项目从拆解、选型、落地到踩坑的过程完整写一遍给正在做同类社区平台或者想快速上手微服务项目的朋友做个参考。这个项目本身不是什么高并发大流量的互联网应用但胜在业务模型杂、服务边界多、协作角色多非常适合用微服务做垂直拆分。它面向的核心人群是社区居民、物业/网格员、社区管理员核心价值其实就一句话让有需求的邻居能找到愿意搭把手的人同时让社区的管理者看得见、管得住这些互帮互助的数据。1. 项目拆解社区门户 帮扶平台到底要做什么1.1 需求到底长什么样很多人一看到“社区门户网站”就以为是个新闻展示站实际上真正难的不是门户而是“帮扶邻里”这个业务闭环。我接手时拿到的原始需求很模糊就几个关键词社区门户、邻里帮扶、可视化、分布式。不把它们拆透后面技术方案全白搭。我花了一个礼拜做业务梳理最后把平台拆成四大块门户展示端社区公告、活动招募、服务项目介绍、帮扶案例展示这部分是“门户”解决的是信息触达问题面向的是所有居民数据读多写少。帮扶业务端居民发布需求、志愿者接单、服务过程记录、完成评价、积分累计这部分是“平台”解决的是匹配和履约问题面向的是有实际需求的用户。管理后台端成员审核、品类管理、工单调度、敏感信息处理、数据统计这部分是“管控”解决的是合规和治理问题面向的是社区管理员与网格员。可视化指挥端帮扶热度、区域分布、服务时长、满意度趋势、志愿者排行等大屏展示这部分是“决策”解决的是数据感知问题面向的是街道/社区管理者。1.2 为什么必须用微服务拆分这里我得说实话不是所有项目都该上微服务。一个纯门户展示站单体绰绰有余但社区帮扶平台有个麻烦——它不是一个业务而是多个业务按同一套用户体系叠在一起。门户的公告接口、帮扶的工单接口、管理端的事务接口并发特征完全不同公告可能是瞬时流量工单是高写入低读取管理端是低频高权限。把它们拆开才能独立扩展、独立发版、独立做权限控制。技术选型时也对比过Dubbo但最终选了SpringCloud全家桶理由很实在SpringBoot的项目基础可以直接平滑接入学习和排查成本低周边组件像Gateway、Nacos、Sentinel都有成熟的坑位文档。而且这个项目最终要交给社区的信息化团队维护技术栈越主流后续找人接手越容易。用微服务最重要的一个设计原则就是先有清晰的业务边界再去拆代码。我在设计时按“领域”切分服务而不是按“页面”切分服务最终定下来六个服务名职责边界关键依赖gateway-server统一入口、路由转发、鉴权、限流Nacos、Redisauth-server登录认证、Token签发、权限元数据Nacos、MySQL、Redisportal-server公告、活动、资讯、案例展示Nacos、MySQL、Redishelp-server帮扶需求、工单流转、评价积分Nacos、MySQL、Redis、MQadmin-server成员审核、品类管理、数据统计Nacos、MySQLmonitor-server可视化大屏聚合数据、WebSocket推送Nacos、MySQL、Redis、MQ2. 技术选型这套微服务班子是怎么定下来的2.1 注册中心和配置中心选Nacos注册中心和配置中心我选的是Nacos而不是Eureka或Consul。Eureka已经进入维护状态社区活跃度低而且没有配置中心能力还得另外搭Spring Cloud Config。Nacos一个组件解决了注册、发现、配置管理三个问题配置还支持动态刷新改完配置不用重启服务对社区这种自运维团队太友好了。实际操作中需要重点区分两个服务边界Nacos的注册服务由每个微服务的bootstrap.yml控制配置拉取则依赖dataId和group的匹配规则。我在配置管理里把MySQL、Redis、MQ这类基础连接信息放到共享配置项中服务特有的配置单独维护。这样推送配置时影响面可控不会出现改一个配置所有服务同时刷新的惊吓场面。关键配置示例所有服务统一放在bootstrap.yml里spring: application: name: help-server cloud: nacos: server-addr: 192.168.1.100:8848 discovery: group: COMMUNITY_GROUP namespace: community-prod config: group: COMMUNITY_GROUP namespace: community-prod file-extension: yaml shared-configs: ->spring: cloud: gateway: routes: - id: help-server uri: lb://help-server predicates: - Path/api/help/** filters: - StripPrefix1 - name: RequestRateLimiter args: redis-rate-limiter.replenishRate: 10 redis-rate-limiter.burstCapacity: 20令牌桶限流参数这里要解释一下replenishRate是每秒往桶里放的令牌数burstCapacity是桶的容量。我按照一个帮扶工单服务每秒最多处理10个请求来配突发流量允许20个积压超过直接返回429。这个参数不能拍脑袋设要根据下游服务的实际吞吐能力来定宁可小一点也别让下游被打爆。2.3 前端选型Vue3 Vite Element Plus ECharts前端技术栈我用了Vue3 Vite Element Plus ECharts。这里需要做个新手提示Vue2和Vue3虽然在基础语法上差别不算大但在工程化链路、响应式原理、生态库选择上完全是两套玩法。如果是新项目直接上Vue3别再用Vue2了组合式API配合script setup写起来效率高得多。Vite相比Webpack最大的优势是冷启动速度微服务项目一旦服务多了前端联调时经常要同时开七八个后端服务如果前端构建再慢开发体验会很煎熬。Vite基于原生ESModule毫秒级热更新对大仓库的包容度比Webpack好一个量级。可视化部分我用了ECharts做大屏数据展示。这里有个实战心得ECharts的图表本身不难难的是大屏的自适应和动效节奏。我在monitor-server里预留了WebSocket接口让后端在帮扶工单状态变更时主动推送数据到前端ECharts实例监听数据后做增量更新这样大屏上的数据变化是有“呼吸感”的而不是定时器轮询那种机械刷新。2.4 数据结构与文件存储的取舍文件存储一开始纠结过MinIO和FastDFS最后选了MinIO。社区平台用得最多的文件就是居民随手拍的需求照片、服务完成后的凭证图、公告附件块大小普遍不超过5MB。MinIO部署轻量支持S3协议跟SpringBoot集成的成本极低还自带一个简易控制台方便管理。FastDFS虽然生态老牌但部署复杂度高、文档对新手很不友好一个tracker加一个storage的架构光是解释就得花半天不适合这种中小型自运维团队。对象存储的关键配置minio: endpoint: http://192.168.1.101:9000 access-key: community-admin secret-key: community-pass bucket: help-photo: help-photo portal-file: portal-file3. 核心功能实操帮扶工单、分布式事务和可视化大屏3.1 帮扶工单如何设计状态机帮扶工单是整个平台的心脏设计得是否合理直接决定后面所有流程的顺畅程度。我画状态机花了整整一天反复推演各种边界情况最终状态枚举如下PENDING(待接单) - ACCEPTED(已接单) - IN_PROGRESS(服务中) - COMPLETED(已完成) - RATED(已评价) PENDING - CANCELLED(已取消) ACCEPTED - CANCELLED(已取消)每一项状态流转都对应一个明确的用户动作和权限校验。举例来说需求方取消工单只允许在已接单之前执行这是为了避免志愿者已经响应后需求方随意取消造成体验伤害服务中状态不允许任意一方单方面终止必须走管理员介入这是为了在产生纠纷时有第三方仲裁依据。状态机在代码中我用了一个StateMachine接口来管理配合Vue前端的状态按钮动态渲染。这样前端不需要硬编码状态流转逻辑后端返回当前状态前端根据状态控制按钮的显示和禁用逻辑边界清晰也避免了前后端各写一套规则导致状态不同步。3.2 跨服务调用的分布式事务处理拆了微服务后最棘手的就是跨服务的数据一致性问题。比如用户完成一次帮扶涉及help-server工单状态更新、auth-server用户积分累加、monitor-server统计数据变更。如果不用分布式事务任何一步失败都会造成数据不一致。我当时在Seata和本地消息表之间反复权衡最终选了本地消息表MQ的方案。原因是这个场景对一致性要求不是强实时而是最终一致而且现有基础设施本来就有RocketMQSharding也不复杂。Seata的AT模式虽然方便但会给业务库增加undo_log表对底层数据库的资源锁有额外消耗社区项目没有专业的DBA团队盯着不如消息表直观可控。核心流程如下help-server更新工单状态为已完成同时写入一条本地消息表记录状态为待发送。启动一个定时任务扫描消息表中待发送且发送次数小于5条的记录。将消息发出到RocketMQ的help-complete-topic。auth-server消费消息更新用户积分monitor-server消费消息刷新大屏聚合数据。消费成功后消息表标记为已发送发送多次失败则转入人工告警队列。这套方案实现成本低问题定位直观消息表本身就是一个天然的审计日志。社区平台日均工单量在几百到几千的区间消息表的数据量完全可以接受。我不建议这种规模的项目一上来就上Seata很多时候选型不是选最牛的而是选最适合团队维护的。3.3 Send和Receive解耦的可靠通知机制在帮务工单流转中用户最关注的就是“我的需求是否有人响应”。这里我用WebSocket做用户端实时通知同时配合站内信做兜底。WebSocket推送用轻量级topic每个用户连接上来后订阅/user/{userId}/notification工单状态变了就走MQ通知到gateway层的推送服务再由推送服务发送给对应WebSocket会话。为什么中间要隔一层MQ而不是直接服务间调用因为通知是异步场景调用方不需要等结果直接HTTP调用会拖慢主流程而且一旦推送服务挂了工单服务也会跟着失败。MQ天然削峰填谷还能保障消息不丢属于微服务里“该花钱的地方不要省”。3.4 可视化大屏的数据聚合链路和前端渲染可视化大屏的数据不完全来自实时计算我做的是“实时离线”混合架构实时指标今日帮扶数、当前进行中工单、在线志愿者数消费MQ消息实时更新Redis计数器前端通过WebSocket接收增量推送。趋势指标近七天帮扶趋势、服务时长分布由monitor-server的定时任务每10分钟从MySQL聚合一次落缓存供前端拉取。大屏前端用ECharts的graphic组件做地图热力效果展示不同楼栋、网格区域的帮扶热度。这里有个经验大屏的接口要做成“一次性拉全量增量更新”的混合模式首屏先全量加载历史数据让图表快速成型后续靠增量消息更新避免定时器拉取导致的闪烁和重复渲染。ECharts实例的setOption方法可以传入notMerge: true来强制重绘但一般不建议这么做增量更新用merge模式更平滑。4. 从开发到上线这些坑我先替你踩了一遍4.1 网关跨域和Token透传问题前后端分离项目最容易踩的坑就是跨域。我在网关层配置了CORS全局跨域但一开始因为过滤器顺序问题预检请求OPTIONS直接在没有鉴权的情况下就被拦截了前端报各种跨域错误。解决方法是统一在CORS配置中将OPTIONS请求直接放行并且把跨域配置放进全局过滤器的最前端确保在鉴权逻辑执行前预检请求就已经返回。另外一个坑是token透传前端登录后在请求头带Authorization但Gateway转发到下游服务时默认不会带上自定义头需要显式在过滤器里把请求头写进去。我封装了一个全局filter从原始请求里取出token并放到转发的请求头里下游服务只需要解析请求头中的用户信息即可。4.2 分布式环境下的全链路日志与慢接口排查微服务下排查问题比单体难一个级别。一个用户请求从Gateway进入可能跨三个服务日志散落在不同机器上没有全链路追踪就基本等于盲人摸象。我用MDC机制为每个请求生成一个traceId在网关入口生成并注入请求头然后在各服务的日志配置里打印traceId字段。这样即使日志分散也能通过traceId把同一次请求的日志串起来。排查慢接口时网关注入X-Request-Start时间戳下游服务在响应头里写各阶段耗时前端控制台Network面板能直接看到总耗时。再不行就接Arthas在线诊断定位到具体方法级别的耗时。这个项目上线后有一个工单列表接口在高峰期偶发超时用traceId串联日志后发现耗时卡在了help-server对auth-server的用户信息批量查询上后来改成缓存批量查询并加了一层本地缓存问题直接解决。4.3 大屏WebSocket连接数和断线重连问题可视化大屏挂在街道的大电视上一开就是一天WebSocket连接如果断了不会自动重连大屏就成了一块死屏。前端必须做心跳检测和断线重连每30秒发送一次ping超过三次没收到pong就主动断开重连。后端也需要处理连接被异常断开后的资源清理否则服务端残留大量半打开连接内存会被慢慢耗光。另一个细节是浏览器对WebSocket连接数有上限如果开发时同时打开多个调试页面后端会收到多个重复连接需要按用户维度做连接管理新连接建立后踢掉旧连接。4.4 常见问题速查表问题现象定位思路解决方案页面能打开但接口全部401Gateway鉴权过滤器未放行预检请求在CORS配置中放行OPTIONS请求下游服务拿不到用户信息Token未透传到下游服务在Gateway全局过滤器中将Token注入转发头帮扶工单状态和用户积分不一致某个本地消息发送失败检查消息表重试机制设置告警阈值大屏数据长时间不更新WebSocket连接断开未重连前端增加心跳检测与自动重连接口偶发超时跨服务调用链路慢用traceId串联日志定位具体服务耗时文件上传失败MinIO桶策略或凭证错误检查MinIO控制台确认AccessKey和桶权限Nacos配置改了不生效服务未引入配置刷新依赖确认配置中心refresh开关和bootstrap.yml配置4.5 部署时的内存与JVM调优微服务拆分后最直接的代价就是部署单元多了内存翻倍涨。我之前按每服务默认512M去部署结果一台4G内存的云服务器起了6个服务直接OOM。后来统一调整JVM参数把堆内存压到384M并禁止了默认的元空间无上限增长。核心JVM参数java -Xms384m -Xmx384m -XX:MaxMetaspaceSize128m -XX:UseG1GC \ -jar help-server.jar这里要补充一个思路微服务的JVM调优和单体不一样单体追求的是在一个进程里处理所有类型的流量堆内存要给足微服务追求的是单实例轻量化遇到瓶颈横向扩容实例而不是把一个实例的堆无限调大。同一个服务如果QPS涨了先加节点而不是去改-Xmx这个方向不能搞反。5. 个人实操总结与下一步想做的事这个项目从单体推翻重来到最后六个微服务稳定运行最深的体会有三个第一微服务的核心不是技术而是边界。如果业务域的划分是模糊的微服务带来的不是解耦而是分布式地狱。我花了整整一周梳理工单状态机、积分规则、权限边界后面写代码的时候几乎没有大改过模块结构。第二不要为了分布式而分布式。像社区帮扶这种业务量级的平台单体在很长一段时间内都能胜任甚至性能更好。但之所以选择微服务是因为它的扩展性、团队协作分工和故障隔离能力更匹配这种多业务共存的平台这属于架构演进的主动选择。上线前我自问过很多次“这个选择对吗”现在我可以明确回答——在这个业务形态下六个独立演进的服务比一个臃肿的单体好维护得多。第三基础设施可以省但可观测性绝对不能省。这个项目如果没做traceId全链路追踪后面排障工作量至少翻倍。日志、监控、告警这些“看不见的投入”才是微服务架构能稳定跑下去的底气。后续我计划在monitor-server里尝试接入一套轻量级的推荐策略把帮扶需求和志愿者的服务标签做匹配增加抢单成功率。另外还想把现有的RabbitMQ逐步换到RocketMQ用上它的延迟消息和事务消息能力把本地消息表这套方案再简化一步。社区帮扶这件事技术上不难难的是让平台真正好用、让数据和信任流动起来这套架构让我们有了继续演进的底子。

相关新闻

PCL 1.13.0 与 Qt 6 集成实战:从 CMake 到点云可视化

PCL 1.13.0 与 Qt 6 集成实战:从 CMake 到点云可视化

简介:面向需要在Qt6框架中集成PCL 1.13.0进行点云处理开发的工程师与研究者,这份资源提供了完整的PCL编译产物与配套依赖。包内含约2.4万个文件,以hpp/h头文件、lib静态库、dll动态库及cmake配置文件为主,另含3rdParty第三方依赖、…

2026/10/13 13:57:45 阅读更多 →
不引数据库,用 user_g.txt 实现注册登录与密码安全存储

不引数据库,用 user_g.txt 实现注册登录与密码安全存储

最近有朋友问我,他想做一个最简单的注册登录功能,不引数据库,不上框架,只要用户输入用户名和密码,程序能把它们存下来,下次还能用同一套凭证登录。他特别强调一个细节:用户名和密码要存在一个叫…

2026/10/13 13:57:45 阅读更多 →
Delphi WebSocket服务端实战:开源库选型、消息广播与避坑全记录

Delphi WebSocket服务端实战:开源库选型、消息广播与避坑全记录

简介:这套DelphiWebsockets压缩包是一份基于Delphi实现WebSocket服务端的完整源码工程,面向需要构建实时双向通信能力的Delphi开发者,可用于聊天、股票行情推送、在线协作等场景。包内共32个文件,以22个.pas源代码文件为主&#x…

2026/10/13 13:57:45 阅读更多 →

最新新闻

Paramics动态交通分配(DTA)从配置到收敛的实战指南

Paramics动态交通分配(DTA)从配置到收敛的实战指南

早高峰路网仿真相对于静态分配,永远是两个江湖。用过Paramics的同行应该都见过这种场面:模型搭得很细,信号周期也对得上,可当你把四阶段法分好的OD矩阵往路网上一放,奇怪的事情就来了——有的路段车子堵得水泄不通&…

2026/10/13 14:42:54 阅读更多 →
移除PDF口令与数字证书限制:从识别到实操的完整指南

移除PDF口令与数字证书限制:从识别到实操的完整指南

简介:PDF文档加密常限制正常编辑与访问,这份资源面向需要解除PDF打开密码或权限密码的用户,提供专门的处理工具与配套说明。资源包共13个文件,压缩后仅775KB,包含主程序exe、运行所需的dll组件、汉化说明txt、操作帮助…

2026/10/13 14:42:54 阅读更多 →
JavaWeb实战:黑马商城SSM项目部署、踩坑与优化

JavaWeb实战:黑马商城SSM项目部署、踩坑与优化

简介:这是一份基于前后端分离架构的黑马商城小项目,适合正在学习Java Web开发的初学者,也适合需要完成课程设计或毕业设计的学生。项目完整实现了电商平台核心业务流程,包括商品列表展示、商品详情、购物车增删改、订单提交与支付…

2026/10/13 14:42:54 阅读更多 →
Java并发编程核心知识详解:线程、锁与线程池实战

Java并发编程核心知识详解:线程、锁与线程池实战

1. 线程基础:先搞清楚线程到底是什么线程这块内容,可以说是Java面试里出场率最高的知识点,没有之一。不管是校招还是社招,只要是后端方向,几乎必问线程相关的概念。我这些年面试别人也被别人面试,发现线程八…

2026/10/13 14:42:54 阅读更多 →
知乎动态渲染数据采集:SSR快照与API复现实战指南

知乎动态渲染数据采集:SSR快照与API复现实战指南

1. 这不是“爬知乎”的教程,而是对一个失效接口的逆向解剖现场“puppeteer爬取知乎答案列表”——这个标题在2023年之前几乎等于“稳如老狗”,2024年之后却成了新手踩坑率最高的关键词之一。我最近帮某高校实验室调试一个课程设计项目时,发现…

2026/10/13 14:42:54 阅读更多 →
Windows沙箱运行AI模型崩溃根因:EPT页表竞争与GPU上下文丢失

Windows沙箱运行AI模型崩溃根因:EPT页表竞争与GPU上下文丢失

1. 项目概述:一次Windows沙箱环境崩溃背后的系统级真相“2026-10-08_Codex-Windows沙箱故障复盘报告”这个标题乍看像是一份内部运维日志,但拆开来看,它其实浓缩了一个高频、高痛、却极少被公开深挖的技术现场——Codex类AI辅助开发工具在Win…

2026/10/13 14:41:52 阅读更多 →

日新闻

物联网系统集成避坑指南:从选型到验收的关键要点

物联网系统集成避坑指南:从选型到验收的关键要点

做了这么多年物联网系统集成的项目,我最大的感受是,大部分坑不是出在技术前沿,而是出在一些看起来很平常的地方。设备选了便宜的、协议没问清楚、现场没摸透、验收标准写得含糊——这些细枝末节,最后都会变成延期、超支和扯皮的大…

2026/10/13 0:00:57 阅读更多 →
ESP32舵机控制全攻略:从PWM原理到高级玩法与常见故障排查

ESP32舵机控制全攻略:从PWM原理到高级玩法与常见故障排查

如果你玩ESP32有一阵子了,很难不碰到舵机控制这道坎。做智能小车要转方向,做机械臂要抬关节,做云台要偏航俯仰,背后都是同一个东西在干活:舵机。而我见过太多人卡在“代码能编译、舵机就是不听话”这个阶段&#xff0c…

2026/10/13 0:00:57 阅读更多 →
CAN总线原理与STM32实战:抗干扰、仲裁、错误处理全解析

CAN总线原理与STM32实战:抗干扰、仲裁、错误处理全解析

1. 为什么CAN总线至今仍是工业现场的“硬通货”?——从汽车底盘到智能温室的真实需求你有没有拆过一辆老款燃油车的中控台?或者调试过某高校实验室里那台跑着Modbus协议却频频丢帧的PLC控制柜?又或者,在某个农业物联网项目里&…

2026/10/13 0:00:57 阅读更多 →

周新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介:基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码,面向计算机相关专业课程设计与期末大作业学生,以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程,…

2026/10/13 2:54:56 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化,十个新手有八个栽在"往输入框里填东西"这件事上:要么填不进去,要么填了一半,要么直接把原来内容追加在后面。这背后的根因&…

2026/10/12 0:16:38 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀:什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面,跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/13 1:58:08 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 21:05:09 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 14:48:49 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →