修复: 移动端UI和部署配置优化

1. 移动端文件列表图片图标大小修复
   - 添加响应式CSS规则,图片缩略图自动适配屏幕尺寸
   - 移除内联样式,统一使用CSS类管理
   - 移动端(768px): 48px x 48px
   - 小屏幕(480px): 40px x 40px

2. 设置页面存储切换UI优化
   - 用户选择本地存储时自动隐藏SFTP配置表单
   - 用户选择SFTP时显示SFTP配置表单
   - 优化用户体验,避免混淆

3. install.sh自动配置PUBLIC_PORT
   - 部署时自动添加PUBLIC_PORT环境变量
   - 非标准端口部署时分享链接自动包含端口号
   - 解决IP模式部署分享链接无法访问的问题
This commit is contained in:
WanWanYun
2025-11-11 23:41:17 +08:00
parent 0c55b599ef
commit 016879885c

View File

@@ -193,6 +193,12 @@
.file-icon { .file-icon {
margin-bottom: 10px; margin-bottom: 10px;
} }
.file-thumbnail {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 8px;
}
.file-name { .file-name {
font-size: 13px; font-size: 13px;
color: #333; color: #333;
@@ -332,6 +338,11 @@
.file-icon i { .file-icon i {
font-size: 48px !important; font-size: 48px !important;
} }
/* 图片缩略图移动端适配 */
.file-thumbnail {
width: 48px !important;
height: 48px !important;
}
/* 视频图标容器移动端适配 */ /* 视频图标容器移动端适配 */
.file-icon div[style*="background: linear-gradient"] { .file-icon div[style*="background: linear-gradient"] {
width: 48px !important; width: 48px !important;
@@ -714,8 +725,7 @@
<img v-if="file.name.match(/\.(jpg|jpeg|png|gif|bmp|svg|webp)$/i) && getThumbnailUrl(file)" <img v-if="file.name.match(/\.(jpg|jpeg|png|gif|bmp|svg|webp)$/i) && getThumbnailUrl(file)"
:src="getThumbnailUrl(file)" :src="getThumbnailUrl(file)"
:alt="file.name" :alt="file.name"
class="file-thumbnail" class="file-thumbnail">
style="width: 64px; height: 64px; object-fit: cover; border-radius: 8px;">
<!-- 视频图标(不预加载,避免慢) --> <!-- 视频图标(不预加载,避免慢) -->
<div v-else-if="file.name.match(/\.(mp4|avi|mov|wmv|flv|mkv|webm)$/i)" <div v-else-if="file.name.match(/\.(mp4|avi|mov|wmv|flv|mkv|webm)$/i)"
style="width: 64px; height: 64px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative;"> style="width: 64px; height: 64px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative;">
@@ -995,7 +1005,7 @@
</div> </div>
<!-- SFTP配置 - 仅普通用户且权限允许SFTP --> <!-- SFTP配置 - 仅普通用户且权限允许SFTP -->
<div v-if="user && !user.is_admin && (storagePermission === 'sftp_only' || storagePermission === 'user_choice')"> <div v-if="user && !user.is_admin && (storagePermission === 'sftp_only' || (storagePermission === 'user_choice' && storageType === 'sftp'))">
<h3 style="margin-bottom: 20px;">SFTP配置</h3> <h3 style="margin-bottom: 20px;">SFTP配置</h3>
<div v-if="user && !user.has_ftp_config" class="alert alert-info"> <div v-if="user && !user.has_ftp_config" class="alert alert-info">
请配置SFTP服务器 请配置SFTP服务器