feat: 历史记录页面修改

src/component/Detail/historyDetail/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <a-modal
+    class="hsitory_detail_modal_component"
+    v-model:visible="hsitoryDetailShow"
+    :footer="null"
+    width="80%"
+    :maskClosable="false"
+    :keyboard="false"
+    :centered="true"
+    :closable="false"
+  >
+    <!-- <template #closeIcon>
+      <div class="close_icon" @click.stop="changeDetailShow()">
+        <span class="icon iconfont icon-guanbi"></span>
+      </div>
+    </template> -->
+    <template #title>
+      <div class="custom_title">
+        <div class="title_text">{{ collectionName }}</div>
+        <div class="close_icon" @click.stop="changeDetailShow()">
+          <span class="icon iconfont icon-guanbi"></span>
+        </div>
+      </div>
+    </template>
+    <div class="history_detail_content scroll_style">
+      <div class="history_img_block" v-for="img in groupDetails" :key="img">
+        <div class="history_img_item">
+          <img class="element_img" :src="img.url" />
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    groupDetails: {
+      default: {}
+    },
+    collectionName: {
+      default: ''
+    }
+  },
+  setup() {},
+  data() {
+    return {
+      hsitoryDetailShow: false
+    }
+  },
+  methods: {
+    changeDetailShow() {
+      this.hsitoryDetailShow = !this.hsitoryDetailShow
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.hsitory_detail_modal_component {
+  // .ant-modal-close {
+  //   width: 3.6rem;
+  //   height: 3.6rem;
+  //   position: absolute;
+  //   top: -1.8rem;
+  //   right: -1.8rem;
+  // }
+
+  .custom_title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .title_text {
+    font-size: 1.6rem;
+  }
+
+  .ant-modal-header {
+    background: #f7f7f7;
+  }
+
+  .ant-modal-body {
+    background: #f2f3fb;
+    height: 80vh;
+    min-height: 72rem;
+    overflow-y: hidden;
+    padding: 0;
+  }
+
+  .close_icon {
+    width: 3.6rem;
+    height: 3.6rem;
+    background: #000000;
+    border-radius: 50%;
+    line-height: 3.6rem;
+    text-align: center;
+    cursor: pointer;
+
+    .icon-guanbi {
+      font-size: 2rem;
+      color: #ffffff;
+    }
+  }
+
+  .history_detail_content {
+    padding: 2.6rem 2rem 2.6rem 3.7rem;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    background: #ffffff;
+
+    .history_img_block {
+      width: 16.5rem;
+      height: 16.5rem;
+      border: 0.1rem solid #343579;
+      margin: 0 1.7rem 1.7rem 0;
+      display: inline-block;
+
+      .history_img_item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+
+      .element_img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+}
+</style>

src/component/LibraryPage/searchLabel.vue

@@ -14,27 +14,29 @@
 			<div class="rename_form_content">
 				<input class="rename_form_input" :placeholder="$t('LibraryPage.inputContent3')" v-model="newPicName" @keydown.enter="confrimRename()">
 			</div>
-			<div class="collection_rename_title">{{$t('LibraryPage.Tag')}}</div>
-			<el-cascader 
-				:options="options" 
-				:filterable="true" 
-				v-model="value.editLabelValue"
-				:collapse-tags="true" 
-				:show-all-levels="false" 
-				:placeholder="$t('LibraryPage.Select')"
-				:clearable="true"
-				:max-collapse-tags=6
-				:props="props" 
-				ref="cascader1"
-				:collapse-tags-tooltip="true"
-				@visible-change="dropdownVisibleChange1"
-			>
-			<template #empty>
-					<div>
-						{{$t('LibraryPage.Select')}}
-					</div>
-				</template>
-			</el-cascader>
+			<template v-if="!isHistory">
+				<div class="collection_rename_title">{{$t('LibraryPage.Tag')}}</div>
+				<el-cascader 
+					:options="options" 
+					:filterable="true" 
+					v-model="value.editLabelValue"
+					:collapse-tags="true" 
+					:show-all-levels="false" 
+					:placeholder="$t('LibraryPage.Select')"
+					:clearable="true"
+					:max-collapse-tags=6
+					:props="props" 
+					ref="cascader1"
+					:collapse-tags-tooltip="true"
+					@visible-change="dropdownVisibleChange1"
+				>
+				<template #empty>
+						<div>
+							{{$t('LibraryPage.Select')}}
+						</div>
+					</template>
+				</el-cascader>
+			</template>
 			<div v-show="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="collection_rename_title">{{$t('LibraryPage.Category')}}</div>
 			<!-- <div v-show="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="collection_rename_title">{{$t('LibraryPage.Category')}}</div> -->
 			<div v-show="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="rename_form_content">
@@ -90,6 +92,12 @@ import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
 import { ElCascader } from 'element-plus'
 
 export default defineComponent({
+	props:{
+		isHistory:{
+			type:Boolean,
+			default:false
+		},
+	},
 	components:{
         VueCropper,
 		ElCascader,

src/lang/cn.ts

@@ -350,8 +350,8 @@ export default {
     CollectionsName: "名字",
     source: "来源",
     UptateTime: "修改时间",
-    SketchCounts: "项目名字",
-    Operations: "Operations",
+    SketchCounts: "草图数量",
+    Operations: "操作",
     jsContent1: "删除成功",
     jsContent2: "您确定要删除这个收藏吗？",
     jsContent3: "修改成功",

src/lang/en.ts

@@ -352,7 +352,7 @@ export default {
     CollectionsName: "Collections Name",
     source: "Source",
     UptateTime: "Uptate Time",
-    SketchCounts: "Project Name",
+    SketchCounts: "SketchCounts",
     Operations: "Operations",
     jsContent1: "Deleted successfully",
     jsContent2: "Do you really want to delete this collection? ",

src/tool/listData.js

@@ -360,6 +360,12 @@ const openTypeList = (t)=>{
 			Earlierlist:[
 			],
 		},
+		history111:{
+			icon:'fi-br-time-past',
+			label:t('HistoryPage.History'),
+			value:'history111',
+			router:'/home/history111'
+		},
 		gallery:{
 			icon:'fi-rr-gallery',
 			label:t('works.WORKS'),

src/views/HomeMain.vue

@@ -18,17 +18,17 @@
 					<p>{{$t('Header.NewProject')}}</p>
 				</div>
 				<div class="navList ">
-					<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value,history:item.value == 'history'}">
+					<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value,history:item.value == 'history','show-history' : showHistory && item.value === 'history111','isHistory' : item.value === 'history111'}">
 						<div class="titleBox" @click="setOpenType(item.value,item.list)">
 							<div class="left">
 								<i :class="['fi',item.icon]"></i>
 								<span>{{item.label}}</span>
 							</div>
-							<div class="right">
+							<div class="right" v-if="item.value !== 'history111' ">
 								<i class="fi fi-br-angle-small-down"></i>
 							</div>
 						</div>
-						<div class="detailBox" v-show="openType">
+						<div class="detailBox" v-if="item.value != 'history111'" v-show="openType">
 							<div class="detail" v-if="item.value != 'history' && item.value != 'cloud'" v-show="openType == item.value">
 								<div class="detailItem" v-for="childItem in item.list" @click="setRouter(item,childItem)" :class="{active:openTypeChild == childItem.value}">
 									<i v-show="childItem.icon" :class="['fi',childItem.icon]"></i>
@@ -339,7 +339,8 @@ export default defineComponent({
 				isWithinAWeek:false,
 				isEarlier:false,
 			},
-			bathGenerationList:["poseTransfer","SERIES_DESIGN","toProduct","relight"]
+			bathGenerationList: ["poseTransfer", "SERIES_DESIGN", "toProduct", "relight"],
+			showHistory:false
 		})
 		watch(()=>homeMainData.userDetailLanguage,(newVal)=>{
 			if(locale.value == newVal || !newVal)return
@@ -355,6 +356,8 @@ export default defineComponent({
 				}
 			}
 		})
+
+		
 		// watch(()=>locale.value,(newVal,oldVal)=>{
 		// 	if(newVal == oldVal)return
 		// 	console.log(newVal , oldVal)
@@ -409,6 +412,20 @@ export default defineComponent({
 			},
 			{ immediate: true } // 立即触发一次以处理初始参数
 		);
+
+		// 监听路由,当路由地址为/home/history111时homeMainData.showHistory为true,改变左侧菜单颜色
+		watch(() => route.path, () => {
+			if(route.path == '/home/history111'){
+				homeMainData.showHistory = true
+			}else{
+				homeMainData.showHistory = false
+			}
+		},
+		{ immediate: true }
+		)
+
+
+
 		// watch(()=>homeMainData.openTypeList,()=>{
 		// 	homeMainData.historyData.page = 1
 		// })
@@ -539,16 +556,15 @@ export default defineComponent({
 			let imgParent = document.querySelector('.homeMain_max .detail .material_content_list_loding .historyPage_loading')
 			if(Observer?.unobserve)Observer.unobserve(imgParent);
 		})
-		const setOpenType = (type,list)=>{
+		const setOpenType = (type, list) => {
+			
 			if(homeMainData.openType == type){
 				homeMainData.openType = ''
 			}else {
 				homeMainData.openType = type
-				// if(type == 'history'){
-				// 	if(list.length == 0){
-						
-				// 	}
-				// }
+				if (type === 'history111') {
+					router.push('/home/history111')
+				}
 			}
 		}
 		let Observer = null
@@ -1120,6 +1136,10 @@ export default defineComponent({
 				// padding: 1.2rem;
 				max-height: 5rem;
 				border-radius: 2rem;
+				&.show-history{
+					background: #fff;
+					border-radius: 0.8rem;
+				}
 				&.active{
 					> .detailBox{
 						flex: 1;
@@ -1368,6 +1388,11 @@ export default defineComponent({
 					overflow: hidden;
 					max-height: 100%;
 					background: #00000008;
+					&.isHistory{
+						background: #fff;
+						border-radius: 0.8rem;
+						max-height: 5rem;
+					}
 					> .titleBox{
 						padding: 0;
 						margin-bottom: 1.6rem;
@@ -1379,6 +1404,7 @@ export default defineComponent({
 						}
 					}
 				}
+				
 				&.language{
 					> .titleBox{
 						padding: .8rem;