修复页面bug

src/component/LibraryPage/brandDetail.vue

@@ -41,10 +41,33 @@
 					<i v-else class="fi fi-br-check" @click="editChek('brandSlogan')"></i>
 				</div>
 			</div>
-			<div style="flex:1;text-align: right;" v-show="fall?.list?.length > 0">
-				<div class="gallery_btn" v-show="schedule.num == 1||(schedule.num == 0 && !schedule.state)" @click="compute">{{$t('brandDNA.Compute')}}</div>
-				<div v-show="schedule.num != 1">
-					<a-progress  style="width:20rem;" :percent="schedule.num * 100" size="small" :showInfo="false" />
+			<div class="compute" style="flex:1;text-align: right;" v-show="fall?.list?.length > 0">
+				<!-- <div @click="setProgress(50)">123123123</div> -->
+				<div class="gallery_btn" @click="compute" :class="{'loading':!(schedule.num == 1||(schedule.num == 0 && !schedule.state))}">
+					{{$t('brandDNA.Compute')}}
+					<svg width="15" height="15" viewBox="0 0 100 100" v-show="!(schedule.num == 1||(schedule.num == 0 && !schedule.state))">
+                    <circle
+                        cx="50"
+                        cy="50"
+                        r="40"  
+                        fill="none"
+                        stroke="#1a1a1a"
+                        stroke-width="15"
+                    />
+                    
+                    <circle
+                        cx="50"
+                        cy="50"
+                        r="40"  
+                        fill="none"
+                        stroke="#fff"
+                        stroke-width="15" 
+                        stroke-linecap="round"
+                        :stroke-dasharray="circumference"
+                        :stroke-dashoffset="dashOffset"
+                        transform="rotate(-90 50 50)"
+                    />
+                </svg>
 				</div>
 			</div>
 		</div>
@@ -335,7 +358,9 @@ export default defineComponent({
 			Https.axiosPost(Https.httpUrls.getInitializeProgress,{brandId:data.detail.id}).then((res:any)=>{
 				data.schedule.num = res.percent
 				data.schedule.state = res.analyzed
-				if(res.percent == 1 || !res.analyzed){return clearTimeout(data.getProgressTime)}
+				if(res.percent == 1 || !res.analyzed){
+					return clearTimeout(data.getProgressTime)
+				}
 				data.getProgressTime = setTimeout(()=>{
 					getProgress()
 				},5000)
@@ -406,8 +431,27 @@ export default defineComponent({
 				data.selectImgList.push(item.id)
 			}
 		}
+		const progress = ref(50);
+		const radius = 40;        // 半径调整
+		const strokeWidth = 15;   // 描边加粗以便在小尺寸下可见
+		const circumference = computed(() => {
+			return 2 * Math.PI * radius;
+		});
+		const dashOffset = computed(() => {
+			const progressDecimal = data.schedule.num / 100;
+			return circumference.value * (1 - progressDecimal);
+		});
+		const adjustProgress = (amount) => {
+			data.schedule.num = Math.min(Math.max(data.schedule.num + amount, 0), 100);
+		};
+		
+		// 设置特定进度值
+		const setProgress = (value) => {
+			data.schedule.num = value;
+		};
 		onBeforeUnmount(()=>{
 			clearInterval(data.getProgressTime)	
+			clearTimeout(data.getProgressTime)
 		})
 		return{
 			...toRefs(dataDom),
@@ -425,6 +469,9 @@ export default defineComponent({
 			deleteBatchPic,
 			deleteSinglePic,
 			selectImg,
+			circumference,
+			dashOffset,
+			setProgress,
 		}
 	},
 	directives:{
@@ -463,6 +510,25 @@ export default defineComponent({
 			border-bottom: 1px solid #ccc;
 			padding-bottom: 1rem;
 			margin-bottom: 1rem;
+			.compute{
+				> div{
+					position: relative;
+					padding-right: 2rem;
+				}
+				.gallery_btn{
+					&.loading{
+						pointer-events: none;
+						color: #5F5F5F;
+					}
+				}
+				svg{
+					transform: translateY(2.5px);
+					circle{
+						transition: all .3s;
+					}
+				}
+			}
+			
 			> .logo{
 				position: relative;
 				margin-right: 3rem;