addfallbackimg

README.md

@@ -1,4 +1,5 @@
 # paipweb 项目
+
 ## 项目概述
 
 - **项目名称**: paipweb
@@ -25,17 +26,21 @@ yarn install
 ## 开发环境运行
 
 ### H5 开发模式
+
 ```bash
 npm run dev:h5
 ```
+
 启动后访问 http://localhost:5173
 
 ### 自定义平台开发模式
+
 ```bash
 npm run dev:custom
 ```
 
 ### SSR 模式（H5）
+
 ```bash
 npm run dev:h5:ssr
 ```
@@ -43,17 +48,21 @@ npm run dev:h5:ssr
 ## 构建打包
 
 ### H5 构建
+
 ```bash
 npm run build:h5
 ```
+
 构建产物位于 `dist/build/h5` 目录
 
 ### 自定义平台构建
+
 ```bash
 npm run build:custom
 ```
 
 ### SSR 构建（H5）
+
 ```bash
 npm run build:h5:ssr
 ```
@@ -65,30 +74,44 @@ paipweb/
 ├── src/                    # 源代码目录
 │   ├── App.vue            # 应用入口
 │   ├── main.js            # 主入口文件
+│   ├── api/               # API 接口
+│   │   └── api.js         # API 配置
 │   ├── pages/             # 页面目录
-│   │   ├── components/    # 组件目录
+│   │   ├── comments/      # 评论组件
-│   │   └── index/         # 首页
+│   │   ├── findmore/      # 发现更多组件
+│   │   ├── head/          # 下载应用组件
+│   │   ├── index/         # 首页
+│   │   ├── intereact/     # 互动组件
+│   │   ├── news.vue       # 新闻页面
+│   │   ├── post.vue       # 帖子页面
+│   │   └── video.vue      # 视频页面
 │   ├── stores/            # 状态管理
 │   │   └── common.js      # 公共状态
 │   ├── static/            # 静态资源
 │   │   ├── fonts/         # 字体文件
 │   │   ├── imgs/          # 图片资源
+│   │   ├── logo.png       # 应用图标
 │   │   └── videos/        # 视频资源
+│   ├── pages.json         # 页面配置
+│   ├── manifest.json      # 应用配置
 │   └── uni.scss           # 全局样式
-├── uni_modules/           # uni-app 模块
+├── uni_modules/           # uni-app 模块（包含各种UI组件）
 ├── package.json           # 项目配置
 ├── vite.config.js         # Vite 配置
+├── index.html             # HTML 入口文件
 └── manifest.json          # 应用配置
 ```
 
 ## 测试指南
 
 ### 功能测试
+
 1. 运行开发服务器：`npm run dev:h5`
 2. 在浏览器中访问 http://localhost:5173
 3. 测试各个页面的功能是否正常
 
 ### 打包测试
+
 1. 执行构建命令：`npm run build:h5`
 2. 检查构建产物是否完整
 3. 在服务器上部署构建产物进行测试
@@ -96,16 +119,19 @@ paipweb/
 ## 常见问题
 
 ### 依赖安装失败
+
 - 确保 Node.js 版本符合要求
 - 尝试清除缓存：`npm cache clean --force`
 - 使用淘宝镜像：`npm config set registry https://registry.npmmirror.com`
 
 ### 构建失败
+
 - 检查 Node.js 和 npm 版本
 - 确认所有依赖已正确安装
 - 查看控制台错误信息进行排查
 
 ### 样式问题
+
 - 检查 Sass 是否正确安装
 - 确认 uni.scss 中的变量和混入是否正确导入
 
@@ -116,3 +142,19 @@ paipweb/
 - 页面文件放在 `src/pages` 目录下
 - 公共组件放在 `src/pages/components` 目录下
 - 状态管理使用 Pinia
+
+# 当前存在问题
+
+- 目前是自动跳转到指定页面，后续按需修改跳转逻辑
+  - 等待阶段：当前还没有添加等待动画，后续按需添加
+  - 加载失败：缺省图貌似需要修改
+- 页面布局问题
+  - FindMore 组件：目前采用 fixed 定位，固定在页面底部
+  - Video 页面：视频与评论在拉动时，评论和右侧互动区域会跟随浏览器窗口向上移动，导致重叠遮挡问题；右侧互动区域图标需要更换
+  - Post/News 页面：评论组件互动区域布局问题（可以先检查）
+  - 评论组件
+    - 互动区域图标需要更换
+    - 评论父子关系需要使用数据中的 parent（Comment）Id 进行追踪再展示（还没有实现）
+    - 在 video 页面后续可能会变更为弹幕组件
+  - 缺省图
+    - 各个页面/组件缺省图需要更换

src/pages/comments/comments.vue

@@ -82,7 +82,7 @@
 
 
 			<view v-else class="nocomments">
-				<image src="/static/imgs/nocomments/nocomments@3x.webp" mode="aspectFit" alt="暂无评论"></image>
+				<image src="/static/imgs/empty-img/b-empty-img@3x.webp" mode="aspectFit" alt="暂无评论"></image>
 				<text class="nocommentstext">空空如也~</text>
 			</view>
 
@@ -528,11 +528,19 @@ main {
 .nocomments {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	text-align: center;
 	margin: 0 auto;
 	max-width: 100%;
-	gap: 12px;
+	gap: 8px;
 	padding: 12px;
+	height: 200px;
+}
+
+.nocomments image {
+	display: block;
+	margin: 0 auto;
 }
 
 .nocommentstext {

src/pages/findmore/findmore.vue

@@ -28,7 +28,7 @@ const common = useCommonStore()
 .openapptext {
 	width: 96px;
 	height: 22px;
-	font-size: 16px;
+	font-size: 1em;
 	font-weight: 600;
 	font-stretch: normal;
 	font-style: normal;

src/pages/post.vue

@@ -300,23 +300,23 @@ page,
 .page {
 	width: 100%;
 	max-width: 430px;
-	height: auto;
+	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	margin: 0 auto;
-	position: relative;
+	/* position: relative; */
 }
 
 .content {
 	flex-shrink: 0;
-	overflow: hidden;
+	/* overflow: hidden; */
 	display: flex;
 	flex-direction: column;
 }
 
 .moment {
 	width: 100%;
-	flex-shrink: 0;
+	/* flex-shrink: 0; */
 	display: flex;
 	flex-direction: column;
 	box-sizing: border-box;