From 68a6be6468cf7eb9b1379cf92c311d4855b46d05 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Wed, 18 Mar 2026 10:59:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=A4=B4=E5=83=8F=20?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=8D=A1=E7=89=87=E5=8A=A0=E5=85=A5=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/flow-canvas.ts                        | 92 ++++++++++++++++++-
 src/api/upload.ts                             |  3 +-
 src/api/user.ts                               | 24 +++++
 .../components/nodes/cards/color-palette.vue  | 13 ++-
 .../components/nodes/cards/index.vue          | 11 ++-
 .../nodes/cards/scene-composition.vue         | 10 +-
 .../components/nodes/cards/surface-edit.vue   | 22 ++++-
 .../components/nodes/cards/to-3d-model.vue    | 22 +++--
 .../components/nodes/cards/to-real-style.vue  |  4 +-
 .../components/tools/upload-file.vue          |  8 +-
 src/components/Canvas/FlowCanvas/index.vue    |  4 +-
 src/components/MyInfo.vue                     |  3 +-
 src/lang/en.ts                                |  1 +
 src/lang/zh-cn.ts                             |  3 +-
 src/stores/userInfo.ts                        |  7 +-
 src/views/home/setting/General.vue            | 49 ++++++++--
 16 files changed, 235 insertions(+), 41 deletions(-)

diff --git a/src/api/flow-canvas.ts b/src/api/flow-canvas.ts
index b499d31..13ce0fe 100644
--- a/src/api/flow-canvas.ts
+++ b/src/api/flow-canvas.ts
@@ -9,10 +9,11 @@ import request from '@/utils/request'
 export interface getSketchFlowCanvasData {
 	id: string
 }
-export const getSketchFlowCanvas = (data:getSketchFlowCanvasData) => {
+export const getSketchFlowCanvas = (data:getSketchFlowCanvasData,loading?:boolean) => {
 	return request({
 		url: `/api/canvas/detail/${data.id}`,
 		method: 'get',
+		loading
 	})
 }
 
@@ -27,14 +28,15 @@ export interface saveSketchFlowCanvasData {
 	id?: string
 	canvasData: string
 }
-export const putSketchFlowCanvas = (data:saveSketchFlowCanvasData) => {
+export const putSketchFlowCanvas = (data:saveSketchFlowCanvasData,loading?:boolean) => {
 	return request({
 		url: `/api/canvas/detail/${data.id}`,
 		method: 'put',
 		headers: {
 			'Content-Type': 'application/json'
 		},
-		data: data.canvasData
+		data: data.canvasData,
+		loading
 	})
 }
 
@@ -112,6 +114,7 @@ export const toRealStyleApi = (data:toRealStyleData) => {
  * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
  * @param data.variantCount 生成图片的数量
  * @param data.colors 生成上色的图片颜色列表
+ * @param data.mode 选择的模型
  * @returns 线稿图上色
  */
 export interface toColorPaletteData {
@@ -119,6 +122,7 @@ export interface toColorPaletteData {
 	imageUrl?: string
 	variantCount?: string
 	colors?: Array<string>
+	mode?: string
 }
 export const toColorPaletteApi = (data:toColorPaletteData) => {
 	return request({
@@ -128,7 +132,8 @@ export const toColorPaletteApi = (data:toColorPaletteData) => {
 			sketchId: data.sketchId,
 			imageUrl: data.imageUrl,
 			variantCount: data.variantCount,
-			colors: data.colors
+			colors: data.colors,
+			mode: data.mode,
 		}
 	})
 }
@@ -140,6 +145,7 @@ export const toColorPaletteApi = (data:toColorPaletteData) => {
  * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
  * @param data.styles 生成上色的图片颜色列表
  * @param data.userPrompt 生成上色的图片颜色列表
+ * @param data.mode 选择的模型
  * @returns 场景构图
  */
 export interface toSceneCompositionData {
@@ -147,6 +153,7 @@ export interface toSceneCompositionData {
 	imageUrl?: string
 	userPrompt?: string
 	styles?: Array<string>
+	mode?: string
 }
 export const toSceneCompositionApi = (data:toSceneCompositionData) => {
 	return request({
@@ -156,8 +163,83 @@ export const toSceneCompositionApi = (data:toSceneCompositionData) => {
 			sketchId: data.sketchId,
 			imageUrl: data.imageUrl,
 			userPrompt: data.userPrompt,
-			styles: data.styles
+			styles: data.styles,
+			mode: data.mode,
 		}
 	})
 }
 
+/**
+ * 线稿贴印花
+ * @param data 线稿贴印花的参数
+ * @param data.sketchId sketch id
+ * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
+ * @param data.styles 生成上色的图片颜色列表
+ * @param data.userPrompt 生成上色的图片颜色列表
+ * @param data.mode 选择的模型
+ * @returns 线稿贴印花
+ */
+export interface sketchAddPrintData {
+	sketchId?: string
+	imageUrl?: string
+	surFaceUrl?: string
+	userPrompt?: string
+	mode?: string
+}
+export const sketchAddPrintApi = (data:sketchAddPrintData) => {
+	return request({
+		url: `/api/image/surface-edit`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			imageUrl: data.imageUrl,
+			userPrompt: data.userPrompt,
+			surFaceUrl: data.surFaceUrl,
+			mode: data.mode,
+		}
+	})
+}
+
+/**
+ * 图片转3d
+ * @param data 图片转3d的参数
+ * @param data.sketchId sketch id
+ * @param data.imageUrls 进行生成的图片。minio地址和正常地址都可以
+ * @returns 图片转3d
+ */
+export interface sketchToThreeData {
+	sketchId?: string
+	imageUrls?: Array<string>
+}
+export const sketchToThreeApi = (data:sketchToThreeData) => {
+	return request({
+		url: `/api/image/img-to-3d`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			imageUrls: data.imageUrls,
+		}
+	})
+}
+
+/**
+ * 3d模型转3视图
+ * @param data 3d模型转3视图的参数
+ * @param data.sketchId sketch id
+ * @param data.glbUrl 生成的3d模型地址
+ * @returns 3d模型转3视图
+ */
+export interface threeToThreeViewsData {
+	sketchId?: string
+	glbUrl?: string
+}
+export const threeToThreeViewsApi = (data:threeToThreeViewsData) => {
+	return request({
+		url: `/api/image/glb-to-3views`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			glbUrl: data.glbUrl,
+		}
+	})
+}
diff --git a/src/api/upload.ts b/src/api/upload.ts
index 9cd07a6..182c9df 100644
--- a/src/api/upload.ts
+++ b/src/api/upload.ts
@@ -1,9 +1,10 @@
 import request from '@/utils/request'
 
-export const uploadImage = (data: FormData) => {
+export const uploadImage = (data: FormData, loading = false) => {
 	return request({
 		url: '/api/file/upload',
 		method: 'POST',
+		loading,
 		data
 	})
 }
diff --git a/src/api/user.ts b/src/api/user.ts
index e2e3894..d96a8fc 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -109,3 +109,27 @@ export const UpdateUserProfile = (data, loading = false) => {
 	})
 }
 
+/**
+ * 上传头像
+ * @param data 上传头像的参数
+ * @param data.avatar 头像文件
+ * @returns 上传头像成功的响应
+*/
+export const UpdateUserAvatar = (data) => {
+	return request({
+		url: '/api/user/avatar',
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 获取上传头像次数
+*/
+export const getAvatarLimit = () => {
+	return request({
+		url: '/api/user/avatar/limit',
+		method: 'get',
+	})
+}
+
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/color-palette.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/color-palette.vue
index 19210ae..bb88ce4 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/color-palette.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/color-palette.vue
@@ -1,6 +1,8 @@
 <template>
 	<!-- 颜色调色板 -->
 	<div class="color-palette">
+		<p class="label">Mode</p>
+		<my-select v-model="data.mode" :list="modeList" />
 		<p class="label">Choose Color</p>
 		<div class="color-list">
 			<div
@@ -24,7 +26,8 @@
 <script setup lang="ts">
 	import { reactive, onMounted, ref } from 'vue'
 	const data = reactive({
-		colors: []
+		colors: [],
+		mode: 'Advanced',
 	})
 	const emit = defineEmits(['update-data'])
 	const maxColor = 5
@@ -41,11 +44,15 @@
 		const target = e.target as HTMLInputElement
 		data.colors.push(target.value)
 	}
-
+	const modeList = ref([
+		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Normal', label: 'Normal' }
+	])
 	const getApiData = ()=>{
 		return {
 			variantCount: '2',
-			colors: data.colors
+			colors: data.colors,
+			mode: data.mode,
 		}
 	}
 
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
index 01f62da..adf0852 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
@@ -36,7 +36,7 @@
 	import To3View from './to-3view.vue'
 	import To3DModel from './to-3d-model.vue'
 
-	import { toRealStyleApi, toColorPaletteApi, toSceneCompositionApi } from '@/api/flow-canvas'
+	import { toRealStyleApi, toColorPaletteApi, toSceneCompositionApi, sketchAddPrintApi, sketchToThreeApi, threeToThreeViewsApi } from '@/api/flow-canvas'
 
 	// import ToVideo from './to-video.vue'
 	// import AddPrint from './add-print.vue'
@@ -62,6 +62,7 @@
 			type: NODE_DATATYPE.SURFACE_EDIT,
 			title: 'Surface Edit',
 			component: SurfaceEdit,
+			api: sketchAddPrintApi
 		},
 		{
 			tier: NODE_DATATIER.SCENE_COMPOSITION,
@@ -81,13 +82,15 @@
 			tier: NODE_DATATIER.TO_3D_MODEL,
 			type: NODE_DATATYPE.TO_3D_MODEL,
 			title: 'To 3D Model',
-			component: To3DModel
+			component: To3DModel,
+			api:sketchToThreeApi
 		},
 		{
 			tier: NODE_DATATIER.TO_3VIEW,
 			type: NODE_DATATYPE.TO_3VIEW,
 			title: 'To 3-View',
-			component: To3View
+			component: To3View,
+			api:threeToThreeViewsApi
 		}
 	]
 	const nodeManager = inject('nodeManager') as any
@@ -133,7 +136,7 @@
 			...data,
 		}
 		const taskList = await currentComponent.value.api(apiData).then((rv)=>{
-			return rv
+			return [rv]
 		}) || []
 		// const taskList = [{taskId:'123'}]
 		// if (!subordNode) {
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/scene-composition.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/scene-composition.vue
index 66bfcbd..8dcb9b0 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/scene-composition.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/scene-composition.vue
@@ -3,6 +3,8 @@
 	<div class="scene-composition">
 		<p class="label">Prompt</p>
 		<my-textarea v-model="data.prompt" />
+		<p class="label">Mode</p>
+		<my-select v-model="data.mode" :list="modeList" />
 		<p class="label">Choose Style</p>
 		<div class="style-list">
 			<div
@@ -47,8 +49,13 @@
 	])
 	const data = reactive({
 		prompt: '',
-		styles: ['Colorful', 'Modernist']
+		styles: ['Colorful', 'Modernist'],
+		mode: 'Advanced',
 	})
+	const modeList = ref([
+		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Normal', label: 'Normal' }
+	])
 	const onClickStyle = (value: string) => {
 		if (data.styles.includes(value)) {
 			data.styles = data.styles.filter((v) => v !== value)
@@ -60,6 +67,7 @@
 		return {
 			styles: data.styles,
 			userPrompt: data.prompt,
+			mode: data.mode,
 		}
 	}
 	defineExpose({ data, getApiData })
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/surface-edit.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/surface-edit.vue
index f0b24b9..cd238ee 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/surface-edit.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/surface-edit.vue
@@ -3,21 +3,35 @@
 	<div class="surface-edit">
 		<p class="label">Image</p>
 		<upload-file v-model="data.file" />
+		<p class="label">Mode</p>
+		<my-select v-model="data.mode" :list="modeList" />
 		<p class="label">Prompt</p>
 		<my-textarea v-model="data.prompt" />
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { reactive, onMounted } from 'vue'
+	import { reactive, ref, onMounted } from 'vue'
 	import myTextarea from '../../tools/my-textarea.vue'
 	import uploadFile from '../../tools/upload-file.vue'
+	import mySelect from '../../tools/my-select.vue'
 	const data = reactive({
 		prompt: '',
-		file: null
+		file: null,
+		mode: 'Advanced',
 	})
-
-	defineExpose({ data })
+	const modeList = ref([
+		{ value: 'Advanced', label: 'Advanced' },
+		{ value: 'Normal', label: 'Normal' }
+	])
+	const getApiData = ()=>{
+		return {
+			mode: data.mode,
+			surFaceUrl: data.file,
+			userPrompt: data.prompt,
+		}
+	}
+	defineExpose({ data,getApiData })
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/to-3d-model.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/to-3d-model.vue
index 27b1deb..98e06de 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/to-3d-model.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/to-3d-model.vue
@@ -3,30 +3,38 @@
 	<div class="to-3d-model">
 		<p class="label">Image</p>
 		<div class="image">
-			<img src="https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__" alt="">
+			<img :src="data.url" alt="">
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { reactive, onMounted } from 'vue'
+	import { reactive, onMounted, useAttrs } from 'vue'
 	import uploadFile from '../../tools/upload-file.vue'
-	const data = reactive({
-		file: null
-	})
+	const attrs = useAttrs()
 
-	defineExpose({ data })
+	const data = reactive({
+		url: attrs.node?.data?.originalImage,
+	})
+	const getApiData = ()=>{
+		return {
+			imageUrls: [data.url],
+		}
+	}
+	defineExpose({ data,getApiData })
 </script>
 
 <style lang="less" scoped>
 	.to-3d-model {
 		> .image {
-			padding: 18px;
+			padding: 6px;
 			border-radius: 10px;
 			background-color: #f0f0f0;
 			>img{
 				width: 100%;
 				height: auto;
+				max-height: 87px;
+				object-fit: contain;
 			}
 		}
 	}
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/to-real-style.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/to-real-style.vue
index 10607f8..2e9d4d2 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/to-real-style.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/to-real-style.vue
@@ -48,13 +48,13 @@
 		}
 	])
 	const modeList = ref([
-		{ value: 'Fast', label: 'Fast' },
+		{ value: 'Advanced', label: 'Advanced' },
 		{ value: 'Normal', label: 'Normal' }
 	])
 	const data = reactive({
 		prompt: '',
 		pixelRatio: '1:1',
-		mode: 'Normal',
+		mode: 'Advanced',
 	})
 
 	const getApiData = ()=>{
diff --git a/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue b/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue
index 740e719..09be9ed 100644
--- a/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue
+++ b/src/components/Canvas/FlowCanvas/components/tools/upload-file.vue
@@ -16,6 +16,7 @@
 
 <script setup lang="ts">
 	import { reactive, computed } from 'vue'
+	import { uploadImage } from '@/api/upload'
 	const emit = defineEmits(['update:modelValue', 'change'])
 	const props = defineProps({
 		modelValue: { type: [File, Object, String, null] },
@@ -44,7 +45,12 @@
 		input.accept = 'image/png, image/jpeg, image/jpg'
 		input.addEventListener('change', (e) => {
 			const file = e.target.files[0]
-			if (file) onChange(file)
+			const formData = new FormData()
+			formData.append('file', file)
+
+			uploadImage(formData).then((res) => {
+				if (res) onChange(res)
+			})
 		})
 		input.click()
 	}
diff --git a/src/components/Canvas/FlowCanvas/index.vue b/src/components/Canvas/FlowCanvas/index.vue
index a0063d3..0f6e912 100644
--- a/src/components/Canvas/FlowCanvas/index.vue
+++ b/src/components/Canvas/FlowCanvas/index.vue
@@ -16,7 +16,7 @@
 	const open = async (options) => {
 		let json = []
 		await new Promise((resolve) => {
-			getSketchFlowCanvas({ id: options.imgId }).then((res:any) => {
+			getSketchFlowCanvas({ id: options.imgId },true).then((res:any) => {
 				if (res) {
 					json = JSON.parse(res)
 				}
@@ -34,7 +34,7 @@
 		await new Promise((resolve) => {
 			putSketchFlowCanvas({ 
 				id: config.value.imgId,
-				canvasData: str }).then(() => {
+				canvasData: str },true).then(() => {
 				resolve(true)
 			}).catch(() => {
 				resolve(true)
diff --git a/src/components/MyInfo.vue b/src/components/MyInfo.vue
index 0d7a345..907f33e 100644
--- a/src/components/MyInfo.vue
+++ b/src/components/MyInfo.vue
@@ -13,7 +13,7 @@
 			popper-style="width:auto; min-width: 22rem; padding: 0.8rem; border-radius: 1.4rem;"
 		>
 			<template #reference>
-				<img class="pic" src="@/assets/images/pic.jpg" />
+				<img class="pic" :src="userInfoStore.state.userInfo?.avatar || '@/assets/images/pic.jpg'" />
 			</template>
 			<div class="menu-box">
 				<div>
@@ -97,6 +97,7 @@
 			width: 4.65rem;
 			height: 4.65rem;
 			border-radius: 50%;
+			object-fit: cover;
 		}
 	}
 	.menu-box {
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 402be6e..cffa83a 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -81,6 +81,7 @@ export default {
 		userAgreement: 'User Agreement',
 		privacyPolicy: 'Privacy Policy',
 		view: 'View',
+		remainingNum: 'Remaining number of times to upload profile picture:',
 	},
 	Country:{
 		unitedStates: 'United States',
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 78ff493..eb50e7f 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -81,7 +81,8 @@ export default {
 		timesPerHour: '{time} 次/小时',
 		userAgreement: '用户协议',
 		privacyPolicy: '隐私政策',
-		view: '查看'
+		view: '查看',
+		remainingNum: '剩余上传头像次数：',
 	},
 	Country: {
 		unitedStates: '美国',
diff --git a/src/stores/userInfo.ts b/src/stores/userInfo.ts
index 08e9b0b..19b4ea1 100644
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@@ -21,6 +21,10 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 		}
 	}
 
+	const updateUserInfo = (data: any) => {
+		state.value.userInfo = { ...state.value.userInfo, ...data }
+	}
+
 	// actions
 	const setUserInfo = (data: any) => {
 		state.value.userInfo = data
@@ -49,6 +53,7 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 		getUserInfo,
 		setToken,
 		setUserInfo,
-		logOut
+		logOut,
+		updateUserInfo
 	}
 })
diff --git a/src/views/home/setting/General.vue b/src/views/home/setting/General.vue
index 93cadb8..a6e754a 100644
--- a/src/views/home/setting/General.vue
+++ b/src/views/home/setting/General.vue
@@ -1,12 +1,19 @@
 <template>
 	<div>
 		<div class="label">{{ $t('Home.userProfile') }}</div>
-		<div class="profile">
-			<img :src="userInfo?.profile" />
-			<span class="edit" @click="onProfileEdit">
-				<svg-icon name="profile-edit" size="11" />
-			</span>
-		</div>
+		<el-tooltip
+			class="box-item"
+			effect="dark"
+			:content="`${$t('Home.remainingNum')} ${remainingNum}`"
+			placement="top"
+		>
+			<div class="profile">
+				<img :src="userInfo?.avatar" />
+				<span class="edit" @click="onProfileEdit">
+					<svg-icon name="profile-edit" size="11" />
+				</span>
+			</div>
+		</el-tooltip>
 	</div>
 	<div>
 		<div class="label">{{ $t('Home.userName') }}</div>
@@ -27,11 +34,13 @@
 </template>
 
 <script setup lang="ts">
-	import { computed, ref, nextTick, inject } from 'vue'
+	import { computed, ref, nextTick, inject, onMounted } from 'vue'
 	import { useRouter } from 'vue-router'
 	import dropdownMenu from '@/components/dropdown-menu.vue'
 	import { useUserInfoStore } from '@/stores'
 	import { useI18n } from 'vue-i18n'
+	import { uploadImage } from '@/api/upload'
+	import { UpdateUserAvatar, getAvatarLimit } from '@/api/user'
 	const router = useRouter()
 	const { locale } = useI18n()
 	const userInfoStore = useUserInfoStore()
@@ -40,6 +49,7 @@
 		{ label: 'English', value: 'ENGLISH' },
 		{ label: '中文', value: 'CHINESE_SIMPLIFIED' }
 	])
+	const remainingNum = ref(0)
 	const changeLang = (value: string) => {
 		locale.value = value
 		localStorage.setItem('language', value)
@@ -50,10 +60,32 @@
 	const logout = () => {
 		userInfoStore.logOut()
 	}
+	const getAvatarLimitNum = ()=>{
+		getAvatarLimit().then((res:any) => {
+			if (res) {
+				remainingNum.value = res
+			}
+		})	
+	}
 	const onProfileEdit = () => {
 		// MyEvent.emit('openProfileEditDialog')
-		console.log('openProfileEditDialog')
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/png, image/jpeg, image/jpg'
+		input.addEventListener('change', (e) => {
+			const file = e.target.files[0]
+			const formData = new FormData()
+			formData.append('avatar', file)
+			UpdateUserAvatar(formData).then((res) => {
+				userInfoStore.updateUserInfo({avatar: res})
+				getAvatarLimitNum()
+			})
+		})
+		input.click()
 	}
+	onMounted(()=>{
+		getAvatarLimitNum()
+	})
 </script>
  
 <style lang="less" scoped>
@@ -75,6 +107,7 @@
 			width: 100%;
 			height: 100%;
 			border-radius: 50%;
+			object-fit: cover;
 		}
 		> .edit {
 			position: absolute;