Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front

.gitea/workflows/prod_build_manual.yaml

@@ -0,0 +1,56 @@
+name: 手动触发 FiDA WEB-Node.js 生产分支构建部署
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+    env:
+      REMOTE_DEPLOY_PATH: /workspace/workspace_fida/Web_Workspace_Server/Prod
+
+    steps:
+      - name: 0.记录开始时间
+        id: build_start_time
+        run: echo "current_time=$(TZ='Asia/Hong_Kong' date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_OUTPUT
+
+      - name: 1.检出代码
+        uses: actions/checkout@v4
+        with:
+          ref: main
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build
+      - run: ls -l
+
+      - name: 3.同步文件到远程服务器
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          source: "./dist/*"
+          target: ${{ env.REMOTE_DEPLOY_PATH }}
+          ssh_options: "-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null"
+          strip_components: 0
+
+      - name: 4. 远程重载 Nginx 配置
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          # 核心：执行 Nginx 重载命令
+          script: |
+            echo "尝试重载 Nginx 服务..."
+            # 💡 注意：执行此命令需要服务器用户具有 sudo 权限，并且配置了 NOPASSWD。
+            # 否则工作流可能会因为权限不足而失败。
+            sudo systemctl reload nginx
+            echo "Nginx 重载命令已发送。"

package.json

@@ -2,6 +2,7 @@
   "name": "furniture",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/App.vue

@@ -1,5 +1,6 @@
 <template>
-	<RouteCache />
+	<!-- <RouteCache /> -->
+	 <router-view ></router-view>
 	<div id="loading" v-if="loading" v-loading="true"></div>
 </template>
 

src/assets/css/style.css

@@ -29,8 +29,28 @@ body,
     transform: rotate(360deg);
   }
 }
-.background-pink {
-  background-color: #f8f7f5;
-  background-image: url('@/assets/images/home-bg.png');
-  background-size: 100% 100%;
+.flex {
+  display: flex;
+}
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+.flex-1 {
+  flex: 1;
+}
+.flex-col {
+  flex-direction: column;
+}
+.align-center {
+  align-items: center;
+}
+.space-between {
+  justify-content: space-between;
+}
+.justify-center {
+  justify-content: center;
+}
+.relative {
+  position: relative;
 }

src/assets/css/style.less

@@ -34,12 +34,6 @@ body,
 	}
 }
 
-.background-pink {
-	background-color: rgba(248, 247, 245, 1);
-	background-image: url('@/assets/images/home-bg.png');
-	background-size: 100% 100%;
-}
-
 .flex{
 	display: flex;
 }

src/lang/en.ts

@@ -1,8 +1,9 @@
 export default {
+	AlphaVersion: '2026 Alpha Version',
 	Login: {
-		Login: 'Log in',
-		SignUp: 'Sign up',
-		LoginTo: 'Log on to',
+		login: 'Log in',
+		register: 'Register',
+		loginTo: 'Log on to <span>FiDA</span>',
 		LoginTitle: 'A multi-agent canvas for rapid, trend driven design iteration.',
 		name: 'Name',
 		email: 'Email',
@@ -21,7 +22,7 @@ export default {
 		agreeTermsPolicy:
 			'I agree to the <span onclick="onClickPrivacy()">Terms, Policy</span> and Fees.',
 		noAccountToSignUp: `Don't have an account? <span onclick="onClickRegister()">Sign up</span>`,
-		registerFor: 'Register for',
+		signUpFor: 'Sign up for <span>FiDA</span>',
 		registerTip: 'A multi-agent canvas for rapid, trend driven design iteration.',
 		havenAccountToLogin: `Already have an account? <span onclick="onClickLogin()">Log in</span>`,
 		verifyEmail: 'Verify your email address',
@@ -31,21 +32,23 @@ export default {
 		resendCodeIn: 'Resend Code in {time}',
 		orContinueWith: 'or continue with',
 		googleLogin: 'Sign in with Google',
-		wechatLogin: 'Sign in with Wechat'
+		wechatLogin: 'Sign in with Wechat',
+		indexTip: 'A multi-agent canvas for rapid, trend driven design iteration.',
 	},
 	Nuic: {
-		hiName: 'Hi, {name}.',
-		nuic1Title: `Help Fiphant discover the <b>'YOU'</b> in your space.`,
+		hiName: 'Hi, {name}. This is Fiphant.',
+		nuic1Title: `Help him discover the <b>"YOU"</b> in your space.`,
 		nuic1Tip: `Let's set up your profile. A few quick details will help Fiphant understand<br />your needs and find exactly what you're looking for.`,
 		letsGo: 'Let’s go, Fiphant!',
 		skip: 'Skip',
 		next: 'Next',
-		nuic2Title: `What's your dream <b>home vibe</b> ?`,
+		nuic2Title: `What <b>vibe</b> do you usually go for?`,
 		loadMore: 'Load more',
-		nuic3Title: `Where <b>are you based</b>? What do you <b>do</b> ?`,
+		nuic3Title: `<b>Where</b> are you based? What do you <b>do</b>?`,
 		basedIn: 'Based in',
 		role: 'Role',
-		allSet: 'All set!'
+		allSet: 'All set!',
+		loadingTip: 'We’re customizing your dashboard.',
 	},
 	Home: {
 		creditsNum: 'Credits: {num}',
@@ -118,7 +121,13 @@ export default {
 		branchingNodeTree: 'Branching Node Tree',
 		restore: 'Restore',
 		newChat: 'New Chat',
-		delete: 'Delete'
+		delete: 'Delete',
+		deleteChat:'Delete chat?',
+		deleteHint:'Once deleted, you won’t be able to view this conversation again.',
+		restoreChat:'Restore chat?',
+		restoreHint:'Once deleted, you won’t be able to view this conversation again.',
+		cancel: 'cancel',
+		Confirm: 'Confirm',
 	},
 	//generateSketch
 	generateSketch: {

src/lang/zh-cn.ts

@@ -103,5 +103,31 @@ export default {
 		copySuccess: '文本已复制到剪贴板',
 		copyFaild:
 			'复制失败。您的浏览器可能限制了剪贴板访问,请允许浏览器访问剪贴板或尝试手动复制。'
+	},
+
+	// Version Tree
+	VersionTree: {
+		versionInformation: '版本信息',
+		input: '用户请求',
+		userRequest: '用户请求',
+		sketch: '设计草图',
+		generateResult: '生成结果',
+		linearNodeTree: '线性节点树',
+		branchingNodeTree: '分支节点树',
+		restore: '恢复',
+		newChat: '新建对话',
+		delete: '删除',
+		deleteChat:'删除对话？',
+		deleteHint:'删除后将无法恢复该对话。',
+		restoreChat:'恢复对话？',
+		restoreHint:'恢复后将显示该对话。',
+		cancel: '取消',
+		Confirm: '确认',
+	},
+	//generateSketch
+	generateSketch: {
+		restore: '恢复',
+		delete: '删除',
+		edit: '编辑'
 	}
 }

src/router/index.ts

@@ -48,7 +48,7 @@ const router = createRouter({
                 {
                     path: '/home/versionTree',
                     name: 'versionTree',
-                    component: () => import('../views/home/versionTree.vue'),
+                    component: () => import('../views/home/VersionTree.vue'),
                     meta: { topNavStyle: '2' }
                 },
                 {

src/views/404.vue

@@ -1,6 +1,12 @@
 <template>
 	<div class="view-404">
-		<p>404 Not Found</p>
+		<!-- <p>404 Not Found</p> -->
+
+		<div class="demo">
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
 	</div>
 </template>
 
@@ -10,6 +16,8 @@
 
 <style lang="less">
 	.view-404 {
+		width: 100%;
+		height: 100%;
 		text-align: center;
 		> p {
 			margin-top: 5rem;
@@ -17,5 +25,68 @@
 			font-size: 3rem;
 			color: #0094ff;
 		}
+		> .demo {
+			position: absolute;
+			width: 127rem;
+			height: 72.6rem;
+			opacity: 0.8;
+			left: 50%;
+			bottom: 0;
+			transform: translateX(-50%) translateY(80%);
+			> div {
+				position: absolute;
+				border-radius: 50%;
+			}
+			> div:nth-child(1) {
+				width: 48.4rem;
+				height: 57.2rem;
+				top: 2.3rem;
+				left: 0rem;
+				background: linear-gradient(
+					130.72deg,
+					rgba(242, 171, 180, 0.2) 29.52%,
+					rgba(234, 133, 200, 0.2) 39.73%,
+					rgba(238, 64, 173, 0.2) 55.81%,
+					rgba(234, 133, 158, 0.2) 69.59%,
+					rgba(242, 171, 180, 0.2) 82.61%
+				);
+				transform: matrix(-0.16, -0.99, 0.97, -0.24, 0, 0);
+				filter: blur(11.5rem);
+			}
+			> div:nth-child(2) {
+				width: 44.6rem;
+				height: 56.8rem;
+				left: 56.6rem;
+				top: 0rem;
+
+				background: conic-gradient(
+					from 94.36deg at 71.77% 41.01%,
+					#f2abb4 0deg,
+					#ff6175 100.75deg,
+					#fe3b53 179.32deg,
+					#ff6175 252deg,
+					#f2abb4 360deg
+				);
+				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
+				filter: blur(12.927rem);
+			}
+			> div:nth-child(3) {
+				width: 79.958rem;
+				height: 28.1rem;
+				left: 11.724rem;
+				top: 12.353rem;
+
+				background: linear-gradient(
+					87.58deg,
+					#f1c191 23.02%,
+					rgba(255, 178, 91, 0.97) 35.36%,
+					#ff8e69 56.32%,
+					#f2ad7e 67.34%,
+					#ffe8c8 82.74%
+				);
+				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
+				filter: blur(13.17rem);
+			}
+		}
 	}
 </style>

src/views/canvas/components/cards/index.vue

@@ -26,7 +26,6 @@
 	import To3DModel from './to-3d-model.vue'
 	import AddPrint from './add-print.vue'
 	import ToCAD from './to-cad.vue'
-
 	import EditMaterial from './edit-material.vue'
 	const components = [
 		{

src/views/home/index.vue

@@ -1,5 +1,14 @@
 <template>
-	<div class="home background-pink">
+	<div class="bg bg-1">
+		<div class="topright"></div>
+		<div class="bottomleft"></div>
+	</div>
+	<div class="bg bg-2">
+		<div class="bottom-1"></div>
+		<div class="bottom-2"></div>
+		<div class="bottom-3"></div>
+	</div>
+	<div class="home">
 		<left-nav />
 		<div class="right-main">
 			<top-nav />
@@ -38,4 +47,150 @@
 			}
 		}
 	}
+	.bg-1 {
+		z-index: -1;
+	}
+	.bg-2 {
+		@keyframes bg-2 {
+			0% {
+				z-index: 10;
+			}
+			100% {
+				z-index: -1;
+			}
+		}
+		animation: bg-2 0.5s ease-in-out 1 both;
+	}
+	.bg {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		// background-color: rgba(248, 247, 245, 1);
+		> * {
+			position: absolute;
+			border-radius: 50%;
+		}
+		> .topright {
+			width: 174.7rem;
+			height: 42.1rem;
+			top: -15.7rem;
+			right: -70rem;
+
+			background: linear-gradient(
+				86.85deg,
+				rgba(244, 147, 116, 0.6) 13.62%,
+				rgba(241, 193, 145, 0.6) 25.57%,
+				rgba(255, 178, 91, 0.582) 41.03%,
+				rgba(242, 173, 126, 0.6) 59.37%,
+				rgba(255, 232, 200, 0.6) 75.27%
+			);
+			opacity: 0.2;
+			filter: blur(20.7656rem);
+			transform: rotate(178.95deg);
+		}
+		> .bottomleft {
+			// border-radius: 0;
+			// border: 1px solid #000;
+			width: 62.418rem;
+			height: 68.245rem;
+			left: -30rem;
+			bottom: 0;
+
+			background: linear-gradient(
+				161.16deg,
+				rgba(132, 230, 255, 0.2) 14.98%,
+				rgba(255, 223, 142, 0.2) 68.79%
+			);
+			filter: blur(8.263rem);
+			transform: rotate(-25.36deg);
+		}
+		> .bottom-1 {
+			animation: bottom-1 0.5s ease-in-out 1 both;
+			background: linear-gradient(
+				87.58deg,
+				rgba(241, 193, 145, 0.8) 23.02%,
+				rgba(255, 178, 91, 0.776) 35.36%,
+				rgba(244, 147, 116, 0.8) 56.32%,
+				rgba(242, 173, 126, 0.8) 67.34%,
+				rgba(255, 232, 200, 0.8) 82.74%
+			);
+			filter: blur(13.17rem);
+			transform: matrix(-1, 0.03, -0.05, -1, 0, 0);
+		}
+		> .bottom-2 {
+			animation: bottom-2 0.5s ease-in-out 1 both;
+
+			background: conic-gradient(
+				from 94.36deg at 71.77% 41.01%,
+				rgba(242, 171, 180, 0.2) 0deg,
+				rgba(255, 105, 117, 0.2) 100.75deg,
+				rgba(254, 59, 83, 0.2) 179.32deg,
+				rgba(255, 105, 117, 0.2) 252deg,
+				rgba(242, 171, 180, 0.2) 360deg
+			);
+			filter: blur(12.927rem);
+			transform: matrix(-0.05, 1, -1, -0.03, 0, 0);
+		}
+		> .bottom-3 {
+			animation: bottom-3 0.5s ease-in-out 1 both;
+			background: linear-gradient(
+				130.72deg,
+				rgba(242, 171, 180, 0.24) 29.52%,
+				rgba(234, 133, 200, 0.24) 39.73%,
+				rgba(238, 64, 173, 0.24) 55.81%,
+				rgba(234, 133, 158, 0.24) 69.59%,
+				rgba(242, 171, 180, 0.24) 82.61%
+			);
+			filter: blur(11.5411rem);
+			transform: matrix(-0.26, -0.97, 0.99, -0.15, 0, 0);
+		}
+		@keyframes bottom-1 {
+			0% {
+				width: 15rem;
+				height: 15rem;
+				left: 50%;
+				bottom: 50%;
+				transform: translate(0, 50%);
+			}
+			100% {
+				width: 138.014rem;
+				height: 29.323rem;
+				left: 32.123rem;
+				bottom: -21rem;
+				transform: translate(0, 0);
+			}
+		}
+		@keyframes bottom-2 {
+			0% {
+				width: 15rem;
+				height: 15rem;
+				left: 50%;
+				bottom: 50%;
+				transform: translate(0, 50%);
+			}
+			100% {
+				width: 42.215rem;
+				height: 98.009rem;
+				left: 150rem;
+				bottom: -65rem;
+				transform: translate(0, 0);
+			}
+		}
+		@keyframes bottom-3 {
+			0% {
+				width: 15rem;
+				height: 15rem;
+				left: 50%;
+				bottom: 50%;
+				transform: translate(0, 50%);
+			}
+			100% {
+				width: 51.936rem;
+				height: 97.139rem;
+				left: 40rem;
+				bottom: -65rem;
+				transform: translate(0, 0);
+			}
+		}
+	}
 </style>

src/views/home/versionTree/components/dialog.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	textData: {
+		type: Object,
+		default: () => {}
+	} as any,
+	styleData: {
+		type: Object,
+		default: () => {}
+	} as any,
+	callBack: {
+		type: Function,
+		default: () => {}
+	}
+})
+// const emit = defineEmits([
+// ])
+let data = reactive({
+})
+
+const dialogFormVisible = ref(false)
+
+const confirm = async ()=>{
+	if(props.callBack)await props.callBack()
+	dialogFormVisible.value = false
+}
+
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({open:()=>dialogFormVisible.value = true})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="dialog">
+		<el-dialog 
+			:align-center="true"
+			v-model="dialogFormVisible" 
+			:close-on-click-modal="false"
+			:title="props.textData?.title" 
+			:show-close="false"
+			:width="props.styleData?.width || '50%'">
+			<template #header="{ close, titleId, titleClass }">
+				<div class="my-header">
+					<div class="text">{{ props.textData?.title }}</div>
+					<div class="icon" @click="dialogFormVisible = false">
+						<SvgIcon
+							name="close"
+							size="8"
+						/>
+					</div>
+				</div>
+			</template>
+			<div class="boundary"></div>
+			<div class="dialog-content">
+				{{ props.textData?.text }}
+			</div>
+			<template #footer>
+				<div class="dialog-footer">
+					<div class="dialog-footer-cancel" @click="dialogFormVisible = false">
+						{{ props.textData?.cancelText || 'Cancel' }}
+					</div>
+					<div class="dialog-footer-confirm" type="primary" @click="confirm">
+					{{ props.textData?.submitText || 'Confirm' }}
+					</div>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+<style lang="less" scoped>
+	.dialog{
+		--el-dialog-padding-primary: 1.6rem 1.2rem;
+		--el-dialog-border-radius: .8rem;
+		:deep(.el-dialog){
+			.my-header{
+				display: flex;
+				padding: 0 .5rem;
+				justify-content: space-between;
+				--el-dialog-padding-primary: 1.2rem
+				.text{
+					font-family: 'Semibold';
+					font-size: 1.4rem;
+					line-height: 2rem;
+					letter-spacing: -0.18px;
+				}
+				.icon{
+					cursor: pointer;
+					width: 2rem;
+					height: 2rem;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+			.boundary{
+				border-bottom: .7px solid rgba(0, 0, 0, 0.1);
+				width: 100%;
+			}
+			.dialog-content{
+				padding: 0 .5rem;
+				padding-top: 1.2rem;
+				font-family: 'Regular';
+				font-weight: 400;
+				font-size: 1.2rem;
+				line-height: 2rem;
+				letter-spacing: -0.18px;
+			}
+			.dialog-footer{
+				display: flex;
+				justify-content: flex-end;
+				--el-dialog-padding-primary: 1.7rem;
+				> div{
+					font-weight: 500;
+					font-size: 1.2rem;
+					line-height: 2rem;
+					letter-spacing: -0.18px;
+					width: 5.9rem;
+					text-align: center;
+					cursor: pointer;
+					border-radius: 1.5rem;
+					padding: .3rem 0 .4rem;
+				}
+				.dialog-footer-cancel{
+					color: #000;
+					margin-right: .6rem;
+					border: 0.7px solid #0000001A;
+					background: #FFFFFF;
+				}
+				.dialog-footer-confirm{
+					color: #fff;
+					background-color: #f74545;
+				}
+			}
+		}
+	}
+</style>

src/views/home/versionTree/detail/chatDetail.vue

@@ -18,7 +18,7 @@ let data = reactive({
 onMounted(()=>{
 })
 onUnmounted(()=>{
-})
+}) 
 defineExpose({})
 const {} = toRefs(data);
 </script>

src/views/home/versionTree/detail/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import VersionDetail from './versionDetail.vue'
-import ChatHistory from './chatHistory.vue'
+import ChatDetail from './chatDetail.vue'
 //const props = defineProps({
 //})
 const emit = defineEmits([
@@ -14,7 +14,7 @@ const detailData = ref({
 		versionSketch:'Version 1 - Sketch',
 		versionSketchTime:'2023-08-01 10:00:00',
 	},
-	userChatHistory:{
+	userChatDetail:{
 
 	}
 	
@@ -35,10 +35,10 @@ defineExpose({})
 			></VersionDetail>
 		</div>
 		<div class="useInput">
-			<ChatHistory type="user"></ChatHistory>
+			<ChatDetail type="user"></ChatDetail>
 		</div>
 		<div class="systemInput">
-			<ChatHistory type="robot"></ChatHistory>
+			<ChatDetail type="robot"></ChatDetail>
 		</div>
 	</div>
 </template>

src/views/home/versionTree/tree/view2/index.vue

@@ -6,6 +6,7 @@ import SpecialEdge from './speciaiEdge.vue'
 import InputNode from './InputNode.vue'//主
 import SecondaryNode from './secondaryNode.vue'//分支
 import { useLayout } from '../../tools/tools'
+import dialogVue from "../../components/dialog.vue";
 const props = defineProps({
 	selectItem: {
 		type: Object,
@@ -22,6 +23,9 @@ const emit = defineEmits([
 	'versionDelete',
 ])
 
+const dialogDeleteRef = ref()
+const dialogRestoreRef = ref()
+
 // 节点类型：input、output、default、custom
 // input:开始点，output：结尾点，default：普通节点，custom：自定义节点
 const position = { x: 0, y: 0 }
@@ -88,10 +92,11 @@ watch(()=>props.selectItem.id, (newVal, oldVal) => {
 
 const versionRestore = ()=>{
 	emit('versionRestore')
+	dialogRestoreRef.value?.open()
 }
 
 const versionDelete = ()=>{
-	emit('versionDelete')
+	dialogDeleteRef.value?.open()
 }
 
 onMounted(()=>{
@@ -135,6 +140,30 @@ defineExpose({push})
 				</div>
 			</div>
 		</div>
+		<dialogVue 
+			:textData="{
+				title: $t('VersionTree.deleteChat'),
+				text: $t('VersionTree.deleteHint'),
+				submitText: $t('VersionTree.delete'),
+				cancelText: $t('VersionTree.cancel'),
+			}"
+			:styleData="{
+				width: '40.6rem'
+			}"
+			:callBack="()=>emit('versionDelete')"
+			ref="dialogDeleteRef" />
+		<dialogVue 
+			:textData="{
+				title: $t('VersionTree.restoreChat'),
+				text: $t('VersionTree.restoreHint'),
+				submitText: $t('VersionTree.confirm'),
+				cancelText: $t('VersionTree.cancel'),
+			}"
+			:styleData="{
+				width: '40.6rem'
+			}"
+			:callBack="()=>emit('versionRestore')"
+			ref="dialogRestoreRef" />
 	</div>
 </template>
 <style lang="less">

src/views/login/index.vue

@@ -5,7 +5,7 @@
 			<img src="@/assets/images/logo-1.png" class="logo" />
 			<p class="split"></p>
 			<button class="login" @click="onLogin">{{ $t('Login.login') }}</button>
-			<button class="register" @click="onRegister">{{ $t('Login.signUp') }}</button>
+			<button class="register" @click="onRegister">{{ $t('Login.register') }}</button>
 		</div>
 		<img src="@/assets/images/login/index-title.png" class="title" draggable="false" />
 		<img src="@/assets/images/login/index-zhuangshi.png" class="zhuangshi" draggable="false" />

src/views/nuic/index.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="nuic background-pink">
+	<div class="nuic">
 		<img class="logo" src="@/assets/images/logo-2.png" />
-		<div class="header" v-show="!loading">
+		<div class="header" :class="{ loading }">
 			<div class="close" @click="onClose">
 				<svg-icon name="close-border" size="33" />
 			</div>
@@ -19,11 +19,14 @@
 				/>
 			</div>
 		</div>
-		<component v-show="!loading" class="view" :is="list[active]" @next="onNext" />
-		<div class="loading" v-show="loading">
-			<img src="@/assets/images/nuic/loading.png" />
-			<p class="tip">{{ $t('Nuic.loadingTip') }}</p>
+		<component :class="{ loading }" class="view" :is="list[active]" @next="onNext" />
+		<div class="bg" :class="{ loading }">
+			<div class="bg-3"></div>
+			<div class="bg-2"></div>
+			<div class="bg-1"></div>
 		</div>
+		<img class="loading-img" :class="{ loading }" src="@/assets/images/nuic/xiang.png" />
+		<div class="loading-tip" :class="{ loading }">{{ $t('Nuic.loadingTip') }}</div>
 	</div>
 </template>
 
@@ -49,7 +52,7 @@
 			loading.value = true
 			setTimeout(() => {
 				router.push({ name: 'mainInput' })
-			}, 1000)
+			}, 5000)
 		}
 	}
 </script>
@@ -62,8 +65,20 @@
 		position: relative;
 		display: flex;
 		flex-direction: column;
+		// background-color: #f8f7f5;
 		// align-items: center;
 		// justify-content: center;
+		> * {
+			transition: opacity 0.5s ease-in-out;
+		}
+		> *:not(.bg):not(.loading-img):not(.loading-tip) {
+			z-index: 10;
+			opacity: 1;
+			&.loading {
+				opacity: 0;
+				z-index: -1;
+			}
+		}
 		> .logo {
 			position: absolute;
 			top: 2.7rem;
@@ -147,18 +162,228 @@
 				}
 			}
 		}
-		> .loading {
+		> .loading-img {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 14.4rem;
+			height: auto;
+			opacity: 0;
+			&.loading {
+				opacity: 1;
+			}
+		}
+		> .loading-tip {
+			position: absolute;
 			width: 100%;
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			background-color: #f8f7f5;
-			> .tip {
-				font-family: Regular;
-				font-size: 3rem;
-				color: #585858;
+			left: 0;
+			bottom: 25.2rem;
+			text-align: center;
+			font-family: Regular;
+			font-size: 3rem;
+			color: #585858;
+
+			opacity: 0;
+			&.loading {
+				opacity: 1;
+			}
+		}
+		> .bg {
+			position: absolute;
+			// border: 1px solid #000;
+			&,
+			& > * {
+				transition: all 0.5s ease-in-out;
+				animation-delay: 0.5s;
+				animation-duration: 6s;
+				animation-timing-function: linear;
+				animation-iteration-count: infinite;
+			}
+			> div {
+				position: absolute;
+				border-radius: 50%;
+			}
+			> div.bg-1 {
+				background: linear-gradient(
+					130.72deg,
+					rgba(242, 171, 180, 0.2) 29.52%,
+					rgba(234, 133, 200, 0.2) 39.73%,
+					rgba(238, 64, 173, 0.2) 55.81%,
+					rgba(234, 133, 158, 0.2) 69.59%,
+					rgba(242, 171, 180, 0.2) 82.61%
+				);
+			}
+			> div.bg-2 {
+				background: conic-gradient(
+					from 94.36deg at 71.77% 41.01%,
+					rgba(242, 171, 180, 0.2) 0deg,
+					rgba(255, 97, 117, 0.2) 100.75deg,
+					rgba(254, 59, 83, 0.2) 179.32deg,
+					rgba(255, 97, 117, 0.2) 252deg,
+					rgba(242, 171, 180, 0.2) 360deg
+				);
+			}
+			> div.bg-3 {
+				background: linear-gradient(
+					87.58deg,
+					#f1c191 23.02%,
+					rgba(255, 178, 91, 0.97) 35.36%,
+					#ff8e69 56.32%,
+					#f2ad7e 67.34%,
+					#ffe8c8 82.74%
+				);
+			}
+		}
+		> .bg.loading {
+			width: 47.873rem;
+			height: 46.704rem;
+			left: 50%;
+			top: 50%;
+			transform: translateX(-50%) translateY(-50%);
+			animation-name: bg;
+			> img {
+				opacity: 1;
+			}
+			> div.bg-1 {
+				animation-name: bg_1;
+				width: 34.164rem;
+				height: 34.92rem;
+				left: 2rem;
+				top: 5rem;
+				filter: blur(11.5rem);
+				transform: matrix(-0.16, -0.99, 0.97, -0.24, 0, 0);
+			}
+			> div.bg-2 {
+				animation-name: bg_2;
+				width: 25.8rem;
+				height: 25.8rem;
+				left: 17rem;
+				top: 4rem;
+				filter: blur(5.48507rem);
+				transform: matrix(0.4, -0.92, 0.91, 0.42, 0, 0);
+			}
+			> div.bg-3 {
+				animation-name: bg_3;
+				width: 25.8rem;
+				height: 25.8rem;
+				left: 10.4rem;
+				top: 17.7rem;
+				filter: blur(5.48507rem);
+				transform: matrix(-0.97, -0.23, 0.25, -0.97, 0, 0);
+			}
+		}
+		> .bg:not(.loading) {
+			width: 127rem;
+			height: 72.6rem;
+			left: 50%;
+			bottom: 0;
+			transform: translateX(-50%) translateY(80%);
+			> div.bg-1 {
+				width: 48.4rem;
+				height: 57.2rem;
+				top: 2.3rem;
+				left: 0rem;
+				transform: matrix(-0.16, -0.99, 0.97, -0.24, 0, 0);
+				filter: blur(11.5rem);
+			}
+			> div.bg-2 {
+				width: 44.6rem;
+				height: 56.8rem;
+				left: 56.6rem;
+				top: 0rem;
+				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
+				filter: blur(12.927rem);
+			}
+			> div.bg-3 {
+				width: 79.958rem;
+				height: 28.1rem;
+				left: 11.724rem;
+				top: 12.353rem;
+				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
+				filter: blur(13.17rem);
+			}
+		}
+
+		@keyframes bg {
+			15% {
+				width: 56.647rem;
+				height: 51.794rem;
+			}
+			50% {
+				width: 46.179rem;
+				height: 36.712rem;
+			}
+			75% {
+				width: 52.947rem;
+				height: 46.894rem;
+			}
+		}
+
+		@keyframes bg_1 {
+			15% {
+				width: 34.2rem;
+				height: 34.9rem;
+				left: 3rem;
+				top: 12.7rem;
+			}
+			50% {
+				width: 27.321rem;
+				height: 27.926rem;
+				left: 16.7rem;
+				top: 3.6rem;
+			}
+			75% {
+				width: 34.164rem;
+				height: 34.92rem;
+				left: 2.5rem;
+				top: 8rem;
+			}
+		}
+		@keyframes bg_2 {
+			15% {
+				width: 25.8rem;
+				height: 25.8rem;
+				left: 25.5rem;
+				top: 5rem;
+				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
+			}
+			50% {
+				width: 25.8rem;
+				height: 25.8rem;
+				left: 4rem;
+				top: 4rem;
+				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
+			}
+			75% {
+				width: 25.8rem;
+				height: 25.8rem;
+				left: 21.8rem;
+				top: 5rem;
+				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
+			}
+		}
+		@keyframes bg_3 {
+			15% {
+				width: 25.8rem;
+				height: 25.8rem;
+				left: 14.603rem;
+				top: 11.784rem;
+				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
+			}
+			50% {
+				width: 25.8rem;
+				height: 25.8rem;
+				left: 10.701rem;
+				top: 5.283rem;
+				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
+			}
+			75% {
+				width: 25.8rem;
+				height: 25.8rem;
+				left: 12.303rem;
+				top: 6.884rem;
+				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
 			}
 		}
 	}

src/views/nuic/nuic-2.vue

@@ -5,7 +5,7 @@
 			<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
 				<img :src="v.url" draggable="false" />
 				<div class="active" v-show="v.active">
-					<span>这是一段文字</span>
+					<span>{{ v.title }}</span>
 				</div>
 			</div>
 		</div>
@@ -25,14 +25,14 @@
 	const router = useRouter()
 	const emit = defineEmits(['next'])
 	const list = ref([
-		{ id: 1, url: '/image/nuic/style-1.png', active: false },
-		{ id: 2, url: '/image/nuic/style-2.png', active: false },
-		{ id: 3, url: '/image/nuic/style-3.png', active: false },
-		{ id: 4, url: '/image/nuic/style-4.png', active: false },
-		{ id: 5, url: '/image/nuic/style-5.png', active: false },
-		{ id: 6, url: '/image/nuic/style-6.png', active: false },
-		{ id: 7, url: '/image/nuic/style-7.png', active: false },
-		{ id: 8, url: '/image/nuic/style-8.png', active: false }
+		{ id: 1, url: '/image/nuic/style-1.png', title: '凳子', active: false },
+		{ id: 2, url: '/image/nuic/style-2.png', title: '沙发', active: false },
+		{ id: 3, url: '/image/nuic/style-3.png', title: '凳子', active: false },
+		{ id: 4, url: '/image/nuic/style-4.png', title: '桌子', active: false },
+		{ id: 5, url: '/image/nuic/style-5.png', title: '桌子', active: false },
+		{ id: 6, url: '/image/nuic/style-6.png', title: '桌子', active: false },
+		{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
+		{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
 	])
 	const onLoadMore = () => {}
 </script>

src/views/nuic/nuic-3.vue

@@ -77,17 +77,16 @@
 				color: #252727;
 				font-family: LBold;
 			}
-			> .el-select {
+			&:deep(> .el-select) {
 				width: 100%;
 				--el-border-radius-base: 0.8rem;
-				&:deep {
-					font-family: Regular;
-					.el-select__wrapper {
-						min-height: auto;
-						height: 6rem;
-						font-size: 2rem;
-						padding: 0 1.8rem;
-					}
+
+				font-family: Regular;
+				.el-select__wrapper {
+					min-height: auto;
+					height: 6rem;
+					font-size: 2rem;
+					padding: 0 1.8rem;
 				}
 			}
 		}