github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-27 15:50:43 +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

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

@ -10,6 +10,7 @@
<h1>{{$L('文件')}}</h1> <h1>{{$L('文件')}}</h1>
<div v-if="loadIng == 0" class="file-refresh" @click="getFileList"><i class="taskfont">&#xe6ae;</i></div> <div v-if="loadIng == 0" class="file-refresh" @click="getFileList"><i class="taskfont">&#xe6ae;</i></div>
</div> </div>
<div class="file-actions">
<div v-if="uploadList.length > 0" class="file-status" @click="[uploadShow=true, packShow=false]"> <div v-if="uploadList.length > 0" class="file-status" @click="[uploadShow=true, packShow=false]">
<Loading v-if="uploadList.find(({status}) => status !== 'finished')"/> <Loading v-if="uploadList.find(({status}) => status !== 'finished')"/>
<Button v-else shape="circle" icon="md-arrow-round-up"></Button> <Button v-else shape="circle" icon="md-arrow-round-up"></Button>
@ -18,7 +19,7 @@
<Loading v-if="packList.find(({status}) => status !== 'finished')"/> <Loading v-if="packList.find(({status}) => status !== 'finished')"/>
<Button v-else shape="circle" icon="md-arrow-round-down"></Button> <Button v-else shape="circle" icon="md-arrow-round-down"></Button>
</div> </div>
<div :class="['file-search', searchKey ? 'has-value' : '']" @click="onSearchFocus" @mouseenter="onSearchFocus"> <div class="file-search" @click="onSearchFocus">
<Input <Input
v-model="searchKey" v-model="searchKey"
ref="searchInput" ref="searchInput"
@ -33,6 +34,7 @@
<Button shape="circle" icon="md-add" @click.stop="handleRightClick($event, null, true)"></Button> <Button shape="circle" icon="md-add" @click.stop="handleRightClick($event, null, true)"></Button>
</div> </div>
</div> </div>
</div>
<div class="file-navigator"> <div class="file-navigator">
<ul class="scrollbar-hidden" v-show="showBtnText || (!selectedItems.length && !shearFirst)"> <ul class="scrollbar-hidden" v-show="showBtnText || (!selectedItems.length && !shearFirst)">

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

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