github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-17 03:03:41 +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> <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 v-if="uploadList.length > 0" class="file-status" @click="[uploadShow=true, packShow=false]"> <div class="file-actions">
<Loading v-if="uploadList.find(({status}) => status !== 'finished')"/> <div v-if="uploadList.length > 0" class="file-status" @click="[uploadShow=true, packShow=false]">
<Button v-else shape="circle" icon="md-arrow-round-up"></Button> <Loading v-if="uploadList.find(({status}) => status !== 'finished')"/>
</div> <Button v-else shape="circle" icon="md-arrow-round-up"></Button>
<div v-if="packList.length > 0" class="file-status" @click="[packShow=true, uploadShow=false]"> </div>
<Loading v-if="packList.find(({status}) => status !== 'finished')"/> <div v-if="packList.length > 0" class="file-status" @click="[packShow=true, uploadShow=false]">
<Button v-else shape="circle" icon="md-arrow-round-down"></Button> <Loading v-if="packList.find(({status}) => status !== 'finished')"/>
</div> <Button v-else shape="circle" icon="md-arrow-round-down"></Button>
<div :class="['file-search', searchKey ? 'has-value' : '']" @click="onSearchFocus" @mouseenter="onSearchFocus"> </div>
<Input <div class="file-search" @click="onSearchFocus">
v-model="searchKey" <Input
ref="searchInput" v-model="searchKey"
suffix="ios-search" ref="searchInput"
@on-focus="searchIsFocus=true" suffix="ios-search"
@on-blur="searchIsFocus=false" @on-focus="searchIsFocus=true"
@on-change="onSearchChange" @on-blur="searchIsFocus=false"
:placeholder="$L('搜索名称')" @on-change="onSearchChange"
clearable/> :placeholder="$L('搜索名称')"
</div> clearable/>
<div class="file-add"> </div>
<Button shape="circle" icon="md-add" @click.stop="handleRightClick($event, null, true)"></Button> <div class="file-add">
<Button shape="circle" icon="md-add" @click.stop="handleRightClick($event, null, true)"></Button>
</div>
</div> </div>
</div> </div>

70
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,55 +39,46 @@
} }
} }
} }
.file-status { .file-actions {
flex-shrink: 0; flex: 1;
margin-left: 22px;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
cursor: pointer; justify-content: flex-end;
> button { gap: 8px 18px;
color: #ffffff; .file-status {
background: $primary-color; display: flex;
border-color: $primary-color; align-items: center;
} cursor: pointer;
} > button {
.file-search { color: #ffffff;
flex-shrink: 0; background: $primary-color;
margin-left: 22px; border-color: $primary-color;
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;
}
} }
} }
&.has-value, .file-search {
&:hover {
.ivu-input-wrapper { .ivu-input-wrapper {
width: auto;
transform: translateZ(0);
.ivu-input { .ivu-input {
border-color: #dcdee2;
width: 160px; width: 160px;
padding-left: 14px; padding-left: 14px;
padding-right: 30px;
border-radius: 16px;
}
.ivu-input-suffix {
i {
color: $primary-text-color;
}
} }
} }
} }
} .file-add {
.file-add { cursor: pointer;
flex-shrink: 0; .taskfont {
margin-left: 18px; font-size: 18px;
cursor: pointer; }
.taskfont {
font-size: 18px;
} }
} }
} }