From 3f0cba220f900b9f88f5d55ffa3bad97cae308ae Mon Sep 17 00:00:00 2001 From: zhengzhou Date: Thu, 4 Mar 2021 15:38:32 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8E=86=E5=8F=B2=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E7=AE=A1=E7=90=86=E7=9A=84=E5=A4=AE=E8=A7=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../workspace/components/file-milestone.vue | 13 +- .../workspace/components/version-item.vue | 439 ++++++++---------- 2 files changed, 204 insertions(+), 248 deletions(-) diff --git a/src/views/main_web/workspace/components/file-milestone.vue b/src/views/main_web/workspace/components/file-milestone.vue index 9d1d9cf6..ded4a430 100644 --- a/src/views/main_web/workspace/components/file-milestone.vue +++ b/src/views/main_web/workspace/components/file-milestone.vue @@ -53,6 +53,8 @@ :commitInfo="fileNowVersion" @makeCopy="onMakeCopy" @openFile="openFile" + @select="selectVersion" + :active="activeVersion === fileNowVersion" :file="file" > @@ -63,6 +65,8 @@ v-for="commitInfo in fileOtherVersion" :key ="commitInfo.currentHash" :commitInfo="commitInfo" + @select="selectVersion" + :active="activeVersion === commitInfo" :fileId ="file.id" :file="file" @makeCopy="onMakeCopy" @@ -108,8 +112,11 @@ -
- +
+
-

当前协同-版本{{commitInfo.version}}

+

{{`${nowVersion ? '当前协同 - ' : ''}版本${commitInfo.version}`}}

- -
-
+
+
+
{{showAccountName}}的备注
+
{{commitInfo.note ? commitInfo.note : "无备注" }}
+
+
+
+
+ +
更多信息
+
+
+
提交人：{{showAccountName}}
+
基于版本：{{commitInfo.creator}} 提交的版本{{commitInfo.version}}
+
协同于：{{showTime}}
+
+
+
+
+ +
更多操作
+
+
+
+
-
-

里程碑

-
+
+

里程碑

+
+ v-model="commitInfo.milestone" + @change="setMileStoneClick" + active-color="#7850FF" + inactive-color="#fff"> +
-
-
-
文件名
-
-
    -
  • 提交人：{{showAccountName}}
    • -
  • 基于版本：{{commitInfo.creator}} 提交的版本{{commitInfo.version}}
    • -
  • 协同于：{{showTime}}
    • -
-
-
- 查看版本 -
-
- 继续编辑 -
-
- - 设为协同版本 -
-
-
-
-
-
- + +
+ 查看版本
-
-
- 王静的备注 -
- -
-
- {{commitInfo.note ? commitInfo.note : "无备注" }} -
-
+
+ 继续编辑
- -
- +
+ 设为协同版本
-
- -
-
- -

从该版本创建副本

+
+ 从该版本创建副本
-
+
+
-
+
-

版本{{commitInfo.version}}

-

{{showTime}}

+
+

版本{{commitInfo.version}}

+

{{showTime}}

-
-
{{commitInfo.note ? commitInfo.note: "无备注"}}
-
- -
+
{{commitInfo.note ? commitInfo.note: "无备注"}}
+
@@ -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; + } +}