github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-28 04:40:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 重构文件管理界面，优化文件操作区域布局和样式

Browse Source
This commit is contained in:
kuaifan 2026-01-04 06:13:44 +00:00
parent b9809d207d
commit f42250b8b7
2 changed files with 54 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
resources/assets/js/pages/manage/file.vue
View File

@ -10,27 +10,29 @@
<h1>{{$L('文件')}}</h1>
<div v-if="loadIng == 0" class="file-refresh" @click="getFileList"><i class="taskfont">&#xe6ae;</i></div>
</div>
<div v-if="uploadList.length > 0" class="file-status" @click="[uploadShow=true, packShow=false]">
<Loading v-if="uploadList.find(({status}) => status !== 'finished')"/>
<Button v-else shape="circle" icon="md-arrow-round-up"></Button>
</div>
<div v-if="packList.length > 0" class="file-status" @click="[packShow=true, uploadShow=false]">
<Loading v-if="packList.find(({status}) => status !== 'finished')"/>
<Button v-else shape="circle" icon="md-arrow-round-down"></Button>
</div>
<div :class="['file-search', searchKey ? 'has-value' : '']" @click="onSearchFocus" @mouseenter="onSearchFocus">
<Input
v-model="searchKey"
ref="searchInput"
suffix="ios-search"
@on-focus="searchIsFocus=true"
@on-blur="searchIsFocus=false"
@on-change="onSearchChange"
:placeholder="$L('搜索名称')"
clearable/>
</div>
<div class="file-add">
<Button shape="circle" icon="md-add" @click.stop="handleRightClick($event, null, true)"></Button>
<div class="file-actions">
<div v-if="uploadList.length > 0" class="file-status" @click="[uploadShow=true, packShow=false]">
<Loading v-if="uploadList.find(({status}) => status !== 'finished')"/>
<Button v-else shape="circle" icon="md-arrow-round-up"></Button>
</div>
<div v-if="packList.length > 0" class="file-status" @click="[packShow=true, uploadShow=false]">
<Loading v-if="packList.find(({status}) => status !== 'finished')"/>
<Button v-else shape="circle" icon="md-arrow-round-down"></Button>
</div>
<div class="file-search" @click="onSearchFocus">
<Input
v-model="searchKey"
ref="searchInput"
suffix="ios-search"
@on-focus="searchIsFocus=true"
@on-blur="searchIsFocus=false"
@on-change="onSearchChange"
:placeholder="$L('搜索名称')"
clearable/>
</div>
<div class="file-add">
<Button shape="circle" icon="md-add" @click.stop="handleRightClick($event, null, true)"></Button>
</div>
</div>
</div>

70
resources/assets/sass/pages/page-file.scss vendored
View File

@ -12,11 +12,12 @@
.file-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 22px 0;
padding-bottom: 16px;
margin: 32px 32px 16px;
border-bottom: 1px solid #F4F4F5;
.file-nav {
flex: 1;
display: flex;
align-items: center;
> h1 {
@ -38,55 +39,46 @@
}
}
}
.file-status {
flex-shrink: 0;
margin-left: 22px;
.file-actions {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
cursor: pointer;
> button {
color: #ffffff;
background: $primary-color;
border-color: $primary-color;
}
}
.file-search {
flex-shrink: 0;
margin-left: 22px;
cursor: pointer;
.ivu-input-wrapper {
width: auto;
transform: translateZ(0);
.ivu-input {
border-color: #dcdee2;
width: 0;
padding-left: 0;
padding-right: 30px;
border-radius: 16px;
transition: all 0.3s;
}
.ivu-input-suffix {
i {
color: $primary-text-color;
}
justify-content: flex-end;
gap: 8px 18px;
.file-status {
display: flex;
align-items: center;
cursor: pointer;
> button {
color: #ffffff;
background: $primary-color;
border-color: $primary-color;
}
}
&.has-value,
&:hover {
.file-search {
.ivu-input-wrapper {
width: auto;
transform: translateZ(0);
.ivu-input {
border-color: #dcdee2;
width: 160px;
padding-left: 14px;
padding-right: 30px;
border-radius: 16px;
}
.ivu-input-suffix {
i {
color: $primary-text-color;
}
}
}
}
}
.file-add {
flex-shrink: 0;
margin-left: 18px;
cursor: pointer;
.taskfont {
font-size: 18px;
.file-add {
cursor: pointer;
.taskfont {
font-size: 18px;
}
}
}
}