修复: 移动端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:
@@ -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服务器
|
||||||
|
|||||||
Reference in New Issue
Block a user