✨ feat(css): 添加小程序滚动条样式系统

- 实现全局滚动条基础样式，统一宽度为6rpx并设置圆角
- 添加深色模式自适应样式，根据系统主题切换滚动条颜色
- 定义多种滚动容器类型：页面容器、横向滚动、卡片滚动、列表滚动和弹窗滚动
- 实现自定义滚动条类名：细滚动条(scrollbar-thin)和无滚动条(scrollbar-none)
- 添加主题色滚动条支持：primary/success/warning/error四种状态
- 增加响应式适配，在不同屏幕尺寸下调整滚动条宽度
- 添加滚动条动画效果和指示器，提升用户体验
- 完善CSS导入语法，添加分号结尾符合规范

mini/src/app.css

@@ -1 +1,192 @@
-@import "weapp-tailwindcss"
+@import "weapp-tailwindcss";
+
+/* 小程序滚动条样式规范 */
+/* 基于微信小程序设计规范，适配iOS和Android双平台 */
+
+/* 全局滚动条样式 */
+::-webkit-scrollbar {
+  width: 6rpx;
+  height: 6rpx;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 3rpx;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 3rpx;
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+/* 深色模式下的滚动条样式 */
+@media (prefers-color-scheme: dark) {
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.4);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+/* 页面滚动容器样式 */
+.scroll-container {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+/* 横向滚动容器样式 */
+.scroll-horizontal {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+/* 卡片滚动样式 */
+.card-scroll {
+  max-height: 600rpx;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.card-scroll::-webkit-scrollbar {
+  width: 4rpx;
+}
+
+.card-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(24, 144, 255, 0.3);
+  border-radius: 2rpx;
+}
+
+/* 列表滚动样式 */
+.list-scroll {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.list-scroll::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+/* 弹窗滚动样式 */
+.modal-scroll {
+  max-height: 800rpx;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.modal-scroll::-webkit-scrollbar {
+  width: 4rpx;
+}
+
+.modal-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 2rpx;
+}
+
+/* 自定义滚动条类名 */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4rpx;
+  height: 4rpx;
+}
+
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
+/* 主题色滚动条 */
+.scrollbar-primary::-webkit-scrollbar-thumb {
+  background-color: rgba(24, 144, 255, 0.5);
+}
+
+.scrollbar-success::-webkit-scrollbar-thumb {
+  background-color: rgba(82, 196, 26, 0.5);
+}
+
+.scrollbar-warning::-webkit-scrollbar-thumb {
+  background-color: rgba(250, 173, 20, 0.5);
+}
+
+.scrollbar-error::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 77, 79, 0.5);
+}
+
+/* 响应式滚动条 */
+@media screen and (max-width: 375px) {
+  ::-webkit-scrollbar {
+    width: 4rpx;
+    height: 4rpx;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  ::-webkit-scrollbar {
+    width: 8rpx;
+    height: 8rpx;
+  }
+}
+
+/* 滚动条动画效果 */
+@keyframes scrollFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.scroll-container:hover::-webkit-scrollbar-thumb {
+  animation: scrollFadeIn 0.2s ease;
+}
+
+/* 滚动条指示器 */
+.scroll-indicator {
+  position: relative;
+}
+
+.scroll-indicator::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 2rpx;
+  height: 100%;
+  background: linear-gradient(to bottom, transparent, rgba(24, 144, 255, 0.3), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.scroll-indicator:hover::after {
+  opacity: 1;
+}