Merge pull request #7 from SteamFinder/main

feat: 添加页面样式docs

.vitepress/config.mjs

@@ -35,7 +35,7 @@ export default defineConfig({
             {
                 text: '现有项目',
                 items: [
-                    { text: '升华网', link: '/shenghua-web/', activeMatch: '^/shenghua-web/' },
+                    { text: '👏升华网', link: '/shenghua-web/', activeMatch: '^/shenghua-web/' },
                     { text: '社团注册', link: '/club-register/', activeMatch: '^/club-register/' },
                     { text: '实践打卡', link: '/practice-checkin/', activeMatch: '^/practice-checkin/' },
                 ]

shenghua-web/frontend/style.md

@@ -1,5 +1,100 @@
-# 升华网 前端 style
+# 页面样式
+这个页面将向你介绍升华网的几个主要页面样式。
 
 ::: tip
-TBD
-:::
+发挥你的想象力，构建升华美学。
+:::
+
+## 首页
+首页仍是以Banner图先行的展示风格。因此，首页的图片资源很多。首页主要有Banner图，
+轮播图，展示卡片，文章聚合列表（有两种风格），视频封面图展示。
+
+首页使用了无刷加载动画和浮入显示，能够让页面更加灵活生动。
+
+### 图片展示
+首页的图片资源多，因此需要多种样式来防止访客的乏味感出现。
+我们定义了五种样式交替使用。
+
+### Banner图
+进入网页后最先映入眼帘的就是Banner大图。这一区域一般用于展示校团委最近的大型活动，
+例如校园歌手大赛，毕业集市等，共展示三张图片。
+
+### 轮播图
+Banner图下侧紧跟轮播图，用于展示最近校团委的工作动态，同时右侧会有列表进行聚合输出，
+样式为时间+标题+文章摘要。列表聚合输出的标题有```:hover```动画。
+
+原有的设计图中此处涉及到信息密度过高，会造成阅读疲劳。同时在小屏幕设备上显示效果不佳。
+
+旧版设计图：
+![旧版轮播图设计图](./style-oldWorkSection.png)
+
+我们进行了进一步的优化，主要扩大了轮播图的大小，让空间不再逼仄。同时，我们调整了团内通知
+的位置，整体更加宽松。标题我们也使用了思源宋体，使页面更加多样化。
+
+优化后：
+![旧版轮播图设计图](./style-newWorkSection.png)
+
+### 展示卡片
+展示卡片的基本功能与轮播图类似，实现图片，标题与文章摘要的聚合输出，采取平铺网格占位设计，
+同时具有响应式布局，会根据设备屏幕大小自动调整。
+
+### 文章聚合列表
+文章聚合列表主要用于标题优先的情况，能够压缩占用的页面空间，提高信息密度。团内通知是校内师生
+大量查阅的内容区域，因此使用文章聚合列表，日期+标题的样式。
+
+第二种样式是思想引领区域，用来展示重要的学习文件，因此也采用了文章聚合列表提高信息密度。
+同时使用了```<div class="cardFloat"></div>```实现了卡片浮动动画。
+
+### 视频封面列表
+主要用于视频资源的展示。
+
+## 文章列表
+文章列表我们进行了升级。升华网改版的初始设计图虽然也很美观，但是信息密度存在过高的情况。
+在访客查阅文章时，无法快速判断文章的主要内容。大量标题叠加会导致出现阅读疲劳。
+![旧版文章列表设计图](./style-oldPassageList.png)
+
+因此，我们进行了界面的优化。一是将单页显示的数量减少，扩大间距。二是我们除了输出文章标题，
+也会将封面图（如果有）和文章摘要一并输出。
+![新版文章列表设计图](./style-newPassageList.png)
+
+## 视频列表
+视频列表我们仍按照原设计图进行开发，将封面图进行聚合展示，访客可以快速找到想要的视频。
+
+## 搜索页面
+搜索页面是访客查询文章内容的关键入口，不仅能按照访客的操作输出结果，还要让结果清晰易懂，
+使访客快速定位自己需要的信息。
+
+原有设计图给出的搜索结果较为简陋，没有封面图与文章摘要，未进行文章分类的输出，访客不易
+找到自己需要的内容。
+![旧版搜索页面](./style-oldSearch.png)
+
+我们在旧版设计图的基础上进行了优化。同时输出文章标题，封面图（如果有），文章摘要和文章分类，
+这样更有利于访客检索信息。同时我们让列表的边距增加，让空间更加宽松。
+::: tip
+由于我们对思源宋体进行了字库压缩，此处的图片部分文字丢失字体。现已修复。
+:::
+![新版搜索页面](./style-newSearch.png)
+
+## 投稿页面
+投稿页面是团支书进行自主投稿的页面。由于博达系统的限制，我们无法做过多的定制。因此大多数
+控件使用Bootstrap默认控件，样式与二级页面保持一致。
+
+为了团支书规范投稿，我们使用模态框进行了投稿须知提示。
+
+## 文章详情页面
+文章详情页面主要承载了文章内容，因此整个页面应该保持简洁，突出文章主体，同时满足响应式设计，
+让桌面/移动双端均有良好的阅读体验。旧版设计图存在密度过高，且侧边栏受到版块过多的影响，
+变得过长，影响页面样式，所以我们进行了优化调整。
+
+旧版：
+![旧版文章页面](./style-oldPassage.png)
+
+新版页面还加入了阅读进度条，提示访客目前阅读的进度。
+
+新版：
+![新版文章页面](./style-newPassage.png)
+
+我们还对新版页面进行了移动端优化。在检测到UA为移动端时，上方的navbar会自动变成menu按钮，点击后展开。
+
+## 视频详情页面
+视频详情页面使用Dplayer作为播放器，支持弹幕挂载。