|
|
|
@@ -2,95 +2,79 @@ |
|
|
|
<div> |
|
|
|
<transition name="info-fade"> |
|
|
|
<!-- 版本信息详细 --> |
|
|
|
<div class="version_item" v-if="nowVersion || selectedVersion" :class="{set_item_position:false}"> |
|
|
|
<i class="iconfont icon-shanchu close_btn" @click.stop="clickVersion"></i> |
|
|
|
<div class="version_item" v-if="active" :class="{set_item_position:false}"> |
|
|
|
<!-- <i class="iconfont icon-shanchu close_btn" @click.stop="clickVersion"></i> --> |
|
|
|
<div class="content"> |
|
|
|
<div class="content_header"> |
|
|
|
<i class="iconfont icon-zhiding" alt="" v-if="nowVersion"></i> |
|
|
|
<p :class="[nowVersion ? 'version_title' :'title' ]">当前协同-版本{{commitInfo.version}}</p> |
|
|
|
<p>{{`${nowVersion ? '当前协同 - ' : ''}版本${commitInfo.version}`}}</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="content_icon"> |
|
|
|
<div class="icon_box"> |
|
|
|
<div class="content_remark split"> |
|
|
|
<div class="content_remark_inner"> |
|
|
|
<div>{{showAccountName}}的备注</div> |
|
|
|
<div>{{commitInfo.note ? commitInfo.note : "无备注" }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content_info split" > |
|
|
|
<div class="option" @click.stop="infoPanelActive = !infoPanelActive"> |
|
|
|
<i class="option_icon" :class="{ option_active: infoPanelActive }" /> |
|
|
|
<div class="option_label">更多信息</div> |
|
|
|
</div> |
|
|
|
<div class="content_info_detail" :class="{ panel_inactive: !infoPanelActive }"> |
|
|
|
<div class="content_info_detail_item"><span>提交人：</span><span style="color:#2869E6">{{showAccountName}}</span></div> |
|
|
|
<div class="content_info_detail_item"><span>基于版本：</span><span>{{commitInfo.creator}} 提交的版本{{commitInfo.version}}</span></div> |
|
|
|
<div class="content_info_detail_item"><span>协同于：</span><span>{{showTime}}</span></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content_action split"> |
|
|
|
<div class="option" @click.stop="actionPanelActive = !actionPanelActive"> |
|
|
|
<i class="option_icon" :class="{ option_active: actionPanelActive }" /> |
|
|
|
<div class="option_label">更多操作</div> |
|
|
|
</div> |
|
|
|
<div class="content_action_list" :class="{ panel_inactive: !actionPanelActive }"> |
|
|
|
<div class="content_action_list_item milestone_set"> |
|
|
|
<div class="icon_box"> |
|
|
|
<i class="iconfont icon-lichengbei-qizhi"></i> |
|
|
|
</div> |
|
|
|
<p>里程碑</p> |
|
|
|
<div class="switch_btn"> |
|
|
|
</div> |
|
|
|
<p>里程碑</p> |
|
|
|
<div class="switch_btn"> |
|
|
|
<el-switch |
|
|
|
v-model="commitInfo.milestone" |
|
|
|
@change="setMileStoneClick" |
|
|
|
active-color="#7850FF" |
|
|
|
inactive-color="#fff"> |
|
|
|
v-model="commitInfo.milestone" |
|
|
|
@change="setMileStoneClick" |
|
|
|
active-color="#7850FF" |
|
|
|
inactive-color="#fff"> |
|
|
|
</el-switch> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="version_info"> |
|
|
|
<div class="file_name">文件名</div> |
|
|
|
<div class="file_info"> |
|
|
|
<ul> |
|
|
|
<li><span>提交人：</span><span class="left" style="color:#2869E6">{{showAccountName}}</span></li> |
|
|
|
<li><span>基于版本：</span><span class="left">{{commitInfo.creator}} 提交的版本{{commitInfo.version}}</span></li> |
|
|
|
<li><span>协同于：</span><span class="left">{{showTime}}</span></li> |
|
|
|
</ul> |
|
|
|
<div class="btn_box"> |
|
|
|
<div class="btn" v-if="!nowVersion" @click.stop="showHistoryFile"> |
|
|
|
查看版本 |
|
|
|
</div> |
|
|
|
<div class="edit_btn btn" v-if="nowVersion" @click.stop="editCurrentFile"> |
|
|
|
继续编辑 |
|
|
|
</div> |
|
|
|
<div class="set_btn btn" v-if="!nowVersion" @click.stop="setShare"> |
|
|
|
<i class="iconfont icon-zhiding"></i> |
|
|
|
设为协同版本 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content_remarks"> |
|
|
|
<div class="avactor" :class="{myavactor:true}"> |
|
|
|
<img src="" alt=""> |
|
|
|
|
|
|
|
<div class="content_action_list_item button" v-if="!nowVersion" @click.stop="showHistoryFile"> |
|
|
|
查看版本 |
|
|
|
</div> |
|
|
|
<div class="remarks"> |
|
|
|
<div class="remarks_title" v-if="false"> |
|
|
|
王静的备注 |
|
|
|
</div> |
|
|
|
<!-- 我的备注 --> |
|
|
|
<div class="myremarks" :class="{'set_position':!isShowOpenIcon,'set-border':isRemarksEdit}"> |
|
|
|
<div :class="{myremarks_content:!isShowAll}" |
|
|
|
ref="remarksText" |
|
|
|
> |
|
|
|
{{commitInfo.note ? commitInfo.note : "无备注" }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content_action_list_item button" v-if="nowVersion" @click.stop="editCurrentFile"> |
|
|
|
继续编辑 |
|
|
|
</div> |
|
|
|
<!-- 备注显示详略 --> |
|
|
|
<div class="show_all" @click="showAll" v-if="isShowOpenIcon"> |
|
|
|
<img src="/static/img/展开.svg" alt="" :class="{collapse:isShowAll}"> |
|
|
|
<div class="content_action_list_item button"> |
|
|
|
<i class="iconfont icon-zhiding"/>设为协同版本 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 创建副本 --> |
|
|
|
<div class="create_copy" @click="onMakeCopy" v-if="!nowVersion"> |
|
|
|
<div class="create_copy_content"> |
|
|
|
<img src="static/img/文件.svg" alt=""> |
|
|
|
<p>从该版本创建副本</p> |
|
|
|
<div class="content_action_list_item button" @click="onMakeCopy" v-if="!nowVersion"> |
|
|
|
从该版本创建副本 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</transition> |
|
|
|
|
|
|
|
<!-- 版本信息简略 --> |
|
|
|
<div class="version_item_brief" v-if="!selectedVersion && !nowVersion" @click.stop="clickVersion"> |
|
|
|
<div class="version_item_brief" v-if="!active" @click.stop="clickVersion"> |
|
|
|
<div class="header"> |
|
|
|
<p>版本{{commitInfo.version}}</p> |
|
|
|
<p class="header_time">{{showTime}}</p> |
|
|
|
<div class="icon_box"><span class="iconfont icon-lichengbei-qizhi"></span></div> |
|
|
|
<p>版本{{commitInfo.version}}</p> |
|
|
|
<p class="header_time">{{showTime}}</p> |
|
|
|
</div> |
|
|
|
<div class="remarks_brief"> |
|
|
|
<div class="icon_box"><span class="iconfont icon-lichengbei-qizhi"></span></div> |
|
|
|
<div class="remarks_brief_content" :class="{noremarks:true}">{{commitInfo.note ? commitInfo.note: "无备注"}}</div> |
|
|
|
<div class="remarks_icon"> |
|
|
|
<i class="iconfont icon-beizhu"></i> |
|
|
|
</div> |
|
|
|
<div class="remarks_brief_content" :class="{noremarks:true}">{{commitInfo.note ? commitInfo.note: "无备注"}}</div> |
|
|
|
<!-- <div class="remarks_icon"><i class="iconfont icon-beizhu" /></div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
@@ -109,7 +93,7 @@ export default { |
|
|
|
props:{ |
|
|
|
localWorkspacePrefix:String, |
|
|
|
nowVersion:Boolean, |
|
|
|
// selectedVersion:Boolean, |
|
|
|
active:Boolean, |
|
|
|
// flagcolor: { |
|
|
|
// type:String, |
|
|
|
// default:'#7850FF' |
|
|
|
@@ -144,8 +128,10 @@ export default { |
|
|
|
// ], |
|
|
|
// selectedColor:'#7850FF', |
|
|
|
// toolboxShow:false, |
|
|
|
selectedVersion:false, |
|
|
|
// selectedVersion:false, |
|
|
|
accountName:'', |
|
|
|
infoPanelActive: false, |
|
|
|
actionPanelActive: true, |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
@@ -191,9 +177,10 @@ export default { |
|
|
|
}, |
|
|
|
//选择某一版本 |
|
|
|
clickVersion(){ |
|
|
|
if(!this.nowVersion){ |
|
|
|
this.selectedVersion = !this.selectedVersion; |
|
|
|
} |
|
|
|
this.$emit('select', this.commitInfo); |
|
|
|
// if(!this.nowVersion){ |
|
|
|
// this.selectedVersion = !this.selectedVersion; |
|
|
|
// } |
|
|
|
}, |
|
|
|
// 编辑备注 |
|
|
|
editRemarks() { |
|
|
|
@@ -281,7 +268,7 @@ export default { |
|
|
|
background-color: rgba(252, 252, 252, 1); |
|
|
|
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), |
|
|
|
0px 1px 3px 0px rgba(0, 0, 0, 0.1); |
|
|
|
padding: 8px 0; |
|
|
|
padding: 8px 0 0; |
|
|
|
margin: 0 auto; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
@@ -297,32 +284,103 @@ export default { |
|
|
|
.content{ |
|
|
|
position: relative; |
|
|
|
&_header{ |
|
|
|
padding: 9px 0; |
|
|
|
padding: 0; |
|
|
|
padding-left: 24px; |
|
|
|
display: flex; |
|
|
|
.version_title { |
|
|
|
line-height: 28px; |
|
|
|
font-size: 14px; |
|
|
|
padding-left: 14px; |
|
|
|
font-size: 18px; |
|
|
|
line-height: 28px; |
|
|
|
margin-bottom: 8px; |
|
|
|
.icon-zhiding { |
|
|
|
position: absolute; |
|
|
|
right: 23px; |
|
|
|
top: 0px; |
|
|
|
color: #7850FF; |
|
|
|
} |
|
|
|
.title { |
|
|
|
color: rgba(50, 50, 60, 100); |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
&_remark { |
|
|
|
padding: 7px 16px; |
|
|
|
&_inner { |
|
|
|
background-color: rgba(#000, 0.05); |
|
|
|
border-radius: 4px; |
|
|
|
padding: 9px 8px; |
|
|
|
> div:first-child { |
|
|
|
font-size: 12px; |
|
|
|
color: rgba(#000, 0.56); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
&_icon{ |
|
|
|
border-top: 0.5px solid rgba(0, 0, 0, 0.2); |
|
|
|
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2); |
|
|
|
display: flex; |
|
|
|
padding: 8px 24px; |
|
|
|
p { |
|
|
|
line-height: 28px; |
|
|
|
&_info { |
|
|
|
padding: 12px 24px; |
|
|
|
&_detail { |
|
|
|
margin-top: 14px; |
|
|
|
font-size: 12px; |
|
|
|
line-height: 16px; |
|
|
|
overflow: hidden; |
|
|
|
&_item { |
|
|
|
margin-bottom: 5px; |
|
|
|
> span { |
|
|
|
display: inline-block; |
|
|
|
vertical-align: top; |
|
|
|
&:first-child { |
|
|
|
width: 60px; |
|
|
|
color: rgba(#000, 0.56); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.switch_btn{ |
|
|
|
flex: 1; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&_action { |
|
|
|
padding: 12px 24px; |
|
|
|
&_list { |
|
|
|
margin-top: 12px; |
|
|
|
overflow: hidden; |
|
|
|
&_item { |
|
|
|
margin-bottom: 8px; |
|
|
|
&.milestone_set { |
|
|
|
display: flex; |
|
|
|
height: 44px; |
|
|
|
padding-top: 7px; |
|
|
|
p { |
|
|
|
line-height: 28px; |
|
|
|
} |
|
|
|
.switch_btn{ |
|
|
|
flex: 1; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
} |
|
|
|
&.button { |
|
|
|
position: relative; |
|
|
|
height: 32px; |
|
|
|
line-height: 32px; |
|
|
|
border: .5px solid rgba(#111111, 0.25); |
|
|
|
border-radius: 8px; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
cursor: pointer; |
|
|
|
color: #32323C; |
|
|
|
&:hover{ |
|
|
|
background-color: #7850FF; |
|
|
|
color: #fff; |
|
|
|
transition: all 0.3s linear; |
|
|
|
.icon-zhiding { color: #fff; } |
|
|
|
} |
|
|
|
&:active{ |
|
|
|
background-color: #442BAA; |
|
|
|
.icon-zhiding { color: #fff; } |
|
|
|
} |
|
|
|
.icon-zhiding { |
|
|
|
position: absolute; |
|
|
|
left: 8px; |
|
|
|
transition: color 0.3s linear; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.panel_inactive { |
|
|
|
height: 0; |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.icon_box{ |
|
|
|
@@ -336,138 +394,6 @@ export default { |
|
|
|
height: 28px; |
|
|
|
cursor: pointer; |
|
|
|
background-color: rgba(240, 240, 240, 1); |
|
|
|
|
|
|
|
} |
|
|
|
.version_info{ |
|
|
|
padding: 0 24px 24px 24px; |
|
|
|
.file_name{ |
|
|
|
line-height: 44px; |
|
|
|
font-size: 18px; |
|
|
|
} |
|
|
|
.file_info{ |
|
|
|
>ul { |
|
|
|
color: rgba(0, 0, 0, 0.56); |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
li { |
|
|
|
padding: 4px 0; |
|
|
|
font-size: 11px; |
|
|
|
.left{ |
|
|
|
position: absolute; |
|
|
|
left: 56px; |
|
|
|
color: rgba(50, 50, 60, 100); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.btn_box { |
|
|
|
margin-top: 12px; |
|
|
|
display: flex; |
|
|
|
.btn{ |
|
|
|
border-radius: 8px; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
line-height: 32px; |
|
|
|
font-size: 14px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
background-color: rgba(17, 17, 17, 0.1); |
|
|
|
color: #32323C; |
|
|
|
width: 120px; |
|
|
|
margin-right: 16px; |
|
|
|
} |
|
|
|
.btn:hover{ |
|
|
|
background-color: #7850FF; |
|
|
|
color: #fff; |
|
|
|
transition: all 0.3s linear; |
|
|
|
} |
|
|
|
.btn:active{ |
|
|
|
background-color: #442BAA; |
|
|
|
} |
|
|
|
.edit_btn{ |
|
|
|
background-color: #7850FF; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.edit_btn:hover { |
|
|
|
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1), |
|
|
|
0px 2px 5px 0px rgba(0, 0, 0, 0.16); |
|
|
|
} |
|
|
|
} |
|
|
|
// 备注样式 |
|
|
|
|
|
|
|
.content_remarks{ |
|
|
|
position: relative; |
|
|
|
padding: 0 24px; |
|
|
|
.avactor{ |
|
|
|
width: 38px; |
|
|
|
height: 38px; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: gainsboro; |
|
|
|
margin-right:8px ; |
|
|
|
vertical-align: top; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
.remarks{ |
|
|
|
width: 249px; |
|
|
|
display: inline-block; |
|
|
|
font-size: 13px; |
|
|
|
.remarks_title{ |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
.remarks_content{ |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//我的头像 |
|
|
|
.myavactor { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 24px; |
|
|
|
margin-right: 0px !important; |
|
|
|
} |
|
|
|
//我的备注 |
|
|
|
.myremarks{ |
|
|
|
transform: translateY(4px); |
|
|
|
border-radius: 4px; |
|
|
|
width: 265px; |
|
|
|
padding: 4px 8px; |
|
|
|
font-size: 13px; |
|
|
|
background-color: #F6F6F6; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-bottom: 12px; |
|
|
|
>div { |
|
|
|
text-align: justify; |
|
|
|
line-height: 22px; |
|
|
|
} |
|
|
|
} |
|
|
|
.myremarks_content{ |
|
|
|
overflow:hidden; |
|
|
|
text-overflow:ellipsis; |
|
|
|
display:-webkit-box; |
|
|
|
-webkit-box-orient:vertical; |
|
|
|
-webkit-line-clamp:2; |
|
|
|
} |
|
|
|
// |
|
|
|
.set_position{ |
|
|
|
margin-bottom: 27px !important; |
|
|
|
|
|
|
|
} |
|
|
|
//显示完整备注 |
|
|
|
.show_all{ |
|
|
|
font-size: 12px; |
|
|
|
color: #7850FF; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.collapse { |
|
|
|
transform: rotate(180deg); |
|
|
|
} |
|
|
|
//简略版 样式 |
|
|
|
.version_item_brief{ |
|
|
|
@@ -491,6 +417,15 @@ export default { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.icon_box { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
line-height: 20px; |
|
|
|
.icon-lichengbei-qizhi { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.remarks_brief{ |
|
|
|
padding: 8px 0; |
|
|
|
display: flex; |
|
|
|
@@ -517,19 +452,6 @@ export default { |
|
|
|
background-color: rgba(50, 50, 60, 0.1); |
|
|
|
transition: all 0.3s linear; |
|
|
|
} |
|
|
|
.create_copy { |
|
|
|
padding: 0 24px; |
|
|
|
cursor: pointer; |
|
|
|
&_content { |
|
|
|
display: flex; |
|
|
|
color: rgba(120, 80, 255, 100); |
|
|
|
font-size: 13px; |
|
|
|
p{ |
|
|
|
line-height: 20px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-icon-close::before{ |
|
|
|
content: "\e6db" !important; |
|
|
|
@@ -539,17 +461,11 @@ export default { |
|
|
|
transition: all 0.3s linear; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 触发输入框添加边框 |
|
|
|
.set-border{ |
|
|
|
border: 1px solid rgba(120, 80, 255, 1); |
|
|
|
} |
|
|
|
|
|
|
|
.switch_btn{ |
|
|
|
.el-switch__core:after{ |
|
|
|
.el-switch__core:after{ |
|
|
|
width: 26px !important; |
|
|
|
height: 26px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.icon-zhiding { |
|
|
|
@@ -557,5 +473,34 @@ export default { |
|
|
|
color : #D8D8D8; |
|
|
|
} |
|
|
|
|
|
|
|
.split { |
|
|
|
border-top: 0.5px solid rgba(0, 0, 0, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.option { |
|
|
|
font-size: 14px; |
|
|
|
line-height: 20px; |
|
|
|
padding-left: 8px; |
|
|
|
cursor: pointer; |
|
|
|
&_icon { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
vertical-align: top; |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border: 6px solid transparent; |
|
|
|
border-top-color: #999B9D; |
|
|
|
top: 4px + 3px; |
|
|
|
transition: transform 0.1s linear; |
|
|
|
transform-origin: 50% 25%; |
|
|
|
transform: rotate(-90deg); |
|
|
|
&.option_active { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
} |
|
|
|
&_label { |
|
|
|
display: inline-block; |
|
|
|
margin-left: 18px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
