备战高考计划 day6

• 缩放目前的实现方式会导致模糊，需要改造。移动端全屏的按钮被挡住，根本无法全屏。解决缩放模糊的问题：之前在 hooks/use-map-zoom.ts 中直接在 <svg> 上使用 will-change: transform 与 CSS transform: scale 进行缩放，这会导致浏览器先将其栅格化为位图，然后直接放大图片，从而造成了严重的模糊。我去掉了 will-change: transform，并且修改了 Hook 返回的属性，将原来应用在 <svg> 的缩放位移样式提取成了 gStyle。在 components/map-visualization.tsx 里，我给内部的所有 SVG 元素包裹了一层 <g>，并将放大和平移效果作用在这个矢量组 <g> 上。由于此时浏览器仍然在处理真正的 SVG 节点树，因此不管放大多少倍都不会出现任何模糊现象，会保持完美的矢量清晰度。

• statistic 页要有更多功能，现在是高校数量省份排行榜，还要有城市排行榜等，以及其他各种图表。图表里的元素要支持点进 /universities，下的对应列表页，省市页等。原来的省列表页，要移动到 /universities/location 下。

• 各个功能的数据来源说明。例如每一省份的 count 话，n 所普通高校 + n 所军校

• 校对双一流高校名单

• 表格没必要只展示前 10 条，全展示。

• 快速筛选实际应该 in place 生效，不要跳转页面。但保留原有的页面。功能快捷入口移到两列布局的上方去，单独成一列，加入原来快速筛选中的这些链接等。tab 的设计不太符合新粗野风格。快速筛选的 icon 颜色不对，过黑，看不见。

• 高校表格，表头要能 sticky 放弃了。表格有 overflow-x-auto ，妨碍了里面的 tr 的相对视口的 sticky

• universities/locations/5bm/5bee5biC url 5bm/5bee5biC 有斜杠的问题，导致广州不能访问。

• 好像还缺社交媒体卡片，我也需要直接生成。各个页面单独生成。

• statistics 下面的图表（包括各种切换的选项，例如 985、211、军校等）。拆出去又是很多单独的页面了，我希望利用这一点来优化 SEO。搞子页面，然后用内链链起来。每一个图表都要有一定的介绍。都可以有话说，可以结合结果来说。og 可以的话用渲染出来的其图表截图。顺便拆分一下组件。现在文件太大了

• statistics-articles.tsx 这里只展示了 top 20 article-chart-renderer.tsx 27-28 这没问题 。但我希望能有一个完整的榜单页面，支持从图表页直接点击进入。其他类似的图表也要有这个能力。

原先合并在一起的省市排行榜（CompactStatisticsChart）拆分成了各自独立的组件，并在引用这些图表的地方进行了对应的修改：

1. 删除了合并组件：去除了 components/charts/compact-statistics-chart.tsx。
2. 拆分了文章列表数据：在 lib/statistics-articles.tsx 中，去掉了原来混合式的 compact-map（"全国高校省市分布地图"），替换成了两个独立的图表引用配置：
   • all-province-ranking ("全国高校各省份分布排行")
   • all-city-ranking ("全国高校重点城市分布排行")
3. 更新了渲染器：在 components/charts/article-chart-renderer.tsx 中移除了相关合并组件的导入和 case 分支处理。由于省份和城市的独立渲染组件（ 和 ）本来就已经支持并被完善实现过，所以文章列表的数据变更会自动匹配到它们进行渲染。