feat: streamline mobile file workspace
This commit is contained in:
237899745
@@ -1802,7 +1802,7 @@
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
|
||||
<div class="navbar" v-if="isLoggedIn">
|
||||
<nav class="navbar" v-if="isLoggedIn" aria-label="主导航">
|
||||
<div class="navbar-brand">
|
||||
<span class="brand-mark"><i class="fas fa-cloud"></i></span>
|
||||
<span class="brand-copy">
|
||||
@@ -1812,19 +1812,19 @@
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
<div class="nav-section-label">工作台</div>
|
||||
<div v-if="user && !user.is_admin" class="nav-item" :class="{active: currentView === 'files'}" @click="switchView('files')">
|
||||
<i class="fas fa-folder"></i> 我的文件
|
||||
</div>
|
||||
<div v-if="user && !user.is_admin" class="nav-item" :class="{active: currentView === 'shares'}" @click="switchView('shares')">
|
||||
<i class="fas fa-share-alt"></i> 我的分享
|
||||
</div>
|
||||
<div v-if="user && user.is_admin" class="nav-item" :class="{active: currentView === 'admin'}" @click="switchView('admin')">
|
||||
<i class="fas fa-user-shield"></i> 管理员
|
||||
</div>
|
||||
<button v-if="user && !user.is_admin" type="button" class="nav-item" :class="{active: currentView === 'files'}" :aria-current="currentView === 'files' ? 'page' : null" @click="switchView('files')">
|
||||
<i class="fas fa-folder"></i><span class="nav-item-label">文件</span>
|
||||
</button>
|
||||
<button v-if="user && !user.is_admin" type="button" class="nav-item" :class="{active: currentView === 'shares'}" :aria-current="currentView === 'shares' ? 'page' : null" @click="switchView('shares')">
|
||||
<i class="fas fa-share-alt"></i><span class="nav-item-label">分享</span>
|
||||
</button>
|
||||
<button v-if="user && user.is_admin" type="button" class="nav-item" :class="{active: currentView === 'admin'}" :aria-current="currentView === 'admin' ? 'page' : null" @click="switchView('admin')">
|
||||
<i class="fas fa-user-shield"></i><span class="nav-item-label">管理</span>
|
||||
</button>
|
||||
<div class="nav-section-label nav-service-label">服务</div>
|
||||
<div class="nav-item" :class="{active: currentView === 'settings'}" @click="switchView('settings')">
|
||||
<i class="fas fa-cog"></i> 设置
|
||||
</div>
|
||||
<button type="button" class="nav-item" :class="{active: currentView === 'settings'}" :aria-current="currentView === 'settings' ? 'page' : null" @click="switchView('settings')">
|
||||
<i class="fas fa-cog"></i><span class="nav-item-label">设置</span>
|
||||
</button>
|
||||
<button class="btn btn-secondary navbar-download-btn" :disabled="desktopClientDownloading" @click="downloadDesktopClient">
|
||||
<i :class="desktopClientDownloading ? 'fas fa-spinner fa-spin' : 'fas fa-download'"></i>
|
||||
{{ desktopClientDownloading ? '准备中...' : '下载客户端' }}
|
||||
@@ -1837,15 +1837,15 @@
|
||||
<strong>{{ user.username }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
<button class="btn btn-danger navbar-logout-btn" @click="logout" title="退出登录">
|
||||
<i class="fas fa-power-off"></i> 退出
|
||||
<button class="btn btn-danger navbar-logout-btn" @click="logout" title="退出登录" aria-label="退出登录">
|
||||
<i class="fas fa-power-off"></i><span class="nav-item-label">退出</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 文件视图 -->
|
||||
<div v-if="isLoggedIn && currentView === 'files'" class="main-container">
|
||||
<div v-if="isLoggedIn && currentView === 'files'" class="main-container files-main-container">
|
||||
<div class="card files-view-card">
|
||||
|
||||
<header class="workspace-page-header files-page-header">
|
||||
@@ -1909,19 +1909,22 @@
|
||||
<!-- 文件列表 -->
|
||||
<div v-else class="files-content-shell">
|
||||
<div class="files-command-bar">
|
||||
<div class="files-command-primary">
|
||||
<div class="files-command-primary files-command-primary-desktop">
|
||||
<button class="btn btn-primary" @click="$refs.fileUploadInput.click()">
|
||||
<i class="fas fa-upload"></i> 上传文件
|
||||
<i class="fas fa-upload"></i><span class="btn-label">上传文件</span>
|
||||
</button>
|
||||
<button class="btn btn-secondary" @click="showCreateFolderModal = true">
|
||||
<i class="fas fa-folder-plus"></i> 新建文件夹
|
||||
<i class="fas fa-folder-plus"></i><span class="btn-label">新建文件夹</span>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary mobile-file-create-trigger" @click="openMobileCreateSheet($event)" aria-label="新建或上传">
|
||||
<i class="fas fa-plus"></i><span>新建</span>
|
||||
</button>
|
||||
<div class="view-toggle-group files-view-toggle" aria-label="文件视图切换">
|
||||
<button class="btn" :class="fileViewMode === 'grid' ? 'btn-primary' : 'btn-secondary'" @click="fileViewMode = 'grid'" title="大图标视图">
|
||||
<button class="btn" :class="fileViewMode === 'grid' ? 'btn-primary' : 'btn-secondary'" @click="setFileViewMode('grid')" :aria-pressed="fileViewMode === 'grid'" aria-label="大图标视图" title="大图标视图">
|
||||
<i class="fas fa-th-large"></i><span>大图标</span>
|
||||
</button>
|
||||
<button class="btn" :class="fileViewMode === 'list' ? 'btn-primary' : 'btn-secondary'" @click="fileViewMode = 'list'" title="列表视图">
|
||||
<button class="btn" :class="fileViewMode === 'list' ? 'btn-primary' : 'btn-secondary'" @click="setFileViewMode('list')" :aria-pressed="fileViewMode === 'list'" aria-label="列表视图" title="列表视图">
|
||||
<i class="fas fa-list"></i><span>列表</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -1932,14 +1935,15 @@
|
||||
<div class="files-search-field">
|
||||
<i class="fas fa-search"></i>
|
||||
<input
|
||||
type="text"
|
||||
type="search"
|
||||
class="form-input"
|
||||
v-model="globalSearchKeyword"
|
||||
@input="triggerGlobalSearch"
|
||||
@focus="globalSearchVisible = !!globalSearchKeyword"
|
||||
placeholder="搜索全部目录中的文件或文件夹">
|
||||
aria-label="搜索文件或文件夹"
|
||||
placeholder="搜索文件或文件夹">
|
||||
</div>
|
||||
<select class="form-input files-search-type" v-model="globalSearchType" @change="runGlobalSearch">
|
||||
<select class="form-input files-search-type" v-model="globalSearchType" @change="runGlobalSearch" aria-label="搜索类型">
|
||||
<option value="all">全部</option>
|
||||
<option value="file">仅文件</option>
|
||||
<option value="directory">仅文件夹</option>
|
||||
@@ -2114,6 +2118,7 @@
|
||||
@touchstart.stop
|
||||
@touchmove.stop
|
||||
@touchend.stop
|
||||
aria-label="更多操作"
|
||||
title="更多操作">
|
||||
<i class="fas fa-ellipsis-h"></i>
|
||||
</button>
|
||||
@@ -4474,9 +4479,30 @@
|
||||
<i class="fas fa-trash"></i> 删除
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动端新建面板 -->
|
||||
<div v-if="showMobileCreateSheet" class="modal-overlay mobile-file-sheet-overlay mobile-create-sheet-overlay" @click="closeMobileCreateSheet">
|
||||
<section class="mobile-file-sheet mobile-create-sheet" role="dialog" aria-modal="true" aria-labelledby="mobile-create-title" @click.stop>
|
||||
<div class="mobile-file-sheet-handle"></div>
|
||||
<div id="mobile-create-title" class="mobile-file-sheet-title mobile-create-sheet-title">新建</div>
|
||||
<div class="mobile-create-sheet-actions">
|
||||
<button type="button" class="mobile-create-option" @click="mobileCreateAction('upload')">
|
||||
<span class="mobile-create-option-icon upload"><i class="fas fa-cloud-upload-alt"></i></span>
|
||||
<span class="mobile-create-option-copy"><strong>上传文件</strong><small>从手机选择一个或多个文件</small></span>
|
||||
<i class="fas fa-chevron-right mobile-create-option-arrow"></i>
|
||||
</button>
|
||||
<button type="button" class="mobile-create-option" @click="mobileCreateAction('folder')">
|
||||
<span class="mobile-create-option-icon folder"><i class="fas fa-folder-plus"></i></span>
|
||||
<span class="mobile-create-option-copy"><strong>新建文件夹</strong><small>创建目录并整理云端文件</small></span>
|
||||
<i class="fas fa-chevron-right mobile-create-option-arrow"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="mobile-file-sheet-btn cancel mobile-create-cancel" @click="closeMobileCreateSheet">取消</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 移动端文件操作面板 -->
|
||||
<div v-if="showMobileFileActionSheet && mobileActionFile" class="modal-overlay mobile-file-sheet-overlay" @click="closeMobileFileActionSheet">
|
||||
<div class="mobile-file-sheet" @click.stop>
|
||||
<section class="mobile-file-sheet" role="dialog" aria-modal="true" aria-label="文件操作" @click.stop>
|
||||
<div class="mobile-file-sheet-handle"></div>
|
||||
<div class="mobile-file-sheet-title" :title="getFileDisplayName(mobileActionFile)">
|
||||
{{ getFileDisplayName(mobileActionFile) }}
|
||||
@@ -4508,7 +4534,7 @@
|
||||
<i class="fas fa-times"></i> 取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 管理员：编辑用户存储权限模态框 -->
|
||||
|
||||
Reference in New Issue
Block a user